@trackunit/react-table 0.0.456 → 0.0.459

package/index.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-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');
@@ -19,10 +17,7 @@ var reactDnd = require('react-dnd');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -35,12 +30,11 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var update__default = /*#__PURE__*/_interopDefaultLegacy(update);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 var defaultTranslations = {
 	"layout.actions.reset": "Reset",
@@ -149,38 +143,6 @@ const cvaActionContainerAndOverflow = cssClassVarianceUtilities.cvaMerge([
     "sm:flex-row",
 ]);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 /**
  * The button to show in the ActionSheet.
  * Should not be used outside the ActionSheet component.
@@ -192,12 +154,11 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * @param {...any} [props.rest] - Any additional button properties.
  * @returns {JSX.Element} - The action button component.
  */
-const ActionButton = (_a) => {
-    var { action, children, id } = _a, rest = __rest(_a, ["action", "children", "id"]);
+const ActionButton = ({ action, children, id, ...rest }) => {
     if (action.type === "route") {
-        return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ asChild: true, id: id, variant: "ghost-neutral" }, rest, { children: jsxRuntime.jsx(reactRouter.Link, { to: action.url, children: children }) })));
+        return (jsxRuntime.jsx(reactComponents.Button, { asChild: true, id: id, variant: "ghost-neutral", ...rest, children: jsxRuntime.jsx(reactRouter.Link, { to: action.url, children: children }) }));
     }
-    return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ id: id, onClick: action.method, variant: "ghost-neutral" }, rest, { children: children })));
+    return (jsxRuntime.jsx(reactComponents.Button, { id: id, onClick: action.method, variant: "ghost-neutral", ...rest, children: children }));
 };
 /**
  * Converts an action model to a MenuItem component.
@@ -290,9 +251,8 @@ const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, cl
  * @returns {JSX.Element} Table component
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Table = (_a) => {
-    var _b, _c, _d;
-    var { rowHeight = 75 } = _a, props = __rest(_a, ["rowHeight"]);
+const Table = ({ rowHeight = 75, ...props }) => {
+    var _a, _b, _c;
     //we need a reference to the scrolling element for logic down below
     const tableContainerRef = React.useRef(null);
     const [t] = useTranslation();
@@ -341,20 +301,19 @@ const Table = (_a) => {
                                             transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
                                         }, children: row.getVisibleCells().map(cell => {
                                             var _a, _b;
-                                            return (jsxRuntime.jsx(reactTableBaseComponents.Td, { key: cell.id,
-                                                style: {
+                                            return (jsxRuntime.jsx(reactTableBaseComponents.Td, { style: {
                                                     width: cell.column.getSize(),
                                                     minWidth: cell.column.columnDef.minSize,
                                                     maxWidth: cell.column.columnDef.maxSize,
                                                     textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
                                                     flexGrow: ((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.shouldGrow) ? 1 : 0,
-                                                }, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
+                                                }, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
                                         }) }, row.id));
                                 }
                             }) })) : (jsxRuntime.jsx("tbody", { className: "min-h-[400px]", children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: props.loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : props.noDataMessage ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT" })) }) }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
                             count: props.getRowModel().rows.length,
-                            total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
-                        }) }), ((_d = props.pagination) === null || _d === void 0 ? void 0 : _d.isLoading) ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));
+                            total: ((_b = (_a = props.pagination) === null || _a === void 0 ? void 0 : _a.pageInfo) === null || _b === void 0 ? void 0 : _b.count) || 0,
+                        }) }), ((_c = props.pagination) === null || _c === void 0 ? void 0 : _c.isLoading) ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));
 };
 const cvaTableRow = cssClassVarianceUtilities.cvaMerge(["hover:bg-neutral-100"], {
     variants: {
@@ -423,7 +382,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
         var _a;
         const dragColumn = localColumns[dragIndex];
         if (dragColumn) {
-            setLocalColumns(update__default["default"](localColumns, {
+            setLocalColumns(update(localColumns, {
                 $splice: [
                     [dragIndex, 1],
                     [hoverIndex, 0, dragColumn],
@@ -566,9 +525,8 @@ const Sorting = ({ columns, }) => {
  * @param {TableOptionsProps<TData>} props - The props object containing configuration options.
  * @returns {TableOptionsProps<TData>} An object containing the React Table instance and associated state management functions.
  */
-const useTable = (_a) => {
-    var _b, _c, _d, _e;
-    var { onTableStateChange, initialState, columns } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState", "columns"]);
+const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProps }) => {
+    var _a, _b, _c, _d;
     const updatedInitialColumnVisibility = React.useMemo(() => {
         const initialStateColumnVisibility = initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility;
         const resultFromInitialState = initialStateColumnVisibility
@@ -599,10 +557,10 @@ const useTable = (_a) => {
         });
         return resultFromInitialState;
     }, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder]);
-    const [columnVisibility, setColumnVisibility] = React.useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || updatedInitialColumnVisibility || {});
-    const [columnOrder, setColumnOrder] = React.useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || updatedInitialColumnOrder);
-    const [sorting, setSorting] = React.useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
-    const [columnSizing, setColumnSizing] = React.useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
+    const [columnVisibility, setColumnVisibility] = React.useState(((_a = reactTableProps.state) === null || _a === void 0 ? void 0 : _a.columnVisibility) || updatedInitialColumnVisibility || {});
+    const [columnOrder, setColumnOrder] = React.useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnOrder) || updatedInitialColumnOrder);
+    const [sorting, setSorting] = React.useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
+    const [columnSizing, setColumnSizing] = React.useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
     React.useEffect(() => {
         if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
             setColumnVisibility(initialState.columnVisibility || updatedInitialColumnVisibility || {});
@@ -619,29 +577,43 @@ const useTable = (_a) => {
         initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing,
     ]);
     const state = React.useMemo(() => {
-        return Object.assign({ sorting,
+        return {
+            sorting,
             columnVisibility,
             columnOrder,
-            columnSizing }, reactTableProps.state);
+            columnSizing,
+            ...reactTableProps.state,
+        };
     }, [sorting, columnVisibility, columnOrder, columnSizing, reactTableProps.state]);
-    const table = reactTable.useReactTable(Object.assign(Object.assign({ manualSorting: true, columnResizeMode: "onChange", getSortedRowModel: reactTable.getSortedRowModel(), getCoreRowModel: reactTable.getCoreRowModel() }, reactTableProps), { onColumnVisibilityChange: value => {
+    const table = reactTable.useReactTable({
+        manualSorting: true,
+        columnResizeMode: "onChange",
+        getSortedRowModel: reactTable.getSortedRowModel(),
+        getCoreRowModel: reactTable.getCoreRowModel(),
+        ...reactTableProps,
+        onColumnVisibilityChange: value => {
             var _a;
             setColumnVisibility(value);
             (_a = reactTableProps.onColumnVisibilityChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
-        }, onColumnSizingChange: value => {
+        },
+        onColumnSizingChange: value => {
             var _a;
             setColumnSizing(value);
             (_a = reactTableProps.onColumnSizingChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
-        }, onColumnOrderChange: value => {
+        },
+        onColumnOrderChange: value => {
             var _a;
             setColumnOrder(value);
             (_a = reactTableProps.onColumnOrderChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
-        }, onSortingChange: value => {
+        },
+        onSortingChange: value => {
             var _a;
             setSorting(value);
             (_a = reactTableProps.onSortingChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
-        }, columns,
-        state }));
+        },
+        columns,
+        state,
+    });
     React.useEffect(() => {
         if (onTableStateChange) {
             onTableStateChange(state);
@@ -687,10 +659,13 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
         defaultSelectedIds === null || defaultSelectedIds === void 0 ? void 0 : defaultSelectedIds.forEach(id => {
             initialSelection[id] = true;
         });
-        setRowSelection(() => (Object.assign({}, initialSelection)));
+        setRowSelection(() => ({ ...initialSelection }));
     }, [defaultSelectedIds]);
     const toggleRowSelectionState = React.useCallback((id) => {
-        setRowSelection(prevRowSelection => (Object.assign(Object.assign({}, prevRowSelection), { [id]: !prevRowSelection[id] })));
+        setRowSelection(prevRowSelection => ({
+            ...prevRowSelection,
+            [id]: !prevRowSelection[id],
+        }));
     }, []);
     const selectedIds = React.useMemo(() => sharedUtils.objectEntries(rowSelection)
         .filter(([_, selected]) => selected)
@@ -754,7 +729,10 @@ const fromTUSortToTanStack = (input) => {
  */
 const fromTanStackToTUSort = (input) => {
     var _a, _b;
-    return Object.assign(Object.assign({}, reactCoreContextsApi.validateStringAsAssetSortByProperty((_a = input[0]) === null || _a === void 0 ? void 0 : _a.id)), { order: ((_b = input[0]) === null || _b === void 0 ? void 0 : _b.desc) ? reactCoreContextsApi.SortOrder.Desc : reactCoreContextsApi.SortOrder.Asc });
+    return {
+        ...reactCoreContextsApi.validateStringAsAssetSortByProperty((_a = input[0]) === null || _a === void 0 ? void 0 : _a.id),
+        order: ((_b = input[0]) === null || _b === void 0 ? void 0 : _b.desc) ? reactCoreContextsApi.SortOrder.Desc : reactCoreContextsApi.SortOrder.Asc,
+    };
 };
 
 /*
@@ -766,7 +744,7 @@ const fromTanStackToTUSort = (input) => {
  */
 setupLibraryTranslations();
 
-Object.defineProperty(exports, 'createColumnHelper', {
+Object.defineProperty(exports, "createColumnHelper", {
   enumerable: true,
   get: function () { return reactTable.createColumnHelper; }
 });

package/index.esm.js

@@ -124,38 +124,6 @@ const cvaActionContainerAndOverflow = cvaMerge([
     "sm:flex-row",
 ]);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 /**
  * The button to show in the ActionSheet.
  * Should not be used outside the ActionSheet component.
@@ -167,12 +135,11 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * @param {...any} [props.rest] - Any additional button properties.
  * @returns {JSX.Element} - The action button component.
  */
-const ActionButton = (_a) => {
-    var { action, children, id } = _a, rest = __rest(_a, ["action", "children", "id"]);
+const ActionButton = ({ action, children, id, ...rest }) => {
     if (action.type === "route") {
-        return (jsx(Button, Object.assign({ asChild: true, id: id, variant: "ghost-neutral" }, rest, { children: jsx(Link, { to: action.url, children: children }) })));
+        return (jsx(Button, { asChild: true, id: id, variant: "ghost-neutral", ...rest, children: jsx(Link, { to: action.url, children: children }) }));
     }
-    return (jsx(Button, Object.assign({ id: id, onClick: action.method, variant: "ghost-neutral" }, rest, { children: children })));
+    return (jsx(Button, { id: id, onClick: action.method, variant: "ghost-neutral", ...rest, children: children }));
 };
 /**
  * Converts an action model to a MenuItem component.
@@ -265,9 +232,8 @@ const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, cl
  * @returns {JSX.Element} Table component
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Table = (_a) => {
-    var _b, _c, _d;
-    var { rowHeight = 75 } = _a, props = __rest(_a, ["rowHeight"]);
+const Table = ({ rowHeight = 75, ...props }) => {
+    var _a, _b, _c;
     //we need a reference to the scrolling element for logic down below
     const tableContainerRef = useRef(null);
     const [t] = useTranslation();
@@ -316,20 +282,19 @@ const Table = (_a) => {
                                             transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
                                         }, children: row.getVisibleCells().map(cell => {
                                             var _a, _b;
-                                            return (jsx(Td, { key: cell.id,
-                                                style: {
+                                            return (jsx(Td, { style: {
                                                     width: cell.column.getSize(),
                                                     minWidth: cell.column.columnDef.minSize,
                                                     maxWidth: cell.column.columnDef.maxSize,
                                                     textAlign: ((_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
                                                     flexGrow: ((_b = cell.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.shouldGrow) ? 1 : 0,
-                                                }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
+                                                }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
                                         }) }, row.id));
                                 }
                             }) })) : (jsx("tbody", { className: "min-h-[400px]", children: jsx("tr", { children: jsx("td", { className: "b-0", children: props.loading ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : props.noDataMessage ? (props.noDataMessage) : (jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT" })) }) }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
                             count: props.getRowModel().rows.length,
-                            total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
-                        }) }), ((_d = props.pagination) === null || _d === void 0 ? void 0 : _d.isLoading) ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));
+                            total: ((_b = (_a = props.pagination) === null || _a === void 0 ? void 0 : _a.pageInfo) === null || _b === void 0 ? void 0 : _b.count) || 0,
+                        }) }), ((_c = props.pagination) === null || _c === void 0 ? void 0 : _c.isLoading) ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));
 };
 const cvaTableRow = cvaMerge(["hover:bg-neutral-100"], {
     variants: {
@@ -541,9 +506,8 @@ const Sorting = ({ columns, }) => {
  * @param {TableOptionsProps<TData>} props - The props object containing configuration options.
  * @returns {TableOptionsProps<TData>} An object containing the React Table instance and associated state management functions.
  */
-const useTable = (_a) => {
-    var _b, _c, _d, _e;
-    var { onTableStateChange, initialState, columns } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState", "columns"]);
+const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProps }) => {
+    var _a, _b, _c, _d;
     const updatedInitialColumnVisibility = useMemo(() => {
         const initialStateColumnVisibility = initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility;
         const resultFromInitialState = initialStateColumnVisibility
@@ -574,10 +538,10 @@ const useTable = (_a) => {
         });
         return resultFromInitialState;
     }, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder]);
-    const [columnVisibility, setColumnVisibility] = useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || updatedInitialColumnVisibility || {});
-    const [columnOrder, setColumnOrder] = useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || updatedInitialColumnOrder);
-    const [sorting, setSorting] = useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
-    const [columnSizing, setColumnSizing] = useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
+    const [columnVisibility, setColumnVisibility] = useState(((_a = reactTableProps.state) === null || _a === void 0 ? void 0 : _a.columnVisibility) || updatedInitialColumnVisibility || {});
+    const [columnOrder, setColumnOrder] = useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnOrder) || updatedInitialColumnOrder);
+    const [sorting, setSorting] = useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
+    const [columnSizing, setColumnSizing] = useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
     useEffect(() => {
         if (initialState && objectKeys(initialState).length > 0) {
             setColumnVisibility(initialState.columnVisibility || updatedInitialColumnVisibility || {});
@@ -594,29 +558,43 @@ const useTable = (_a) => {
         initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing,
     ]);
     const state = useMemo(() => {
-        return Object.assign({ sorting,
+        return {
+            sorting,
             columnVisibility,
             columnOrder,
-            columnSizing }, reactTableProps.state);
+            columnSizing,
+            ...reactTableProps.state,
+        };
     }, [sorting, columnVisibility, columnOrder, columnSizing, reactTableProps.state]);
-    const table = useReactTable(Object.assign(Object.assign({ manualSorting: true, columnResizeMode: "onChange", getSortedRowModel: getSortedRowModel(), getCoreRowModel: getCoreRowModel() }, reactTableProps), { onColumnVisibilityChange: value => {
+    const table = useReactTable({
+        manualSorting: true,
+        columnResizeMode: "onChange",
+        getSortedRowModel: getSortedRowModel(),
+        getCoreRowModel: getCoreRowModel(),
+        ...reactTableProps,
+        onColumnVisibilityChange: value => {
             var _a;
             setColumnVisibility(value);
             (_a = reactTableProps.onColumnVisibilityChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
-        }, onColumnSizingChange: value => {
+        },
+        onColumnSizingChange: value => {
             var _a;
             setColumnSizing(value);
             (_a = reactTableProps.onColumnSizingChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
-        }, onColumnOrderChange: value => {
+        },
+        onColumnOrderChange: value => {
             var _a;
             setColumnOrder(value);
             (_a = reactTableProps.onColumnOrderChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
-        }, onSortingChange: value => {
+        },
+        onSortingChange: value => {
             var _a;
             setSorting(value);
             (_a = reactTableProps.onSortingChange) === null || _a === void 0 ? void 0 : _a.call(reactTableProps, value);
-        }, columns,
-        state }));
+        },
+        columns,
+        state,
+    });
     useEffect(() => {
         if (onTableStateChange) {
             onTableStateChange(state);
@@ -662,10 +640,13 @@ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true
         defaultSelectedIds === null || defaultSelectedIds === void 0 ? void 0 : defaultSelectedIds.forEach(id => {
             initialSelection[id] = true;
         });
-        setRowSelection(() => (Object.assign({}, initialSelection)));
+        setRowSelection(() => ({ ...initialSelection }));
     }, [defaultSelectedIds]);
     const toggleRowSelectionState = useCallback((id) => {
-        setRowSelection(prevRowSelection => (Object.assign(Object.assign({}, prevRowSelection), { [id]: !prevRowSelection[id] })));
+        setRowSelection(prevRowSelection => ({
+            ...prevRowSelection,
+            [id]: !prevRowSelection[id],
+        }));
     }, []);
     const selectedIds = useMemo(() => objectEntries(rowSelection)
         .filter(([_, selected]) => selected)
@@ -729,7 +710,10 @@ const fromTUSortToTanStack = (input) => {
  */
 const fromTanStackToTUSort = (input) => {
     var _a, _b;
-    return Object.assign(Object.assign({}, validateStringAsAssetSortByProperty((_a = input[0]) === null || _a === void 0 ? void 0 : _a.id)), { order: ((_b = input[0]) === null || _b === void 0 ? void 0 : _b.desc) ? SortOrder.Desc : SortOrder.Asc });
+    return {
+        ...validateStringAsAssetSortByProperty((_a = input[0]) === null || _a === void 0 ? void 0 : _a.id),
+        order: ((_b = input[0]) === null || _b === void 0 ? void 0 : _b.desc) ? SortOrder.Desc : SortOrder.Asc,
+    };
 };
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.456",
+  "version": "0.0.459",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@trackunit/react-components": "*",
-    "react": "^18.2.0",
+    "react": "18.3.1",
     "@tanstack/react-table": "^8.10.7",
     "@trackunit/react-table-base-components": "*",
     "@trackunit/react-table-pagination": "*",
@@ -26,5 +26,6 @@
     "tailwind-merge": "^2.0.0"
   },
   "module": "./index.esm.js",
-  "main": "./index.cjs.js"
-}
+  "main": "./index.cjs.js",
+  "types": "./index.esm.d.ts"
+}

package/src/ActionSheet/ActionContainerAndOverflow.d.ts

@@ -15,5 +15,5 @@ interface ActionContainerAndOverflowProps extends CommonProps {
  * @param {string} [props.dataTestId] - Data test id for the component, useful in testing.
  * @returns {ReactElement} The rendered component.
  */
-export declare const ActionContainerAndOverflow: ({ actions, moreActions, dataTestId }: ActionContainerAndOverflowProps) => JSX.Element;
+export declare const ActionContainerAndOverflow: ({ actions, moreActions, dataTestId }: ActionContainerAndOverflowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/ActionSheet/ActionSheet.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CommonProps } from "@trackunit/react-components";
 import { ActionModel } from "./Actions";
 export interface ActionSheetProps extends CommonProps {
@@ -27,4 +26,4 @@ export interface ActionSheetProps extends CommonProps {
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {JSX.Element} ActionSheet component
  */
-export declare const ActionSheet: ({ actions, moreActions, selections, resetSelection, className, dataTestId, }: ActionSheetProps) => JSX.Element;
+export declare const ActionSheet: ({ actions, moreActions, selections, resetSelection, className, dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;

package/src/ActionSheet/ActionSheetElementUtils.d.ts

@@ -22,7 +22,7 @@ interface ActionButtonProps extends ButtonCommonProps {
  * @param {...any} [props.rest] - Any additional button properties.
  * @returns {JSX.Element} - The action button component.
  */
-export declare const ActionButton: ({ action, children, id, ...rest }: ActionButtonProps) => JSX.Element;
+export declare const ActionButton: ({ action, children, id, ...rest }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Converts an action model to a MenuItem component.
  * These should be shown in the more menu.
@@ -32,7 +32,7 @@ export declare const ActionButton: ({ action, children, id, ...rest }: ActionBut
  * @param {string} [dataTestId] - Optional data test ID.
  * @returns {JSX.Element} - The MenuItem component for the given action.
  */
-export declare const actionDataToMenuItem: (action: ActionModel, dataTestId?: string) => JSX.Element;
+export declare const actionDataToMenuItem: (action: ActionModel, dataTestId?: string) => import("react/jsx-runtime").JSX.Element;
 /**
  * Converts an action model to an ActionButton component.
  * These should be shown in the ActionSheet.
@@ -42,5 +42,5 @@ export declare const actionDataToMenuItem: (action: ActionModel, dataTestId?: st
  * @param {string} [dataTestId] - Optional data test ID.
  * @returns {JSX.Element} - The ActionButton component for the given action.
  */
-export declare const actionDataToActionButton: (action: ActionModel, dataTestId?: string) => JSX.Element;
+export declare const actionDataToActionButton: (action: ActionModel, dataTestId?: string) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/ActionSheet/Actions.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconProps, Size } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
 type IconExposedProp = Omit<IconProps, "color" | "onclick" | "type" | "name">;

package/src/Table.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Table as ReactTable, Row } from "@tanstack/react-table";
 import { CommonProps } from "@trackunit/react-components";
 import { RelayPagination } from "@trackunit/react-table-pagination";
@@ -19,4 +18,4 @@ export interface TableProps<TData extends object> extends ReactTable<TData>, Com
  * @param {ReactTable} props - The props for the Table component
  * @returns {JSX.Element} Table component
  */
-export declare const Table: <TData extends object>({ rowHeight, ...props }: TableProps<TData>) => JSX.Element;
+export declare const Table: <TData extends object>({ rowHeight, ...props }: TableProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/src/menus/ColumnFilter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Column, ColumnOrderState, Updater } from "@tanstack/react-table";
 export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterValue> {
     columns: Column<TColumnFilter, TColumnFilterValue>[];
@@ -15,7 +14,7 @@ export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterVa
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
-export declare const ColumnFilter: <TColumnFilter extends object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => JSX.Element;
+export declare const ColumnFilter: <TColumnFilter extends object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => import("react/jsx-runtime").JSX.Element;
 export interface ColumnFiltersDragAndDropProps<TColumnFiltersDragAndDrop extends object, TColumnFiltersDragAndDropValue> {
     columns: Column<TColumnFiltersDragAndDrop, TColumnFiltersDragAndDropValue>[];
     setColumnOrder: (updater: Updater<ColumnOrderState>) => void;

package/src/menus/RowSpacing.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Density = "spacious" | "compact";
 interface RowDensityProps {
     density: Density;
@@ -11,5 +10,5 @@ interface RowDensityProps {
  * @param {RowDensityProps} props - The props object containing row density properties.
  * @returns {JSX.Element} A React JSX element representing the RowSpacing component.
  */
-export declare const RowSpacing: ({ density, setRowDensity, onUserEvent }: RowDensityProps) => JSX.Element;
+export declare const RowSpacing: ({ density, setRowDensity, onUserEvent }: RowDensityProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/menus/Sorting.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Column } from "@tanstack/react-table";
 interface SortingProps<TSorting extends object, TSortingValue> {
     columns: Column<TSorting, TSortingValue>[];

package/src/translation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NamespaceTransProps, TransForLibs, TranslationResource } from "@trackunit/i18n-library-translation";
 import defaultTranslations from "./locales/en/translation.json";
 /** A type for all available translation keys in this library */
@@ -27,7 +26,7 @@ export type TranslationFunction = TransForLibs<TranslationKeys>;
 /**
  * Trans for this specific library.
  */
-export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => JSX.Element;
+export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => import("react/jsx-runtime").JSX.Element;
 /**
  * Registers the translations for this library
  */

package/src/useTableSelection.demo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TableSelectionProps, selectableTableData } from "./useTableSelection";
 export interface UseTableSelectionDemoComponentProps<TData extends selectableTableData> extends TableSelectionProps<TData> {
 }
@@ -9,4 +8,4 @@ export interface UseTableSelectionDemoComponentProps<TData extends selectableTab
  *
  * It Also returns a `selectionColumn` object that can be used as a column definition in a table.
  */
-export declare const UseTableSelectionDemoComponent: <TData extends selectableTableData>(props: UseTableSelectionDemoComponentProps<TData>) => JSX.Element;
+export declare const UseTableSelectionDemoComponent: <TData extends selectableTableData>(props: UseTableSelectionDemoComponentProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/translation.cjs.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Zeilendichte"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs10.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Dostosuj zagęszczenie wierszy"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs11.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Ajustar densidade da linha"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs12.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Настроить плотность столбцов"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs13.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Reglați densitatea rândului"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs14.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Ajustar densidad de filas"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs15.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Justera radtäthet"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs16.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "行間の調整"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs17.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "ปรับความหนาแน่นของแถว"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs2.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Justér rækketæthed"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs3.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Upravit hustotu řádků"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs4.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Rijdichtheid aanpassen"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs5.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Régler la densité des lignes"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs6.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Säädä rivin tiheyttä"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs7.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Sorsűrűség beállítása"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs8.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Regola densità riga"
 };
 
-exports["default"] = translation;
+exports.default = translation;

package/translation.cjs9.js

@@ -32,4 +32,4 @@ var translation = {
 	"table.spacing.toolip": "Juster rekketetthet"
 };
 
-exports["default"] = translation;
+exports.default = translation;