@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -21,7 +21,6 @@ import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { useId } from '../../internal/useId.js';
 import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
@@ -81,17 +80,14 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   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);
   }
-
   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], {
+  const wrapperClasses = cx(`${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,
@@ -127,28 +123,22 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       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
@@ -156,60 +146,48 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     const {
       stateChangeTypes
     } = Downshift;
-
     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.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.createElement(Selection, {
     disabled: disabled,
     onChange: handleOnChange,
@@ -250,7 +228,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
           inputValue,
           selectedItem
         } = _ref4;
-        const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, [enabled ? null : containerClassName], {
+        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,
@@ -266,12 +244,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
           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:
@@ -286,7 +262,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
               event.stopPropagation();
             }
           }
-
         });
         const inputProps = getInputProps({
           'aria-controls': isOpen ? menuId : null,
@@ -303,11 +278,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
             if (match(event, Space)) {
               event.stopPropagation();
             }
-
             if (match(event, Enter)) {
               handleOnMenuChange(true);
             }
-
             if (!disabled) {
               if (match(event, Delete) || match(event, Escape)) {
                 if (isOpen) {
@@ -321,15 +294,12 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
                 }
               }
             }
-
             if (match(event, Tab)) {
               handleOnMenuChange(false);
             }
-
             if (match(event, Home)) {
               event.target.setSelectionRange(0, 0);
             }
-
             if (match(event, End)) {
               event.target.setSelectionRange(event.target.value.length, event.target.value.length);
             }
@@ -347,7 +317,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         }, {
           suppressRefError: true
         });
-
         const handleFocus = evt => {
           if (evt.target.classList.contains(`${prefix}--tag__close-icon`) || evt.target.classList.contains(`${prefix}--list-box__selection`)) {
             setIsFocused(false);
@@ -355,7 +324,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
             setIsFocused(evt.type === 'focus' ? true : false);
           }
         };
-
         return /*#__PURE__*/React__default.createElement("div", {
           className: wrapperClasses
         }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
@@ -379,7 +347,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         }, selectedItem.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
           clearSelection: () => {
             clearSelection();
-
             if (textInput.current) {
               textInput.current.focus();
             }
@@ -455,113 +422,93 @@ 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
@@ -569,28 +516,23 @@ FilterableMultiSelect.propTypes = {
    * `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
    */
   translateWithId: PropTypes.func,
-
   /**
    * Specify title to show title on hover
    */
   useTitleInItem: PropTypes.bool,
-
   /**
    * Specify whether the control is currently in warning state
    */
   warn: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the control is in warning state
    */