@carbon/ibm-products 2.61.0-rc.0 → 2.62.0-rc.0

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -37,7 +37,7 @@ function _asyncToGenerator(n) {
       function _throw(n) {
         asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
       }
-      _next(undefined);
+      _next(void 0);
     });
   };
 }
@@ -386,7 +386,7 @@ function _regeneratorRuntime() {
   }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
     return this;
   }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
-    undefined === i && (i = Promise);
+    void 0 === i && (i = Promise);
     var a = new AsyncIterator(wrap(t, r, n, o), i);
     return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
       return t.done ? t.value : a.next();
@@ -496,7 +496,7 @@ function _toConsumableArray(r) {
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
-  if (undefined !== e) {
+  if (void 0 !== e) {
     var i = e.call(t, r);
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
@@ -520,7 +520,7 @@ function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
     var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : undefined;
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
 }
 

package/es/components/APIKeyModal/APIKeyDownloader.js

@@ -63,9 +63,9 @@ var APIKeyDownloader = function APIKeyDownloader(_ref) {
     className: "".concat(pkg.prefix, "--apikey-modal__messaging-text")
   }, body, ' ', /*#__PURE__*/React__default.createElement("a", _extends({}, linkProps, {
     className: "".concat(pkg.prefix, "--apikey-modal__download-link"),
-    "aria-label": downloadLinkLabel !== null && downloadLinkLabel !== undefined ? downloadLinkLabel : linkText,
+    "aria-label": downloadLinkLabel !== null && downloadLinkLabel !== void 0 ? downloadLinkLabel : linkText,
     role: "button"
-  }), downloadLinkLabel !== null && downloadLinkLabel !== undefined ? downloadLinkLabel : linkText)));
+  }), downloadLinkLabel !== null && downloadLinkLabel !== void 0 ? downloadLinkLabel : linkText)));
 };
 APIKeyDownloader.displayName = componentName;
 APIKeyDownloader.propTypes = {

package/es/components/APIKeyModal/APIKeyModal.js

@@ -34,7 +34,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var apiKey = _ref.apiKey,
     apiKeyLabel = _ref.apiKeyLabel,
     _ref$apiKeyName = _ref.apiKeyName,
-    apiKeyName = _ref$apiKeyName === undefined ? defaults.apiKeyName : _ref$apiKeyName,
+    apiKeyName = _ref$apiKeyName === void 0 ? defaults.apiKeyName : _ref$apiKeyName,
     body = _ref.body,
     className = _ref.className,
     closeButtonText = _ref.closeButtonText,
@@ -42,13 +42,13 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     copyErrorText = _ref.copyErrorText,
     copyIconDescription = _ref.copyIconDescription,
     _ref$customSteps = _ref.customSteps,
-    customSteps = _ref$customSteps === undefined ? defaults.customSteps : _ref$customSteps,
+    customSteps = _ref$customSteps === void 0 ? defaults.customSteps : _ref$customSteps,
     downloadBodyText = _ref.downloadBodyText,
     downloadFileName = _ref.downloadFileName,
     downloadFileType = _ref.downloadFileType,
     downloadLinkText = _ref.downloadLinkText,
     _ref$downloadLinkLabe = _ref.downloadLinkLabel,
-    downloadLinkLabel = _ref$downloadLinkLabe === undefined ? downloadLinkText : _ref$downloadLinkLabe,
+    downloadLinkLabel = _ref$downloadLinkLabe === void 0 ? downloadLinkText : _ref$downloadLinkLabe,
     editButtonText = _ref.editButtonText,
     editSuccess = _ref.editSuccess,
     editSuccessTitle = _ref.editSuccessTitle,
@@ -132,14 +132,14 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (copyRef.current && open && apiKeyLoaded) {
       copyRef.current.focus();
     }
-    if (PasswordInputRef !== null && PasswordInputRef !== undefined && PasswordInputRef.current) {
-      PasswordInputRef === null || PasswordInputRef === undefined || PasswordInputRef.current.setAttribute('readOnly', 'true');
+    if (PasswordInputRef !== null && PasswordInputRef !== void 0 && PasswordInputRef.current) {
+      PasswordInputRef === null || PasswordInputRef === void 0 || PasswordInputRef.current.setAttribute('readOnly', 'true');
     }
   }, [open, apiKeyLoaded]);
   useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      claimFocus(firstElement, modalRef, "#".concat(CSS.escape(apiKeyInputId === null || apiKeyInputId === undefined ? undefined : apiKeyInputId.current)));
+      claimFocus(firstElement, modalRef, "#".concat(CSS.escape(apiKeyInputId === null || apiKeyInputId === void 0 ? void 0 : apiKeyInputId.current)));
     }
   }, [firstElement, modalRef, open]);
   useEffect(function () {
@@ -153,9 +153,9 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (loading) {
       return true;
     }
-    if (hasSteps && 'valid' in ((customSteps === null || customSteps === undefined ? undefined : customSteps[currentStep]) || [])) {
+    if (hasSteps && 'valid' in ((customSteps === null || customSteps === void 0 ? void 0 : customSteps[currentStep]) || [])) {
       var _customSteps$currentS;
-      return !((_customSteps$currentS = customSteps[currentStep]) !== null && _customSteps$currentS !== undefined && _customSteps$currentS.valid);
+      return !((_customSteps$currentS = customSteps[currentStep]) !== null && _customSteps$currentS !== void 0 && _customSteps$currentS.valid);
     }
     if (!hasSteps && nameRequired && !name) {
       return true;
@@ -183,13 +183,13 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     if (editing && editSuccess) {
       setTitle(generateTitle);
-      setSuccessMessage(editSuccessMessage !== null && editSuccessMessage !== undefined ? editSuccessMessage : editSuccessTitle);
+      setSuccessMessage(editSuccessMessage !== null && editSuccessMessage !== void 0 ? editSuccessMessage : editSuccessTitle);
     } else if (apiKeyLoaded) {
       setTitle(generateTitle);
-      setSuccessMessage(generateSuccessMessage !== null && generateSuccessMessage !== undefined ? generateSuccessMessage : generateSuccessTitle);
+      setSuccessMessage(generateSuccessMessage !== null && generateSuccessMessage !== void 0 ? generateSuccessMessage : generateSuccessTitle);
     } else if (hasSteps) {
       var _customSteps$currentS2;
-      setTitle((_customSteps$currentS2 = customSteps[currentStep]) === null || _customSteps$currentS2 === undefined ? undefined : _customSteps$currentS2.title);
+      setTitle((_customSteps$currentS2 = customSteps[currentStep]) === null || _customSteps$currentS2 === void 0 ? void 0 : _customSteps$currentS2.title);
     } else {
       setTitle(generateTitle);
     }
@@ -200,7 +200,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onCloseHandler = function onCloseHandler() {
     setName('');
     setCurrentStep(0);
-    onClose === null || onClose === undefined || onClose();
+    onClose === null || onClose === void 0 || onClose();
   };
   var submitHandler = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -244,9 +244,9 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
             break;
           case 21:
             if (editing) {
-              onRequestEdit === null || onRequestEdit === undefined || onRequestEdit(name);
+              onRequestEdit === null || onRequestEdit === void 0 || onRequestEdit(name);
             } else {
-              onRequestGenerate === null || onRequestGenerate === undefined || onRequestGenerate(name);
+              onRequestGenerate === null || onRequestGenerate === void 0 || onRequestGenerate(name);
             }
           case 22:
           case "end":
@@ -283,7 +283,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     label: modalLabel
   }), /*#__PURE__*/React__default.createElement(ModalBody, {
     className: "".concat(blockClass, "__body-container")
-  }, hasSteps && !apiKeyLoaded ? (_customSteps$currentS3 = customSteps[currentStep]) === null || _customSteps$currentS3 === undefined ? undefined : _customSteps$currentS3.content : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, body && /*#__PURE__*/React__default.createElement("p", {
+  }, hasSteps && !apiKeyLoaded ? (_customSteps$currentS3 = customSteps[currentStep]) === null || _customSteps$currentS3 === void 0 ? void 0 : _customSteps$currentS3.content : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, body && /*#__PURE__*/React__default.createElement("p", {
     className: "".concat(blockClass, "__body")
   }, body), !editing && apiKey && hasAPIKeyVisibilityToggle && /*#__PURE__*/React__default.createElement(PasswordInput, {
     value: apiKey,
@@ -300,7 +300,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     id: apiKeyInputId.current
   }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/React__default.createElement(Form, {
     onSubmit: submitHandler,
-    "aria-label": title !== null && title !== undefined ? title : undefined
+    "aria-label": title !== null && title !== void 0 ? title : undefined
   }, /*#__PURE__*/React__default.createElement(TextInput, {
     helperText: nameHelperText,
     placeholder: namePlaceholder,

package/es/components/AboutModal/AboutModal.js

@@ -58,7 +58,7 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // as the parent of the current bodyRef element
   useEffect(function () {
     var _contentRef$current;
-    bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === undefined ? undefined : _contentRef$current.parentElement;
+    bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
   }, [bodyRef]);
   useEffect(function () {
     if (open) {

package/es/components/ActionBar/ActionBar.js

@@ -15,7 +15,7 @@ import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { ActionBarItem } from './ActionBarItem.js';
 import { ActionBarOverflowItems } from './ActionBarOverflowItems.js';
-import { useOverflowItems } from '../../global/js/hooks/useOverflowItems.js';
+import { useOverflowItems } from '../../global/js/hooks/useOverflowItems/useOverflowItems.js';
 
 var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "overflowMenuRef", "rightAlign"],
   _excluded2 = ["id"],
@@ -36,7 +36,7 @@ var defaults = {
  */
 var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$actions = _ref.actions,
-    actions = _ref$actions === undefined ? defaults.actions : _ref$actions,
+    actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     className = _ref.className,
     maxVisible = _ref.maxVisible,
     menuOptionsClass = _ref.menuOptionsClass,
@@ -53,7 +53,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var offsetRef = overflowMenuRef || _offsetRef;
   var _items = actions.map(function (action) {
     return _objectSpread2({
-      id: action === null || action === undefined ? undefined : action.key
+      id: action === null || action === void 0 ? void 0 : action.key
     }, action);
   });
   var _useOverflowItems = useOverflowItems(_items, localRef, offsetRef, maxVisible, onWidthChange),
@@ -61,7 +61,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     hiddenItems = _useOverflowItems.hiddenItems,
     itemRefHandler = _useOverflowItems.itemRefHandler,
     offsetRefHandler = _useOverflowItems.offsetRefHandler;
-  var overflowMenuItems = hiddenItems === null || hiddenItems === undefined ? undefined : hiddenItems.map(function (_ref2) {
+  var overflowMenuItems = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref2) {
     var key = _ref2.id,
       rest = _objectWithoutProperties(_ref2, _excluded2);
     return /*#__PURE__*/React__default.createElement(ActionBarItem, _extends({}, rest, {
@@ -86,7 +86,7 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         itemRefHandler(id, node);
       }
     }));
-  }), (overflowMenuItems === null || overflowMenuItems === undefined ? undefined : overflowMenuItems.length) > 0 && /*#__PURE__*/React__default.createElement(ActionBarOverflowItems, {
+  }), (overflowMenuItems === null || overflowMenuItems === void 0 ? void 0 : overflowMenuItems.length) > 0 && /*#__PURE__*/React__default.createElement(ActionBarOverflowItems, {
     menuOptionsClass: menuOptionsClass,
     overflowAriaLabel: overflowAriaLabel,
     overflowMenuRef: function overflowMenuRef(node) {

package/es/components/ActionBar/ActionBarOverflowItems.js

@@ -41,17 +41,17 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
     // This uses a copy of a menu item option
     // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
     // div equivalent below is based on Carbon 10.25.0
-    var ItemIcon = item === null || item === undefined ? undefined : item.props.renderIcon;
+    var ItemIcon = item === null || item === void 0 ? void 0 : item.props.renderIcon;
     return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
       className: "".concat(blockClass, "__item"),
-      onClick: item === null || item === undefined ? undefined : item.props.onClick,
+      onClick: item === null || item === void 0 ? void 0 : item.props.onClick,
       itemText: /*#__PURE__*/React__default.createElement("div", {
         className: "".concat(blockClass, "__item-content"),
         "aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")
       }, /*#__PURE__*/React__default.createElement("span", {
         className: "".concat(blockClass, "__item-label"),
         id: "".concat(internalId.current, "-").concat(index, "--item-label")
-      }, item === null || item === undefined ? undefined : item.props.label), typeof (item === null || item === undefined ? undefined : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item === null || item === undefined ? undefined : item.props.renderIcon)
+      }, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
     });
   })));
 };

package/es/components/ActionSet/ActionSet.js

@@ -25,7 +25,7 @@ var ActionSetButton = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     label = _ref.label,
     loading = _ref.loading,
     _ref$isExpressive = _ref.isExpressive,
-    isExpressive = _ref$isExpressive === undefined ? true : _ref$isExpressive,
+    isExpressive = _ref$isExpressive === void 0 ? true : _ref$isExpressive,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
     isExpressive: isExpressive,
@@ -68,9 +68,9 @@ var ActionSet = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
     buttonSize = _ref3.buttonSize,
     className = _ref3.className,
     _ref3$size = _ref3.size,
-    size = _ref3$size === undefined ? defaults.size : _ref3$size,
+    size = _ref3$size === void 0 ? defaults.size : _ref3$size,
     rest = _objectWithoutProperties(_ref3, _excluded2);
-  var buttons = actions && ((_actions$slice = actions.slice) === null || _actions$slice === undefined ? undefined : _actions$slice.call(actions, 0)) || [];
+  var buttons = actions && ((_actions$slice = actions.slice) === null || _actions$slice === void 0 ? void 0 : _actions$slice.call(actions, 0)) || [];
 
   // We stack the buttons in a sm set, or if there are three or more in a md set.
   var stacking = willStack(size, buttons.length);
@@ -84,7 +84,7 @@ var ActionSet = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
       'danger--ghost': 2,
       danger: 4,
       primary: 5
-    }[kind]) !== null && _ghost$dangerGhost$ !== undefined ? _ghost$dangerGhost$ : 3;
+    }[kind]) !== null && _ghost$dangerGhost$ !== void 0 ? _ghost$dangerGhost$ : 3;
   };
 
   // order the actions with ghost/ghost-danger buttons first and primary/danger buttons last
@@ -126,7 +126,7 @@ ActionSet.validateActions = function (sizeFn) {
   return function (props, propName, componentName, location, propFullName) {
     var name = propFullName || propName;
     var prop = props[name];
-    var actions = prop && (prop === null || prop === undefined ? undefined : prop.length);
+    var actions = prop && (prop === null || prop === void 0 ? void 0 : prop.length);
     var problems = [];
     if (actions > 0) {
       var size = sizeFn ? sizeFn(props) : props.size || defaults.size;

package/es/components/AddSelect/AddSelect.js

@@ -15,7 +15,7 @@ var _excluded = ["items", "globalFilters"];
 var componentName = 'AddSelect';
 var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$items = _ref.items,
-    items = _ref$items === undefined ? {
+    items = _ref$items === void 0 ? {
       entries: []
     } : _ref$items,
     globalFilters = _ref.globalFilters,
@@ -24,10 +24,10 @@ var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return item.children;
   });
   var normalizedItems = useNormalizedItems ? _normalize(items) : null;
-  var globalFilterOpts = props.multi && globalFilters !== null && globalFilters !== undefined && globalFilters.length ? getGlobalFilterValues(globalFilters, normalizedItems) : null;
+  var globalFilterOpts = props.multi && globalFilters !== null && globalFilters !== void 0 && globalFilters.length ? getGlobalFilterValues(globalFilters, normalizedItems) : null;
   var defaultModifiers = props.multi && items.modifiers ? items.entries.map(function (item) {
     var _items$modifiers;
-    var modifierAttribute = items === null || items === undefined || (_items$modifiers = items.modifiers) === null || _items$modifiers === undefined ? undefined : _items$modifiers.id;
+    var modifierAttribute = items === null || items === void 0 || (_items$modifiers = items.modifiers) === null || _items$modifiers === void 0 ? void 0 : _items$modifiers.id;
     var modifier = {
       id: item.id
     };
@@ -69,7 +69,8 @@ AddSelect.propTypes = {
     modifiers: PropTypes.shape({
       id: PropTypes.string,
       label: PropTypes.string,
-      options: PropTypes.array
+      options: PropTypes.array,
+      multiSelect: PropTypes.bool
     }),
     sortBy: PropTypes.array,
     filterBy: PropTypes.array,

package/es/components/AddSelect/AddSelectBody.js

@@ -129,7 +129,7 @@ var AddSelectBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   var onCloseHandler = function onCloseHandler() {
     resetState();
-    onClose === null || onClose === undefined || onClose();
+    onClose === null || onClose === void 0 || onClose();
   };
   var tearsheetClassnames = cx(className, blockClass, _defineProperty(_defineProperty({}, "".concat(blockClass, "__single"), !multi), "".concat(blockClass, "__multi"), multi));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
@@ -143,17 +143,17 @@ var AddSelectBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setAppliedGlobalFilters(filters);
   };
   var submitHandler = function submitHandler() {
-    if (multi && appliedModifiers && (appliedModifiers === null || appliedModifiers === undefined ? undefined : appliedModifiers.length) > 0) {
+    if (multi && appliedModifiers && (appliedModifiers === null || appliedModifiers === void 0 ? void 0 : appliedModifiers.length) > 0) {
       var selections = multiSelection.map(function (item) {
         return appliedModifiers.find(function (mod) {
           return mod.id === item;
         });
       });
-      onSubmit === null || onSubmit === undefined || onSubmit(selections);
-    } else if (multi && (appliedModifiers === null || appliedModifiers === undefined ? undefined : appliedModifiers.length) === 0) {
-      onSubmit === null || onSubmit === undefined || onSubmit(multiSelection);
+      onSubmit === null || onSubmit === void 0 || onSubmit(selections);
+    } else if (multi && (appliedModifiers === null || appliedModifiers === void 0 ? void 0 : appliedModifiers.length) === 0) {
+      onSubmit === null || onSubmit === void 0 || onSubmit(multiSelection);
     } else {
-      onSubmit === null || onSubmit === undefined || onSubmit(singleSelection);
+      onSubmit === null || onSubmit === void 0 || onSubmit(singleSelection);
     }
     onCloseHandler();
   };
@@ -220,9 +220,9 @@ var AddSelectBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     displayMetalPanel: displayMetalPanel,
     illustrationTheme: illustrationTheme,
     influencerTitle: influencerTitle,
-    items: useNormalizedItems ? normalizedItems : items === null || items === undefined ? undefined : items.entries,
+    items: useNormalizedItems ? normalizedItems : items === null || items === void 0 ? void 0 : items.entries,
     metaPanelTitle: metaPanelTitle,
-    modifiers: items === null || items === undefined ? undefined : items.modifiers,
+    modifiers: items === null || items === void 0 ? void 0 : items.modifiers,
     multiSelection: multiSelection,
     noSelectionDescription: noSelectionDescription,
     noSelectionTitle: noSelectionTitle,
@@ -272,12 +272,12 @@ var AddSelectBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement(_AddSelectColumn, _extends({}, commonListProps, {
     items: itemsToDisplay,
     columnInputPlaceholder: columnInputPlaceholder,
-    header: (_path$ = path[0]) === null || _path$ === undefined ? undefined : _path$.title,
+    header: (_path$ = path[0]) === null || _path$ === void 0 ? void 0 : _path$.title,
     filterByLabel: filterByLabel,
     sortByLabel: sortByLabel
   }))) : /*#__PURE__*/React__default.createElement("div", null, hasResults ? /*#__PURE__*/React__default.createElement(AddSelectList, _extends({}, commonListProps, {
     filteredItems: itemsToDisplay,
-    modifiers: items === null || items === undefined ? undefined : items.modifiers,
+    modifiers: items === null || items === void 0 ? void 0 : items.modifiers,
     appliedModifiers: appliedModifiers,
     setAppliedModifiers: setAppliedModifiers,
     setParentSelected: parentSelectionHandler,
@@ -322,7 +322,8 @@ AddSelectBody.propTypes = {
     modifiers: PropTypes.shape({
       id: PropTypes.string,
       label: PropTypes.string,
-      options: PropTypes.array
+      options: PropTypes.array,
+      multiSelect: PropTypes.bool
     }),
     sortBy: PropTypes.array,
     filterBy: PropTypes.array,

package/es/components/AddSelect/AddSelectColumn.js

@@ -70,7 +70,7 @@ var _AddSelectColumn = function AddSelectColumn(_ref) {
     }
     return (_entries$find = entries.find(function (item) {
       return item.id === parentSelected;
-    })) !== null && _entries$find !== undefined ? _entries$find : null;
+    })) !== null && _entries$find !== void 0 ? _entries$find : null;
   };
   var selectedItem = getSelectedItem();
   /**

package/es/components/AddSelect/AddSelectFilter.js

@@ -74,7 +74,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
   var getSelectedItem = function getSelectedItem(id) {
     return filters[id] || '';
   };
-  var showFilter = multi && (filterOpts === null || filterOpts === undefined ? undefined : filterOpts.length) > 0;
+  var showFilter = multi && (filterOpts === null || filterOpts === void 0 ? void 0 : filterOpts.length) > 0;
   var filterBtnClassnames = cx("".concat(blockClass, "-toggle"), _defineProperty({}, "".concat(blockClass, "-toggle--open"), open));
   var dirtyInput = Object.keys(filters).length > 0;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {

package/es/components/AddSelect/AddSelectMetaPanel.js

@@ -44,13 +44,13 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
     size: "sm"
   })), /*#__PURE__*/isValidElement(meta) ? meta : meta.map(function (entry) {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: entry === null || entry === undefined ? undefined : entry.id,
+      key: entry === null || entry === void 0 ? void 0 : entry.id,
       className: "".concat(blockClass, "-entry")
     }, /*#__PURE__*/React__default.createElement("p", {
       className: "".concat(blockClass, "-entry-title")
-    }, entry === null || entry === undefined ? undefined : entry.title), /*#__PURE__*/React__default.createElement("p", {
+    }, entry === null || entry === void 0 ? void 0 : entry.title), /*#__PURE__*/React__default.createElement("p", {
       className: "".concat(blockClass, "-entry-body")
-    }, entry === null || entry === undefined ? undefined : entry.value));
+    }, entry === null || entry === void 0 ? void 0 : entry.value));
   }));
 };
 AddSelectMetaPanel.propTypes = {

package/es/components/AddSelect/AddSelectRow.js

@@ -7,7 +7,7 @@
 
 import { defineProperty as _defineProperty, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef, useEffect, useCallback } from 'react';
-import { Layer, Dropdown, Button } from '@carbon/react';
+import { Layer, MultiSelect, Dropdown, Button } from '@carbon/react';
 import { ChevronRight, View } from '@carbon/react/icons';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -114,12 +114,20 @@ var AddSelectRow = function AddSelectRow(_ref) {
     }
   };
   var isInMetaPanel = function isInMetaPanel(id) {
-    return id === (displayMetalPanel === null || displayMetalPanel === undefined ? undefined : displayMetalPanel.id);
+    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
   };
-  var hasModifiers = (modifiers === null || modifiers === undefined || (_modifiers$options = modifiers.options) === null || _modifiers$options === undefined ? undefined : _modifiers$options.length) > 0;
+  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,
+    type: 'inline',
+    disabled: !isSelected(),
+    label: modifiers === null || modifiers === void 0 ? void 0 : modifiers.label,
+    items: modifiers === null || modifiers === void 0 ? void 0 : modifiers.options
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: cx("".concat(blockClass, "-row"), _defineProperty(_defineProperty(_defineProperty(_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)),
     onKeyDown: onSelectKeyDown,
@@ -141,20 +149,20 @@ var AddSelectRow = function AddSelectRow(_ref) {
     item: item,
     selected: selected,
     onClick: handleMultiSelection
-  }), hasModifiers && /*#__PURE__*/React__default.createElement(Layer, null, /*#__PURE__*/React__default.createElement(Dropdown, {
-    titleText: modifiers.label,
-    id: "add-select-modifier-".concat(item.id),
-    type: "inline",
-    items: modifiers.options,
-    label: modifiers.label,
-    disabled: !isSelected(),
+  }), hasModifiers && /*#__PURE__*/React__default.createElement(Layer, null, modifiers !== null && modifiers !== void 0 && modifiers.multiSelect ? /*#__PURE__*/React__default.createElement(MultiSelect, _extends({}, sharedSelectProps, {
+    initialSelectedItems: item[modifiers.id],
+    onChange: function onChange(_ref3) {
+      var selectedItems = _ref3.selectedItems;
+      return modifierHandler(item.id, selectedItems);
+    }
+  })) : /*#__PURE__*/React__default.createElement(Dropdown, _extends({}, sharedSelectProps, {
     className: "".concat(blockClass, "-dropdown"),
     initialSelectedItem: item[modifiers.id],
-    onChange: function onChange(_ref3) {
-      var selectedItem = _ref3.selectedItem;
+    onChange: function onChange(_ref4) {
+      var selectedItem = _ref4.selectedItem;
       return modifierHandler(item.id, selectedItem);
     }
-  }))) : /*#__PURE__*/React__default.createElement(AddSelectFormControl, {
+  })))) : /*#__PURE__*/React__default.createElement(AddSelectFormControl, {
     type: "radio",
     item: item,
     selected: selected,

package/es/components/AddSelect/AddSelectSidebar.js

@@ -30,7 +30,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
     noSelectionDescription = _ref.noSelectionDescription,
     noSelectionTitle = _ref.noSelectionTitle,
     setDisplayMetaPanel = _ref.setDisplayMetaPanel;
-  var hasModifiers = (modifiers === null || modifiers === undefined || (_modifiers$options = modifiers.options) === null || _modifiers$options === undefined ? undefined : _modifiers$options.length) > 0;
+  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) {
     // certain properties should not be displayed in the sidebar
@@ -51,6 +51,18 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
     return getNewItem(items[selectionId]);
   });
   var getTitle = function getTitle(item) {
+    var 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];
+      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 ? ', ' : '');
+        });
+      }
+    }
     return /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(blockClass, "-accordion-title")
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -59,9 +71,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
       className: "".concat(blockClass, "-selected-item-title")
     }, item.title), /*#__PURE__*/React__default.createElement("p", {
       className: "".concat(blockClass, "-selected-item-subtitle")
-    }, item.subtitle)), hasModifiers && /*#__PURE__*/React__default.createElement("div", null, appliedModifiers.find(function (modifier) {
-      return modifier.id === item.id;
-    })[modifiers.id]));
+    }, item.subtitle)), hasModifiers && /*#__PURE__*/React__default.createElement("div", null, modifierEl));
   };
   if (Object.keys(displayMetalPanel).length !== 0) {
     return /*#__PURE__*/React__default.createElement(AddSelectMetaPanel, {

package/es/components/AddSelect/AddSelectSort.js

@@ -20,7 +20,7 @@ var AddSelectSort = function AddSelectSort(_ref) {
     setSortDirection = _ref.setSortDirection,
     sortBy = _ref.sortBy,
     sortByLabel = _ref.sortByLabel;
-  var sortByOpts = sortBy ? sortBy === null || sortBy === undefined ? undefined : sortBy.reduce(function (acc, cur) {
+  var sortByOpts = sortBy ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.reduce(function (acc, cur) {
     var opts = [{
       id: "".concat(cur, "-asc"),
       itemText: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _ArrowUp || (_ArrowUp = /*#__PURE__*/React__default.createElement(ArrowUp, {
@@ -43,8 +43,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
   var sortHandler = function sortHandler(_ref2) {
     var direction = _ref2.direction,
       attribute = _ref2.attribute;
-    setSortAttribute === null || setSortAttribute === undefined || setSortAttribute(attribute);
-    setSortDirection === null || setSortDirection === undefined || setSortDirection(direction);
+    setSortAttribute === null || setSortAttribute === void 0 || setSortAttribute(attribute);
+    setSortDirection === null || setSortDirection === void 0 || setSortDirection(direction);
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: blockClass
@@ -61,8 +61,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
   }, sortByOpts.map(function (opt) {
     return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
       className: "".concat(blockClass, "_overflow-item"),
-      key: opt === null || opt === undefined ? undefined : opt.id,
-      itemText: opt === null || opt === undefined ? undefined : opt.itemText,
+      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);
       }

package/es/components/AddSelect/add-select-utils.js

@@ -57,8 +57,8 @@ var getGlobalFilterValues = function getGlobalFilterValues(globalFilters, items)
 var sortItems = function sortItems(attribute, direction) {
   return function (a, b) {
     var _a$attribute, _b$attribute;
-    var valueA = (_a$attribute = a[attribute]) === null || _a$attribute === undefined ? undefined : _a$attribute.split(' ').join('');
-    var valueB = (_b$attribute = b[attribute]) === null || _b$attribute === undefined ? undefined : _b$attribute.split(' ').join('');
+    var valueA = (_a$attribute = a[attribute]) === null || _a$attribute === void 0 ? void 0 : _a$attribute.split(' ').join('');
+    var valueB = (_b$attribute = b[attribute]) === null || _b$attribute === void 0 ? void 0 : _b$attribute.split(' ').join('');
     if (direction === 'desc') {
       return valueA > valueB ? -1 : 1;
     }
@@ -105,7 +105,7 @@ var getFilteredItems = function getFilteredItems(useNormalizedItems, normalizedI
         }
         var item = (_prev$find = prev.find(function (item) {
           return item.id === cur.id;
-        })) === null || _prev$find === undefined || (_prev$find = _prev$find.children) === null || _prev$find === undefined ? undefined : _prev$find.entries;
+        })) === null || _prev$find === void 0 || (_prev$find = _prev$find.children) === null || _prev$find === void 0 ? void 0 : _prev$find.entries;
         return item;
       }, items.entries);
     }

package/es/components/AddSelect/types/index.d.ts

@@ -14,6 +14,7 @@ export interface Modifier {
     id?: string;
     label?: string;
     options?: string[];
+    multiSelect?: boolean;
 }
 export interface Avatar {
     alt?: string;