@trackunit/react-table 0.0.158 → 0.0.160

package/index.cjs.js

@@ -643,6 +643,13 @@ const useTable = (_a) => {
     const [columnOrder, setColumnOrder] = React.useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || []);
     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 isFirstRender = reactComponents.useIsFirstRender();
+    const tableColumnRef = React.useRef(columns);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV !== "production") {
+            if (!isFirstRender && tableColumnRef.current !== columns) ;
+        }
+    }, [isFirstRender, columns]);
     React.useEffect(() => {
         if (initialState && Object.keys(initialState || {}).length > 0) {
             setColumnVisibility(Object.keys(initialState.columnVisibility || {}).length > 0
@@ -673,9 +680,10 @@ const useTable = (_a) => {
             onTableStateChange(state);
         }
     }, [onTableStateChange, state]);
-    return {
-        table,
-    };
+    const memoizedTable = React.useMemo(() => {
+        return { table };
+    }, [table]);
+    return memoizedTable;
 };
 
 //TODO: find a more appropriate place for this file
@@ -698,6 +706,27 @@ const fromTUSortToTanStack = (input) => {
 const fromTanStackToTUSort = (input) => {
     return Object.assign(Object.assign({}, reactCoreContextsApi.validateStringAsAssetSortByProperty(input[0].id)), { order: input[0].desc ? reactCoreContextsApi.SortOrder.Desc : reactCoreContextsApi.SortOrder.Asc });
 };
+/**
+ * Convert a sorting state from the TUSort format to the TanStack format for sites.
+ *
+ * @param {SortingState} input - The input sorting state in TUSort format.
+ * @returns {TanStackSortingState} The sorting state in TanStack format.
+ */
+const fromTUSortToTanStackSite = (input) => {
+    return [{ id: input.sortBy, desc: input.order === reactCoreContextsApi.SortOrder.Desc }];
+};
+/**
+ * Convert a sorting state from the TanStack format to the TUSort format for sites.
+ *
+ * @param {TanStackSortingState} input - The input sorting state in TanStack format.
+ * @returns {SortingState} The sorting state in TUSort format.
+ */
+const fromTanStackToTUSortSite = (input) => {
+    return {
+        sortBy: reactCoreContextsApi.validateStringAsSiteSortByProperty(input[0].id),
+        order: input[0].desc ? reactCoreContextsApi.SortOrder.Desc : reactCoreContextsApi.SortOrder.Asc,
+    };
+};
 
 /*
  * ----------------------------
@@ -718,6 +747,8 @@ exports.RowSpacing = RowSpacing;
 exports.Sorting = Sorting;
 exports.Table = Table;
 exports.fromTUSortToTanStack = fromTUSortToTanStack;
+exports.fromTUSortToTanStackSite = fromTUSortToTanStackSite;
 exports.fromTanStackToTUSort = fromTanStackToTUSort;
+exports.fromTanStackToTUSortSite = fromTanStackToTUSortSite;
 exports.useRelayPagination = useRelayPagination;
 exports.useTable = useTable;

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, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, EmptyState, Spinner, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
+import { MenuItem, Icon, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, EmptyState, Spinner, Tooltip, Popover, PopoverTrigger, PopoverContent, useIsFirstRender } from '@trackunit/react-components';
 import * as React from 'react';
 import { useMemo, Children, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -13,7 +13,7 @@ import { Toggle, RadioGroup, RadioItem } from '@trackunit/react-form-components'
 import update from 'immutability-helper';
 import { DndProvider, useDrop, useDrag } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { SortOrder, validateStringAsAssetSortByProperty } from '@trackunit/react-core-contexts-api';
+import { SortOrder, validateStringAsAssetSortByProperty, validateStringAsSiteSortByProperty } from '@trackunit/react-core-contexts-api';
 
 var defaultTranslations = {
 	"table.actionsheet.selected": "{{count}} selected",
@@ -618,6 +618,13 @@ const useTable = (_a) => {
     const [columnOrder, setColumnOrder] = useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || []);
     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 isFirstRender = useIsFirstRender();
+    const tableColumnRef = useRef(columns);
+    useEffect(() => {
+        if (process.env.NODE_ENV !== "production") {
+            if (!isFirstRender && tableColumnRef.current !== columns) ;
+        }
+    }, [isFirstRender, columns]);
     useEffect(() => {
         if (initialState && Object.keys(initialState || {}).length > 0) {
             setColumnVisibility(Object.keys(initialState.columnVisibility || {}).length > 0
@@ -648,9 +655,10 @@ const useTable = (_a) => {
             onTableStateChange(state);
         }
     }, [onTableStateChange, state]);
-    return {
-        table,
-    };
+    const memoizedTable = useMemo(() => {
+        return { table };
+    }, [table]);
+    return memoizedTable;
 };
 
 //TODO: find a more appropriate place for this file
@@ -673,6 +681,27 @@ const fromTUSortToTanStack = (input) => {
 const fromTanStackToTUSort = (input) => {
     return Object.assign(Object.assign({}, validateStringAsAssetSortByProperty(input[0].id)), { order: input[0].desc ? SortOrder.Desc : SortOrder.Asc });
 };
+/**
+ * Convert a sorting state from the TUSort format to the TanStack format for sites.
+ *
+ * @param {SortingState} input - The input sorting state in TUSort format.
+ * @returns {TanStackSortingState} The sorting state in TanStack format.
+ */
+const fromTUSortToTanStackSite = (input) => {
+    return [{ id: input.sortBy, desc: input.order === SortOrder.Desc }];
+};
+/**
+ * Convert a sorting state from the TanStack format to the TUSort format for sites.
+ *
+ * @param {TanStackSortingState} input - The input sorting state in TanStack format.
+ * @returns {SortingState} The sorting state in TUSort format.
+ */
+const fromTanStackToTUSortSite = (input) => {
+    return {
+        sortBy: validateStringAsSiteSortByProperty(input[0].id),
+        order: input[0].desc ? SortOrder.Desc : SortOrder.Asc,
+    };
+};
 
 /*
  * ----------------------------
@@ -683,4 +712,4 @@ const fromTanStackToTUSort = (input) => {
  */
 setupLibraryTranslations();
 
-export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTanStackToTUSort, useRelayPagination, useTable };
+export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useRelayPagination, useTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.158",
+  "version": "0.0.160",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,7 +17,7 @@
     "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.66",
+    "@tanstack/react-virtual": "3.0.0-beta.68",
     "@trackunit/react-core-contexts-api": "*",
     "@trackunit/css-class-variance-utilities": "*",
     "@trackunit/ui-icons": "*",

package/src/utils.d.ts

@@ -1,5 +1,5 @@
 import { SortingState as TanStackSortingState } from "@tanstack/react-table";
-import { SortingState } from "@trackunit/react-core-contexts-api";
+import { SiteSortByProperty, SortOrder, SortingState } from "@trackunit/react-core-contexts-api";
 /**
  * Convert a sorting state from the TUSort format to the TanStack format.
  *
@@ -14,3 +14,24 @@ export declare const fromTUSortToTanStack: (input: SortingState) => TanStackSort
  * @returns {SortingState} The sorting state in TUSort format.
  */
 export declare const fromTanStackToTUSort: (input: TanStackSortingState) => SortingState;
+interface SiteSortingState {
+    /** The property to sort by. */
+    sortBy: SiteSortByProperty;
+    /** The property to sort by. */
+    order: SortOrder;
+}
+/**
+ * Convert a sorting state from the TUSort format to the TanStack format for sites.
+ *
+ * @param {SortingState} input - The input sorting state in TUSort format.
+ * @returns {TanStackSortingState} The sorting state in TanStack format.
+ */
+export declare const fromTUSortToTanStackSite: (input: SiteSortingState) => TanStackSortingState;
+/**
+ * Convert a sorting state from the TanStack format to the TUSort format for sites.
+ *
+ * @param {TanStackSortingState} input - The input sorting state in TanStack format.
+ * @returns {SortingState} The sorting state in TUSort format.
+ */
+export declare const fromTanStackToTUSortSite: (input: TanStackSortingState) => SiteSortingState;
+export {};