@carbon/ibm-products 2.0.0-rc.8 → 2.0.0-rc.9

package/lib/components/AddSelect/AddSelectList.js

@@ -28,7 +28,7 @@ var _settings = require("../../settings");
 var _UserProfileImage = require("../UserProfileImage");
 
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -94,11 +94,12 @@ var AddSelectList = function AddSelectList(_ref) {
     var src = _ref4.src,
         alt = _ref4.alt,
         icon = _ref4.icon,
-        backgroundColor = _ref4.backgroundColor;
+        backgroundColor = _ref4.backgroundColor,
+        theme = _ref4.theme;
     return {
       className: "".concat(blockClass, "-cell-avatar"),
       size: 'lg',
-      theme: 'light',
+      theme: theme,
       image: src,
       imageDescription: alt,
       icon: icon,
@@ -142,7 +143,7 @@ var AddSelectList = function AddSelectList(_ref) {
 
     return /*#__PURE__*/_react.default.createElement(_react2.StructuredListRow, {
       key: item.id,
-      className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row-selected"), isSelected(item.id)), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row-meta-selected"), isInMetaPanel(item.id)), _cx2)),
+      className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row--selected"), isSelected(item.id)), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx2)),
       onClick: function onClick(evt) {
         return metaPanelHandler(item, evt);
       }

package/lib/components/AddSelect/AddSelectMetaPanel.js

@@ -25,6 +25,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 var blockClass = "".concat(_settings.pkg.prefix, "--add-select__meta-panel");
 var componentName = 'AddSelectMetaPanel';
 

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -31,6 +31,7 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
   var appliedModifiers = _ref.appliedModifiers,
       closeIconDescription = _ref.closeIconDescription,
       displayMetalPanel = _ref.displayMetalPanel,
+      illustrationTheme = _ref.illustrationTheme,
       influencerTitle = _ref.influencerTitle,
       items = _ref.items,
       metaPanelTitle = _ref.metaPanelTitle,
@@ -116,7 +117,8 @@ var AddSelectSidebar = function AddSelectSidebar(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
     subtitle: noSelectionDescription,
     title: noSelectionTitle,
-    size: "sm"
+    size: "sm",
+    illustrationTheme: illustrationTheme
   })));
 };
 
@@ -125,6 +127,7 @@ AddSelectSidebar.propTypes = {
   appliedModifiers: _propTypes.default.array,
   closeIconDescription: _propTypes.default.string,
   displayMetalPanel: _propTypes.default.object,
+  illustrationTheme: _propTypes.default.oneOf(['light', 'dark']),
   influencerTitle: _propTypes.default.string,
   items: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]),
   metaPanelTitle: _propTypes.default.string,

package/lib/components/AddSelect/AddSelectSort.js

@@ -22,7 +22,7 @@ var _icons = require("@carbon/react/icons");
 var _settings = require("../../settings");
 
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

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

@@ -17,6 +17,13 @@ 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; }
 
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
 /**
  * to be able to more easily and efficiently the child entries the data needs to be
  * normalized. this function recursively goes through the data array to build a single

package/lib/components/AddSelect/hooks/useItemSort.js

@@ -11,6 +11,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 var useItemSort = function useItemSort() {
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/lib/components/AddSelect/hooks/useParentSelect.js

@@ -11,6 +11,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 var useParentSelect = function useParentSelect() {
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/lib/components/AddSelect/hooks/usePath.js

@@ -64,10 +64,18 @@ var usePath = function usePath() {
     setPath((0, _toConsumableArray2.default)(pathCopy));
   };
 
+  var resetPath = function resetPath() {
+    setPath([{
+      id: 'base_of_path',
+      title: itemsLabel
+    }]);
+  };
+
   return {
     path: path,
     setPath: handler,
-    pathOnclick: pathClickHandler
+    pathOnclick: pathClickHandler,
+    resetPath: resetPath
   };
 };
 

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -220,7 +220,10 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__modal"),
     size: "sm",
     open: modalIsOpen,
-    "aria-label": modalTitle
+    "aria-label": modalTitle,
+    onClose: function onClose() {
+      setModalIsOpen(false);
+    }
   }, /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     title: modalTitle
   }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, modalDescription)), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -19,6 +19,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@carbon/react");
 
+var _layout = require("@carbon/layout");
+
 var _commonColumnIds = require("../common-column-ids");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -37,25 +39,63 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var TableRow = _react2.DataTable.TableRow,
-    TableCell = _react2.DataTable.TableCell; // eslint-disable-next-line react/prop-types
+    TableCell = _react2.DataTable.TableCell;
+var rowHeights = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64
+}; // eslint-disable-next-line react/prop-types
 
 var DatagridRow = function DatagridRow(datagridState) {
   var _cx;
 
-  var row = datagridState.row;
+  var row = datagridState.row,
+      rowSize = datagridState.rowSize,
+      withNestedRows = datagridState.withNestedRows;
 
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
       state = _useContext.state;
 
   var activeCellId = state.activeCellId;
   var activeCellObject = activeCellId && (0, _getCellIdAsObject.getCellIdAsObject)(activeCellId);
+
+  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
+    var isExpanded = _ref.isExpanded,
+        subRows = _ref.subRows;
+    var size = 0;
+
+    if (isExpanded && subRows) {
+      size += subRows.length;
+      subRows.forEach(function (child) {
+        size += getVisibleNestedRowCount(child);
+      });
+    }
+
+    return size;
+  };
+
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
     className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
   }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {
+      var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
+
+      if (!withNestedRows) {
+        return;
+      }
+
+      var subRowCount = getVisibleNestedRowCount(row);
+      var totalNestedRowIndicatorHeight = (0, _layout.px)(subRowCount * rowHeights[rowSize]);
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
       hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+      var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
+      var rowSizeValue = rowSize || 'lg';
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeights[rowSizeValue]));
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), (0, _layout.px)((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
     },
     onMouseLeave: function onMouseLeave(event) {
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));

package/lib/components/Datagrid/useNestedRows.js

@@ -7,8 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _settings = require("../../settings");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpander"));
 
 /*
@@ -25,9 +29,11 @@ var useNestedRows = function useNestedRows(hooks) {
   var marginLeft = 24;
 
   var getRowProps = function getRowProps(props, _ref) {
+    var _cx;
+
     var row = _ref.row;
     return [props, {
-      className: row.depth > 0 ? "".concat(blockClass, "__carbon-nested-row") : ''
+      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _cx))
     }];
   };
 
@@ -36,7 +42,7 @@ var useNestedRows = function useNestedRows(hooks) {
     return [props, {
       style: {
         marginLeft: "".concat(row.depth > 0 ? marginLeft : 0, "px"),
-        paddingLeft: "".concat(row.depth > 1 ? marginLeft * (row.depth - 1) + marginLeft : row.depth === 1 ? marginLeft : 0, "px"),
+        paddingLeft: "".concat(row.depth === 2 ? marginLeft * (row.depth - 1) + marginLeft - 8 : row.depth > 2 ? marginLeft * (row.depth - 1) + marginLeft : row.depth === 1 ? marginLeft - 16 : 0, "px"),
         maxWidth: "calc(100% - ".concat(marginLeft * row.depth, "px)")
       }
     }];
@@ -56,9 +62,16 @@ var useNestedRows = function useNestedRows(hooks) {
     }];
   };
 
+  var useInstance = function useInstance(instance) {
+    Object.assign(instance, {
+      withNestedRows: true
+    });
+  };
+
   hooks.getRowProps.push(getRowProps);
   hooks.getRowProps.push(getRowStyles);
   hooks.getCellProps.push(getCellProps);
+  hooks.useInstance.push(useInstance);
 };
 
 var _default = useNestedRows;

package/lib/components/Datagrid/utils/DatagridActions.js

@@ -2,14 +2,16 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DatagridActions = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@carbon/react");
 
@@ -21,6 +23,10 @@ var _settings = require("../../../settings");
 
 var _ButtonMenu = require("../../ButtonMenu");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * Copyright IBM Corp. 2020, 2022
  *
@@ -55,23 +61,42 @@ var DatagridActions = function DatagridActions(datagridState) {
   var searchForAColumn = 'Search';
   var isNothingSelected = selectedFlatRows.length === 0;
   var style = {
-    'button:nth-child(1) > span:nth-child(1)': {
+    'button:nthChild(1) > span:nthChild(1)': {
       bottom: '-37px'
     }
   };
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      modalOpen = _useState2[0],
+      setModalOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(window.innerWidth),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      size = _useState4[0],
+      setSize = _useState4[1];
+
+  (0, _react.useLayoutEffect)(function () {
+    function updateSize() {
+      setSize(window.innerWidth);
+    }
+
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
+  var mobileToolbar = size < 672 ? true : false;
+  var items = ['Option 1', 'Option 2', 'Option 3'];
   return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react.default.createElement(TableToolbarContent, {
     size: "sm"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     style: style
   }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Download, (0, _extends2.default)({
-        size: 16
-      }, props));
-    },
+    renderIcon: _icons.Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
   })), /*#__PURE__*/_react.default.createElement("div", {
@@ -80,11 +105,7 @@ var DatagridActions = function DatagridActions(datagridState) {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
-        size: 16
-      }, props));
-    },
+    renderIcon: _icons.Filter,
     iconDescription: 'Left panel',
     onClick: leftPanelClick
   })), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
@@ -92,30 +113,49 @@ var DatagridActions = function DatagridActions(datagridState) {
     className: "".concat(blockClass, "__toolbar-divider")
   }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Add, (0, _extends2.default)({
-        size: 16
-      }, props));
-    },
+    renderIcon: _icons.Add,
     iconDescription: 'Action'
   }, "Ghost button")), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null))) : /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    ariaLabel: "Tools",
+    size: "md",
+    flipped: true
+  }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Filter",
+    hasDivider: true,
+    requireTitle: true,
+    onClick: function onClick() {
+      return setModalOpen(true);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Export",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Settings",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Import items",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Create",
+    hasDivider: true,
+    requireTitle: true
+  }))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
-        size: 16
-      }, props));
-    },
+    renderIcon: _icons.Filter,
     iconDescription: 'Left panel',
     onClick: leftPanelClick
   }), /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
-    size: "lg",
+    size: "xl",
     id: "columnSearch",
     persistent: true,
-    placeholder: searchForAColumn,
+    placeHolderText: searchForAColumn,
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
@@ -125,11 +165,7 @@ var DatagridActions = function DatagridActions(datagridState) {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Restart, (0, _extends2.default)({
-        size: 16
-      }, props));
-    },
+    renderIcon: _icons.Restart,
     iconDescription: 'Refresh',
     onClick: refreshColumns
   })), /*#__PURE__*/_react.default.createElement("div", {
@@ -138,23 +174,14 @@ var DatagridActions = function DatagridActions(datagridState) {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Download, (0, _extends2.default)({
-        size: 16
-      }, props));
-    },
+    renderIcon: _icons.Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
   })), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
     style: style
   }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
-    menuAriaLabel: "Primary action button menu",
     label: "Primary button",
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Add, (0, _extends2.default)({
-        size: 16
-      }, props));
-    }
+    renderIcon: _icons.Add
   }, /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
     itemText: "Option 1",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 1")
@@ -164,7 +191,70 @@ var DatagridActions = function DatagridActions(datagridState) {
   }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
     itemText: "Option 3",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
-  })))));
+  })))) : /*#__PURE__*/_react.default.createElement(TableToolbarContent, null, /*#__PURE__*/_react.default.createElement(TableToolbarSearch, {
+    size: "xl",
+    id: "columnSearch",
+    persistent: true,
+    placeHolderText: searchForAColumn,
+    onChange: function onChange(e) {
+      return setGlobalFilter(e.target.value);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    ariaLabel: "Tools",
+    size: "lg",
+    flipped: true,
+    renderIcon: _icons.ChevronDown,
+    className: "".concat(blockClass, "__toolbar-menu__trigger"),
+    menuOptionsClass: "".concat(blockClass, "__toolbar-options")
+  }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Filter",
+    hasDivider: true,
+    requireTitle: true,
+    onClick: function onClick() {
+      return setModalOpen(true);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Export",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Settings",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Import items",
+    hasDivider: true,
+    requireTitle: true
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+    itemText: "Create",
+    hasDivider: true,
+    requireTitle: true
+  })), modalOpen && /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, {
+    size: "lg",
+    open: modalOpen && modalOpen,
+    onClose: function onClose() {
+      return setModalOpen(false);
+    },
+    className: "".concat(blockClass, "__mobile-toolbar-modal")
+  }, /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, null, /*#__PURE__*/_react.default.createElement("h4", null, "Filters")), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter1"
+  }), /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter2"
+  }), /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+    initialSelectedItem: items[2],
+    items: items,
+    titleText: "Label",
+    id: "filter3"
+  })), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
+    primaryButtonText: "Apply",
+    secondaryButtonText: "Cancel"
+  }))));
 };
 
 exports.DatagridActions = DatagridActions;

package/lib/components/MultiAddSelect/MultiAddSelect.js

@@ -25,6 +25,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 var componentName = 'MultiAddSelect';
 var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_AddSelect.AddSelect, (0, _extends2.default)({}, props, {
@@ -86,6 +92,11 @@ MultiAddSelect.propTypes = {
    */
   globalSearchPlaceholder: _propTypes.default.string,
 
+  /**
+   * the theme for the empty state illustration
+   */
+  illustrationTheme: _propTypes.default.oneOf(['light', 'dark']),
+
   /**
    * title that displays in the sidebar / influencer
    */
@@ -106,7 +117,8 @@ MultiAddSelect.propTypes = {
       avatar: _propTypes.default.shape({
         alt: _propTypes.default.string,
         icon: _propTypes.default.func,
-        src: _propTypes.default.string
+        src: _propTypes.default.string,
+        theme: _propTypes.default.oneOf(['light', 'dark'])
       }),
       children: _propTypes.default.object,
       icon: _propTypes.default.func,
@@ -167,15 +179,10 @@ MultiAddSelect.propTypes = {
    */
   open: _propTypes.default.bool,
 
-  /**
-   * description for the remove item icon
-   */
-  removeIconDescription: _propTypes.default.string,
-
   /**
    * text that displays when displaying filtered items
    */
-  searchResultsLabel: _propTypes.default.string,
+  searchResultsTitle: _propTypes.default.string,
 
   /**
    * header text

package/lib/components/SingleAddSelect/SingleAddSelect.js

@@ -27,6 +27,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 var componentName = 'SingleAddSelect';
 var SingleAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // remove multi add select specific props

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.8",
+  "version": "2.0.0-rc.9",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "84c6ea6511d0f4502aa315888ecb4ff108ec97f9"
+  "gitHead": "c3b38e1f910de3ae5691557fc340ab43cccf1108"
 }