@carbon/react 1.6.0 → 1.8.0-rc.0

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -5,23 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import Downshift from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { useState, useRef } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import '../ListBox/index.js';
 import Selection from '../../internal/Selection.js';
 import { defaultItemToString } from './tools/itemToString.js';
 import mergeRefs from '../../tools/mergeRefs.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
-import { FeatureFlagContext } from '../FeatureFlags/index.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 import { match } from '../../internal/keyboard/match.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
@@ -29,403 +29,364 @@ import ListBox from '../ListBox/ListBox.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Space } from '../../internal/keyboard/keys.js';
 
-var getInstanceId = setupGetInstanceId();
-
-var FilterableMultiSelect = /*#__PURE__*/function (_React$Component) {
-  _inherits(FilterableMultiSelect, _React$Component);
-
-  var _super = _createSuper(FilterableMultiSelect);
+var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
+  var _cx, _cx2, _cx3, _cx4;
+
+  var ariaLabel = _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 _useState = useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = useState(open),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevOpen = _useState4[0],
+      setPrevOpen = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      topItems = _useState8[0],
+      setTopItems = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      inputFocused = _useState10[0],
+      setInputFocused = _useState10[1];
+
+  var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      highlightedIndex = _useState12[0],
+      setHighlightedIndex = _useState12[1];
+
+  var textInput = useRef();
+  var filterableMultiSelectInstanceId = useId();
+  var enabled = useFeatureFlag('enable-v11-release');
+  var prefix = usePrefix();
+
+  if (prevOpen !== open) {
+    setIsOpen(open);
+    setPrevOpen(open);
+  }
 
-  function FilterableMultiSelect(props) {
-    var _this;
+  var inline = type === 'inline';
+  var showWarning = !invalid && warn;
+  var wrapperClasses = cx("".concat(prefix, "--multi-select__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'), _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", {
+    id: helperId,
+    className: helperClasses
+  }, helperText) : null;
+  var menuId = "".concat(id, "__menu");
+  var inputId = "".concat(id, "-input");
+
+  function handleOnChange(changes) {
+    if (onChange) {
+      onChange(changes);
+    }
+  }
 
-    _classCallCheck(this, FilterableMultiSelect);
+  function handleOnMenuChange(forceIsOpen) {
+    var nextIsOpen = forceIsOpen !== null && forceIsOpen !== void 0 ? forceIsOpen : !isOpen;
+    setIsOpen(nextIsOpen);
 
-    _this = _super.call(this, props);
+    if (onMenuChange) {
+      onMenuChange(nextIsOpen);
+    }
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (changes) {
-      if (_this.props.onChange) {
-        _this.props.onChange(changes);
-      }
-    });
+  function handleOnOuterClick() {
+    handleOnMenuChange(false);
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnMenuChange", function (isOpen) {
-      _this.setState(function (state) {
-        return {
-          isOpen: isOpen !== null && isOpen !== void 0 ? isOpen : !state.isOpen
-        };
-      });
+  function handleOnStateChange(changes, downshift) {
+    if (changes.isOpen && !isOpen) {
+      setTopItems(downshift.selectedItem);
+    }
 
-      if (_this.props.onMenuChange) {
-        _this.props.onMenuChange(isOpen);
-      }
-    });
+    var type = changes.type;
+    var stateChangeTypes = Downshift.stateChangeTypes;
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnOuterClick", function () {
-      _this.handleOnMenuChange(false);
-    });
+    switch (type) {
+      case stateChangeTypes.keyDownArrowDown:
+      case stateChangeTypes.keyDownArrowUp:
+      case stateChangeTypes.keyDownHome:
+      case stateChangeTypes.keyDownEnd:
+        setHighlightedIndex(changes.highlightedIndex !== undefined ? changes.highlightedIndex : null);
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnStateChange", function (changes, downshift) {
-      if (changes.isOpen && !_this.state.isOpen) {
-        _this.setState({
-          topItems: downshift.selectedItem
-        });
-      }
-
-      var type = changes.type;
-      var stateChangeTypes = Downshift.stateChangeTypes;
-
-      switch (type) {
-        case stateChangeTypes.keyDownArrowDown:
-        case stateChangeTypes.keyDownArrowUp:
-        case stateChangeTypes.keyDownHome:
-        case stateChangeTypes.keyDownEnd:
-          _this.setState({
-            highlightedIndex: changes.highlightedIndex !== undefined ? changes.highlightedIndex : null
-          });
-
-          if (stateChangeTypes.keyDownArrowDown === type && !_this.state.isOpen) {
-            _this.handleOnMenuChange(true);
-          }
-
-          break;
+        if (stateChangeTypes.keyDownArrowDown === type && !isOpen) {
+          handleOnMenuChange(true);
+        }
 
-        case stateChangeTypes.keyDownEscape:
-          _this.handleOnMenuChange(false);
+        break;
 
-          break;
-      }
-    });
+      case stateChangeTypes.keyDownEscape:
+        handleOnMenuChange(false);
+        break;
+    }
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnInputKeyDown", function (event) {
-      event.stopPropagation();
-    });
+  function handleOnInputValueChange(inputValue, _ref2) {
+    var type = _ref2.type;
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnInputValueChange", function (inputValue, _ref) {
-      var type = _ref.type;
+    if (onInputValueChange) {
+      onInputValueChange(inputValue);
+    }
 
-      if (_this.props.onInputValueChange) {
-        _this.props.onInputValueChange(inputValue);
-      }
+    if (type !== Downshift.stateChangeTypes.changeInput) {
+      return;
+    }
 
-      if (type !== Downshift.stateChangeTypes.changeInput) {
-        return;
-      }
+    if (Array.isArray(inputValue)) {
+      clearInputValue();
+    } else {
+      setInputValue(inputValue);
+    }
 
-      _this.setState(function () {
-        if (Array.isArray(inputValue)) {
-          return {
-            inputValue: ''
-          };
-        }
+    if (inputValue && !isOpen) {
+      handleOnMenuChange(true);
+    } else if (!inputValue && isOpen) {
+      handleOnMenuChange(false);
+    }
+  }
 
-        return {
-          inputValue: inputValue || ''
-        };
-      });
+  function clearInputValue() {
+    setInputValue('');
 
-      if (inputValue && !_this.state.isOpen) {
-        _this.handleOnMenuChange(true);
-      } else if (!inputValue && _this.state.isOpen) {
-        _this.handleOnMenuChange(false);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "clearInputValue", function () {
-      _this.setState({
-        inputValue: ''
-      }, function () {
-        if (_this.textInput.current) {
-          _this.textInput.current.focus();
-        }
-      });
-    });
-
-    _this.filterableMultiSelectInstanceId = getInstanceId();
-    _this.state = {
-      isOpen: props.open,
-      inputValue: '',
-      topItems: [],
-      inputFocused: false,
-      highlightedIndex: null
-    };
-    _this.textInput = /*#__PURE__*/React__default.createRef();
-    return _this;
+    if (textInput.current) {
+      textInput.current.focus();
+    }
   }
 
-  _createClass(FilterableMultiSelect, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$state = this.state,
-          highlightedIndex = _this$state.highlightedIndex,
-          isOpen = _this$state.isOpen,
-          inputValue = _this$state.inputValue;
-      var _this$props = this.props,
-          ariaLabel = _this$props.ariaLabel,
-          containerClassName = _this$props.className,
-          direction = _this$props.direction,
-          disabled = _this$props.disabled,
-          filterItems = _this$props.filterItems,
-          items = _this$props.items,
-          itemToElement = _this$props.itemToElement,
-          itemToString = _this$props.itemToString,
-          titleText = _this$props.titleText,
-          hideLabel = _this$props.hideLabel,
-          helperText = _this$props.helperText,
-          type = _this$props.type,
-          initialSelectedItems = _this$props.initialSelectedItems,
-          id = _this$props.id,
-          locale = _this$props.locale,
-          size = _this$props.size,
-          placeholder = _this$props.placeholder,
-          sortItems = _this$props.sortItems,
-          compareItems = _this$props.compareItems,
-          light = _this$props.light,
-          invalid = _this$props.invalid,
-          invalidText = _this$props.invalidText,
-          warn = _this$props.warn,
-          warnText = _this$props.warnText,
-          useTitleInItem = _this$props.useTitleInItem,
-          translateWithId = _this$props.translateWithId,
-          downshiftProps = _this$props.downshiftProps;
-      var inline = type === 'inline';
-      var showWarning = !invalid && warn; // needs to be capitalized for react to render it correctly
-
-      var ItemToElement = itemToElement;
-      var scope = this.context;
-      var enabled;
-
-      if (scope.enabled) {
-        enabled = scope.enabled('enable-v11-release');
-      }
-
-      return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
-        var _cx, _cx2, _cx3, _cx4;
-
-        var wrapperClasses = cx("".concat(prefix, "--multi-select__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'), _cx));
-        var helperId = !helperText ? undefined : "filterablemultiselect-helper-text-".concat(_this2.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"), !_this2.state.inputValue), _defineProperty(_cx4, "".concat(prefix, "--text-input--light"), light), _cx4));
-        var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
-          id: helperId,
-          className: helperClasses
-        }, helperText) : null;
-        var menuId = "".concat(id, "__menu");
-        var inputId = "".concat(id, "-input");
-        return /*#__PURE__*/React__default.createElement(Selection, {
+  return /*#__PURE__*/React__default.createElement(Selection, {
+    disabled: disabled,
+    onChange: handleOnChange,
+    initialSelectedItems: initialSelectedItems,
+    render: function render(_ref3) {
+      var selectedItems = _ref3.selectedItems,
+          onItemChange = _ref3.onItemChange,
+          _clearSelection = _ref3.clearSelection;
+      return /*#__PURE__*/React__default.createElement(Downshift, _extends({}, downshiftProps, {
+        highlightedIndex: highlightedIndex,
+        id: id,
+        isOpen: isOpen,
+        inputValue: inputValue,
+        onInputValueChange: handleOnInputValueChange,
+        onChange: function onChange(selectedItem) {
+          if (selectedItem !== null) {
+            onItemChange(selectedItem);
+          }
+        },
+        itemToString: itemToString,
+        onStateChange: handleOnStateChange,
+        onOuterClick: handleOnOuterClick,
+        selectedItem: selectedItems,
+        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--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({}, {
+          suppressRefError: true
+        });
+        var labelProps = getLabelProps();
+        var buttonProps = getToggleButtonProps({
+          disabled: disabled,
+          onClick: function 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: function onMouseUp(event) {
+            if (isOpen) {
+              event.stopPropagation();
+            }
+          }
+        });
+        var 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,
-          onChange: _this2.handleOnChange,
-          initialSelectedItems: initialSelectedItems,
-          render: function render(_ref2) {
-            var selectedItems = _ref2.selectedItems,
-                onItemChange = _ref2.onItemChange,
-                _clearSelection = _ref2.clearSelection;
-            return /*#__PURE__*/React__default.createElement(Downshift, _extends({}, downshiftProps, {
-              highlightedIndex: highlightedIndex,
-              id: id,
-              isOpen: isOpen,
-              inputValue: inputValue,
-              onInputValueChange: _this2.handleOnInputValueChange,
-              onChange: function onChange(selectedItem) {
-                if (selectedItem !== null) {
-                  onItemChange(selectedItem);
-                }
-              },
-              itemToString: itemToString,
-              onStateChange: _this2.handleOnStateChange,
-              onOuterClick: _this2.handleOnOuterClick,
-              selectedItem: selectedItems,
-              labelId: labelId,
-              menuId: menuId,
-              inputId: inputId
-            }), function (_ref3) {
-              var _cx5;
-
-              var getInputProps = _ref3.getInputProps,
-                  getItemProps = _ref3.getItemProps,
-                  getLabelProps = _ref3.getLabelProps,
-                  getMenuProps = _ref3.getMenuProps,
-                  getRootProps = _ref3.getRootProps,
-                  getToggleButtonProps = _ref3.getToggleButtonProps,
-                  isOpen = _ref3.isOpen,
-                  inputValue = _ref3.inputValue,
-                  selectedItem = _ref3.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--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"), _this2.state.inputFocused), _cx5));
-              var rootProps = getRootProps({}, {
-                suppressRefError: true
-              });
-              var labelProps = getLabelProps();
-              var buttonProps = getToggleButtonProps({
-                disabled: disabled,
-                onClick: function onClick() {
-                  _this2.handleOnMenuChange(!_this2.state.isOpen);
-
-                  if (_this2.textInput.current) {
-                    _this2.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: function onMouseUp(event) {
-                  event.stopPropagation();
-                }
-              });
-              var 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() {
-                  _this2.handleOnMenuChange(true);
-                },
-                onKeyDown: function onKeyDown(event) {
-                  if (match(event, Space)) {
-                    event.stopPropagation();
-                  }
-                },
-                onFocus: function onFocus() {
-                  _this2.setState({
-                    inputFocused: true
-                  });
-                },
-                onBlur: function onBlur() {
-                  _this2.setState({
-                    inputFocused: false
-                  });
-                }
-              });
-              var menuProps = getMenuProps({
-                'aria-label': ariaLabel
-              }, {
-                suppressRefError: true
-              });
-              return /*#__PURE__*/React__default.createElement("div", {
-                className: wrapperClasses
-              }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
-                className: titleClasses
-              }, labelProps), titleText) : null, /*#__PURE__*/React__default.createElement(ListBox, {
-                className: className,
-                disabled: disabled,
-                light: light,
-                invalid: invalid,
-                invalidText: invalidText,
-                warn: warn,
-                warnText: warnText,
-                isOpen: isOpen,
-                size: size
-              }, /*#__PURE__*/React__default.createElement("div", {
-                className: "".concat(prefix, "--list-box__field")
-              }, selectedItem.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
-                clearSelection: function clearSelection() {
-                  _clearSelection();
-
-                  if (_this2.textInput.current) {
-                    _this2.textInput.current.focus();
-                  }
-                },
-                selectionCount: selectedItem.length,
-                translateWithId: translateWithId,
-                disabled: disabled
-              }), /*#__PURE__*/React__default.createElement("input", _extends({
-                className: inputClasses
-              }, rootProps, inputProps, {
-                ref: mergeRefs(_this2.textInput, rootProps.ref)
-              })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
-                className: "".concat(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")
-              }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
-                clearSelection: _this2.clearInputValue,
-                disabled: disabled,
-                translateWithId: translateWithId,
-                onMouseUp: function 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
-              }))), isOpen ? /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, sortItems(filterItems(items, {
-                itemToString: itemToString,
-                inputValue: inputValue
-              }), {
-                selectedItems: {
-                  top: selectedItems,
-                  fixed: [],
-                  'top-after-reopen': _this2.state.topItems
-                }[_this2.props.selectionFeedback],
-                itemToString: itemToString,
-                compareItems: compareItems,
-                locale: locale
-              }).map(function (item, index) {
-                var itemProps = getItemProps({
-                  item: item,
-                  disabled: item.disabled
-                });
-                var itemText = itemToString(item);
-                var isChecked = selectedItem.filter(function (selected) {
-                  return isEqual(selected, item);
-                }).length > 0;
-                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: "".concat(prefix, "--checkbox-wrapper")
-                }, /*#__PURE__*/React__default.createElement("span", {
-                  title: useTitleInItem ? itemText : null,
-                  className: "".concat(prefix, "--checkbox-label"),
-                  "data-contained-checkbox-state": isChecked,
-                  id: "".concat(itemProps.id, "-item")
-                }, itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
-                  key: itemProps.id
-                }, item)) : itemText)));
-              })) : null), !inline && !invalid && !warn ? helper : null);
-            });
+          placeholder: placeholder,
+          onClick: function onClick() {
+            handleOnMenuChange(true);
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (match(event, Space)) {
+              event.stopPropagation();
+            }
+          },
+          onFocus: function onFocus() {
+            setInputFocused(true);
+          },
+          onBlur: function onBlur() {
+            setInputFocused(false);
           }
         });
+        var menuProps = getMenuProps({
+          'aria-label': ariaLabel
+        }, {
+          suppressRefError: true
+        });
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: wrapperClasses
+        }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
+          className: titleClasses
+        }, labelProps), titleText) : null, /*#__PURE__*/React__default.createElement(ListBox, {
+          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: "".concat(prefix, "--list-box__field")
+        }, selectedItem.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
+          clearSelection: function clearSelection() {
+            _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: "".concat(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")
+        }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
+          clearSelection: clearInputValue,
+          disabled: disabled,
+          translateWithId: translateWithId,
+          onMouseUp: function 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
+        }))), isOpen ? /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, sortItems(filterItems(items, {
+          itemToString: itemToString,
+          inputValue: 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,
+            disabled: item.disabled
+          });
+          var itemText = itemToString(item);
+          var isChecked = selectedItem.filter(function (selected) {
+            return isEqual(selected, item);
+          }).length > 0;
+          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: "".concat(prefix, "--checkbox-wrapper")
+          }, /*#__PURE__*/React__default.createElement("span", {
+            title: useTitleInItem ? itemText : null,
+            className: "".concat(prefix, "--checkbox-label"),
+            "data-contained-checkbox-state": isChecked,
+            id: "".concat(itemProps.id, "-item")
+          }, ItemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
+            key: itemProps.id
+          }, item)) : itemText)));
+        })) : null), !inline && !invalid && !warn ? helper : null);
       });
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(_ref4, state) {
-      var open = _ref4.open;
-
-      /**
-       * programmatically control this `open` prop
-       */
-      var prevOpen = state.prevOpen;
-      return prevOpen === open ? null : {
-        isOpen: open,
-        prevOpen: open
-      };
-    }
-  }]);
-
-  return FilterableMultiSelect;
-}(React__default.Component);
-
-_defineProperty(FilterableMultiSelect, "propTypes", _objectSpread2(_objectSpread2({
+  });
+});
+FilterableMultiSelect.propTypes = _objectSpread2(_objectSpread2({
   /**
    * 'aria-label' of the ListBox component.
    */
@@ -529,7 +490,7 @@ _defineProperty(FilterableMultiSelect, "propTypes", _objectSpread2(_objectSpread
    * Generic `placeholder` that will be used as the textual representation of
    * what this field is for
    */
-  placeholder: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
 
   /**
    * Specify feedback (mode) of the selection.
@@ -563,11 +524,8 @@ _defineProperty(FilterableMultiSelect, "propTypes", _objectSpread2(_objectSpread
    * Provide the text that is displayed when the control is in warning state
    */
   warnText: PropTypes.node
-}));
-
-_defineProperty(FilterableMultiSelect, "contextType", FeatureFlagContext);
-
-_defineProperty(FilterableMultiSelect, "defaultProps", {
+});
+FilterableMultiSelect.defaultProps = {
   ariaLabel: 'Choose an item',
   compareItems: defaultCompareItems,
   direction: 'bottom',
@@ -580,6 +538,7 @@ _defineProperty(FilterableMultiSelect, "defaultProps", {
   light: false,
   open: false,
   selectionFeedback: 'top-after-reopen'
-});
+};
+var FilterableMultiSelect$1 = FilterableMultiSelect;
 
-export { FilterableMultiSelect as default };
+export { FilterableMultiSelect$1 as default };