@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/MultiSelect/MultiSelect.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import Downshift, { useSelect } from 'downshift';
@@ -27,162 +27,125 @@ import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Delete, Escape, Space, ArrowDown } from '../../internal/keyboard/keys.js';
 
-var noop = function noop() {};
+const noop = () => {};
 
-var getInstanceId = setupGetInstanceId();
-var _ref = useSelect.stateChangeTypes,
-    ItemClick = _ref.ItemClick,
-    MenuBlur = _ref.MenuBlur,
-    MenuKeyDownArrowDown = _ref.MenuKeyDownArrowDown,
-    MenuKeyDownArrowUp = _ref.MenuKeyDownArrowUp,
-    MenuKeyDownEscape = _ref.MenuKeyDownEscape,
-    MenuKeyDownSpaceButton = _ref.MenuKeyDownSpaceButton,
-    ToggleButtonClick = _ref.ToggleButtonClick;
+const getInstanceId = setupGetInstanceId();
+const {
+  ItemClick,
+  MenuBlur,
+  MenuKeyDownArrowDown,
+  MenuKeyDownArrowUp,
+  MenuKeyDownEscape,
+  MenuKeyDownSpaceButton,
+  ToggleButtonClick
+} = useSelect.stateChangeTypes;
 
-var defaultItemToString = function defaultItemToString(item) {
+const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
   }
 
   if (typeof item === 'number') {
-    return "".concat(item);
+    return `${item}`;
   }
 
-  if (item !== null && _typeof(item) === 'object' && 'label' in item && typeof item['label'] === 'string') {
+  if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
     return item['label'];
   }
 
   return '';
 };
 
-var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_ref2, ref) {
-  var _cx, _cx2, _cx4;
-
-  var containerClassName = _ref2.className,
-      id = _ref2.id,
-      items = _ref2.items,
-      itemToElement = _ref2.itemToElement,
-      _ref2$itemToString = _ref2.itemToString,
-      itemToString = _ref2$itemToString === void 0 ? defaultItemToString : _ref2$itemToString,
-      titleText = _ref2.titleText,
-      hideLabel = _ref2.hideLabel,
-      helperText = _ref2.helperText,
-      label = _ref2.label,
-      type = _ref2.type,
-      size = _ref2.size,
-      disabled = _ref2.disabled,
-      initialSelectedItems = _ref2.initialSelectedItems,
-      sortItems = _ref2.sortItems,
-      compareItems = _ref2.compareItems,
-      clearSelectionText = _ref2.clearSelectionText,
-      clearSelectionDescription = _ref2.clearSelectionDescription,
-      light = _ref2.light,
-      invalid = _ref2.invalid,
-      invalidText = _ref2.invalidText,
-      warn = _ref2.warn,
-      warnText = _ref2.warnText,
-      useTitleInItem = _ref2.useTitleInItem,
-      translateWithId = _ref2.translateWithId,
-      downshiftProps = _ref2.downshiftProps,
-      open = _ref2.open,
-      selectionFeedback = _ref2.selectionFeedback,
-      onChange = _ref2.onChange,
-      onMenuChange = _ref2.onMenuChange,
-      direction = _ref2.direction,
-      selected = _ref2.selectedItems,
-      readOnly = _ref2.readOnly,
-      locale = _ref2.locale;
-  var prefix = usePrefix();
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var _useRef = useRef(getInstanceId()),
-      multiSelectInstanceId = _useRef.current;
-
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      highlightedIndex = _useState2[0],
-      setHighlightedIndex = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFocused = _useState4[0],
-      setIsFocused = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      inputFocused = _useState6[0],
-      setInputFocused = _useState6[1];
-
-  var _useState7 = useState(open || false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      isOpen = _useState8[0],
-      setIsOpen = _useState8[1];
-
-  var _useState9 = useState(open),
-      _useState10 = _slicedToArray(_useState9, 2),
-      prevOpenProp = _useState10[0],
-      setPrevOpenProp = _useState10[1];
-
-  var _useState11 = useState([]),
-      _useState12 = _slicedToArray(_useState11, 2),
-      topItems = _useState12[0],
-      setTopItems = _useState12[1];
-
-  var _useSelection = useSelection({
-    disabled: disabled,
-    initialSelectedItems: initialSelectedItems,
-    onChange: onChange,
+const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_ref, ref) {
+  let {
+    className: containerClassName,
+    id,
+    items,
+    itemToElement,
+    itemToString = defaultItemToString,
+    titleText,
+    hideLabel,
+    helperText,
+    label,
+    type,
+    size,
+    disabled,
+    initialSelectedItems,
+    sortItems,
+    compareItems,
+    clearSelectionText,
+    clearSelectionDescription,
+    light,
+    invalid,
+    invalidText,
+    warn,
+    warnText,
+    useTitleInItem,
+    translateWithId,
+    downshiftProps,
+    open,
+    selectionFeedback,
+    onChange,
+    onMenuChange,
+    direction,
+    selectedItems: selected,
+    readOnly,
+    locale
+  } = _ref;
+  const prefix = usePrefix();
+  const {
+    isFluid
+  } = useContext(FormContext);
+  const {
+    current: multiSelectInstanceId
+  } = useRef(getInstanceId());
+  const [highlightedIndex, setHighlightedIndex] = useState();
+  const [isFocused, setIsFocused] = useState(false);
+  const [inputFocused, setInputFocused] = useState(false);
+  const [isOpen, setIsOpen] = useState(open || false);
+  const [prevOpenProp, setPrevOpenProp] = useState(open);
+  const [topItems, setTopItems] = useState([]);
+  const {
+    selectedItems: controlledSelectedItems,
+    onItemChange,
+    clearSelection
+  } = useSelection({
+    disabled,
+    initialSelectedItems,
+    onChange,
     selectedItems: selected
-  }),
-      controlledSelectedItems = _useSelection.selectedItems,
-      onItemChange = _useSelection.onItemChange,
-      clearSelection = _useSelection.clearSelection;
-
-  var _useSelect = useSelect(_objectSpread2(_objectSpread2({}, downshiftProps), {}, {
-    highlightedIndex: highlightedIndex,
-    isOpen: isOpen,
-    itemToString: function (_itemToString) {
-      function itemToString(_x) {
-        return _itemToString.apply(this, arguments);
-      }
-
-      itemToString.toString = function () {
-        return _itemToString.toString();
-      };
-
-      return itemToString;
-    }(function (items) {
-      return items.map(function (item) {
-        return itemToString(item);
-      }).join(', ');
-    }),
-    onStateChange: onStateChange,
+  });
+  const {
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getItemProps,
+    selectedItem
+  } = useSelect({ ...downshiftProps,
+    highlightedIndex,
+    isOpen,
+    itemToString: items => {
+      return items.map(item => itemToString(item)).join(', ');
+    },
+    onStateChange,
     selectedItem: controlledSelectedItems,
-    items: items
-  })),
-      getToggleButtonProps = _useSelect.getToggleButtonProps,
-      getLabelProps = _useSelect.getLabelProps,
-      getMenuProps = _useSelect.getMenuProps,
-      getItemProps = _useSelect.getItemProps,
-      selectedItem = _useSelect.selectedItem;
-
-  var toggleButtonProps = getToggleButtonProps({
-    onFocus: function onFocus() {
+    items
+  });
+  const toggleButtonProps = getToggleButtonProps({
+    onFocus: () => {
       setInputFocused(true);
     },
-    onBlur: function onBlur() {
+    onBlur: () => {
       setInputFocused(false);
     }
   });
-  var mergedRef = mergeRefs(toggleButtonProps.ref, ref);
-  var selectedItems = selectedItem;
+  const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
+  const selectedItems = selectedItem;
   /**
    * wrapper function to forward changes to consumer
    */
 
-  var setIsOpenWrapper = function setIsOpenWrapper(open) {
+  const setIsOpenWrapper = open => {
     setIsOpen(open);
 
     if (onMenuChange) {
@@ -199,23 +162,43 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     setPrevOpenProp(open);
   }
 
-  var inline = type === 'inline';
-  var showWarning = !invalid && warn;
-  var enabled = useFeatureFlag('enable-v11-release');
-  var wrapperClasses = cx("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), !isOpen && isFluid && isFocused), _cx));
-  var titleClasses = cx("".concat(prefix, "--label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
-  var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
-  var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
-  var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var className = cx("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid--focused"), invalid && inputFocused), _defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
+  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], {
+    [`${prefix}--multi-select__wrapper--inline`]: inline,
+    [`${prefix}--list-box__wrapper--inline`]: inline,
+    [`${prefix}--multi-select__wrapper--inline--invalid`]: inline && invalid,
+    [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
+    [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--list-box__wrapper--fluid--focus`]: !isOpen && isFluid && isFocused
+  });
+  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(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
+  const className = cx(`${prefix}--multi-select`, [enabled ? null : containerClassName], {
+    [`${prefix}--multi-select--invalid`]: invalid,
+    [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
+    [`${prefix}--multi-select--warning`]: showWarning,
+    [`${prefix}--multi-select--inline`]: inline,
+    [`${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
 
-  var ItemToElement = itemToElement;
-  var sortOptions = {
+  const ItemToElement = itemToElement;
+  const sortOptions = {
     selectedItems: controlledSelectedItems,
-    itemToString: itemToString,
-    compareItems: compareItems,
-    locale: locale
+    itemToString,
+    compareItems,
+    locale
   };
 
   if (selectionFeedback === 'fixed') {
@@ -229,7 +212,9 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
       setTopItems(controlledSelectedItems);
     }
 
-    var type = changes.type;
+    const {
+      type
+    } = changes;
 
     switch (type) {
       case ItemClick:
@@ -259,7 +244,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     }
   }
 
-  var onKeyDown = function onKeyDown(e) {
+  const onKeyDown = e => {
     if (!disabled) {
       if (match(e, Delete) || match(e, Escape)) {
         clearSelection();
@@ -272,14 +257,16 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     }
   };
 
-  var multiSelectFieldWrapperClasses = cx("".concat(prefix, "--list-box__field--wrapper"), _defineProperty({}, "".concat(prefix, "--list-box__field--wrapper--input-focused"), inputFocused));
+  const multiSelectFieldWrapperClasses = cx(`${prefix}--list-box__field--wrapper`, {
+    [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
+  });
 
-  var handleFocus = function handleFocus(evt) {
-    evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
+  const handleFocus = evt => {
+    evt.target.classList.contains(`${prefix}--tag__close-icon`) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
   };
 
-  var readOnlyEventHandlers = readOnly ? {
-    onClick: function onClick(evt) {
+  const readOnlyEventHandlers = readOnly ? {
+    onClick: evt => {
       // NOTE: does not prevent click
       evt.preventDefault(); // focus on the element as per readonly input behavior
 
@@ -287,8 +274,8 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
         mergedRef.current.focus();
       }
     },
-    onKeyDown: function onKeyDown(evt) {
-      var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
+    onKeyDown: evt => {
+      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
 
       if (selectAccessKeys.includes(evt.key)) {
         evt.preventDefault();
@@ -300,7 +287,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   }, /*#__PURE__*/React__default.createElement("label", _extends({
     className: titleClasses
   }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--visually-hidden")
+    className: `${prefix}--visually-hidden`
   }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText)), /*#__PURE__*/React__default.createElement(ListBox, {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
@@ -316,9 +303,9 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     isOpen: isOpen,
     id: id
   }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
-    className: "".concat(prefix, "--list-box__invalid-icon")
+    className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
-    className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
+    className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default.createElement("div", {
     className: multiSelectFieldWrapperClasses
   }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
@@ -330,7 +317,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     disabled: disabled
   }), /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",
-    className: "".concat(prefix, "--list-box__field"),
+    className: `${prefix}--list-box__field`,
     disabled: disabled,
     "aria-disabled": disabled || readOnly,
     "aria-describedby": !inline && !invalid && !warn && helperText ? helperId : undefined
@@ -339,23 +326,23 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     onKeyDown: onKeyDown
   }, readOnlyEventHandlers), /*#__PURE__*/React__default.createElement("span", {
     id: fieldLabelId,
-    className: "".concat(prefix, "--list-box__label")
+    className: `${prefix}--list-box__label`
   }, label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
   }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({
     "aria-multiselectable": "true"
   }, getMenuProps()), isOpen && // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  sortItems(items, sortOptions).map(function (item, index) {
-    var _getItemProps;
-
-    var isChecked = selectedItems.filter(function (selected) {
-      return isEqual(selected, item);
-    }).length > 0;
-    var itemProps = getItemProps((_getItemProps = {
-      item: item
-    }, _defineProperty(_getItemProps, 'aria-selected', isChecked ? true : undefined), _defineProperty(_getItemProps, "disabled", item.disabled), _getItemProps));
-    var itemText = itemToString(item);
+  sortItems(items, sortOptions).map((item, index) => {
+    const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
+    const itemProps = getItemProps({
+      item,
+      // we don't want Downshift to set aria-selected for us
+      // we also don't want to set 'false' for reader verbosity's sake
+      ['aria-selected']: isChecked ? true : undefined,
+      disabled: item.disabled
+    });
+    const itemText = itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
       isActive: isChecked,
@@ -363,12 +350,12 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
       isHighlighted: highlightedIndex === index,
       title: itemText
     }, itemProps), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(prefix, "--checkbox-wrapper")
+      className: `${prefix}--checkbox-wrapper`
     }, /*#__PURE__*/React__default.createElement("span", {
       title: useTitleInItem ? itemText : undefined,
-      className: "".concat(prefix, "--checkbox-label"),
+      className: `${prefix}--checkbox-label`,
       "data-contained-checkbox-state": isChecked,
-      id: "".concat(itemProps.id, "__checkbox")
+      id: `${itemProps.id}__checkbox`
     }, itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
       key: itemProps.id
     }, item)) : itemText)));
@@ -378,7 +365,8 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   }, helperText));
 });
 MultiSelect.displayName = 'MultiSelect';
-MultiSelect.propTypes = _objectSpread2(_objectSpread2({}, sortingPropTypes), {}, {
+MultiSelect.propTypes = { ...sortingPropTypes,
+
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component
@@ -549,7 +537,7 @@ MultiSelect.propTypes = _objectSpread2(_objectSpread2({}, sortingPropTypes), {},
    * Provide the text that is displayed when the control is in warning state
    */
   warnText: PropTypes.node
-});
+};
 MultiSelect.defaultProps = {
   compareItems: defaultCompareItems,
   disabled: false,

package/es/components/MultiSelect/MultiSelectPropTypes.js

@@ -7,7 +7,7 @@
 
 import PropTypes from 'prop-types';
 
-var sortingPropTypes = {
+const sortingPropTypes = {
   /**
    * Provide a compare function that is used to determine the ordering of
    * options. `compareItems` has the following function signature:

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

@@ -5,15 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { typeof as _typeof } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import invariant from 'invariant';
 
-var itemToString = function 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;
+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 || '';
 };
 
-var defaultItemToString = function defaultItemToString(item) {
+const defaultItemToString = item => {
   if (Array.isArray(item)) {
     return item.map(itemToString);
   }

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

@@ -15,8 +15,10 @@
  * @param {string} options.locale
  * @returns {number}
  */
-var defaultCompareItems = function defaultCompareItems(itemA, itemB, _ref) {
-  var locale = _ref.locale;
+const defaultCompareItems = (itemA, itemB, _ref) => {
+  let {
+    locale
+  } = _ref;
   return itemA.localeCompare(itemB, locale, {
     numeric: true
   });
@@ -25,16 +27,16 @@ var defaultCompareItems = function defaultCompareItems(itemA, itemB, _ref) {
  * Default sorting algorithm for options in a selection control
  */
 
-var defaultSortItems = function defaultSortItems(items, _ref2) {
-  var _ref2$selectedItems = _ref2.selectedItems,
-      selectedItems = _ref2$selectedItems === void 0 ? [] : _ref2$selectedItems,
-      itemToString = _ref2.itemToString,
-      compareItems = _ref2.compareItems,
-      _ref2$locale = _ref2.locale,
-      locale = _ref2$locale === void 0 ? 'en' : _ref2$locale;
-  return items.sort(function (itemA, itemB) {
-    var hasItemA = selectedItems.includes(itemA);
-    var hasItemB = selectedItems.includes(itemB); // Prefer whichever item is in the `selectedItems` array first
+const defaultSortItems = (items, _ref2) => {
+  let {
+    selectedItems = [],
+    itemToString,
+    compareItems,
+    locale = 'en'
+  } = _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
 
     if (hasItemA && !hasItemB) {
       return -1;
@@ -45,7 +47,7 @@ var defaultSortItems = function defaultSortItems(items, _ref2) {
     }
 
     return compareItems(itemToString(itemA), itemToString(itemB), {
-      locale: locale
+      locale
     });
   });
 };