feat: Moves inline token api out of private

cloudscape-design · Jan 10, 2025 · cf0e29b · cf0e29b
1 parent 67c06fa
commit cf0e29b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/src/multiselect/__tests__/multiselect.test.tsx b/src/multiselect/__tests__/multiselect.test.tsx
@@ -650,10 +650,10 @@ test('Trigger receives focus when autofocus is true', () => {
   expect(document.activeElement).toBe(wrapper.findTrigger().getElement());
 });
 
-describe('With inline tokens (private API)', () => {
+describe('With inline tokens', () => {
   it('can render inline tokens', () => {
     const { wrapper } = renderMultiselect(
-      <Multiselect {...{ inlineTokens: true }} options={defaultOptions} selectedOptions={[defaultOptions[0]]} />
+      <Multiselect inlineTokens={true} options={defaultOptions} selectedOptions={[defaultOptions[0]]} />
     );
 
     // Trigger contains token labels and the number of selected items
@@ -666,7 +666,7 @@ describe('With inline tokens (private API)', () => {
 
   it('shows placeholder when no items are selected', () => {
     const { wrapper } = renderMultiselect(
-      <Multiselect {...{ inlineTokens: true }} selectedOptions={[]} placeholder="Choose something" />
+      <Multiselect inlineTokens={true} selectedOptions={[]} placeholder="Choose something" />
     );
 
     expect(wrapper.findTrigger().getElement()).toHaveTextContent('Choose something');
@@ -677,7 +677,7 @@ describe('With inline tokens (private API)', () => {
       { value: '1', label: 'First', description: 'description', tags: ['tag'], labelTag: 'label' },
     ];
     const { wrapper } = renderMultiselect(
-      <Multiselect {...{ inlineTokens: true }} options={extendedOptions} selectedOptions={[extendedOptions[0]]} />
+      <Multiselect inlineTokens={true} options={extendedOptions} selectedOptions={[extendedOptions[0]]} />
     );
 
     expect(wrapper.findTrigger().getElement()).toHaveTextContent('First');
@@ -689,7 +689,7 @@ describe('With inline tokens (private API)', () => {
   it('shows multiple selected options inline', () => {
     const { wrapper } = renderMultiselect(
       <Multiselect
-        {...{ inlineTokens: true }}
+        inlineTokens={true}
         options={defaultOptions}
         selectedOptions={[defaultOptions[0], defaultOptions[1], defaultOptions[2]]}
       />

diff --git a/src/multiselect/interfaces.ts b/src/multiselect/interfaces.ts
@@ -23,6 +23,10 @@ export interface MultiselectProps extends BaseSelectProps {
    * Only use this if the selected options are displayed elsewhere on the page.
    */
   hideTokens?: boolean;
+  /**
+   * Shows tokens inside the input instead of below.
+   */
+  inlineTokens?: boolean;
   /**
    * Specifies an `aria-label` for the token deselection button.
    * @i18n

diff --git a/src/multiselect/internal.tsx b/src/multiselect/internal.tsx
@@ -28,7 +28,7 @@ type InternalMultiselectProps = SomeRequired<
   MultiselectProps,
   'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen' | 'hideTokens'
 > &
-  InternalBaseComponentProps & { inlineTokens?: boolean };
+  InternalBaseComponentProps;
 
 const InternalMultiselect = React.forwardRef(
   (