@carbon/react 1.86.0 → 1.87.0

package/lib/components/MultiSelect/MultiSelect.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,13 +35,6 @@ var index$1 = 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 isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const {
   ItemClick,
   ToggleButtonBlur,
@@ -71,7 +62,7 @@ const defaultItemToString = item => {
   }
   return '';
 };
-const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
+const MultiSelect = /*#__PURE__*/React.forwardRef(({
   autoAlign = false,
   className: containerClassName,
   decorator,
@@ -254,7 +245,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
       }
     }
   });
-  const mergedRef = mergeRefs["default"](toggleButtonProps.ref, ref);
+  const mergedRef = mergeRefs.default(toggleButtonProps.ref, ref);
   const selectedItems = selectedItem;
 
   /**
@@ -276,7 +267,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
   }
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
-  const wrapperClasses = cx__default["default"](`${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
+  const wrapperClasses = cx(`${prefix}--multi-select__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,
@@ -285,16 +276,16 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator
   });
-  const titleClasses = cx__default["default"](`${prefix}--label`, {
+  const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
     [`${prefix}--visually-hidden`]: hideLabel
   });
   const helperId = !helperText ? undefined : `multiselect-helper-text-${multiSelectInstanceId}`;
   const fieldLabelId = `multiselect-field-label-${multiSelectInstanceId}`;
-  const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
+  const helperClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const className = cx__default["default"](`${prefix}--multi-select`, {
+  const className = cx(`${prefix}--multi-select`, {
     [`${prefix}--multi-select--invalid`]: invalid,
     [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
     [`${prefix}--multi-select--warning`]: showWarning,
@@ -397,7 +388,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
     }
     return changes;
   }
-  const multiSelectFieldWrapperClasses = cx__default["default"](`${prefix}--list-box__field--wrapper`, {
+  const multiSelectFieldWrapperClasses = cx(`${prefix}--list-box__field--wrapper`, {
     [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
   });
   const handleFocus = evt => {
@@ -448,13 +439,13 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
       totalSelectableCount
     };
   }, [selectedItems, filteredItems]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
-  }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React.createElement("label", _rollupPluginBabelHelpers.extends({
     className: titleClasses
-  }, labelProps), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, labelProps), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(index$2["default"], {
+  }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React.createElement(index$2.default, {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
     type: type,
@@ -468,14 +459,14 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
     warnText: warnText,
     isOpen: isOpen,
     id: id
-  }, 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`
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: multiSelectFieldWrapperClasses,
     ref: enableFloatingStyles ? refs.setReference : null
-  }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$2["default"].Selection, {
+  }, selectedItems.length > 0 && /*#__PURE__*/React.createElement(index$2.default.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
     selectionCount: selectedItemsLength
@@ -483,7 +474,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
     ,
     translateWithId: translateWithId,
     disabled: disabled
-  }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+  }), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     type: "button",
     className: `${prefix}--list-box__field`,
     disabled: disabled,
@@ -491,16 +482,16 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
     "aria-describedby": !inline && !invalid && !warn && helperText ? helperId : undefined
   }, toggleButtonProps, {
     ref: mergedRef
-  }, readOnlyEventHandlers), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, readOnlyEventHandlers), /*#__PURE__*/React.createElement("span", {
     id: fieldLabelId,
     className: `${prefix}--list-box__label`
-  }, label), /*#__PURE__*/React__default["default"].createElement(index$2["default"].MenuIcon, {
+  }, label), /*#__PURE__*/React.createElement(index$2.default.MenuIcon, {
     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$2["default"].Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
-    const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
+  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(index$2.default.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
+    const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const {
       hasIndividualSelections,
       nonSelectAllSelectedCount,
@@ -514,18 +505,18 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
       ['aria-selected']: isChecked
     });
     const itemText = itemToString(item);
-    return /*#__PURE__*/React__default["default"].createElement(index$2["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React.createElement(index$2.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
       isActive: isChecked && !item['isSelectAll'],
       "aria-label": itemText,
       isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: itemProps['aria-disabled']
-    }, itemProps), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, itemProps), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--checkbox-wrapper`
-    }, /*#__PURE__*/React__default["default"].createElement(Checkbox["default"], {
+    }, /*#__PURE__*/React.createElement(Checkbox.default, {
       id: `${itemProps.id}__checkbox`,
-      labelText: itemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+      labelText: itemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
         key: itemProps.id
       }, item)) : itemText,
       checked: isChecked,
@@ -533,10 +524,10 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(({
       indeterminate: isIndeterminate,
       disabled: disabled
     })));
-  })), itemsCleared && /*#__PURE__*/React__default["default"].createElement("span", {
+  })), itemsCleared && /*#__PURE__*/React.createElement("span", {
     "aria-live": "assertive",
     "aria-label": clearAnnouncement
-  })), !inline && !invalid && !warn && helperText && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), !inline && !invalid && !warn && helperText && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText));
@@ -549,38 +540,38 @@ MultiSelect.propTypes = {
    * element to avoid collisions with the viewport and being clipped by
    * ancestor elements.
    */
-  autoAlign: PropTypes__default["default"].bool,
+  autoAlign: PropTypes.bool,
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * 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,
   /**
    * Provide a compare function that is used to determine the ordering of
    * options. See 'sortItems' for more control. Consider
    * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
-  compareItems: PropTypes__default["default"].func,
+  compareItems: PropTypes.func,
   /**
    * **Experimental**: Provide a decorator component to be rendered inside the `MultiSelect` 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.
    *
@@ -589,98 +580,98 @@ MultiSelect.propTypes = {
    * change, and in some cases they can not be shimmed by Carbon to shield you
    * from potentially breaking changes.
    */
-  downshiftProps: PropTypes__default["default"].object,
+  downshiftProps: PropTypes.object,
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
    */
-  helperText: PropTypes__default["default"].node,
+  helperText: PropTypes.node,
   /**
    * 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. Consider
    * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
-  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,
   /**
    * Generic `label` that will be used as the textual representation of what
    * this field is for
    */
-  label: PropTypes__default["default"].node.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * `true` to use the light version.
    */
-  light: deprecate.deprecate(PropTypes__default["default"].bool, 'The `light` prop for `MultiSelect` 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 `MultiSelect` 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,
   /**
    * `onMenuChange` is a utility for this controlled component to communicate to a
    * consuming component that the menu was open(`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,
   /**
    * Whether or not the Dropdown is readonly
    */
-  readOnly: PropTypes__default["default"].bool,
+  readOnly: PropTypes.bool,
   /**
    * For full control of the selected items
    */
-  selectedItems: PropTypes__default["default"].array,
+  selectedItems: PropTypes.array,
   /**
    * 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.'),
   /**
    * Provide a method that sorts all options in the control. Overriding this
    * prop means that you also have to handle the sort logic for selected versus
@@ -701,16 +692,16 @@ MultiSelect.propTypes = {
    *     locale: string,
    *   }) => Array<Item>
    */
-  sortItems: PropTypes__default["default"].func,
+  sortItems: PropTypes.func,
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * multiselect 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,
   /**
    * Specify 'inline' to create an inline multi-select.
    */
@@ -718,15 +709,15 @@ MultiSelect.propTypes = {
   /**
    * 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
 };
 
 exports.MultiSelect = MultiSelect;

package/lib/components/MultiSelect/MultiSelectPropTypes.js

@@ -7,14 +7,8 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var PropTypes = require('prop-types');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
 const sortingPropTypes = {
   /**
    * Provide a compare function that is used to determine the ordering of
@@ -23,7 +17,7 @@ const sortingPropTypes = {
    * compareFunction :
    *  (itemA: string, itemB: string, { locale: string }) => number
    */
-  compareItems: PropTypes__default["default"].func,
+  compareItems: PropTypes.func,
   /**
    * Provide a method that sorts all options in the control. Overriding this
    * prop means that you also have to handle the sort logic for selected versus
@@ -42,7 +36,7 @@ const sortingPropTypes = {
    *     locale: string,
    *   }) => Array<Item>
    */
-  sortItems: PropTypes__default["default"].func
+  sortItems: PropTypes.func
 };
 
 exports.sortingPropTypes = sortingPropTypes;

package/lib/components/MultiSelect/filter.js

@@ -7,12 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-// TODO [@carbon-design-system/monorepo-reviewers]: This file was in the
-// `ComboBox` directory before but it wasn't used there. Now it's used in
-// `FilterableMultiSelect`. Is that expected?
-
 const defaultFilterItems = (items, {
   itemToString,
   inputValue

package/lib/components/MultiSelect/tools/itemToString.d.ts

@@ -0,0 +1 @@
+export function defaultItemToString(item: any): any;

package/lib/components/MultiSelect/tools/itemToString.js

@@ -7,16 +7,10 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var invariant = require('invariant');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
-
 const itemToString = item => {
-  !(typeof item.label === 'string') ? process.env.NODE_ENV !== "production" ? invariant__default["default"](false, '[MultiSelect] the default `itemToString` method expected to receive ' + 'an item with a `label` field of type `string`. Instead received: `%s`', typeof item.label) : invariant__default["default"](false) : void 0;
+  !(typeof item.label === 'string') ? process.env.NODE_ENV !== "production" ? invariant(false, '[MultiSelect] the default `itemToString` method expected to receive ' + 'an item with a `label` field of type `string`. Instead received: `%s`', typeof item.label) : invariant(false) : void 0;
   return item.label || '';
 };
 const defaultItemToString = item => {

package/lib/components/MultiSelect/tools/sorting.d.ts

@@ -0,0 +1,9 @@
+export function defaultCompareItems(itemA: string, itemB: string, { locale }: {
+    locale: string;
+}): number;
+export function defaultSortItems(items: any, { selectedItems, itemToString, compareItems, locale }: {
+    selectedItems?: never[] | undefined;
+    itemToString: any;
+    compareItems: any;
+    locale?: string | undefined;
+}): any;

package/lib/components/MultiSelect/tools/sorting.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Use the locale `localeCompare` with the `numeric` option to sort two
  * alpha-numeric strings.