@telus-uds/components-community.data-grid 0.1.1 → 1.0.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-community.data-grid
 
-This log was last generated on Fri, 10 Jan 2025 21:41:25 GMT and should not be manually modified.
+This log was last generated on Fri, 31 Jan 2025 20:49:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.0.0
+
+Fri, 31 Jan 2025 20:49:19 GMT
+
+### Major changes
+
+- Add CommonJS builds along with ESM (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-web to v4.0.0
+- Bump @telus-uds/components-base to v3.0.0
+- Bump @telus-uds/system-theme-tokens to v4.0.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
+## 0.1.2
+
+Wed, 22 Jan 2025 21:08:36 GMT
+
+### Patches
+
+- Bump @telus-uds/components-web to v3.4.0
+- Bump @telus-uds/components-base to v2.5.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+
 ## 0.1.1
 
-Fri, 10 Jan 2025 21:41:25 GMT
+Fri, 10 Jan 2025 21:49:25 GMT
 
 ### Patches
 

package/jest.config.cjs

@@ -9,7 +9,7 @@ module.exports = () => ({
     '.+\\.(otf|png|jpg)$': 'identity-obj-proxy',
     '\\.icon.svg': '<rootDir>/__mocks__/iconMock.jsx',
     '\\.css': '<rootDir>/__mocks__/styleMock.js',
-    '^@telus-uds/components-base/server$': '<rootDir>/../../../components-base/lib/server.js'
+    '^@telus-uds/components-base/server$': '<rootDir>/../../../components-base/lib/cjs/server.js'
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   transformIgnorePatterns: [

package/lib/cjs/DataGrid.js

@@ -0,0 +1,369 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledIconContainer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _utility = require("./utility");
+var _DataGridTable = _interopRequireDefault(require("./DataGridTable"));
+var _DataGridHead = _interopRequireDefault(require("./DataGridHead"));
+var _DataGridBody = _interopRequireDefault(require("./DataGridBody"));
+var _DataGridRow = _interopRequireDefault(require("./DataGridRow"));
+var _DataGridCell = _interopRequireDefault(require("./DataGridCell"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledIconContainer = exports.StyledIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DataGrid__StyledIconContainer",
+  componentId: "[object Object]__sc-1ddcmt-0"
+})(["display:flex;box-sizing:border-box;align-items:center;width:60px;justify-content:space-between;"]);
+const DataGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    rows = [],
+    columns = [],
+    groupedRows,
+    showCheckbox = false,
+    isSortable = false,
+    makeScrollBarAlwaysVisible = true,
+    tokens,
+    variant,
+    copy = 'en',
+    testID = 'data-grid'
+  } = _ref;
+  const themeTokens = (0, _componentsBase.useThemeTokens)('DataGrid', tokens, variant);
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const {
+    expandRowIcon,
+    hideExpandedRowIcon,
+    sortColumnIconDown,
+    sortColumnIconUp
+  } = themeTokens;
+  const [data, setData] = _react.default.useState(groupedRows ? (0, _utility.resetRowData)([...groupedRows], true) : (0, _utility.resetRowData)([...rows]));
+  const [columnsData, setColumnsData] = _react.default.useState((0, _utility.resetColumnsData)(columns));
+  const [checkAllState, setCheckAllState] = _react.default.useState(false);
+  const shouldCheckHeaderBox = allData => {
+    let isARowUnselectedInAllGroups = null;
+    if (groupedRows) {
+      isARowUnselectedInAllGroups = Object.keys(allData).some(el => {
+        return (0, _utility.isAtLeastOneRowUnselected)(allData[el].data);
+      });
+    } else {
+      isARowUnselectedInAllGroups = (0, _utility.isAtLeastOneRowUnselected)(allData);
+    }
+    return !isARowUnselectedInAllGroups;
+  };
+  const shouldDisplayIconColumn = (allData, _showCheckbox) => {
+    let doesOneRowHaveExpandedContent = null;
+    if (groupedRows) {
+      doesOneRowHaveExpandedContent = Object.keys(allData).some(el => {
+        return allData[el].data.some(eachData => eachData.hasExpandedRow === true);
+      });
+    } else {
+      doesOneRowHaveExpandedContent = allData.some(el => el.hasExpandedRow === true);
+    }
+    return !!(_showCheckbox || doesOneRowHaveExpandedContent);
+  };
+  const toggleSelectAll = () => {
+    let _rows = null;
+    if (groupedRows) {
+      _rows = {};
+      Object.keys(data).forEach(el => {
+        _rows[el] = {
+          ...data[el]
+        };
+        _rows[el].data = (0, _utility.toggleAllCheckBoxes)(data[el].data, checkAllState);
+      });
+    } else {
+      _rows = (0, _utility.toggleAllCheckBoxes)(data, checkAllState);
+    }
+    setData(_rows);
+    setCheckAllState(!checkAllState);
+  };
+  const toggleCheckbox = rowId => {
+    let _data = null;
+    if (groupedRows) {
+      const [group, _] = rowId.split('-');
+      const id = parseInt(_, 10);
+      _data = {
+        ...data
+      };
+      _data[group].data = (0, _utility.toggleRowCheckbox)(_data[group].data, id);
+    } else {
+      _data = (0, _utility.toggleRowCheckbox)(data, rowId);
+    }
+    setData(_data);
+  };
+  const toggleRowExpansion = rowId => {
+    let _row = null;
+    if (groupedRows) {
+      const [group, _] = rowId.split('-');
+      const id = parseInt(_, 10);
+      _row = {
+        ...data
+      };
+      _row[group].data = (0, _utility.toggleExpandedRow)(_row[group].data, id);
+    } else {
+      _row = (0, _utility.toggleExpandedRow)(data, rowId);
+    }
+    setData(_row);
+  };
+  const HeaderCheckBoxDisplay = showCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Checkbox, {
+    label: getCopy('all'),
+    checked: shouldCheckHeaderBox(data),
+    onChange: toggleSelectAll
+  });
+  const buildCheckBoxDisplay = (_showCheckbox, row, rowId) => _showCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Checkbox, {
+    checked: row.isSelected,
+    onChange: () => toggleCheckbox(rowId)
+  });
+  const buildDisplayCaret = (row, rowId) => row.hasExpandedRow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+    onPress: () => toggleRowExpansion(rowId),
+    icon: row.isExpandedRowOpen === true ? hideExpandedRowIcon : expandRowIcon,
+    accessibilityRole: `button-${rowId}`,
+    accessibilityLabel: row.isExpandedRowOpen === true ? getCopy('hideRow') : getCopy('expandRow')
+  });
+  const buildExpandedRow = (row, rowId) => row.isExpandedRowOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridRow.default, {
+    type: _utility.ROW_TYPE.EXPANDEDROW,
+    tokens: themeTokens,
+    rowId: rowId,
+    isExpandedRowOpen: row.isExpandedRowOpen,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
+      type: _utility.CELL_TYPE.EXPANDEDROWCELL,
+      tokens: themeTokens,
+      columnsLength: columns.length,
+      showCheckbox: showCheckbox,
+      isExpandedRowOpen: row.isExpandedRowOpen,
+      children: row.expandedRowChildComponent.component
+    })
+  });
+  const buildRowContent = (row, rowId, _showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DataGridRow.default, {
+      tokens: themeTokens,
+      rowId: rowId,
+      isExpandedRowOpen: row.isExpandedRowOpen,
+      hasExpandedContent: row.hasExpandedRow,
+      onClick: toggleRowExpansion,
+      children: [shouldDisplayIconColumn(data, _showCheckbox) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
+        tokens: themeTokens,
+        isExpandedRowOpen: row.isExpandedRowOpen,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledIconContainer, {
+          children: [CheckBoxDisplay, DisplayCaret]
+        })
+      }), columnsData.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
+        tokens: themeTokens,
+        isExpandedRowOpen: row.isExpandedRowOpen,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          block: true,
+          variant: {
+            size: 'small'
+          },
+          tokens: {
+            color: themeTokens.cellTextColor
+          },
+          children: row[column.key]
+        })
+      }, `${rowId}-${column.key}`))]
+    }, rowId), ExpandedRow]
+  }, rowId);
+  const sortColumn = column => {
+    const _col = {
+      ...column
+    };
+    if (!groupedRows) {
+      const _data = [...data].sort((a, b) => {
+        const first = _col.dataType === _utility.DATA_TYPE.NUMBER ? parseFloat(a[_col.key]) : a[_col.key].toUpperCase();
+        const next = _col.dataType === _utility.DATA_TYPE.NUMBER ? parseFloat(b[_col.key]) : b[_col.key].toUpperCase();
+        if (_col.sortDirection === _utility.SORT_DIRECTION.DESC) {
+          if (first < next) return -1;
+          return next === first ? 0 : 1;
+        }
+        if (next < first) return -1;
+        return first === next ? 0 : 1;
+      });
+      _col.sortDirection = _col.sortDirection === _utility.SORT_DIRECTION.DESC ? _utility.SORT_DIRECTION.ASC : _utility.SORT_DIRECTION.DESC;
+      _col.currentSort = true;
+      const _columns = (0, _utility.resetColumnsData)(columnsData);
+      _columns[columnsData.findIndex(_el => _el.key === column.key)] = _col;
+      setColumnsData(_columns);
+      setData(_data);
+    }
+  };
+  let HeaderContent = null;
+  let BodyContent = null;
+  if (groupedRows) {
+    BodyContent = Object.keys(data).map(group => {
+      const DefaultSubHeading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: 'h3'
+        },
+        children: data[group].name
+      });
+      const GroupHeaderRow = /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridRow.default, {
+        type: _utility.ROW_TYPE.EXPANDEDROW,
+        tokens: themeTokens,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
+          type: _utility.CELL_TYPE.SUBHEADING,
+          tokens: themeTokens,
+          columnsLength: columnsData.length,
+          children: data[group].groupHeaderComponent || DefaultSubHeading
+        })
+      }, group);
+      const DataRow = data[group].data.map(row => {
+        const rowId = `${group}-${row.id}`;
+        const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId);
+        const DisplayCaret = buildDisplayCaret(row, rowId);
+        const ExpandedRow = buildExpandedRow(row, rowId);
+        return buildRowContent(row, rowId, showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow);
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+        children: [GroupHeaderRow, DataRow]
+      }, group);
+    });
+  } else {
+    BodyContent = data.map(row => {
+      const rowId = row.id;
+      const CheckBoxDisplay = buildCheckBoxDisplay(showCheckbox, row, rowId);
+      const DisplayCaret = buildDisplayCaret(row, rowId);
+      const ExpandedRow = buildExpandedRow(row, rowId);
+      return buildRowContent(row, rowId, showCheckbox, CheckBoxDisplay, DisplayCaret, ExpandedRow);
+    });
+  }
+  HeaderContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [shouldDisplayIconColumn(data, showCheckbox) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridCell.default, {
+      type: _utility.CELL_TYPE.HEADING,
+      tokens: themeTokens,
+      isFirstCol: true,
+      children: HeaderCheckBoxDisplay
+    }), columnsData.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DataGridCell.default, {
+      type: _utility.CELL_TYPE.HEADING,
+      tokens: themeTokens,
+      isSortable: isSortable,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        block: true,
+        variant: {
+          size: 'h4'
+        },
+        tokens: {
+          color: themeTokens.headerTextColor
+        },
+        children: column.label
+      }), isSortable && column.isSortable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+        variant: {
+          size: 'small'
+        },
+        tokens: {
+          iconColor: column.currentSort ? themeTokens.sortColumnIconActiveColor : themeTokens.sortColumnIconDefaultColor
+        },
+        onPress: () => {
+          if (typeof column.fn === 'function') {
+            column.fn(column, data, setData, columnsData, setColumnsData);
+          } else sortColumn(column);
+        },
+        icon: column.sortDirection === _utility.SORT_DIRECTION.ASC ? sortColumnIconUp : sortColumnIconDown,
+        accessibilityRole: "sort-button",
+        accessibilityLabel: getCopy('button')
+      })]
+    }, column.key))]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridTable.default, {
+    tokens: themeTokens,
+    makeScrollBarAlwaysVisible: makeScrollBarAlwaysVisible,
+    ref: ref,
+    testID: testID,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridHead.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridRow.default, {
+          type: _utility.ROW_TYPE.HEADING,
+          children: HeaderContent
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridBody.default, {
+        children: BodyContent
+      })]
+    })
+  });
+});
+DataGrid.displayName = 'DataGrid';
+DataGrid.propTypes = {
+  /**
+   * Use `columns` to pass the data for data-grid column header items.
+   */
+  columns: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired,
+    width: _propTypes.default.string,
+    dataType: _propTypes.default.oneOf(['string', 'number']),
+    isSortable: _propTypes.default.bool,
+    // Set this to true to enable sorting for this column
+    fn: _propTypes.default.func
+  })).isRequired,
+  /**
+   * Use `groupedRows` to pass the grouped data for display
+   */
+  groupedRows: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    groupHeaderComponent: _propTypes.default.node,
+    data: _propTypes.default.arrayOf(_propTypes.default.shape({
+      id: _propTypes.default.number.isRequired,
+      expandedRow: _propTypes.default.shape({
+        rows: _propTypes.default.arrayOf(_propTypes.default.shape({
+          id: _propTypes.default.number.isRequired
+        })),
+        columns: _propTypes.default.arrayOf(_propTypes.default.shape({
+          key: _propTypes.default.string.isRequired,
+          label: _propTypes.default.string.isRequired
+        }))
+      }),
+      expandedRowChildComponent: _propTypes.default.shape({
+        component: _propTypes.default.node,
+        displayOnLoad: _propTypes.default.bool.isRequired
+      })
+    }))
+  })),
+  /**
+   * Use `rows` to pass ungrouped data for data-grid row cells items.
+   */
+  rows: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.number.isRequired,
+    expandedRowChildComponent: _propTypes.default.shape({
+      component: _propTypes.default.node,
+      displayOnLoad: _propTypes.default.bool.isRequired
+    })
+  })),
+  /**
+   * Set this to true to enable columns to become sortable.
+   */
+  isSortable: _propTypes.default.bool,
+  /**
+   * Set this to true to make scrollbar always visible when content is larger than the grid
+   */
+  makeScrollBarAlwaysVisible: _propTypes.default.bool,
+  /**
+   * Set this to true to enable checkboxes in the first column.
+   */
+  showCheckbox: _propTypes.default.bool,
+  /**
+   * Use tokens prop to override theme tokens
+   */
+  tokens: _propTypes.default.object,
+  /**
+   * No available variants
+   */
+  variant: _componentsBase.variantProp.propType,
+  /**
+   * Use copy for localisations of keys.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  /**
+   * Use in tests if the datagrid test cases need to find the element with the id.
+   */
+  testID: _propTypes.default.string
+};
+var _default = exports.default = DataGrid;

package/lib/cjs/DataGridBody.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DataGridBody = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+    ref: ref,
+    children: children
+  });
+});
+DataGridBody.displayName = 'DataGridBody';
+DataGridBody.propTypes = {
+  /**
+   * Accepts any React or HTML node
+   */
+  children: _propTypes.default.node.isRequired
+};
+var _default = exports.default = DataGridBody;

package/lib/cjs/DataGridCell.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledCell = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _utility = require("./utility");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledHeaderCell = /*#__PURE__*/_styledComponents.default.th.withConfig({
+  displayName: "DataGridCell__StyledHeaderCell",
+  componentId: "[object Object]__sc-6nkvhz-0"
+})(["", ""], props => {
+  return (0, _styledComponents.css)(["background-color:", ";border-top:solid ", "px ", ";border-bottom:solid ", "px ", ";padding:", "px;text-align:", ";box-sizing:border-box;font-size:", "px;font-weight:bold;line-height:", "px;color:", ";width:", ";font-family:", ";"], props.headerRowBackgroundColor, props.headerBorderTopWidth, props.headerBorderTopColor, props.headerBorderBottomWidth, props.headerBorderBottomColor, props.headerPadding, props.headerTextAlign, props.headerFontSize, props.headerLineHeight * props.headerFontSize, props.headerTextColor, props.firstColWidth, props.headerFontFamily);
+});
+const StyledHeaderCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DataGridCell__StyledHeaderCellDiv",
+  componentId: "[object Object]__sc-6nkvhz-1"
+})(["display:flex;align-items:center;"]);
+const StyledGroupHeaderCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
+  displayName: "DataGridCell__StyledGroupHeaderCell",
+  componentId: "[object Object]__sc-6nkvhz-2"
+})(["", ""], props => {
+  return (0, _styledComponents.css)(["background-color:", ";padding:", "px;border-top:solid ", "px ", ";text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.subHeadingBackgroundColor, props.cellPadding, props.cellBorderBottomWidth, props.cellBorderBottomColor, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
+});
+const StyledGroupHeaderCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DataGridCell__StyledGroupHeaderCellDiv",
+  componentId: "[object Object]__sc-6nkvhz-3"
+})(["display:flex;align-items:center;justify-content:start;"]);
+const StyledExpandedCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
+  displayName: "DataGridCell__StyledExpandedCell",
+  componentId: "[object Object]__sc-6nkvhz-4"
+})(["", ""], props => {
+  return (0, _styledComponents.css)(["padding:", "px;border-bottom:", " text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.cellPadding, props.isExpandedRowOpen ? `solid ${props.cellBorderBottomWidth}px ${props.headerBorderBottomColor};` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
+});
+const StyledExpandedCellDiv = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DataGridCell__StyledExpandedCellDiv",
+  componentId: "[object Object]__sc-6nkvhz-5"
+})(["", ""], props => {
+  return (0, _styledComponents.css)(["display:flex;align-items:center;justify-content:", ";padding-left:", ";"], props.expandedContentAlignment ? props.expandedContentAlignment : 'start', props.showCheckbox ? `${props.expandedContentLeftPadding}px` : `${props.expandedContentDefaultLeftPadding}px`);
+});
+const StyledCell = exports.StyledCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
+  displayName: "DataGridCell__StyledCell",
+  componentId: "[object Object]__sc-6nkvhz-6"
+})(["", ""], props => {
+  if (props.isExpandedRowOpen) {
+    return (0, _styledComponents.css)(["padding:", "px;text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";border-top:solid ", "px ", ";"], props.cellPadding, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily, props.headerBorderTopWidth, props.headerBorderTopColor);
+  }
+  return (0, _styledComponents.css)(["padding:", "px;border-bottom:", ";text-align:", ";font-size:", "px;font-weight:normal;line-height:", "px;color:", ";font-family:", ";"], props.cellPadding, props.hideRowBottomBorder === 1 ? `none` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`, props.cellTextAlign, props.cellFontSize, props.cellLineHeight * props.cellFontSize, props.cellTextColor, props.cellFontFamily);
+});
+const DataGridCell = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    tokens,
+    type,
+    columnsLength,
+    showCheckbox = false,
+    isFirstCol = false,
+    isExpandedRowOpen = false
+  } = _ref;
+  if (type === _utility.CELL_TYPE.HEADING) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
+      ...tokens,
+      firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCellDiv, {
+        children: children
+      })
+    });
+  }
+  if (type === _utility.CELL_TYPE.SUBHEADING) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGroupHeaderCell, {
+      colSpan: columnsLength + 1,
+      ...tokens,
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGroupHeaderCellDiv, {
+        ...tokens,
+        children: children
+      })
+    });
+  }
+  if (type === _utility.CELL_TYPE.EXPANDEDROWCELL) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledExpandedCell, {
+      colSpan: columnsLength + 1,
+      ...tokens,
+      isExpandedRowOpen: isExpandedRowOpen,
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledExpandedCellDiv, {
+        showCheckbox: showCheckbox,
+        ...tokens,
+        children: children
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCell, {
+    ...tokens,
+    isExpandedRowOpen: isExpandedRowOpen,
+    ref: ref,
+    children: children
+  });
+});
+DataGridCell.displayName = 'DataGridCell';
+DataGridCell.propTypes = {
+  /**
+    cell type
+  */
+  type: _propTypes.default.oneOf(['heading', 'subHeading', 'expandedRowCell']),
+  /**
+   * Accepts any React or HTML node
+   */
+  children: _propTypes.default.node,
+  /**
+   * Tokens passed to the component
+   */
+  tokens: _propTypes.default.object,
+  /**
+   * columnsLength passed to the component for certain scenarios in which colSpan is required
+   */
+  columnsLength: _propTypes.default.number,
+  /**
+   * showCheckbox passed to the component for certain scenarios in which checkbox visibility impacts the display design
+   */
+  showCheckbox: _propTypes.default.bool,
+  /**
+   * isFirstCol passed to the component to determine if cell is first within the row
+   */
+  isFirstCol: _propTypes.default.bool,
+  /**
+   * isExpandedRowOpen passed to the component to determine if cell is displaying additional data
+   */
+  isExpandedRowOpen: _propTypes.default.bool
+};
+var _default = exports.default = DataGridCell;

package/lib/cjs/DataGridHead.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DataGridHead = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+    ref: ref,
+    children: children
+  });
+});
+DataGridHead.displayName = 'DataGridHead';
+DataGridHead.propTypes = {
+  /**
+   * Accepts any React or HTML node
+   */
+  children: _propTypes.default.node
+};
+var _default = exports.default = DataGridHead;