@carbon/react 1.29.1 → 1.30.0-rc.0

package/lib/components/MultiSelect/MultiSelect.js

@@ -16,14 +16,13 @@ var Downshift = require('downshift');
 var isEqual = require('lodash.isequal');
 var PropTypes = require('prop-types');
 var React = require('react');
-var index$1 = require('../ListBox/index.js');
+var index = require('../ListBox/index.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var sorting = require('./tools/sorting.js');
 var Selection = require('../../internal/Selection.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
@@ -40,7 +39,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => {};
-
 const getInstanceId = setupGetInstanceId["default"]();
 const {
   ItemClick,
@@ -51,23 +49,18 @@ const {
   MenuKeyDownSpaceButton,
   ToggleButtonClick
 } = Downshift.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["default"].forwardRef(function MultiSelect(_ref, ref) {
   let {
     className: containerClassName,
@@ -133,11 +126,14 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
     getMenuProps,
     getItemProps,
     selectedItem
-  } = Downshift.useSelect({ ...downshiftProps,
+  } = Downshift.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,
@@ -153,31 +149,27 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
   });
   const mergedRef = mergeRefs["default"](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 = index.useFeatureFlag('enable-v11-release');
-  const wrapperClasses = cx__default["default"](`${prefix}--multi-select__wrapper`, `${prefix}--list-box__wrapper`, [enabled ? containerClassName : null], {
+  const wrapperClasses = cx__default["default"](`${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,
@@ -194,7 +186,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
   const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
   });
-  const className = cx__default["default"](`${prefix}--multi-select`, [enabled ? null : containerClassName], {
+  const className = cx__default["default"](`${prefix}--multi-select`, {
     [`${prefix}--multi-select--invalid`]: invalid,
     [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
     [`${prefix}--multi-select--warning`]: showWarning,
@@ -202,9 +194,10 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
     [`${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,
@@ -212,83 +205,70 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
     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.match(e, keys.Delete) || match.match(e, keys.Escape)) {
         clearSelection();
         e.stopPropagation();
       }
-
       if (match.match(e, keys.Space) || match.match(e, keys.ArrowDown)) {
         setIsOpenWrapper(true);
       }
     }
   };
-
   const multiSelectFieldWrapperClasses = cx__default["default"](`${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();
       }
@@ -300,7 +280,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
     className: titleClasses
   }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--visually-hidden`
-  }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+  }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(index["default"], {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
     type: type,
@@ -320,10 +300,11 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: multiSelectFieldWrapperClasses
-  }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$1["default"].Selection, {
+  }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index["default"].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
@@ -339,13 +320,14 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
   }, readOnlyEventHandlers), /*#__PURE__*/React__default["default"].createElement("span", {
     id: fieldLabelId,
     className: `${prefix}--list-box__label`
-  }, label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
+  }, label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, _rollupPluginBabelHelpers["extends"]({
+  }))), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({
     "aria-multiselectable": "true"
-  }, getMenuProps()), isOpen && // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  sortItems(items, sortOptions).map((item, index) => {
+  }, getMenuProps()), isOpen &&
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  sortItems(items, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const itemProps = getItemProps({
       item,
@@ -355,11 +337,11 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
       disabled: item.disabled
     });
     const itemText = itemToString(item);
-    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: isChecked,
       "aria-label": itemText,
-      isHighlighted: highlightedIndex === index,
+      isHighlighted: highlightedIndex === index$1,
       title: itemText
     }, itemProps), /*#__PURE__*/React__default["default"].createElement("div", {
       className: `${prefix}--checkbox-wrapper`
@@ -377,135 +359,112 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function M
   }, helperText));
 });
 MultiSelect.displayName = 'MultiSelect';
-MultiSelect.propTypes = { ...MultiSelectPropTypes.sortingPropTypes,
-
+MultiSelect.propTypes = {
+  ...MultiSelectPropTypes.sortingPropTypes,
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify the text that should be read for screen readers that describes total items selected
    */
   clearSelectionDescription: PropTypes__default["default"].string,
-
   /**
    * Specify the text that should be read for screen readers to clear selection.
    */
   clearSelectionText: PropTypes__default["default"].string,
-
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
   direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
-
   /**
    * Disable the control
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Additional props passed to Downshift
    */
   // @ts-ignore
   downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
-
   /**
    * Provide helper text that is used alongside the control label for
    * additional help
    */
   helperText: PropTypes__default["default"].node,
-
   /**
    * Specify whether the title text should be hidden or not
    */
   hideLabel: PropTypes__default["default"].bool,
-
   /**
    * Specify a custom `id`
    */
   id: PropTypes__default["default"].string.isRequired,
-
   /**
    * Allow users to pass in arbitrary items from their collection that are
    * pre-selected
    */
   initialSelectedItems: PropTypes__default["default"].array,
-
   /**
    * Is the current selection invalid?
    */
   invalid: PropTypes__default["default"].bool,
-
   /**
    * If invalid, what is the error?
    */
   invalidText: PropTypes__default["default"].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,
-
   /**
    * 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,
-
   /**
    * 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,
-
   /**
    * Generic `label` that will be used as the textual representation of what
    * this field is for
    */
   label: PropTypes__default["default"].node.isRequired,
-
   /**
    * `true` to use the light version.
    */
   light: deprecate["default"](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.'),
-
   /**
    * 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,
-
   /**
    * `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,
-
   /**
    * `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,
-
   /**
    * Initialize the component with an open(`true`)/closed(`false`) menu.
    */
   open: PropTypes__default["default"].bool,
-
   /**
    * Whether or not the Dropdown is readonly
    */
   readOnly: PropTypes__default["default"].bool,
-
   /**
    * For full control of the selected items
    */
   selectedItems: PropTypes__default["default"].array,
-
   /**
    * Specify feedback (mode) of the selection.
    * `top`: selected item jumps to top
@@ -513,38 +472,31 @@ MultiSelect.propTypes = { ...MultiSelectPropTypes.sortingPropTypes,
    * `top-after-reopen`: selected item jump to top after reopen dropdown
    */
   selectionFeedback: PropTypes__default["default"].oneOf(['top', 'fixed', 'top-after-reopen']),
-
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
   size: ListBoxPropTypes.ListBoxSize,
-
   /**
    * Provide text to be used in a `<label>` element that is tied to the
    * multiselect via ARIA attributes.
    */
   titleText: PropTypes__default["default"].node,
-
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes__default["default"].func,
-
   /**
    * Specify 'inline' to create an inline multi-select.
    */
   type: PropTypes__default["default"].oneOf(['default', 'inline']),
-
   /**
    * Specify title to show title on hover
    */
   useTitleInItem: PropTypes__default["default"].bool,
-
   /**
    * Specify whether the control is currently in warning state
    */
   warn: PropTypes__default["default"].bool,
-
   /**
    * Provide the text that is displayed when the control is in warning state
    */

package/lib/components/MultiSelect/MultiSelectPropTypes.js

@@ -24,7 +24,6 @@ const sortingPropTypes = {
    *  (itemA: string, itemB: string, { locale: string }) => number
    */
   compareItems: PropTypes__default["default"].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/lib/components/MultiSelect/index.js

@@ -15,7 +15,6 @@ var FilterableMultiSelect = require('./FilterableMultiSelect.js');
 
 FilterableMultiSelect["default"].displayName = 'MultiSelect.Filterable';
 MultiSelect["default"].Filterable = FilterableMultiSelect["default"];
-
 if (process.env.NODE_ENV !== "production") {
   deprecateFieldOnObject.deprecateFieldOnObject(MultiSelect["default"], 'Filterable', FilterableMultiSelect["default"]);
 }

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

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

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

@@ -27,10 +27,10 @@ const defaultCompareItems = (itemA, itemB, _ref) => {
     numeric: true
   });
 };
+
 /**
  * Default sorting algorithm for options in a selection control
  */
-
 const defaultSortItems = (items, _ref2) => {
   let {
     selectedItems = [],
@@ -40,16 +40,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
     });