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

package/es/node_modules/prop-types/factoryWithTypeCheckers.js

@@ -339,7 +339,7 @@ function requireFactoryWithTypeCheckers() {
     }
     function createUnionTypeChecker(arrayOfTypeCheckers) {
       if (!Array.isArray(arrayOfTypeCheckers)) {
-        process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : undefined;
+        process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
         return emptyFunctionThatReturnsNull;
       }
       for (var i = 0; i < arrayOfTypeCheckers.length; i++) {

package/es/settings.js

@@ -18,12 +18,12 @@ var componentDeprecatedWarning = function componentDeprecatedWarning(name, detai
   return "Carbon for IBM Products (WARNING): Component \"".concat(name, "\" is deprecated. ").concat(details);
 };
 pkg$1.logDeprecated = function (component, name) {
-  if (component !== null && component !== undefined && component.deprecated) {
+  if (component !== null && component !== void 0 && component.deprecated) {
     var _pconsole$level;
     var _component$deprecated = component.deprecated,
       level = _component$deprecated.level,
       details = _component$deprecated.details;
-    var logUsing = (_pconsole$level = pconsole === null || pconsole === undefined ? undefined : pconsole[level]) !== null && _pconsole$level !== undefined ? _pconsole$level : pconsole.error;
+    var logUsing = (_pconsole$level = pconsole === null || pconsole === void 0 ? void 0 : pconsole[level]) !== null && _pconsole$level !== void 0 ? _pconsole$level : pconsole.error;
     logUsing(componentDeprecatedWarning(name || component.displayName, details));
   }
 };

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -39,7 +39,7 @@ function _asyncToGenerator(n) {
       function _throw(n) {
         asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
       }
-      _next(undefined);
+      _next(void 0);
     });
   };
 }
@@ -388,7 +388,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();
@@ -498,7 +498,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.");
@@ -522,7 +522,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/lib/components/APIKeyModal/APIKeyDownloader.js

@@ -65,9 +65,9 @@ var APIKeyDownloader = function APIKeyDownloader(_ref) {
     className: "".concat(settings.pkg.prefix, "--apikey-modal__messaging-text")
   }, body, ' ', /*#__PURE__*/React.createElement("a", _rollupPluginBabelHelpers.extends({}, linkProps, {
     className: "".concat(settings.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/lib/components/APIKeyModal/APIKeyModal.js

@@ -36,7 +36,7 @@ exports.APIKeyModal = /*#__PURE__*/React.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,
@@ -44,13 +44,13 @@ exports.APIKeyModal = /*#__PURE__*/React.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,
@@ -134,14 +134,14 @@ exports.APIKeyModal = /*#__PURE__*/React.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]);
   React.useEffect(function () {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
-      useFocus.claimFocus(firstElement, modalRef, "#".concat(CSS.escape(apiKeyInputId === null || apiKeyInputId === undefined ? undefined : apiKeyInputId.current)));
+      useFocus.claimFocus(firstElement, modalRef, "#".concat(CSS.escape(apiKeyInputId === null || apiKeyInputId === void 0 ? void 0 : apiKeyInputId.current)));
     }
   }, [firstElement, modalRef, open]);
   React.useEffect(function () {
@@ -155,9 +155,9 @@ exports.APIKeyModal = /*#__PURE__*/React.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;
@@ -185,13 +185,13 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   React.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);
     }
@@ -202,7 +202,7 @@ exports.APIKeyModal = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(e) {
@@ -246,9 +246,9 @@ exports.APIKeyModal = /*#__PURE__*/React.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":
@@ -285,7 +285,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     label: modalLabel
   }), /*#__PURE__*/React.createElement(react.ModalBody, {
     className: "".concat(blockClass, "__body-container")
-  }, hasSteps && !apiKeyLoaded ? (_customSteps$currentS3 = customSteps[currentStep]) === null || _customSteps$currentS3 === undefined ? undefined : _customSteps$currentS3.content : /*#__PURE__*/React.createElement(React.Fragment, null, body && /*#__PURE__*/React.createElement("p", {
+  }, hasSteps && !apiKeyLoaded ? (_customSteps$currentS3 = customSteps[currentStep]) === null || _customSteps$currentS3 === void 0 ? void 0 : _customSteps$currentS3.content : /*#__PURE__*/React.createElement(React.Fragment, null, body && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__body")
   }, body), !editing && apiKey && hasAPIKeyVisibilityToggle && /*#__PURE__*/React.createElement(react.PasswordInput, {
     value: apiKey,
@@ -302,7 +302,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id: apiKeyInputId.current
   }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/React.createElement(react.Form, {
     onSubmit: submitHandler,
-    "aria-label": title !== null && title !== undefined ? title : undefined
+    "aria-label": title !== null && title !== void 0 ? title : undefined
   }, /*#__PURE__*/React.createElement(react.TextInput, {
     helperText: nameHelperText,
     placeholder: namePlaceholder,

package/lib/components/AboutModal/AboutModal.js

@@ -60,7 +60,7 @@ exports.AboutModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // as the parent of the current bodyRef element
   React.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]);
   React.useEffect(function () {
     if (open) {

package/lib/components/ActionBar/ActionBar.js

@@ -17,7 +17,7 @@ var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var ActionBarItem = require('./ActionBarItem.js');
 var ActionBarOverflowItems = require('./ActionBarOverflowItems.js');
-var useOverflowItems = require('../../global/js/hooks/useOverflowItems.js');
+var useOverflowItems = require('../../global/js/hooks/useOverflowItems/useOverflowItems.js');
 
 var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "overflowMenuRef", "rightAlign"],
   _excluded2 = ["id"],
@@ -38,7 +38,7 @@ var defaults = {
  */
 exports.ActionBar = /*#__PURE__*/React.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,
@@ -55,7 +55,7 @@ exports.ActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var offsetRef = overflowMenuRef || _offsetRef;
   var _items = actions.map(function (action) {
     return _rollupPluginBabelHelpers.objectSpread2({
-      id: action === null || action === undefined ? undefined : action.key
+      id: action === null || action === void 0 ? void 0 : action.key
     }, action);
   });
   var _useOverflowItems = useOverflowItems.useOverflowItems(_items, localRef, offsetRef, maxVisible, onWidthChange),
@@ -63,7 +63,7 @@ exports.ActionBar = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
     return /*#__PURE__*/React.createElement(ActionBarItem.ActionBarItem, _rollupPluginBabelHelpers.extends({}, rest, {
@@ -88,7 +88,7 @@ exports.ActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         itemRefHandler(id, node);
       }
     }));
-  }), (overflowMenuItems === null || overflowMenuItems === undefined ? undefined : overflowMenuItems.length) > 0 && /*#__PURE__*/React.createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
+  }), (overflowMenuItems === null || overflowMenuItems === void 0 ? void 0 : overflowMenuItems.length) > 0 && /*#__PURE__*/React.createElement(ActionBarOverflowItems.ActionBarOverflowItems, {
     menuOptionsClass: menuOptionsClass,
     overflowAriaLabel: overflowAriaLabel,
     overflowMenuRef: function overflowMenuRef(node) {

package/lib/components/ActionBar/ActionBarOverflowItems.js

@@ -43,17 +43,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.createElement(react.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.createElement("div", {
         className: "".concat(blockClass, "__item-content"),
         "aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")
       }, /*#__PURE__*/React.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.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.createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
     });
   })));
 };

package/lib/components/ActionSet/ActionSet.js

@@ -27,7 +27,7 @@ var ActionSetButton = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({}, rest, {
     isExpressive: isExpressive,
@@ -70,9 +70,9 @@ var ActionSet = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.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);
@@ -86,7 +86,7 @@ var ActionSet = /*#__PURE__*/React.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
@@ -128,7 +128,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/lib/components/AddSelect/AddSelect.js

@@ -17,7 +17,7 @@ var _excluded = ["items", "globalFilters"];
 var componentName = 'AddSelect';
 var AddSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$items = _ref.items,
-    items = _ref$items === undefined ? {
+    items = _ref$items === void 0 ? {
       entries: []
     } : _ref$items,
     globalFilters = _ref.globalFilters,
@@ -26,10 +26,10 @@ var AddSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return item.children;
   });
   var normalizedItems = useNormalizedItems ? addSelectUtils.normalize(items) : null;
-  var globalFilterOpts = props.multi && globalFilters !== null && globalFilters !== undefined && globalFilters.length ? addSelectUtils.getGlobalFilterValues(globalFilters, normalizedItems) : null;
+  var globalFilterOpts = props.multi && globalFilters !== null && globalFilters !== void 0 && globalFilters.length ? addSelectUtils.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
     };
@@ -71,7 +71,8 @@ AddSelect.propTypes = {
     modifiers: index.default.shape({
       id: index.default.string,
       label: index.default.string,
-      options: index.default.array
+      options: index.default.array,
+      multiSelect: index.default.bool
     }),
     sortBy: index.default.array,
     filterBy: index.default.array,

package/lib/components/AddSelect/AddSelectBody.js

@@ -131,7 +131,7 @@ var AddSelectBody = /*#__PURE__*/React.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, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__single"), !multi), "".concat(blockClass, "__multi"), multi));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
@@ -145,17 +145,17 @@ var AddSelectBody = /*#__PURE__*/React.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();
   };
@@ -222,9 +222,9 @@ var AddSelectBody = /*#__PURE__*/React.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,
@@ -274,12 +274,12 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(AddSelectColumn.AddSelectColumn, _rollupPluginBabelHelpers.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.createElement("div", null, hasResults ? /*#__PURE__*/React.createElement(AddSelectList.AddSelectList, _rollupPluginBabelHelpers.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,
@@ -324,7 +324,8 @@ AddSelectBody.propTypes = {
     modifiers: index.default.shape({
       id: index.default.string,
       label: index.default.string,
-      options: index.default.array
+      options: index.default.array,
+      multiSelect: index.default.bool
     }),
     sortBy: index.default.array,
     filterBy: index.default.array,

package/lib/components/AddSelect/AddSelectColumn.js

@@ -72,7 +72,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/lib/components/AddSelect/AddSelectFilter.js

@@ -76,7 +76,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"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-toggle--open"), open));
   var dirtyInput = Object.keys(filters).length > 0;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {

package/lib/components/AddSelect/AddSelectMetaPanel.js

@@ -46,13 +46,13 @@ var AddSelectMetaPanel = function AddSelectMetaPanel(_ref) {
     size: "sm"
   })), /*#__PURE__*/React.isValidElement(meta) ? meta : meta.map(function (entry) {
     return /*#__PURE__*/React.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.createElement("p", {
       className: "".concat(blockClass, "-entry-title")
-    }, entry === null || entry === undefined ? undefined : entry.title), /*#__PURE__*/React.createElement("p", {
+    }, entry === null || entry === void 0 ? void 0 : entry.title), /*#__PURE__*/React.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/lib/components/AddSelect/AddSelectRow.js

@@ -116,12 +116,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.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)),
     onKeyDown: onSelectKeyDown,
@@ -143,20 +151,20 @@ var AddSelectRow = function AddSelectRow(_ref) {
     item: item,
     selected: selected,
     onClick: handleMultiSelection
-  }), hasModifiers && /*#__PURE__*/React.createElement(react.Layer, null, /*#__PURE__*/React.createElement(react.Dropdown, {
-    titleText: modifiers.label,
-    id: "add-select-modifier-".concat(item.id),
-    type: "inline",
-    items: modifiers.options,
-    label: modifiers.label,
-    disabled: !isSelected(),
+  }), hasModifiers && /*#__PURE__*/React.createElement(react.Layer, null, modifiers !== null && modifiers !== void 0 && modifiers.multiSelect ? /*#__PURE__*/React.createElement(react.MultiSelect, _rollupPluginBabelHelpers.extends({}, sharedSelectProps, {
+    initialSelectedItems: item[modifiers.id],
+    onChange: function onChange(_ref3) {
+      var selectedItems = _ref3.selectedItems;
+      return modifierHandler(item.id, selectedItems);
+    }
+  })) : /*#__PURE__*/React.createElement(react.Dropdown, _rollupPluginBabelHelpers.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.createElement(AddSelectFormControl.AddSelectFormControl, {
+  })))) : /*#__PURE__*/React.createElement(AddSelectFormControl.AddSelectFormControl, {
     type: "radio",
     item: item,
     selected: selected,

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -32,7 +32,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
@@ -53,6 +53,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.createElement("div", {
       className: "".concat(blockClass, "-accordion-title")
     }, /*#__PURE__*/React.createElement("div", {
@@ -61,9 +73,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
       className: "".concat(blockClass, "-selected-item-title")
     }, item.title), /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "-selected-item-subtitle")
-    }, item.subtitle)), hasModifiers && /*#__PURE__*/React.createElement("div", null, appliedModifiers.find(function (modifier) {
-      return modifier.id === item.id;
-    })[modifiers.id]));
+    }, item.subtitle)), hasModifiers && /*#__PURE__*/React.createElement("div", null, modifierEl));
   };
   if (Object.keys(displayMetalPanel).length !== 0) {
     return /*#__PURE__*/React.createElement(AddSelectMetaPanel.AddSelectMetaPanel, {

package/lib/components/AddSelect/AddSelectSort.js

@@ -22,7 +22,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.createElement(React.Fragment, null, _ArrowUp || (_ArrowUp = /*#__PURE__*/React.createElement(icons.ArrowUp, {
@@ -45,8 +45,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.createElement("div", {
     className: blockClass
@@ -63,8 +63,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
   }, sortByOpts.map(function (opt) {
     return /*#__PURE__*/React.createElement(react.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/lib/components/AddSelect/add-select-utils.js

@@ -59,8 +59,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;
     }
@@ -107,7 +107,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/lib/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;