@trackunit/react-components 2.2.26-alpha-288640a1f26.0 → 2.2.27-alpha-485e203e548.0

package/index.cjs.js

@@ -45,22 +45,22 @@ const translations = {
     default: defaultTranslations,
     languages: {
         de: () => Promise.resolve().then(function () { return require('./translation.cjs.js'); }),
-        da: () => Promise.resolve().then(function () { return require('./translation2.cjs.js'); }),
-        cs: () => Promise.resolve().then(function () { return require('./translation3.cjs.js'); }),
-        nl: () => Promise.resolve().then(function () { return require('./translation4.cjs.js'); }),
-        fr: () => Promise.resolve().then(function () { return require('./translation5.cjs.js'); }),
-        fi: () => Promise.resolve().then(function () { return require('./translation6.cjs.js'); }),
-        hu: () => Promise.resolve().then(function () { return require('./translation7.cjs.js'); }),
-        it: () => Promise.resolve().then(function () { return require('./translation8.cjs.js'); }),
-        nb: () => Promise.resolve().then(function () { return require('./translation9.cjs.js'); }),
-        pl: () => Promise.resolve().then(function () { return require('./translation10.cjs.js'); }),
-        pt: () => Promise.resolve().then(function () { return require('./translation11.cjs.js'); }),
-        ru: () => Promise.resolve().then(function () { return require('./translation12.cjs.js'); }),
-        ro: () => Promise.resolve().then(function () { return require('./translation13.cjs.js'); }),
-        es: () => Promise.resolve().then(function () { return require('./translation14.cjs.js'); }),
-        sv: () => Promise.resolve().then(function () { return require('./translation15.cjs.js'); }),
-        ja: () => Promise.resolve().then(function () { return require('./translation16.cjs.js'); }),
-        th: () => Promise.resolve().then(function () { return require('./translation17.cjs.js'); }),
+        da: () => Promise.resolve().then(function () { return require('./translation.cjs2.js'); }),
+        cs: () => Promise.resolve().then(function () { return require('./translation.cjs3.js'); }),
+        nl: () => Promise.resolve().then(function () { return require('./translation.cjs4.js'); }),
+        fr: () => Promise.resolve().then(function () { return require('./translation.cjs5.js'); }),
+        fi: () => Promise.resolve().then(function () { return require('./translation.cjs6.js'); }),
+        hu: () => Promise.resolve().then(function () { return require('./translation.cjs7.js'); }),
+        it: () => Promise.resolve().then(function () { return require('./translation.cjs8.js'); }),
+        nb: () => Promise.resolve().then(function () { return require('./translation.cjs9.js'); }),
+        pl: () => Promise.resolve().then(function () { return require('./translation.cjs10.js'); }),
+        pt: () => Promise.resolve().then(function () { return require('./translation.cjs11.js'); }),
+        ru: () => Promise.resolve().then(function () { return require('./translation.cjs12.js'); }),
+        ro: () => Promise.resolve().then(function () { return require('./translation.cjs13.js'); }),
+        es: () => Promise.resolve().then(function () { return require('./translation.cjs14.js'); }),
+        sv: () => Promise.resolve().then(function () { return require('./translation.cjs15.js'); }),
+        ja: () => Promise.resolve().then(function () { return require('./translation.cjs16.js'); }),
+        th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
     },
 };
 /**
@@ -12474,24 +12474,40 @@ const DEFAULT_DEBOUNCE_MS = 300;
  *
  * Wire `initialCursor` into `usePaginationQuery` and `updateCursor` into
  * `useBidirectionalScroll`'s `onTopItemChange` callback (mapping index to cursor).
+ *
+ * A pending write is dropped whenever a path-changing navigation starts or the
+ * location has moved on: the write targets `to: "."`, so landing it after the
+ * user opened a row would replace their destination with the list they came
+ * from.
  */
 const useCursorUrlSync = ({ paramName = DEFAULT_PARAM_NAME, debounceMs = DEFAULT_DEBOUNCE_MS, } = {}) => {
-    const search = reactRouter.useSearch({ strict: false });
+    const router = reactRouter.useRouter();
     const navigate = reactRouter.useNavigate();
+    // Read the cursor off the router rather than `useSearch`, which would
+    // subscribe the table to its own writes and re-render every row mid-scroll.
     const [initialCursor] = react.useState(() => {
-        const entry = Object.entries(search).find(([key]) => key === paramName);
+        const entry = Object.entries(router.latestLocation.search).find(([key]) => key === paramName);
         return typeof entry?.[1] === "string" ? entry[1] : undefined;
     });
     const timerRef = react.useRef(undefined);
+    const cancelPendingUpdate = react.useCallback(() => {
+        if (timerRef.current !== undefined) {
+            clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        }
+    }, []);
     const paramNameRef = react.useRef(paramName);
     react.useEffect(() => {
         paramNameRef.current = paramName;
     }, [paramName]);
     const updateCursor = react.useCallback((cursor) => {
-        if (timerRef.current !== undefined) {
-            clearTimeout(timerRef.current);
-        }
+        cancelPendingUpdate();
+        const scheduledAtPathname = router.latestLocation.pathname;
         timerRef.current = setTimeout(() => {
+            timerRef.current = undefined;
+            if (router.latestLocation.pathname !== scheduledAtPathname) {
+                return;
+            }
             void navigate({
                 to: ".",
                 search: (prev) => ({
@@ -12501,14 +12517,20 @@ const useCursorUrlSync = ({ paramName = DEFAULT_PARAM_NAME, debounceMs = DEFAULT
                 replace: true,
             });
         }, debounceMs);
-    }, [debounceMs, navigate]);
+    }, [cancelPendingUpdate, debounceMs, navigate, router]);
+    // Only path-changing navigations invalidate a pending write. Same-pathname
+    // navigations (filter bar, table persistence, map viewBox) share this URL and
+    // their writes must not cancel ours. Cancelling here rather than relying on
+    // the pathname check alone also covers navigating away and back within the
+    // debounce window, which would otherwise land a stale cursor on a fresh list.
+    react.useEffect(() => router.subscribe("onBeforeNavigate", event => {
+        if (event.pathChanged) {
+            cancelPendingUpdate();
+        }
+    }), [cancelPendingUpdate, router]);
     react.useEffect(() => {
-        return () => {
-            if (timerRef.current !== undefined) {
-                clearTimeout(timerRef.current);
-            }
-        };
-    }, []);
+        return cancelPendingUpdate;
+    }, [cancelPendingUpdate]);
     return react.useMemo(() => ({ initialCursor, updateCursor }), [initialCursor, updateCursor]);
 };
 

package/index.esm.js

@@ -11,7 +11,7 @@ import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
 import { snakeCase, titleCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, safePolygon, useRole, useInteractions, FloatingPortal, useMergeRefs as useMergeRefs$1, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
+import { useFloating, offset, flip, shift, size, autoUpdate, useClick, useDismiss, useHover as useHover$1, safePolygon, useRole, useInteractions, FloatingPortal, useMergeRefs as useMergeRefs$1, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { omit, isEqual } from 'es-toolkit';
 import { Link, useBlocker, useNavigate, useLocation, useRouter, useSearch } from '@tanstack/react-router';
@@ -43,22 +43,22 @@ const translations = {
     default: defaultTranslations,
     languages: {
         de: () => import('./translation.esm.js'),
-        da: () => import('./translation2.esm.js'),
-        cs: () => import('./translation3.esm.js'),
-        nl: () => import('./translation4.esm.js'),
-        fr: () => import('./translation5.esm.js'),
-        fi: () => import('./translation6.esm.js'),
-        hu: () => import('./translation7.esm.js'),
-        it: () => import('./translation8.esm.js'),
-        nb: () => import('./translation9.esm.js'),
-        pl: () => import('./translation10.esm.js'),
-        pt: () => import('./translation11.esm.js'),
-        ru: () => import('./translation12.esm.js'),
-        ro: () => import('./translation13.esm.js'),
-        es: () => import('./translation14.esm.js'),
-        sv: () => import('./translation15.esm.js'),
-        ja: () => import('./translation16.esm.js'),
-        th: () => import('./translation17.esm.js'),
+        da: () => import('./translation.esm2.js'),
+        cs: () => import('./translation.esm3.js'),
+        nl: () => import('./translation.esm4.js'),
+        fr: () => import('./translation.esm5.js'),
+        fi: () => import('./translation.esm6.js'),
+        hu: () => import('./translation.esm7.js'),
+        it: () => import('./translation.esm8.js'),
+        nb: () => import('./translation.esm9.js'),
+        pl: () => import('./translation.esm10.js'),
+        pt: () => import('./translation.esm11.js'),
+        ru: () => import('./translation.esm12.js'),
+        ro: () => import('./translation.esm13.js'),
+        es: () => import('./translation.esm14.js'),
+        sv: () => import('./translation.esm15.js'),
+        ja: () => import('./translation.esm16.js'),
+        th: () => import('./translation.esm17.js'),
     },
 };
 /**
@@ -12472,24 +12472,40 @@ const DEFAULT_DEBOUNCE_MS = 300;
  *
  * Wire `initialCursor` into `usePaginationQuery` and `updateCursor` into
  * `useBidirectionalScroll`'s `onTopItemChange` callback (mapping index to cursor).
+ *
+ * A pending write is dropped whenever a path-changing navigation starts or the
+ * location has moved on: the write targets `to: "."`, so landing it after the
+ * user opened a row would replace their destination with the list they came
+ * from.
  */
 const useCursorUrlSync = ({ paramName = DEFAULT_PARAM_NAME, debounceMs = DEFAULT_DEBOUNCE_MS, } = {}) => {
-    const search = useSearch({ strict: false });
+    const router = useRouter();
     const navigate = useNavigate();
+    // Read the cursor off the router rather than `useSearch`, which would
+    // subscribe the table to its own writes and re-render every row mid-scroll.
     const [initialCursor] = useState(() => {
-        const entry = Object.entries(search).find(([key]) => key === paramName);
+        const entry = Object.entries(router.latestLocation.search).find(([key]) => key === paramName);
         return typeof entry?.[1] === "string" ? entry[1] : undefined;
     });
     const timerRef = useRef(undefined);
+    const cancelPendingUpdate = useCallback(() => {
+        if (timerRef.current !== undefined) {
+            clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        }
+    }, []);
     const paramNameRef = useRef(paramName);
     useEffect(() => {
         paramNameRef.current = paramName;
     }, [paramName]);
     const updateCursor = useCallback((cursor) => {
-        if (timerRef.current !== undefined) {
-            clearTimeout(timerRef.current);
-        }
+        cancelPendingUpdate();
+        const scheduledAtPathname = router.latestLocation.pathname;
         timerRef.current = setTimeout(() => {
+            timerRef.current = undefined;
+            if (router.latestLocation.pathname !== scheduledAtPathname) {
+                return;
+            }
             void navigate({
                 to: ".",
                 search: (prev) => ({
@@ -12499,14 +12515,20 @@ const useCursorUrlSync = ({ paramName = DEFAULT_PARAM_NAME, debounceMs = DEFAULT
                 replace: true,
             });
         }, debounceMs);
-    }, [debounceMs, navigate]);
+    }, [cancelPendingUpdate, debounceMs, navigate, router]);
+    // Only path-changing navigations invalidate a pending write. Same-pathname
+    // navigations (filter bar, table persistence, map viewBox) share this URL and
+    // their writes must not cancel ours. Cancelling here rather than relying on
+    // the pathname check alone also covers navigating away and back within the
+    // debounce window, which would otherwise land a stale cursor on a fresh list.
+    useEffect(() => router.subscribe("onBeforeNavigate", event => {
+        if (event.pathChanged) {
+            cancelPendingUpdate();
+        }
+    }), [cancelPendingUpdate, router]);
     useEffect(() => {
-        return () => {
-            if (timerRef.current !== undefined) {
-                clearTimeout(timerRef.current);
-            }
-        };
-    }, []);
+        return cancelPendingUpdate;
+    }, [cancelPendingUpdate]);
     return useMemo(() => ({ initialCursor, updateCursor }), [initialCursor, updateCursor]);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.2.26-alpha-288640a1f26.0",
+  "version": "2.2.27-alpha-485e203e548.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,17 +14,17 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.13.82-alpha-288640a1f26.0",
-    "@trackunit/css-class-variance-utilities": "1.13.83-alpha-288640a1f26.0",
-    "@trackunit/shared-utils": "1.15.86-alpha-288640a1f26.0",
-    "@trackunit/ui-icons": "1.13.84-alpha-288640a1f26.0",
+    "@trackunit/ui-design-tokens": "1.13.82-alpha-485e203e548.0",
+    "@trackunit/css-class-variance-utilities": "1.13.83-alpha-485e203e548.0",
+    "@trackunit/shared-utils": "1.15.86-alpha-485e203e548.0",
+    "@trackunit/ui-icons": "1.13.84-alpha-485e203e548.0",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "^3.14.3",
     "dequal": "^2.0.3",
     "fflate": "^0.8.2",
     "superjson": "^2.2.6",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.1.24-alpha-288640a1f26.0"
+    "@trackunit/i18n-library-translation": "2.1.24-alpha-485e203e548.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/hooks/useCursorUrlSync.d.ts

@@ -13,6 +13,11 @@ type UseCursorUrlSyncResult = {
  *
  * Wire `initialCursor` into `usePaginationQuery` and `updateCursor` into
  * `useBidirectionalScroll`'s `onTopItemChange` callback (mapping index to cursor).
+ *
+ * A pending write is dropped whenever a path-changing navigation starts or the
+ * location has moved on: the write targets `to: "."`, so landing it after the
+ * user opened a row would replace their destination with the list they came
+ * from.
  */
 export declare const useCursorUrlSync: ({ paramName, debounceMs, }?: UseCursorUrlSyncOptions) => UseCursorUrlSyncResult;
 export {};