@trackunit/react-table 1.7.20 → 1.7.22

package/index.cjs.js

@@ -13,7 +13,6 @@ var reactDnd = require('react-dnd');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
 var reactTable = require('@tanstack/react-table');
 var reactTableBaseComponents = require('@trackunit/react-table-base-components');
-var reactTablePagination = require('@trackunit/react-table-pagination');
 var tailwindMerge = require('tailwind-merge');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
 
@@ -868,11 +867,11 @@ const ColumnSorting = ({ canSort, sortingState = false }) => {
  */
 const Table = ({ rowHeight = 50, ...props }) => {
     //we need a reference to the scrolling element for logic down below
-    const tableContainerRef = react.useRef(null);
+    const tableScrollElementRef = react.useRef(null);
     const [t] = useTranslation();
-    const { getVirtualItems, getTotalSize } = reactTablePagination.useInfiniteScroll({
-        pagination: props.pagination || reactTablePagination.noPagination,
-        containerRef: tableContainerRef,
+    const virtualizer = reactComponents.useInfiniteScroll({
+        pagination: props.pagination || reactComponents.noPagination,
+        scrollElementRef: tableScrollElementRef,
         count: props.getRowModel().rows.length,
         estimateSize: () => rowHeight, // TODO: we should probably move from rowHeight -> estimateSize callback api to match Tanstack Virtual
     });
@@ -888,8 +887,8 @@ const Table = ({ rowHeight = 50, ...props }) => {
     const [containWholeTable, setContainWholeTable] = react.useState(false);
     react.useEffect(() => {
         const updateContainWholeTable = () => {
-            if (tableContainerRef.current) {
-                const containerWidth = tableContainerRef.current.offsetWidth;
+            if (tableScrollElementRef.current) {
+                const containerWidth = tableScrollElementRef.current.offsetWidth;
                 setContainWholeTable(totalVisibleColumnsWidth > containerWidth);
             }
         };
@@ -941,7 +940,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", ref: tableContainerRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", ref: tableScrollElementRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
@@ -975,9 +974,9 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                             !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null));
                                     }) }, headerGroup.id));
                             }) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
-                                height: `${getTotalSize()}px`,
+                                height: `${virtualizer.getTotalSize()}px`,
                                 flexGrow: 1,
-                            }, children: getVirtualItems().map((virtualRow, index) => {
+                            }, children: virtualizer.getVirtualItems().map((virtualRow, index) => {
                                 const row = props.getRowModel().rows[virtualRow.index];
                                 if (!row) {
                                     return null;

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { MenuItem, Icon, Button, Tooltip, useOverflowItems, MoreMenu, MenuList, Spacer, cvaInteractableItem, Text, Popover, PopoverTrigger, IconButton, PopoverContent, Card, Spinner, EmptyState } from '@trackunit/react-components';
+import { MenuItem, Icon, Button, Tooltip, useOverflowItems, MoreMenu, MenuList, Spacer, cvaInteractableItem, Text, Popover, PopoverTrigger, IconButton, PopoverContent, useInfiniteScroll, noPagination, Card, Spinner, EmptyState } from '@trackunit/react-components';
 import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
 import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback, createElement } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -12,7 +12,6 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { flexRender, createColumnHelper, useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
 import { TableRoot, Thead, Tr, Th, ResizeHandle, Tbody, Td } from '@trackunit/react-table-base-components';
-import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
 import { twMerge } from 'tailwind-merge';
 import { SortOrder, validateStringAsAssetSortByProperty } from '@trackunit/react-core-contexts-api';
 
@@ -867,11 +866,11 @@ const ColumnSorting = ({ canSort, sortingState = false }) => {
  */
 const Table = ({ rowHeight = 50, ...props }) => {
     //we need a reference to the scrolling element for logic down below
-    const tableContainerRef = useRef(null);
+    const tableScrollElementRef = useRef(null);
     const [t] = useTranslation();
-    const { getVirtualItems, getTotalSize } = useInfiniteScroll({
+    const virtualizer = useInfiniteScroll({
         pagination: props.pagination || noPagination,
-        containerRef: tableContainerRef,
+        scrollElementRef: tableScrollElementRef,
         count: props.getRowModel().rows.length,
         estimateSize: () => rowHeight, // TODO: we should probably move from rowHeight -> estimateSize callback api to match Tanstack Virtual
     });
@@ -887,8 +886,8 @@ const Table = ({ rowHeight = 50, ...props }) => {
     const [containWholeTable, setContainWholeTable] = useState(false);
     useEffect(() => {
         const updateContainWholeTable = () => {
-            if (tableContainerRef.current) {
-                const containerWidth = tableContainerRef.current.offsetWidth;
+            if (tableScrollElementRef.current) {
+                const containerWidth = tableScrollElementRef.current.offsetWidth;
                 setContainWholeTable(totalVisibleColumnsWidth > containerWidth);
             }
         };
@@ -940,7 +939,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
             header.column.getToggleSortingHandler()?.(event);
         }
     }, [props]);
-    return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", ref: tableContainerRef, children: jsxs(TableRoot, { style: {
+    return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", ref: tableScrollElementRef, children: jsxs(TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
@@ -974,9 +973,9 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                             !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null));
                                     }) }, headerGroup.id));
                             }) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
-                                height: `${getTotalSize()}px`,
+                                height: `${virtualizer.getTotalSize()}px`,
                                 flexGrow: 1,
-                            }, children: getVirtualItems().map((virtualRow, index) => {
+                            }, children: virtualizer.getVirtualItems().map((virtualRow, index) => {
                                 const row = props.getRowModel().rows[virtualRow.index];
                                 if (!row) {
                                     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.7.20",
+  "version": "1.7.22",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,16 +15,15 @@
     "jest-fetch-mock": "^3.0.3",
     "@tanstack/react-router": "1.114.29",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.9.19",
-    "@trackunit/shared-utils": "1.9.11",
-    "@trackunit/css-class-variance-utilities": "1.7.11",
-    "@trackunit/ui-icons": "1.7.13",
-    "@trackunit/react-table-base-components": "1.7.19",
-    "@trackunit/react-table-pagination": "1.7.11",
-    "@trackunit/react-form-components": "1.8.19",
-    "@trackunit/i18n-library-translation": "1.7.15",
-    "@trackunit/react-core-contexts-api": "1.8.13",
-    "@trackunit/react-test-setup": "1.4.11"
+    "@trackunit/react-components": "1.9.21",
+    "@trackunit/shared-utils": "1.9.12",
+    "@trackunit/css-class-variance-utilities": "1.7.12",
+    "@trackunit/ui-icons": "1.7.14",
+    "@trackunit/react-table-base-components": "1.7.21",
+    "@trackunit/react-form-components": "1.8.21",
+    "@trackunit/i18n-library-translation": "1.7.16",
+    "@trackunit/react-core-contexts-api": "1.8.14",
+    "@trackunit/react-test-setup": "1.4.12"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Table.d.ts

@@ -1,6 +1,5 @@
 import { Table as ReactTable, Row } from "@tanstack/react-table";
-import { CommonProps, EmptyStateProps } from "@trackunit/react-components";
-import { RelayPagination } from "@trackunit/react-table-pagination";
+import { CommonProps, EmptyStateProps, RelayPagination } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
 import "./table-animations.css";
 export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps {