@trackunit/filters-filter-bar 1.8.38 → 1.8.39

package/index.cjs.js

@@ -2384,14 +2384,23 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadData: inp
         setFilterBarConfig,
         setValue: setValueMemoized,
     });
+    // Store the latest callback in a ref and update it on every render
     const onValuesChangeRef = react.useRef(onValuesChange);
-    react.useEffect(() => {
-        onValuesChangeRef.current = onValuesChange;
-    }, [onValuesChange]);
-    react.useEffect(() => {
-        saveData(filterBarConfig, filterBarDefinition);
-        onValuesChangeRef.current?.(filterBarConfig.values);
-    }, [filterBarConfig, filterBarDefinition, saveData]);
+    onValuesChangeRef.current = onValuesChange;
+    // Create a stable wrapper that always calls the latest callback via ref
+    // useCallback with empty deps is safe here - we only access the ref, not reactive values
+    const stableOnValuesChange = react.useCallback((values) => {
+        onValuesChangeRef.current?.(values);
+    }, []);
+    // Watch for changes in filter values and only save/notify when they actually change
+    reactCoreHooks.useWatch({
+        value: filterBarConfig.values,
+        onChange: currentValues => {
+            saveData(filterBarConfig, filterBarDefinition);
+            stableOnValuesChange(currentValues);
+        },
+        immediate: true,
+    });
     react.useEffect(() => {
         if (lastName.current !== name) {
             setFilterBarConfig(loadData(sharedUtils.objectValues(filterBarDefinition)));
@@ -2403,9 +2412,9 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadData: inp
             filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
             filterBarDefinition,
             name,
-            onValuesChange,
+            onValuesChange: stableOnValuesChange,
         };
-    }, [filterBarConfig, filterMapActions, filterMapGetter, filterBarDefinition, name, onValuesChange]);
+    }, [filterBarConfig, filterMapActions, filterMapGetter, filterBarDefinition, name, stableOnValuesChange]);
 };
 
 /**
@@ -2465,27 +2474,34 @@ const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, loadData
     const filterBarConfigMemoed = react.useMemo(() => {
         return { ...filterBarConfig, ...filterMapActions, ...filterMapGetter };
     }, [filterBarConfig, filterMapActions, filterMapGetter]);
-    react.useEffect(() => {
-        if (isDataLoaded) {
-            onValuesChange?.(filterBarConfigMemoed.values);
-            saveData(filterBarConfigMemoed, internalFilterBarDefinitions);
-        }
-    }, [
-        filterBarConfigMemoed.values,
-        internalFilterBarDefinitions,
-        filterBarConfigMemoed,
-        onValuesChange,
-        saveData,
-        isDataLoaded,
-    ]);
+    // Store the latest callback in a ref and update it on every render
+    const onValuesChangeRef = react.useRef(onValuesChange);
+    onValuesChangeRef.current = onValuesChange;
+    // Create a stable wrapper that always calls the latest callback via ref
+    // useCallback with empty deps is safe here - we only access the ref, not reactive values
+    const stableOnValuesChange = react.useCallback((values) => {
+        onValuesChangeRef.current?.(values);
+    }, []);
+    // Watch for changes in filter values and only save/notify when they actually change
+    reactCoreHooks.useWatch({
+        value: isDataLoaded ? filterBarConfigMemoed.values : null,
+        onChange: currentValues => {
+            if (currentValues !== null) {
+                saveData(filterBarConfigMemoed, internalFilterBarDefinitions);
+                stableOnValuesChange(currentValues);
+            }
+        },
+        immediate: true,
+    });
     return react.useMemo(() => {
         return {
             filterBarConfig: filterBarConfigMemoed,
             filterBarDefinition: internalFilterBarDefinitions,
             dataLoaded,
             name,
+            onValuesChange: stableOnValuesChange,
         };
-    }, [filterBarConfigMemoed, internalFilterBarDefinitions, dataLoaded, name]);
+    }, [filterBarConfigMemoed, internalFilterBarDefinitions, dataLoaded, name, stableOnValuesChange]);
 };
 
 /**

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { useMemo, useRef, useState, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
 import { Filter, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
 import { Button, Icon, useList, List, Text, Card, CardBody, useViewportBreakpoints, Popover, PopoverTrigger, Tooltip, Badge, PopoverContent, IconButton, MenuList } from '@trackunit/react-components';
-import { useAnalytics, useTextSearch, useCurrentUser, useCustomEncoding } from '@trackunit/react-core-hooks';
+import { useAnalytics, useTextSearch, useCurrentUser, useCustomEncoding, useWatch } from '@trackunit/react-core-hooks';
 import { capitalize } from 'string-ts';
 import { createEvent } from '@trackunit/react-core-contexts-api';
 import { Search, NumberField, RadioGroup } from '@trackunit/react-form-components';
@@ -2382,14 +2382,23 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadData: inp
         setFilterBarConfig,
         setValue: setValueMemoized,
     });
+    // Store the latest callback in a ref and update it on every render
     const onValuesChangeRef = useRef(onValuesChange);
-    useEffect(() => {
-        onValuesChangeRef.current = onValuesChange;
-    }, [onValuesChange]);
-    useEffect(() => {
-        saveData(filterBarConfig, filterBarDefinition);
-        onValuesChangeRef.current?.(filterBarConfig.values);
-    }, [filterBarConfig, filterBarDefinition, saveData]);
+    onValuesChangeRef.current = onValuesChange;
+    // Create a stable wrapper that always calls the latest callback via ref
+    // useCallback with empty deps is safe here - we only access the ref, not reactive values
+    const stableOnValuesChange = useCallback((values) => {
+        onValuesChangeRef.current?.(values);
+    }, []);
+    // Watch for changes in filter values and only save/notify when they actually change
+    useWatch({
+        value: filterBarConfig.values,
+        onChange: currentValues => {
+            saveData(filterBarConfig, filterBarDefinition);
+            stableOnValuesChange(currentValues);
+        },
+        immediate: true,
+    });
     useEffect(() => {
         if (lastName.current !== name) {
             setFilterBarConfig(loadData(objectValues(filterBarDefinition)));
@@ -2401,9 +2410,9 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, loadData: inp
             filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
             filterBarDefinition,
             name,
-            onValuesChange,
+            onValuesChange: stableOnValuesChange,
         };
-    }, [filterBarConfig, filterMapActions, filterMapGetter, filterBarDefinition, name, onValuesChange]);
+    }, [filterBarConfig, filterMapActions, filterMapGetter, filterBarDefinition, name, stableOnValuesChange]);
 };
 
 /**
@@ -2463,27 +2472,34 @@ const useFilterBarAsync = ({ name, onValuesChange, filterBarDefinition, loadData
     const filterBarConfigMemoed = useMemo(() => {
         return { ...filterBarConfig, ...filterMapActions, ...filterMapGetter };
     }, [filterBarConfig, filterMapActions, filterMapGetter]);
-    useEffect(() => {
-        if (isDataLoaded) {
-            onValuesChange?.(filterBarConfigMemoed.values);
-            saveData(filterBarConfigMemoed, internalFilterBarDefinitions);
-        }
-    }, [
-        filterBarConfigMemoed.values,
-        internalFilterBarDefinitions,
-        filterBarConfigMemoed,
-        onValuesChange,
-        saveData,
-        isDataLoaded,
-    ]);
+    // Store the latest callback in a ref and update it on every render
+    const onValuesChangeRef = useRef(onValuesChange);
+    onValuesChangeRef.current = onValuesChange;
+    // Create a stable wrapper that always calls the latest callback via ref
+    // useCallback with empty deps is safe here - we only access the ref, not reactive values
+    const stableOnValuesChange = useCallback((values) => {
+        onValuesChangeRef.current?.(values);
+    }, []);
+    // Watch for changes in filter values and only save/notify when they actually change
+    useWatch({
+        value: isDataLoaded ? filterBarConfigMemoed.values : null,
+        onChange: currentValues => {
+            if (currentValues !== null) {
+                saveData(filterBarConfigMemoed, internalFilterBarDefinitions);
+                stableOnValuesChange(currentValues);
+            }
+        },
+        immediate: true,
+    });
     return useMemo(() => {
         return {
             filterBarConfig: filterBarConfigMemoed,
             filterBarDefinition: internalFilterBarDefinitions,
             dataLoaded,
             name,
+            onValuesChange: stableOnValuesChange,
         };
-    }, [filterBarConfigMemoed, internalFilterBarDefinitions, dataLoaded, name]);
+    }, [filterBarConfigMemoed, internalFilterBarDefinitions, dataLoaded, name, stableOnValuesChange]);
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.8.38",
+  "version": "1.8.39",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,16 +14,16 @@
     "string-ts": "^2.0.0",
     "zod": "^3.23.8",
     "@trackunit/iris-app-api": "1.7.27",
-    "@trackunit/react-core-hooks": "1.7.30",
-    "@trackunit/react-filter-components": "1.7.38",
-    "@trackunit/react-date-and-time-components": "1.10.38",
+    "@trackunit/react-core-hooks": "1.7.31",
+    "@trackunit/react-filter-components": "1.7.39",
+    "@trackunit/react-date-and-time-components": "1.10.39",
     "@trackunit/shared-utils": "1.9.26",
-    "@trackunit/react-form-components": "1.8.37",
+    "@trackunit/react-form-components": "1.8.38",
     "@trackunit/react-core-contexts-api": "1.8.28",
     "@trackunit/geo-json-utils": "1.7.26",
-    "@trackunit/i18n-library-translation": "1.7.31",
+    "@trackunit/i18n-library-translation": "1.7.32",
     "@trackunit/css-class-variance-utilities": "1.7.26",
-    "@trackunit/react-components": "1.9.37",
+    "@trackunit/react-components": "1.9.38",
     "@trackunit/react-test-setup": "1.4.26",
     "@tanstack/react-router": "1.114.29"
   },