@carbon/react 1.29.1 → 1.30.0

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -18,14 +18,13 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var filter = require('../ComboBox/tools/filter.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
-var index$1 = require('../ListBox/index.js');
+var index = require('../ListBox/index.js');
 var Selection = require('../../internal/Selection.js');
 var itemToString = require('./tools/itemToString.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var useId = require('../../internal/useId.js');
 var sorting = require('./tools/sorting.js');
-var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
@@ -93,17 +92,14 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   const [currentSelectedItems, setCurrentSelectedItems] = React.useState(initialSelectedItems ?? []);
   const textInput = React.useRef();
   const filterableMultiSelectInstanceId = useId.useId();
-  const enabled = index.useFeatureFlag('enable-v11-release');
   const prefix = usePrefix.usePrefix();
-
   if (prevOpen !== open) {
     setIsOpen(open);
     setPrevOpen(open);
   }
-
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
-  const wrapperClasses = cx__default["default"](`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, [enabled ? containerClassName : null], {
+  const wrapperClasses = cx__default["default"](`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
     [`${prefix}--multi-select__wrapper--inline`]: inline,
     [`${prefix}--list-box__wrapper--inline`]: inline,
     [`${prefix}--multi-select__wrapper--inline--invalid`]: inline && invalid,
@@ -139,28 +135,22 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       setTopItems(currentSelectedItems);
     }
   }, [currentSelectedItems, isOpen, setTopItems]);
-
   function handleOnChange(changes) {
     setCurrentSelectedItems(changes.selectedItems);
-
     if (onChange) {
       onChange(changes);
     }
   }
-
   function handleOnMenuChange(forceIsOpen) {
     const nextIsOpen = forceIsOpen ?? !isOpen;
     setIsOpen(nextIsOpen);
-
     if (onMenuChange) {
       onMenuChange(nextIsOpen);
     }
   }
-
   function handleOnOuterClick() {
     handleOnMenuChange(false);
   }
-
   function handleOnStateChange(changes) {
     const {
       type
@@ -168,60 +158,48 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     const {
       stateChangeTypes
     } = Downshift__default["default"];
-
     switch (type) {
       case stateChangeTypes.keyDownArrowDown:
       case stateChangeTypes.keyDownArrowUp:
       case stateChangeTypes.keyDownHome:
       case stateChangeTypes.keyDownEnd:
         setHighlightedIndex(changes.highlightedIndex !== undefined ? changes.highlightedIndex : null);
-
         if (stateChangeTypes.keyDownArrowDown === type && !isOpen) {
           handleOnMenuChange(true);
         }
-
         break;
-
       case stateChangeTypes.keyDownEscape:
         handleOnMenuChange(false);
         break;
     }
   }
-
   function handleOnInputValueChange(inputValue, _ref2) {
     let {
       type
     } = _ref2;
-
     if (onInputValueChange) {
       onInputValueChange(inputValue);
     }
-
     if (type !== Downshift__default["default"].stateChangeTypes.changeInput) {
       return;
     }
-
     if (Array.isArray(inputValue)) {
       clearInputValue();
     } else {
       setInputValue(inputValue);
     }
-
     if (inputValue && !isOpen) {
       handleOnMenuChange(true);
     } else if (!inputValue && isOpen) {
       handleOnMenuChange(false);
     }
   }
-
   function clearInputValue() {
     setInputValue('');
-
     if (textInput.current) {
       textInput.current.focus();
     }
   }
-
   return /*#__PURE__*/React__default["default"].createElement(Selection["default"], {
     disabled: disabled,
     onChange: handleOnChange,
@@ -262,7 +240,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           inputValue,
           selectedItem
         } = _ref4;
-        const className = cx__default["default"](`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, [enabled ? null : containerClassName], {
+        const className = cx__default["default"](`${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,
@@ -278,12 +256,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           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:
@@ -298,7 +274,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
               event.stopPropagation();
             }
           }
-
         });
         const inputProps = getInputProps({
           'aria-controls': isOpen ? menuId : null,
@@ -315,11 +290,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
             if (match.match(event, keys.Space)) {
               event.stopPropagation();
             }
-
             if (match.match(event, keys.Enter)) {
               handleOnMenuChange(true);
             }
-
             if (!disabled) {
               if (match.match(event, keys.Delete) || match.match(event, keys.Escape)) {
                 if (isOpen) {
@@ -333,15 +306,12 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
                 }
               }
             }
-
             if (match.match(event, keys.Tab)) {
               handleOnMenuChange(false);
             }
-
             if (match.match(event, keys.Home)) {
               event.target.setSelectionRange(0, 0);
             }
-
             if (match.match(event, keys.End)) {
               event.target.setSelectionRange(event.target.value.length, event.target.value.length);
             }
@@ -359,7 +329,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         }, {
           suppressRefError: true
         });
-
         const handleFocus = evt => {
           if (evt.target.classList.contains(`${prefix}--tag__close-icon`) || evt.target.classList.contains(`${prefix}--list-box__selection`)) {
             setIsFocused(false);
@@ -367,12 +336,11 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
             setIsFocused(evt.type === 'focus' ? true : false);
           }
         };
-
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: wrapperClasses
         }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
           className: titleClasses
-        }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+        }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(index["default"], {
           "aria-label": deprecatedAriaLabel || ariaLabel,
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
@@ -391,7 +359,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         }, selectedItem.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
           clearSelection: () => {
             clearSelection();
-
             if (textInput.current) {
               textInput.current.focus();
             }
@@ -422,7 +389,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
         }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
           isOpen: isOpen,
           translateWithId: translateWithId
-        }))), isOpen ? /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, sortItems(filterItems(items, {
+        }))), isOpen ? /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, sortItems(filterItems(items, {
           itemToString,
           inputValue
         }), {
@@ -434,18 +401,18 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           itemToString,
           compareItems,
           locale
-        }).map((item, index) => {
+        }).map((item, index$1) => {
           const itemProps = getItemProps({
             item,
             disabled: item.disabled
           });
           const itemText = itemToString(item);
           const isChecked = selectedItem.filter(selected => isEqual__default["default"](selected, item)).length > 0;
-          return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+          return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
             key: itemProps.id,
             "aria-label": itemText,
             isActive: isChecked,
-            isHighlighted: highlightedIndex === index,
+            isHighlighted: highlightedIndex === index$1,
             title: itemText
           }, itemProps), /*#__PURE__*/React__default["default"].createElement("div", {
             className: `${prefix}--checkbox-wrapper`
@@ -467,113 +434,93 @@ FilterableMultiSelect.propTypes = {
    * Specify a label to be read by screen readers on the container node
    */
   ['aria-label']: PropTypes__default["default"].string,
-
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].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__default["default"].oneOf(['top', 'bottom']),
-
   /**
    * Disable the control
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Additional props passed to Downshift
    */
   downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
-
   /**
    * Specify whether the title text should be hidden or not
    */
   hideLabel: PropTypes__default["default"].bool,
-
   /**
    * Specify a custom `id`
    */
   id: PropTypes__default["default"].string.isRequired,
-
   /**
    * Allow users to pass in arbitrary items from their collection that are
    * pre-selected
    */
   initialSelectedItems: PropTypes__default["default"].array,
-
   /**
    * Is the current selection invalid?
    */
   invalid: PropTypes__default["default"].bool,
-
   /**
    * If invalid, what is the error?
    */
   invalidText: PropTypes__default["default"].node,
-
   /**
    * Function to render items as custom components instead of strings.
    * Defaults to null and is overridden by a getter
    */
   itemToElement: PropTypes__default["default"].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__default["default"].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__default["default"].array.isRequired,
-
   /**
    * `true` to use the light version.
    */
   light: deprecate["default"](PropTypes__default["default"].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__default["default"].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__default["default"].func,
-
   /**
    * `onInputValueChange` is a utility for this controlled component to communicate to
    * the currently typed input.
    */
   onInputValueChange: PropTypes__default["default"].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__default["default"].func,
-
   /**
    * Initialize the component with an open(`true`)/closed(`false`) menu.
    */
   open: PropTypes__default["default"].bool,
-
   /**
    * Generic `placeholder` that will be used as the textual representation of
    * what this field is for
    */
   placeholder: PropTypes__default["default"].string,
-
   /**
    * Specify feedback (mode) of the selection.
    * `top`: selected item jumps to top
@@ -581,28 +528,23 @@ FilterableMultiSelect.propTypes = {
    * `top-after-reopen`: selected item jump to top after reopen dropdown
    */
   selectionFeedback: PropTypes__default["default"].oneOf(['top', 'fixed', 'top-after-reopen']),
-
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
   ...MultiSelectPropTypes.sortingPropTypes,
-
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes__default["default"].func,
-
   /**
    * Specify title to show title on hover
    */
   useTitleInItem: PropTypes__default["default"].bool,
-
   /**
    * Specify whether the control is currently in warning state
    */
   warn: PropTypes__default["default"].bool,
-
   /**
    * Provide the text that is displayed when the control is in warning state
    */