@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Table/StatefulTable.js

@@ -0,0 +1,244 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import propTypes from "../node_modules/.pnpm/@styled-system_prop-types@5.1.5_styled-system@5.1.5/node_modules/@styled-system/prop-types/dist/index.esm.js";
+import { pick } from "../utils/subset.js";
+import BaseTable from "./BaseTable.js";
+import { addExpandableControl } from "./addExpandableControl.js";
+import { addSelectableControl } from "./addSelectableControl.js";
+import Pagination from "../Pagination/Pagination.js";
+const propNames = [
+  ...Object.keys(propTypes.space),
+  "columns",
+  "rows",
+  "noRowsContent",
+  "keyField",
+  "id",
+  "loading",
+  "footerRows",
+  "rowHovers",
+  "compact",
+  "className",
+  "stickyHeader",
+  "onRowMouseEnter",
+  "onRowMouseLeave"
+];
+const getAllRowKeys = (rows = [], keyField) => rows.map((row) => row[keyField]);
+const paginateRows = (rows, rowsPerPage) => rowsPerPage ? rows.reduce((acc, item, i) => i % rowsPerPage ? acc : [...acc, rows.slice(i, i + rowsPerPage)], []) : [rows];
+const _StatefulTable = class _StatefulTable extends Component {
+  constructor(props) {
+    super(props);
+    this.onRowExpansionChangeHandler = () => {
+      const { onRowExpansionChange } = this.props;
+      const { expandedRows: expandedRows2, currentPage } = this.state;
+      if (onRowExpansionChange) {
+        onRowExpansionChange(this.currentRowsByPageSelector(expandedRows2, currentPage));
+      }
+    };
+    this.onExpandRow = (row) => {
+      const { keyField, onRowExpansionChange } = this.props;
+      const currentRowKey = row[keyField];
+      const newExpandedRows = !row.expanded ? this.addRowToExpandedRows(currentRowKey) : this.removeRowFromExpandedRows(currentRowKey);
+      this.setState(
+        {
+          expandedRows: newExpandedRows
+        },
+        onRowExpansionChange(newExpandedRows)
+      );
+    };
+    this.removeRowFromExpandedRows = (rowKeyToRemove) => {
+      const { expandedRows: expandedRows2 } = this.state;
+      return expandedRows2.filter((rowKey) => rowKey !== rowKeyToRemove);
+    };
+    this.addRowToExpandedRows = (rowKeyToAdd) => {
+      const { expandedRows: expandedRows2 } = this.state;
+      return [...expandedRows2, rowKeyToAdd];
+    };
+    this.onRowSelectionChangeHandler = () => {
+      const { onRowSelectionChange } = this.props;
+      const { selectedRows: selectedRows2, currentPage } = this.state;
+      if (onRowSelectionChange) {
+        onRowSelectionChange(this.currentRowsByPageSelector(selectedRows2, currentPage));
+      }
+    };
+    this.onSelectRow = (row) => {
+      const { currentPage } = this.state;
+      const { keyField } = this.props;
+      const currentRowKey = row[keyField];
+      const newRowSelections = !row.selected ? this.addRowToSelection(currentRowKey) : this.removeRowFromSelection(currentRowKey);
+      this.setState(
+        {
+          selectedRows: newRowSelections,
+          isHeaderSelected: this.areAllRowsSelectedOnPage(newRowSelections, currentPage)
+        },
+        this.onRowSelectionChangeHandler
+      );
+    };
+    this.onSelectHeader = () => {
+      const { isHeaderSelected, currentPage } = this.state;
+      const { keyField } = this.props;
+      const currentRowKeys = getAllRowKeys(this.rowsByPageSelector(currentPage), keyField);
+      this.setState(
+        {
+          isHeaderSelected: !isHeaderSelected,
+          selectedRows: isHeaderSelected ? this.removeRowsFromSelection(currentRowKeys) : this.addRowsToSelection(currentRowKeys)
+        },
+        this.onRowSelectionChangeHandler
+      );
+    };
+    this.removeRowFromSelection = (rowKeyToRemove) => {
+      const { selectedRows: selectedRows2 } = this.state;
+      return selectedRows2.filter((rowKey) => rowKey !== rowKeyToRemove);
+    };
+    this.addRowToSelection = (rowKeyToAdd) => {
+      const { selectedRows: selectedRows2 } = this.state;
+      return [...selectedRows2, rowKeyToAdd];
+    };
+    this.addRowsToSelection = (rowsKeysToAdd) => {
+      const { selectedRows: selectedRows2 } = this.state;
+      return [...selectedRows2, ...rowsKeysToAdd];
+    };
+    this.removeRowsFromSelection = (rowKeysToRemove) => {
+      const { selectedRows: selectedRows2 } = this.state;
+      return selectedRows2.filter((row) => !rowKeysToRemove.includes(row));
+    };
+    this.rowsByPageSelector = (pageNumber) => {
+      const { paginatedRows } = this.state;
+      return paginatedRows[pageNumber - 1];
+    };
+    this.goToPage = (pageNumber) => {
+      const { selectedRows: selectedRows2 } = this.state;
+      const { hasSelectableRows } = this.props;
+      this.setState(
+        {
+          currentPage: pageNumber,
+          ...hasSelectableRows && {
+            isHeaderSelected: this.areAllRowsSelectedOnPage(selectedRows2, pageNumber)
+          }
+        },
+        this.onPageSelectionChangeHandler
+      );
+    };
+    this.currentRowsByPageSelector = (rows2, pageNumber) => {
+      const currentRows = this.rowsByPageSelector(pageNumber);
+      const { keyField } = this.props;
+      const allRowKeysOnPage = getAllRowKeys(currentRows, keyField);
+      return allRowKeysOnPage.filter((rowKey) => rows2.includes(rowKey));
+    };
+    this.areAllRowsSelectedOnPage = (selectedRows2, pageNumber) => {
+      const { keyField } = this.props;
+      const currentRows = this.rowsByPageSelector(pageNumber);
+      const allRowKeysOnPage = getAllRowKeys(currentRows, keyField);
+      return allRowKeysOnPage.length === this.currentRowsByPageSelector(selectedRows2, pageNumber).length;
+    };
+    this.goToPrevPage = () => {
+      const { currentPage } = this.state;
+      this.goToPage(currentPage - 1);
+    };
+    this.goToNextPage = () => {
+      const { currentPage } = this.state;
+      this.goToPage(currentPage + 1);
+    };
+    this.onPageSelectionChangeHandler = () => {
+      const { onPageChange } = this.props;
+      const { currentPage } = this.state;
+      if (onPageChange) {
+        onPageChange(currentPage);
+      }
+    };
+    this.getControlProps = () => {
+      const { selectedRows: selectedRows2, isHeaderSelected, currentPage, expandedRows: expandedRows2 } = this.state;
+      const { hasSelectableRows, hasExpandableRows } = this.props;
+      const selectionConfig = {
+        onSelectRow: this.onSelectRow,
+        onSelectHeader: this.onSelectHeader,
+        selectedRows: this.currentRowsByPageSelector(selectedRows2, currentPage),
+        isHeaderSelected
+      };
+      const expandableConfig = {
+        onRowExpansionChange: this.onExpandRow,
+        expandedRows: expandedRows2
+      };
+      const props2 = {
+        ...this.props,
+        rows: this.rowsByPageSelector(currentPage) || [],
+        ...hasSelectableRows && selectionConfig,
+        ...hasExpandableRows && expandableConfig
+      };
+      const selectableProps = { ...props2, ...addSelectableControl(props2) };
+      const expandableProps = { ...props2, ...addExpandableControl(props2) };
+      if (hasSelectableRows && hasExpandableRows) return { ...props2, ...addExpandableControl(selectableProps) };
+      if (hasSelectableRows) return selectableProps;
+      if (hasExpandableRows) return expandableProps;
+      return props2;
+    };
+    const { selectedRows, expandedRows, rowsPerPage, rows } = this.props;
+    this.state = {
+      selectedRows: selectedRows || [],
+      expandedRows: expandedRows || [],
+      isHeaderSelected: false,
+      currentPage: 1,
+      paginatedRows: paginateRows(rows, rowsPerPage)
+    };
+  }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const { rows, rowsPerPage } = nextProps;
+    const paginatedRows = paginateRows(rows, rowsPerPage);
+    const { currentPage } = prevState;
+    return {
+      paginatedRows,
+      currentPage: paginatedRows.length < currentPage ? paginatedRows.length || 1 : currentPage
+    };
+  }
+  render() {
+    const { paginatedRows, currentPage } = this.state;
+    const { rowsPerPage, paginationProps, paginationCss } = this.props;
+    const baseTableProps = pick(this.getControlProps(), ...propNames);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BaseTable, { ...baseTableProps }),
+      rowsPerPage && /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          pt: "x2",
+          currentPage,
+          totalPages: paginatedRows.length || 1,
+          onSelectPage: this.goToPage,
+          onNext: this.goToNextPage,
+          onPrevious: this.goToPrevPage,
+          justifyContent: "flex-end",
+          css: paginationCss,
+          ...paginationProps
+        }
+      )
+    ] });
+  }
+};
+_StatefulTable.defaultProps = {
+  noRowsContent: "No records have been created for this table.",
+  keyField: "id",
+  id: void 0,
+  loading: false,
+  footerRows: [],
+  rowHovers: true,
+  compact: false,
+  className: void 0,
+  stickyHeader: false,
+  onRowMouseEnter: () => {
+  },
+  onRowMouseLeave: () => {
+  },
+  hasSelectableRows: false,
+  selectedRows: [],
+  isHeaderSelected: false,
+  onRowExpansionChange: () => {
+  },
+  selectAllAriaLabel: void 0,
+  deselectAllAriaLabel: void 0,
+  /* PM support only */
+  paginationCss: void 0,
+  paginationProps: {}
+};
+let StatefulTable = _StatefulTable;
+export {
+  StatefulTable as default
+};
+//# sourceMappingURL=StatefulTable.js.map

package/dist/esm/Table/StatefulTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatefulTable.js","sources":["../../../src/Table/StatefulTable.tsx"],"sourcesContent":["import React, { Component } from \"react\";\nimport propTypes from \"@styled-system/prop-types\";\nimport { Pagination } from \"../Pagination\";\nimport { pick } from \"../utils/subset\";\nimport BaseTable, { BaseTableProps } from \"./BaseTable\";\nimport { addExpandableControl } from \"./addExpandableControl\";\nimport { addSelectableControl } from \"./addSelectableControl\";\n\nconst propNames = [\n  ...Object.keys(propTypes.space),\n  \"columns\",\n  \"rows\",\n  \"noRowsContent\",\n  \"keyField\",\n  \"id\",\n  \"loading\",\n  \"footerRows\",\n  \"rowHovers\",\n  \"compact\",\n  \"className\",\n  \"stickyHeader\",\n  \"onRowMouseEnter\",\n  \"onRowMouseLeave\",\n];\n\nexport type StatefulTableProps<ColumnMetaData> = BaseTableProps<ColumnMetaData> & {\n  selectedRows?: string[];\n  onRowSelectionChange?: (...args: any[]) => any;\n  onRowExpansionChange?: (...args: any[]) => any;\n  rowsPerPage?: number;\n  onPageChange?: (...args: any[]) => any;\n  selectAllAriaLabel?: string;\n  deselectAllAriaLabel?: string;\n  paginationCss?: any;\n  paginationProps?: any;\n  expandedRows?: any[];\n  hasSelectableRows?: boolean;\n  hasExpandableRows?: boolean;\n  onSelectRow?: (...args: any[]) => any;\n  onSelectHeader?: (...args: any[]) => any;\n  isHeaderSelected?: any;\n};\n\nconst getAllRowKeys = (rows = [], keyField) => rows.map((row) => row[keyField]);\nconst paginateRows = (rows, rowsPerPage) =>\n  rowsPerPage\n    ? rows.reduce((acc, item, i) => (i % rowsPerPage ? acc : [...acc, rows.slice(i, i + rowsPerPage)]), [])\n    : [rows];\n\ntype StatefulTableState = {\n  selectedRows: any;\n  expandedRows: any;\n  isHeaderSelected: boolean;\n  currentPage: number;\n  paginatedRows: any;\n};\n\nclass StatefulTable<ColumnMetaData> extends Component<StatefulTableProps<ColumnMetaData>, StatefulTableState> {\n  static defaultProps = {\n    noRowsContent: \"No records have been created for this table.\",\n    keyField: \"id\",\n    id: undefined,\n    loading: false,\n    footerRows: [],\n    rowHovers: true,\n    compact: false,\n    className: undefined,\n    stickyHeader: false,\n    onRowMouseEnter: () => {},\n    onRowMouseLeave: () => {},\n    hasSelectableRows: false,\n    selectedRows: [],\n    isHeaderSelected: false,\n    onRowExpansionChange: () => {},\n    selectAllAriaLabel: undefined,\n    deselectAllAriaLabel: undefined,\n    /* PM support only */\n    paginationCss: undefined,\n    paginationProps: {},\n  };\n\n  constructor(props) {\n    super(props);\n    const { selectedRows, expandedRows, rowsPerPage, rows } = this.props;\n    this.state = {\n      selectedRows: selectedRows || [],\n      expandedRows: expandedRows || [],\n      isHeaderSelected: false,\n      currentPage: 1,\n      paginatedRows: paginateRows(rows, rowsPerPage),\n    };\n  }\n  static getDerivedStateFromProps(nextProps, prevState) {\n    const { rows, rowsPerPage } = nextProps;\n    const paginatedRows = paginateRows(rows, rowsPerPage);\n    const { currentPage } = prevState;\n    // when the rows prop changes paginate the new rows and reset the current page\n    return {\n      paginatedRows,\n      currentPage: paginatedRows.length < currentPage ? paginatedRows.length || 1 : currentPage,\n    };\n  }\n  onRowExpansionChangeHandler = () => {\n    const { onRowExpansionChange } = this.props;\n    const { expandedRows, currentPage } = this.state;\n    if (onRowExpansionChange) {\n      onRowExpansionChange(this.currentRowsByPageSelector(expandedRows, currentPage));\n    }\n  };\n  onExpandRow = (row) => {\n    const { keyField, onRowExpansionChange } = this.props;\n    const currentRowKey = row[keyField];\n    const newExpandedRows = !row.expanded\n      ? this.addRowToExpandedRows(currentRowKey)\n      : this.removeRowFromExpandedRows(currentRowKey);\n    this.setState(\n      {\n        expandedRows: newExpandedRows,\n      },\n      onRowExpansionChange(newExpandedRows)\n    );\n  };\n  removeRowFromExpandedRows = (rowKeyToRemove) => {\n    const { expandedRows } = this.state;\n    return expandedRows.filter((rowKey) => rowKey !== rowKeyToRemove);\n  };\n  addRowToExpandedRows = (rowKeyToAdd) => {\n    const { expandedRows } = this.state;\n    return [...expandedRows, rowKeyToAdd];\n  };\n  onRowSelectionChangeHandler = () => {\n    const { onRowSelectionChange } = this.props;\n    const { selectedRows, currentPage } = this.state;\n    if (onRowSelectionChange) {\n      onRowSelectionChange(this.currentRowsByPageSelector(selectedRows, currentPage));\n    }\n  };\n  onSelectRow = (row) => {\n    const { currentPage } = this.state;\n    const { keyField } = this.props;\n    const currentRowKey = row[keyField];\n    const newRowSelections = !row.selected\n      ? this.addRowToSelection(currentRowKey)\n      : this.removeRowFromSelection(currentRowKey);\n    this.setState(\n      {\n        selectedRows: newRowSelections,\n        isHeaderSelected: this.areAllRowsSelectedOnPage(newRowSelections, currentPage),\n      },\n      this.onRowSelectionChangeHandler\n    );\n  };\n  onSelectHeader = () => {\n    const { isHeaderSelected, currentPage } = this.state;\n    const { keyField } = this.props;\n    const currentRowKeys = getAllRowKeys(this.rowsByPageSelector(currentPage), keyField);\n    this.setState(\n      {\n        isHeaderSelected: !isHeaderSelected,\n        selectedRows: isHeaderSelected\n          ? this.removeRowsFromSelection(currentRowKeys)\n          : this.addRowsToSelection(currentRowKeys),\n      },\n      this.onRowSelectionChangeHandler\n    );\n  };\n  removeRowFromSelection = (rowKeyToRemove) => {\n    const { selectedRows } = this.state;\n    return selectedRows.filter((rowKey) => rowKey !== rowKeyToRemove);\n  };\n  addRowToSelection = (rowKeyToAdd) => {\n    const { selectedRows } = this.state;\n    return [...selectedRows, rowKeyToAdd];\n  };\n  addRowsToSelection = (rowsKeysToAdd) => {\n    const { selectedRows } = this.state;\n    return [...selectedRows, ...rowsKeysToAdd];\n  };\n  removeRowsFromSelection = (rowKeysToRemove) => {\n    const { selectedRows } = this.state;\n    return selectedRows.filter((row) => !rowKeysToRemove.includes(row));\n  };\n  rowsByPageSelector = (pageNumber) => {\n    const { paginatedRows } = this.state;\n    return paginatedRows[pageNumber - 1];\n  };\n  goToPage = (pageNumber) => {\n    const { selectedRows } = this.state;\n    const { hasSelectableRows } = this.props;\n    this.setState(\n      {\n        currentPage: pageNumber,\n        ...(hasSelectableRows && {\n          isHeaderSelected: this.areAllRowsSelectedOnPage(selectedRows, pageNumber),\n        }),\n      },\n      this.onPageSelectionChangeHandler\n    );\n  };\n  currentRowsByPageSelector = (rows, pageNumber) => {\n    const currentRows = this.rowsByPageSelector(pageNumber);\n    const { keyField } = this.props;\n    const allRowKeysOnPage = getAllRowKeys(currentRows, keyField);\n    return allRowKeysOnPage.filter((rowKey) => rows.includes(rowKey));\n  };\n  areAllRowsSelectedOnPage = (selectedRows, pageNumber) => {\n    const { keyField } = this.props;\n    const currentRows = this.rowsByPageSelector(pageNumber);\n    const allRowKeysOnPage = getAllRowKeys(currentRows, keyField);\n    return allRowKeysOnPage.length === this.currentRowsByPageSelector(selectedRows, pageNumber).length;\n  };\n  goToPrevPage = () => {\n    const { currentPage } = this.state;\n    this.goToPage(currentPage - 1);\n  };\n  goToNextPage = () => {\n    const { currentPage } = this.state;\n    this.goToPage(currentPage + 1);\n  };\n  onPageSelectionChangeHandler = () => {\n    const { onPageChange } = this.props;\n    const { currentPage } = this.state;\n    if (onPageChange) {\n      onPageChange(currentPage);\n    }\n  };\n  getControlProps = () => {\n    const { selectedRows, isHeaderSelected, currentPage, expandedRows } = this.state;\n    const { hasSelectableRows, hasExpandableRows } = this.props;\n    const selectionConfig = {\n      onSelectRow: this.onSelectRow,\n      onSelectHeader: this.onSelectHeader,\n      selectedRows: this.currentRowsByPageSelector(selectedRows, currentPage),\n      isHeaderSelected,\n    };\n    const expandableConfig = {\n      onRowExpansionChange: this.onExpandRow,\n      expandedRows,\n    };\n    const props: StatefulTableProps<ColumnMetaData> = {\n      ...this.props,\n      rows: this.rowsByPageSelector(currentPage) || [],\n      ...(hasSelectableRows && selectionConfig),\n      ...(hasExpandableRows && expandableConfig),\n    };\n    const selectableProps = { ...props, ...addSelectableControl(props as any) };\n    const expandableProps = { ...props, ...addExpandableControl(props) };\n    if (hasSelectableRows && hasExpandableRows) return { ...props, ...addExpandableControl(selectableProps) };\n    if (hasSelectableRows) return selectableProps;\n    if (hasExpandableRows) return expandableProps;\n    return props;\n  };\n  render() {\n    const { paginatedRows, currentPage } = this.state;\n    const { rowsPerPage, paginationProps, paginationCss } = this.props;\n    const baseTableProps = pick(this.getControlProps(), ...propNames);\n    return (\n      <>\n        <BaseTable {...baseTableProps} />\n\n        {rowsPerPage && (\n          <Pagination\n            pt=\"x2\"\n            currentPage={currentPage}\n            totalPages={paginatedRows.length || 1}\n            onSelectPage={this.goToPage}\n            onNext={this.goToNextPage}\n            onPrevious={this.goToPrevPage}\n            justifyContent=\"flex-end\"\n            css={paginationCss}\n            {...paginationProps}\n          />\n        )}\n      </>\n    );\n  }\n}\n\nexport default StatefulTable;\n"],"names":["expandedRows","selectedRows","rows","props"],"mappings":"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"}

package/dist/esm/Table/StyledTh.js

@@ -0,0 +1,27 @@
+import { styled } from "styled-components";
+const stickyStyles = (theme) => ({
+  position: "sticky",
+  top: 0,
+  background: "white",
+  boxShadow: "0px 1px 0px rgba(0,0,0,.1)",
+  zIndex: theme.zIndices.tableHeader
+});
+const StyledTh = styled.th(({ compact, theme, sticky, width }) => {
+  const padding = compact ? theme.space.x1 : theme.space.x2;
+  return {
+    fontWeight: "normal",
+    textAlign: "left",
+    padding: `${padding} 0`,
+    paddingRight: padding,
+    color: theme.colors.darkGrey,
+    ...sticky && stickyStyles(theme),
+    "&:first-child": {
+      paddingLeft: padding
+    },
+    width: width || "auto"
+  };
+});
+export {
+  StyledTh as default
+};
+//# sourceMappingURL=StyledTh.js.map

package/dist/esm/Table/StyledTh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTh.js","sources":["../../../src/Table/StyledTh.tsx"],"sourcesContent":["import { styled, CSSObject } from \"styled-components\";\nimport { DefaultNDSThemeType } from \"../theme\";\n\nconst stickyStyles = (theme: DefaultNDSThemeType): CSSObject => ({\n  position: \"sticky\",\n  top: 0,\n  background: \"white\",\n  boxShadow: \"0px 1px 0px rgba(0,0,0,.1)\",\n  zIndex: theme.zIndices.tableHeader,\n});\n\ntype StyledThProps = {\n  width?: any;\n  compact?: boolean;\n  sticky?: any;\n};\nconst StyledTh = styled.th<StyledThProps>(({ compact, theme, sticky, width }): CSSObject => {\n  const padding = compact ? theme.space.x1 : theme.space.x2;\n  return {\n    fontWeight: \"normal\",\n    textAlign: \"left\",\n    padding: `${padding} 0`,\n    paddingRight: padding,\n    color: theme.colors.darkGrey,\n    ...(sticky && stickyStyles(theme)),\n    \"&:first-child\": {\n      paddingLeft: padding,\n    },\n    width: width || \"auto\",\n  };\n});\nexport default StyledTh;\n"],"names":[],"mappings":";AAGA,MAAM,eAAe,CAAC,WAA2C;AAAA,EAC/D,UAAU;AAAA,EACV,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ,MAAM,SAAS;AACzB;AAOA,MAAM,WAAW,OAAO,GAAkB,CAAC,EAAE,SAAS,OAAO,QAAQ,YAAuB;AAC1F,QAAM,UAAU,UAAU,MAAM,MAAM,KAAK,MAAM,MAAM;AACvD,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS,GAAG,OAAO;AAAA,IACnB,cAAc;AAAA,IACd,OAAO,MAAM,OAAO;AAAA,IACpB,GAAI,UAAU,aAAa,KAAK;AAAA,IAChC,iBAAiB;AAAA,MACf,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO,SAAS;AAAA,EAAA;AAEpB,CAAC;"}

package/dist/esm/Table/Table.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import StatefulTable from "./StatefulTable.js";
+import BaseTable from "./BaseTable.js";
+import SortingColumnHeader from "./SortingColumnHeader.js";
+function Table({
+  hasSelectableRows,
+  rowsPerPage,
+  hasExpandableRows,
+  selectedRows,
+  onRowSelectionChange,
+  onRowExpansionChange,
+  onPageChange,
+  selectAllAriaLabel,
+  deselectAllAriaLabel,
+  paginationCss,
+  paginationProps,
+  ...props
+}) {
+  return hasSelectableRows || rowsPerPage || hasExpandableRows ? /* @__PURE__ */ jsx(
+    StatefulTable,
+    {
+      hasExpandableRows,
+      hasSelectableRows,
+      onRowExpansionChange,
+      onRowSelectionChange,
+      selectedRows,
+      rowsPerPage,
+      onPageChange,
+      selectAllAriaLabel,
+      deselectAllAriaLabel,
+      paginationCss,
+      paginationProps,
+      ...props
+    }
+  ) : /* @__PURE__ */ jsx(BaseTable, { ...props });
+}
+Table.SortingHeader = SortingColumnHeader;
+export {
+  Table as default
+};
+//# sourceMappingURL=Table.js.map

package/dist/esm/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import React from \"react\";\nimport StatefulTable from \"./StatefulTable\";\nimport BaseTable from \"./BaseTable\";\nimport SortingColumnHeader from \"./SortingColumnHeader\";\nimport { StatefulTableProps } from \"./StatefulTable\";\nimport { ColumnType, RowType, CellInfoType } from \"./Table.types\";\n\nexport type TableProps<ColumnMetadata = unknown> = StatefulTableProps<ColumnMetadata>;\nexport type TableColumnType<ColumnMetadata = unknown> = ColumnType<ColumnMetadata>;\nexport type TableRowType = RowType;\nexport type TableCellInfoType<ColumnMetadata = unknown> = CellInfoType<ColumnMetadata>;\n\nfunction Table<ColumnMetadata>({\n  hasSelectableRows,\n  rowsPerPage,\n  hasExpandableRows,\n  selectedRows,\n  onRowSelectionChange,\n  onRowExpansionChange,\n  onPageChange,\n  selectAllAriaLabel,\n  deselectAllAriaLabel,\n  paginationCss,\n  paginationProps,\n  ...props\n}: TableProps<ColumnMetadata>) {\n  return hasSelectableRows || rowsPerPage || hasExpandableRows ? (\n    <StatefulTable<ColumnMetadata>\n      hasExpandableRows={hasExpandableRows}\n      hasSelectableRows={hasSelectableRows}\n      onRowExpansionChange={onRowExpansionChange}\n      onRowSelectionChange={onRowSelectionChange}\n      selectedRows={selectedRows}\n      rowsPerPage={rowsPerPage}\n      onPageChange={onPageChange}\n      selectAllAriaLabel={selectAllAriaLabel}\n      deselectAllAriaLabel={deselectAllAriaLabel}\n      paginationCss={paginationCss}\n      paginationProps={paginationProps}\n      {...props}\n    />\n  ) : (\n    <BaseTable {...props} />\n  );\n}\n\nTable.SortingHeader = SortingColumnHeader;\n\nexport default Table;\n"],"names":[],"mappings":";;;;AAYA,SAAS,MAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,SAAO,qBAAqB,eAAe,oBACzC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA,IAGN,oBAAC,WAAA,EAAW,GAAG,MAAA,CAAO;AAE1B;AAEA,MAAM,gBAAgB;"}

package/dist/esm/Table/TableBody.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import TableCell from "./TableCell.js";
+import Box from "../Box/Box.js";
+const StyledMessageContainer = styled(Box)(({ theme }) => ({
+  padding: `${theme.space.x3} 0`,
+  fontSize: theme.fontSizes.small,
+  color: theme.colors.darkGrey
+}));
+const StyledTr = styled.tr(({ rowHovers, rowBorder, theme }) => ({
+  "&:hover": {
+    backgroundColor: rowHovers ? theme.colors.whiteGrey : null
+  },
+  ...rowBorder && {
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: theme.colors.lightGrey,
+    borderCollapse: "collapse"
+  }
+}));
+const renderRows = (rows, columns, keyField, rowHovers, noRowsContent, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) => rows.length > 0 ? rows.map((row, rowIndex) => {
+  const rowKey = row[keyField] !== void 0 ? row[keyField] : rowIndex;
+  return /* @__PURE__ */ jsx(
+    TableBodyRow,
+    {
+      row,
+      columns,
+      keyField,
+      rowHovers,
+      compact,
+      rowClassName: row.rowClassName,
+      onMouseEnter: (e) => onRowMouseEnter({ row, e }),
+      onMouseLeave: (e) => onRowMouseLeave({ row, e }),
+      rowBorder
+    },
+    rowKey
+  );
+}) : /* @__PURE__ */ jsx(TableMessageContainer, { colSpan: columns.length, children: noRowsContent });
+const TableBodyRow = ({
+  row,
+  columns,
+  rowHovers,
+  compact,
+  rowClassName,
+  onMouseLeave,
+  onMouseEnter,
+  rowBorder
+}) => {
+  const renderAllCells = () => columns.map((column, index) => /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      row,
+      column,
+      cellData: row[column.dataKey],
+      compact
+    },
+    column.dataKey ?? column.key ?? index
+  ));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      StyledTr,
+      {
+        rowHovers,
+        "data-testid": "table-row",
+        className: rowClassName,
+        onMouseLeave,
+        onMouseEnter,
+        rowBorder,
+        children: row.heading ? /* @__PURE__ */ jsx(TableCell, { row, colSpan: columns.length, cellData: row.heading, compact }) : renderAllCells()
+      }
+    ),
+    row.expandedContent && row.expanded && /* @__PURE__ */ jsx("tr", { "data-testid": "expanded-table-row", children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, children: row.expandedContent({ row }) }) })
+  ] });
+};
+const TableMessageContainer = ({ colSpan, children }) => /* @__PURE__ */ jsx("tr", { "data-testid": "table-message-container", children: /* @__PURE__ */ jsx("td", { colSpan, children: /* @__PURE__ */ jsx(StyledMessageContainer, { className: "nds-table__no-rows-content", children }) }) });
+const LoadingContent = ({ colSpan }) => /* @__PURE__ */ jsx(TableMessageContainer, { colSpan, children: "Loading..." });
+const TableBody = ({
+  rows,
+  columns,
+  keyField = "id",
+  noRowsContent = "No records have been created for this table.",
+  loading,
+  rowHovers,
+  compact,
+  onRowMouseLeave,
+  onRowMouseEnter,
+  rowBorder
+}) => /* @__PURE__ */ jsx("tbody", { "data-testid": "table-body", children: !loading ? renderRows(
+  rows,
+  columns,
+  keyField,
+  rowHovers,
+  noRowsContent,
+  compact,
+  onRowMouseLeave,
+  onRowMouseEnter,
+  rowBorder
+) : /* @__PURE__ */ jsx(LoadingContent, { colSpan: columns.length }) });
+export {
+  TableBody as default
+};
+//# sourceMappingURL=TableBody.js.map

package/dist/esm/Table/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sources":["../../../src/Table/TableBody.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { styled } from \"styled-components\";\nimport { Box } from \"../Box\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport TableCell from \"./TableCell\";\nimport { RowBorder } from \"./Table.types\";\n\nconst StyledMessageContainer = styled(Box)(({ theme }) => ({\n  padding: `${theme.space.x3} 0`,\n  fontSize: theme.fontSizes.small,\n  color: theme.colors.darkGrey,\n}));\n\ntype StyledTrProps = React.ComponentProps<\"tr\"> & {\n  rowHovers?: boolean;\n  rowBorder?: RowBorder;\n  theme?: DefaultNDSThemeType;\n  className?: string;\n};\n\nconst StyledTr = styled.tr<StyledTrProps>(({ rowHovers, rowBorder, theme }: StyledTrProps) => ({\n  \"&:hover\": {\n    backgroundColor: rowHovers ? theme.colors.whiteGrey : null,\n  },\n  ...(rowBorder && {\n    borderBottomWidth: 1,\n    borderBottomStyle: \"solid\",\n    borderBottomColor: theme.colors.lightGrey,\n    borderCollapse: \"collapse\",\n  }),\n}));\n\nconst renderRows = (\n  rows: any[],\n  columns: any[],\n  keyField?: string,\n  rowHovers?: boolean,\n  noRowsContent?: ReactNode,\n  compact?: boolean,\n  onRowMouseLeave?: ({ row, e }: { row: any; e: React.MouseEvent<HTMLTableRowElement> }) => void,\n  onRowMouseEnter?: ({ row, e }: { row: any; e: React.MouseEvent<HTMLTableRowElement> }) => void,\n  rowBorder?: RowBorder\n) =>\n  rows.length > 0 ? (\n    rows.map((row, rowIndex) => {\n      const rowKey = row[keyField] !== undefined ? row[keyField] : rowIndex;\n\n      return (\n        <TableBodyRow\n          key={rowKey}\n          row={row}\n          columns={columns}\n          keyField={keyField}\n          rowHovers={rowHovers}\n          compact={compact}\n          rowClassName={row.rowClassName}\n          onMouseEnter={(e) => onRowMouseEnter({ row, e })}\n          onMouseLeave={(e) => onRowMouseLeave({ row, e })}\n          rowBorder={rowBorder}\n        />\n      );\n    })\n  ) : (\n    <TableMessageContainer colSpan={columns.length}>{noRowsContent}</TableMessageContainer>\n  );\n\ninterface TableBodyRowProps {\n  row: any;\n  columns: any[];\n  rowHovers?: boolean;\n  compact?: boolean;\n  rowClassName?: string;\n  keyField?: string;\n  onMouseEnter?: any;\n  onMouseLeave?: any;\n  rowBorder?: RowBorder;\n}\n\nconst TableBodyRow = ({\n  row,\n  columns,\n  rowHovers,\n  compact,\n  rowClassName,\n  onMouseLeave,\n  onMouseEnter,\n  rowBorder,\n}: TableBodyRowProps) => {\n  const renderAllCells = () =>\n    columns.map((column, index) => (\n      <TableCell\n        key={column.dataKey ?? column.key ?? index}\n        row={row}\n        column={column}\n        cellData={row[column.dataKey]}\n        compact={compact}\n      />\n    ));\n  return (\n    <>\n      <StyledTr\n        rowHovers={rowHovers}\n        data-testid=\"table-row\"\n        className={rowClassName}\n        onMouseLeave={onMouseLeave}\n        onMouseEnter={onMouseEnter}\n        rowBorder={rowBorder}\n      >\n        {row.heading ? (\n          <TableCell row={row} colSpan={columns.length} cellData={row.heading} compact={compact} />\n        ) : (\n          renderAllCells()\n        )}\n      </StyledTr>\n      {row.expandedContent && row.expanded && (\n        <tr data-testid=\"expanded-table-row\">\n          <td colSpan={columns.length}>{row.expandedContent({ row })}</td>\n        </tr>\n      )}\n    </>\n  );\n};\n\nconst TableMessageContainer = ({ colSpan, children }: { colSpan: number; children: ReactNode }) => (\n  <tr data-testid=\"table-message-container\">\n    <td colSpan={colSpan}>\n      <StyledMessageContainer className=\"nds-table__no-rows-content\">{children}</StyledMessageContainer>\n    </td>\n  </tr>\n);\n\nconst LoadingContent = ({ colSpan }: { colSpan: number }) => (\n  <TableMessageContainer colSpan={colSpan}>Loading...</TableMessageContainer>\n);\n\ninterface TableBodyProps {\n  rows: any[];\n  columns: any[];\n  keyField?: string;\n  noRowsContent: ReactNode;\n  loading?: boolean;\n  rowHovers?: boolean;\n  compact?: boolean;\n  onRowMouseLeave?: (...args: any[]) => any;\n  onRowMouseEnter?: (...args: any[]) => any;\n  rowBorder?: RowBorder;\n}\n\nconst TableBody = ({\n  rows,\n  columns,\n  keyField = \"id\",\n  noRowsContent = \"No records have been created for this table.\",\n  loading,\n  rowHovers,\n  compact,\n  onRowMouseLeave,\n  onRowMouseEnter,\n  rowBorder,\n}: TableBodyProps) => (\n  <tbody data-testid=\"table-body\">\n    {!loading ? (\n      renderRows(\n        rows,\n        columns,\n        keyField,\n        rowHovers,\n        noRowsContent,\n        compact,\n        onRowMouseLeave,\n        onRowMouseEnter,\n        rowBorder\n      )\n    ) : (\n      <LoadingContent colSpan={columns.length} />\n    )}\n  </tbody>\n);\n\nexport default TableBody;\n"],"names":[],"mappings":"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"}

package/dist/esm/Table/TableCell.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+const StyledTableCell = styled.td(
+  ({ align, compact, verticalAlign, theme }) => {
+    const padding = compact ? theme.space.x1 : theme.space.x2;
+    return {
+      paddingTop: padding,
+      paddingBottom: padding,
+      textAlign: align,
+      paddingRight: padding,
+      verticalAlign: verticalAlign || "middle",
+      "&:first-child": {
+        paddingLeft: padding
+      }
+    };
+  }
+);
+const TableCell = ({ column = {}, row = {}, cellData = "", colSpan = void 0, compact = false }) => {
+  const cellRenderer = row.cellRenderer || column.cellRenderer;
+  const { cellFormatter } = column;
+  const isCustomCell = Boolean(cellRenderer);
+  const cellContent = cellFormatter ? cellFormatter({ cellData, column, row }) : cellData;
+  if (isCustomCell) {
+    return /* @__PURE__ */ jsx("td", { colSpan, children: cellRenderer ? cellRenderer({ cellData, column, row }) : cellData });
+  }
+  return /* @__PURE__ */ jsx(StyledTableCell, { align: column.align, compact, verticalAlign: row.verticalAlign, children: cellContent });
+};
+export {
+  TableCell as default
+};
+//# sourceMappingURL=TableCell.js.map

package/dist/esm/Table/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sources":["../../../src/Table/TableCell.tsx"],"sourcesContent":["import React, { CSSProperties } from \"react\";\nimport { styled } from \"styled-components\";\nimport { DefaultNDSThemeType } from \"../theme\";\n\ninterface StyledTableCellProps {\n  align?: CSSProperties[\"textAlign\"];\n  compact?: boolean;\n  verticalAlign?: CSSProperties[\"verticalAlign\"];\n  theme?: DefaultNDSThemeType;\n}\n\nconst StyledTableCell = styled.td<StyledTableCellProps>(\n  ({ align, compact, verticalAlign, theme }: StyledTableCellProps) => {\n    const padding = compact ? theme.space.x1 : theme.space.x2;\n    return {\n      paddingTop: padding,\n      paddingBottom: padding,\n      textAlign: align,\n      paddingRight: padding,\n      verticalAlign: verticalAlign || \"middle\",\n      \"&:first-child\": {\n        paddingLeft: padding,\n      },\n    };\n  }\n);\n\ntype TableCellProps = {\n  column?: any;\n  row?: any;\n  colSpan?: number;\n  cellData?: Record<string, unknown> | React.ReactNode | boolean;\n  compact?: boolean;\n};\n\nconst TableCell = ({ column = {}, row = {}, cellData = \"\", colSpan = undefined, compact = false }: TableCellProps) => {\n  const cellRenderer = row.cellRenderer || column.cellRenderer;\n  const { cellFormatter } = column;\n  const isCustomCell = Boolean(cellRenderer);\n  const cellContent = cellFormatter ? cellFormatter({ cellData, column, row }) : cellData;\n  if (isCustomCell) {\n    return <td colSpan={colSpan}>{cellRenderer ? cellRenderer({ cellData, column, row }) : cellData}</td>;\n  }\n  return (\n    <StyledTableCell align={column.align} compact={compact} verticalAlign={row.verticalAlign}>\n      {cellContent}\n    </StyledTableCell>\n  );\n};\n\nexport default TableCell;\n"],"names":[],"mappings":";;AAWA,MAAM,kBAAkB,OAAO;AAAA,EAC7B,CAAC,EAAE,OAAO,SAAS,eAAe,YAAkC;AAClE,UAAM,UAAU,UAAU,MAAM,MAAM,KAAK,MAAM,MAAM;AACvD,WAAO;AAAA,MACL,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,WAAW;AAAA,MACX,cAAc;AAAA,MACd,eAAe,iBAAiB;AAAA,MAChC,iBAAiB;AAAA,QACf,aAAa;AAAA,MAAA;AAAA,IACf;AAAA,EAEJ;AACF;AAUA,MAAM,YAAY,CAAC,EAAE,SAAS,CAAA,GAAI,MAAM,CAAA,GAAI,WAAW,IAAI,UAAU,QAAW,UAAU,YAA4B;AACpH,QAAM,eAAe,IAAI,gBAAgB,OAAO;AAChD,QAAM,EAAE,kBAAkB;AAC1B,QAAM,eAAe,QAAQ,YAAY;AACzC,QAAM,cAAc,gBAAgB,cAAc,EAAE,UAAU,QAAQ,IAAA,CAAK,IAAI;AAC/E,MAAI,cAAc;AAChB,WAAO,oBAAC,MAAA,EAAG,SAAmB,UAAA,eAAe,aAAa,EAAE,UAAU,QAAQ,IAAA,CAAK,IAAI,SAAA,CAAS;AAAA,EAClG;AACA,SACE,oBAAC,mBAAgB,OAAO,OAAO,OAAO,SAAkB,eAAe,IAAI,eACxE,UAAA,YAAA,CACH;AAEJ;"}

package/dist/esm/Table/TableFoot.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import TableCell from "./TableCell.js";
+import StyledTh from "./StyledTh.js";
+const StyledFooterRow = styled.tr(({ theme }) => ({
+  "&:first-of-type": {
+    borderTop: `1px solid ${theme.colors.lightGrey}`
+  }
+}));
+const renderRows = (rows, columns, keyField, loading, compact) => rows.map((row) => /* @__PURE__ */ jsx(TableFooterRow, { row, columns, loading, compact }, row[keyField]));
+const TableFooterRow = ({ row, columns, loading, compact }) => {
+  const columnsWithoutControls = columns.filter(
+    (column) => column.dataKey !== "selected" && column.dataKey !== "expanded"
+  );
+  const numberOfControlColumns = columns.length - columnsWithoutControls.length;
+  return /* @__PURE__ */ jsx(StyledFooterRow, { children: columnsWithoutControls.map(
+    (column, index) => index === 0 ? /* @__PURE__ */ jsx(StyledTh, { scope: "row", colSpan: numberOfControlColumns + 1, compact, children: row[column.dataKey] }, column.dataKey) : !loading && /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        row,
+        column: {
+          dataKey: column.dataKey,
+          label: column.label,
+          align: column.align
+        },
+        cellData: row[column.dataKey],
+        compact
+      },
+      column.dataKey ?? column.key ?? index
+    )
+  ) });
+};
+function TableFoot({
+  columns,
+  rows,
+  keyField = "id",
+  loading = false,
+  compact = false
+}) {
+  return /* @__PURE__ */ jsx("tfoot", { children: renderRows(rows, columns, keyField, loading, compact) });
+}
+export {
+  TableFoot as default
+};
+//# sourceMappingURL=TableFoot.js.map

package/dist/esm/Table/TableFoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFoot.js","sources":["../../../src/Table/TableFoot.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport TableCell from \"./TableCell\";\nimport StyledTh from \"./StyledTh\";\nimport { RowType, Columns } from \"./Table.types\";\n\nconst StyledFooterRow = styled.tr(({ theme }) => ({\n  \"&:first-of-type\": {\n    borderTop: `1px solid ${theme.colors.lightGrey}`,\n  },\n}));\n\nconst renderRows = (rows, columns, keyField, loading, compact) =>\n  rows.map((row) => (\n    <TableFooterRow row={row} columns={columns} key={row[keyField]} loading={loading} compact={compact} />\n  ));\n\nconst TableFooterRow = ({ row, columns, loading, compact }) => {\n  const columnsWithoutControls = columns.filter(\n    (column) => column.dataKey !== \"selected\" && column.dataKey !== \"expanded\"\n  );\n  const numberOfControlColumns = columns.length - columnsWithoutControls.length;\n  return (\n    <StyledFooterRow>\n      {columnsWithoutControls.map((column, index) =>\n        index === 0 ? (\n          <StyledTh key={column.dataKey} scope=\"row\" colSpan={numberOfControlColumns + 1} compact={compact}>\n            {row[column.dataKey]}\n          </StyledTh>\n        ) : (\n          !loading && (\n            <TableCell\n              key={column.dataKey ?? column.key ?? index}\n              row={row}\n              column={{\n                dataKey: column.dataKey,\n                label: column.label,\n                align: column.align,\n              }}\n              cellData={row[column.dataKey]}\n              compact={compact}\n            />\n          )\n        )\n      )}\n    </StyledFooterRow>\n  );\n};\n\nfunction TableFoot<ColumnMetadata>({\n  columns,\n  rows,\n  keyField = \"id\",\n  loading = false,\n  compact = false,\n}: {\n  columns: Columns<ColumnMetadata>;\n  rows: RowType[];\n  keyField?: string;\n  loading?: boolean;\n  compact?: boolean;\n}) {\n  return <tfoot>{renderRows(rows, columns, keyField, loading, compact)}</tfoot>;\n}\n\nexport default TableFoot;\n"],"names":[],"mappings":";;;;AAMA,MAAM,kBAAkB,OAAO,GAAG,CAAC,EAAE,aAAa;AAAA,EAChD,mBAAmB;AAAA,IACjB,WAAW,aAAa,MAAM,OAAO,SAAS;AAAA,EAAA;AAElD,EAAE;AAEF,MAAM,aAAa,CAAC,MAAM,SAAS,UAAU,SAAS,YACpD,KAAK,IAAI,CAAC,QACR,oBAAC,gBAAA,EAAe,KAAU,SAAsC,SAAkB,WAAjC,IAAI,QAAQ,CAAuC,CACrG;AAEH,MAAM,iBAAiB,CAAC,EAAE,KAAK,SAAS,SAAS,cAAc;AAC7D,QAAM,yBAAyB,QAAQ;AAAA,IACrC,CAAC,WAAW,OAAO,YAAY,cAAc,OAAO,YAAY;AAAA,EAAA;AAElE,QAAM,yBAAyB,QAAQ,SAAS,uBAAuB;AACvE,SACE,oBAAC,mBACE,UAAA,uBAAuB;AAAA,IAAI,CAAC,QAAQ,UACnC,UAAU,IACR,oBAAC,UAAA,EAA8B,OAAM,OAAM,SAAS,yBAAyB,GAAG,SAC7E,cAAI,OAAO,OAAO,KADN,OAAO,OAEtB,IAEA,CAAC,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,QAAQ;AAAA,UACN,SAAS,OAAO;AAAA,UAChB,OAAO,OAAO;AAAA,UACd,OAAO,OAAO;AAAA,QAAA;AAAA,QAEhB,UAAU,IAAI,OAAO,OAAO;AAAA,QAC5B;AAAA,MAAA;AAAA,MARK,OAAO,WAAW,OAAO,OAAO;AAAA,IAAA;AAAA,EASvC,GAIR;AAEJ;AAEA,SAAS,UAA0B;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AACZ,GAMG;AACD,SAAO,oBAAC,WAAO,UAAA,WAAW,MAAM,SAAS,UAAU,SAAS,OAAO,EAAA,CAAE;AACvE;"}

package/dist/esm/Table/TableHead.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import StyledTh from "./StyledTh.js";
+const StyledHeaderRow = styled.tr(({ theme }) => ({
+  color: theme.colors.darkGrey,
+  borderBottom: `1px solid ${theme.colors.lightGrey}`
+}));
+function renderHeaderCellContent({
+  headerFormatter = ({ label: label2 }) => label2,
+  align,
+  label,
+  width,
+  metadata,
+  dataKey,
+  key
+}) {
+  return key ? headerFormatter({ align, label, width, metadata, key }) : headerFormatter({ align, label, width, metadata, dataKey });
+}
+function TableHead({ columns, compact, sticky }) {
+  const renderColumns = (allColumns) => allColumns.map((column, index) => /* @__PURE__ */ jsx(
+    StyledTh,
+    {
+      scope: "col",
+      width: column.width,
+      compact,
+      "data-testid": "table-head",
+      sticky,
+      children: renderHeaderCellContent(column)
+    },
+    column.dataKey ?? column.key ?? index
+  ));
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(StyledHeaderRow, { children: renderColumns(columns) }) });
+}
+export {
+  TableHead as default
+};
+//# sourceMappingURL=TableHead.js.map

package/dist/esm/Table/TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.js","sources":["../../../src/Table/TableHead.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport StyledTh from \"./StyledTh\";\nimport type { ColumnType, Columns } from \"./Table.types\";\n\ninterface TableHeadProps<ColumnMetadata> {\n  columns: Columns<ColumnMetadata>;\n  compact?: boolean;\n  sticky?: boolean;\n}\n\nconst StyledHeaderRow = styled.tr(({ theme }) => ({\n  color: theme.colors.darkGrey,\n  borderBottom: `1px solid ${theme.colors.lightGrey}`,\n}));\n\nfunction renderHeaderCellContent<ColumnMetadata>({\n  headerFormatter = ({ label }) => label,\n  align,\n  label,\n  width,\n  metadata,\n  dataKey,\n  key,\n}: ColumnType<ColumnMetadata>) {\n  return key\n    ? headerFormatter({ align, label, width, metadata, key })\n    : headerFormatter({ align, label, width, metadata, dataKey });\n}\n\nfunction TableHead<ColumnMetadata>({ columns, compact, sticky }: TableHeadProps<ColumnMetadata>) {\n  const renderColumns = (allColumns: Columns<ColumnMetadata>) =>\n    allColumns.map((column, index) => (\n      <StyledTh\n        scope=\"col\"\n        key={column.dataKey ?? column.key ?? index}\n        width={column.width}\n        compact={compact}\n        data-testid=\"table-head\"\n        sticky={sticky}\n      >\n        {renderHeaderCellContent(column)}\n      </StyledTh>\n    ));\n  return (\n    <thead>\n      <StyledHeaderRow>{renderColumns(columns)}</StyledHeaderRow>\n    </thead>\n  );\n}\n\nexport default TableHead;\n"],"names":["label"],"mappings":";;;AAWA,MAAM,kBAAkB,OAAO,GAAG,CAAC,EAAE,aAAa;AAAA,EAChD,OAAO,MAAM,OAAO;AAAA,EACpB,cAAc,aAAa,MAAM,OAAO,SAAS;AACnD,EAAE;AAEF,SAAS,wBAAwC;AAAA,EAC/C,kBAAkB,CAAC,EAAE,OAAAA,aAAYA;AAAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,SAAO,MACH,gBAAgB,EAAE,OAAO,OAAO,OAAO,UAAU,IAAA,CAAK,IACtD,gBAAgB,EAAE,OAAO,OAAO,OAAO,UAAU,SAAS;AAChE;AAEA,SAAS,UAA0B,EAAE,SAAS,SAAS,UAA0C;AAC/F,QAAM,gBAAgB,CAAC,eACrB,WAAW,IAAI,CAAC,QAAQ,UACtB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MAEN,OAAO,OAAO;AAAA,MACd;AAAA,MACA,eAAY;AAAA,MACZ;AAAA,MAEC,kCAAwB,MAAM;AAAA,IAAA;AAAA,IAN1B,OAAO,WAAW,OAAO,OAAO;AAAA,EAAA,CAQxC;AACH,6BACG,SAAA,EACC,UAAA,oBAAC,mBAAiB,UAAA,cAAc,OAAO,GAAE,EAAA,CAC3C;AAEJ;"}