@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2$1 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import Downshift from 'downshift';
@@ -31,112 +31,98 @@ import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Space, Enter, Delete, Escape, Tab, Home, End } from '../../internal/keyboard/keys.js';
 
-var _objectSpread2, _FilterableMultiSelec;
-var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
-  var _cx, _cx2, _cx3, _cx4;
-
-  var ariaLabel = _ref['aria-label'],
-      deprecatedAriaLabel = _ref.ariaLabel,
-      containerClassName = _ref.className,
-      compareItems = _ref.compareItems,
-      direction = _ref.direction,
-      disabled = _ref.disabled,
-      downshiftProps = _ref.downshiftProps,
-      filterItems = _ref.filterItems,
-      helperText = _ref.helperText,
-      hideLabel = _ref.hideLabel,
-      id = _ref.id,
-      initialSelectedItems = _ref.initialSelectedItems,
-      invalid = _ref.invalid,
-      invalidText = _ref.invalidText,
-      items = _ref.items,
-      ItemToElement = _ref.itemToElement,
-      itemToString = _ref.itemToString,
-      light = _ref.light,
-      locale = _ref.locale,
-      onInputValueChange = _ref.onInputValueChange,
-      open = _ref.open,
-      onChange = _ref.onChange,
-      onMenuChange = _ref.onMenuChange,
-      placeholder = _ref.placeholder,
-      titleText = _ref.titleText,
-      type = _ref.type,
-      selectionFeedback = _ref.selectionFeedback,
-      size = _ref.size,
-      sortItems = _ref.sortItems,
-      translateWithId = _ref.translateWithId,
-      useTitleInItem = _ref.useTitleInItem,
-      warn = _ref.warn,
-      warnText = _ref.warnText;
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var _useState3 = useState(open),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isOpen = _useState4[0],
-      setIsOpen = _useState4[1];
-
-  var _useState5 = useState(open),
-      _useState6 = _slicedToArray(_useState5, 2),
-      prevOpen = _useState6[0],
-      setPrevOpen = _useState6[1];
-
-  var _useState7 = useState(''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      inputValue = _useState8[0],
-      setInputValue = _useState8[1];
-
-  var _useState9 = useState(initialSelectedItems !== null && initialSelectedItems !== void 0 ? initialSelectedItems : []),
-      _useState10 = _slicedToArray(_useState9, 2),
-      topItems = _useState10[0],
-      setTopItems = _useState10[1];
-
-  var _useState11 = useState(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      inputFocused = _useState12[0],
-      setInputFocused = _useState12[1];
-
-  var _useState13 = useState(null),
-      _useState14 = _slicedToArray(_useState13, 2),
-      highlightedIndex = _useState14[0],
-      setHighlightedIndex = _useState14[1];
-
-  var _useState15 = useState(initialSelectedItems !== null && initialSelectedItems !== void 0 ? initialSelectedItems : []),
-      _useState16 = _slicedToArray(_useState15, 2),
-      currentSelectedItems = _useState16[0],
-      setCurrentSelectedItems = _useState16[1];
-
-  var textInput = useRef();
-  var filterableMultiSelectInstanceId = useId();
-  var enabled = useFeatureFlag('enable-v11-release');
-  var prefix = usePrefix();
+const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
+  let {
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    className: containerClassName,
+    compareItems,
+    direction,
+    disabled,
+    downshiftProps,
+    filterItems,
+    helperText,
+    hideLabel,
+    id,
+    initialSelectedItems,
+    invalid,
+    invalidText,
+    items,
+    itemToElement: ItemToElement,
+    // needs to be capitalized for react to render it correctly
+    itemToString,
+    light,
+    locale,
+    onInputValueChange,
+    open,
+    onChange,
+    onMenuChange,
+    placeholder,
+    titleText,
+    type,
+    selectionFeedback,
+    size,
+    sortItems,
+    translateWithId,
+    useTitleInItem,
+    warn,
+    warnText
+  } = _ref;
+  const {
+    isFluid
+  } = useContext(FormContext);
+  const [isFocused, setIsFocused] = useState(false);
+  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 filterableMultiSelectInstanceId = useId();
+  const enabled = useFeatureFlag('enable-v11-release');
+  const prefix = usePrefix();
 
   if (prevOpen !== open) {
     setIsOpen(open);
     setPrevOpen(open);
   }
 
-  var inline = type === 'inline';
-  var showWarning = !invalid && warn;
-  var wrapperClasses = cx("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--multi-select--filterable__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _cx));
-  var helperId = !helperText ? undefined : "filterablemultiselect-helper-text-".concat(filterableMultiSelectInstanceId);
-  var labelId = "".concat(id, "-label");
-  var titleClasses = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label"), true), _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
-  var helperClasses = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--form__helper-text"), true), _defineProperty(_cx3, "".concat(prefix, "--form__helper-text--disabled"), disabled), _cx3));
-  var inputClasses = cx((_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--text-input"), true), _defineProperty(_cx4, "".concat(prefix, "--text-input--empty"), !inputValue), _defineProperty(_cx4, "".concat(prefix, "--text-input--light"), light), _cx4));
-  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+  const inline = type === 'inline';
+  const showWarning = !invalid && warn;
+  const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, [enabled ? containerClassName : null], {
+    [`${prefix}--multi-select__wrapper--inline`]: inline,
+    [`${prefix}--list-box__wrapper--inline`]: inline,
+    [`${prefix}--multi-select__wrapper--inline--invalid`]: inline && invalid,
+    [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
+    [`${prefix}--list-box--up`]: direction === 'top',
+    [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused
+  });
+  const helperId = !helperText ? undefined : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
+  const labelId = `${id}-label`;
+  const titleClasses = cx({
+    [`${prefix}--label`]: true,
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--visually-hidden`]: hideLabel
+  });
+  const helperClasses = cx({
+    [`${prefix}--form__helper-text`]: true,
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
+  const inputClasses = cx({
+    [`${prefix}--text-input`]: true,
+    [`${prefix}--text-input--empty`]: !inputValue,
+    [`${prefix}--text-input--light`]: light
+  });
+  const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText) : null;
-  var menuId = "".concat(id, "__menu");
-  var inputId = "".concat(id, "-input");
-  useEffect(function () {
+  const menuId = `${id}__menu`;
+  const inputId = `${id}-input`;
+  useEffect(() => {
     if (!isOpen) {
       setTopItems(currentSelectedItems);
     }
@@ -151,7 +137,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
   }
 
   function handleOnMenuChange(forceIsOpen) {
-    var nextIsOpen = forceIsOpen !== null && forceIsOpen !== void 0 ? forceIsOpen : !isOpen;
+    const nextIsOpen = forceIsOpen ?? !isOpen;
     setIsOpen(nextIsOpen);
 
     if (onMenuChange) {
@@ -164,8 +150,12 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
   }
 
   function handleOnStateChange(changes) {
-    var type = changes.type;
-    var stateChangeTypes = Downshift.stateChangeTypes;
+    const {
+      type
+    } = changes;
+    const {
+      stateChangeTypes
+    } = Downshift;
 
     switch (type) {
       case stateChangeTypes.keyDownArrowDown:
@@ -187,7 +177,9 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
   }
 
   function handleOnInputValueChange(inputValue, _ref2) {
-    var type = _ref2.type;
+    let {
+      type
+    } = _ref2;
 
     if (onInputValueChange) {
       onInputValueChange(inputValue);
@@ -222,17 +214,19 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
     disabled: disabled,
     onChange: handleOnChange,
     initialSelectedItems: initialSelectedItems,
-    render: function render(_ref3) {
-      var selectedItems = _ref3.selectedItems,
-          onItemChange = _ref3.onItemChange,
-          _clearSelection = _ref3.clearSelection;
+    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: function onChange(selectedItem) {
+        onChange: selectedItem => {
           if (selectedItem !== null) {
             onItemChange(selectedItem);
           }
@@ -244,32 +238,40 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
         labelId: labelId,
         menuId: menuId,
         inputId: inputId
-      }), function (_ref4) {
-        var _cx5;
-
-        var getInputProps = _ref4.getInputProps,
-            getItemProps = _ref4.getItemProps,
-            getLabelProps = _ref4.getLabelProps,
-            getMenuProps = _ref4.getMenuProps,
-            getRootProps = _ref4.getRootProps,
-            getToggleButtonProps = _ref4.getToggleButtonProps,
-            isOpen = _ref4.isOpen,
-            inputValue = _ref4.inputValue,
-            selectedItem = _ref4.selectedItem;
-        var className = cx("".concat(prefix, "--multi-select"), "".concat(prefix, "--combo-box"), "".concat(prefix, "--multi-select--filterable"), [enabled ? null : containerClassName], (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx5, "".concat(prefix, "--multi-select--invalid--focused"), invalid && inputFocused), _defineProperty(_cx5, "".concat(prefix, "--multi-select--open"), isOpen), _defineProperty(_cx5, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx5, "".concat(prefix, "--multi-select--selected"), selectedItem.length > 0), _defineProperty(_cx5, "".concat(prefix, "--multi-select--filterable--input-focused"), inputFocused), _cx5));
-        var rootProps = getRootProps({}, {
+      }), _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`, [enabled ? null : containerClassName], {
+          [`${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
         });
-        var labelProps = getLabelProps();
-        var buttonProps = getToggleButtonProps({
-          disabled: disabled,
-          onClick: function onClick() {
+        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:
@@ -279,24 +281,25 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
           // stop the event from propagating to prevent this. This allows the
           // toggleMenu behavior for the toggleButton to correctly open and
           // close the menu.
-          onMouseUp: function onMouseUp(event) {
+          onMouseUp(event) {
             if (isOpen) {
               event.stopPropagation();
             }
           }
+
         });
-        var inputProps = getInputProps({
+        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: disabled,
-          placeholder: placeholder,
-          onClick: function onClick() {
+          disabled,
+          placeholder,
+          onClick: () => {
             handleOnMenuChange(true);
           },
-          onKeyDown: function onKeyDown(event) {
+          onKeyDown: event => {
             if (match(event, Space)) {
               event.stopPropagation();
             }
@@ -313,9 +316,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
                   event.stopPropagation();
                 } else if (!isOpen) {
                   clearInputValue();
-
-                  _clearSelection();
-
+                  clearSelection();
                   event.stopPropagation();
                 }
               }
@@ -333,22 +334,22 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
               event.target.setSelectionRange(event.target.value.length, event.target.value.length);
             }
           },
-          onFocus: function onFocus() {
+          onFocus: () => {
             setInputFocused(true);
           },
-          onBlur: function onBlur() {
+          onBlur: () => {
             setInputFocused(false);
             setInputValue('');
           }
         });
-        var menuProps = getMenuProps({
+        const menuProps = getMenuProps({
           'aria-label': ariaLabel
         }, {
           suppressRefError: true
         });
 
-        var handleFocus = function handleFocus(evt) {
-          if (evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) || evt.target.classList.contains("".concat(prefix, "--list-box__selection"))) {
+        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);
@@ -374,10 +375,10 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
           isOpen: isOpen,
           size: size
         }, /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(prefix, "--list-box__field")
+          className: `${prefix}--list-box__field`
         }, selectedItem.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
-          clearSelection: function clearSelection() {
-            _clearSelection();
+          clearSelection: () => {
+            clearSelection();
 
             if (textInput.current) {
               textInput.current.focus();
@@ -391,14 +392,14 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
         }, rootProps, inputProps, {
           ref: mergeRefs(textInput, rootProps.ref)
         })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
-          className: "".concat(prefix, "--list-box__invalid-icon")
+          className: `${prefix}--list-box__invalid-icon`
         }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
-          className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
+          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: function onMouseUp(event) {
+          onMouseUp: event => {
             // If we do not stop this event from propagating,
             // it seems like Downshift takes our event and
             // prevents us from getting `onClick` /
@@ -410,26 +411,24 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
           isOpen: isOpen,
           translateWithId: translateWithId
         }))), isOpen ? /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, sortItems(filterItems(items, {
-          itemToString: itemToString,
-          inputValue: inputValue
+          itemToString,
+          inputValue
         }), {
           selectedItems: {
             top: selectedItems,
             fixed: [],
             'top-after-reopen': topItems
           }[selectionFeedback],
-          itemToString: itemToString,
-          compareItems: compareItems,
-          locale: locale
-        }).map(function (item, index) {
-          var itemProps = getItemProps({
-            item: item,
+          itemToString,
+          compareItems,
+          locale
+        }).map((item, index) => {
+          const itemProps = getItemProps({
+            item,
             disabled: item.disabled
           });
-          var itemText = itemToString(item);
-          var isChecked = selectedItem.filter(function (selected) {
-            return isEqual(selected, item);
-          }).length > 0;
+          const itemText = itemToString(item);
+          const isChecked = selectedItem.filter(selected => isEqual(selected, item)).length > 0;
           return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
             key: itemProps.id,
             "aria-label": itemText,
@@ -437,12 +436,12 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
             isHighlighted: highlightedIndex === index,
             title: itemText
           }, itemProps), /*#__PURE__*/React__default.createElement("div", {
-            className: "".concat(prefix, "--checkbox-wrapper")
+            className: `${prefix}--checkbox-wrapper`
           }, /*#__PURE__*/React__default.createElement("span", {
             title: useTitleInItem ? itemText : null,
-            className: "".concat(prefix, "--checkbox-label"),
+            className: `${prefix}--checkbox-label`,
             "data-contained-checkbox-state": isChecked,
-            id: "".concat(itemProps.id, "-item")
+            id: `${itemProps.id}-item`
           }, ItemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
             key: itemProps.id
           }, item)) : itemText)));
@@ -451,7 +450,132 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
     }
   });
 });
-FilterableMultiSelect.propTypes = _objectSpread2$1(_objectSpread2$1((_objectSpread2 = {}, _defineProperty(_objectSpread2, 'aria-label', PropTypes.string), _defineProperty(_objectSpread2, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_objectSpread2, "direction", PropTypes.oneOf(['top', 'bottom'])), _defineProperty(_objectSpread2, "disabled", PropTypes.bool), _defineProperty(_objectSpread2, "downshiftProps", PropTypes.shape(Downshift.propTypes)), _defineProperty(_objectSpread2, "hideLabel", PropTypes.bool), _defineProperty(_objectSpread2, "id", PropTypes.string.isRequired), _defineProperty(_objectSpread2, "initialSelectedItems", PropTypes.array), _defineProperty(_objectSpread2, "invalid", PropTypes.bool), _defineProperty(_objectSpread2, "invalidText", PropTypes.node), _defineProperty(_objectSpread2, "itemToElement", PropTypes.func), _defineProperty(_objectSpread2, "itemToString", PropTypes.func), _defineProperty(_objectSpread2, "items", PropTypes.array.isRequired), _defineProperty(_objectSpread2, "light", deprecate(PropTypes.bool, 'The `light` prop for `FilterableMultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.')), _defineProperty(_objectSpread2, "locale", PropTypes.string), _defineProperty(_objectSpread2, "onChange", PropTypes.func), _defineProperty(_objectSpread2, "onInputValueChange", PropTypes.func), _defineProperty(_objectSpread2, "onMenuChange", PropTypes.func), _defineProperty(_objectSpread2, "open", PropTypes.bool), _defineProperty(_objectSpread2, "placeholder", PropTypes.string), _defineProperty(_objectSpread2, "selectionFeedback", PropTypes.oneOf(['top', 'fixed', 'top-after-reopen'])), _defineProperty(_objectSpread2, "size", ListBoxSize), _objectSpread2), sortingPropTypes), {}, {
+FilterableMultiSelect.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   */
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   */
+  ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Disable the control
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes.shape(Downshift.propTypes),
+
+  /**
+   * Specify whether the title text should be hidden or not
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify a custom `id`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Allow users to pass in arbitrary items from their collection that are
+   * pre-selected
+   */
+  initialSelectedItems: PropTypes.array,
+
+  /**
+   * Is the current selection invalid?
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * If invalid, what is the error?
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement: PropTypes.func,
+
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list.
+   */
+  itemToString: PropTypes.func,
+
+  /**
+   * We try to stay as generic as possible here to allow individuals to pass
+   * in a collection of whatever kind of data structure they prefer
+   */
+  items: PropTypes.array.isRequired,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: deprecate(PropTypes.bool, 'The `light` prop for `FilterableMultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
+
+  /**
+   * Specify the locale of the control. Used for the default `compareItems`
+   * used for sorting the list of items in the control.
+   */
+  locale: PropTypes.string,
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component what kind of internal state changes are occurring.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * `onInputValueChange` is a utility for this controlled component to communicate to
+   * the currently typed input.
+   */
+  onInputValueChange: PropTypes.func,
+
+  /**
+   * `onMenuChange` is a utility for this controlled component to communicate to a
+   * consuming component that the menu was opened(`true`)/closed(`false`).
+   */
+  onMenuChange: PropTypes.func,
+
+  /**
+   * Initialize the component with an open(`true`)/closed(`false`) menu.
+   */
+  open: PropTypes.bool,
+
+  /**
+   * Generic `placeholder` that will be used as the textual representation of
+   * what this field is for
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Specify feedback (mode) of the selection.
+   * `top`: selected item jumps to top
+   * `fixed`: selected item stays at it's position
+   * `top-after-reopen`: selected item jump to top after reopen dropdown
+   */
+  selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+   */
+  size: ListBoxSize,
+  ...sortingPropTypes,
+
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
@@ -471,8 +595,20 @@ FilterableMultiSelect.propTypes = _objectSpread2$1(_objectSpread2$1((_objectSpre
    * Provide the text that is displayed when the control is in warning state
    */
   warnText: PropTypes.node
-});
-FilterableMultiSelect.defaultProps = (_FilterableMultiSelec = {}, _defineProperty(_FilterableMultiSelec, 'aria-label', 'Choose an item'), _defineProperty(_FilterableMultiSelec, "compareItems", defaultCompareItems), _defineProperty(_FilterableMultiSelec, "direction", 'bottom'), _defineProperty(_FilterableMultiSelec, "disabled", false), _defineProperty(_FilterableMultiSelec, "filterItems", defaultFilterItems), _defineProperty(_FilterableMultiSelec, "initialSelectedItems", []), _defineProperty(_FilterableMultiSelec, "itemToString", defaultItemToString), _defineProperty(_FilterableMultiSelec, "locale", 'en'), _defineProperty(_FilterableMultiSelec, "sortItems", defaultSortItems), _defineProperty(_FilterableMultiSelec, "open", false), _defineProperty(_FilterableMultiSelec, "selectionFeedback", 'top-after-reopen'), _FilterableMultiSelec);
+};
+FilterableMultiSelect.defaultProps = {
+  ['aria-label']: 'Choose an item',
+  compareItems: defaultCompareItems,
+  direction: 'bottom',
+  disabled: false,
+  filterItems: defaultFilterItems,
+  initialSelectedItems: [],
+  itemToString: defaultItemToString,
+  locale: 'en',
+  sortItems: defaultSortItems,
+  open: false,
+  selectionFeedback: 'top-after-reopen'
+};
 var FilterableMultiSelect$1 = FilterableMultiSelect;
 
 export { FilterableMultiSelect$1 as default };