@carbon/ibm-products 2.0.0 → 2.0.1

package/es/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js

@@ -0,0 +1,33 @@
+/**
+ * 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 { px } from '@carbon/layout';
+import { pkg } from '../../../settings';
+export var moveColumnIndicatorLine = function moveColumnIndicatorLine(_ref) {
+  var _ref$blockClass = _ref.blockClass,
+    blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
+    clonedSelectionElement = _ref.clonedSelectionElement,
+    ref = _ref.ref,
+    spreadsheetCoords = _ref.spreadsheetCoords,
+    leftScrollAmount = _ref.leftScrollAmount;
+  var closestCell = event.target.closest(".".concat(blockClass, "--interactive-cell-element"));
+  var newColumnIndex = closestCell === null || closestCell === void 0 ? void 0 : closestCell.getAttribute('data-column-index');
+  var originalColumnIndex = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-column-index-original');
+  var closestCellCoords = closestCell.getBoundingClientRect();
+  var indicatorLineElement = ref.current.querySelector(".".concat(blockClass, "__reorder-indicator-line"));
+  var matcherId = clonedSelectionElement === null || clonedSelectionElement === void 0 ? void 0 : clonedSelectionElement.getAttribute('data-matcher-id');
+  var selectionAreaOrigin = ref.current.querySelector("[data-matcher-id=\"".concat(matcherId, "\"]"));
+  if (Number(newColumnIndex) > Number(originalColumnIndex)) {
+    indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + closestCell.offsetWidth - 2 + leftScrollAmount);
+  }
+  if (Number(newColumnIndex) < Number(originalColumnIndex)) {
+    indicatorLineElement.style.left = px(closestCellCoords.left - spreadsheetCoords.left + leftScrollAmount);
+  }
+  if (Number(newColumnIndex) === Number(originalColumnIndex)) {
+    indicatorLineElement.style.left = selectionAreaOrigin.style.left;
+  }
+};

package/es/components/DataSpreadsheet/utils/removeCellSelections.js

@@ -0,0 +1,28 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * 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 { pkg } from '../../../settings';
+
+// Removes the cell selection elements
+export var removeCellSelections = function removeCellSelections(_ref) {
+  var matcher = _ref.matcher,
+    spreadsheetRef = _ref.spreadsheetRef,
+    _ref$blockClass = _ref.blockClass,
+    blockClass = _ref$blockClass === void 0 ? "".concat(pkg.prefix, "--data-spreadsheet") : _ref$blockClass;
+  if (matcher && typeof matcher === 'string') {
+    var selectionToRemove = spreadsheetRef.current.querySelector("[data-matcher-id=\"".concat(matcher, "\"]"));
+    if (selectionToRemove) {
+      selectionToRemove.remove();
+    }
+  } else {
+    var cellSelections = spreadsheetRef.current.querySelectorAll(".".concat(blockClass, "__selection-area--element"));
+    _toConsumableArray(cellSelections).forEach(function (element) {
+      return element.remove();
+    });
+  }
+};

package/es/components/DataSpreadsheet/utils/selectAllCells.js

@@ -0,0 +1,49 @@
+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; }
+/**
+ * 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 { removeCellSelections } from './removeCellSelections';
+import uuidv4 from '../../../global/js/utils/uuidv4';
+export var selectAllCells = function selectAllCells(_ref) {
+  var activeCellCoordinates = _ref.activeCellCoordinates,
+    columns = _ref.columns,
+    setCurrentMatcher = _ref.setCurrentMatcher,
+    setSelectionAreas = _ref.setSelectionAreas,
+    ref = _ref.ref,
+    rows = _ref.rows,
+    updateActiveCellCoordinates = _ref.updateActiveCellCoordinates;
+  removeCellSelections({
+    spreadsheetRef: ref
+  });
+  var selectionPoint1 = {
+    row: 0,
+    column: 0
+  };
+  var selectionPoint2 = {
+    row: rows.length - 1,
+    column: columns.length - 1
+  };
+  var tempMatcher = uuidv4();
+  var newSelectionArea = {
+    point1: selectionPoint1,
+    point2: selectionPoint2,
+    areaCreated: false,
+    matcher: tempMatcher
+  };
+  var coordinatesClone = _objectSpread({}, activeCellCoordinates);
+  updateActiveCellCoordinates({
+    coords: coordinatesClone,
+    updatedValue: {
+      column: 0,
+      row: 0
+    }
+  });
+  setCurrentMatcher(tempMatcher);
+  return setSelectionAreas([newSelectionArea]);
+};

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

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["datagridState"];
+/**
+ * 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.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../../global/js/utils/devtools';
+import { pkg } from '../../../settings';
+import pconsole from '../../../global/js/utils/pconsole';
+import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext';
+import { DatagridContent } from './DatagridContent';
+import { FilterProvider } from './addons/Filtering/FilterProvider';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var componentName = 'Datagrid';
+export var Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var datagridState = _ref.datagridState,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (!datagridState) {
+    pconsole.warn('Datagrid was not passed datagridState which is required to render this component.');
+    return null;
+  }
+  var withVirtualScroll = datagridState.withVirtualScroll,
+    DatagridPagination = datagridState.DatagridPagination,
+    isFetching = datagridState.isFetching,
+    tableId = datagridState.tableId,
+    filterProps = datagridState.filterProps,
+    className = datagridState.className,
+    filters = datagridState.state.filters;
+  var rows = DatagridPagination && datagridState.page || datagridState.rows;
+  return /*#__PURE__*/React.createElement(FilterProvider, {
+    filters: filters
+  }, /*#__PURE__*/React.createElement(InlineEditProvider, null, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    id: tableId,
+    ref: ref,
+    className: cx(className, blockClass, withVirtualScroll ? "".concat(blockClass, "__datagridWrap") : "".concat(blockClass, "__datagridWrap-simple"), !isFetching && rows.length === 0 ? "".concat(blockClass, "__empty-state") : '')
+  }, getDevtoolsProps(componentName)), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__datagridWithPanel ").concat(blockClass, "__displayFlex")
+  }, /*#__PURE__*/React.createElement(DatagridContent, {
+    datagridState: datagridState
+  })) : /*#__PURE__*/React.createElement(DatagridContent, {
+    datagridState: datagridState
+  }))));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+Datagrid = pkg.checkComponentEnabled(Datagrid, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+Datagrid.displayName = componentName;
+Datagrid.propTypes = {
+  /**
+   * The data grid state, much of it being supplied by the useDatagrid hook
+   */
+  datagridState: PropTypes.object.isRequired
+};

package/es/components/Datagrid/Datagrid/DatagridBody.js

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+import React from 'react';
+import DatagridEmptyBody from './DatagridEmptyBody';
+import DatagridVirtualBody from './DatagridVirtualBody';
+import DatagridSimpleBody from './DatagridSimpleBody';
+import DatagridRefBody from './DatagridRefBody';
+var DatagridBody = function DatagridBody(datagridState) {
+  var isFetching = datagridState.isFetching,
+    _datagridState$rows = datagridState.rows,
+    rows = _datagridState$rows === void 0 ? [] : _datagridState$rows,
+    withVirtualScroll = datagridState.withVirtualScroll,
+    withStickyColumn = datagridState.withStickyColumn;
+  if (!isFetching && rows.length === 0) {
+    return /*#__PURE__*/React.createElement(DatagridEmptyBody, datagridState);
+  }
+  if (withVirtualScroll) {
+    return /*#__PURE__*/React.createElement(DatagridVirtualBody, datagridState);
+  }
+  if (withStickyColumn) {
+    return /*#__PURE__*/React.createElement(DatagridRefBody, datagridState);
+  }
+  return /*#__PURE__*/React.createElement(DatagridSimpleBody, datagridState);
+};
+export default DatagridBody;

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -0,0 +1,181 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * 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, { useContext, useEffect, useRef } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { TableContainer, Table } from '@carbon/react';
+import { px } from '@carbon/layout';
+import DatagridHead from './DatagridHead';
+import DatagridBody from './DatagridBody';
+import DatagridToolbar from './DatagridToolbar';
+import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
+import { carbon, pkg } from '../../../settings';
+import { InlineEditContext } from './addons/InlineEdit/InlineEditContext';
+import { FilterContext, FilterPanel } from './addons/Filtering';
+import { handleGridFocus } from './addons/InlineEdit/handleGridFocus';
+import { useClickOutside } from '../../../global/js/hooks';
+import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
+import { FilterSummary } from '../../FilterSummary';
+import { CLEAR_FILTERS } from './addons/Filtering/constants';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var DatagridContent = function DatagridContent(_ref) {
+  var _cx4;
+  var datagridState = _ref.datagridState;
+  var _useContext = useContext(InlineEditContext),
+    inlineEditState = _useContext.state,
+    dispatch = _useContext.dispatch;
+  var _useContext2 = useContext(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 = useRef();
+  var multiKeyTrackingRef = useRef();
+  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.createElement(Table, _extends({}, getTableProps(), {
+      className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".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 handleGridKeyPress({
+          event: event,
+          dispatch: dispatch,
+          instance: datagridState,
+          keysPressedList: keysPressedList,
+          state: inlineEditState,
+          usingMac: usingMac
+        });
+      } : null,
+      onFocus: withInlineEdit ? function () {
+        return handleGridFocus(inlineEditState, dispatch);
+      } : null
+    }), !withVirtualScroll ? /*#__PURE__*/React.createElement(DatagridHead, datagridState) : null, /*#__PURE__*/React.createElement(DatagridBody, _extends({}, datagridState, {
+      rows: rows
+    })));
+  };
+  var _useMultipleKeyTracki = useMultipleKeyTracking({
+      ref: withInlineEdit ? multiKeyTrackingRef : null,
+      containerHasFocus: gridActive,
+      isEditing: !!editId
+    }),
+    keysPressedList = _useMultipleKeyTracki.keysPressedList,
+    usingMac = _useMultipleKeyTracki.usingMac;
+
+  // Provides a width for the region outline for useInlineEdit
+  useEffect(function () {
+    if (!withInlineEdit) {
+      return;
+    }
+    var gridElement = document.querySelector("#".concat(tableId));
+    var tableHeader = gridElement === null || gridElement === void 0 ? void 0 : gridElement.querySelector(".".concat(carbon.prefix, "--data-table-header"));
+    gridElement.style.setProperty("--".concat(blockClass, "--grid-width"), px(totalColumnsWidth + 32));
+    if (gridActive) {
+      gridElement.style.setProperty("--".concat(blockClass, "--grid-header-height"), 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.createElement(FilterSummary, {
+      className: "".concat(blockClass, "__filter-summary"),
+      filters: filterTags,
+      clearFilters: function clearFilters() {
+        return EventEmitter.dispatch(CLEAR_FILTERS);
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, {
+    className: cx("".concat(blockClass, "__grid-container"), withVirtualScroll || fullHeightDatagrid ? "".concat(blockClass, "__full-height") : '', DatagridPagination ? "".concat(blockClass, "__with-pagination") : '', useDenseHeader ? "".concat(blockClass, "__dense-header") : '', (_cx4 = {}, _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active"), gridActive), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-inline-edit"), withInlineEdit), _defineProperty(_cx4, "".concat(blockClass, "__grid-container-grid-active--without-toolbar"), withInlineEdit && !DatagridActions), _cx4)),
+    title: gridTitle,
+    description: gridDescription
+  }, /*#__PURE__*/React.createElement(DatagridToolbar, datagridState), /*#__PURE__*/React.createElement("div", {
+    className: cx("".concat(blockClass, "__table-container"), _defineProperty({}, "".concat(blockClass, "__table-container--filter-open"), panelOpen)),
+    ref: gridAreaRef
+  }, (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/React.createElement(FilterPanel, _extends({
+    updateMethod: "batch"
+  }, getFilterFlyoutProps(), {
+    title: filterProps.panelTitle,
+    filterSections: filterProps.sections
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__table-container-inner")
+  }, renderFilterSummary(), withInlineEdit ? /*#__PURE__*/React.createElement("div", {
+    ref: multiKeyTrackingRef
+  }, renderTable()) : withVirtualScroll ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__virtualScrollContainer"),
+    ref: gridRef
+  }, renderTable()) : renderTable()))), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/React.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, {
+    instance: datagridState
+  }));
+};
+DatagridContent.propTypes = {
+  datagridState: PropTypes.shape({
+    getTableProps: PropTypes.func,
+    getFilterFlyoutProps: PropTypes.func,
+    withVirtualScroll: PropTypes.bool,
+    DatagridActions: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    DatagridPagination: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    CustomizeColumnsTearsheet: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+    isFetching: PropTypes.bool,
+    fullHeightDatagrid: PropTypes.bool,
+    filterProps: PropTypes.object,
+    variableRowHeight: PropTypes.bool,
+    useDenseHeader: PropTypes.bool,
+    withInlineEdit: PropTypes.bool,
+    verticalAlign: PropTypes.string,
+    gridTitle: PropTypes.node,
+    gridDescription: PropTypes.node,
+    page: PropTypes.arrayOf(PropTypes.object),
+    rows: PropTypes.arrayOf(PropTypes.object),
+    tableId: PropTypes.string,
+    totalColumnsWidth: PropTypes.number,
+    gridRef: PropTypes.object,
+    setAllFilters: PropTypes.func,
+    getFilterProps: PropTypes.func,
+    state: PropTypes.object
+  })
+};

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * 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 from 'react';
+import { pkg } from '../../../settings';
+import { TableBody, TableRow, TableCell } from '@carbon/react';
+import { NoDataEmptyState, ErrorEmptyState, NotFoundEmptyState } from '../../EmptyStates';
+var blockClass = "".concat(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.createElement(TableBody, _extends({}, getTableBodyProps({
+    role: false
+  }), {
+    className: "".concat(blockClass, "__empty-state-body")
+  }), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
+    colSpan: headers.length
+  }, emptyStateType === 'error' && /*#__PURE__*/React.createElement(ErrorEmptyState, emptyStateProps), emptyStateType === 'noData' && /*#__PURE__*/React.createElement(NoDataEmptyState, emptyStateProps), emptyStateType === 'notFound' && /*#__PURE__*/React.createElement(NotFoundEmptyState, emptyStateProps))));
+};
+export default DatagridEmptyBody;

package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -0,0 +1,32 @@
+/*
+ * 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 { pkg } from '../../../settings';
+var blockClass = "".concat(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.createElement("div", {
+      className: "".concat(blockClass, "__expanded-row")
+    }, PreviousRowRenderer(datagridState), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__expanded-row-content"),
+      style: {
+        height: expandedContentHeight ? expandedContentHeight : null
+      }
+    }, ExpandedRowContentComponent(datagridState)));
+  };
+};
+export default DatagridExpandedRow;

package/es/components/Datagrid/Datagrid/DatagridHead.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import { TableHead } from '@carbon/react';
+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.createElement(TableHead, null, headerGroups.map(function (headerGroup) {
+    return (
+      // doesn't support header grouping.
+      HeaderRow(datagridState, headRef, headerGroup)
+    );
+  }));
+};
+export default DatagridHead;

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

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * 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
+import React from 'react';
+import cx from 'classnames';
+import { TableHeader, TableRow } from '@carbon/react';
+import { selectionColumnId } from '../common-column-ids';
+import { pkg } from '../../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
+  return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps({
+    role: false
+  }), {
+    className: cx("".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 === selectionColumnId) {
+      // render directly without the wrapper TableHeader
+      return header.render('Header', {
+        key: header.id
+      });
+    }
+    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"), header.canSort), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
+      key: header.id
+    }), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement("div", _extends({}, 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);
+};
+export default useHeaderRow;

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

@@ -0,0 +1,36 @@
+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. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import React from 'react';
+import cx from 'classnames';
+import { pkg } from '../../../settings';
+var blockClass = "".concat(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.createElement("tbody", _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 DatagridRefBody;