@carbon/react 1.56.0 → 1.57.0

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -8,14 +8,13 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
-import Downshift from 'downshift';
+import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
-import Selection from '../../internal/Selection.js';
 import { defaultItemToString } from './tools/itemToString.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -24,12 +23,34 @@ import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import { useSelection } from '../../internal/Selection.js';
 import { match } from '../../internal/keyboard/match.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Escape, Space, Enter, Delete, Tab, Home, End } from '../../internal/keyboard/keys.js';
 
+const {
+  InputBlur,
+  InputKeyDownEnter,
+  ItemClick,
+  MenuMouseLeave,
+  InputKeyDownArrowUp,
+  InputKeyDownArrowDown,
+  ItemMouseMove,
+  InputClick,
+  ToggleButtonClick,
+  FunctionToggleMenu,
+  InputChange,
+  InputKeyDownEscape,
+  FunctionSetHighlightedIndex
+} = useCombobox.stateChangeTypes;
+const {
+  SelectedItemKeyDownBackspace,
+  SelectedItemKeyDownDelete,
+  DropdownKeyDownBackspace,
+  FunctionRemoveSelectedItem
+} = useMultipleSelection.stateChangeTypes;
 const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     className: containerClassName,
@@ -60,6 +81,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     titleText,
     type,
     selectionFeedback = 'top-after-reopen',
+    selectedItems: selected,
     size,
     sortItems = defaultSortItems,
     translateWithId,
@@ -72,20 +94,41 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     isFluid
   } = useContext(FormContext);
   const [isFocused, setIsFocused] = useState(false);
-  const [isOpen, setIsOpen] = useState(open);
-  const [prevOpen, setPrevOpen] = useState(open);
+  const [isOpen, setIsOpen] = useState(!!open);
+  const [prevOpen, setPrevOpen] = useState(!!open);
   const [inputValue, setInputValue] = useState('');
   const [topItems, setTopItems] = useState(initialSelectedItems ?? []);
   const [inputFocused, setInputFocused] = useState(false);
-  const [highlightedIndex, setHighlightedIndex] = useState(null);
-  const [currentSelectedItems, setCurrentSelectedItems] = useState(initialSelectedItems ?? []);
-  const textInput = useRef();
+  const {
+    selectedItems: controlledSelectedItems,
+    onItemChange,
+    clearSelection
+  } = useSelection({
+    disabled,
+    initialSelectedItems,
+    onChange,
+    selectedItems: selected
+  });
+  const textInput = useRef(null);
   const filterableMultiSelectInstanceId = useId();
   const prefix = usePrefix();
   if (prevOpen !== open) {
     setIsOpen(open);
     setPrevOpen(open);
   }
+  const sortedItems = sortItems(filterItems(items, {
+    itemToString,
+    inputValue
+  }), {
+    selectedItems: {
+      top: controlledSelectedItems,
+      fixed: [],
+      'top-after-reopen': topItems
+    }[selectionFeedback],
+    itemToString,
+    compareItems,
+    locale
+  });
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
   const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
@@ -122,101 +165,170 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   const inputId = `${id}-input`;
   useEffect(() => {
     if (!isOpen) {
-      setTopItems(currentSelectedItems);
+      setTopItems(controlledSelectedItems);
     }
-  }, [currentSelectedItems, isOpen, setTopItems]);
-  function handleOnChange(changes) {
-    setCurrentSelectedItems(changes.selectedItems);
-    if (onChange) {
-      onChange(changes);
-    }
-  }
-  function handleOnMenuChange(forceIsOpen) {
+  }, [controlledSelectedItems, isOpen, setTopItems]);
+  function handleMenuChange(forceIsOpen) {
     const nextIsOpen = forceIsOpen ?? !isOpen;
     setIsOpen(nextIsOpen);
     if (onMenuChange) {
       onMenuChange(nextIsOpen);
     }
-    if (!isOpen) {
-      setHighlightedIndex(0);
-    }
   }
-  function handleOnOuterClick() {
-    handleOnMenuChange(false);
-  }
-  function handleOnStateChange(changes) {
+  const {
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    setHighlightedIndex,
+    getItemProps,
+    openMenu,
+    isOpen: isMenuOpen
+  } = useCombobox({
+    isOpen,
+    items: sortedItems,
+    itemToString,
+    defaultHighlightedIndex: 0,
+    // after selection, highlight the first item.
+    id,
+    labelId,
+    menuId,
+    inputId,
+    inputValue,
+    stateReducer,
+    isItemDisabled(item, _index) {
+      return item.disabled;
+    }
+  });
+  function stateReducer(state, actionAndChanges) {
     const {
-      type
-    } = changes;
+      type,
+      props,
+      changes
+    } = actionAndChanges;
     const {
-      stateChangeTypes
-    } = Downshift;
+      highlightedIndex
+    } = changes;
+    if (changes.isOpen && !isOpen) {
+      setTopItems(controlledSelectedItems);
+    }
     switch (type) {
-      case stateChangeTypes.keyDownArrowDown:
-      case stateChangeTypes.keyDownArrowUp:
-      case stateChangeTypes.keyDownHome:
-      case stateChangeTypes.keyDownEnd:
-        setHighlightedIndex(changes.highlightedIndex !== undefined ? changes.highlightedIndex : 0);
-        if (stateChangeTypes.keyDownArrowDown === type && !isOpen) {
-          handleOnMenuChange(true);
+      case InputKeyDownEnter:
+        if (changes.selectedItem && changes.selectedItem.disabled !== true) {
+          onItemChange(changes.selectedItem);
         }
-        break;
-      case stateChangeTypes.keyDownEscape:
-        handleOnMenuChange(false);
-        setHighlightedIndex(0);
-        break;
-      case stateChangeTypes.changeInput:
-        setHighlightedIndex(0);
-        break;
-      case stateChangeTypes.keyDownEnter:
-        if (!isOpen) {
-          setHighlightedIndex(0);
+        setHighlightedIndex(changes.selectedItem);
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case ItemClick:
+        if (changes.selectedItem) {
+          onItemChange(changes.selectedItem);
+        }
+        setHighlightedIndex(changes.selectedItem);
+        return changes;
+      case InputBlur:
+      case InputKeyDownEscape:
+        setIsOpen(false);
+        return changes;
+      case FunctionToggleMenu:
+      case ToggleButtonClick:
+        if (changes.isOpen && !changes.selectedItem) {
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
+        }
+        return changes;
+      case InputChange:
+        if (onInputValueChange) {
+          onInputValueChange(changes.inputValue);
+        }
+        setInputValue(changes.inputValue ?? '');
+        setIsOpen(true);
+        return changes;
+      case InputClick:
+        return {
+          ...changes,
+          isOpen: false
+        };
+      case MenuMouseLeave:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case InputKeyDownArrowUp:
+      case InputKeyDownArrowDown:
+        if (InputKeyDownArrowDown === type && !isOpen) {
+          setIsOpen(true);
         }
-        break;
-      case stateChangeTypes.clickItem:
-        if (isOpen) {
-          const sortedItems = sortItems(filterItems(items, {
-            itemToString,
-            inputValue
-          }), {
-            selectedItems: {
-              top: changes.selectedItems,
-              fixed: [],
-              'top-after-reopen': topItems
-            }[selectionFeedback],
-            itemToString,
-            compareItems,
-            locale
-          });
-          const sortedSelectedIndex = sortedItems.indexOf(changes.selectedItem);
-          setHighlightedIndex(sortedSelectedIndex);
+        if (highlightedIndex > -1) {
+          const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+          props.scrollIntoView(itemArray[highlightedIndex]);
         }
-        break;
+        if (highlightedIndex === -1) {
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
+        }
+        return changes;
+      case ItemMouseMove:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case FunctionSetHighlightedIndex:
+        if (!isOpen) {
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
+        } else {
+          return {
+            ...changes,
+            highlightedIndex: props.items.indexOf(highlightedIndex)
+          };
+        }
+      default:
+        return changes;
     }
   }
-  function handleOnInputValueChange(inputValue, _ref2) {
-    let {
-      type
-    } = _ref2;
-    if (onInputValueChange) {
-      onInputValueChange(inputValue);
+  const {
+    getDropdownProps
+  } = useMultipleSelection({
+    ...downshiftProps,
+    activeIndex: highlightedIndex,
+    initialSelectedItems,
+    selectedItems: controlledSelectedItems,
+    itemToString,
+    onStateChange(changes) {
+      switch (changes.type) {
+        case SelectedItemKeyDownBackspace:
+        case SelectedItemKeyDownDelete:
+        case DropdownKeyDownBackspace:
+        case FunctionRemoveSelectedItem:
+          {
+            clearSelection();
+            break;
+          }
+      }
     }
-    if (type !== Downshift.stateChangeTypes.changeInput) {
-      return;
+  });
+  useEffect(() => {
+    if (isOpen && !isMenuOpen) {
+      openMenu();
     }
-    if (Array.isArray(inputValue)) {
-      clearInputValue();
+  });
+  function clearInputValue(event) {
+    const value = textInput.current?.value;
+    if (value?.length === 1 || event && match(event, Escape)) {
+      setInputValue('');
     } else {
-      setInputValue(inputValue);
+      setInputValue(value ?? '');
     }
-    if (inputValue && !isOpen) {
-      handleOnMenuChange(true);
-    } else if (!inputValue && isOpen) {
-      handleOnMenuChange(false);
-    }
-  }
-  function clearInputValue(event) {
-    textInput.current.value.length === 1 || match(event, Escape) ? setInputValue('') : setInputValue(textInput.current.value);
     if (textInput.current) {
       textInput.current.focus();
     }
@@ -229,239 +341,197 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       size: 'mini'
     });
   }
-  return /*#__PURE__*/React__default.createElement(Selection, {
-    disabled: disabled,
-    onChange: handleOnChange,
-    initialSelectedItems: initialSelectedItems,
-    render: _ref3 => {
-      let {
-        selectedItems,
-        onItemChange,
-        clearSelection
-      } = _ref3;
-      return /*#__PURE__*/React__default.createElement(Downshift, _extends({}, downshiftProps, {
-        highlightedIndex: highlightedIndex,
-        id: id,
-        isOpen: isOpen,
-        inputValue: inputValue,
-        onInputValueChange: handleOnInputValueChange,
-        onChange: selectedItem => {
-          if (selectedItem !== null) {
-            onItemChange(selectedItem);
-          }
-        },
-        itemToString: itemToString,
-        onStateChange: handleOnStateChange,
-        onOuterClick: handleOnOuterClick,
-        selectedItem: selectedItems,
-        labelId: labelId,
-        menuId: menuId,
-        inputId: inputId
-      }), _ref4 => {
-        let {
-          getInputProps,
-          getItemProps,
-          getLabelProps,
-          getMenuProps,
-          getRootProps,
-          getToggleButtonProps,
-          isOpen,
-          inputValue,
-          selectedItem
-        } = _ref4;
-        const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
-          [`${prefix}--multi-select--invalid`]: invalid,
-          [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
-          [`${prefix}--multi-select--open`]: isOpen,
-          [`${prefix}--multi-select--inline`]: inline,
-          [`${prefix}--multi-select--selected`]: selectedItem.length > 0,
-          [`${prefix}--multi-select--filterable--input-focused`]: inputFocused
-        });
-        const rootProps = getRootProps({}, {
-          suppressRefError: true
-        });
-        const labelProps = getLabelProps();
-        const buttonProps = getToggleButtonProps({
-          disabled,
-          onClick: () => {
-            handleOnMenuChange(!isOpen);
-            if (textInput.current) {
-              textInput.current.focus();
-            }
-          },
-          // When we moved the "root node" of Downshift to the <input> for
-          // ARIA 1.2 compliance, we unfortunately hit this branch for the
-          // "mouseup" event that downshift listens to:
-          // https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
-          //
-          // As a result, it will reset the state of the component and so we
-          // stop the event from propagating to prevent this. This allows the
-          // toggleMenu behavior for the toggleButton to correctly open and
-          // close the menu.
-          onMouseUp(event) {
-            if (isOpen) {
-              event.stopPropagation();
-            }
-          }
-        });
-        const inputProps = getInputProps({
-          'aria-controls': isOpen ? menuId : null,
-          'aria-describedby': helperText ? helperId : null,
-          // Remove excess aria `aria-labelledby`. HTML <label for>
-          // provides this aria information.
-          'aria-labelledby': null,
-          disabled,
-          placeholder,
-          onClick: () => {
-            handleOnMenuChange(true);
-          },
-          onKeyDown: event => {
-            if (match(event, Space)) {
-              event.stopPropagation();
-            }
-            if (match(event, Enter)) {
-              handleOnMenuChange(true);
-            }
-            if (!disabled) {
-              if (match(event, Delete) || match(event, Escape)) {
-                if (isOpen) {
-                  handleOnMenuChange(true);
-                  clearInputValue(event);
-                  event.stopPropagation();
-                } else if (!isOpen) {
-                  clearInputValue(event);
-                  clearSelection();
-                  event.stopPropagation();
-                }
-              }
-            }
-            if (match(event, Tab)) {
-              handleOnMenuChange(false);
-            }
-            if (match(event, Home) && event.code !== 'Numpad7') {
-              event.target.setSelectionRange(0, 0);
-            }
-            if (match(event, End) && event.code !== 'Numpad1') {
-              event.target.setSelectionRange(event.target.value.length, event.target.value.length);
-            }
-          },
-          onFocus: () => {
-            setInputFocused(true);
-          },
-          onBlur: () => {
-            setInputFocused(false);
-            setInputValue('');
-          }
-        });
-        const menuProps = getMenuProps({}, {
-          suppressRefError: true
-        });
-        const handleFocus = evt => {
-          if (evt.target.classList.contains(`${prefix}--tag__close-icon`) || evt.target.classList.contains(`${prefix}--list-box__selection`)) {
-            setIsFocused(false);
-          } else {
-            setIsFocused(evt.type === 'focus' ? true : false);
-          }
-        };
-        const clearSelectionContent = selectedItems.length > 0 ? /*#__PURE__*/React__default.createElement("span", {
-          className: `${prefix}--visually-hidden`
-        }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default.createElement("span", {
-          className: `${prefix}--visually-hidden`
-        }, clearSelectionDescription, ": 0");
-        return /*#__PURE__*/React__default.createElement("div", {
-          className: wrapperClasses
-        }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
-          className: titleClasses
-        }, labelProps), titleText, /*#__PURE__*/React__default.createElement("span", {
-          className: `${prefix}--visually-hidden`
-        }, clearSelectionContent)) : null, /*#__PURE__*/React__default.createElement(ListBox, {
-          onFocus: isFluid ? handleFocus : null,
-          onBlur: isFluid ? handleFocus : null,
-          className: className,
-          disabled: disabled,
-          light: light,
-          ref: ref,
-          invalid: invalid,
-          invalidText: invalidText,
-          warn: warn,
-          warnText: warnText,
-          isOpen: isOpen,
-          size: size
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: `${prefix}--list-box__field`
-        }, selectedItem.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
-          clearSelection: () => {
+  const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
+    [`${prefix}--multi-select--invalid`]: invalid,
+    [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
+    [`${prefix}--multi-select--open`]: isOpen,
+    [`${prefix}--multi-select--inline`]: inline,
+    [`${prefix}--multi-select--selected`]: controlledSelectedItems?.length > 0,
+    [`${prefix}--multi-select--filterable--input-focused`]: inputFocused
+  });
+  const labelProps = getLabelProps();
+  const buttonProps = getToggleButtonProps({
+    disabled,
+    onClick: () => {
+      handleMenuChange(!isOpen);
+      textInput.current?.focus();
+    },
+    // When we moved the "root node" of Downshift to the <input> for
+    // ARIA 1.2 compliance, we unfortunately hit this branch for the
+    // "mouseup" event that downshift listens to:
+    // https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
+    //
+    // As a result, it will reset the state of the component and so we
+    // stop the event from propagating to prevent this. This allows the
+    // toggleMenu behavior for the toggleButton to correctly open and
+    // close the menu.
+    onMouseUp(event) {
+      if (isOpen) {
+        event.stopPropagation();
+      }
+    }
+  });
+  const inputProps = getInputProps(getDropdownProps({
+    'aria-controls': isOpen ? menuId : undefined,
+    'aria-describedby': helperText ? helperId : undefined,
+    'aria-haspopup': 'listbox',
+    // Remove excess aria `aria-labelledby`. HTML <label for>
+    // provides this aria information.
+    'aria-labelledby': undefined,
+    disabled,
+    placeholder,
+    preventKeyAction: isOpen,
+    onClick: () => handleMenuChange(true),
+    onKeyDown(event) {
+      const $input = event.target;
+      const $value = $input.value;
+      if (match(event, Space)) {
+        event.stopPropagation();
+      }
+      if (match(event, Enter)) {
+        handleMenuChange(true);
+      }
+      if (!disabled) {
+        if (match(event, Delete) || match(event, Escape)) {
+          if (isOpen) {
+            handleMenuChange(true);
+            clearInputValue(event);
+            event.stopPropagation();
+          } else if (!isOpen) {
+            clearInputValue(event);
             clearSelection();
-            if (textInput.current) {
-              textInput.current.focus();
-            }
-          },
-          selectionCount: selectedItem.length,
-          translateWithId: translateWithId,
-          disabled: disabled
-        }), /*#__PURE__*/React__default.createElement("input", _extends({
-          className: inputClasses
-        }, rootProps, inputProps, {
-          ref: mergeRefs(textInput, rootProps.ref)
-        })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
-          className: `${prefix}--list-box__invalid-icon`
-        }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
-          className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
-        }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
-          clearSelection: clearInputValue,
-          disabled: disabled,
-          translateWithId: translateWithId,
-          onMouseUp: event => {
-            // If we do not stop this event from propagating,
-            // it seems like Downshift takes our event and
-            // prevents us from getting `onClick` /
-            // `clearSelection` from the underlying <button> in
-            // ListBoxSelection
             event.stopPropagation();
           }
-        }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
-          isOpen: isOpen,
-          translateWithId: translateWithId
-        }))), normalizedSlug, isOpen ? /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, sortItems(filterItems(items, {
-          itemToString,
-          inputValue
-        }), {
-          selectedItems: {
-            top: selectedItems,
-            fixed: [],
-            'top-after-reopen': topItems
-          }[selectionFeedback],
-          itemToString,
-          compareItems,
-          locale
-        }).map((item, index) => {
-          const isChecked = selectedItem.filter(selected => isEqual(selected, item)).length > 0;
-          const itemProps = getItemProps({
-            item,
-            disabled: item.disabled,
-            ['aria-selected']: isChecked
-          });
-          const itemText = itemToString(item);
-          return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
-            key: itemProps.id,
-            "aria-label": itemText,
-            isActive: isChecked,
-            isHighlighted: highlightedIndex === index,
-            title: itemText
-          }, itemProps), /*#__PURE__*/React__default.createElement("div", {
-            className: `${prefix}--checkbox-wrapper`
-          }, /*#__PURE__*/React__default.createElement("span", {
-            title: useTitleInItem ? itemText : null,
-            className: `${prefix}--checkbox-label`,
-            "data-contained-checkbox-state": isChecked,
-            id: `${itemProps.id}-item`
-          }, ItemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
-            key: itemProps.id
-          }, item)) : itemText)));
-        })) : null), !inline && !invalid && !warn ? helper : null);
-      });
+        }
+      }
+      if (match(event, Tab)) {
+        handleMenuChange(false);
+      }
+      if (match(event, Home)) {
+        $input.setSelectionRange(0, 0);
+      }
+      if (match(event, End)) {
+        $input.setSelectionRange($value.length, $value.length);
+      }
+    },
+    onFocus: () => setInputFocused(true),
+    onBlur() {
+      setInputFocused(false);
+      setInputValue('');
     }
+  }));
+  const menuProps = getMenuProps({}, {
+    suppressRefError: true
   });
+  const handleFocus = evt => {
+    if (evt?.target.classList.contains(`${prefix}--tag__close-icon`) || evt?.target.classList.contains(`${prefix}--list-box__selection`)) {
+      setIsFocused(false);
+    } else {
+      setIsFocused(evt?.type === 'focus' ? true : false);
+    }
+  };
+  const clearSelectionContent = controlledSelectedItems.length > 0 ? /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--visually-hidden`
+  }, clearSelectionDescription, " ", controlledSelectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--visually-hidden`
+  }, clearSelectionDescription, ": 0");
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: wrapperClasses
+  }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
+    className: titleClasses
+  }, labelProps), titleText, /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--visually-hidden`
+  }, clearSelectionContent)) : null, /*#__PURE__*/React__default.createElement(ListBox, {
+    onFocus: isFluid ? handleFocus : undefined,
+    onBlur: isFluid ? handleFocus : undefined,
+    className: className,
+    disabled: disabled,
+    light: light,
+    ref: ref,
+    invalid: invalid,
+    invalidText: invalidText,
+    warn: warn,
+    warnText: warnText,
+    isOpen: isOpen,
+    size: size
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--list-box__field`
+  }, controlledSelectedItems.length > 0 &&
+  /*#__PURE__*/
+  // @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
+  React__default.createElement(ListBoxSelection, {
+    clearSelection: () => {
+      clearSelection();
+      if (textInput.current) {
+        textInput.current.focus();
+      }
+    },
+    selectionCount: controlledSelectedItems.length,
+    translateWithId: translateWithId,
+    disabled: disabled
+  }), /*#__PURE__*/React__default.createElement("input", _extends({
+    className: inputClasses
+  }, inputProps, {
+    ref: mergeRefs(textInput, inputProps.ref)
+  })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+    className: `${prefix}--list-box__invalid-icon`
+  }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+    className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
+  }), inputValue &&
+  /*#__PURE__*/
+  // @ts-expect-error: It is expecting two non-required prop called: "onClearSelection" & "selectionCount"
+  React__default.createElement(ListBoxSelection, {
+    clearSelection: clearInputValue,
+    disabled: disabled,
+    translateWithId: translateWithId,
+    onMouseUp: event => {
+      // If we do not stop this event from propagating,
+      // it seems like Downshift takes our event and
+      // prevents us from getting `onClick` /
+      // `clearSelection` from the underlying <button> in
+      // ListBoxSelection
+      event.stopPropagation();
+    }
+  }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
+    // @ts-expect-error
+    isOpen: isOpen,
+    translateWithId: translateWithId
+  }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
+    const isChecked = controlledSelectedItems.filter(selected => isEqual(selected, item)).length > 0;
+    const itemProps = getItemProps({
+      item,
+      ['aria-selected']: isChecked
+    });
+    const itemText = itemToString(item);
+
+    // The initial implementation using <Downshift> would place the disabled attribute
+    // on disabled menu items. Conversely, useCombobox places aria-disabled instead.
+    // To avoid any potential breaking changes, we avoid placing aria-disabled and
+    // instead match the old behavior of placing the disabled attribute.
+    const disabled = itemProps['aria-disabled'];
+    const {
+      'aria-disabled': unusedAriaDisabled,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      ...modifiedItemProps
+    } = itemProps;
+    return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
+      key: itemProps.id,
+      "aria-label": itemText,
+      isActive: isChecked,
+      isHighlighted: highlightedIndex === index,
+      title: itemText,
+      disabled: disabled
+    }, modifiedItemProps), /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--checkbox-wrapper`
+    }, /*#__PURE__*/React__default.createElement("span", {
+      title: useTitleInItem ? itemText : undefined,
+      className: `${prefix}--checkbox-label`,
+      "data-contained-checkbox-state": isChecked,
+      id: `${itemProps.id}-item`
+    }, ItemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
+      key: itemProps.id
+    }, item)) : itemText)));
+  }) : null)), !inline && !invalid && !warn ? helper : null);
 });
 FilterableMultiSelect.propTypes = {
   /**
@@ -493,6 +563,7 @@ FilterableMultiSelect.propTypes = {
   /**
    * Additional props passed to Downshift
    */
+  // @ts-ignore
   downshiftProps: PropTypes.shape(Downshift.propTypes),
   /**
    * Specify whether the title text should be hidden or not
@@ -580,6 +651,11 @@ FilterableMultiSelect.propTypes = {
    */
   slug: PropTypes.node,
   ...sortingPropTypes,
+  /**
+   * Provide text to be used in a `<label>` element that is tied to the
+   * combobox via ARIA attributes.
+   */
+  titleText: PropTypes.node,
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
@@ -597,6 +673,5 @@ FilterableMultiSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
-var FilterableMultiSelect$1 = FilterableMultiSelect;
 
-export { FilterableMultiSelect$1 as default };
+export { FilterableMultiSelect as default };