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

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: l,
+    components: u,
+    rowProps: e,
+    wrapperRef: r,
+    virtualize: n,
+    ...m
+  } = c, p = x(h), s = l.getRowModel().rows, o = b({
+    count: s.length,
+    estimateSize: () => 40,
+    getScrollElement: () => r.current,
+    measureElement: (t) => t.getBoundingClientRect().height,
+    overscan: 5,
+    ...typeof n == "object" ? n : void 0
+  }), d = u?.row ?? y, f = (t) => o.measureElement(t), g = o.getVirtualItems().map((t) => {
+    const i = s[t.index], a = {
+      ref: f,
+      "data-index": t.index,
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        transform: `translateY(${t.start}px)`
+      }
+    };
+    return e && Object.assign(a, typeof e == "function" ? e(i) : e), d(i, a);
+  }), w = {
+    "data-qa": `${p.qa}-body`,
+    style: {
+      height: o.getTotalSize(),
+      ...m.style
+    }
+  };
+  return r.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

@@ -1,8 +1,8 @@
 "use client";
 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) => {
+import { DataGridContext as l } from "../DataGridContext.es.js";
+const a = (t, e) => {
   const i = t.getIsPinned();
   e.columnArea = (() => {
     switch (t.getIsPinned()) {
@@ -12,10 +12,9 @@ const c = (t, e) => {
         return r.FixedRight;
     }
     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 = {
+  })(), i && (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")));
+}, u = (t) => {
+  const e = o(l), i = typeof e.isMultiline == "boolean" ? e.isMultiline : e.isMultiline?.(t), n = `calc(var(--header-${t.column?.id}-size) * 1px)`, s = {
     isMultiline: i,
     qa: e.qa,
     isBordered: e.isBordered,
@@ -33,10 +32,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 a(t.column, s), e.cellProps && Object.assign(s, typeof e.cellProps == "function" ? e.cellProps(t) : e.cellProps), s;
 };
 export {
-  c as areaProps,
-  h as useDataGridTableCell
+  a as areaProps,
+  u 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;;;;;"}