@trackunit/react-table 0.0.298 → 0.0.302

package/index.cjs.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactComponents = require('@trackunit/react-components');
+var sharedUtils = require('@trackunit/shared-utils');
 var React = require('react');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactRouter = require('@tanstack/react-router');
 var reactTable = require('@tanstack/react-table');
 var reactTableBaseComponents = require('@trackunit/react-table-base-components');
-var reactVirtual = require('@tanstack/react-virtual');
+var reactTablePagination = require('@trackunit/react-table-pagination');
 var reactFormComponents = require('@trackunit/react-form-components');
 var update = require('immutability-helper');
 var reactDnd = require('react-dnd');
@@ -250,7 +251,7 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
         }
         return "visible";
     };
-    const overflowItemCount = Object.values(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
+    const overflowItemCount = sharedUtils.objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaActionContainerAndOverflow(), ref: overflowContainerRef, children: React.Children.map(children, child => {
                     return React.cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
@@ -275,68 +276,6 @@ const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, cl
                 moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
 };
 
-const noPagination = {
-    isLoading: false,
-    nextPage: () => { },
-    previousPage: () => { },
-    pageInfo: {
-        hasNextPage: false,
-        hasPreviousPage: false,
-        endCursor: null,
-        startCursor: null,
-    },
-};
-
-/**
- * Custom hook for implementing infinite scrolling in a table.
- *
- * @param {InfiniteScrollProps} props - The configuration object for the infinite scroll behavior.
- * @returns {InfiniteScroll} An object containing properties and functions for infinite scrolling.
- * @description
- * This hook is used to implement infinite scrolling in a table. It calculates the necessary padding
- * for virtual rows, provides a callback for fetching more data when the user scrolls to the bottom,
- * and manages virtualized rows for efficient rendering.
- * @example
- * const { paddingTop, paddingBottom, fetchMoreOnBottomReached, rowVirtualizer, virtualRows } = useInfiniteScroll({
- *   pagination: relayPaginationObject,
- *   containerRef: tableContainerRef,
- *   rowSize: 50,
- * });
- */
-const useInfiniteScroll = (props) => {
-    //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
-    const fetchMoreOnBottomReached = React.useCallback((containerRefElement) => {
-        var _a;
-        if (containerRefElement) {
-            const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-            //once the user has scrolled within 300px of the bottom of the table, fetch more data if there is any
-            if (scrollHeight - scrollTop - clientHeight < 300 &&
-                !props.pagination.isLoading &&
-                ((_a = props.pagination.pageInfo) === null || _a === void 0 ? void 0 : _a.hasNextPage)) {
-                props.pagination.nextPage();
-            }
-        }
-    }, [props.pagination]);
-    const rowVirtualizer = reactVirtual.useVirtualizer({
-        count: props.rowSize,
-        getScrollElement: () => props.containerRef.current,
-        estimateSize: React.useCallback((i) => props.rowHeight, [props.rowHeight]),
-        overscan: 10,
-    });
-    React.useEffect(() => {
-        // this ensures the cache is cleared if the rowHeight changes
-        if (props.rowHeight) {
-            rowVirtualizer.measure();
-        }
-    }, [props.rowHeight, rowVirtualizer]);
-    const { getVirtualItems, getTotalSize } = rowVirtualizer;
-    return {
-        fetchMoreOnBottomReached,
-        getTotalSize,
-        getVirtualItems,
-    };
-};
-
 /**
  * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
  *
@@ -350,8 +289,8 @@ const Table = (_a) => {
     //we need a reference to the scrolling element for logic down below
     const tableContainerRef = React.useRef(null);
     const [t] = useTranslation();
-    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = useInfiniteScroll({
-        pagination: props.pagination || noPagination,
+    const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = reactTablePagination.useInfiniteScroll({
+        pagination: props.pagination || reactTablePagination.noPagination,
         containerRef: tableContainerRef,
         rowSize: props.getRowModel().rows.length || 0,
         rowHeight,
@@ -467,12 +406,14 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
     const moveColumn = React__namespace.useCallback((dragIndex, hoverIndex) => {
         var _a;
         const dragColumn = localColumns[dragIndex];
-        setLocalColumns(update__default["default"](localColumns, {
-            $splice: [
-                [dragIndex, 1],
-                [hoverIndex, 0, dragColumn],
-            ],
-        }));
+        if (dragColumn) {
+            setLocalColumns(update__default["default"](localColumns, {
+                $splice: [
+                    [dragIndex, 1],
+                    [hoverIndex, 0, dragColumn],
+                ],
+            }));
+        }
         onUserEvent === null || onUserEvent === void 0 ? void 0 : onUserEvent("Column Reordering", {
             columnReordered: (_a = dragColumn === null || dragColumn === void 0 ? void 0 : dragColumn.columnDef.header) !== null && _a !== void 0 ? _a : "",
         });
@@ -614,6 +555,7 @@ const useTable = (_a) => {
     var _b, _c, _d, _e;
     var { onTableStateChange, initialState, columns } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState", "columns"]);
     const hiddenByDefaultState = React.useMemo(() => {
+        // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
         return Object.fromEntries(columns.map(column => { var _a, _b; return [column.id, (_b = !((_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)) !== null && _b !== void 0 ? _b : true]; }));
     }, [columns]);
     const [columnVisibility, setColumnVisibility] = React.useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility) || hiddenByDefaultState || {});
@@ -628,8 +570,8 @@ const useTable = (_a) => {
         }
     }, [isFirstRender, columns]);
     React.useEffect(() => {
-        if (initialState && Object.keys(initialState || {}).length > 0) {
-            setColumnVisibility(Object.keys(initialState.columnVisibility || {}).length > 0
+        if (initialState && sharedUtils.objectKeys(initialState || {}).length > 0) {
+            setColumnVisibility(sharedUtils.objectKeys(initialState.columnVisibility || {}).length > 0
                 ? initialState.columnVisibility
                 : hiddenByDefaultState || {});
             setColumnOrder(initialState.columnOrder || []);
@@ -718,7 +660,7 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
     const toggleRowSelectionState = React.useCallback((id) => {
         setRowSelection(prevRowSelection => (Object.assign(Object.assign({}, prevRowSelection), { [id]: !prevRowSelection[id] })));
     }, []);
-    const selectedIds = React.useMemo(() => Object.entries(rowSelection)
+    const selectedIds = React.useMemo(() => sharedUtils.objectEntries(rowSelection)
         .filter(([_, selected]) => selected)
         .map(([id]) => id), [rowSelection]);
     const columnHelper = React.useMemo(() => reactTable.createColumnHelper(), []);

package/index.esm.js

@@ -1,14 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { MenuItem, Icon, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, Spinner, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent, useIsFirstRender } from '@trackunit/react-components';
+import { objectValues, objectKeys, objectEntries } from '@trackunit/shared-utils';
 import * as React from 'react';
-import { useMemo, Children, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
+import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Link } from '@tanstack/react-router';
 import { flexRender, useReactTable, getSortedRowModel, getCoreRowModel, createColumnHelper } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
 import { TableRoot, Thead, Tr, Th, SortIndicator, ResizeHandle, Tbody, Td } from '@trackunit/react-table-base-components';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
 import { Toggle, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
 import update from 'immutability-helper';
 import { DndProvider, useDrop, useDrag } from 'react-dnd';
@@ -225,7 +226,7 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
         }
         return "visible";
     };
-    const overflowItemCount = Object.values(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
+    const overflowItemCount = objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
     return (jsxs(Fragment, { children: [jsx("div", { className: cvaActionContainerAndOverflow(), ref: overflowContainerRef, children: Children.map(children, child => {
                     return cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
@@ -250,68 +251,6 @@ const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, cl
                 moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
 };
 
-const noPagination = {
-    isLoading: false,
-    nextPage: () => { },
-    previousPage: () => { },
-    pageInfo: {
-        hasNextPage: false,
-        hasPreviousPage: false,
-        endCursor: null,
-        startCursor: null,
-    },
-};
-
-/**
- * Custom hook for implementing infinite scrolling in a table.
- *
- * @param {InfiniteScrollProps} props - The configuration object for the infinite scroll behavior.
- * @returns {InfiniteScroll} An object containing properties and functions for infinite scrolling.
- * @description
- * This hook is used to implement infinite scrolling in a table. It calculates the necessary padding
- * for virtual rows, provides a callback for fetching more data when the user scrolls to the bottom,
- * and manages virtualized rows for efficient rendering.
- * @example
- * const { paddingTop, paddingBottom, fetchMoreOnBottomReached, rowVirtualizer, virtualRows } = useInfiniteScroll({
- *   pagination: relayPaginationObject,
- *   containerRef: tableContainerRef,
- *   rowSize: 50,
- * });
- */
-const useInfiniteScroll = (props) => {
-    //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
-    const fetchMoreOnBottomReached = useCallback((containerRefElement) => {
-        var _a;
-        if (containerRefElement) {
-            const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-            //once the user has scrolled within 300px of the bottom of the table, fetch more data if there is any
-            if (scrollHeight - scrollTop - clientHeight < 300 &&
-                !props.pagination.isLoading &&
-                ((_a = props.pagination.pageInfo) === null || _a === void 0 ? void 0 : _a.hasNextPage)) {
-                props.pagination.nextPage();
-            }
-        }
-    }, [props.pagination]);
-    const rowVirtualizer = useVirtualizer({
-        count: props.rowSize,
-        getScrollElement: () => props.containerRef.current,
-        estimateSize: useCallback((i) => props.rowHeight, [props.rowHeight]),
-        overscan: 10,
-    });
-    useEffect(() => {
-        // this ensures the cache is cleared if the rowHeight changes
-        if (props.rowHeight) {
-            rowVirtualizer.measure();
-        }
-    }, [props.rowHeight, rowVirtualizer]);
-    const { getVirtualItems, getTotalSize } = rowVirtualizer;
-    return {
-        fetchMoreOnBottomReached,
-        getTotalSize,
-        getVirtualItems,
-    };
-};
-
 /**
  * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
  *
@@ -442,12 +381,14 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
     const moveColumn = React.useCallback((dragIndex, hoverIndex) => {
         var _a;
         const dragColumn = localColumns[dragIndex];
-        setLocalColumns(update(localColumns, {
-            $splice: [
-                [dragIndex, 1],
-                [hoverIndex, 0, dragColumn],
-            ],
-        }));
+        if (dragColumn) {
+            setLocalColumns(update(localColumns, {
+                $splice: [
+                    [dragIndex, 1],
+                    [hoverIndex, 0, dragColumn],
+                ],
+            }));
+        }
         onUserEvent === null || onUserEvent === void 0 ? void 0 : onUserEvent("Column Reordering", {
             columnReordered: (_a = dragColumn === null || dragColumn === void 0 ? void 0 : dragColumn.columnDef.header) !== null && _a !== void 0 ? _a : "",
         });
@@ -589,6 +530,7 @@ const useTable = (_a) => {
     var _b, _c, _d, _e;
     var { onTableStateChange, initialState, columns } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState", "columns"]);
     const hiddenByDefaultState = useMemo(() => {
+        // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
         return Object.fromEntries(columns.map(column => { var _a, _b; return [column.id, (_b = !((_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)) !== null && _b !== void 0 ? _b : true]; }));
     }, [columns]);
     const [columnVisibility, setColumnVisibility] = useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility) || hiddenByDefaultState || {});
@@ -603,8 +545,8 @@ const useTable = (_a) => {
         }
     }, [isFirstRender, columns]);
     useEffect(() => {
-        if (initialState && Object.keys(initialState || {}).length > 0) {
-            setColumnVisibility(Object.keys(initialState.columnVisibility || {}).length > 0
+        if (initialState && objectKeys(initialState || {}).length > 0) {
+            setColumnVisibility(objectKeys(initialState.columnVisibility || {}).length > 0
                 ? initialState.columnVisibility
                 : hiddenByDefaultState || {});
             setColumnOrder(initialState.columnOrder || []);
@@ -693,7 +635,7 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
     const toggleRowSelectionState = useCallback((id) => {
         setRowSelection(prevRowSelection => (Object.assign(Object.assign({}, prevRowSelection), { [id]: !prevRowSelection[id] })));
     }, []);
-    const selectedIds = useMemo(() => Object.entries(rowSelection)
+    const selectedIds = useMemo(() => objectEntries(rowSelection)
         .filter(([_, selected]) => selected)
         .map(([id]) => id), [rowSelection]);
     const columnHelper = useMemo(() => createColumnHelper(), []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.298",
+  "version": "0.0.302",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "react-dnd": "14.0.5",
     "react-dnd-html5-backend": "14.1.0",
     "jest-fetch-mock": "^3.0.3",
-    "@tanstack/react-virtual": "3.0.0-beta.68",
     "@trackunit/react-core-contexts-api": "*",
     "@trackunit/css-class-variance-utilities": "*",
     "@trackunit/ui-icons": "*",
     "@trackunit/i18n-library-translation": "*",
-    "@tanstack/react-router": "1.19.1"
+    "@tanstack/react-router": "1.19.1",
+    "@trackunit/shared-utils": "*"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/noPagination.d.ts

@@ -1,2 +0,0 @@
-import { RelayPagination } from "@trackunit/react-table-pagination";
-export declare const noPagination: RelayPagination;

package/src/useInfiniteScroll.d.ts

@@ -1,32 +0,0 @@
-import { VirtualItem } from "@tanstack/react-virtual";
-import { RelayPagination } from "@trackunit/react-table-pagination";
-import { RefObject } from "react";
-interface InfiniteScrollProps {
-    pagination: RelayPagination;
-    containerRef: RefObject<HTMLDivElement>;
-    rowSize: number;
-    rowHeight: number;
-}
-interface InfiniteScroll {
-    fetchMoreOnBottomReached: (containerRefElement?: HTMLDivElement | null) => void;
-    getTotalSize: () => number;
-    getVirtualItems: () => VirtualItem[];
-}
-/**
- * Custom hook for implementing infinite scrolling in a table.
- *
- * @param {InfiniteScrollProps} props - The configuration object for the infinite scroll behavior.
- * @returns {InfiniteScroll} An object containing properties and functions for infinite scrolling.
- * @description
- * This hook is used to implement infinite scrolling in a table. It calculates the necessary padding
- * for virtual rows, provides a callback for fetching more data when the user scrolls to the bottom,
- * and manages virtualized rows for efficient rendering.
- * @example
- * const { paddingTop, paddingBottom, fetchMoreOnBottomReached, rowVirtualizer, virtualRows } = useInfiniteScroll({
- *   pagination: relayPaginationObject,
- *   containerRef: tableContainerRef,
- *   rowSize: 50,
- * });
- */
-export declare const useInfiniteScroll: (props: InfiniteScrollProps) => InfiniteScroll;
-export {};