@carbon/react 1.86.0 → 1.87.0

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
@@ -37,14 +35,6 @@ var index = require('../AILabel/index.js');
 var utils = require('../../internal/utils.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
-var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const {
   InputBlur,
   InputKeyDownEnter,
@@ -114,7 +104,8 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   useTitleInItem,
   warn,
   warnText,
-  slug
+  slug,
+  inputProps
 }, ref) {
   const {
     isFluid
@@ -202,7 +193,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString$1, compareItems, locale]);
   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`, containerClassName, {
+  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,
@@ -215,21 +206,21 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   });
   const helperId = !helperText ? undefined : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
   const labelId = `${id}-label`;
-  const titleClasses = cx__default["default"]({
+  const titleClasses = cx({
     [`${prefix}--label`]: true,
     [`${prefix}--label--disabled`]: disabled,
     [`${prefix}--visually-hidden`]: hideLabel
   });
-  const helperClasses = cx__default["default"]({
+  const helperClasses = cx({
     [`${prefix}--form__helper-text`]: true,
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const inputClasses = cx__default["default"]({
+  const inputClasses = cx({
     [`${prefix}--text-input`]: true,
     [`${prefix}--text-input--empty`]: !inputValue,
     [`${prefix}--text-input--light`]: light
   });
-  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText) : null;
@@ -350,7 +341,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
         }
         return {
           ...changes,
-          highlightedIndex: null
+          highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
         };
       case InputChange:
         if (onInputValueChange) {
@@ -363,6 +354,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
           highlightedIndex: 0
         };
       case InputClick:
+        setIsOpen(changes.isOpen || false);
         validateHighlightFocus();
         if (changes.isOpen && !changes.selectedItem) {
           return {
@@ -372,7 +364,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
         return {
           ...changes,
           isOpen: false,
-          highlightedIndex: null
+          highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
         };
       case MenuMouseLeave:
         return {
@@ -463,7 +455,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
   }) : null;
-  const className = cx__default["default"](`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
+  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,
@@ -494,7 +486,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       }
     }
   });
-  const inputProps = getInputProps(getDropdownProps({
+  const inputProp = getInputProps(getDropdownProps({
     'aria-controls': isOpen ? menuId : undefined,
     'aria-describedby': helperText ? helperId : undefined,
     'aria-haspopup': 'listbox',
@@ -504,6 +496,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     disabled,
     placeholder,
     preventKeyAction: isOpen,
+    ...inputProps,
     onClick: () => handleMenuChange(true),
     onKeyDown(event) {
       const $input = event.target;
@@ -557,7 +550,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       setIsFocused(evt?.type === 'focus' ? true : false);
     }
   };
-  const mergedRef = mergeRefs["default"](textInput, inputProps.ref);
+  const mergedRef = mergeRefs.default(textInput, inputProp.ref);
   const readOnlyEventHandlers = readOnly ? {
     onClick: evt => {
       // NOTE: does not prevent click
@@ -576,13 +569,13 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     }
   } : {};
   const clearSelectionContent = controlledSelectedItems.length > 0 ? `${clearSelectionDescription} ${controlledSelectedItems.length}. ${clearSelectionText}.` : `${clearSelectionDescription} 0.`;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
-  }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+  }, titleText ? /*#__PURE__*/React.createElement("label", _rollupPluginBabelHelpers.extends({
     className: titleClasses
-  }, labelProps), titleText, /*#__PURE__*/React__default["default"].createElement("span", {
+  }, labelProps), titleText, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--visually-hidden`
-  }, clearSelectionContent)) : null, /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+  }, clearSelectionContent)) : null, /*#__PURE__*/React.createElement(index$1.default, {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
     className: className,
@@ -596,10 +589,10 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     warnText: warnText,
     isOpen: !readOnly && isOpen,
     size: size
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__field`,
     ref: autoAlign ? refs.setReference : null
-  }, controlledSelectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
+  }, controlledSelectedItems.length > 0 && /*#__PURE__*/React.createElement(ListBoxSelection.default, {
     readOnly: readOnly,
     clearSelection: () => {
       clearSelection();
@@ -610,17 +603,17 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     selectionCount: controlledSelectedItems.length,
     translateWithId: translateWithId,
     disabled: disabled
-  }), /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
+  }), /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({
     className: inputClasses
-  }, inputProps, {
+  }, inputProp, {
     ref: mergedRef
   }, readOnlyEventHandlers, {
     readOnly: readOnly
-  })), invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+  })), invalid && /*#__PURE__*/React.createElement(iconsReact.WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
-  }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+  }), showWarning && /*#__PURE__*/React.createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
-  }), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
+  }), inputValue && /*#__PURE__*/React.createElement(ListBoxSelection.default, {
     clearSelection: clearInputValue,
     disabled: disabled,
     translateWithId: translateWithId,
@@ -633,13 +626,13 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       // ListBoxSelection
       event.stopPropagation();
     }
-  }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
+  }), /*#__PURE__*/React.createElement(ListBoxTrigger.default, _rollupPluginBabelHelpers.extends({}, buttonProps, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
-    const isChecked = controlledSelectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
+  }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(index$1.default.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
+    const isChecked = controlledSelectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const itemProps = getItemProps({
       item,
       ['aria-selected']: isChecked
@@ -656,21 +649,21 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       // eslint-disable-line @typescript-eslint/no-unused-vars
       ...modifiedItemProps
     } = itemProps;
-    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React.createElement(index$1.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
       "aria-label": itemText,
       isActive: isChecked,
       isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: disabled
-    }, modifiedItemProps), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, modifiedItemProps), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--checkbox-wrapper`
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       title: useTitleInItem ? itemText : undefined,
       className: `${prefix}--checkbox-label`,
       "data-contained-checkbox-state": isChecked,
       id: `${itemProps.id}-item`
-    }, ItemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+    }, ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
       key: itemProps.id
     }, item)) : itemText)));
   }) : null)), !inline && !invalid && !warn ? helper : null);
@@ -681,38 +674,38 @@ FilterableMultiSelect.propTypes = {
    * Deprecated, aria-label is no longer needed
    * Specify a label to be read by screen readers on the container node
    */
-  ['aria-label']: deprecate.deprecate(PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
+  ['aria-label']: deprecate.deprecate(PropTypes.string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify a label to be read by screen readers on the container note.
    */
-  ariaLabel: deprecate.deprecate(PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
+  ariaLabel: deprecate.deprecate(PropTypes.string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
    * ancestor elements.
    */
-  autoAlign: PropTypes__default["default"].bool,
+  autoAlign: PropTypes.bool,
   /**
    * Specify the text that should be read for screen readers that describes total items selected
    */
-  clearSelectionDescription: PropTypes__default["default"].string,
+  clearSelectionDescription: PropTypes.string,
   /**
    * Specify the text that should be read for screen readers to clear selection.
    */
-  clearSelectionText: PropTypes__default["default"].string,
+  clearSelectionText: PropTypes.string,
   /**
    * **Experimental**: Provide a decorator component to be rendered inside the `FilterableMultiSelect` component
    */
-  decorator: PropTypes__default["default"].node,
+  decorator: PropTypes.node,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
-  direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
+  direction: PropTypes.oneOf(['top', 'bottom']),
   /**
    * Disable the control
    */
-  disabled: PropTypes__default["default"].bool,
+  disabled: PropTypes.bool,
   /**
    * Additional props passed to Downshift.
    *
@@ -722,112 +715,119 @@ FilterableMultiSelect.propTypes = {
    * from potentially breaking changes.
    */
   // @ts-ignore
-  downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
+  downshiftProps: PropTypes.shape(Downshift.propTypes),
   /**
    * Specify whether the title text should be hidden or not
    */
-  hideLabel: PropTypes__default["default"].bool,
+  hideLabel: PropTypes.bool,
   /**
    * Specify a custom `id`
    */
-  id: PropTypes__default["default"].string.isRequired,
+  id: PropTypes.string.isRequired,
   /**
    * Allow users to pass in arbitrary items from their collection that are
    * pre-selected
    */
-  initialSelectedItems: PropTypes__default["default"].array,
+  initialSelectedItems: PropTypes.array,
   /**
    * Is the current selection invalid?
    */
-  invalid: PropTypes__default["default"].bool,
+  invalid: PropTypes.bool,
   /**
    * If invalid, what is the error?
    */
-  invalidText: PropTypes__default["default"].node,
+  invalidText: PropTypes.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,
+  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__default["default"].func,
+  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__default["default"].array.isRequired,
+  items: PropTypes.array.isRequired,
   /**
    * `true` to use the light version.
    */
-  light: deprecate.deprecate(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.'),
+  light: deprecate.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__default["default"].string,
+  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__default["default"].func,
+  onChange: PropTypes.func,
   /**
    * `onInputValueChange` is a utility for this controlled component to communicate to
    * the currently typed input.
    */
-  onInputValueChange: PropTypes__default["default"].func,
+  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__default["default"].func,
+  onMenuChange: PropTypes.func,
   /**
    * Initialize the component with an open(`true`)/closed(`false`) menu.
    */
-  open: PropTypes__default["default"].bool,
+  open: PropTypes.bool,
   /**
    * Generic `placeholder` that will be used as the textual representation of
    * what this field is for
    */
-  placeholder: PropTypes__default["default"].string,
+  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__default["default"].oneOf(['top', 'fixed', 'top-after-reopen']),
+  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: ListBoxPropTypes.ListBoxSizePropType,
-  slug: deprecate.deprecate(PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
+  slug: deprecate.deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   ...MultiSelectPropTypes.sortingPropTypes,
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * combobox via ARIA attributes.
    */
-  titleText: PropTypes__default["default"].node,
+  titleText: PropTypes.node,
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
-  translateWithId: PropTypes__default["default"].func,
+  translateWithId: PropTypes.func,
   type: ListBoxPropTypes.ListBoxTypePropType,
   /**
    * Specify title to show title on hover
    */
-  useTitleInItem: PropTypes__default["default"].bool,
+  useTitleInItem: PropTypes.bool,
   /**
    * Specify whether the control is currently in warning state
    */
-  warn: PropTypes__default["default"].bool,
+  warn: PropTypes.bool,
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes__default["default"].node
+  warnText: PropTypes.node,
+  /**
+   * Specify native input attributes to place on the `<input>`, like maxLength.
+   * These are passed to downshift's getInputProps() and will override the
+   * internal input props.
+   * https://github.com/downshift-js/downshift?tab=readme-ov-file#getinputprops
+   */
+  inputProps: PropTypes.object
 };
 
 exports.FilterableMultiSelect = FilterableMultiSelect;