@join-x5/react-data-grid 1.3.1-alpha-0 → 1.4.0

package/dist/TableBody/hook.es.js

@@ -0,0 +1,49 @@
+"use client";
+import { useContext as x } from "react";
+import { useVirtualizer as b } from "@tanstack/react-virtual";
+import { DataGridContext as h } from "../DataGridContext.es.js";
+import { getDataGridTableRow as y } from "../TableRow/index.es.js";
+const v = (c) => {
+  const {
+    table: u,
+    components: r,
+    rowProps: e,
+    wrapperRef: n,
+    virtualize: s,
+    ...m
+  } = c, p = x(h), i = u.getRowModel().rows, o = b({
+    count: i.length,
+    estimateSize: () => 40,
+    getScrollElement: () => n.current,
+    measureElement: (t) => t.getBoundingClientRect().height,
+    overscan: 5,
+    ...typeof s == "object" ? s : void 0
+  }), d = (r == null ? void 0 : r.row) ?? y, f = (t) => o.measureElement(t), g = o.getVirtualItems().map((t) => {
+    const a = i[t.index], l = {
+      ref: f,
+      "data-index": t.index,
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        transform: `translateY(${t.start}px)`
+      }
+    };
+    return e && Object.assign(l, typeof e == "function" ? e(a) : e), d(a, l);
+  }), w = {
+    "data-qa": `${p.qa}-body`,
+    style: {
+      height: o.getTotalSize(),
+      ...m.style
+    }
+  };
+  return n.current || setTimeout(o.measure), {
+    containerProps: w,
+    child: g
+  };
+};
+export {
+  v as useVirtualTableBody
+};
+//# sourceMappingURL=hook.es.js.map

package/dist/TableBody/hook.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.es.js","sources":["../../src/TableBody/hook.ts"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\nimport {useVirtualizer} from '@tanstack/react-virtual';\n\nimport {DataGridContext} from 'DataGridContext';\nimport {getDataGridTableRow} from 'TableRow';\n\nimport type {Table} from '@tanstack/react-table';\nimport type {VirtualItem} from '@tanstack/react-virtual';\nimport type {TableRowProps} from 'TableRow';\nimport type {DataGridProps} from 'types';\nimport type {TableBodyProps} from './types';\n\nexport type DataGridTableBodyVirtualProps = {\n  table: Table<unknown>;\n} & Pick<DataGridProps, 'components' | 'rowProps'> &\n  Required<Pick<DataGridProps, 'virtualize' | 'wrapperRef'>> &\n  TableBodyProps;\n\nexport const useVirtualTableBody = (props: DataGridTableBodyVirtualProps) => {\n  const {table, components, rowProps, wrapperRef, virtualize, ...rest} = props;\n\n  const context = useContext(DataGridContext);\n  const rows = table.getRowModel().rows;\n\n  const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n    count: rows.length,\n    estimateSize: () => 40,\n    getScrollElement: () => wrapperRef.current,\n    measureElement: el => el.getBoundingClientRect().height,\n    overscan: 5,\n\n    ...(typeof virtualize === 'object' ? virtualize : undefined),\n  });\n\n  const iterator = components?.row ?? getDataGridTableRow;\n  const rowRef = (node: HTMLTableRowElement) => rowVirtualizer.measureElement(node);\n\n  const child = rowVirtualizer.getVirtualItems().map((item: VirtualItem) => {\n    const row = rows[item.index];\n\n    const itemProps = {\n      ref: rowRef,\n\n      'data-index': item.index,\n\n      style: {\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        width: '100%',\n        transform: `translateY(${item.start}px)`,\n      },\n    } as TableRowProps;\n\n    if (rowProps) {\n      Object.assign(itemProps, typeof rowProps === 'function' ? rowProps(row) : rowProps);\n    }\n\n    return iterator(row, itemProps);\n  });\n\n  const containerProps = {\n    'data-qa': `${context.qa}-body`,\n\n    style: {\n      height: rowVirtualizer.getTotalSize(),\n\n      ...rest.style,\n    },\n  };\n\n  if (!wrapperRef.current) {\n    setTimeout(rowVirtualizer.measure);\n  }\n\n  return {containerProps, child};\n};\n"],"names":["table","components","rowProps","wrapperRef","virtualize","rest","length","current","height","undefined","rowRef","index","getTotalSize","style","containerProps","child"],"mappings":";;;;;AAoBO;AACL;AAAM;AAACA;AAAOC;AAAYC;AAAUC;AAAYC;AAAeC;AAKY;AAC7DC;AACQ;AACeC;AACcC;AACvC;AAEwCC;AAOlD;AAEkB;AACXC;AAEcC;AAEZ;AACK;AACJ;AACD;AACE;AAC4B;AAAA;AAIvC;AAI8B;AAGT;AACG;AAEjB;AACkBC;AAEfC;AAAAA;AAIZ;AAIO;AAACC;AAAgBC;AAC1B;;;;"}

package/dist/TableBody/index.d.ts

@@ -1,11 +1,3 @@
-import { Table } from '@tanstack/react-table';
-import { DataGridProps } from 'types';
-export declare const TableBody: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
-type DataGridTableBodyProps = {
-    table: Table<unknown>;
-} & Pick<DataGridProps, 'components'>;
-export declare const getDataGridTableBody: (table: DataGridTableBodyProps["table"], components: DataGridProps["components"]) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+export * from './DataGridTableBody';
+export { getDataGridTableBodyVirtual } from './DataGridTableBodyVirtual';
+export * from './types';

package/dist/TableBody/types.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;

package/dist/TableCell/hook.es.js

@@ -2,7 +2,7 @@
 import { useContext as o } from "react";
 import { ColumnArea as r } from "@join-x5/react-data-grid-settings";
 import { DataGridContext as d } from "../DataGridContext.es.js";
-const c = (t, e) => {
+const g = (t, e) => {
   const i = t.getIsPinned();
   e.columnArea = (() => {
     switch (t.getIsPinned()) {
@@ -14,8 +14,8 @@ const c = (t, e) => {
     return r.Default;
   })(), i && (e.style ?? (e.style = {}), i === "left" ? (e.style.left = `${t.getStart("left")}px`, e.isLastFixed = t.getIsLastColumn("left")) : (e.style.right = `${t.getAfter("right")}px`, e.isLastFixed = t.getIsFirstColumn("right")));
 }, h = (t) => {
-  var a, l;
-  const e = o(d), i = typeof e.isMultiline == "boolean" ? e.isMultiline : (a = e.isMultiline) == null ? void 0 : a.call(e, t), n = `calc(var(--header-${(l = t.column) == null ? void 0 : l.id}-size) * 1px)`, s = {
+  var l, a;
+  const e = o(d), i = typeof e.isMultiline == "boolean" ? e.isMultiline : (l = e.isMultiline) == null ? void 0 : l.call(e, t), n = `calc(var(--header-${(a = t.column) == null ? void 0 : a.id}-size) * 1px)`, s = {
     isMultiline: i,
     qa: e.qa,
     isBordered: e.isBordered,
@@ -33,10 +33,10 @@ const c = (t, e) => {
       maxWidth: n
     }
   };
-  return c(t.column, s), e.cellProps && Object.assign(s, e.cellProps instanceof Function ? e.cellProps(t) : e.cellProps), s;
+  return g(t.column, s), e.cellProps && Object.assign(s, typeof e.cellProps == "function" ? e.cellProps(t) : e.cellProps), s;
 };
 export {
-  c as areaProps,
+  g as areaProps,
   h as useDataGridTableCell
 };
 //# sourceMappingURL=hook.es.js.map

package/dist/TableCell/hook.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"hook.es.js","sources":["../../src/TableCell/hook.ts"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\n\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport {DataGridContext} from 'DataGridContext';\n\nimport type {Column, Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {TableCellProps} from './types';\n\nexport const areaProps = (column: Column<unknown>, props: TableCellProps): void => {\n  const isPinned = column.getIsPinned();\n\n  props.columnArea = (() => {\n    switch (column.getIsPinned()) {\n      case 'left':\n        return ColumnArea.FixedLeft;\n      case 'right':\n        return ColumnArea.FixedRight;\n    }\n\n    return ColumnArea.Default;\n  })();\n\n  if (!isPinned) {\n    return;\n  }\n\n  props.style ??= {};\n\n  if (isPinned === 'left') {\n    props.style.left = `${column.getStart('left')}px`;\n    props.isLastFixed = column.getIsLastColumn('left');\n  } else {\n    props.style.right = `${column.getAfter('right')}px`;\n    props.isLastFixed = column.getIsFirstColumn('right');\n  }\n};\n\nexport const useDataGridTableCell = (cell: ReactTableCell<unknown, unknown>) => {\n  const context = useContext(DataGridContext);\n\n  const isMultiline = typeof context.isMultiline === 'boolean' ? context.isMultiline : context.isMultiline?.(cell);\n  const width = `calc(var(--header-${cell.column?.id}-size) * 1px)`;\n\n  const resultProps: TableCellProps = {\n    isMultiline,\n\n    qa: context.qa,\n    isBordered: context.isBordered,\n    isShadowed: context.isShadowed,\n    size: context.size,\n    verticalAlign: context.verticalAlign,\n    writingMode: context.writingMode,\n    userSelect: context.userSelect,\n    wordBreak: context.wordBreak,\n    whiteSpace: context.whiteSpace,\n\n    isRowSelected: cell.row.getIsSelected(),\n    isResizing: cell.column.getIsResizing(),\n\n    style: {\n      width,\n      maxWidth: width,\n    },\n  };\n\n  areaProps(cell.column, resultProps);\n\n  if (context.cellProps) {\n    Object.assign(resultProps, context.cellProps instanceof Function ? context.cellProps(cell) : context.cellProps);\n  }\n\n  return resultProps;\n};\n"],"names":["FixedLeft","FixedRight","Default","isMultiline","qa","isBordered","isShadowed","size","verticalAlign","writingMode","userSelect","wordBreak","whiteSpace","getIsSelected","getIsResizing","width","areaProps"],"mappings":";;;;AAWO;AACL;AAaA;AAVE;AAA2B;AAEvB;AAAkBA;AAElB;AAAkBC;AAGtB;AAAkBC;AAgBtB;;AAGE;AAKoC;AAClCC;AAEYC;AACQC;AACAC;AACNC;AACSC;AACFC;AACDC;AACDC;AACCC;AAEIC;AACAC;AAEjB;AACLC;AACUA;AAAAA;AAIdC;AAOF;;;;;"}
+{"version":3,"file":"hook.es.js","sources":["../../src/TableCell/hook.ts"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\n\nimport {ColumnArea} from '@join-x5/react-data-grid-settings';\n\nimport {DataGridContext} from 'DataGridContext';\n\nimport type {Column, Cell as ReactTableCell} from '@tanstack/react-table';\nimport type {TableCellProps} from './types';\n\nexport const areaProps = (column: Column<unknown>, props: TableCellProps): void => {\n  const isPinned = column.getIsPinned();\n\n  props.columnArea = (() => {\n    switch (column.getIsPinned()) {\n      case 'left':\n        return ColumnArea.FixedLeft;\n      case 'right':\n        return ColumnArea.FixedRight;\n    }\n\n    return ColumnArea.Default;\n  })();\n\n  if (!isPinned) {\n    return;\n  }\n\n  props.style ??= {};\n\n  if (isPinned === 'left') {\n    props.style.left = `${column.getStart('left')}px`;\n    props.isLastFixed = column.getIsLastColumn('left');\n  } else {\n    props.style.right = `${column.getAfter('right')}px`;\n    props.isLastFixed = column.getIsFirstColumn('right');\n  }\n};\n\nexport const useDataGridTableCell = (cell: ReactTableCell<unknown, unknown>) => {\n  const context = useContext(DataGridContext);\n\n  const isMultiline = typeof context.isMultiline === 'boolean' ? context.isMultiline : context.isMultiline?.(cell);\n  const width = `calc(var(--header-${cell.column?.id}-size) * 1px)`;\n\n  const resultProps: TableCellProps = {\n    isMultiline,\n\n    qa: context.qa,\n    isBordered: context.isBordered,\n    isShadowed: context.isShadowed,\n    size: context.size,\n    verticalAlign: context.verticalAlign,\n    writingMode: context.writingMode,\n    userSelect: context.userSelect,\n    wordBreak: context.wordBreak,\n    whiteSpace: context.whiteSpace,\n\n    isRowSelected: cell.row.getIsSelected(),\n    isResizing: cell.column.getIsResizing(),\n\n    style: {\n      width,\n      maxWidth: width,\n    },\n  };\n\n  areaProps(cell.column, resultProps);\n\n  if (context.cellProps) {\n    Object.assign(resultProps, typeof context.cellProps === 'function' ? context.cellProps(cell) : context.cellProps);\n  }\n\n  return resultProps;\n};\n"],"names":["FixedLeft","FixedRight","Default","isMultiline","qa","isBordered","isShadowed","size","verticalAlign","writingMode","userSelect","wordBreak","whiteSpace","getIsSelected","getIsResizing","width","areaProps"],"mappings":";;;;AAWO;AACL;AAaA;AAVE;AAA2B;AAEvB;AAAkBA;AAElB;AAAkBC;AAGtB;AAAkBC;AAgBtB;;AAGE;AAKoC;AAClCC;AAEYC;AACQC;AACAC;AACNC;AACSC;AACFC;AACDC;AACDC;AACCC;AAEIC;AACAC;AAEjB;AACLC;AACUA;AAAAA;AAIdC;AAOF;;;;;"}

package/dist/TableHead/index.d.ts

@@ -1,6 +1,8 @@
+import { HTMLAttributes } from 'react';
 import { Table } from '@tanstack/react-table';
+export type TableHeadProps = HTMLAttributes<HTMLTableSectionElement>;
 export declare const TableHead: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
-export declare const getDataGridTableHead: (table: Table<unknown>) => import("@emotion/react/jsx-runtime").JSX.Element;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+export declare const getDataGridTableHead: (table: Table<unknown>, props?: TableHeadProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/TableHead/index.es.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsx as b } from "@emotion/react/jsx-runtime";
-import n from "@emotion/styled/base";
-import { useContext as i } from "react";
-import { DataGridContext as o } from "../DataGridContext.es.js";
+import { jsx as c } from "@emotion/react/jsx-runtime";
+import I from "@emotion/styled/base";
+import { useContext as n } from "react";
+import { DataGridContext as i } from "../DataGridContext.es.js";
 import { getDataGridTableHeadCell as a } from "../TableHeadCell/index.es.js";
-import { TableHeadRow as l } from "../TableHeadRow/index.es.js";
+import { TableHeadRow as o } from "../TableHeadRow/index.es.js";
 function Z() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const I = /* @__PURE__ */ n("thead", process.env.NODE_ENV === "production" ? {
+const g = /* @__PURE__ */ I("thead", process.env.NODE_ENV === "production" ? {
   target: "etxjaz80"
 } : {
   target: "etxjaz80",
@@ -18,14 +18,17 @@ const I = /* @__PURE__ */ n("thead", process.env.NODE_ENV === "production" ? {
   styles: "position:sticky;top:0;z-index:2"
 } : {
   name: "2hn84s",
-  styles: "position:sticky;top:0;z-index:2/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3NhZHlrb3ZzZC9qb2luLXg1L3BhY2thZ2VzL2RhdGEtZ3JpZC9zcmMvVGFibGVIZWFkL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXcUMiLCJmaWxlIjoiL2hvbWUvc2FkeWtvdnNkL2pvaW4teDUvcGFja2FnZXMvZGF0YS1ncmlkL3NyYy9UYWJsZUhlYWQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnO1xuXG5pbXBvcnQge3VzZUNvbnRleHR9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHtEYXRhR3JpZENvbnRleHR9IGZyb20gJ0RhdGFHcmlkQ29udGV4dCc7XG5pbXBvcnQge2dldERhdGFHcmlkVGFibGVIZWFkQ2VsbH0gZnJvbSAnVGFibGVIZWFkQ2VsbCc7XG5pbXBvcnQge1RhYmxlSGVhZFJvd30gZnJvbSAnVGFibGVIZWFkUm93JztcblxuaW1wb3J0IHR5cGUge1RhYmxlfSBmcm9tICdAdGFuc3RhY2svcmVhY3QtdGFibGUnO1xuXG5leHBvcnQgY29uc3QgVGFibGVIZWFkID0gc3R5bGVkLnRoZWFkYFxuICBwb3NpdGlvbjogc3RpY2t5O1xuICB0b3A6IDA7XG4gIHotaW5kZXg6IDI7XG5gO1xuXG50eXBlIERhdGFHcmlkVGFibGVIZWFkUHJvcHMgPSB7XG4gIHRhYmxlOiBUYWJsZTx1bmtub3duPjtcbn07XG5cbmNvbnN0IERhdGFHcmlkVGFibGVIZWFkOiBSZWFjdC5GQzxEYXRhR3JpZFRhYmxlSGVhZFByb3BzPiA9IHByb3BzID0+IHtcbiAgY29uc3QgY29udGV4dCA9IHVzZUNvbnRleHQoRGF0YUdyaWRDb250ZXh0KTtcblxuICBjb25zdCBjb250ZW50ID0gcHJvcHMudGFibGVcbiAgICAuZ2V0SGVhZGVyR3JvdXBzKClcbiAgICAubWFwKGhlYWRlckdyb3VwID0+IChcbiAgICAgIDxUYWJsZUhlYWRSb3cga2V5PXtoZWFkZXJHcm91cC5pZH0+XG4gICAgICAgIHtoZWFkZXJHcm91cC5oZWFkZXJzLm1hcChoZWFkZXIgPT4gZ2V0RGF0YUdyaWRUYWJsZUhlYWRDZWxsKGhlYWRlcikpfVxuICAgICAgPC9UYWJsZUhlYWRSb3c+XG4gICAgKSk7XG5cbiAgcmV0dXJuIDxUYWJsZUhlYWQgZGF0YS1xYT17YCR7Y29udGV4dC5xYX0taGVhZGB9Pntjb250ZW50fTwvVGFibGVIZWFkPjtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXREYXRhR3JpZFRhYmxlSGVhZCA9ICh0YWJsZTogVGFibGU8dW5rbm93bj4pID0+IHtcbiAgcmV0dXJuIDxEYXRhR3JpZFRhYmxlSGVhZCB0YWJsZT17dGFibGV9IC8+O1xufTtcbiJdfQ== */",
+  styles: "position:sticky;top:0;z-index:2/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3NhZHlrb3ZzZC9qb2luLXg1L3BhY2thZ2VzL2RhdGEtZ3JpZC9zcmMvVGFibGVIZWFkL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjcUMiLCJmaWxlIjoiL2hvbWUvc2FkeWtvdnNkL2pvaW4teDUvcGFja2FnZXMvZGF0YS1ncmlkL3NyYy9UYWJsZUhlYWQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnO1xuXG5pbXBvcnQge3VzZUNvbnRleHR9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHtEYXRhR3JpZENvbnRleHR9IGZyb20gJ0RhdGFHcmlkQ29udGV4dCc7XG5pbXBvcnQge2dldERhdGFHcmlkVGFibGVIZWFkQ2VsbH0gZnJvbSAnVGFibGVIZWFkQ2VsbCc7XG5pbXBvcnQge1RhYmxlSGVhZFJvd30gZnJvbSAnVGFibGVIZWFkUm93JztcblxuaW1wb3J0IHR5cGUge0hUTUxBdHRyaWJ1dGVzfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgdHlwZSB7VGFibGV9IGZyb20gJ0B0YW5zdGFjay9yZWFjdC10YWJsZSc7XG5cbmV4cG9ydCB0eXBlIFRhYmxlSGVhZFByb3BzID0gSFRNTEF0dHJpYnV0ZXM8SFRNTFRhYmxlU2VjdGlvbkVsZW1lbnQ+O1xuXG5leHBvcnQgY29uc3QgVGFibGVIZWFkID0gc3R5bGVkLnRoZWFkYFxuICBwb3NpdGlvbjogc3RpY2t5O1xuICB0b3A6IDA7XG4gIHotaW5kZXg6IDI7XG5gO1xuXG50eXBlIERhdGFHcmlkVGFibGVIZWFkUHJvcHMgPSB7XG4gIHRhYmxlOiBUYWJsZTx1bmtub3duPjtcbn0gJiBUYWJsZUhlYWRQcm9wcztcblxuY29uc3QgRGF0YUdyaWRUYWJsZUhlYWQ6IFJlYWN0LkZDPERhdGFHcmlkVGFibGVIZWFkUHJvcHM+ID0gKHt0YWJsZSwgLi4ucHJvcHN9KSA9PiB7XG4gIGNvbnN0IGNvbnRleHQgPSB1c2VDb250ZXh0KERhdGFHcmlkQ29udGV4dCk7XG5cbiAgY29uc3QgY29udGVudCA9IHRhYmxlXG4gICAgLmdldEhlYWRlckdyb3VwcygpXG4gICAgLm1hcChoZWFkZXJHcm91cCA9PiAoXG4gICAgICA8VGFibGVIZWFkUm93IGtleT17aGVhZGVyR3JvdXAuaWR9PlxuICAgICAgICB7aGVhZGVyR3JvdXAuaGVhZGVycy5tYXAoaGVhZGVyID0+IGdldERhdGFHcmlkVGFibGVIZWFkQ2VsbChoZWFkZXIpKX1cbiAgICAgIDwvVGFibGVIZWFkUm93PlxuICAgICkpO1xuXG4gIHJldHVybiAoXG4gICAgPFRhYmxlSGVhZCBkYXRhLXFhPXtgJHtjb250ZXh0LnFhfS1oZWFkYH0gey4uLnByb3BzfT5cbiAgICAgIHtjb250ZW50fVxuICAgIDwvVGFibGVIZWFkPlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldERhdGFHcmlkVGFibGVIZWFkID0gKHRhYmxlOiBUYWJsZTx1bmtub3duPiwgcHJvcHM/OiBUYWJsZUhlYWRQcm9wcykgPT4ge1xuICByZXR1cm4gPERhdGFHcmlkVGFibGVIZWFkIHRhYmxlPXt0YWJsZX0gey4uLnByb3BzfSAvPjtcbn07XG4iXX0= */",
   toString: Z
-}), s = (t) => {
-  const e = i(o), G = t.table.getHeaderGroups().map((c) => /* @__PURE__ */ b(l, { children: c.headers.map((d) => a(d)) }, c.id));
-  return /* @__PURE__ */ b(I, { "data-qa": `${e.qa}-head`, children: G });
-}, r = (t) => /* @__PURE__ */ b(s, { table: t });
+}), V = ({
+  table: t,
+  ...G
+}) => {
+  const e = n(i), l = t.getHeaderGroups().map((b) => /* @__PURE__ */ c(o, { children: b.headers.map((d) => a(d)) }, b.id));
+  return /* @__PURE__ */ c(g, { "data-qa": `${e.qa}-head`, ...G, children: l });
+}, R = (t, G) => /* @__PURE__ */ c(V, { table: t, ...G });
 export {
-  I as TableHead,
-  r as getDataGridTableHead
+  g as TableHead,
+  R as getDataGridTableHead
 };
 //# sourceMappingURL=index.es.js.map

package/dist/TableHead/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../src/TableHead/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\nimport styled from '@emotion/styled';\n\nimport {DataGridContext} from 'DataGridContext';\nimport {getDataGridTableHeadCell} from 'TableHeadCell';\nimport {TableHeadRow} from 'TableHeadRow';\n\nimport type {Table} from '@tanstack/react-table';\n\nexport const TableHead = styled.thead`\n  position: sticky;\n  top: 0;\n  z-index: 2;\n`;\n\ntype DataGridTableHeadProps = {\n  table: Table<unknown>;\n};\n\nconst DataGridTableHead: React.FC<DataGridTableHeadProps> = props => {\n  const context = useContext(DataGridContext);\n\n  const content = props.table\n    .getHeaderGroups()\n    .map(headerGroup => (\n      <TableHeadRow key={headerGroup.id}>\n        {headerGroup.headers.map(header => getDataGridTableHeadCell(header))}\n      </TableHeadRow>\n    ));\n\n  return <TableHead data-qa={`${context.qa}-head`}>{content}</TableHead>;\n};\n\nexport const getDataGridTableHead = (table: Table<unknown>) => {\n  return <DataGridTableHead table={table} />;\n};\n"],"names":[],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAWN;AAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB;AAUA;AACF;;;;;"}
+{"version":3,"file":"index.es.js","sources":["../../src/TableHead/index.tsx"],"sourcesContent":["'use client';\n\nimport {useContext} from 'react';\nimport styled from '@emotion/styled';\n\nimport {DataGridContext} from 'DataGridContext';\nimport {getDataGridTableHeadCell} from 'TableHeadCell';\nimport {TableHeadRow} from 'TableHeadRow';\n\nimport type {HTMLAttributes} from 'react';\nimport type {Table} from '@tanstack/react-table';\n\nexport type TableHeadProps = HTMLAttributes<HTMLTableSectionElement>;\n\nexport const TableHead = styled.thead`\n  position: sticky;\n  top: 0;\n  z-index: 2;\n`;\n\ntype DataGridTableHeadProps = {\n  table: Table<unknown>;\n} & TableHeadProps;\n\nconst DataGridTableHead: React.FC<DataGridTableHeadProps> = ({table, ...props}) => {\n  const context = useContext(DataGridContext);\n\n  const content = table\n    .getHeaderGroups()\n    .map(headerGroup => (\n      <TableHeadRow key={headerGroup.id}>\n        {headerGroup.headers.map(header => getDataGridTableHeadCell(header))}\n      </TableHeadRow>\n    ));\n\n  return (\n    <TableHead data-qa={`${context.qa}-head`} {...props}>\n      {content}\n    </TableHead>\n  );\n};\n\nexport const getDataGridTableHead = (table: Table<unknown>, props?: TableHeadProps) => {\n  return <DataGridTableHead table={table} {...props} />;\n};\n"],"names":["table"],"mappings":";;;;;;;AAAa;AAAA;AAAA;AAcN;AAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUuC;AAACA;AAAe;AAC3E;AAUA;AAKF;;;;;"}