@trackunit/react-table 2.7.75 → 2.7.76-alpha-55a192f4ee4.0

package/index.cjs.js

@@ -529,6 +529,15 @@ const validateTableState = (raw) => {
     const result = tableStateSchema.safeParse(raw);
     return result.success ? result.data : undefined;
 };
+/**
+ * Changes reported before `clientSideUserId` resolves carry no owner — the user
+ * was already editing while their id was in flight — so the identity that
+ * resolves adopts them. Once a defined identity owns the reported state it must
+ * not be adopted by a later identity, including a brief window where the
+ * current id is unset: treating that gap as unowned would copy one person's
+ * layout into the next user's scoped storage.
+ */
+const isOwnedByCurrentUser = (ownerId, clientSideUserId) => ownerId === undefined || ownerId === clientSideUserId;
 /**
  * Persists and restores table column state (order, sizing, visibility, sorting, pinning, expanded) using
  * the URL **hash fragment** and localStorage.
@@ -551,7 +560,8 @@ const validateTableState = (raw) => {
  *
  * On mount, state is loaded from the hash (or legacy search param as a
  * one-shot fallback) and merged with localStorage so fields omitted from
- * the URL, such as `expanded`, still survive reloads. Changes are
+ * the URL, such as `expanded`, still survive reloads. Hydration does not
+ * trigger this hook's persistence effect. Only user-reported changes are
  * debounced (300 ms) and synced to both the hash and localStorage.
  *
  * `onTableStateChange` takes a *partial* state and merges it into whatever
@@ -560,6 +570,12 @@ const validateTableState = (raw) => {
  * their mount-time values. A field reported empty is dropped from the stored
  * state, and once every field is empty the entry is removed altogether.
  *
+ * Reported state is scoped to the identity that reported it: when the current
+ * user changes, state reported by the previous user is discarded instead of
+ * being written to the new user's storage. Hydrating a layout shared through
+ * the URL is unaffected — it renders for anyone and only becomes the reader's
+ * persisted layout once they change the table themselves.
+ *
  * @param persistenceKey - Unique key used to store and retrieve the table state.
  *   Must be camelCase and at most 15 characters (e.g. "userTable", "assetList").
  * @returns {UseTablePersistenceResult} An object containing:
@@ -592,6 +608,8 @@ const useTablePersistence = (persistenceKey) => {
         // `?<key>=...` search param into the hash on first load.
         urlLocation: "hash",
     });
+    // Identity that reported the state currently held in `pendingState`.
+    const pendingOwnerIdRef = react.useRef(undefined);
     const [pendingState, setPendingState] = react.useState(null);
     const debouncedPending = reactComponents.useDebounce(pendingState, { delay: 300 });
     const hasReportedChange = debouncedPending !== null;
@@ -599,12 +617,12 @@ const useTablePersistence = (persistenceKey) => {
         if (!debouncedPending && !initialState) {
             return undefined;
         }
-        const columnOrder = debouncedPending?.columnOrder ?? initialState?.columnOrder;
-        const columnSizing = debouncedPending?.columnSizing ?? initialState?.columnSizing;
-        const columnVisibility = debouncedPending?.columnVisibility ?? initialState?.columnVisibility;
-        const sorting = debouncedPending?.sorting ?? initialState?.sorting;
-        const columnPinning = debouncedPending?.columnPinning ?? initialState?.columnPinning;
-        const expanded = debouncedPending?.expanded ?? initialState?.expanded;
+        const columnOrder = debouncedPending?.state.columnOrder ?? initialState?.columnOrder;
+        const columnSizing = debouncedPending?.state.columnSizing ?? initialState?.columnSizing;
+        const columnVisibility = debouncedPending?.state.columnVisibility ?? initialState?.columnVisibility;
+        const sorting = debouncedPending?.state.sorting ?? initialState?.sorting;
+        const columnPinning = debouncedPending?.state.columnPinning ?? initialState?.columnPinning;
+        const expanded = debouncedPending?.state.expanded ?? initialState?.expanded;
         const state = {};
         if (columnOrder && columnOrder.length > 0) {
             state.columnOrder = columnOrder;
@@ -630,18 +648,54 @@ const useTablePersistence = (persistenceKey) => {
         if (!newTableState) {
             return;
         }
-        setPendingState(previousState => ({ ...previousState, ...newTableState }));
-    }, []);
+        const reporterId = clientSideUserId;
+        const previousOwnerId = pendingOwnerIdRef.current;
+        if (!isOwnedByCurrentUser(previousOwnerId, reporterId)) {
+            if (reporterId === undefined) {
+                return;
+            }
+            pendingOwnerIdRef.current = reporterId;
+            // State left behind by another identity is dropped rather than merged, so
+            // this user's change builds on their own persisted state.
+            setPendingState({ ownerId: reporterId, state: { ...newTableState } });
+            return;
+        }
+        if (reporterId !== undefined) {
+            pendingOwnerIdRef.current = reporterId;
+        }
+        setPendingState(previousState => ({
+            ownerId: reporterId,
+            state: { ...previousState?.state, ...newTableState },
+        }));
+    }, [clientSideUserId]);
     react.useEffect(() => {
-        if (!currentState) {
+        // Initial URL/localStorage hydration is read-only. Do not rely on
+        // `usePersistedState` deduplicating an attempted write.
+        if (!hasReportedChange || !currentState) {
             return;
         }
+        // Writing here after the current user changed would copy the previous
+        // user's reported state into this user's scoped storage — the debounced
+        // state outlives the identity that produced it.
+        const debouncedOwnerId = debouncedPending.ownerId;
+        const pendingOwnerId = pendingOwnerIdRef.current;
+        const hasCrossUserOwner = !isOwnedByCurrentUser(debouncedOwnerId, clientSideUserId) ||
+            !isOwnedByCurrentUser(pendingOwnerId, clientSideUserId);
+        const ownerChangedDuringDebounce = pendingOwnerId !== undefined && debouncedOwnerId !== pendingOwnerId;
+        if (hasCrossUserOwner || ownerChangedDuringDebounce) {
+            return;
+        }
+        // State reported before identity resolution is adopted by the first
+        // identity that resolves. Hydration-only runs cannot reach this branch.
+        if (debouncedOwnerId === undefined && clientSideUserId !== undefined) {
+            pendingOwnerIdRef.current = clientSideUserId;
+        }
         if (sharedUtils.objectKeys(currentState).length === 0) {
             clearState();
             return;
         }
         persistState(currentState);
-    }, [clearState, currentState, persistState]);
+    }, [clearState, clientSideUserId, currentState, debouncedPending, hasReportedChange, persistState]);
     return react.useMemo(() => ({
         onTableStateChange,
         initialState,

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@
 import { Icon, MenuItem, Button, Tooltip, useOverflowItems, MoreMenu, MenuContent, Spacer, usePersistedState, useDebounce, Text, cvaInteractableItem, Popover, PopoverTrigger, IconButton, PopoverContent, cvaMenuList, cvaMenu, useBidirectionalScroll, noPagination, Card, Spinner, EmptyState } from '@trackunit/react-components';
 import { Link } from '@tanstack/react-router';
 import { objectValues, VISIBLE_ONLY_COLUMN_VISIBILITY_KEY, objectKeys, nonNullable, objectEntries } from '@trackunit/shared-utils';
-import { useMemo, Children, cloneElement, useCallback, useState, useEffect, useRef, createElement } from 'react';
+import { useMemo, Children, cloneElement, useCallback, useRef, useState, useEffect, createElement } from 'react';
 import { cva } from '@trackunit/css-class-variance-utilities';
 import { useCurrentUser } from '@trackunit/react-core-hooks';
 import { z } from 'zod';
@@ -528,6 +528,15 @@ const validateTableState = (raw) => {
     const result = tableStateSchema.safeParse(raw);
     return result.success ? result.data : undefined;
 };
+/**
+ * Changes reported before `clientSideUserId` resolves carry no owner — the user
+ * was already editing while their id was in flight — so the identity that
+ * resolves adopts them. Once a defined identity owns the reported state it must
+ * not be adopted by a later identity, including a brief window where the
+ * current id is unset: treating that gap as unowned would copy one person's
+ * layout into the next user's scoped storage.
+ */
+const isOwnedByCurrentUser = (ownerId, clientSideUserId) => ownerId === undefined || ownerId === clientSideUserId;
 /**
  * Persists and restores table column state (order, sizing, visibility, sorting, pinning, expanded) using
  * the URL **hash fragment** and localStorage.
@@ -550,7 +559,8 @@ const validateTableState = (raw) => {
  *
  * On mount, state is loaded from the hash (or legacy search param as a
  * one-shot fallback) and merged with localStorage so fields omitted from
- * the URL, such as `expanded`, still survive reloads. Changes are
+ * the URL, such as `expanded`, still survive reloads. Hydration does not
+ * trigger this hook's persistence effect. Only user-reported changes are
  * debounced (300 ms) and synced to both the hash and localStorage.
  *
  * `onTableStateChange` takes a *partial* state and merges it into whatever
@@ -559,6 +569,12 @@ const validateTableState = (raw) => {
  * their mount-time values. A field reported empty is dropped from the stored
  * state, and once every field is empty the entry is removed altogether.
  *
+ * Reported state is scoped to the identity that reported it: when the current
+ * user changes, state reported by the previous user is discarded instead of
+ * being written to the new user's storage. Hydrating a layout shared through
+ * the URL is unaffected — it renders for anyone and only becomes the reader's
+ * persisted layout once they change the table themselves.
+ *
  * @param persistenceKey - Unique key used to store and retrieve the table state.
  *   Must be camelCase and at most 15 characters (e.g. "userTable", "assetList").
  * @returns {UseTablePersistenceResult} An object containing:
@@ -591,6 +607,8 @@ const useTablePersistence = (persistenceKey) => {
         // `?<key>=...` search param into the hash on first load.
         urlLocation: "hash",
     });
+    // Identity that reported the state currently held in `pendingState`.
+    const pendingOwnerIdRef = useRef(undefined);
     const [pendingState, setPendingState] = useState(null);
     const debouncedPending = useDebounce(pendingState, { delay: 300 });
     const hasReportedChange = debouncedPending !== null;
@@ -598,12 +616,12 @@ const useTablePersistence = (persistenceKey) => {
         if (!debouncedPending && !initialState) {
             return undefined;
         }
-        const columnOrder = debouncedPending?.columnOrder ?? initialState?.columnOrder;
-        const columnSizing = debouncedPending?.columnSizing ?? initialState?.columnSizing;
-        const columnVisibility = debouncedPending?.columnVisibility ?? initialState?.columnVisibility;
-        const sorting = debouncedPending?.sorting ?? initialState?.sorting;
-        const columnPinning = debouncedPending?.columnPinning ?? initialState?.columnPinning;
-        const expanded = debouncedPending?.expanded ?? initialState?.expanded;
+        const columnOrder = debouncedPending?.state.columnOrder ?? initialState?.columnOrder;
+        const columnSizing = debouncedPending?.state.columnSizing ?? initialState?.columnSizing;
+        const columnVisibility = debouncedPending?.state.columnVisibility ?? initialState?.columnVisibility;
+        const sorting = debouncedPending?.state.sorting ?? initialState?.sorting;
+        const columnPinning = debouncedPending?.state.columnPinning ?? initialState?.columnPinning;
+        const expanded = debouncedPending?.state.expanded ?? initialState?.expanded;
         const state = {};
         if (columnOrder && columnOrder.length > 0) {
             state.columnOrder = columnOrder;
@@ -629,18 +647,54 @@ const useTablePersistence = (persistenceKey) => {
         if (!newTableState) {
             return;
         }
-        setPendingState(previousState => ({ ...previousState, ...newTableState }));
-    }, []);
+        const reporterId = clientSideUserId;
+        const previousOwnerId = pendingOwnerIdRef.current;
+        if (!isOwnedByCurrentUser(previousOwnerId, reporterId)) {
+            if (reporterId === undefined) {
+                return;
+            }
+            pendingOwnerIdRef.current = reporterId;
+            // State left behind by another identity is dropped rather than merged, so
+            // this user's change builds on their own persisted state.
+            setPendingState({ ownerId: reporterId, state: { ...newTableState } });
+            return;
+        }
+        if (reporterId !== undefined) {
+            pendingOwnerIdRef.current = reporterId;
+        }
+        setPendingState(previousState => ({
+            ownerId: reporterId,
+            state: { ...previousState?.state, ...newTableState },
+        }));
+    }, [clientSideUserId]);
     useEffect(() => {
-        if (!currentState) {
+        // Initial URL/localStorage hydration is read-only. Do not rely on
+        // `usePersistedState` deduplicating an attempted write.
+        if (!hasReportedChange || !currentState) {
             return;
         }
+        // Writing here after the current user changed would copy the previous
+        // user's reported state into this user's scoped storage — the debounced
+        // state outlives the identity that produced it.
+        const debouncedOwnerId = debouncedPending.ownerId;
+        const pendingOwnerId = pendingOwnerIdRef.current;
+        const hasCrossUserOwner = !isOwnedByCurrentUser(debouncedOwnerId, clientSideUserId) ||
+            !isOwnedByCurrentUser(pendingOwnerId, clientSideUserId);
+        const ownerChangedDuringDebounce = pendingOwnerId !== undefined && debouncedOwnerId !== pendingOwnerId;
+        if (hasCrossUserOwner || ownerChangedDuringDebounce) {
+            return;
+        }
+        // State reported before identity resolution is adopted by the first
+        // identity that resolves. Hydration-only runs cannot reach this branch.
+        if (debouncedOwnerId === undefined && clientSideUserId !== undefined) {
+            pendingOwnerIdRef.current = clientSideUserId;
+        }
         if (objectKeys(currentState).length === 0) {
             clearState();
             return;
         }
         persistState(currentState);
-    }, [clearState, currentState, persistState]);
+    }, [clearState, clientSideUserId, currentState, debouncedPending, hasReportedChange, persistState]);
     return useMemo(() => ({
         onTableStateChange,
         initialState,

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/table/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "2.7.75",
+  "version": "2.7.76-alpha-55a192f4ee4.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,15 +11,15 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "2.13.26",
-    "@trackunit/react-core-hooks": "1.21.64",
-    "@trackunit/shared-utils": "1.16.49",
-    "@trackunit/css-class-variance-utilities": "2.0.14",
-    "@trackunit/ui-icons": "1.14.43",
-    "@trackunit/react-table-base-components": "2.7.20",
-    "@trackunit/react-form-components": "2.6.74",
-    "@trackunit/i18n-library-translation": "2.4.64",
-    "@trackunit/iris-app-runtime-core-api": "1.17.61",
+    "@trackunit/react-components": "2.13.27-alpha-55a192f4ee4.0",
+    "@trackunit/react-core-hooks": "1.21.65-alpha-55a192f4ee4.0",
+    "@trackunit/shared-utils": "1.16.50-alpha-55a192f4ee4.0",
+    "@trackunit/css-class-variance-utilities": "2.0.15-alpha-55a192f4ee4.0",
+    "@trackunit/ui-icons": "1.14.44-alpha-55a192f4ee4.0",
+    "@trackunit/react-table-base-components": "2.7.21-alpha-55a192f4ee4.0",
+    "@trackunit/react-form-components": "2.6.75-alpha-55a192f4ee4.0",
+    "@trackunit/i18n-library-translation": "2.4.65-alpha-55a192f4ee4.0",
+    "@trackunit/iris-app-runtime-core-api": "1.17.62-alpha-55a192f4ee4.0",
     "zod": "^3.25.76"
   },
   "peerDependencies": {

package/src/ActionSheet/ActionButton.d.ts

@@ -27,7 +27,7 @@ export declare const ActionButton: ({ action, id, ...rest }: ActionButtonProps)
  * @param {string} [dataTestId] - Optional data test ID.
  * @returns {ReactElement} - The MenuItem component for the given action.
  */
-export declare const actionDataToMenuItem: (action: ActionModel, dataTestId?: string) => import("react").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.
@@ -36,5 +36,5 @@ export declare const actionDataToMenuItem: (action: ActionModel, dataTestId?: st
  * @param action - The action model to convert.
  * @returns {*} The ActionButton component for the given action.
  */
-export declare const actionDataToActionButton: (action: ActionModel) => import("react").JSX.Element;
+export declare const actionDataToActionButton: (action: ActionModel) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/ActionSheet/ActionSheet.d.ts

@@ -127,4 +127,4 @@ export interface ActionSheetProps extends CommonProps, Styleable {
  * @param {ActionSheetProps} props - The props for the ActionSheet component
  * @returns {ReactElement} ActionSheet component
  */
-export declare const ActionSheet: ({ actions, dropdownActions, moreActions, selections, resetSelection, className, style, "data-testid": dataTestId, }: ActionSheetProps) => import("react").JSX.Element;
+export declare const ActionSheet: ({ actions, dropdownActions, moreActions, selections, resetSelection, className, style, "data-testid": dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/TextWithTooltip.d.ts

@@ -10,4 +10,4 @@ export declare const TextWithTooltip: ({ children, tooltipLabel, weight, }: {
     children: ReactNode;
     tooltipLabel?: string;
     weight?: TextWeight;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/hooks/useTablePersistence/useTablePersistence.d.ts

@@ -81,7 +81,8 @@ type UseTablePersistenceResult = {
  *
  * On mount, state is loaded from the hash (or legacy search param as a
  * one-shot fallback) and merged with localStorage so fields omitted from
- * the URL, such as `expanded`, still survive reloads. Changes are
+ * the URL, such as `expanded`, still survive reloads. Hydration does not
+ * trigger this hook's persistence effect. Only user-reported changes are
  * debounced (300 ms) and synced to both the hash and localStorage.
  *
  * `onTableStateChange` takes a *partial* state and merges it into whatever
@@ -90,6 +91,12 @@ type UseTablePersistenceResult = {
  * their mount-time values. A field reported empty is dropped from the stored
  * state, and once every field is empty the entry is removed altogether.
  *
+ * Reported state is scoped to the identity that reported it: when the current
+ * user changes, state reported by the previous user is discarded instead of
+ * being written to the new user's storage. Hydrating a layout shared through
+ * the URL is unaffected — it renders for anyone and only becomes the reader's
+ * persisted layout once they change the table themselves.
+ *
  * @param persistenceKey - Unique key used to store and retrieve the table state.
  *   Must be camelCase and at most 15 characters (e.g. "userTable", "assetList").
  * @returns {UseTablePersistenceResult} An object containing:

package/src/menus/ColumnActions.d.ts

@@ -13,5 +13,5 @@ interface ColumnActionsProps<TData> {
  * @param {Header<TData, unknown>} props.header The header of the current column provided by React Table.
  * @param {number} props.visibleColumnsCount The number of visible columns in the table.
  */
-declare const ColumnActions: <TData>({ header, visibleColumnsCount, setSorting, getColumn }: ColumnActionsProps<TData>) => import("react").JSX.Element | null;
+declare const ColumnActions: <TData>({ header, visibleColumnsCount, setSorting, getColumn }: ColumnActionsProps<TData>) => import("react/jsx-runtime").JSX.Element | null;
 export default ColumnActions;

package/src/menus/ColumnFilter.d.ts

@@ -15,7 +15,7 @@ export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterVa
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
  * @returns {ReactElement | 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, setColumnSize, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => import("react").JSX.Element;
+export declare const ColumnFilter: <TColumnFilter extends object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, setColumnSize, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => import("react/jsx-runtime").JSX.Element;
 export interface ColumnFiltersDragAndDropProps<TColumnFiltersDragAndDrop extends object, TColumnFiltersDragAndDropValue> {
     columns: Array<Column<TColumnFiltersDragAndDrop, TColumnFiltersDragAndDropValue>>;
     setColumnOrder: (updater: Updater<ColumnOrderState>) => void;

package/src/menus/ColumnFilterItem.d.ts

@@ -28,5 +28,5 @@ interface ColumnFilterItemProps {
  * @param {boolean} [props.isSortDisabled] - Optional flag to disable sorting.
  * @returns {Element} A React component rendering the column filter item.
  */
-export declare const ColumnFilterItem: ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, isSortDisabled, }: ColumnFilterItemProps) => import("react").JSX.Element;
+export declare const ColumnFilterItem: ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, isSortDisabled, }: ColumnFilterItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/translation.d.ts

@@ -26,7 +26,7 @@ export type TranslationFunction = TransForLibs<TranslationKeys>;
 /**
  * Trans for this specific library.
  */
-export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => import("react").JSX.Element;
+export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => import("react/jsx-runtime").JSX.Element;
 /**
  * Registers the translations for this library
  */