@trackunit/react-components 1.10.15 → 1.10.17

package/index.cjs.js

@@ -1231,34 +1231,28 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries, }
 /**
  * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
  *
- * @param {any} value The value to set
- * @param {number} delay The debounce time
- * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
- * @returns {any} The latest value received
+ * @template TValue
+ * @param {TValue} value The value to set
+ * @param {UseDebounceOptions<TValue>} options The debounce options
+ * @param {(debouncedValue: TValue) => void} options.onBounce Callback when the value is debounced
+ * @param {number} options.delay The debounce time
+ * @returns {TValue} The latest value received
  */
-/**
- *
- */
-const useDebounce = (value, delay = 500, direction, onBounce) => {
+const useDebounce = (value, { onBounce, delay = 500 } = {}) => {
     const [debouncedValue, setDebouncedValue] = react.useState(value);
     react.useEffect(() => {
-        let handler;
-        if ((direction === "in" && !Boolean(debouncedValue) && Boolean(value)) ||
-            (direction === "out" && Boolean(debouncedValue) && !Boolean(value)) ||
-            direction === "both" ||
-            direction === undefined) {
-            handler = setTimeout(() => {
-                setDebouncedValue(value);
-                onBounce?.(value);
-            }, delay);
+        // Skip if value hasn't changed
+        if (esToolkit.isEqual(value, debouncedValue)) {
+            return;
         }
-        else {
+        const handler = setTimeout(() => {
             setDebouncedValue(value);
-        }
+            onBounce?.(value);
+        }, delay);
         return () => {
             clearTimeout(handler);
         };
-    }, [value, delay, direction, debouncedValue, onBounce]);
+    }, [value, delay, debouncedValue, onBounce]);
     return debouncedValue;
 };
 
@@ -1444,7 +1438,22 @@ const useGeometry = (ref, { skip = false, onChange } = {}) => {
  */
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
     const [hovering, setHovering] = react.useState(false);
-    const debouncedHovering = useDebounce(hovering, delay, direction);
+    const [debouncedHovering, setDebouncedHovering] = react.useState(false);
+    react.useEffect(() => {
+        if (!debounced) {
+            setDebouncedHovering(hovering);
+            return undefined;
+        }
+        const shouldDebounce = direction === "both" || (direction === "in" && hovering) || (direction === "out" && !hovering);
+        if (shouldDebounce) {
+            const timer = setTimeout(() => {
+                setDebouncedHovering(hovering);
+            }, delay);
+            return () => clearTimeout(timer);
+        }
+        setDebouncedHovering(hovering);
+        return undefined;
+    }, [debounced, direction, delay, hovering]);
     const onMouseEnter = react.useCallback(() => {
         setHovering(true);
     }, []);
@@ -1454,8 +1463,8 @@ const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debo
     return react.useMemo(() => ({
         onMouseEnter,
         onMouseLeave,
-        hovering: debounced ? debouncedHovering : hovering,
-    }), [onMouseEnter, onMouseLeave, debounced, debouncedHovering, hovering]);
+        hovering: debouncedHovering,
+    }), [onMouseEnter, onMouseLeave, debouncedHovering]);
 };
 
 const OVERSCAN = 10;
@@ -3803,6 +3812,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
     const containerRef = react.useRef(null);
     const listRef = react.useRef(null);
     const rowRefsMap = react.useRef(new Map());
+    const virtualizerRef = react.useRef(null);
+    const hasMeasuredOnMount = react.useRef(false);
     // Resolve loading indicator once to avoid unnecessary re-renders
     const resolvedLoadingIndicator = react.useMemo(() => getResolvedLoadingIndicator(loadingIndicator), [loadingIndicator]);
     // Calculate total count including header
@@ -3906,13 +3917,16 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             onChange?.(instance);
         },
     });
-    // Measure the list on mount
+    // Keep ref updated with latest virtualizer instance
+    react.useEffect(() => {
+        virtualizerRef.current = virtualizer;
+    }, [virtualizer]);
+    // Measure the list on mount only (not on subsequent virtualizer updates)
     react.useLayoutEffect(() => {
-        // Automatically measure if header is present, or if explicitly requested
-        virtualizer.measure();
-        // This is straight out of the TanStack Virtual docs, so we'll trust it.
-        // eslint-disable-next-line react-hooks/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        if (!hasMeasuredOnMount.current) {
+            virtualizerRef.current?.measure();
+            hasMeasuredOnMount.current = true;
+        }
     }, []);
     // Scroll to top when total count changes (filtering applied)
     // Don't scroll when just loading more items (infinite scroll - total stays the same)

package/index.esm.js

@@ -1229,34 +1229,28 @@ const useContinuousTimeout = ({ onTimeout, onMaxRetries, duration, maxRetries, }
 /**
  * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
  *
- * @param {any} value The value to set
- * @param {number} delay The debounce time
- * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
- * @returns {any} The latest value received
+ * @template TValue
+ * @param {TValue} value The value to set
+ * @param {UseDebounceOptions<TValue>} options The debounce options
+ * @param {(debouncedValue: TValue) => void} options.onBounce Callback when the value is debounced
+ * @param {number} options.delay The debounce time
+ * @returns {TValue} The latest value received
  */
-/**
- *
- */
-const useDebounce = (value, delay = 500, direction, onBounce) => {
+const useDebounce = (value, { onBounce, delay = 500 } = {}) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
     useEffect(() => {
-        let handler;
-        if ((direction === "in" && !Boolean(debouncedValue) && Boolean(value)) ||
-            (direction === "out" && Boolean(debouncedValue) && !Boolean(value)) ||
-            direction === "both" ||
-            direction === undefined) {
-            handler = setTimeout(() => {
-                setDebouncedValue(value);
-                onBounce?.(value);
-            }, delay);
+        // Skip if value hasn't changed
+        if (isEqual(value, debouncedValue)) {
+            return;
         }
-        else {
+        const handler = setTimeout(() => {
             setDebouncedValue(value);
-        }
+            onBounce?.(value);
+        }, delay);
         return () => {
             clearTimeout(handler);
         };
-    }, [value, delay, direction, debouncedValue, onBounce]);
+    }, [value, delay, debouncedValue, onBounce]);
     return debouncedValue;
 };
 
@@ -1442,7 +1436,22 @@ const useGeometry = (ref, { skip = false, onChange } = {}) => {
  */
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
     const [hovering, setHovering] = useState(false);
-    const debouncedHovering = useDebounce(hovering, delay, direction);
+    const [debouncedHovering, setDebouncedHovering] = useState(false);
+    useEffect(() => {
+        if (!debounced) {
+            setDebouncedHovering(hovering);
+            return undefined;
+        }
+        const shouldDebounce = direction === "both" || (direction === "in" && hovering) || (direction === "out" && !hovering);
+        if (shouldDebounce) {
+            const timer = setTimeout(() => {
+                setDebouncedHovering(hovering);
+            }, delay);
+            return () => clearTimeout(timer);
+        }
+        setDebouncedHovering(hovering);
+        return undefined;
+    }, [debounced, direction, delay, hovering]);
     const onMouseEnter = useCallback(() => {
         setHovering(true);
     }, []);
@@ -1452,8 +1461,8 @@ const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debo
     return useMemo(() => ({
         onMouseEnter,
         onMouseLeave,
-        hovering: debounced ? debouncedHovering : hovering,
-    }), [onMouseEnter, onMouseLeave, debounced, debouncedHovering, hovering]);
+        hovering: debouncedHovering,
+    }), [onMouseEnter, onMouseLeave, debouncedHovering]);
 };
 
 const OVERSCAN = 10;
@@ -3801,6 +3810,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
     const containerRef = useRef(null);
     const listRef = useRef(null);
     const rowRefsMap = useRef(new Map());
+    const virtualizerRef = useRef(null);
+    const hasMeasuredOnMount = useRef(false);
     // Resolve loading indicator once to avoid unnecessary re-renders
     const resolvedLoadingIndicator = useMemo(() => getResolvedLoadingIndicator(loadingIndicator), [loadingIndicator]);
     // Calculate total count including header
@@ -3904,13 +3915,16 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             onChange?.(instance);
         },
     });
-    // Measure the list on mount
+    // Keep ref updated with latest virtualizer instance
+    useEffect(() => {
+        virtualizerRef.current = virtualizer;
+    }, [virtualizer]);
+    // Measure the list on mount only (not on subsequent virtualizer updates)
     useLayoutEffect(() => {
-        // Automatically measure if header is present, or if explicitly requested
-        virtualizer.measure();
-        // This is straight out of the TanStack Virtual docs, so we'll trust it.
-        // eslint-disable-next-line react-hooks/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        if (!hasMeasuredOnMount.current) {
+            virtualizerRef.current?.measure();
+            hasMeasuredOnMount.current = true;
+        }
     }, []);
     // Scroll to top when total count changes (filtering applied)
     // Don't scroll when just loading more items (infinite scroll - total stays the same)

package/package.json

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

package/src/hooks/useDebounce.d.ts

@@ -1,13 +1,16 @@
-export type DebounceDirection = "in" | "out" | "both";
+type UseDebounceOptions<TValue> = {
+    onBounce?: (debouncedValue: TValue) => void;
+    delay?: number;
+};
 /**
  * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
  *
- * @param {any} value The value to set
- * @param {number} delay The debounce time
- * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
- * @returns {any} The latest value received
+ * @template TValue
+ * @param {TValue} value The value to set
+ * @param {UseDebounceOptions<TValue>} options The debounce options
+ * @param {(debouncedValue: TValue) => void} options.onBounce Callback when the value is debounced
+ * @param {number} options.delay The debounce time
+ * @returns {TValue} The latest value received
  */
-/**
- *
- */
-export declare const useDebounce: <TValue>(value: TValue, delay?: number, direction?: DebounceDirection, onBounce?: (debouncedValue: TValue) => void) => TValue;
+export declare const useDebounce: <TValue>(value: TValue, { onBounce, delay }?: UseDebounceOptions<TValue>) => TValue;
+export {};

package/src/hooks/useHover.d.ts

@@ -1,4 +1,4 @@
-import { DebounceDirection } from "./useDebounce";
+export type DebounceDirection = "in" | "out" | "both";
 type UseHoverProps = {
     debounced: true;
     delay?: number;