@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/AddSelect/AddSelectList.js

@@ -15,37 +15,35 @@ var settings = require('../../settings.js');
 var AddSelectRow = require('./AddSelectRow.js');
 var useFocus = require('./hooks/useFocus.js');
 
-var _excluded = ["filteredItems", "multi"];
-var blockClass = "".concat(settings.pkg.prefix, "--add-select__selections");
-var componentName = 'AddSelectList';
-var AddSelectList = function AddSelectList(_ref) {
-  var filteredItems = _ref.filteredItems,
-    multi = _ref.multi,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useFocus = useFocus.default(filteredItems.length),
-    _useFocus2 = _rollupPluginBabelHelpers.slicedToArray(_useFocus, 2),
-    focus = _useFocus2[0],
-    setFocus = _useFocus2[1];
+const blockClass = `${settings.pkg.prefix}--add-select__selections`;
+const componentName = 'AddSelectList';
+let AddSelectList = _ref => {
+  let {
+    filteredItems,
+    multi,
+    ...rest
+  } = _ref;
+  const [focus, setFocus] = useFocus.default(filteredItems.length);
   return /*#__PURE__*/React.createElement("div", {
     id: "add-select-focus",
-    className: cx("".concat(blockClass, "-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-wrapper-multi"), multi))
+    className: cx(`${blockClass}-wrapper`, {
+      [`${blockClass}-wrapper-multi`]: multi
+    })
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass)
+    className: `${blockClass}`
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "-body"),
+    className: `${blockClass}-body`,
     role: "treegrid",
     "aria-label": "add select tree label"
-  }, filteredItems.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(AddSelectRow.AddSelectRow, _rollupPluginBabelHelpers.extends({
-      key: item.id,
-      index: index,
-      focus: focus,
-      setSize: filteredItems.length,
-      item: item,
-      multi: multi,
-      setFocus: setFocus
-    }, rest));
-  }))));
+  }, filteredItems.map((item, index) => /*#__PURE__*/React.createElement(AddSelectRow.AddSelectRow, _rollupPluginBabelHelpers.extends({
+    key: item.id,
+    index: index,
+    focus: focus,
+    setSize: filteredItems.length,
+    item: item,
+    multi: multi,
+    setFocus: setFocus
+  }, rest))))));
 };
 AddSelectList.propTypes = {
   filteredItems: index.default.array,

package/lib/components/AddSelect/AddSelectMetaPanel.js

@@ -14,29 +14,29 @@ var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
 var settings = require('../../settings.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--add-select__meta-panel");
-var componentName = 'AddSelectMetaPanel';
-var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
-  var closeIconDescription = _ref.closeIconDescription,
-    meta = _ref.meta,
-    setDisplayMetaPanel = _ref.setDisplayMetaPanel,
-    title = _ref.title;
-  var onCloseHandler = function onCloseHandler() {
+const blockClass = `${settings.pkg.prefix}--add-select__meta-panel`;
+const componentName = 'AddSelectMetaPanel';
+let AddSelectMetaPanel = _ref => {
+  let {
+    closeIconDescription,
+    meta,
+    setDisplayMetaPanel,
+    title
+  } = _ref;
+  const onCloseHandler = () => {
     setDisplayMetaPanel({});
   };
   return /*#__PURE__*/React.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "-header")
+    className: `${blockClass}-header`
   }, /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "-title")
+    className: `${blockClass}-title`
   }, title), /*#__PURE__*/React.createElement(react.Button, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(icons.Close, _rollupPluginBabelHelpers.extends({
-        size: 16
-      }, props));
-    },
-    className: "".concat(blockClass, "-close"),
+    renderIcon: props => /*#__PURE__*/React.createElement(icons.Close, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)),
+    className: `${blockClass}-close`,
     iconDescription: closeIconDescription,
     tooltipPosition: "left",
     tooltipAlignment: "center",
@@ -44,16 +44,14 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
     onClick: onCloseHandler,
     kind: "ghost",
     size: "sm"
-  })), /*#__PURE__*/React.isValidElement(meta) ? meta : meta.map(function (entry) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: entry === null || entry === void 0 ? void 0 : entry.id,
-      className: "".concat(blockClass, "-entry")
-    }, /*#__PURE__*/React.createElement("p", {
-      className: "".concat(blockClass, "-entry-title")
-    }, entry === null || entry === void 0 ? void 0 : entry.title), /*#__PURE__*/React.createElement("p", {
-      className: "".concat(blockClass, "-entry-body")
-    }, entry === null || entry === void 0 ? void 0 : entry.value));
-  }));
+  })), /*#__PURE__*/React.isValidElement(meta) ? meta : meta.map(entry => /*#__PURE__*/React.createElement("div", {
+    key: entry?.id,
+    className: `${blockClass}-entry`
+  }, /*#__PURE__*/React.createElement("p", {
+    className: `${blockClass}-entry-title`
+  }, entry?.title), /*#__PURE__*/React.createElement("p", {
+    className: `${blockClass}-entry-body`
+  }, entry?.value))));
 };
 AddSelectMetaPanel.propTypes = {
   closeIconDescription: index.default.string.isRequired,

package/lib/components/AddSelect/AddSelectRow.js

@@ -16,43 +16,44 @@ var cx = require('classnames');
 var settings = require('../../settings.js');
 var AddSelectFormControl = require('./AddSelectFormControl.js');
 
-var blockClass = "".concat(settings.pkg.prefix, "--add-select__selections");
-var componentName = 'AddSelectList';
-var AddSelectRow = function AddSelectRow(_ref) {
-  var _modifiers$options;
-  var appliedModifiers = _ref.appliedModifiers,
-    displayMetalPanel = _ref.displayMetalPanel,
-    index = _ref.index,
-    focus = _ref.focus,
-    item = _ref.item,
-    metaIconDescription = _ref.metaIconDescription,
-    modifiers = _ref.modifiers,
-    multi = _ref.multi,
-    multiSelection = _ref.multiSelection,
-    navIconDescription = _ref.navIconDescription,
-    parentId = _ref.parentId,
-    parentSelected = _ref.parentSelected,
-    setAppliedModifiers = _ref.setAppliedModifiers,
-    setDisplayMetaPanel = _ref.setDisplayMetaPanel,
-    setFocus = _ref.setFocus,
-    setMultiSelection = _ref.setMultiSelection,
-    setParentSelected = _ref.setParentSelected,
-    setSingleSelection = _ref.setSingleSelection,
-    setSize = _ref.setSize,
-    singleSelection = _ref.singleSelection;
-  var ref = React.useRef(null);
-  React.useEffect(function () {
+const blockClass = `${settings.pkg.prefix}--add-select__selections`;
+const componentName = 'AddSelectList';
+let AddSelectRow = _ref => {
+  let {
+    appliedModifiers,
+    displayMetalPanel,
+    index,
+    focus,
+    item,
+    metaIconDescription,
+    modifiers,
+    multi,
+    multiSelection,
+    navIconDescription,
+    parentId,
+    parentSelected,
+    setAppliedModifiers,
+    setDisplayMetaPanel,
+    setFocus,
+    setMultiSelection,
+    setParentSelected,
+    setSingleSelection,
+    setSize,
+    singleSelection
+  } = _ref;
+  const ref = React.useRef(null);
+  React.useEffect(() => {
     if (focus === index) {
       ref.current.focus();
     }
   }, [focus, index]);
-  var isSelected = function isSelected() {
+  const isSelected = () => {
     if (multi) {
       return multiSelection.includes(item.id);
     }
     return item.id === singleSelection;
   };
-  var getTabIndex = function getTabIndex() {
+  const getTabIndex = () => {
     // on initial load make the first item tabbable
     if (index === 0 && focus === '') {
       return 0;
@@ -66,14 +67,16 @@ var AddSelectRow = function AddSelectRow(_ref) {
     // make unfocused items un-tabbable
     return -1;
   };
-  var focusHandler = React.useCallback(function (reset) {
+  const focusHandler = React.useCallback(reset => {
     setFocus(reset ? '' : index);
   }, [setFocus, index]);
-  var handleSingleSelection = function handleSingleSelection() {
+  const handleSingleSelection = () => {
     setSingleSelection(item.id);
   };
-  var onSelectKeyDown = function onSelectKeyDown(_ref2) {
-    var key = _ref2.key;
+  const onSelectKeyDown = _ref2 => {
+    let {
+      key
+    } = _ref2;
     if (key === 'Enter' || key === ' ') {
       if (multi) {
         handleMultiSelection();
@@ -84,54 +87,54 @@ var AddSelectRow = function AddSelectRow(_ref) {
       onNavigateItem();
     }
   };
-  var handleMultiSelection = function handleMultiSelection() {
-    var checked = isSelected();
+  const handleMultiSelection = () => {
+    const checked = isSelected();
     if (!checked) {
-      var newValues = [].concat(_rollupPluginBabelHelpers.toConsumableArray(multiSelection), [item.id]);
+      const newValues = [...multiSelection, item.id];
       setMultiSelection(newValues);
     } else {
-      var _newValues = multiSelection.filter(function (v) {
-        return v !== item.id;
-      });
-      setMultiSelection(_newValues);
+      const newValues = multiSelection.filter(v => v !== item.id);
+      setMultiSelection(newValues);
     }
   };
-  var onNavigateItem = function onNavigateItem() {
+  const onNavigateItem = () => {
     focusHandler(true);
     setParentSelected(item.id, item.title, parentId);
   };
-  var modifierHandler = function modifierHandler(id, selectedItem) {
-    var modifiersClone = _rollupPluginBabelHelpers.toConsumableArray(appliedModifiers);
-    var modifierIdx = modifiersClone.findIndex(function (item) {
-      return item.id === id;
-    });
-    modifiersClone[modifierIdx] = _rollupPluginBabelHelpers.defineProperty({
-      id: id
-    }, modifiers.id, selectedItem);
+  const modifierHandler = (id, selectedItem) => {
+    const modifiersClone = [...appliedModifiers];
+    const modifierIdx = modifiersClone.findIndex(item => item.id === id);
+    modifiersClone[modifierIdx] = {
+      id,
+      [modifiers.id]: selectedItem
+    };
     setAppliedModifiers(modifiersClone);
   };
-  var metaPanelHandler = function metaPanelHandler() {
+  const metaPanelHandler = () => {
     if (item.meta) {
       setDisplayMetaPanel(item);
     }
   };
-  var isInMetaPanel = function isInMetaPanel(id) {
-    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
-  };
-  var hasModifiers = (modifiers === null || modifiers === void 0 || (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
-  var tabIndex = getTabIndex();
-  var selected = isSelected();
-  var expanded = parentSelected === item.id;
-  var sharedSelectProps = {
-    id: "add-select-modifier-".concat(item.id),
-    titleText: modifiers === null || modifiers === void 0 ? void 0 : modifiers.title,
+  const isInMetaPanel = id => id === displayMetalPanel?.id;
+  const hasModifiers = modifiers?.options?.length > 0;
+  const tabIndex = getTabIndex();
+  const selected = isSelected();
+  const expanded = parentSelected === item.id;
+  const sharedSelectProps = {
+    id: `add-select-modifier-${item.id}`,
+    titleText: modifiers?.title,
     type: 'inline',
     disabled: !isSelected(),
-    label: modifiers === null || modifiers === void 0 ? void 0 : modifiers.label,
-    items: modifiers === null || modifiers === void 0 ? void 0 : modifiers.options
+    label: modifiers?.label,
+    items: modifiers?.options
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "-row"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-row--selected"), isSelected()), "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), "".concat(blockClass, "-row--active"), expanded), "".concat(blockClass, "-row--focused"), focus === index)),
+    className: cx(`${blockClass}-row`, {
+      [`${blockClass}-row--selected`]: isSelected(),
+      [`${blockClass}-row-meta--selected`]: isInMetaPanel(item.id),
+      [`${blockClass}-row--active`]: expanded,
+      [`${blockClass}-row--focused`]: focus === index
+    }),
     onKeyDown: onSelectKeyDown,
     tabIndex: tabIndex,
     ref: ref,
@@ -142,26 +145,30 @@ var AddSelectRow = function AddSelectRow(_ref) {
     "aria-setsize": setSize,
     "aria-expanded": expanded
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "-cell"),
+    className: `${blockClass}-cell`,
     role: "gridcell"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "-cell-wrapper")
+    className: `${blockClass}-cell-wrapper`
   }, multi ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AddSelectFormControl.AddSelectFormControl, {
     type: "checkbox",
     item: item,
     selected: selected,
     onClick: handleMultiSelection
-  }), hasModifiers && /*#__PURE__*/React.createElement(react.Layer, null, modifiers !== null && modifiers !== void 0 && modifiers.multiSelect ? /*#__PURE__*/React.createElement(react.MultiSelect, _rollupPluginBabelHelpers.extends({}, sharedSelectProps, {
+  }), hasModifiers && /*#__PURE__*/React.createElement(react.Layer, null, modifiers?.multiSelect ? /*#__PURE__*/React.createElement(react.MultiSelect, _rollupPluginBabelHelpers.extends({}, sharedSelectProps, {
     initialSelectedItems: item[modifiers.id],
-    onChange: function onChange(_ref3) {
-      var selectedItems = _ref3.selectedItems;
+    onChange: _ref3 => {
+      let {
+        selectedItems
+      } = _ref3;
       return modifierHandler(item.id, selectedItems);
     }
   })) : /*#__PURE__*/React.createElement(react.Dropdown, _rollupPluginBabelHelpers.extends({}, sharedSelectProps, {
-    className: "".concat(blockClass, "-dropdown"),
+    className: `${blockClass}-dropdown`,
     initialSelectedItem: item[modifiers.id],
-    onChange: function onChange(_ref4) {
-      var selectedItem = _ref4.selectedItem;
+    onChange: _ref4 => {
+      let {
+        selectedItem
+      } = _ref4;
       return modifierHandler(item.id, selectedItem);
     }
   })))) : /*#__PURE__*/React.createElement(AddSelectFormControl.AddSelectFormControl, {
@@ -170,12 +177,10 @@ var AddSelectRow = function AddSelectRow(_ref) {
     selected: selected,
     onClick: handleSingleSelection
   }), item.children && /*#__PURE__*/React.createElement(react.Button, {
-    className: "".concat(blockClass, "-view-children"),
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(icons.ChevronRight, _rollupPluginBabelHelpers.extends({
-        size: 16
-      }, props));
-    },
+    className: `${blockClass}-view-children`,
+    renderIcon: props => /*#__PURE__*/React.createElement(icons.ChevronRight, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)),
     iconDescription: navIconDescription,
     tooltipPosition: "left",
     tooltipAlignment: "center",
@@ -186,12 +191,10 @@ var AddSelectRow = function AddSelectRow(_ref) {
     tabIndex: -1,
     "aria-hidden": true
   }), item.meta && /*#__PURE__*/React.createElement(react.Button, {
-    className: "".concat(blockClass, "-view-meta"),
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(icons.View, _rollupPluginBabelHelpers.extends({
-        size: 16
-      }, props));
-    },
+    className: `${blockClass}-view-meta`,
+    renderIcon: props => /*#__PURE__*/React.createElement(icons.View, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)),
     iconDescription: metaIconDescription,
     tooltipPosition: "left",
     tooltipAlignment: "center",

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -7,7 +7,6 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var react = require('@carbon/react');
 var index = require('../../_virtual/index.js');
@@ -15,64 +14,66 @@ var NoDataEmptyState = require('../EmptyStates/NoDataEmptyState/NoDataEmptyState
 var settings = require('../../settings.js');
 var AddSelectMetaPanel = require('./AddSelectMetaPanel.js');
 
-var _excluded = ["meta", "icon", "avatar"];
-var blockClass = "".concat(settings.pkg.prefix, "--add-select__sidebar");
-var componentName = 'AddSelectSidebar';
-var AddSelectSidebar = function AddSelectSidebar(_ref) {
-  var _modifiers$options;
-  var appliedModifiers = _ref.appliedModifiers,
-    closeIconDescription = _ref.closeIconDescription,
-    displayMetalPanel = _ref.displayMetalPanel,
-    illustrationTheme = _ref.illustrationTheme,
-    influencerTitle = _ref.influencerTitle,
-    items = _ref.items,
-    metaPanelTitle = _ref.metaPanelTitle,
-    modifiers = _ref.modifiers,
-    multiSelection = _ref.multiSelection,
-    noSelectionDescription = _ref.noSelectionDescription,
-    noSelectionTitle = _ref.noSelectionTitle,
-    setDisplayMetaPanel = _ref.setDisplayMetaPanel;
-  var hasModifiers = (modifiers === null || modifiers === void 0 || (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
-  var hasSelections = multiSelection.length > 0;
-  var getNewItem = function getNewItem(item) {
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+const blockClass = `${settings.pkg.prefix}--add-select__sidebar`;
+const componentName = 'AddSelectSidebar';
+let AddSelectSidebar = _ref => {
+  let {
+    appliedModifiers,
+    closeIconDescription,
+    displayMetalPanel,
+    illustrationTheme,
+    influencerTitle,
+    items,
+    metaPanelTitle,
+    modifiers,
+    multiSelection,
+    noSelectionDescription,
+    noSelectionTitle,
+    setDisplayMetaPanel
+  } = _ref;
+  const hasModifiers = modifiers?.options?.length > 0;
+  const hasSelections = multiSelection.length > 0;
+  const getNewItem = item => {
     // certain properties should not be displayed in the sidebar
     // eslint-disable-next-line no-unused-vars
-    item.meta;
-      item.icon;
-      item.avatar;
-      var newItem = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded);
+    const {
+      meta,
+      icon,
+      avatar,
+      ...newItem
+    } = item;
     return newItem;
   };
-  var sidebarItems = multiSelection.map(function (selectionId) {
+  const sidebarItems = multiSelection.map(selectionId => {
     if (Array.isArray(items)) {
-      var selectedItem = items.find(function (item) {
-        return item.id === selectionId;
-      });
+      const selectedItem = items.find(item => item.id === selectionId);
       return getNewItem(selectedItem);
     }
     return getNewItem(items[selectionId]);
   });
-  var getTitle = function getTitle(item) {
-    var modifierEl;
+  const getTitle = item => {
+    let modifierEl;
     if (hasModifiers) {
-      var _modifiers = appliedModifiers === null || appliedModifiers === void 0 ? void 0 : appliedModifiers.find(function (modifier) {
-        return (modifier === null || modifier === void 0 ? void 0 : modifier.id) === (item === null || item === void 0 ? void 0 : item.id);
-      })[modifiers === null || modifiers === void 0 ? void 0 : modifiers.id];
+      const _modifiers = appliedModifiers?.find(modifier => modifier?.id === item?.id)[modifiers?.id];
       modifierEl = _modifiers;
       if (Array.isArray(_modifiers)) {
-        modifierEl = _modifiers === null || _modifiers === void 0 ? void 0 : _modifiers.map(function (_modifier, index) {
-          return "".concat(_modifier).concat(index + 1 !== _modifiers.length ? ', ' : '');
-        });
+        modifierEl = _modifiers?.map((_modifier, index) => `${_modifier}${index + 1 !== _modifiers.length ? ', ' : ''}`);
       }
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-accordion-title")
+      className: `${blockClass}-accordion-title`
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "-selected-item")
+      className: `${blockClass}-selected-item`
     }, /*#__PURE__*/React.createElement("p", {
-      className: "".concat(blockClass, "-selected-item-title")
+      className: `${blockClass}-selected-item-title`
     }, item.title), /*#__PURE__*/React.createElement("p", {
-      className: "".concat(blockClass, "-selected-item-subtitle")
+      className: `${blockClass}-selected-item-subtitle`
     }, item.subtitle)), hasModifiers && /*#__PURE__*/React.createElement("div", null, modifierEl));
   };
   if (Object.keys(displayMetalPanel).length !== 0) {
@@ -86,30 +87,26 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "-header")
+    className: `${blockClass}-header`
   }, /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "-title")
+    className: `${blockClass}-title`
   }, influencerTitle), /*#__PURE__*/React.createElement(react.Tag, {
     type: "gray",
     size: "sm"
   }, multiSelection.length)), hasSelections ? /*#__PURE__*/React.createElement(react.Accordion, {
     align: "start"
-  }, sidebarItems.map(function (item) {
-    return /*#__PURE__*/React.createElement(react.AccordionItem, {
-      title: getTitle(item),
-      key: item.id
-    }, Object.keys(item).map(function (key) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(blockClass, "-item"),
-        key: key
-      }, /*#__PURE__*/React.createElement("p", {
-        className: "".concat(blockClass, "-item-header")
-      }, key), /*#__PURE__*/React.createElement("p", {
-        className: "".concat(blockClass, "-item-body")
-      }, item[key]));
-    }));
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "-body")
+  }, sidebarItems.map(item => /*#__PURE__*/React.createElement(react.AccordionItem, {
+    title: getTitle(item),
+    key: item.id
+  }, Object.keys(item).map(key => /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}-item`,
+    key: key
+  }, /*#__PURE__*/React.createElement("p", {
+    className: `${blockClass}-item-header`
+  }, key), /*#__PURE__*/React.createElement("p", {
+    className: `${blockClass}-item-body`
+  }, item[key])))))) : /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}-body`
   }, /*#__PURE__*/React.createElement(NoDataEmptyState.NoDataEmptyState, {
     subtitle: noSelectionDescription,
     title: noSelectionTitle,

package/lib/components/AddSelect/AddSelectSort.js

@@ -15,59 +15,59 @@ var icons = require('@carbon/react/icons');
 var settings = require('../../settings.js');
 
 var _ArrowUp, _ArrowDown;
-var blockClass = "".concat(settings.pkg.prefix, "--add-select-sort");
-var componentName = 'AddSelectSort';
-var AddSelectSort = function AddSelectSort(_ref) {
-  var setSortAttribute = _ref.setSortAttribute,
-    setSortDirection = _ref.setSortDirection,
-    sortBy = _ref.sortBy,
-    sortByLabel = _ref.sortByLabel;
-  var sortByOpts = sortBy ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.reduce(function (acc, cur) {
-    var opts = [{
-      id: "".concat(cur, "-asc"),
+const blockClass = `${settings.pkg.prefix}--add-select-sort`;
+const componentName = 'AddSelectSort';
+const AddSelectSort = _ref => {
+  let {
+    setSortAttribute,
+    setSortDirection,
+    sortBy,
+    sortByLabel
+  } = _ref;
+  const sortByOpts = sortBy ? sortBy?.reduce((acc, cur) => {
+    const opts = [{
+      id: `${cur}-asc`,
       itemText: /*#__PURE__*/React.createElement(React.Fragment, null, _ArrowUp || (_ArrowUp = /*#__PURE__*/React.createElement(icons.ArrowUp, {
         size: 16
       })), cur),
       direction: 'asc',
       attribute: cur
     }, {
-      id: "".concat(cur, "-desc"),
+      id: `${cur}-desc`,
       itemText: /*#__PURE__*/React.createElement(React.Fragment, null, _ArrowDown || (_ArrowDown = /*#__PURE__*/React.createElement(icons.ArrowDown, {
         size: 16
       })), cur),
       direction: 'desc',
       attribute: cur
     }];
-    return [].concat(_rollupPluginBabelHelpers.toConsumableArray(acc), opts);
+    return [...acc, ...opts];
   }, []) : [];
 
   // handlers
-  var sortHandler = function sortHandler(_ref2) {
-    var direction = _ref2.direction,
-      attribute = _ref2.attribute;
-    setSortAttribute === null || setSortAttribute === void 0 || setSortAttribute(attribute);
-    setSortDirection === null || setSortDirection === void 0 || setSortDirection(direction);
+  const sortHandler = _ref2 => {
+    let {
+      direction,
+      attribute
+    } = _ref2;
+    setSortAttribute?.(attribute);
+    setSortDirection?.(direction);
   };
   return /*#__PURE__*/React.createElement("div", {
     className: blockClass
   }, sortByOpts.length > 0 && /*#__PURE__*/React.createElement(react.OverflowMenu, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(icons.ArrowsVertical, _rollupPluginBabelHelpers.extends({
-        size: 32
-      }, props));
-    },
-    className: "".concat(blockClass, "_overflow"),
+    renderIcon: props => /*#__PURE__*/React.createElement(icons.ArrowsVertical, _rollupPluginBabelHelpers.extends({
+      size: 32
+    }, props)),
+    className: `${blockClass}_overflow`,
     flipped: true,
     "aria-label": sortByLabel,
     iconDescription: sortByLabel
-  }, sortByOpts.map(function (opt) {
+  }, sortByOpts.map(opt => {
     return /*#__PURE__*/React.createElement(react.OverflowMenuItem, {
-      className: "".concat(blockClass, "_overflow-item"),
-      key: opt === null || opt === void 0 ? void 0 : opt.id,
-      itemText: opt === null || opt === void 0 ? void 0 : opt.itemText,
-      onClick: function onClick() {
-        return sortHandler(opt);
-      }
+      className: `${blockClass}_overflow-item`,
+      key: opt?.id,
+      itemText: opt?.itemText,
+      onClick: () => sortHandler(opt)
     });
   })));
 };