@carbon/ibm-products 2.0.0-rc.33 → 2.0.0-rc.35

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -0,0 +1,118 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children"];
+/*
+ * 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.
+ */
+// @flow
+import React from 'react';
+import { TableRow, TableCell, SkeletonText } from '@carbon/react';
+import { px } from '@carbon/layout';
+import { selectionColumnId } from '../common-column-ids';
+import cx from 'classnames';
+import { pkg, carbon } from '../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var rowHeights = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64
+};
+
+// eslint-disable-next-line react/prop-types
+var DatagridRow = function DatagridRow(datagridState) {
+  var _cx;
+  var row = datagridState.row,
+    rowSize = datagridState.rowSize,
+    withNestedRows = datagridState.withNestedRows;
+  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
+    var isExpanded = _ref.isExpanded,
+      subRows = _ref.subRows;
+    var size = 0;
+    if (isExpanded && subRows) {
+      size += subRows.length;
+      subRows.forEach(function (child) {
+        size += getVisibleNestedRowCount(child);
+      });
+    }
+    return size;
+  };
+  var hoverHandler = function hoverHandler(event) {
+    var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
+    var subRowCount = getVisibleNestedRowCount(row);
+    var totalNestedRowIndicatorHeight = px(subRowCount * rowHeights[rowSize]);
+    var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
+    hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+    var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
+    var rowSizeValue = rowSize || 'lg';
+    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
+    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), px(rowHeights[rowSizeValue]));
+    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), px((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
+  };
+  var focusRemover = function focusRemover() {
+    var elements = document.querySelectorAll(".".concat(blockClass, "__carbon-row-expanded"));
+    elements.forEach(function (el) {
+      el.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+    });
+  };
+  return /*#__PURE__*/React.createElement(TableRow, _extends({
+    className: 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))
+  }, row.getRowProps({
+    role: false
+  }), {
+    key: row.id,
+    onMouseEnter: function onMouseEnter(event) {
+      if (!withNestedRows) {
+        return;
+      }
+      hoverHandler(event);
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
+      hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.remove("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+    },
+    onFocus: function onFocus(event) {
+      if (!withNestedRows) {
+        return;
+      }
+      hoverHandler(event);
+    },
+    onBlur: function onBlur() {
+      focusRemover();
+    },
+    onKeyUp: function onKeyUp(event) {
+      if (!withNestedRows) {
+        return;
+      }
+      if (event.key === 'Enter' || event.key === 'Space') {
+        focusRemover();
+        hoverHandler(event);
+      }
+    }
+  }), row.cells.map(function (cell, index) {
+    var cellProps = cell.getCellProps({
+      role: false
+    });
+    var children = cellProps.children,
+      restProps = _objectWithoutProperties(cellProps, _excluded);
+    var content = children || /*#__PURE__*/React.createElement(React.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/React.createElement(SkeletonText, null));
+    if (cell && cell.column && cell.column.id === selectionColumnId) {
+      // directly render component without the wrapping TableCell
+      return cell.render('Cell', {
+        key: cell.column.id
+      });
+    }
+    return /*#__PURE__*/React.createElement(TableCell, _extends({
+      className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
+    }, restProps, {
+      key: cell.column.id
+    }), content);
+  }));
+};
+export default DatagridRow;

package/es/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+ */
+// @flow
+import React, { useLayoutEffect, useState } from 'react';
+import { TableSelectAll } from '@carbon/react';
+import cx from 'classnames';
+import { pkg } from '../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var SelectAll = function SelectAll(datagridState) {
+  var _columns$;
+  var _useState = useState(window.innerWidth),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  useLayoutEffect(function () {
+    function updateSize() {
+      setWindowSize(window.innerWidth);
+    }
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
+  var isFetching = datagridState.isFetching,
+    getToggleAllRowsSelectedProps = datagridState.getToggleAllRowsSelectedProps,
+    getToggleAllPageRowsSelectedProps = datagridState.getToggleAllPageRowsSelectedProps,
+    tableId = datagridState.tableId,
+    hideSelectAll = datagridState.hideSelectAll,
+    DatagridPagination = datagridState.DatagridPagination,
+    radio = datagridState.radio,
+    columns = datagridState.columns,
+    withStickyColumn = datagridState.withStickyColumn;
+  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))
+    });
+  }
+  var getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
+  var _getProps = getProps(),
+    onChange = _getProps.onChange,
+    selectProps = _objectWithoutProperties(_getProps, _excluded);
+  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))
+  }, /*#__PURE__*/React.createElement(TableSelectAll, _extends({}, selectProps, {
+    name: "".concat(tableId, "-select-all-checkbox-name"),
+    onSelect: onChange,
+    disabled: isFetching || selectProps.disabled,
+    id: "".concat(tableId, "-select-all-checkbox-id")
+  })));
+};
+export { SelectAll };

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["onChange"];
+/**
+ * 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, useState, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { CaretDown } from '@carbon/react/icons';
+import { pkg } from '../../../settings';
+// cspell:words columnheader
+
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var SELECT_ALL_PAGE_ROWS = 'pageRows';
+var SELECT_ALL_ROWS = 'allRows';
+var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
+  var _columns$;
+  var tableId = _ref.tableId,
+    isFetching = _ref.isFetching,
+    isAllRowsSelected = _ref.isAllRowsSelected,
+    selectAllToggle = _ref.selectAllToggle,
+    getToggleAllPageRowsSelectedProps = _ref.getToggleAllPageRowsSelectedProps,
+    getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps,
+    _ref$allPageRowsLabel = _ref.allPageRowsLabel,
+    allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
+    _ref$allRowsLabel = _ref.allRowsLabel,
+    allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel,
+    columns = _ref.columns,
+    withStickyColumn = _ref.withStickyColumn;
+  var _useState = useState(SELECT_ALL_PAGE_ROWS),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectAllMode = _useState2[0],
+    setSelectAllMode = _useState2[1];
+  useEffect(function () {
+    if (onSelectAllRows) {
+      onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
+    }
+  }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
+  var _useState3 = useState(window.innerWidth),
+    _useState4 = _slicedToArray(_useState3, 2),
+    windowSize = _useState4[0],
+    setWindowSize = _useState4[1];
+  useLayoutEffect(function () {
+    function updateSize() {
+      setWindowSize(window.innerWidth);
+    }
+    window.addEventListener('resize', updateSize);
+    return function () {
+      return window.removeEventListener('resize', updateSize);
+    };
+  }, []);
+  var _ref2 = selectAllToggle || {},
+    onSelectAllRows = _ref2.onSelectAllRows,
+    labels = _ref2.labels;
+  if (labels) {
+    allPageRowsLabel = labels.allPageRows || allPageRowsLabel;
+    allRowsLabel = labels.allRows || allRowsLabel;
+  }
+  var getProps = selectAllMode === SELECT_ALL_PAGE_ROWS ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
+  var _getProps = getProps(),
+    onChange = _getProps.onChange,
+    selectProps = _objectWithoutProperties(_getProps, _excluded);
+  var disabled = isFetching || selectProps.disabled;
+  var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
+  return /*#__PURE__*/React.createElement("th", {
+    role: "columnheader",
+    scope: "col",
+    className: cx("".concat(blockClass, "__select-all-toggle-on"), _defineProperty({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, _extends({}, selectProps, {
+    name: "".concat(tableId, "-select-all-checkbox-name"),
+    onClick: function onClick(e) {
+      onChange(e);
+    },
+    disabled: disabled,
+    id: "".concat(tableId, "-select-all-checkbox-id"),
+    labelText: allRowsLabel,
+    hideLabel: true
+  }))), /*#__PURE__*/React.createElement(OverflowMenu, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(CaretDown, _extends({
+        size: 16
+      }, props));
+    },
+    size: "sm",
+    "aria-label": allRowsLabel,
+    menuOptionsClass: "".concat(blockClass, "__select-all-toggle-overflow")
+  }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: allPageRowsLabel,
+    requireTitle: true,
+    disabled: disabled,
+    onClick: function onClick() {
+      setSelectAllMode(SELECT_ALL_PAGE_ROWS);
+      // deselect all rows first
+      getToggleAllRowsSelectedProps().onChange({
+        target: {
+          checked: false
+        }
+      });
+      // select all row on current page
+      getToggleAllPageRowsSelectedProps().onChange({
+        target: {
+          checked: true
+        }
+      });
+    }
+  }), /*#__PURE__*/React.createElement(OverflowMenuItem, {
+    itemText: allRowsLabel,
+    requireTitle: true,
+    disabled: disabled,
+    onClick: function onClick() {
+      setSelectAllMode(SELECT_ALL_ROWS);
+      getToggleAllRowsSelectedProps().onChange({
+        target: {
+          checked: true
+        }
+      });
+    }
+  })));
+};
+SelectAllWithToggle.propTypes = {
+  allPageRowsLabel: PropTypes.string,
+  allRowsLabel: PropTypes.string,
+  columns: PropTypes.arrayOf(PropTypes.object),
+  getToggleAllPageRowsSelectedProps: PropTypes.func.isRequired,
+  getToggleAllRowsSelectedProps: PropTypes.func.isRequired,
+  isAllRowsSelected: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool,
+  selectAllToggle: PropTypes.object,
+  tableId: PropTypes.string.isRequired,
+  withStickyColumn: PropTypes.bool
+};
+export default SelectAllWithToggle;

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

@@ -0,0 +1,32 @@
+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
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import React from 'react';
+import { TableBody } from '@carbon/react';
+import cx from 'classnames';
+import { pkg } from '../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
+  var getTableBodyProps = datagridState.getTableBodyProps,
+    rows = datagridState.rows,
+    prepareRow = datagridState.prepareRow;
+  return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
+    role: false
+  }), {
+    className: cx("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
+  }), rows.map(function (row) {
+    prepareRow(row);
+    return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
+      row: row
+    }));
+  }));
+};
+export default DatagridSimpleBody;

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -0,0 +1,142 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Add, OverflowMenuVertical } from '@carbon/react/icons';
+import { TableToolbar, TableBatchActions, TableBatchAction } from '@carbon/react';
+import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
+import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
+import { pkg, carbon } from '../../../settings';
+import cx from 'classnames';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    displayAllInMenu = _useState2[0],
+    setDisplayAllInMenu = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    initialListWidth = _useState4[0],
+    setInitialListWidth = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    receivedInitialWidth = _useState6[0],
+    setReceivedInitialWidth = _useState6[1];
+  var selectedFlatRows = datagridState.selectedFlatRows,
+    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
+    toolbarBatchActions = datagridState.toolbarBatchActions,
+    setGlobalFilter = datagridState.setGlobalFilter;
+  var totalSelected = selectedFlatRows && selectedFlatRows.length;
+
+  // Get initial width of batch actions container,
+  // used to measure when all items are put inside
+  // the ButtonMenu
+  useEffect(function () {
+    if (totalSelected === 1 && !receivedInitialWidth) {
+      var batchActionListWidth = ref.current.querySelector(".".concat(carbon.prefix, "--action-list")).offsetWidth;
+      setInitialListWidth(batchActionListWidth);
+      setReceivedInitialWidth(true);
+    }
+  }, [totalSelected, receivedInitialWidth, ref]);
+  useEffect(function () {
+    var summaryWidth = ref.current.querySelector(".".concat(carbon.prefix, "--batch-summary")).offsetWidth;
+    if (width < summaryWidth + initialListWidth + 32) {
+      setDisplayAllInMenu(true);
+    } else {
+      setDisplayAllInMenu(false);
+    }
+  }, [width, ref, initialListWidth]);
+
+  // Render batch actions in ButtonMenu
+  var renderBatchActionOverflow = function renderBatchActionOverflow() {
+    var minWidthBeforeOverflowIcon = 380;
+    // Do not render ButtonMenu when there are 3 or less items
+    // and if there is enough available space to render all the items
+    if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(ButtonMenu, {
+      label: width > minWidthBeforeOverflowIcon ? 'More' : null,
+      renderIcon: width > minWidthBeforeOverflowIcon ? Add : OverflowMenuVertical,
+      className: cx("".concat(blockClass, "__button-menu"), _defineProperty({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
+      menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
+      flipped: true,
+      menuAriaLabel: 'Batch actions'
+    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
+      if (index < 2) {
+        if (displayAllInMenu) {
+          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);
+              }
+            }
+          });
+        }
+        return null;
+      }
+      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);
+          }
+        }
+      });
+    }));
+  };
+
+  // Only display the first two batch actions, the rest are
+  // displayed inside of the ButtonMenu if there are more than
+  // 3 batch actions
+  return /*#__PURE__*/React.createElement(TableBatchActions, {
+    shouldShowBatchActions: totalSelected > 0,
+    totalSelected: totalSelected,
+    onCancel: function onCancel() {
+      toggleAllRowsSelected(false);
+      setGlobalFilter(null);
+    }
+  }, !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, {
+        key: "".concat(batchAction.label, "-").concat(index),
+        renderIcon: batchAction.renderIcon,
+        onClick: function onClick() {
+          batchAction.onClick();
+          if (batchAction.type === 'select_all') {
+            toggleAllRowsSelected(true);
+          }
+        },
+        iconDescription: batchAction.label
+      }, batchAction.label);
+    }
+  })), renderBatchActionOverflow());
+};
+var DatagridToolbar = function DatagridToolbar(datagridState) {
+  var ref = useRef(null);
+  var _useResizeObserver = useResizeObserver(ref),
+    width = _useResizeObserver.width;
+  var DatagridActions = datagridState.DatagridActions,
+    DatagridBatchActions = datagridState.DatagridBatchActions,
+    batchActions = datagridState.batchActions,
+    rowSize = datagridState.rowSize;
+  var getRowHeight = rowSize ? rowSize : 'lg';
+  return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: cx("".concat(blockClass, "__table-toolbar"), "".concat(blockClass, "__table-toolbar--").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")
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+};
+export default DatagridToolbar;

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

@@ -0,0 +1,109 @@
+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.
+ */
+import React, { useEffect } from 'react';
+import { VariableSizeList } from 'react-window';
+import { TableBody } from '@carbon/react';
+import { pkg } from '../../../settings';
+import DatagridHead from './DatagridHead';
+import { px } from '@carbon/layout';
+import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var rowSizeMap = {
+  xs: 24,
+  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
+};
+var defaultRowHeight = rowSizeMap.lg;
+var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
+  var _gridRef$current, _gridRef$current2;
+  var getTableBodyProps = datagridState.getTableBodyProps,
+    rows = datagridState.rows,
+    prepareRow = datagridState.prepareRow,
+    onScroll = datagridState.onScroll,
+    innerListRef = datagridState.innerListRef,
+    _datagridState$tableH = datagridState.tableHeight,
+    tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
+    virtualHeight = datagridState.virtualHeight,
+    listRef = datagridState.listRef,
+    rowSize = datagridState.rowSize,
+    DatagridPagination = datagridState.DatagridPagination,
+    page = datagridState.page,
+    handleResize = datagridState.handleResize,
+    gridRef = datagridState.gridRef;
+  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, {
+    callback: handleVirtualGridResize
+  });
+  var syncScroll = function syncScroll(e) {
+    var virtualBody = e.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
+  };
+
+  useEffect(function () {
+    handleResize();
+  }, [handleResize]);
+  var rowHeight = rowSize && rowSizeMap[rowSize] || defaultRowHeight;
+  if (listRef && listRef.current) {
+    listRef.current.resetAfterIndex(0);
+  }
+  var visibleRows = DatagridPagination && page || rows;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__head-wrap"),
+    style: {
+      width: (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 ? void 0 : _gridRef$current.clientWidth,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(DatagridHead, datagridState)), /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
+    role: false
+  }), {
+    onScroll: function onScroll(e) {
+      return syncScroll(e);
+    }
+  }), /*#__PURE__*/React.createElement(VariableSizeList, {
+    height: virtualHeight || tableHeight,
+    itemCount: visibleRows.length,
+    itemSize: function itemSize(index) {
+      return visibleRows[index].isExpanded ? (visibleRows[index].expandedContentHeight || 0) + rowHeight : rowHeight;
+    },
+    estimatedItemSize: rowHeight,
+    onScroll: onScroll,
+    innerRef: innerListRef,
+    ref: listRef,
+    className: "".concat(blockClass, "__virtual-scrollbar"),
+    style: {
+      width: (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 ? void 0 : _gridRef$current2.clientWidth
+    }
+  }, function (_ref) {
+    var index = _ref.index,
+      style = _ref.style;
+    var row = visibleRows[index];
+    prepareRow(row);
+    return /*#__PURE__*/React.createElement("div", {
+      style: _objectSpread({}, style)
+    }, row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
+      row: row
+    })));
+  })));
+};
+export default DatagridVirtualBody;