refactor: Introduces use-multiselect helper (#2759)

cloudscape-design · Sep 26, 2024 · 50863f6 · 50863f6
1 parent acc6d99
commit 50863f6
Show file tree

Hide file tree

Showing 6 changed files with 329 additions and 216 deletions.
diff --git a/pages/property-filter/custom-forms.tsx b/pages/property-filter/custom-forms.tsx
@@ -234,7 +234,11 @@ export function OwnerMultiSelectForm({ value, onChange }: ExtendedOperatorFormPr
               .filter((value): value is string => typeof value !== 'undefined')
           )
         }
+        statusType="finished"
+        filteringType="none"
         expandToViewport={true}
+        keepOpen={true}
+        hideTokens={false}
         inlineTokens={true}
       />
     </FormField>

diff --git a/src/internal/components/chart-filter/index.tsx b/src/internal/components/chart-filter/index.tsx
@@ -76,6 +76,9 @@ function ChartFilter<T>({ series, i18nStrings, selectedSeries, onChange, ...rest
         onChange={updateSelection}
         className={styles['chart-filter']}
         selectedAriaLabel={i18nStrings?.filterSelectedAriaLabel}
+        filteringType="none"
+        statusType="finished"
+        keepOpen={true}
         hideTokens={true}
       />
     </InternalFormField>

diff --git a/src/internal/components/dropdown-status/index.tsx b/src/internal/components/dropdown-status/index.tsx
@@ -52,7 +52,7 @@ type UseDropdownStatus = ({
   onRecoveryClick,
 }: DropdownStatusPropsExtended) => DropdownStatusResult;
 
-interface DropdownStatusResult {
+export interface DropdownStatusResult {
   isSticky: boolean;
   content: React.ReactNode | null;
 }

diff --git a/src/multiselect/__tests__/analytics-metadata.test.tsx b/src/multiselect/__tests__/analytics-metadata.test.tsx
@@ -306,6 +306,10 @@ test('Internal Multiselect does not render "component" metadata', () => {
       selectedOptions={[]}
       ariaLabel="multiselect with metadatada"
       onChange={() => {}}
+      keepOpen={true}
+      hideTokens={false}
+      statusType="finished"
+      filteringType="none"
     />
   );
   const wrapper = createWrapper(renderResult.container).findMultiselect()!;