@trackunit/react-components 1.10.16 → 1.10.18

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;

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.10.16",
+  "version": "1.10.18",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,11 +16,11 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.49",
-    "@trackunit/css-class-variance-utilities": "1.7.49",
-    "@trackunit/shared-utils": "1.9.49",
-    "@trackunit/ui-icons": "1.7.50",
-    "@trackunit/react-test-setup": "1.4.49",
+    "@trackunit/ui-design-tokens": "1.7.50",
+    "@trackunit/css-class-variance-utilities": "1.7.50",
+    "@trackunit/shared-utils": "1.9.50",
+    "@trackunit/ui-icons": "1.7.51",
+    "@trackunit/react-test-setup": "1.4.50",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

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;