@carbon/ibm-products 1.18.2 → 1.20.0

package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js

@@ -10,19 +10,37 @@ import { deepCloneObject } from '../../../global/js/utils/deepCloneObject';
 import uuidv4 from '../../../global/js/utils/uuidv4';
 import { removeCellSelections } from './removeCellSelections';
 import { checkActiveHeaderCell } from './checkActiveHeaderCell';
-export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref) {
-  var type = _ref.type,
-      activeCellCoordinates = _ref.activeCellCoordinates,
-      rows = _ref.rows,
-      columns = _ref.columns,
-      setActiveCellCoordinates = _ref.setActiveCellCoordinates,
-      setCurrentMatcher = _ref.setCurrentMatcher,
-      setSelectionAreas = _ref.setSelectionAreas,
-      spreadsheetRef = _ref.spreadsheetRef,
-      index = _ref.index,
-      isKeyboard = _ref.isKeyboard,
-      setSelectionAreaData = _ref.setSelectionAreaData,
-      isHoldingCommandKey = _ref.isHoldingCommandKey;
+
+var getSelectedItemIndexList = function getSelectedItemIndexList(_ref) {
+  var indexList = _ref.indexList,
+      newIndex = _ref.newIndex,
+      activeCellIndex = _ref.activeCellIndex;
+  var lowestIndex = newIndex > activeCellIndex ? activeCellIndex : Math.min.apply(Math, _toConsumableArray(indexList).concat([newIndex]));
+  var highestIndex = newIndex < activeCellIndex ? activeCellIndex : Math.max.apply(Math, _toConsumableArray(indexList).concat([newIndex]));
+  var newIndexList = [];
+
+  for (var i = lowestIndex; i <= highestIndex; i++) {
+    newIndexList.push(i);
+  }
+
+  return [].concat(newIndexList);
+};
+
+export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref2) {
+  var type = _ref2.type,
+      activeCellCoordinates = _ref2.activeCellCoordinates,
+      rows = _ref2.rows,
+      columns = _ref2.columns,
+      currentMatcher = _ref2.currentMatcher,
+      setActiveCellCoordinates = _ref2.setActiveCellCoordinates,
+      setCurrentMatcher = _ref2.setCurrentMatcher,
+      setSelectionAreas = _ref2.setSelectionAreas,
+      spreadsheetRef = _ref2.spreadsheetRef,
+      index = _ref2.index,
+      isKeyboard = _ref2.isKeyboard,
+      setSelectionAreaData = _ref2.setSelectionAreaData,
+      isHoldingCommandKey = _ref2.isHoldingCommandKey,
+      isHoldingShiftKey = _ref2.isHoldingShiftKey;
 
   if (!isHoldingCommandKey) {
     setSelectionAreaData([]);
@@ -43,11 +61,15 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
     column: type === 'column' ? columnValue : columns.length - 1
   };
   var tempMatcher = uuidv4();
-  setActiveCellCoordinates({
-    row: type === 'column' ? 0 : rowValue,
-    column: type === 'column' ? columnValue : 0
-  });
-  setCurrentMatcher(tempMatcher);
+
+  if (!isHoldingShiftKey) {
+    setActiveCellCoordinates({
+      row: type === 'column' ? 0 : rowValue,
+      column: type === 'column' ? columnValue : 0
+    });
+    setCurrentMatcher(tempMatcher);
+  }
+
   var newSelectionArea = {
     point1: point1,
     point2: point2,
@@ -55,7 +77,7 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
     matcher: tempMatcher,
     header: {
       type: type,
-      index: type === 'column' ? columnValue : rowValue
+      selectedIndexList: [type === 'column' ? columnValue : rowValue]
     }
   };
   setSelectionAreas(function (prev) {
@@ -81,6 +103,78 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
       return [].concat(_toConsumableArray(prev), [newSelectionArea]);
     }
 
+    if (isHoldingShiftKey) {
+      var _selectionAreasClone$, _selectionAreasClone$2;
+
+      var _selectionsFromHeaderCell = selectionsClone.filter(function (item) {
+        var _item$header3;
+
+        return (_item$header3 = item.header) === null || _item$header3 === void 0 ? void 0 : _item$header3.type;
+      }); // Shift/click behavior should not occur unless there are activeCellCoordinates set
+
+
+      var currentSelectionArea = _selectionsFromHeaderCell.filter(function (item) {
+        return item.matcher === currentMatcher;
+      })[0];
+
+      var originalAreaIndex = Math.max(currentSelectionArea === null || currentSelectionArea === void 0 ? void 0 : currentSelectionArea.point1[type], currentSelectionArea === null || currentSelectionArea === void 0 ? void 0 : currentSelectionArea.point2[type], activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
+      var newIndexValue = type === 'column' ? columnValue : rowValue;
+      var newPoint = {
+        row: originalAreaIndex < newIndexValue ? rows.length - 1 : 0,
+        column: columnValue
+      };
+      var selectionAreasClone = deepCloneObject(prev);
+      var indexOfCurrentArea = selectionAreasClone.findIndex(function (item) {
+        return item.matcher === currentMatcher;
+      });
+      var newIndexList = getSelectedItemIndexList({
+        indexList: ((_selectionAreasClone$ = selectionAreasClone[indexOfCurrentArea]) === null || _selectionAreasClone$ === void 0 ? void 0 : (_selectionAreasClone$2 = _selectionAreasClone$.header) === null || _selectionAreasClone$2 === void 0 ? void 0 : _selectionAreasClone$2.selectedIndexList) || [type === 'column' ? columnValue : rowValue],
+        newIndex: newIndexValue,
+        activeCellIndex: activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]
+      });
+
+      var setPoint1 = function setPoint1(value) {
+        return value < newIndexValue ? {
+          row: type === 'column' ? 0 : Math.min.apply(Math, _toConsumableArray(newIndexList)),
+          column: type === 'column' ? Math.min.apply(Math, _toConsumableArray(newIndexList)) : 0
+        } : newPoint;
+      };
+
+      var setPoint2 = function setPoint2(value) {
+        return value < newIndexValue ? newPoint : {
+          row: type === 'column' ? rows.length - 1 : Math.max.apply(Math, _toConsumableArray(newIndexList)),
+          column: type === 'column' ? Math.max.apply(Math, _toConsumableArray(newIndexList)) : columns.length - 1
+        };
+      }; // If there is no active cell set and shift is clicked on a header cell
+
+
+      if (!activeCellCoordinates || typeof activeCellCoordinates === 'undefined') {
+        // Need to set positioning of active cell because it doesn't exist yet
+        setCurrentMatcher(tempMatcher);
+        var firstSelectionArea = {
+          point1: setPoint1(type === 'column' ? columnValue : rowValue),
+          point2: setPoint2(type === 'column' ? columnValue : rowValue),
+          areaCreated: false,
+          matcher: tempMatcher,
+          header: {
+            type: type,
+            selectedIndexList: [type === 'column' ? columnValue : rowValue]
+          }
+        };
+        setActiveCellCoordinates({
+          row: type === 'column' ? 0 : rowValue,
+          column: type === 'column' ? columnValue : 0
+        });
+        return [firstSelectionArea];
+      }
+
+      selectionAreasClone[indexOfCurrentArea].point1 = setPoint1(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
+      selectionAreasClone[indexOfCurrentArea].point2 = setPoint2(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates[type]);
+      selectionAreasClone[indexOfCurrentArea].areaCreated = false;
+      selectionAreasClone[indexOfCurrentArea].header.selectedIndexList = newIndexList;
+      return selectionAreasClone;
+    }
+
     return [newSelectionArea];
   });
 };

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,
@@ -55,7 +58,6 @@ var DraggableElement = function DraggableElement(_ref) {
       var dragIndex = item.index;
       var hoverIndex = index; // Don't replace items with themselves
 
-      // Don't replace items with themselves
       if (dragIndex === hoverIndex || disabled) {
         return;
       }
@@ -67,12 +69,6 @@ var DraggableElement = function DraggableElement(_ref) {
       // to avoid expensive index searches.
       // eslint-disable-next-line no-param-reassign
 
-      // Time to actually perform the action
-      // Note: we're mutating the monitor item here!
-      // Generally it's better to avoid mutations,
-      // but it's good here for the sake of performance
-      // to avoid expensive index searches.
-      // eslint-disable-next-line no-param-reassign
       item.index = hoverIndex;
     }
   }),
@@ -120,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",
@@ -155,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/global/js/hooks/useWindowResize.js

@@ -1,11 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _typeof from "@babel/runtime/helpers/typeof";
 
 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; }
 
 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) { _defineProperty(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; }
 
 import { useRef, useLayoutEffect } from 'react';
-var windowExists = typeof window !== "undefined";
+var windowExists = (typeof window === "undefined" ? "undefined" : _typeof(window)) !== "undefined";
 
 var getWindowSize = function getWindowSize() {
   if (!windowExists) {

package/es/global/js/hooks/useWindowScroll.js

@@ -1,6 +1,7 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import { useRef, useLayoutEffect } from 'react';
 import { scrollableAncestor } from '../utils/scrollableAncestor';
-var windowExists = typeof window !== "undefined";
+var windowExists = (typeof window === "undefined" ? "undefined" : _typeof(window)) !== "undefined";
 
 var useTargetScroll = function useTargetScroll(target, effect, deps, throttleInterval) {
   var scrollPosition = useRef({});

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/es/global/js/utils/scrollableAncestor.js

@@ -1,4 +1,5 @@
-var windowExists = typeof window !== "undefined"; // determine whether the target is scrollable
+import _typeof from "@babel/runtime/helpers/typeof";
+var windowExists = (typeof window === "undefined" ? "undefined" : _typeof(window)) !== "undefined"; // determine whether the target is scrollable
 
 var scrollable = function scrollable(target) {
   var style = window.getComputedStyle(target);

package/lib/components/ActionSet/ActionSet.js

@@ -148,6 +148,7 @@ ActionSet.validateActions = function (sizeFn) {
     var problems = [];
 
     if (actions > 0) {
+      // eslint-disable-next-line react/prop-types
       var size = sizeFn ? sizeFn(props) : props.size || defaults.size;
       var stacking = willStack(size, actions);
 

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/AddSelectFilter.js

@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _iconsReact = require("@carbon/icons-react");
@@ -79,6 +81,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
 
 
   var applyFilters = function applyFilters() {
+    setOpen(false);
     handleFilter(filters);
   };
 
@@ -104,6 +107,8 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
   };
 
   var showFilter = multi && (filterOpts === null || filterOpts === void 0 ? void 0 : filterOpts.length) > 0;
+  var filterBtnClassnames = (0, _classnames.default)("".concat(blockClass, "-toggle"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-toggle--open"), open));
+  var dirtyInput = Object.keys(filters).length > 0;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-search")
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
@@ -120,7 +125,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
       return setOpen(!open);
     },
     iconDescription: iconDescription,
-    className: "".concat(blockClass, "-toggle"),
+    className: filterBtnClassnames,
     size: "md"
   }), open && /*#__PURE__*/_react.default.createElement("div", {
     className: blockClass
@@ -146,11 +151,13 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     kind: "secondary",
     onClick: resetFilters,
-    className: "".concat(blockClass, "-button")
+    className: "".concat(blockClass, "-button"),
+    disabled: !dirtyInput
   }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     kind: "primary",
     onClick: applyFilters,
-    className: "".concat(blockClass, "-button")
+    className: "".concat(blockClass, "-button"),
+    disabled: !dirtyInput && !hasFiltersApplied
   }, primaryButtonText)))), hasFiltersApplied && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-applied")
   }, Object.keys(appliedFilters).map(function (filterType) {

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,