@carbon/ibm-products 1.61.1 → 1.62.1

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
  * Copyright IBM Corp. 2020, 2023
  *
@@ -28,35 +30,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
   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"), px(rowHeight));
-        headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), px(gridHeight - scrollBuffer - tableToolbarHeight));
-        headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), 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"), px(rowHeight));
+      headerRowElement.style.setProperty("--".concat(blockClass, "--grid-height"), px(gridHeight - scrollBuffer - tableToolbarHeight));
+      headerRowElement.style.setProperty("--".concat(blockClass, "--header-height"), px(headerRowElement.offsetHeight));
+    };
+    setCustomValues({
+      gridHeight: gridElement.offsetHeight,
+      rowHeight: headerRowElement.clientHeight
+    });
   }, [datagridState.rowSize, datagridState.tableId, datagridState]);
   var _useState = useState(2),
     _useState2 = _slicedToArray(_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.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps({
     role: false
   }), {
@@ -80,15 +93,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.createElement(TableHeader, _extends({}, header.getHeaderProps({
       role: false
     }), {
-      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
+      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _defineProperty(_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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, header.getResizerProps(), {
+    }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && !header.isAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, header.getResizerProps(), {
+      onMouseDown: function onMouseDown(event) {
+        return handleOnMouseDownResize(event, header.getResizerProps);
+      },
       onKeyDown: function onKeyDown(event) {
         var key = event.key;
         if (key === 'ArrowLeft' || key === 'ArrowRight') {
@@ -112,7 +129,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       className: cx("".concat(blockClass, "__col-resizer-range")),
       type: "range",
       defaultValue: originalCol.width,
-      "aria-label": "Resize column"
+      "aria-label": resizerAriaLabel || 'Resize column'
     })), /*#__PURE__*/React.createElement("span", {
       className: "".concat(blockClass, "__col-resize-indicator")
     })));

package/es/components/Datagrid/Datagrid/DatagridRefBody.js

@@ -28,8 +28,11 @@ var DatagridRefBody = function DatagridRefBody(datagridState) {
     className: cx("".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/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -4,14 +4,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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.
  */
-// @flow
+
 import React from 'react';
 import { DataTable, SkeletonText } from 'carbon-components-react';
 import { px } from '@carbon/layout';
@@ -35,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;
@@ -64,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"), 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"));
     });
@@ -93,7 +95,17 @@ var DatagridRow = function DatagridRow(datagridState) {
     }
   };
   var rowClassNames = cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableRow, _extends({
+  var setAdditionalRowProps = function setAdditionalRowProps() {
+    if (withNestedRows || withExpandedRows) {
+      return {
+        'data-nested-row-id': row.id
+      };
+    }
+    return {};
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, {
+    key: key
+  }, /*#__PURE__*/React.createElement(TableRow, _extends({
     className: rowClassNames
   }, row.getRowProps({
     role: false
@@ -104,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/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -3,18 +3,18 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["onChange"];
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2023
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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.
  */
-// @flow
+
 import React, { useLayoutEffect, useState } from 'react';
 import { DataTable } from 'carbon-components-react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
+import { handleSelectAllRowData } from './addons/stateReducer';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var SelectAll = function SelectAll(datagridState) {
   var _columns$;
@@ -23,6 +23,7 @@ var SelectAll = function SelectAll(datagridState) {
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];
   useLayoutEffect(function () {
+    /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
@@ -39,31 +40,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.createElement("div", {
-      className: cx("".concat(blockClass, "__head-hidden-select-all"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+      className: cx("".concat(blockClass, "__head-hidden-select-all"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), /* istanbul ignore next */
+      isFirstColumnStickyLeft && windowSize > 671))
     });
   }
   var getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
   var _getProps = getProps(),
     onChange = _getProps.onChange,
     selectProps = _objectWithoutProperties(_getProps, _excluded);
-  var _ref = selectProps || {},
-    indeterminate = _ref.indeterminate;
+  var indeterminate = selectProps.indeterminate;
   var handleSelectAllChange = function handleSelectAllChange(event) {
     if (indeterminate) {
+      handleSelectAllRowData({
+        dispatch: dispatch,
+        rows: rows,
+        getRowId: getRowId,
+        indeterminate: true
+      });
+      toggleAllRowsSelected(false);
       return onChange === null || onChange === void 0 ? void 0 : onChange({
         target: {
           checked: false
         }
       });
     }
+    handleSelectAllRowData({
+      dispatch: dispatch,
+      rows: rows,
+      getRowId: getRowId,
+      isChecked: event.target.checked
+    });
     return onChange === null || onChange === void 0 ? void 0 : onChange(event);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+    className: cx("".concat(blockClass, "__head-select-all"), "".concat(blockClass, "__checkbox-cell"), _defineProperty({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), /* istanbul ignore next */
+    isFirstColumnStickyLeft && windowSize > 671))
   }, /*#__PURE__*/React.createElement(TableSelectAll, _extends({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onSelect: handleSelectAllChange,

package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -25,8 +25,11 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
     className: cx("".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/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -14,10 +14,12 @@ import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
 import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
 import { pkg, carbon } from '../../../settings';
 import cx from 'classnames';
+import { handleSelectAllRowData } from './addons/stateReducer';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
+var toolbarClass = "".concat(blockClass, "__table-toolbar");
+var menuClass = "".concat(blockClass, "__button-menu");
 var TableToolbar = DataTable.TableToolbar;
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
-  var _Object$keys;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     displayAllInMenu = _useState2[0],
@@ -33,8 +35,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
@@ -64,25 +73,30 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
       return null;
     }
     return /*#__PURE__*/React.createElement(ButtonMenu, {
-      label: width > minWidthBeforeOverflowIcon ? 'More' : null,
+      label: width > minWidthBeforeOverflowIcon ? batchActionMenuButtonLabelText : null,
       renderIcon: width > minWidthBeforeOverflowIcon ? Add16 : OverflowMenuVertical16,
-      className: cx("".concat(blockClass, "__button-menu"), _defineProperty({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
-      menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
+      className: cx([menuClass, _defineProperty({}, "".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.createElement(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.createElement(ButtonMenuItem, {
+          key: "".concat(batchAction.label, "-").concat(index),
+          itemText: batchAction.label,
+          onClick: function onClick() {
+            batchAction.onClick();
+            if (batchAction.type === 'select_all') {
+              toggleAllRowsSelected(true);
+              handleSelectAllRowData({
+                dispatch: dispatch,
+                rows: rows,
+                getRowId: getRowId
+              });
+            }
           }
-        }
-      });
+        });
+      }
     }));
   };
 
@@ -95,7 +109,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.createElement(TableBatchAction, {
@@ -105,6 +120,11 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
           batchAction.onClick();
           if (batchAction.type === 'select_all') {
             toggleAllRowsSelected(true);
+            handleSelectAllRowData({
+              dispatch: dispatch,
+              rows: rows,
+              getRowId: getRowId
+            });
           }
         },
         iconDescription: batchAction.label
@@ -120,12 +140,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.createElement("div", {
     ref: ref,
-    className: cx("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").concat(getRowHeight))
+    className: cx([toolbarClass, "".concat(toolbarClass, "--").concat(getRowHeight)])
   }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__table-toolbar")
+    className: toolbarClass
   }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
 export default DatagridToolbar;

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020 - 2023
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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.
  */
+
 import React, { useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
 import { DataTable } from 'carbon-components-react';
@@ -23,12 +23,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) {
@@ -47,13 +42,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;
   };
   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 = px(32 + (virtualBody.offsetWidth - virtualBody.clientWidth)); // scrollbar width to header column to fix header alignment
@@ -76,9 +75,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
     role: false
   }), {
-    onScroll: function onScroll(e) {
-      return syncScroll(e);
-    }
+    onScroll: syncScroll
   }), /*#__PURE__*/React.createElement(VariableSizeList, {
     height: virtualHeight || tableHeight,
     itemCount: visibleRows.length,
@@ -98,10 +95,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.createElement("div", {
       style: _objectSpread({}, style)
     }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
-      row: row
+      row: row,
+      key: key
     })));
   })));
 };

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

@@ -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(pkg.prefix, "--datagrid");
 export var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
@@ -46,8 +48,85 @@ export var handleColumnResizingEvent = function handleColumnResizingEvent(dispat
     }
   });
 };
+export 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
+    }
+  });
+};
+export 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
+    }
+  });
+};
 export 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), {}, _defineProperty({}, _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 = _slicedToArray(_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), {}, {
@@ -56,27 +135,27 @@ export 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 = _slicedToArray(_ref3, 2),
-            _ = _ref4[0],
-            value = _ref4[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref9) {
+          var _ref10 = _slicedToArray(_ref9, 2),
+            _ = _ref10[0],
+            value = _ref10[1];
           return !isNaN(value);
         }));
         var headerIdArray = newState.columnResizing.headerIdWidths || [];
@@ -91,10 +170,10 @@ export 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;