@carbon/react 1.29.1 → 1.30.0-rc.0

package/es/components/MultiSelect/MultiSelect.js

@@ -19,7 +19,6 @@ import { useSelection } from '../../internal/Selection.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
-import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
@@ -28,7 +27,6 @@ import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Delete, Escape, Space, ArrowDown } from '../../internal/keyboard/keys.js';
 
 const noop = () => {};
-
 const getInstanceId = setupGetInstanceId();
 const {
   ItemClick,
@@ -39,23 +37,18 @@ const {
   MenuKeyDownSpaceButton,
   ToggleButtonClick
 } = useSelect.stateChangeTypes;
-
 const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
   }
-
   if (typeof item === 'number') {
     return `${item}`;
   }
-
   if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
     return item['label'];
   }
-
   return '';
 };
-
 const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_ref, ref) {
   let {
     className: containerClassName,
@@ -121,11 +114,14 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
     getMenuProps,
     getItemProps,
     selectedItem
-  } = useSelect({ ...downshiftProps,
+  } = useSelect({
+    ...downshiftProps,
     highlightedIndex,
     isOpen,
     itemToString: items => {
-      return items.map(item => itemToString(item)).join(', ');
+      return Array.isArray(items) && items.map(function (item) {
+        return itemToString(item);
+      }).join(', ') || '';
     },
     onStateChange,
     selectedItem: controlledSelectedItems,
@@ -141,31 +137,27 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
   });
   const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
   const selectedItems = selectedItem;
+
   /**
    * wrapper function to forward changes to consumer
    */
-
   const setIsOpenWrapper = open => {
     setIsOpen(open);
-
     if (onMenuChange) {
       onMenuChange(open);
     }
   };
+
   /**
    * programmatically control this `open` prop
    */
-
-
   if (prevOpenProp !== open) {
     setIsOpenWrapper(open);
     setPrevOpenProp(open);
   }
-
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
-  const enabled = useFeatureFlag('enable-v11-release');
-  const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, [enabled ? containerClassName : null], {
+  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,
@@ -182,7 +174,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
   const helperClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const className = cx(`${prefix}--multi-select`, [enabled ? null : containerClassName], {
+  const className = cx(`${prefix}--multi-select`, {
     [`${prefix}--multi-select--invalid`]: invalid,
     [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
     [`${prefix}--multi-select--warning`]: showWarning,
@@ -190,9 +182,10 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
     [`${prefix}--multi-select--selected`]: selectedItems && selectedItems.length > 0,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--multi-select--readonly`]: readOnly
-  }); // needs to be capitalized for react to render it correctly
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  });
 
+  // needs to be capitalized for react to render it correctly
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const ItemToElement = itemToElement;
   const sortOptions = {
     selectedItems: controlledSelectedItems,
@@ -200,83 +193,70 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
     compareItems,
     locale
   };
-
   if (selectionFeedback === 'fixed') {
     sortOptions.selectedItems = [];
   } else if (selectionFeedback === 'top-after-reopen') {
     sortOptions.selectedItems = topItems;
   }
-
   function onStateChange(changes) {
     if (changes.isOpen && !isOpen) {
       setTopItems(controlledSelectedItems);
     }
-
     const {
       type
     } = changes;
-
     switch (type) {
       case ItemClick:
       case MenuKeyDownSpaceButton:
         if (changes.selectedItem === undefined) {
           break;
         }
-
         onItemChange(changes.selectedItem);
         break;
-
       case MenuKeyDownArrowDown:
       case MenuKeyDownArrowUp:
         setHighlightedIndex(changes.highlightedIndex);
         break;
-
       case MenuBlur:
       case MenuKeyDownEscape:
         setIsOpenWrapper(false);
         setHighlightedIndex(changes.highlightedIndex);
         break;
-
       case ToggleButtonClick:
         setIsOpenWrapper(changes.isOpen || false);
         setHighlightedIndex(changes.highlightedIndex);
         break;
     }
   }
-
   const onKeyDown = e => {
     if (!disabled) {
       if (match(e, Delete) || match(e, Escape)) {
         clearSelection();
         e.stopPropagation();
       }
-
       if (match(e, Space) || match(e, ArrowDown)) {
         setIsOpenWrapper(true);
       }
     }
   };
-
   const multiSelectFieldWrapperClasses = cx(`${prefix}--list-box__field--wrapper`, {
     [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
   });
-
   const handleFocus = evt => {
     evt.target.classList.contains(`${prefix}--tag__close-icon`) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
   };
-
   const readOnlyEventHandlers = readOnly ? {
     onClick: evt => {
       // NOTE: does not prevent click
-      evt.preventDefault(); // focus on the element as per readonly input behavior
-
+      evt.preventDefault();
+      // focus on the element as per readonly input behavior
       if (mergedRef.current !== undefined) {
         mergedRef.current.focus();
       }
     },
     onKeyDown: evt => {
-      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
-
+      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+      // This prevents the select from opening for the above keys
       if (selectAccessKeys.includes(evt.key)) {
         evt.preventDefault();
       }
@@ -311,7 +291,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
   }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noop,
-    selectionCount: selectedItems.length // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    selectionCount: selectedItems.length
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     ,
     translateWithId: translateWithId,
     disabled: disabled
@@ -332,7 +313,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
     translateWithId: translateWithId
   }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({
     "aria-multiselectable": "true"
-  }, getMenuProps()), isOpen && // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  }, getMenuProps()), isOpen &&
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(items, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const itemProps = getItemProps({
@@ -365,135 +347,112 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
   }, helperText));
 });
 MultiSelect.displayName = 'MultiSelect';
-MultiSelect.propTypes = { ...sortingPropTypes,
-
+MultiSelect.propTypes = {
+  ...sortingPropTypes,
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
   className: PropTypes.string,
-
   /**
    * Specify the text that should be read for screen readers that describes total items selected
    */
   clearSelectionDescription: PropTypes.string,
-
   /**
    * Specify the text that should be read for screen readers to clear selection.
    */
   clearSelectionText: PropTypes.string,
-
   /**
    * 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
    */
   // @ts-ignore
   downshiftProps: PropTypes.shape(Downshift.propTypes),
-
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
    */
   helperText: PropTypes.node,
-
   /**
    * 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,
-
   /**
    * Generic `label` that will be used as the textual representation of what
    * this field is for
    */
   label: PropTypes.node.isRequired,
-
   /**
    * `true` to use the light version.
    */
   light: 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.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,
-
   /**
    * `onMenuChange` is a utility for this controlled component to communicate to a
    * consuming component that the menu was open(`true`)/closed(`false`).
    */
   onMenuChange: PropTypes.func,
-
   /**
    * Initialize the component with an open(`true`)/closed(`false`) menu.
    */
   open: PropTypes.bool,
-
   /**
    * Whether or not the Dropdown is readonly
    */
   readOnly: PropTypes.bool,
-
   /**
    * For full control of the selected items
    */
   selectedItems: PropTypes.array,
-
   /**
    * Specify feedback (mode) of the selection.
    * `top`: selected item jumps to top
@@ -501,38 +460,31 @@ MultiSelect.propTypes = { ...sortingPropTypes,
    * `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,
-
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * multiselect via ARIA attributes.
    */
   titleText: PropTypes.node,
-
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes.func,
-
   /**
    * Specify 'inline' to create an inline multi-select.
    */
   type: PropTypes.oneOf(['default', 'inline']),
-
   /**
    * 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
    */

package/es/components/MultiSelect/MultiSelectPropTypes.js

@@ -16,7 +16,6 @@ const sortingPropTypes = {
    *  (itemA: string, itemB: string, { locale: string }) => number
    */
   compareItems: PropTypes.func.isRequired,
-
   /**
    * 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

package/es/components/MultiSelect/index.js

@@ -13,7 +13,6 @@ export { default as FilterableMultiSelect } from './FilterableMultiSelect.js';
 
 FilterableMultiSelect.displayName = 'MultiSelect.Filterable';
 MultiSelect.Filterable = FilterableMultiSelect;
-
 if (process.env.NODE_ENV !== "production") {
   deprecateFieldOnObject(MultiSelect, 'Filterable', FilterableMultiSelect);
 }

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

@@ -11,12 +11,10 @@ const itemToString = item => {
   !(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 => {
   if (Array.isArray(item)) {
     return item.map(itemToString);
   }
-
   return itemToString(item);
 };
 

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

@@ -23,10 +23,10 @@ const defaultCompareItems = (itemA, itemB, _ref) => {
     numeric: true
   });
 };
+
 /**
  * Default sorting algorithm for options in a selection control
  */
-
 const defaultSortItems = (items, _ref2) => {
   let {
     selectedItems = [],
@@ -36,16 +36,15 @@ const defaultSortItems = (items, _ref2) => {
   } = _ref2;
   return items.sort((itemA, itemB) => {
     const hasItemA = selectedItems.includes(itemA);
-    const hasItemB = selectedItems.includes(itemB); // Prefer whichever item is in the `selectedItems` array first
+    const hasItemB = selectedItems.includes(itemB);
 
+    // Prefer whichever item is in the `selectedItems` array first
     if (hasItemA && !hasItemB) {
       return -1;
     }
-
     if (hasItemB && !hasItemA) {
       return 1;
     }
-
     return compareItems(itemToString(itemA), itemToString(itemB), {
       locale
     });