@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

package/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React__default, { useMemo, useContext, useState, useLayoutEffect, isValidElement, useCallback } from 'react';
+import React, { useMemo, useContext, useState, useLayoutEffect, isValidElement, useCallback } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -58,46 +58,45 @@ const defaultItemToString = item => {
   }
   return '';
 };
-const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    autoAlign = false,
-    className: containerClassName,
-    decorator,
-    id,
-    items,
-    itemToElement,
-    itemToString = defaultItemToString,
-    titleText = false,
-    hideLabel,
-    helperText,
-    label,
-    type = 'default',
-    size: size$1,
-    disabled = false,
-    initialSelectedItems = [],
-    sortItems = defaultSortItems,
-    compareItems = defaultCompareItems,
-    clearSelectionText = 'To clear selection, press Delete or Backspace',
-    clearAnnouncement = 'all items have been cleared',
-    clearSelectionDescription = 'Total items selected: ',
-    light,
-    invalid,
-    invalidText,
-    warn,
-    warnText,
-    useTitleInItem,
-    translateWithId,
-    downshiftProps,
-    open = false,
-    selectionFeedback = 'top-after-reopen',
-    onChange,
-    onMenuChange,
-    direction = 'bottom',
-    selectedItems: selected,
-    readOnly,
-    locale = 'en',
-    slug
-  } = _ref;
+const MultiSelect = /*#__PURE__*/React.forwardRef(({
+  autoAlign = false,
+  className: containerClassName,
+  decorator,
+  id,
+  items,
+  itemToElement,
+  itemToString = defaultItemToString,
+  titleText = false,
+  hideLabel,
+  helperText,
+  label,
+  type = 'default',
+  size: size$1,
+  disabled = false,
+  initialSelectedItems = [],
+  sortItems = defaultSortItems,
+  compareItems = defaultCompareItems,
+  clearSelectionText = 'To clear selection, press Delete or Backspace',
+  clearAnnouncement = 'all items have been cleared',
+  clearSelectionDescription = 'Total items selected: ',
+  light,
+  invalid,
+  invalidText,
+  warn,
+  warnText,
+  useTitleInItem,
+  translateWithId,
+  downshiftProps,
+  open = false,
+  selectionFeedback = 'top-after-reopen',
+  onChange,
+  onMenuChange,
+  direction = 'bottom',
+  selectedItems: selected,
+  readOnly,
+  locale = 'en',
+  slug
+}, ref) => {
   const filteredItems = useMemo(() => {
     return items.filter(item => {
       if (typeof item === 'object' && item !== null) {
@@ -142,11 +141,10 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     middleware: [autoAlign && flip({
       crossAxis: false
     }), size({
-      apply(_ref2) {
-        let {
-          rects,
-          elements
-        } = _ref2;
+      apply({
+        rects,
+        elements
+      }) {
         Object.assign(elements.floating.style, {
           width: `${rects.reference.width}px`
         });
@@ -411,9 +409,9 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   } : {};
 
   // AILabel always size `mini`
-  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
   if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
+    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
@@ -438,13 +436,13 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       totalSelectableCount
     };
   }, [selectedItems, filteredItems]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
-  }, /*#__PURE__*/React__default.createElement("label", _extends({
+  }, /*#__PURE__*/React.createElement("label", _extends({
     className: titleClasses
-  }, labelProps), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__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.createElement(ListBox, {
+  }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React.createElement(ListBox, {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
     type: type,
@@ -458,14 +456,14 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     warnText: warnText,
     isOpen: isOpen,
     id: id
-  }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+  }, invalid && /*#__PURE__*/React.createElement(WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
-  }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+  }), showWarning && /*#__PURE__*/React.createElement(WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: multiSelectFieldWrapperClasses,
     ref: enableFloatingStyles ? refs.setReference : null
-  }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
+  }, selectedItems.length > 0 && /*#__PURE__*/React.createElement(ListBox.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn,
     selectionCount: selectedItemsLength
@@ -473,7 +471,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     ,
     translateWithId: translateWithId,
     disabled: disabled
-  }), /*#__PURE__*/React__default.createElement("button", _extends({
+  }), /*#__PURE__*/React.createElement("button", _extends({
     type: "button",
     className: `${prefix}--list-box__field`,
     disabled: disabled,
@@ -481,15 +479,15 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     "aria-describedby": !inline && !invalid && !warn && helperText ? helperId : undefined
   }, toggleButtonProps, {
     ref: mergedRef
-  }, readOnlyEventHandlers), /*#__PURE__*/React__default.createElement("span", {
+  }, readOnlyEventHandlers), /*#__PURE__*/React.createElement("span", {
     id: fieldLabelId,
     className: `${prefix}--list-box__label`
-  }, label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
+  }, label), /*#__PURE__*/React.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default.createElement("div", {
+  })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
-  }, normalizedDecorator) : ''), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
+  }, normalizedDecorator) : ''), /*#__PURE__*/React.createElement(ListBox.Menu, menuProps, isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const {
       hasIndividualSelections,
@@ -504,18 +502,18 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       ['aria-selected']: isChecked
     });
     const itemText = itemToString(item);
-    return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
+    return /*#__PURE__*/React.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
       isActive: isChecked && !item['isSelectAll'],
       "aria-label": itemText,
       isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: itemProps['aria-disabled']
-    }, itemProps), /*#__PURE__*/React__default.createElement("div", {
+    }, itemProps), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--checkbox-wrapper`
-    }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    }, /*#__PURE__*/React.createElement(Checkbox, {
       id: `${itemProps.id}__checkbox`,
-      labelText: itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
+      labelText: itemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _extends({
         key: itemProps.id
       }, item)) : itemText,
       checked: isChecked,
@@ -523,10 +521,10 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       indeterminate: isIndeterminate,
       disabled: disabled
     })));
-  })), itemsCleared && /*#__PURE__*/React__default.createElement("span", {
+  })), itemsCleared && /*#__PURE__*/React.createElement("span", {
     "aria-live": "assertive",
     "aria-label": clearAnnouncement
-  })), !inline && !invalid && !warn && helperText && /*#__PURE__*/React__default.createElement("div", {
+  })), !inline && !invalid && !warn && helperText && /*#__PURE__*/React.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText));

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

@@ -16,25 +16,21 @@
  * @returns {number} A negative number if itemA comes before itemB, a positive
  *   number if itemA comes after itemB, or 0 if they are equal.
  */
-const defaultCompareItems = (itemA, itemB, _ref) => {
-  let {
-    locale
-  } = _ref;
-  return itemA.localeCompare(itemB, locale, {
-    numeric: true
-  });
-};
+const defaultCompareItems = (itemA, itemB, {
+  locale
+}) => itemA.localeCompare(itemB, locale, {
+  numeric: true
+});
 
 /**
  * Default sorting algorithm for options in a selection control
  */
-const defaultSortItems = (items, _ref2) => {
-  let {
-    selectedItems = [],
-    itemToString,
-    compareItems,
-    locale = 'en'
-  } = _ref2;
+const defaultSortItems = (items, {
+  selectedItems = [],
+  itemToString,
+  compareItems,
+  locale = 'en'
+}) => {
   return items.sort((itemA, itemB) => {
     // Always place "select all" option at the beginning
     if (itemA.isSelectAll) return -1;