@carbon/ibm-products 1.19.1 → 1.20.2

package/es/components/AddSelect/AddSelect.js

@@ -122,6 +122,11 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
       sortAttribute = _useItemSort.sortAttribute,
       setSortAttribute = _useItemSort.setSortAttribute;
 
+  var _useState21 = useState([]),
+      _useState22 = _slicedToArray(_useState21, 2),
+      appliedModifiers = _useState22[0],
+      setAppliedModifiers = _useState22[1];
+
   useEffect(function () {
     var entries = items.entries; // flatItems is just a single array of all entries including children
 
@@ -131,6 +136,16 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
       if (globalFilters !== null && globalFilters !== void 0 && globalFilters.length) {
         var globalFilterValues = getGlobalFilterValues(globalFilters, flattenedItems);
         setGlobalFilterOpts(globalFilterValues);
+      }
+
+      if (items.modifiers) {
+        var modifiersToApply = flattenedItems.map(function (item) {
+          var modifierAttribute = items.modifiers.id;
+          return _defineProperty({
+            id: item.id
+          }, modifierAttribute, item[modifierAttribute]);
+        });
+        setAppliedModifiers(modifiersToApply);
       } // multi select with nested data needs to be normalized
 
 
@@ -259,7 +274,18 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
 
   var submitHandler = function submitHandler() {
-    onSubmit(multi ? multiSelection : singleSelection);
+    if (multi && appliedModifiers.length > 0) {
+      var selections = multiSelection.map(function (item) {
+        return appliedModifiers.find(function (mod) {
+          return mod.id === item;
+        });
+      });
+      onSubmit(selections);
+    } else if (multi && appliedModifiers.length === 0) {
+      onSubmit(multiSelection);
+    } else {
+      onSubmit(singleSelection);
+    }
   };
 
   var classNames = cx(className, blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__single"), !multi), _defineProperty(_cx, "".concat(blockClass, "__multi"), multi), _cx));
@@ -292,7 +318,9 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
     removeIconDescription: removeIconDescription,
     setMultiSelection: setMultiSelection,
     displayMetalPanel: displayMetalPanel,
-    setDisplayMetaPanel: setDisplayMetaPanel
+    setDisplayMetaPanel: setDisplayMetaPanel,
+    modifiers: items.modifiers,
+    appliedModifiers: appliedModifiers
   };
 
   var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
@@ -375,7 +403,9 @@ export var AddSelect = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }));
   })) : /*#__PURE__*/React.createElement("div", null, hasResults ? /*#__PURE__*/React.createElement(AddSelectList, _extends({}, commonListProps, {
     filteredItems: itemsToDisplay,
-    modifiers: items === null || items === void 0 ? void 0 : items.modifiers
+    modifiers: items.modifiers,
+    appliedModifiers: appliedModifiers,
+    setAppliedModifiers: setAppliedModifiers
   })) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
@@ -409,6 +439,7 @@ AddSelect.propTypes = {
   influencerTitle: PropTypes.string,
   items: PropTypes.shape({
     modifiers: PropTypes.shape({
+      id: PropTypes.string,
       label: PropTypes.string,
       options: PropTypes.array
     }),

package/es/components/AddSelect/AddSelectList.js

@@ -15,19 +15,24 @@ import { UserProfileImage } from '../UserProfileImage';
 import { pkg } from '../../settings';
 var componentName = 'AddSelectList';
 export var AddSelectList = function AddSelectList(_ref) {
-  var filteredItems = _ref.filteredItems,
+  var _modifiers$options;
+
+  var appliedModifiers = _ref.appliedModifiers,
+      filteredItems = _ref.filteredItems,
       metaIconDescription = _ref.metaIconDescription,
       modifiers = _ref.modifiers,
       multi = _ref.multi,
       multiSelection = _ref.multiSelection,
       navIconDescription = _ref.navIconDescription,
       path = _ref.path,
+      setAppliedModifiers = _ref.setAppliedModifiers,
       setDisplayMetaPanel = _ref.setDisplayMetaPanel,
       setMultiSelection = _ref.setMultiSelection,
       setPath = _ref.setPath,
       setSingleSelection = _ref.setSingleSelection,
       singleSelection = _ref.singleSelection;
   var blockClass = "".concat(pkg.prefix, "--add-select__selections");
+  var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
 
   var handleSingleSelection = function handleSingleSelection(value) {
     setSingleSelection(value);
@@ -130,14 +135,24 @@ export var AddSelectList = function AddSelectList(_ref) {
     return /*#__PURE__*/React.createElement(Icon, null);
   };
 
+  var modifierHandler = function modifierHandler(id, selectedItem) {
+    var modifiersClone = _toConsumableArray(appliedModifiers);
+
+    var modifierIdx = modifiersClone.findIndex(function (item) {
+      return item.id === id;
+    });
+    modifiersClone[modifierIdx] = _defineProperty({
+      id: id
+    }, modifiers.id, selectedItem);
+    setAppliedModifiers(modifiersClone);
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-wrapper")
   }, /*#__PURE__*/React.createElement(StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
   }, /*#__PURE__*/React.createElement(StructuredListBody, null, filteredItems.map(function (item) {
-    var _modifiers$options;
-
     return /*#__PURE__*/React.createElement(StructuredListRow, {
       key: item.id,
       className: cx("".concat(blockClass, "-row"), _defineProperty({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
@@ -165,22 +180,29 @@ export var AddSelectList = function AddSelectList(_ref) {
       className: "".concat(blockClass, "-cell-title")
     }, item.title), item.subtitle && /*#__PURE__*/React.createElement("span", {
       className: "".concat(blockClass, "-cell-subtitle")
-    }, item.subtitle)))), (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) && /*#__PURE__*/React.createElement(Dropdown, {
+    }, item.subtitle)))), hasModifiers && /*#__PURE__*/React.createElement(Dropdown, {
       id: "".concat(item.id, "-modifier"),
       type: "inline",
-      items: modifiers === null || modifiers === void 0 ? void 0 : modifiers.options,
+      items: modifiers.options,
       light: true,
-      label: modifiers === null || modifiers === void 0 ? void 0 : modifiers.label,
+      label: modifiers.label,
       disabled: !isSelected(item.id),
-      className: "".concat(blockClass, "-dropdown ").concat(blockClass, "-hidden-hover")
+      className: "".concat(blockClass, "-dropdown ").concat(blockClass, "-hidden-hover"),
+      initialSelectedItem: item[modifiers.id],
+      onChange: function onChange(_ref5) {
+        var selectedItem = _ref5.selectedItem;
+        return modifierHandler(item.id, selectedItem);
+      }
     })) : /*#__PURE__*/React.createElement(RadioButton, {
       className: "".concat(blockClass, "-radio"),
       name: "add-select-selections",
       id: item.id,
       value: item.value,
       labelText: item.title,
-      onChange: handleSingleSelection,
-      selected: item.value === singleSelection
+      onChange: function onChange() {
+        return handleSingleSelection(item.id);
+      },
+      selected: item.id === singleSelection
     }), item.children && /*#__PURE__*/React.createElement(Button, {
       renderIcon: ChevronRight16,
       iconDescription: navIconDescription,
@@ -209,6 +231,7 @@ export var AddSelectList = function AddSelectList(_ref) {
   }))));
 };
 AddSelectList.propTypes = {
+  appliedModifiers: PropTypes.array,
   filteredItems: PropTypes.array,
   metaIconDescription: PropTypes.string,
   modifiers: PropTypes.object,
@@ -216,6 +239,7 @@ AddSelectList.propTypes = {
   multiSelection: PropTypes.array,
   navIconDescription: PropTypes.string,
   path: PropTypes.array,
+  setAppliedModifiers: PropTypes.func,
   setDisplayMetaPanel: PropTypes.func,
   setMultiSelection: PropTypes.func,
   setPath: PropTypes.func,

package/es/components/AddSelect/AddSelectSidebar.js

@@ -15,11 +15,15 @@ import { pkg } from '../../settings';
 import { AddSelectMetaPanel } from './AddSelectMetaPanel';
 var componentName = 'AddSelectSidebar';
 export var AddSelectSidebar = function AddSelectSidebar(_ref) {
-  var closeIconDescription = _ref.closeIconDescription,
+  var _modifiers$options;
+
+  var appliedModifiers = _ref.appliedModifiers,
+      closeIconDescription = _ref.closeIconDescription,
       displayMetalPanel = _ref.displayMetalPanel,
       influencerTitle = _ref.influencerTitle,
       items = _ref.items,
       metaPanelTitle = _ref.metaPanelTitle,
+      modifiers = _ref.modifiers,
       multiSelection = _ref.multiSelection,
       noSelectionDescription = _ref.noSelectionDescription,
       noSelectionTitle = _ref.noSelectionTitle,
@@ -27,6 +31,8 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
       setDisplayMetaPanel = _ref.setDisplayMetaPanel,
       setMultiSelection = _ref.setMultiSelection;
   var blockClass = "".concat(pkg.prefix, "--add-select__sidebar");
+  var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
+  var hasSelections = multiSelection.length > 0;
 
   var handleItemRemove = function handleItemRemove(id) {
     var newSelections = multiSelection.filter(function (v) {
@@ -50,24 +56,23 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
     return acc;
   }, []);
 
-  var getTitle = function getTitle(_ref2) {
-    var title = _ref2.title,
-        subtitle = _ref2.subtitle,
-        id = _ref2.id;
+  var getTitle = function getTitle(item) {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-accordion-title")
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "-selected-item")
     }, /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "-selected-item-title")
-    }, title), /*#__PURE__*/React.createElement("p", {
+    }, item.title), /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "-selected-item-subtitle")
-    }, subtitle)), /*#__PURE__*/React.createElement(Button, {
+    }, item.subtitle)), hasModifiers && /*#__PURE__*/React.createElement("div", null, appliedModifiers.find(function (modifier) {
+      return modifier.id === item.id;
+    })[modifiers.id]), /*#__PURE__*/React.createElement(Button, {
       renderIcon: SubtractAlt32,
       iconDescription: removeIconDescription,
       hasIconOnly: true,
       onClick: function onClick() {
-        return handleItemRemove(id);
+        return handleItemRemove(item.id);
       },
       kind: "ghost",
       className: "".concat(blockClass, "-item-remove-button"),
@@ -93,7 +98,7 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
   }, influencerTitle), /*#__PURE__*/React.createElement(Tag, {
     type: "gray",
     size: "sm"
-  }, multiSelection.length)), multiSelection.length > 0 ? /*#__PURE__*/React.createElement(Accordion, {
+  }, multiSelection.length)), hasSelections ? /*#__PURE__*/React.createElement(Accordion, {
     align: "start"
   }, sidebarItems.map(function (item) {
     return /*#__PURE__*/React.createElement(AccordionItem, {
@@ -118,11 +123,13 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
   })));
 };
 AddSelectSidebar.propTypes = {
+  appliedModifiers: PropTypes.array,
   closeIconDescription: PropTypes.string,
   displayMetalPanel: PropTypes.object,
   influencerTitle: PropTypes.string,
   items: PropTypes.array,
   metaPanelTitle: PropTypes.string,
+  modifiers: PropTypes.object,
   multiSelection: PropTypes.array,
   noSelectionDescription: PropTypes.string,
   noSelectionTitle: PropTypes.string,

package/es/components/ComboButton/ComboButton.js

@@ -19,11 +19,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import { ChevronDown16, ChevronUp16 } from '@carbon/icons-react';
 import { Button, OverflowMenuItem, OverflowMenu } from 'carbon-components-react';
-import setupGetInstanceId from 'carbon-components-react/lib/tools/setupGetInstanceId';
 import classnames from 'classnames';
 import { node, shape, string } from 'prop-types';
+import uuidv4 from '../../global/js/utils/uuidv4';
 import React, { Children, createElement, useRef, useState } from 'react';
-var getInstanceId = setupGetInstanceId();
 var blockClass = 'security--combo-button';
 /**
  * The combo button consolidates similar actions, while exposing the most commonly used one.
@@ -35,7 +34,7 @@ var ComboButton = function ComboButton(_ref) {
       overflowMenu = _ref.overflowMenu,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useRef = useRef(getInstanceId()),
+  var _useRef = useRef(uuidv4()),
       instanceId = _useRef.current;
 
   var _useState = useState(false),

package/es/components/CreateSidePanel/CreateSidePanel.js

@@ -22,11 +22,9 @@ import { pkg } from '../../settings';
 import { getDevtoolsProps } from '../../global/js/utils/devtools'; // Carbon and package components we use.
 
 import { Form } from 'carbon-components-react';
-import { SidePanel } from '../SidePanel';
-import { ActionSet } from '../ActionSet'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { SidePanel } from '../SidePanel'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--create-side-panel");
-var sidePanelBlockClass = "".concat(pkg.prefix, "--side-panel");
 var componentName = 'CreateSidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -64,7 +62,6 @@ export var CreateSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     onClick: onRequestClose,
     kind: 'secondary'
   }];
-  var actionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), "".concat(sidePanelBlockClass, "__actions-container")]);
   return selectorPageContent && /*#__PURE__*/React.createElement(SidePanel, _extends({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -78,18 +75,15 @@ export var CreateSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     slideIn: true,
     animateTitle: false,
     className: cx(blockClass, className),
-    size: "md"
+    size: "md",
+    actions: actions
   }), /*#__PURE__*/React.createElement("h3", {
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/React.createElement(Form, {
     className: "".concat(blockClass, "__form")
-  }, children, /*#__PURE__*/React.createElement(ActionSet, {
-    actions: actions,
-    className: actionContainerClassNames,
-    size: "md"
-  })));
+  }, children));
 });
 CreateSidePanel = pkg.checkComponentEnabled(CreateSidePanel, componentName);
 CreateSidePanel.displayName = componentName;

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -13,8 +13,7 @@ var _excluded = ["onChange"];
 // @flow
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import InlineCheckbox from 'carbon-components-react/lib/components/InlineCheckbox';
-import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { OverflowMenu, OverflowMenuItem, Checkbox } from 'carbon-components-react';
 import { CaretDown16 } from '@carbon/icons-react';
 import { pkg } from '../../../settings'; // cspell:words columnheader
 
@@ -65,7 +64,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
     role: "columnheader",
     scope: "col",
     className: "".concat(blockClass, "__select-all-toggle-on")
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineCheckbox, _extends({}, selectProps, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {
       onChange(e);

package/es/components/EditSidePanel/EditSidePanel.js

@@ -25,11 +25,9 @@ import { pkg
 
 import { Form } from 'carbon-components-react';
 import { SidePanel } from '../SidePanel';
-import { ActionSet } from '../ActionSet';
 import '../../global/js/utils/props-helper'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--edit-side-panel");
-var sidePanelBlockClass = "".concat(pkg.prefix, "--side-panel");
 var componentName = 'EditSidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Default values for props
 
@@ -77,7 +75,6 @@ export var EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: onRequestClose,
     kind: 'secondary'
   }];
-  var actionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), "".concat(sidePanelBlockClass, "__actions-container")]);
   return /*#__PURE__*/React.createElement(SidePanel, _extends({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -92,18 +89,15 @@ export var EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     animateTitle: false,
     className: cx(blockClass, className),
     size: size,
-    preventCloseOnClickOutside: true
+    preventCloseOnClickOutside: true,
+    actions: actions
   }), formTitle && /*#__PURE__*/React.createElement("h3", {
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), formDescription && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/React.createElement(Form, {
     className: "".concat(blockClass, "__form")
-  }, children, /*#__PURE__*/React.createElement(ActionSet, {
-    actions: actions,
-    className: actionContainerClassNames,
-    size: size
-  })));
+  }, children));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 EditSidePanel = pkg.checkComponentEnabled(EditSidePanel, componentName); // The display name of the component, used by React. Note that displayName

package/es/components/SidePanel/SidePanel.js

@@ -49,7 +49,7 @@ var defaults = {
  */
 
 export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref4, _cx4;
+  var _window, _ref4, _cx4;
 
   var actionToolbarButtons = _ref.actionToolbarButtons,
       actions = _ref.actions,
@@ -107,7 +107,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: size,
     open: open
   });
-  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+  var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   }; // scroll panel to top going between steps
 

package/es/components/index.js

@@ -37,4 +37,4 @@ export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { InlineEdit } from './InlineEdit';
 export { DataSpreadsheet } from './DataSpreadsheet';
-export { Datagrid } from './Datagrid';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle } from './Datagrid';

package/es/global/js/package-settings.js

@@ -35,6 +35,7 @@ var defaults = {
     HTTPError404: true,
     HTTPErrorOther: true,
     ImportModal: true,
+    InlineEdit: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
     NoTagsEmptyState: true,
@@ -63,7 +64,6 @@ var defaults = {
     WebTerminalContentWrapper: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
-    InlineEdit: false,
     DataSpreadsheet: false,
     Datagrid: false
     /* new component flags here - comment used by generate CLI */

package/lib/components/AddSelect/AddSelect.js

@@ -149,6 +149,11 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       sortAttribute = _useItemSort.sortAttribute,
       setSortAttribute = _useItemSort.setSortAttribute;
 
+  var _useState21 = (0, _react.useState)([]),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      appliedModifiers = _useState22[0],
+      setAppliedModifiers = _useState22[1];
+
   (0, _react.useEffect)(function () {
     var entries = items.entries; // flatItems is just a single array of all entries including children
 
@@ -158,6 +163,16 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       if (globalFilters !== null && globalFilters !== void 0 && globalFilters.length) {
         var globalFilterValues = (0, _addSelectUtils.getGlobalFilterValues)(globalFilters, flattenedItems);
         setGlobalFilterOpts(globalFilterValues);
+      }
+
+      if (items.modifiers) {
+        var modifiersToApply = flattenedItems.map(function (item) {
+          var modifierAttribute = items.modifiers.id;
+          return (0, _defineProperty2.default)({
+            id: item.id
+          }, modifierAttribute, item[modifierAttribute]);
+        });
+        setAppliedModifiers(modifiersToApply);
       } // multi select with nested data needs to be normalized
 
 
@@ -286,7 +301,18 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   };
 
   var submitHandler = function submitHandler() {
-    onSubmit(multi ? multiSelection : singleSelection);
+    if (multi && appliedModifiers.length > 0) {
+      var selections = multiSelection.map(function (item) {
+        return appliedModifiers.find(function (mod) {
+          return mod.id === item;
+        });
+      });
+      onSubmit(selections);
+    } else if (multi && appliedModifiers.length === 0) {
+      onSubmit(multiSelection);
+    } else {
+      onSubmit(singleSelection);
+    }
   };
 
   var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
@@ -319,7 +345,9 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     removeIconDescription: removeIconDescription,
     setMultiSelection: setMultiSelection,
     displayMetalPanel: displayMetalPanel,
-    setDisplayMetaPanel: setDisplayMetaPanel
+    setDisplayMetaPanel: setDisplayMetaPanel,
+    modifiers: items.modifiers,
+    appliedModifiers: appliedModifiers
   };
 
   var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
@@ -402,7 +430,9 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }));
   })) : /*#__PURE__*/_react.default.createElement("div", null, hasResults ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, commonListProps, {
     filteredItems: itemsToDisplay,
-    modifiers: items === null || items === void 0 ? void 0 : items.modifiers
+    modifiers: items.modifiers,
+    appliedModifiers: appliedModifiers,
+    setAppliedModifiers: setAppliedModifiers
   })) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
@@ -438,6 +468,7 @@ AddSelect.propTypes = {
   influencerTitle: _propTypes.default.string,
   items: _propTypes.default.shape({
     modifiers: _propTypes.default.shape({
+      id: _propTypes.default.string,
       label: _propTypes.default.string,
       options: _propTypes.default.array
     }),

package/lib/components/AddSelect/AddSelectList.js

@@ -34,19 +34,24 @@ var _settings = require("../../settings");
 var componentName = 'AddSelectList';
 
 var AddSelectList = function AddSelectList(_ref) {
-  var filteredItems = _ref.filteredItems,
+  var _modifiers$options;
+
+  var appliedModifiers = _ref.appliedModifiers,
+      filteredItems = _ref.filteredItems,
       metaIconDescription = _ref.metaIconDescription,
       modifiers = _ref.modifiers,
       multi = _ref.multi,
       multiSelection = _ref.multiSelection,
       navIconDescription = _ref.navIconDescription,
       path = _ref.path,
+      setAppliedModifiers = _ref.setAppliedModifiers,
       setDisplayMetaPanel = _ref.setDisplayMetaPanel,
       setMultiSelection = _ref.setMultiSelection,
       setPath = _ref.setPath,
       setSingleSelection = _ref.setSingleSelection,
       singleSelection = _ref.singleSelection;
   var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
+  var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
 
   var handleSingleSelection = function handleSingleSelection(value) {
     setSingleSelection(value);
@@ -147,14 +152,23 @@ var AddSelectList = function AddSelectList(_ref) {
     return /*#__PURE__*/_react.default.createElement(Icon, null);
   };
 
+  var modifierHandler = function modifierHandler(id, selectedItem) {
+    var modifiersClone = (0, _toConsumableArray2.default)(appliedModifiers);
+    var modifierIdx = modifiersClone.findIndex(function (item) {
+      return item.id === id;
+    });
+    modifiersClone[modifierIdx] = (0, _defineProperty2.default)({
+      id: id
+    }, modifiers.id, selectedItem);
+    setAppliedModifiers(modifiersClone);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-wrapper")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListBody, null, filteredItems.map(function (item) {
-    var _modifiers$options;
-
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListRow, {
       key: item.id,
       className: (0, _classnames.default)("".concat(blockClass, "-row"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
@@ -182,22 +196,29 @@ var AddSelectList = function AddSelectList(_ref) {
       className: "".concat(blockClass, "-cell-title")
     }, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(blockClass, "-cell-subtitle")
-    }, item.subtitle)))), (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, {
+    }, item.subtitle)))), hasModifiers && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, {
       id: "".concat(item.id, "-modifier"),
       type: "inline",
-      items: modifiers === null || modifiers === void 0 ? void 0 : modifiers.options,
+      items: modifiers.options,
       light: true,
-      label: modifiers === null || modifiers === void 0 ? void 0 : modifiers.label,
+      label: modifiers.label,
       disabled: !isSelected(item.id),
-      className: "".concat(blockClass, "-dropdown ").concat(blockClass, "-hidden-hover")
+      className: "".concat(blockClass, "-dropdown ").concat(blockClass, "-hidden-hover"),
+      initialSelectedItem: item[modifiers.id],
+      onChange: function onChange(_ref5) {
+        var selectedItem = _ref5.selectedItem;
+        return modifierHandler(item.id, selectedItem);
+      }
     })) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
       className: "".concat(blockClass, "-radio"),
       name: "add-select-selections",
       id: item.id,
       value: item.value,
       labelText: item.title,
-      onChange: handleSingleSelection,
-      selected: item.value === singleSelection
+      onChange: function onChange() {
+        return handleSingleSelection(item.id);
+      },
+      selected: item.id === singleSelection
     }), item.children && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
       renderIcon: _iconsReact.ChevronRight16,
       iconDescription: navIconDescription,
@@ -228,6 +249,7 @@ var AddSelectList = function AddSelectList(_ref) {
 
 exports.AddSelectList = AddSelectList;
 AddSelectList.propTypes = {
+  appliedModifiers: _propTypes.default.array,
   filteredItems: _propTypes.default.array,
   metaIconDescription: _propTypes.default.string,
   modifiers: _propTypes.default.object,
@@ -235,6 +257,7 @@ AddSelectList.propTypes = {
   multiSelection: _propTypes.default.array,
   navIconDescription: _propTypes.default.string,
   path: _propTypes.default.array,
+  setAppliedModifiers: _propTypes.default.func,
   setDisplayMetaPanel: _propTypes.default.func,
   setMultiSelection: _propTypes.default.func,
   setPath: _propTypes.default.func,