@trackunit/react-table 1.0.22 → 1.0.27

package/index.cjs.js

@@ -4,7 +4,7 @@ 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 react = require('react');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactRouter = require('@tanstack/react-router');
 var reactFormComponents = require('@trackunit/react-form-components');
@@ -17,25 +17,6 @@ var reactTablePagination = require('@trackunit/react-table-pagination');
 var tailwindMerge = require('tailwind-merge');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 var defaultTranslations = {
 	"layout.actions.reset": "Reset",
 	"table.actionsheet.selected": "{{count}} selected",
@@ -245,7 +226,7 @@ const ActionIcon = ({ action }) => {
  * @returns {ReactElement} The rendered component.
  */
 const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dataTestId, }) => {
-    const children = React.useMemo(() => actions.map(action => actionDataToActionButton(action)), [actions]);
+    const children = react.useMemo(() => actions.map(action => actionDataToActionButton(action)), [actions]);
     const { overflowContainerRef, itemOverflowMap } = reactComponents.useOverflowItems({
         children,
         childUniqueIdentifierAttribute: "id",
@@ -258,8 +239,8 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dat
         return "visible";
     };
     const overflowItemCount = sharedUtils.objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaActionContainerAndOverflow({ isDropdown: dropdownActions !== undefined }), ref: overflowContainerRef, children: React.Children.map(children, child => {
-                    return React.cloneElement(child, {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaActionContainerAndOverflow({ isDropdown: dropdownActions !== undefined }), ref: overflowContainerRef, children: react.Children.map(children, child => {
+                    return react.cloneElement(child, {
                         className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
                     });
                 }) }), jsxRuntime.jsxs("div", { className: cvaMoreContainer({ isDropdown: dropdownActions !== undefined }), children: [dropdownActions
@@ -268,7 +249,7 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dat
                                     // eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
                                     prefix: jsxRuntime.jsx(ActionIcon, { action: action }), children: action.label }), dataTestId: `${dataTestId}-dropdown-more-menu`, popoverProps: { placement: "top-end" }, children: !action.loading ? action.dropdown : null }, action.id));
                         })
-                        : null, React.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, { dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "primary" }, iconProps: { color: "white" }, popoverProps: { placement: "top-end" }, children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
+                        : null, react.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, { dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "primary" }, iconProps: { color: "white" }, popoverProps: { placement: "top-end" }, children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
                                     return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
                                 })] })) })) : null] })] }));
 };
@@ -309,17 +290,17 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
     const [t] = useTranslation();
     const numberOfHiddenColumns = columns.filter(column => !column.getIsVisible()).length;
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (defaultColumnOrder.length > 0) {
             setColumnOrder(defaultColumnOrder);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); //This should only run once, at page load
-    const resetHiddenColumns = React__namespace.useCallback(() => {
+    const resetHiddenColumns = react.useCallback(() => {
         columns.forEach(column => column.toggleVisibility(!column.columnDef.meta?.hiddenByDefault));
         setColumnOrder(defaultColumnOrder);
     }, [columns, defaultColumnOrder, setColumnOrder]);
-    const sortedColumns = React.useMemo(() => {
+    const sortedColumns = react.useMemo(() => {
         const result = columnOrder && (columnOrder.length || 0) > 0
             ? columns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
             : columns;
@@ -337,11 +318,11 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
     return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: t("table.columnFilters.title") }), jsxRuntime.jsx(reactComponents.Button, { className: "p-0", onClick: () => resetHiddenColumns(), size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, defaultColumnOrder: defaultColumnOrder, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder })] })) })] }) }) }));
 };
 const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaultColumnOrder, }) => {
-    const [localColumns, setLocalColumns] = React__namespace.useState(columns);
-    React__namespace.useEffect(() => {
+    const [localColumns, setLocalColumns] = react.useState(columns);
+    react.useEffect(() => {
         setLocalColumns(columns);
     }, [columns]);
-    const onColumDrop = React__namespace.useCallback(() => {
+    const onColumDrop = react.useCallback(() => {
         const firstElement = defaultColumnOrder[0];
         const firstLocalColumnId = localColumns[0]?.id;
         const newColumnOrder = firstElement === firstLocalColumnId
@@ -349,10 +330,10 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
             : [firstElement, ...localColumns.map(column => column.id)].filter((id) => id !== undefined);
         setColumnOrder(newColumnOrder);
     }, [localColumns, setColumnOrder, defaultColumnOrder]);
-    const onCancelColumDrop = React__namespace.useCallback(() => {
+    const onCancelColumDrop = react.useCallback(() => {
         setLocalColumns(columns);
     }, [columns]);
-    const moveColumn = React__namespace.useCallback((dragIndex, hoverIndex) => {
+    const moveColumn = react.useCallback((dragIndex, hoverIndex) => {
         const dragColumn = localColumns[dragIndex];
         if (dragColumn) {
             setLocalColumns(update(localColumns, {
@@ -385,7 +366,7 @@ const ItemTypes = {
     COLUMN: "column",
 };
 const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, }) => {
-    const ref = React__namespace.useRef(null);
+    const ref = react.useRef(null);
     const [, drop] = reactDnd.useDrop({
         accept: ItemTypes.COLUMN,
         hover(item, monitor) {
@@ -493,10 +474,9 @@ const Sorting = ({ columns, }) => {
  * @param {ReactTable} props - The props for the Table component
  * @returns {JSX.Element} Table component
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Table = ({ rowHeight = 75, ...props }) => {
     //we need a reference to the scrolling element for logic down below
-    const tableContainerRef = React.useRef(null);
+    const tableContainerRef = react.useRef(null);
     const [t] = useTranslation();
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = reactTablePagination.useInfiniteScroll({
         pagination: props.pagination || reactTablePagination.noPagination,
@@ -581,7 +561,7 @@ const cvaTBody = cssClassVarianceUtilities.cvaMerge(["min-h-[40dvh]"], {
  * Creates and returns a memoized instance of a columnHelper
  */
 const useColumnHelper = () => {
-    return React.useMemo(() => {
+    return react.useMemo(() => {
         return reactTable.createColumnHelper();
     }, []);
 };
@@ -594,10 +574,10 @@ const useColumnHelper = () => {
  * @returns {TableOptionsProps<TData>} An object containing the React Table instance and associated state management functions.
  */
 const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProps }) => {
-    const updatedInitialColumnVisibility = React.useMemo(() => {
+    const updatedInitialColumnVisibility = react.useMemo(() => {
         const initialStateColumnVisibility = initialState?.columnVisibility;
         const resultFromInitialState = initialStateColumnVisibility
-            ? // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
+            ?
                 Object.fromEntries(columns
                     .map(column => {
                     if (column.id && initialStateColumnVisibility[column.id]) {
@@ -614,7 +594,7 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         });
         return resultFromInitialState;
     }, [columns, initialState?.columnVisibility]);
-    const updatedInitialColumnOrder = React.useMemo(() => {
+    const updatedInitialColumnOrder = react.useMemo(() => {
         const resultFromInitialState = initialState?.columnOrder || [];
         columns.forEach(column => {
             if (column.id && !resultFromInitialState.includes(column.id)) {
@@ -623,11 +603,11 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         });
         return resultFromInitialState;
     }, [columns, initialState?.columnOrder]);
-    const [columnVisibility, setColumnVisibility] = React.useState(reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility || {});
-    const [columnOrder, setColumnOrder] = React.useState(reactTableProps.state?.columnOrder || updatedInitialColumnOrder);
-    const [sorting, setSorting] = React.useState(reactTableProps.state?.sorting || initialState?.sorting || []);
-    const [columnSizing, setColumnSizing] = React.useState(reactTableProps.state?.columnSizing || initialState?.columnSizing || {});
-    React.useEffect(() => {
+    const [columnVisibility, setColumnVisibility] = react.useState(reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility || {});
+    const [columnOrder, setColumnOrder] = react.useState(reactTableProps.state?.columnOrder || updatedInitialColumnOrder);
+    const [sorting, setSorting] = react.useState(reactTableProps.state?.sorting || initialState?.sorting || []);
+    const [columnSizing, setColumnSizing] = react.useState(reactTableProps.state?.columnSizing || initialState?.columnSizing || {});
+    react.useEffect(() => {
         if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
             setColumnVisibility(updatedInitialColumnVisibility);
             setColumnOrder(updatedInitialColumnOrder);
@@ -635,7 +615,7 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             setColumnSizing(initialState.columnSizing || {});
         }
     }, [initialState, updatedInitialColumnOrder, updatedInitialColumnVisibility]);
-    const state = React.useMemo(() => {
+    const state = react.useMemo(() => {
         return {
             sorting,
             columnVisibility,
@@ -670,12 +650,12 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         columns,
         state,
     });
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (onTableStateChange) {
             onTableStateChange(state);
         }
     }, [onTableStateChange, state]);
-    return React.useMemo(() => {
+    return react.useMemo(() => {
         return { table };
     }, [table]);
 };
@@ -709,15 +689,15 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
  */
 const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true, }) => {
     const [t] = useTranslation();
-    const [rowSelection, setRowSelection] = React.useState({});
-    React.useEffect(() => {
+    const [rowSelection, setRowSelection] = react.useState({});
+    react.useEffect(() => {
         const initialSelection = {};
         defaultSelectedIds?.forEach(id => {
             initialSelection[id] = true;
         });
         setRowSelection(() => ({ ...initialSelection }));
     }, [defaultSelectedIds]);
-    const toggleRowSelectionState = React.useCallback((id) => {
+    const toggleRowSelectionState = react.useCallback((id) => {
         setRowSelection(prevRowSelection => {
             const newSelection = { ...prevRowSelection, [id]: !prevRowSelection[id] };
             const entries = sharedUtils.objectEntries(newSelection);
@@ -727,11 +707,11 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
             return newSelection;
         });
     }, []);
-    const selectedIds = React.useMemo(() => sharedUtils.objectEntries(rowSelection)
+    const selectedIds = react.useMemo(() => sharedUtils.objectEntries(rowSelection)
         .filter(([_, selected]) => selected)
         .map(([id]) => id), [rowSelection]);
-    const columnHelper = React.useMemo(() => reactTable.createColumnHelper(), []);
-    const selectionColumn = React.useMemo(() => columnHelper.accessor(row => row.id, {
+    const columnHelper = react.useMemo(() => reactTable.createColumnHelper(), []);
+    const selectionColumn = react.useMemo(() => columnHelper.accessor(row => row.id, {
         cell: ({ row }) => (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "ml-1 p-1", // Aligns the checkbox with the one in the header.
             checked: row.getIsSelected(),
             disabled: !row.getCanSelect(),
@@ -753,15 +733,15 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
             columnFilterLabel: t("table.selection.label"),
         },
     }), [columnHelper, data.length, t]);
-    const selectionTableState = React.useMemo(() => ({
+    const selectionTableState = react.useMemo(() => ({
         rowSelection,
     }), [rowSelection]);
-    const selectionTableProps = React.useMemo(() => ({
+    const selectionTableProps = react.useMemo(() => ({
         onRowSelectionChange: setRowSelection,
         getRowId: row => row.id,
         enableRowSelection,
     }), [enableRowSelection]);
-    return React.useMemo(() => ({
+    return react.useMemo(() => ({
         toggleRowSelectionState,
         selectionColumn,
         selectedIds,

package/index.esm.js

@@ -2,8 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
 import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, Tooltip, Popover, PopoverTrigger, PopoverContent, Text, Card, cvaInteractableItem, Spinner, EmptyState } from '@trackunit/react-components';
 import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
-import * as React from 'react';
-import { useMemo, Children, cloneElement, useEffect, useRef, useState, useCallback } from 'react';
+import { useMemo, Children, cloneElement, useEffect, useCallback, useState, useRef } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Link } from '@tanstack/react-router';
 import { Toggle, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
@@ -296,7 +295,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); //This should only run once, at page load
-    const resetHiddenColumns = React.useCallback(() => {
+    const resetHiddenColumns = useCallback(() => {
         columns.forEach(column => column.toggleVisibility(!column.columnDef.meta?.hiddenByDefault));
         setColumnOrder(defaultColumnOrder);
     }, [columns, defaultColumnOrder, setColumnOrder]);
@@ -318,11 +317,11 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
     return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsx(Text, { size: "small", subtle: true, children: t("table.columnFilters.title") }), jsx(Button, { className: "p-0", onClick: () => resetHiddenColumns(), size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, defaultColumnOrder: defaultColumnOrder, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder })] })) })] }) }) }));
 };
 const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaultColumnOrder, }) => {
-    const [localColumns, setLocalColumns] = React.useState(columns);
-    React.useEffect(() => {
+    const [localColumns, setLocalColumns] = useState(columns);
+    useEffect(() => {
         setLocalColumns(columns);
     }, [columns]);
-    const onColumDrop = React.useCallback(() => {
+    const onColumDrop = useCallback(() => {
         const firstElement = defaultColumnOrder[0];
         const firstLocalColumnId = localColumns[0]?.id;
         const newColumnOrder = firstElement === firstLocalColumnId
@@ -330,10 +329,10 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
             : [firstElement, ...localColumns.map(column => column.id)].filter((id) => id !== undefined);
         setColumnOrder(newColumnOrder);
     }, [localColumns, setColumnOrder, defaultColumnOrder]);
-    const onCancelColumDrop = React.useCallback(() => {
+    const onCancelColumDrop = useCallback(() => {
         setLocalColumns(columns);
     }, [columns]);
-    const moveColumn = React.useCallback((dragIndex, hoverIndex) => {
+    const moveColumn = useCallback((dragIndex, hoverIndex) => {
         const dragColumn = localColumns[dragIndex];
         if (dragColumn) {
             setLocalColumns(update(localColumns, {
@@ -366,7 +365,7 @@ const ItemTypes = {
     COLUMN: "column",
 };
 const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, }) => {
-    const ref = React.useRef(null);
+    const ref = useRef(null);
     const [, drop] = useDrop({
         accept: ItemTypes.COLUMN,
         hover(item, monitor) {
@@ -474,7 +473,6 @@ const Sorting = ({ columns, }) => {
  * @param {ReactTable} props - The props for the Table component
  * @returns {JSX.Element} Table component
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Table = ({ rowHeight = 75, ...props }) => {
     //we need a reference to the scrolling element for logic down below
     const tableContainerRef = useRef(null);
@@ -578,7 +576,7 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
     const updatedInitialColumnVisibility = useMemo(() => {
         const initialStateColumnVisibility = initialState?.columnVisibility;
         const resultFromInitialState = initialStateColumnVisibility
-            ? // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
+            ?
                 Object.fromEntries(columns
                     .map(column => {
                     if (column.id && initialStateColumnVisibility[column.id]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.0.22",
+  "version": "1.0.27",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,15 +15,15 @@
     "jest-fetch-mock": "^3.0.3",
     "@tanstack/react-router": "1.47.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "^1.1.2",
-    "@trackunit/shared-utils": "^1.0.3",
-    "@trackunit/css-class-variance-utilities": "^1.0.1",
-    "@trackunit/ui-icons": "^1.0.4",
-    "@trackunit/react-table-base-components": "^1.0.20",
-    "@trackunit/react-table-pagination": "^1.0.1",
-    "@trackunit/react-form-components": "^1.0.20",
-    "@trackunit/i18n-library-translation": "^1.0.8",
-    "@trackunit/react-core-contexts-api": "^1.0.5"
+    "@trackunit/react-components": "1.1.7",
+    "@trackunit/shared-utils": "1.2.1",
+    "@trackunit/css-class-variance-utilities": "1.0.4",
+    "@trackunit/ui-icons": "1.0.7",
+    "@trackunit/react-table-base-components": "1.0.25",
+    "@trackunit/react-table-pagination": "1.0.5",
+    "@trackunit/react-form-components": "1.0.25",
+    "@trackunit/i18n-library-translation": "1.0.13",
+    "@trackunit/react-core-contexts-api": "1.0.9"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",