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

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatagridContent = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@carbon/react");
+var _layout = require("@carbon/layout");
+var _DatagridHead = _interopRequireDefault(require("./DatagridHead"));
+var _DatagridBody = _interopRequireDefault(require("./DatagridBody"));
+var _DatagridToolbar = _interopRequireDefault(require("./DatagridToolbar"));
+var _handleGridKeyPress = require("./addons/InlineEdit/handleGridKeyPress");
+var _settings = require("../../../settings");
+var _InlineEditContext = require("./addons/InlineEdit/InlineEditContext");
+var _Filtering = require("./addons/Filtering");
+var _handleGridFocus = require("./addons/InlineEdit/handleGridFocus");
+var _hooks = require("../../../global/js/hooks");
+var _hooks2 = require("../../DataSpreadsheet/hooks");
+var _FilterSummary = require("../../FilterSummary");
+var _constants = require("./addons/Filtering/constants");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var DatagridContent = function DatagridContent(_ref) {
+  var _cx4;
+  var datagridState = _ref.datagridState;
+  var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
+    inlineEditState = _useContext.state,
+    dispatch = _useContext.dispatch;
+  var _useContext2 = (0, _react.useContext)(_Filtering.FilterContext),
+    filterTags = _useContext2.filterTags,
+    EventEmitter = _useContext2.EventEmitter,
+    panelOpen = _useContext2.panelOpen;
+  var activeCellId = inlineEditState.activeCellId,
+    gridActive = inlineEditState.gridActive,
+    editId = inlineEditState.editId;
+  var _datagridState$getTab = datagridState.getTableProps,
+    getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
+    getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
+    withVirtualScroll = datagridState.withVirtualScroll,
+    DatagridPagination = datagridState.DatagridPagination,
+    isFetching = datagridState.isFetching,
+    CustomizeColumnsTearsheet = datagridState.CustomizeColumnsTearsheet,
+    filterProps = datagridState.filterProps,
+    fullHeightDatagrid = datagridState.fullHeightDatagrid,
+    _datagridState$vertic = datagridState.verticalAlign,
+    verticalAlign = _datagridState$vertic === void 0 ? 'center' : _datagridState$vertic,
+    variableRowHeight = datagridState.variableRowHeight,
+    gridTitle = datagridState.gridTitle,
+    gridDescription = datagridState.gridDescription,
+    useDenseHeader = datagridState.useDenseHeader,
+    withInlineEdit = datagridState.withInlineEdit,
+    tableId = datagridState.tableId,
+    DatagridActions = datagridState.DatagridActions,
+    totalColumnsWidth = datagridState.totalColumnsWidth,
+    gridRef = datagridState.gridRef,
+    state = datagridState.state;
+  var rows = DatagridPagination && datagridState.page || datagridState.rows;
+  var gridAreaRef = (0, _react.useRef)();
+  var multiKeyTrackingRef = (0, _react.useRef)();
+  (0, _hooks.useClickOutside)(gridAreaRef, function (target) {
+    if (!withInlineEdit) {
+      return;
+    }
+    // We return from here if we find a parent element with the selector below
+    // because that element was initially part of the grid area but was removed
+    // and swapped out with an input, i.e. text, number, selection, or date picker
+    if (target.closest(".".concat(blockClass, "__inline-edit-button")) || target.closest(".".concat(blockClass, "__inline-edit--select"))) {
+      return;
+    }
+    dispatch({
+      type: 'REMOVE_GRID_ACTIVE_FOCUS',
+      payload: activeCellId
+    });
+  });
+  var renderTable = function renderTable() {
+    var _getTableProps;
+    return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
+      className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      role: withInlineEdit && 'grid',
+      tabIndex: withInlineEdit && 0,
+      onKeyDown: withInlineEdit ? function (event) {
+        return (0, _handleGridKeyPress.handleGridKeyPress)({
+          event: event,
+          dispatch: dispatch,
+          instance: datagridState,
+          keysPressedList: keysPressedList,
+          state: inlineEditState,
+          usingMac: usingMac
+        });
+      } : null,
+      onFocus: withInlineEdit ? function () {
+        return (0, _handleGridFocus.handleGridFocus)(inlineEditState, dispatch);
+      } : null
+    }), !withVirtualScroll ? /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState) : null, /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
+      rows: rows
+    })));
+  };
+  var _useMultipleKeyTracki = (0, _hooks2.useMultipleKeyTracking)({
+      ref: withInlineEdit ? multiKeyTrackingRef : null,
+      containerHasFocus: gridActive,
+      isEditing: !!editId
+    }),
+    keysPressedList = _useMultipleKeyTracki.keysPressedList,
+    usingMac = _useMultipleKeyTracki.usingMac;
+
+  // Provides a width for the region outline for useInlineEdit
+  (0, _react.useEffect)(function () {
+    if (!withInlineEdit) {
+      return;
+    }
+    var gridElement = document.querySelector("#".concat(tableId));
+    var tableHeader = gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector(".".concat(_settings.carbon.prefix, "--data-table-header"));
+    gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), (0, _layout.px)(totalColumnsWidth + 32));
+    if (gridActive) {
+      gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), (0, _layout.px)((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight) || 0));
+    }
+  }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
+  var renderFilterSummary = function renderFilterSummary() {
+    return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
+      className: "".concat(blockClass, "__filter-summary"),
+      filters: filterTags,
+      clearFilters: function clearFilters() {
+        return EventEmitter.dispatch(_constants.CLEAR_FILTERS);
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
+    className: (0, _classnames.default)("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
+    title: gridTitle,
+    description: gridDescription
+  }, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(blockClass, "__table-container"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
+    ref: gridAreaRef
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_Filtering.FilterPanel, (0, _extends2.default)({
+    updateMethod: "batch"
+  }, getFilterFlyoutProps(), {
+    title: filterProps.panelTitle,
+    filterSections: filterProps.sections
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__table-container-inner")
+  }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/_react.default.createElement("div", {
+    ref: multiKeyTrackingRef
+  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__virtualScrollContainer"),
+    ref: gridRef
+  }, renderTable()) : renderTable()))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
+    instance: datagridState
+  }));
+};
+exports.DatagridContent = DatagridContent;
+DatagridContent.propTypes = {
+  datagridState: _propTypes.default.shape({
+    getTableProps: _propTypes.default.func,
+    getFilterFlyoutProps: _propTypes.default.func,
+    withVirtualScroll: _propTypes.default.bool,
+    DatagridActions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    DatagridPagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    CustomizeColumnsTearsheet: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+    isFetching: _propTypes.default.bool,
+    fullHeightDatagrid: _propTypes.default.bool,
+    filterProps: _propTypes.default.object,
+    variableRowHeight: _propTypes.default.bool,
+    useDenseHeader: _propTypes.default.bool,
+    withInlineEdit: _propTypes.default.bool,
+    verticalAlign: _propTypes.default.string,
+    gridTitle: _propTypes.default.node,
+    gridDescription: _propTypes.default.node,
+    page: _propTypes.default.arrayOf(_propTypes.default.object),
+    rows: _propTypes.default.arrayOf(_propTypes.default.object),
+    tableId: _propTypes.default.string,
+    totalColumnsWidth: _propTypes.default.number,
+    gridRef: _propTypes.default.object,
+    setAllFilters: _propTypes.default.func,
+    getFilterProps: _propTypes.default.func,
+    state: _propTypes.default.object
+  })
+};

package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _settings = require("../../../settings");
+var _react2 = require("@carbon/react");
+var _EmptyStates = require("../../EmptyStates");
+/**
+ * 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.
+ */
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
+  var getTableBodyProps = datagridState.getTableBodyProps,
+    headers = datagridState.headers,
+    emptyStateTitle = datagridState.emptyStateTitle,
+    emptyStateDescription = datagridState.emptyStateDescription,
+    emptyStateSize = datagridState.emptyStateSize,
+    _datagridState$emptyS = datagridState.emptyStateType,
+    emptyStateType = _datagridState$emptyS === void 0 ? 'noData' : _datagridState$emptyS,
+    illustrationTheme = datagridState.illustrationTheme,
+    emptyStateAction = datagridState.emptyStateAction,
+    emptyStateLink = datagridState.emptyStateLink;
+  var emptyStateProps = {
+    illustrationTheme: illustrationTheme,
+    size: emptyStateSize,
+    title: emptyStateTitle,
+    subtitle: emptyStateDescription,
+    action: emptyStateAction,
+    link: emptyStateLink
+  };
+  return /*#__PURE__*/_react.default.createElement(_react2.TableBody, (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
+    className: "".concat(blockClass, "__empty-state-body")
+  }), /*#__PURE__*/_react.default.createElement(_react2.TableRow, null, /*#__PURE__*/_react.default.createElement(_react2.TableCell, {
+    colSpan: headers.length
+  }, emptyStateType === 'error' && /*#__PURE__*/_react.default.createElement(_EmptyStates.ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/_react.default.createElement(_EmptyStates.NotFoundEmptyState, emptyStateProps))));
+};
+var _default = DatagridEmptyBody;
+exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _settings = require("../../../settings");
+/*
+ * 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.
+ */
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+// eslint-disable-next-line react/prop-types
+var DatagridExpandedRow = function DatagridExpandedRow(PreviousRowRenderer, ExpandedRowContentComponent) {
+  return function (datagridState) {
+    var row = datagridState.row;
+    var _ref = row || {},
+      expandedContentHeight = _ref.expandedContentHeight;
+    if (!row.isExpanded) {
+      return PreviousRowRenderer(datagridState);
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__expanded-row")
+    }, PreviousRowRenderer(datagridState), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__expanded-row-content"),
+      style: {
+        height: expandedContentHeight ? expandedContentHeight : null
+      }
+    }, ExpandedRowContentComponent(datagridState)));
+  };
+};
+var _default = DatagridExpandedRow;
+exports.default = _default;

package/lib/components/Datagrid/Datagrid/DatagridHead.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@carbon/react");
+/**
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var DatagridHead = function DatagridHead(datagridState) {
+  var _datagridState$header = datagridState.headerGroups,
+    headerGroups = _datagridState$header === void 0 ? [] : _datagridState$header,
+    headRef = datagridState.headRef,
+    HeaderRow = datagridState.HeaderRow;
+  return /*#__PURE__*/_react.default.createElement(_react2.TableHead, null, headerGroups.map(function (headerGroup) {
+    return (
+      // doesn't support header grouping.
+      HeaderRow(datagridState, headRef, headerGroup)
+    );
+  }));
+};
+var _default = DatagridHead;
+exports.default = _default;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@carbon/react");
+var _commonColumnIds = require("../common-column-ids");
+var _settings = require("../../../settings");
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+// @flow
+
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
+    role: false
+  }), {
+    className: (0, _classnames.default)("".concat(blockClass, "__head"), headerGroup.getHeaderGroupProps().className),
+    ref: headRef
+  }), datagridState.headers.filter(function (_ref) {
+    var isVisible = _ref.isVisible;
+    return isVisible;
+  }).map(function (header) {
+    var _cx;
+    if (header.id === _commonColumnIds.selectionColumnId) {
+      // render directly without the wrapper TableHeader
+      return header.render('Header', {
+        key: header.id
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react2.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"), header.canSort), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
+      key: header.id
+    }), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, header.getResizerProps(), {
+      className: "".concat(blockClass, "__resizer")
+    })));
+  }));
+};
+var useHeaderRow = function useHeaderRow(hooks) {
+  var useInstance = function useInstance(instance) {
+    Object.assign(instance, {
+      HeaderRow: HeaderRow
+    });
+  };
+  hooks.useInstance.push(useInstance);
+};
+var _default = useHeaderRow;
+exports.default = _default;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../../settings");
+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; } /*
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Licensed Materials - Property of IBM
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 5724-Q36
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * (c) Copyright IBM Corp. 2021
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * US Government Users Restricted Rights - Use, duplication or disclosure
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * restricted by GSA ADP Schedule Contract with IBM Corp.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+
+// TableBody from carbon is a functional component
+// hence no way to pass the ref to html element without changes in carbon side
+// define html directly here.
+// ref should be passed in thru getTableBodyProps
+var DatagridRefBody = function DatagridRefBody(datagridState) {
+  var getTableBodyProps = datagridState.getTableBodyProps,
+    rows = datagridState.rows,
+    prepareRow = datagridState.prepareRow;
+  return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, getTableBodyProps({
+    role: false
+  }), {
+    className: (0, _classnames.default)("".concat(blockClass, "__simple-body"), getTableBodyProps().className)
+  }), rows.map(function (row) {
+    prepareRow(row);
+    return row.RowRenderer(_objectSpread(_objectSpread({}, datagridState), {}, {
+      row: row
+    }));
+  }));
+};
+var _default = DatagridRefBody;
+exports.default = _default;

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

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@carbon/react");
+var _layout = require("@carbon/layout");
+var _commonColumnIds = require("../common-column-ids");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../../settings");
+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
+var blockClass = "".concat(_settings.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 = (0, _layout.px)(subRowCount * rowHeights[rowSize]);
+    var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
+    hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+    var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
+    var rowSizeValue = rowSize || 'lg';
+    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
+    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), (0, _layout.px)(rowHeights[rowSizeValue]));
+    hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), (0, _layout.px)((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
+  };
+  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.default.createElement(_react2.TableRow, (0, _extends2.default)({
+    className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _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 = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
+    var content = children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, null));
+    if (cell && cell.column && cell.column.id === _commonColumnIds.selectionColumnId) {
+      // directly render component without the wrapping TableCell
+      return cell.render('Cell', {
+        key: cell.column.id
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react2.TableCell, (0, _extends2.default)({
+      className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0))
+    }, restProps, {
+      key: cell.column.id
+    }), content);
+  }));
+};
+var _default = DatagridRow;
+exports.default = _default;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectAll = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@carbon/react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../../settings");
+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
+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; }
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var SelectAll = function SelectAll(datagridState) {
+  var _columns$;
+  var _useState = (0, _react.useState)(window.innerWidth),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
+  (0, _react.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.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))
+    });
+  }
+  var getProps = DatagridPagination ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
+  var _getProps = getProps(),
+    onChange = _getProps.onChange,
+    selectProps = (0, _objectWithoutProperties2.default)(_getProps, _excluded);
+  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))
+  }, /*#__PURE__*/_react.default.createElement(_react2.TableSelectAll, (0, _extends2.default)({}, selectProps, {
+    name: "".concat(tableId, "-select-all-checkbox-name"),
+    onSelect: onChange,
+    disabled: isFetching || selectProps.disabled,
+    id: "".concat(tableId, "-select-all-checkbox-id")
+  })));
+};
+exports.SelectAll = SelectAll;