@carbon/ibm-products 1.61.1 → 1.62.1

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -19,13 +19,8 @@ var _stateReducer = require("./addons/stateReducer");
 var _getNodeTextContent = require("../../../global/js/utils/getNodeTextContent");
 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, 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.
- */
-
+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) { (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 blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
@@ -38,35 +33,46 @@ var getAccessibilityProps = function getAccessibilityProps(header) {
   return props;
 };
 var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
+  var resizerAriaLabel = datagridState.resizerAriaLabel;
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   (0, _react.useEffect)(function () {
     var tableId = datagridState.tableId;
-    if (tableId) {
-      var gridElement = document.querySelector("#".concat(tableId));
-      var tableElement = gridElement.querySelector('table');
-      var headerRowElement = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head"));
-      var hasHorizontalScrollbar = tableElement.scrollWidth > tableElement.clientWidth;
-      var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
-      var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
-      var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
-      var setCustomValues = function setCustomValues(_ref) {
-        var _ref$rowHeight = _ref.rowHeight,
-          rowHeight = _ref$rowHeight === void 0 ? 48 : _ref$rowHeight,
-          gridHeight = _ref.gridHeight;
-        headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeight));
-        headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), (0, _layout.px)(gridHeight - scrollBuffer - tableToolbarHeight));
-        headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), (0, _layout.px)(headerRowElement.offsetHeight));
-      };
-      setCustomValues({
-        gridHeight: gridElement.offsetHeight,
-        rowHeight: headerRowElement.clientHeight
-      });
-    }
+    var gridElement = document.querySelector("#".concat(tableId));
+    var tableElement = gridElement.querySelector('table');
+    var headerRowElement = document.querySelector("#".concat(tableId, " .").concat(blockClass, "__head"));
+    var hasHorizontalScrollbar = tableElement.scrollWidth > tableElement.clientWidth;
+    var scrollBuffer = hasHorizontalScrollbar ? 18 : 2;
+    var tableToolbar = gridElement.querySelector(".".concat(blockClass, "__table-toolbar"));
+    var tableToolbarHeight = (tableToolbar === null || tableToolbar === void 0 ? void 0 : tableToolbar.offsetHeight) || 0;
+    var setCustomValues = function setCustomValues(_ref) {
+      var _ref$rowHeight = _ref.rowHeight,
+        rowHeight = _ref$rowHeight === void 0 ? 48 : _ref$rowHeight,
+        gridHeight = _ref.gridHeight;
+      headerRowElement.style.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeight));
+      headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), (0, _layout.px)(gridHeight - scrollBuffer - tableToolbarHeight));
+      headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), (0, _layout.px)(headerRowElement.offsetHeight));
+    };
+    setCustomValues({
+      gridHeight: gridElement.offsetHeight,
+      rowHeight: headerRowElement.clientHeight
+    });
   }, [datagridState.rowSize, datagridState.tableId, datagridState]);
   var _useState = (0, _react.useState)(2),
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),
     incrementAmount = _useState2[0];
+  var handleOnMouseDownResize = function handleOnMouseDownResize(event, resizeProps) {
+    var _resizeProps = _objectSpread({}, resizeProps()),
+      onMouseDown = _resizeProps.onMouseDown;
+    event.target.focus();
+    // When event.button is 2, that is a right click
+    // and we do not want to resize
+    if (event.button === 2 || event.ctrlKey) {
+      event.target.blur();
+      return;
+    }
+    onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+  };
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
     role: false
   }), {
@@ -90,15 +96,19 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       dispatch = datagridState.dispatch,
       onColResizeEnd = datagridState.onColResizeEnd;
     var columnResizing = state.columnResizing;
-    var columnWidths = columnResizing.columnWidths;
+    var _ref4 = columnResizing || {},
+      columnWidths = _ref4.columnWidths;
     var originalCol = visibleColumns[index];
     return /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, header.getHeaderProps({
       role: false
     }), {
-      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
+      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__header-actions-column"), header.isAction), _cx), header.getHeaderProps().className),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
-    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
+    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && !header.isAction && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
+      onMouseDown: function onMouseDown(event) {
+        return handleOnMouseDownResize(event, header.getResizerProps);
+      },
       onKeyDown: function onKeyDown(event) {
         var key = event.key;
         if (key === 'ArrowLeft' || key === 'ArrowRight') {
@@ -122,7 +132,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       className: (0, _classnames.default)("".concat(blockClass, "__col-resizer-range")),
       type: "range",
       defaultValue: originalCol.width,
-      "aria-label": "Resize column"
+      "aria-label": resizerAriaLabel || 'Resize column'
     })), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(blockClass, "__col-resize-indicator")
     })));

package/lib/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -28,8 +28,11 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);
+    var _row$getRowProps = row.getRowProps(),
+      key = _row$getRowProps.key;
     return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
-      row: row
+      row: row,
+      key: key
     }));
   }));
 };

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

@@ -34,7 +34,10 @@ var DatagridRow = function DatagridRow(datagridState) {
   var row = datagridState.row,
     rowSize = datagridState.rowSize,
     withNestedRows = datagridState.withNestedRows,
-    prepareRow = datagridState.prepareRow;
+    prepareRow = datagridState.prepareRow,
+    key = datagridState.key,
+    tableId = datagridState.tableId,
+    withExpandedRows = datagridState.withExpandedRows;
   var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
     var isExpanded = _ref.isExpanded,
       subRows = _ref.subRows;
@@ -63,7 +66,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     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));
   };
   var focusRemover = function focusRemover() {
-    var elements = document.querySelectorAll(".".concat(blockClass, "__carbon-row-expanded"));
+    var elements = document.querySelectorAll("#".concat(tableId, " .").concat(blockClass, "__carbon-row-expanded"));
     elements.forEach(function (el) {
       el.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
     });
@@ -92,7 +95,17 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
   };
   var rowClassNames = (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), _cx));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
+  var setAdditionalRowProps = function setAdditionalRowProps() {
+    if (withNestedRows || withExpandedRows) {
+      return {
+        'data-nested-row-id': row.id
+      };
+    }
+    return {};
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: key
+  }, /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
     className: rowClassNames
   }, row.getRowProps({
     role: false
@@ -103,7 +116,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     onFocus: hoverHandler,
     onBlur: focusRemover,
     onKeyUp: handleOnKeyUp
-  }), row.cells.map(function (cell, index) {
+  }, setAdditionalRowProps()), row.cells.map(function (cell, index) {
     var _cell$column;
     var cellProps = cell.getCellProps({
       role: false

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -14,6 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _carbonComponentsReact = require("carbon-components-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
+var _stateReducer = require("./addons/stateReducer");
 var _excluded = ["onChange"];
 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,6 +26,7 @@ var SelectAll = function SelectAll(datagridState) {
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   (0, _react.useLayoutEffect)(function () {
+    /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -41,31 +43,49 @@ var SelectAll = function SelectAll(datagridState) {
     DatagridPagination = datagridState.DatagridPagination,
     radio = datagridState.radio,
     columns = datagridState.columns,
-    withStickyColumn = datagridState.withStickyColumn;
+    withStickyColumn = datagridState.withStickyColumn,
+    dispatch = datagridState.dispatch,
+    rows = datagridState.rows,
+    getRowId = datagridState.getRowId,
+    toggleAllRowsSelected = datagridState.toggleAllRowsSelected;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   if (hideSelectAll || radio) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(blockClass, "__head-hidden-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+      className: (0, _classnames.default)("".concat(blockClass, "__head-hidden-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), /* istanbul ignore next */
+      isFirstColumnStickyLeft && windowSize > 671))
     });
   }
   var getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
   var _getProps = getProps(),
     onChange = _getProps.onChange,
     selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
-  var _ref = selectProps || {},
-    indeterminate = _ref.indeterminate;
+  var indeterminate = selectProps.indeterminate;
   var handleSelectAllChange = function handleSelectAllChange(event) {
     if (indeterminate) {
+      (0, _stateReducer.handleSelectAllRowData)({
+        dispatch: dispatch,
+        rows: rows,
+        getRowId: getRowId,
+        indeterminate: true
+      });
+      toggleAllRowsSelected(false);
       return onChange === null || onChange === void 0 ? void 0 : onChange({
         target: {
           checked: false
         }
       });
     }
+    (0, _stateReducer.handleSelectAllRowData)({
+      dispatch: dispatch,
+      rows: rows,
+      getRowId: getRowId,
+      isChecked: event.target.checked
+    });
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: (0, _classnames.default)("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
+    isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/_react.default.createElement(TableSelectAll, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: handleSelectAllChange,

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -25,8 +25,11 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
     className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
   }), rows.map(function (row) {
     prepareRow(row);
+    var _row$getRowProps = row.getRowProps(),
+      key = _row$getRowProps.key;
     return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
-      row: row
+      row: row,
+      key: key
     }));
   }));
 };

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

@@ -15,6 +15,7 @@ var _useResizeObserver2 = require("../../../global/js/hooks/useResizeObserver");
 var _ButtonMenu = require("../../ButtonMenu");
 var _settings = require("../../../settings");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _stateReducer = require("./addons/stateReducer");
 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,9 +26,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var toolbarClass = "".concat(blockClass, "__table-toolbar");
+var menuClass = "".concat(blockClass, "__button-menu");
 var TableToolbar = _carbonComponentsReact.DataTable.TableToolbar;
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
-  var _Object$keys;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     displayAllInMenu = _useState2[0],
@@ -43,8 +45,15 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   var selectedRowIds = datagridState.state.selectedRowIds,
     toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
     toolbarBatchActions = datagridState.toolbarBatchActions,
-    setGlobalFilter = datagridState.setGlobalFilter;
-  var totalSelected = (_Object$keys = Object.keys(selectedRowIds || {})) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length;
+    setGlobalFilter = datagridState.setGlobalFilter,
+    dispatch = datagridState.dispatch,
+    getRowId = datagridState.getRowId,
+    batchActionMenuButtonLabel = datagridState.batchActionMenuButtonLabel,
+    translateWithIdBatchActions = datagridState.translateWithIdBatchActions,
+    rows = datagridState.rows;
+  var batchActionMenuButtonLabelText = batchActionMenuButtonLabel !== null && batchActionMenuButtonLabel !== void 0 ? batchActionMenuButtonLabel : 'More';
+  var selectedKeys = Object.keys(selectedRowIds || {});
+  var totalSelected = selectedKeys.length;
 
   // Get initial width of batch actions container,
   // used to measure when all items are put inside
@@ -74,25 +83,30 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       return null;
     }
     return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
-      label: width > minWidthBeforeOverflowIcon ? 'More' : null,
+      label: width > minWidthBeforeOverflowIcon ? batchActionMenuButtonLabelText : null,
       renderIcon: width > minWidthBeforeOverflowIcon ? _iconsReact.Add16 : _iconsReact.OverflowMenuVertical16,
-      className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
-      menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
+      className: (0, _classnames.default)([menuClass, (0, _defineProperty2.default)({}, "".concat(menuClass, "--icon-only"), width <= minWidthBeforeOverflowIcon)]),
+      menuOptionsClass: "".concat(menuClass, "-options"),
       flipped: true
-    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
-      if (index < 2 && !displayAllInMenu) {
-        return;
-      }
-      return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
-        key: "".concat(batchAction.label, "-").concat(index),
-        itemText: batchAction.label,
-        onClick: function onClick() {
-          batchAction.onClick();
-          if (batchAction.type === 'select_all') {
-            toggleAllRowsSelected(true);
+    }, toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
+      var hidden = index < 2 && !displayAllInMenu;
+      if (!hidden) {
+        return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+          key: "".concat(batchAction.label, "-").concat(index),
+          itemText: batchAction.label,
+          onClick: function onClick() {
+            batchAction.onClick();
+            if (batchAction.type === 'select_all') {
+              toggleAllRowsSelected(true);
+              (0, _stateReducer.handleSelectAllRowData)({
+                dispatch: dispatch,
+                rows: rows,
+                getRowId: getRowId
+              });
+            }
           }
-        }
-      });
+        });
+      }
     }));
   };
 
@@ -105,7 +119,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     onCancel: function onCancel() {
       toggleAllRowsSelected(false);
       setGlobalFilter(null);
-    }
+    },
+    translateWithId: translateWithIdBatchActions
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TableBatchAction, {
@@ -115,6 +130,11 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
           batchAction.onClick();
           if (batchAction.type === 'select_all') {
             toggleAllRowsSelected(true);
+            (0, _stateReducer.handleSelectAllRowData)({
+              dispatch: dispatch,
+              rows: rows,
+              getRowId: getRowId
+            });
           }
         },
         iconDescription: batchAction.label
@@ -130,12 +150,12 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
     DatagridBatchActions = datagridState.DatagridBatchActions,
     batchActions = datagridState.batchActions,
     rowSize = datagridState.rowSize;
-  var getRowHeight = rowSize ? rowSize : 'lg';
+  var getRowHeight = rowSize || 'lg';
   return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: (0, _classnames.default)("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").concat(getRowHeight))
+    className: (0, _classnames.default)([toolbarClass, "".concat(toolbarClass, "--").concat(getRowHeight)])
   }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__table-toolbar")
+    className: toolbarClass
   }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 var _default = DatagridToolbar;

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -26,12 +26,7 @@ var rowSizeMap = {
   sm: 32,
   md: 40,
   lg: 48,
-  xl: 64,
-  // TODO: deprecate the below values in next major release (v8) on carbon-components-react
-  short: 32,
-  compact: 24,
-  normal: 48,
-  tall: 64
+  xl: 64
 };
 var defaultRowHeight = rowSizeMap.lg;
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
@@ -50,13 +45,17 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     page = datagridState.page,
     handleResize = datagridState.handleResize,
     gridRef = datagridState.gridRef;
+
+  /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
     gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
   };
   (0, _useResizeObserver.useResizeObserver)(gridRef, handleVirtualGridResize);
-  var syncScroll = function syncScroll(e) {
-    var virtualBody = e.target;
+
+  /* istanbul ignore next */
+  var syncScroll = function syncScroll(event) {
+    var virtualBody = event.target;
     document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
     var spacerColumn = document.querySelector(".".concat(blockClass, "__head-wrap thead th:last-child"));
     spacerColumn.style.width = (0, _layout.px)(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
@@ -79,9 +78,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   }, /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState)), /*#__PURE__*/_react.default.createElement(TableBody, (0, _extends2.default)({}, getTableBodyProps({
     role: false
   }), {
-    onScroll: function onScroll(e) {
-      return syncScroll(e);
-    }
+    onScroll: syncScroll
   }), /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
@@ -101,10 +98,13 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
       style = _ref.style;
     var row = visibleRows[index];
     prepareRow(row);
+    var _row$getRowProps = row.getRowProps(),
+      key = _row$getRowProps.key;
     return /*#__PURE__*/_react.default.createElement("div", {
       style: _objectSpread({}, style)
     }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
-      row: row
+      row: row,
+      key: key
     })));
   })));
 };

package/lib/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stateReducer = exports.handleColumnResizingEvent = exports.handleColumnResizeEndEvent = void 0;
+exports.stateReducer = exports.handleToggleRowSelected = exports.handleSelectAllRowData = exports.handleColumnResizingEvent = exports.handleColumnResizeEndEvent = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -15,6 +15,8 @@ var COLUMN_RESIZE_START = 'columnStartResizing';
 var COLUMN_RESIZING = 'columnResizing';
 var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
+var TOGGLE_ROW_SELECTED = 'toggleRowSelected';
+var TOGGLE_ALL_ROWS_SELECTED = 'toggleAllRowsSelected';
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
@@ -48,8 +50,87 @@ var handleColumnResizingEvent = function handleColumnResizingEvent(dispatch, hea
   });
 };
 exports.handleColumnResizingEvent = handleColumnResizingEvent;
+var handleToggleRowSelected = function handleToggleRowSelected(_ref) {
+  var dispatch = _ref.dispatch,
+    rowData = _ref.rowData,
+    isChecked = _ref.isChecked,
+    getRowId = _ref.getRowId,
+    selectAll = _ref.selectAll;
+  return dispatch({
+    type: TOGGLE_ROW_SELECTED,
+    payload: {
+      rowData: rowData,
+      isChecked: isChecked,
+      getRowId: getRowId,
+      selectAll: selectAll
+    }
+  });
+};
+exports.handleToggleRowSelected = handleToggleRowSelected;
+var handleSelectAllRowData = function handleSelectAllRowData(_ref2) {
+  var dispatch = _ref2.dispatch,
+    rows = _ref2.rows,
+    getRowId = _ref2.getRowId,
+    indeterminate = _ref2.indeterminate,
+    isChecked = _ref2.isChecked;
+  return dispatch({
+    type: TOGGLE_ALL_ROWS_SELECTED,
+    payload: {
+      rows: rows,
+      getRowId: getRowId,
+      indeterminate: indeterminate,
+      isChecked: isChecked
+    }
+  });
+};
+exports.handleSelectAllRowData = handleSelectAllRowData;
 var stateReducer = function stateReducer(newState, action) {
   switch (action.type) {
+    case TOGGLE_ALL_ROWS_SELECTED:
+      {
+        var _ref3 = action.payload || {},
+          rows = _ref3.rows,
+          getRowId = _ref3.getRowId,
+          indeterminate = _ref3.indeterminate,
+          isChecked = _ref3.isChecked;
+        if (rows) {
+          var newSelectedRowData = {};
+          rows.forEach(function (row) {
+            newSelectedRowData[getRowId(row, row.index)] = row;
+          });
+          return _objectSpread(_objectSpread({}, newState), {}, {
+            selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
+          });
+        }
+        return _objectSpread({}, newState);
+      }
+    case TOGGLE_ROW_SELECTED:
+      {
+        var _ref4 = action.payload || {},
+          rowData = _ref4.rowData,
+          _isChecked = _ref4.isChecked,
+          _getRowId = _ref4.getRowId;
+        if (!rowData) {
+          return;
+        }
+        if (_isChecked) {
+          return _objectSpread(_objectSpread({}, newState), {}, {
+            selectedRowData: _objectSpread(_objectSpread({}, newState.selectedRowData), {}, (0, _defineProperty2.default)({}, _getRowId(rowData, rowData.index), rowData))
+          });
+        }
+        if (rowData && !_isChecked) {
+          var newData = _objectSpread({}, newState.selectedRowData);
+          var dataWithRemovedRow = Object.fromEntries(Object.entries(newData).filter(function (_ref5) {
+            var _ref6 = (0, _slicedToArray2.default)(_ref5, 1),
+              key = _ref6[0];
+            return parseInt(key) !== parseInt(rowData.index);
+          }));
+          return _objectSpread(_objectSpread({}, newState), {}, {
+            selectedRowData: dataWithRemovedRow
+          });
+        }
+        return _objectSpread({}, newState);
+      }
     case INIT:
       {
         return _objectSpread(_objectSpread({}, newState), {}, {
@@ -58,27 +139,27 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_START:
       {
-        var _ref = action.payload || {},
-          headerId = _ref.headerId;
+        var _ref7 = action.payload || {},
+          headerId = _ref7.headerId;
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: headerId
         });
       }
     case COLUMN_RESIZING:
       {
-        var _ref2 = action.payload || {},
-          _headerId = _ref2.headerId,
-          newWidth = _ref2.newWidth,
-          defaultWidth = _ref2.defaultWidth;
+        var _ref8 = action.payload || {},
+          _headerId = _ref8.headerId,
+          newWidth = _ref8.newWidth,
+          defaultWidth = _ref8.defaultWidth;
         var newColumnWidth = {};
         if (typeof _headerId === 'undefined') {
           return _objectSpread({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref3) {
-          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-            _ = _ref4[0],
-            value = _ref4[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref9) {
+          var _ref10 = (0, _slicedToArray2.default)(_ref9, 2),
+            _ = _ref10[0],
+            value = _ref10[1];
           return !isNaN(value);
         }));
         var headerIdArray = newState.columnResizing.headerIdWidths || [];
@@ -93,10 +174,10 @@ var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_END:
       {
-        var _ref5 = action.payload || {},
-          onColResizeEnd = _ref5.onColResizeEnd,
-          _headerId2 = _ref5.headerId,
-          isKeyEvent = _ref5.isKeyEvent;
+        var _ref11 = action.payload || {},
+          onColResizeEnd = _ref11.onColResizeEnd,
+          _headerId2 = _ref11.headerId,
+          isKeyEvent = _ref11.isKeyEvent;
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;

package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js

@@ -45,7 +45,7 @@
 
 //     ## Sample usage:
 //     1. include \`useActionsColumn\` hook
-//     2. add \`isAction = true\` to the column object in which you which to add the overflow menu actions
+//     2. add \`isAction = true\` to the column object in which you wish to add the overflow menu actions
 //     3. add \`rowActions = []\` array to the props
 //       - \`rowActions[].id\` for callback to identify the action is called
 //       - \`rowActions[].onClick(actionId: string, row: Row, event: ClickEvent)\` callback on menuitem clicked. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)