Add TypeScript types to FilterableMultiSelect (#16147)

* feat: switch from js to ts * feat: added types to filterableMultiSelect * fix: added useCombobox * fix: added disabled isItemDisabled * fix: fixed menu click close * fix: fixed style for disabled items * fix: fixed disabled option * fix: added useSelection and interfaces * fix: fixed selection using controlledSelectedItem from useSelection * fix: fixing selection order * fixed sorting issue and copied lisboxTrigger changes * fix: added onInputValueChange on inputChange * fix: revert file extension to avoid error * fix: added aria-haspopup to input props * test: added ts-ignore * test: added ts-expect-error in the ComboBox and Filterable * fix: added tsx to index.js file * fix: accessibility test * test: fixed test failing on multiselect * fix: added open state to arrow down * fix: fixed disabled seletion on enter & added titleText to propTypes * test: updated snapshots * Update packages/react/src/components/ListBox/next/ListBoxTrigger.js * test: added onChange to storybook * fix: removed comment --------- Co-authored-by: Preeti Bansal <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · May 8, 2024 · 5f35edd · 5f35edd
1 parent de133be
commit 5f35edd
Show file tree

Hide file tree

Showing 9 changed files with 1,070 additions and 740 deletions.
diff --git a/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js b/e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js
@@ -171,7 +171,7 @@ test.describe('@avt MultiSelect', () => {
     await expect(selection).toBeHidden();
   });
 
-  test.slow('@avt-keyboard-nav filterable multiselect', async ({ page }) => {
+  test('@avt-keyboard-nav filterable multiselect', async ({ page }) => {
     await visitStory(page, {
       component: 'FilterableMultiSelect',
       id: 'components-multiselect--filterable',

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3755,6 +3755,9 @@ Map {
       "sortItems": Object {
         "type": "func",
       },
+      "titleText": Object {
+        "type": "node",
+      },
       "translateWithId": Object {
         "type": "func",
       },
@@ -5425,6 +5428,9 @@ Map {
         "sortItems": Object {
           "type": "func",
         },
+        "titleText": Object {
+          "type": "node",
+        },
         "translateWithId": Object {
           "type": "func",
         },

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -745,6 +745,7 @@ const ComboBox = forwardRef(
                   )}
                   <ListBoxTrigger
                     {...buttonProps}
+                    // @ts-expect-error
                     isOpen={isOpen}
                     translateWithId={translateWithId}
                   />

diff --git a/packages/react/src/components/ListBox/next/ListBoxTrigger.js b/packages/react/src/components/ListBox/next/ListBoxTrigger.js
@@ -27,11 +27,10 @@ const defaultTranslateWithId = (id) => defaultTranslations[id];
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
-const ListBoxTrigger = ({
-  isOpen,
-  translateWithId: t = defaultTranslateWithId,
-  ...rest
-}) => {
+const ListBoxTrigger = React.forwardRef(function ListBoxTrigger(
+  { isOpen, translateWithId: t = defaultTranslateWithId, ...rest },
+  ref
+) {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--list-box__menu-icon`]: true,
@@ -45,11 +44,12 @@ const ListBoxTrigger = ({
       title={description}
       className={className}
       type="button"
-      tabIndex="-1">
+      tabIndex="-1"
+      ref={ref}>
       <ChevronDown />
     </button>
   );
-};
+});
 
 ListBoxTrigger.propTypes = {
   /**