@trackunit/react-components 1.21.18 → 1.22.0

package/index.cjs.js

@@ -11048,7 +11048,7 @@ const useSearchParamSync = ({ key, enabled = true, onExternalChange, replace: re
         const urlBase = location.href.length - (location.searchStr.length || 0) + (location.hash.length || 0);
         return urlBase + otherParamsLength + 1 + paramKey.length + 1 + paramValue.length;
     }, [location]);
-    const updateSearchParam = react.useCallback((encodedValue) => {
+    const updateSearchParam = react.useCallback((encodedValue, options) => {
         if (!enabled) {
             return;
         }
@@ -11060,7 +11060,7 @@ const useSearchParamSync = ({ key, enabled = true, onExternalChange, replace: re
             return;
         }
         requestAnimationFrame(() => {
-            const shouldReplace = replaceOption ?? !Boolean(currentSearchValue);
+            const shouldReplace = options?.replace ?? replaceOption ?? !Boolean(currentSearchValue);
             void navigate({
                 to: ".",
                 search: (prev) => {
@@ -11141,14 +11141,14 @@ const usePersistedState = ({ key, validate, serialize, toUrlValue, fromUrlValue,
     react.useEffect(() => {
         serializeRef.current = serialize;
     }, [serialize]);
-    const [initialState] = react.useState(() => {
+    const [{ initialState, loadedFromStorage }] = react.useState(() => {
         if (enabled && searchValue) {
             try {
                 const decoded = decode(searchValue);
                 const transformed = fromUrlValue ? fromUrlValue(decoded) : decoded;
                 const validated = validate(transformed);
                 if (validated !== undefined) {
-                    return validated;
+                    return { initialState: validated, loadedFromStorage: false };
                 }
             }
             catch {
@@ -11159,15 +11159,28 @@ const usePersistedState = ({ key, validate, serialize, toUrlValue, fromUrlValue,
             const raw = localStorage.getItem(storageKey);
             if (raw) {
                 const parsed = storageSerializer.deserialize(raw);
-                return validate(parsed);
+                const validated = validate(parsed);
+                return { initialState: validated, loadedFromStorage: validated !== undefined };
             }
         }
         catch {
             // no valid stored state
         }
-        return undefined;
+        return { initialState: undefined, loadedFromStorage: false };
     });
     const lastPersistedRef = react.useRef(initialState);
+    const hasRestoredUrlRef = react.useRef(false);
+    react.useEffect(() => {
+        if (hasRestoredUrlRef.current) {
+            return;
+        }
+        if (!enabled || !loadedFromStorage || initialState === undefined || searchValue !== undefined) {
+            return;
+        }
+        hasRestoredUrlRef.current = true;
+        const urlValue = toUrlValueRef.current ? toUrlValueRef.current(initialState) : initialState;
+        updateSearchParam(encode(urlValue), { replace: true });
+    }, [enabled, loadedFromStorage, initialState, searchValue, updateSearchParam, encode]);
     const persistState = react.useCallback((state) => {
         if (dequal.dequal(lastPersistedRef.current, state)) {
             return;

package/index.esm.js

@@ -11046,7 +11046,7 @@ const useSearchParamSync = ({ key, enabled = true, onExternalChange, replace: re
         const urlBase = location.href.length - (location.searchStr.length || 0) + (location.hash.length || 0);
         return urlBase + otherParamsLength + 1 + paramKey.length + 1 + paramValue.length;
     }, [location]);
-    const updateSearchParam = useCallback((encodedValue) => {
+    const updateSearchParam = useCallback((encodedValue, options) => {
         if (!enabled) {
             return;
         }
@@ -11058,7 +11058,7 @@ const useSearchParamSync = ({ key, enabled = true, onExternalChange, replace: re
             return;
         }
         requestAnimationFrame(() => {
-            const shouldReplace = replaceOption ?? !Boolean(currentSearchValue);
+            const shouldReplace = options?.replace ?? replaceOption ?? !Boolean(currentSearchValue);
             void navigate({
                 to: ".",
                 search: (prev) => {
@@ -11139,14 +11139,14 @@ const usePersistedState = ({ key, validate, serialize, toUrlValue, fromUrlValue,
     useEffect(() => {
         serializeRef.current = serialize;
     }, [serialize]);
-    const [initialState] = useState(() => {
+    const [{ initialState, loadedFromStorage }] = useState(() => {
         if (enabled && searchValue) {
             try {
                 const decoded = decode(searchValue);
                 const transformed = fromUrlValue ? fromUrlValue(decoded) : decoded;
                 const validated = validate(transformed);
                 if (validated !== undefined) {
-                    return validated;
+                    return { initialState: validated, loadedFromStorage: false };
                 }
             }
             catch {
@@ -11157,15 +11157,28 @@ const usePersistedState = ({ key, validate, serialize, toUrlValue, fromUrlValue,
             const raw = localStorage.getItem(storageKey);
             if (raw) {
                 const parsed = storageSerializer.deserialize(raw);
-                return validate(parsed);
+                const validated = validate(parsed);
+                return { initialState: validated, loadedFromStorage: validated !== undefined };
             }
         }
         catch {
             // no valid stored state
         }
-        return undefined;
+        return { initialState: undefined, loadedFromStorage: false };
     });
     const lastPersistedRef = useRef(initialState);
+    const hasRestoredUrlRef = useRef(false);
+    useEffect(() => {
+        if (hasRestoredUrlRef.current) {
+            return;
+        }
+        if (!enabled || !loadedFromStorage || initialState === undefined || searchValue !== undefined) {
+            return;
+        }
+        hasRestoredUrlRef.current = true;
+        const urlValue = toUrlValueRef.current ? toUrlValueRef.current(initialState) : initialState;
+        updateSearchParam(encode(urlValue), { replace: true });
+    }, [enabled, loadedFromStorage, initialState, searchValue, updateSearchParam, encode]);
     const persistState = useCallback((state) => {
         if (dequal(lastPersistedRef.current, state)) {
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.21.18",
+  "version": "1.22.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/hooks/persistence/useSearchParamSync.d.ts

@@ -7,7 +7,9 @@ type UseSearchParamSyncOptions = {
 };
 type UseSearchParamSyncReturn = {
     readonly searchValue: string | undefined;
-    readonly updateSearchParam: (encodedValue: string | undefined) => void;
+    readonly updateSearchParam: (encodedValue: string | undefined, options?: {
+        readonly replace?: boolean;
+    }) => void;
 };
 /**
  * Syncs an encoded string value with a URL search parameter via Tanstack Router.