@carbon/ibm-products 2.1.3 → 2.3.0

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -18,7 +18,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 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. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -42,7 +42,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   var selectedRowIds = datagridState.state.selectedRowIds,
     toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
     toolbarBatchActions = datagridState.toolbarBatchActions,
-    setGlobalFilter = datagridState.setGlobalFilter;
+    setGlobalFilter = datagridState.setGlobalFilter,
+    rows = datagridState.rows;
   var totalSelected = (_Object$keys = Object.keys(selectedRowIds || {})) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length;
 
   // Get initial width of batch actions container,
@@ -63,6 +64,19 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       setDisplayAllInMenu(false);
     }
   }, [width, ref, initialListWidth]);
+  var getSelectedRowData = function getSelectedRowData() {
+    var selectedRowIndexes = Object.keys(selectedRowIds);
+    var selectedRowData = selectedRowIndexes && selectedRowIndexes.length ? selectedRowIndexes.map(function (rowIndex) {
+      var filteredRow = rows.filter(function (row) {
+        return row.index === parseInt(rowIndex);
+      });
+      if (filteredRow.length) {
+        return filteredRow[0];
+      }
+      return [];
+    }) : [];
+    return selectedRowData;
+  };
 
   // Render batch actions in ButtonMenu
   var renderBatchActionOverflow = function renderBatchActionOverflow() {
@@ -85,8 +99,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
           return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
             key: "".concat(batchAction.label, "-").concat(index),
             itemText: batchAction.label,
-            onClick: function onClick() {
-              batchAction.onClick();
+            onClick: function onClick(event) {
+              batchAction.onClick(getSelectedRowData(), event);
               if (batchAction.type === 'select_all') {
                 toggleAllRowsSelected(true);
               }
@@ -98,8 +112,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
         key: "".concat(batchAction.label, "-").concat(index),
         itemText: batchAction.label,
-        onClick: function onClick() {
-          batchAction.onClick();
+        onClick: function onClick(event) {
+          batchAction.onClick(getSelectedRowData(), event);
           if (batchAction.type === 'select_all') {
             toggleAllRowsSelected(true);
           }
@@ -123,8 +137,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       return /*#__PURE__*/_react.default.createElement(_react2.TableBatchAction, {
         key: "".concat(batchAction.label, "-").concat(index),
         renderIcon: batchAction.renderIcon,
-        onClick: function onClick() {
-          batchAction.onClick();
+        onClick: function onClick(event) {
+          batchAction.onClick(getSelectedRowData(), event);
           if (batchAction.type === 'select_all') {
             toggleAllRowsSelected(true);
           }

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js

@@ -4,6 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useFilterContext", {
+  enumerable: true,
+  get: function get() {
+    return _useFilterContext.default;
+  }
+});
 Object.defineProperty(exports, "useFilters", {
   enumerable: true,
   get: function get() {
@@ -24,4 +30,5 @@ Object.defineProperty(exports, "useSubscribeToEventEmitter", {
 });
 var _useSubscribeToEventEmitter = _interopRequireDefault(require("./useSubscribeToEventEmitter"));
 var _useFilters = _interopRequireDefault(require("./useFilters"));
-var _useShouldDisableButtons = _interopRequireDefault(require("./useShouldDisableButtons"));
+var _useShouldDisableButtons = _interopRequireDefault(require("./useShouldDisableButtons"));
+var _useFilterContext = _interopRequireDefault(require("./useFilterContext"));

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _FilterProvider = require("../FilterProvider");
+var _react = require("react");
+var useFilterContext = function useFilterContext() {
+  // get the context
+  var context = (0, _react.useContext)(_FilterProvider.FilterContext);
+
+  // if `undefined`, throw an error
+  if (context === undefined) {
+    throw new Error('useFilterContext was used outside of its Provider');
+  }
+  return context;
+};
+var _default = useFilterContext;
+exports.default = _default;

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -317,32 +317,16 @@ var InlineEditCell = function InlineEditCell(_ref) {
   };
   var setRenderIcon = function setRenderIcon() {
     if (type === 'text') {
-      return function (props) {
-        return /*#__PURE__*/_react.default.createElement(_icons.Edit, (0, _extends2.default)({
-          size: 16
-        }, props));
-      };
+      return _icons.Edit;
     }
     if (type === 'number') {
-      return function (props) {
-        return /*#__PURE__*/_react.default.createElement(_icons.CaretSort, (0, _extends2.default)({
-          size: 16
-        }, props));
-      };
+      return _icons.CaretSort;
     }
     if (type === 'selection') {
-      return function (props) {
-        return /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, (0, _extends2.default)({
-          size: 16
-        }, props));
-      };
+      return _icons.ChevronDown;
     }
     if (type === 'date') {
-      return function (props) {
-        return /*#__PURE__*/_react.default.createElement(_icons.Calendar, (0, _extends2.default)({
-          size: 16
-        }, props));
-      };
+      return _icons.Calendar;
     }
   };
   var renderDateCell = function renderDateCell() {

package/lib/components/Datagrid/index.js

@@ -70,6 +70,12 @@ Object.defineProperty(exports, "useExpandedRow", {
     return _useExpandedRow.default;
   }
 });
+Object.defineProperty(exports, "useFilterContext", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useFilterContext;
+  }
+});
 Object.defineProperty(exports, "useFiltering", {
   enumerable: true,
   get: function get() {
@@ -150,4 +156,5 @@ var _useColumnOrder = _interopRequireDefault(require("./useColumnOrder"));
 var _useInlineEdit = _interopRequireDefault(require("./useInlineEdit"));
 var _useEditableCell = _interopRequireDefault(require("./useEditableCell"));
 var _useFiltering = _interopRequireDefault(require("./useFiltering"));
-var _getAutoSizedColumnWidth = require("./utils/getAutoSizedColumnWidth");
+var _getAutoSizedColumnWidth = require("./utils/getAutoSizedColumnWidth");
+var _hooks = require("./Datagrid/addons/Filtering/hooks");

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

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DatagridActions = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
+var _react = require("@carbon/react");
+var _ButtonMenu = require("../../ButtonMenu");
+var _react2 = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _settings = require("../../../settings");
-var _ButtonMenu = require("../../ButtonMenu");
-var _Filtering = require("../Datagrid/addons/Filtering");
+var _hooks = require("../Datagrid/addons/Filtering/hooks");
 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; }
 /**
@@ -25,8 +25,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var DatagridActions = function DatagridActions(datagridState) {
-  var _useContext = (0, _react.useContext)(_Filtering.FilterContext),
-    setPanelOpen = _useContext.setPanelOpen;
+  var _useFilterContext = (0, _hooks.useFilterContext)(),
+    setPanelOpen = _useFilterContext.setPanelOpen;
   var selectedFlatRows = datagridState.selectedFlatRows,
     setGlobalFilter = datagridState.setGlobalFilter,
     CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
@@ -51,10 +51,10 @@ var DatagridActions = function DatagridActions(datagridState) {
     }
   };
   var renderFilterFlyout = function renderFilterFlyout() {
-    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react.default.createElement(FilterFlyout, getFilterFlyoutProps());
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react2.default.createElement(FilterFlyout, getFilterFlyoutProps());
   };
   var renderFilterPanelButton = function renderFilterPanelButton() {
-    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react2.default.createElement(_react.IconButton, {
       kind: "ghost",
       align: "bottom",
       label: filterProps.panelIconDescription,
@@ -65,17 +65,17 @@ var DatagridActions = function DatagridActions(datagridState) {
         });
       },
       disabled: data.length === 0
-    }, /*#__PURE__*/_react.default.createElement(_icons.Filter, null));
+    }, /*#__PURE__*/_react2.default.createElement(_icons.Filter, null));
   };
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     modalOpen = _useState2[0],
     setModalOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)(window.innerWidth),
+  var _useState3 = (0, _react2.useState)(window.innerWidth),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     size = _useState4[0],
     setSize = _useState4[1];
-  (0, _react.useLayoutEffect)(function () {
+  (0, _react2.useLayoutEffect)(function () {
     function updateSize() {
       setSize(window.innerWidth);
     }
@@ -86,54 +86,54 @@ var DatagridActions = function DatagridActions(datagridState) {
   }, []);
   var mobileToolbar = size < 672 ? true : false;
   var items = ['Option 1', 'Option 2', 'Option 3'];
-  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, {
+  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, {
     size: "sm"
-  }, !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement("div", {
+  }, !mobileToolbar ? /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.Button, {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
     renderIcon: _icons.Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
-  })), renderFilterFlyout(), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
+  })), renderFilterFlyout(), CustomizeColumnsButton && /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement("div", {
     style: style,
     className: "".concat(blockClass, "__toolbar-divider")
-  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.Button, {
     kind: "ghost",
     renderIcon: _icons.Add,
     iconDescription: 'Action'
-  }, "Ghost button"))) : /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+  }, "Ghost button"))) : /*#__PURE__*/_react2.default.createElement(_react.OverflowMenu, {
     "aria-label": "Tools",
     size: "md",
     flipped: true
-  }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Filter",
     hasDivider: true,
     requireTitle: true,
     onClick: function onClick() {
       return setModalOpen(true);
     }
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Export",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Settings",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Import items",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Create",
     hasDivider: true,
     requireTitle: true
-  }))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
+  }))) : !mobileToolbar ? /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement(_react.TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -141,40 +141,40 @@ var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement("div", {
+  }), renderFilterFlyout(), /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.Button, {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
     renderIcon: _icons.Restart,
     iconDescription: 'Refresh',
     onClick: refreshColumns
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.Button, {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
     renderIcon: _icons.Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
-  })), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
+  })), CustomizeColumnsButton && /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
+  }, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenu, {
     label: "Primary button",
     renderIcon: _icons.ChevronDown,
     menuOptionsClass: "".concat(blockClass, "__toolbar-options")
-  }, /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+  }, /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenuItem, {
     itemText: "Option 1",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 1")
-  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenuItem, {
     itemText: "Option 2",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 2")
-  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenuItem, {
     itemText: "Option 3",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
-  }))) : /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
+  }))) : /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement(_react.TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -182,59 +182,59 @@ var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+  }), renderFilterFlyout(), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenu, {
     "aria-label": "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, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Filter",
     hasDivider: true,
     requireTitle: true,
     onClick: function onClick() {
       return setModalOpen(true);
     }
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Export",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Settings",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Import items",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Create",
     hasDivider: true,
     requireTitle: true
-  })), modalOpen && /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, {
+  })), modalOpen && /*#__PURE__*/_react2.default.createElement(_react.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, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.ModalHeader, null, /*#__PURE__*/_react2.default.createElement("h4", null, "Filters")), /*#__PURE__*/_react2.default.createElement(_react.ModalBody, null, /*#__PURE__*/_react2.default.createElement(_react.Dropdown, {
     initialSelectedItem: items[2],
     items: items,
     titleText: "Label",
     id: "filter1"
-  }), /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.Dropdown, {
     initialSelectedItem: items[2],
     items: items,
     titleText: "Label",
     id: "filter2"
-  }), /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.Dropdown, {
     initialSelectedItem: items[2],
     items: items,
     titleText: "Label",
     id: "filter3"
-  })), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
+  })), /*#__PURE__*/_react2.default.createElement(_react.ModalFooter, {
     primaryButtonText: "Apply",
     secondaryButtonText: "Cancel"
   }))));

package/lib/components/index.js

@@ -381,6 +381,12 @@ Object.defineProperty(exports, "useExpandedRow", {
     return _Datagrid.useExpandedRow;
   }
 });
+Object.defineProperty(exports, "useFilterContext", {
+  enumerable: true,
+  get: function get() {
+    return _Datagrid.useFilterContext;
+  }
+});
 Object.defineProperty(exports, "useFiltering", {
   enumerable: true,
   get: function get() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.1.3",
+  "version": "2.3.0",
   "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": "8fb7c59793ba9325124d55ae01191adb45acff4e"
+  "gitHead": "921bd04d38883be8c837181166e3b8156210a24f"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -145,7 +145,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   border-bottom: 1px solid $layer-accent-01;
 
   .#{$block-class}__sidebar-title {
-    @include type.type-style('productive-heading-02');
+    @include type.type-style('heading-compact-02');
   }
 }
 
@@ -177,7 +177,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 }
 
 .#{$block-class} .#{$block-class}__sidebar-item-body {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 
   margin-bottom: $spacing-05;
 }
@@ -342,15 +342,15 @@ button.#{$block-class}__global-filter-toggle {
 }
 
 .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-title {
-  @include type.type-style('productive-heading-03');
+  @include type.type-style('heading-03');
 }
 
 .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-title {
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 }
 
 .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-body {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 }
 
 // overrides
@@ -391,7 +391,7 @@ button.#{$block-class}__global-filter-toggle {
 }
 
 .#{$block-class} .#{$block-class}__items-label {
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 }
 
 .#{$block-class}

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -41,13 +41,13 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 }
 
 .#{$block-class} .#{$block-class}__step-subtitle {
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 
   margin-bottom: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__step-description {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 
   margin-bottom: $spacing-06;
 }
@@ -139,7 +139,7 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 }
 
 .#{$block-class} .#{$block-class}__step-title {
-  @include type.type-style('productive-heading-04');
+  @include type.type-style('heading-04');
 
   margin-bottom: $spacing-05;
 }

package/scss/components/CreateModal/_create-modal.scss

@@ -46,20 +46,20 @@
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__title {
-  @include type.type-style('productive-heading-03');
+  @include type.type-style('heading-03');
 
   margin-bottom: $spacing-02;
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__subtitle {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 
   margin-bottom: $spacing-03;
   color: $text-secondary;
 }
 
 .#{c4p-settings.$pkg-prefix}--create-modal__description {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 
   padding-right: calc(20% - #{$spacing-05});
   margin: $spacing-03 0 $spacing-05 0;

package/scss/components/CreateSidePanel/_create-side-panel.scss

@@ -56,13 +56,13 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 }
 
 .#{$create-side-panel-block-class}__form-title-text {
-  @include type.type-style('productive-heading-02');
+  @include type.type-style('heading-compact-02');
 
   padding-bottom: $spacing-03;
 }
 
 .#{$create-side-panel-block-class}__form-description-text {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 }
 
 .#{$create-side-panel-block-class}.#{$side-panel-block-class}
@@ -71,13 +71,13 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
 }
 
 .#{$create-side-panel-block-class}__title {
-  @include type.type-style('productive-heading-03');
+  @include type.type-style('heading-03');
 
   margin-bottom: $spacing-02;
 }
 
 .#{$create-side-panel-block-class}__subtitle {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 
   margin-bottom: $spacing-03;
   color: $text-secondary;

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -133,7 +133,7 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
   .#{$create-tearsheet-block-class}__section--subtitle,
 .#{$create-tearsheet-block-class}
   .#{$create-tearsheet-block-class}__step--subtitle {
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 
   margin-bottom: $spacing-03;
 }
@@ -142,7 +142,7 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
   .#{$create-tearsheet-block-class}__section--description,
 .#{$create-tearsheet-block-class}
   .#{$create-tearsheet-block-class}__step--description {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 
   margin-bottom: $spacing-06;
 }

package/scss/components/CreateTearsheet/_storybook-styles.scss

@@ -13,7 +13,7 @@
 $preview-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create-multi-step;
 
 .#{$preview-block-class}__description {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 
   padding-bottom: $spacing-04;
 }

package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss

@@ -51,11 +51,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--create-tearsheet-narrow;
 }
 
 .#{$block-class} .#{$block-class}__form-title-text {
-  @include type.type-style('productive-heading-02');
+  @include type.type-style('heading-compact-02');
 
   padding-bottom: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__form-description-text {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 }