@carbon/ibm-products 1.19.0 → 1.20.1

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

@@ -18,13 +18,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * LICENSE file in the root directory of this source tree.
  */
 import { ChevronDown16, ChevronUp16 } from '@carbon/icons-react';
-import { Button, OverflowMenuItem } from 'carbon-components-react';
-import { OverflowMenu } from 'carbon-components-react/lib/components/OverflowMenu/OverflowMenu';
-import setupGetInstanceId from 'carbon-components-react/lib/tools/setupGetInstanceId';
+import { Button, OverflowMenuItem, OverflowMenu } from 'carbon-components-react';
 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.
@@ -36,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/DraggableElement.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 // @flow
 
@@ -13,10 +14,12 @@ import PropTypes from 'prop-types';
 import { Draggable16 } from '@carbon/icons-react';
 import { useDrag, useDrop } from 'react-dnd';
 import cx from 'classnames';
+import { pkg } from '../../../settings';
 var useEffect = React.useEffect,
     useRef = React.useRef,
     useState = React.useState;
-var DRAG_TYPE = 'wkc-shared-ui-draggable-element';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
 
 var DraggableElement = function DraggableElement(_ref) {
   var id = _ref.id,
@@ -113,14 +116,10 @@ var DraggableElement = function DraggableElement(_ref) {
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: cx({
       disabled: disabled
-    }, 'wkc-draggable-handleStyle')
+    }, "".concat(blockClass, "__draggable-handleStyle"))
   }, /*#__PURE__*/React.createElement(Draggable16, null)), children);
   return /*#__PURE__*/React.createElement("li", {
-    className: cx({
-      'wkc-draggable-handleHolder-isOver': isOver && !disabled
-    }, {
-      'wkc-draggable-handleHolder--grabbed': isGrabbed
-    }, 'wkc-draggable-handleHolder'),
+    className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
     ref: ref,
     "aria-selected": isFocused,
     role: "option",
@@ -148,17 +147,15 @@ var DraggableElement = function DraggableElement(_ref) {
       setIsFocusedOnItem(e.currentTarget === e.target);
     }
   }, /*#__PURE__*/React.createElement("span", {
-    className: "wkc-shared-ui--assistive-text"
+    className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, ariaLabel), isDragging && !isOver ? /*#__PURE__*/React.createElement("div", {
     ref: preview,
-    className: "wkc-draggable-handleHolder-droppable"
+    className: "${blockClass}__draggable-handleHolder-droppable"
   }, content) : /*#__PURE__*/React.createElement("div", {
     ref: drag,
     "aria-hidden": isFocused && isFocusedOnItem // if focus on li, hide the children from aria
     ,
-    className: cx({
-      'wkc-draggable-handleStyle': !disabled
-    }, 'wkc-draggable-handleHolder-droppable')
+    className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
   }, (!isOver || disabled) && content));
 };
 

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,

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -27,11 +27,15 @@ var _excluded = ["meta", "icon", "avatar"];
 var componentName = 'AddSelectSidebar';
 
 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,
@@ -39,6 +43,8 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
       setDisplayMetaPanel = _ref.setDisplayMetaPanel,
       setMultiSelection = _ref.setMultiSelection;
   var blockClass = "".concat(_settings.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) {
@@ -61,24 +67,23 @@ 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.default.createElement("div", {
       className: "".concat(blockClass, "-accordion-title")
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-selected-item")
     }, /*#__PURE__*/_react.default.createElement("p", {
       className: "".concat(blockClass, "-selected-item-title")
-    }, title), /*#__PURE__*/_react.default.createElement("p", {
+    }, item.title), /*#__PURE__*/_react.default.createElement("p", {
       className: "".concat(blockClass, "-selected-item-subtitle")
-    }, subtitle)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, item.subtitle)), hasModifiers && /*#__PURE__*/_react.default.createElement("div", null, appliedModifiers.find(function (modifier) {
+      return modifier.id === item.id;
+    })[modifiers.id]), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
       renderIcon: _iconsReact.SubtractAlt32,
       iconDescription: removeIconDescription,
       hasIconOnly: true,
       onClick: function onClick() {
-        return handleItemRemove(id);
+        return handleItemRemove(item.id);
       },
       kind: "ghost",
       className: "".concat(blockClass, "-item-remove-button"),
@@ -104,7 +109,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
   }, influencerTitle), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
     type: "gray",
     size: "sm"
-  }, multiSelection.length)), multiSelection.length > 0 ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Accordion, {
+  }, multiSelection.length)), hasSelections ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Accordion, {
     align: "start"
   }, sidebarItems.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.AccordionItem, {
@@ -131,11 +136,13 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
 
 exports.AddSelectSidebar = AddSelectSidebar;
 AddSelectSidebar.propTypes = {
+  appliedModifiers: _propTypes.default.array,
   closeIconDescription: _propTypes.default.string,
   displayMetalPanel: _propTypes.default.object,
   influencerTitle: _propTypes.default.string,
   items: _propTypes.default.array,
   metaPanelTitle: _propTypes.default.string,
+  modifiers: _propTypes.default.object,
   multiSelection: _propTypes.default.array,
   noSelectionDescription: _propTypes.default.string,
   noSelectionTitle: _propTypes.default.string,

package/lib/components/ComboButton/ComboButton.js

@@ -23,14 +23,12 @@ var _iconsReact = require("@carbon/icons-react");
 
 var _carbonComponentsReact = require("carbon-components-react");
 
-var _OverflowMenu = require("carbon-components-react/lib/components/OverflowMenu/OverflowMenu");
-
-var _setupGetInstanceId = _interopRequireDefault(require("carbon-components-react/lib/tools/setupGetInstanceId"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = require("prop-types");
 
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _excluded = ["children", "className", "overflowMenu"],
@@ -45,7 +43,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var getInstanceId = (0, _setupGetInstanceId.default)();
 var blockClass = 'security--combo-button';
 /**
  * The combo button consolidates similar actions, while exposing the most commonly used one.
@@ -57,7 +54,7 @@ var ComboButton = function ComboButton(_ref) {
       overflowMenu = _ref.overflowMenu,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _useRef = (0, _react.useRef)(getInstanceId()),
+  var _useRef = (0, _react.useRef)((0, _uuidv.default)()),
       instanceId = _useRef.current;
 
   var _useState = (0, _react.useState)(false),
@@ -83,7 +80,7 @@ var ComboButton = function ComboButton(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className),
     "data-floating-menu-container": true
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, primaryAction), restActions.length > 0 && /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, (0, _extends2.default)({}, overflowMenu, {
+  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, primaryAction), restActions.length > 0 && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, (0, _extends2.default)({}, overflowMenu, {
     className: "".concat(blockClass, "__overflow-menu"),
     menuOptionsClass: "".concat(blockClass, "__overflow-menu__list"),
     onClick: function onClick() {
@@ -121,5 +118,5 @@ ComboButton.propTypes = {
   className: _propTypes.string,
 
   /** Provide the [props of the `OverflowMenu`](https://react.carbondesignsystem.com/?path=/docs/overflowmenu) */
-  overflowMenu: (0, _propTypes.shape)(_OverflowMenu.OverflowMenu.propTypes)
+  overflowMenu: (0, _propTypes.shape)(_carbonComponentsReact.OverflowMenu.propTypes)
 };

package/lib/components/CreateSidePanel/CreateSidePanel.js

@@ -27,8 +27,6 @@ var _carbonComponentsReact = require("carbon-components-react");
 
 var _SidePanel = require("../SidePanel");
 
-var _ActionSet = require("../ActionSet");
-
 var _excluded = ["className", "children", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "selectorPageContent", "selectorPrimaryFocus", "subtitle", "title"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -37,7 +35,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--create-side-panel");
-var sidePanelBlockClass = "".concat(_settings.pkg.prefix, "--side-panel");
 var componentName = 'CreateSidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -74,7 +71,6 @@ var CreateSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     onClick: onRequestClose,
     kind: 'secondary'
   }];
-  var actionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), "".concat(sidePanelBlockClass, "__actions-container")]);
   return selectorPageContent && /*#__PURE__*/_react.default.createElement(_SidePanel.SidePanel, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -88,18 +84,15 @@ var CreateSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     slideIn: true,
     animateTitle: false,
     className: (0, _classnames.default)(blockClass, className),
-    size: "md"
+    size: "md",
+    actions: actions
   }), /*#__PURE__*/_react.default.createElement("h3", {
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
     className: "".concat(blockClass, "__form")
-  }, children, /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
-    actions: actions,
-    className: actionContainerClassNames,
-    size: "md"
-  })));
+  }, children));
 });
 
 exports.CreateSidePanel = CreateSidePanel;