@trackunit/react-components 1.10.94 → 1.10.96

package/index.cjs.js

@@ -2168,22 +2168,85 @@ const useDebounce = (value, { onBounce, delay = 500 } = {}) => {
     return debouncedValue;
 };
 
+const UNINITIALIZED = Symbol("UNINITIALIZED");
 /**
- * Differentiate between the first and subsequent renders.
+ * Hook to watch for changes in a value and react to them.
+ * Uses deep equality comparison via es-toolkit's isEqual.
  *
- * @returns {boolean} Returns true if it is the first render, false otherwise.
+ * @param props - The hook properties
+ * @param props.value - The value to watch for changes
+ * @param props.onChange - Function to call when the value changes
+ * @param props.immediate - Whether to run the callback immediately on mount (default: false)
+ * @param props.skip - Whether to skip watching for changes (default: false)
  */
-const useIsFirstRender = () => {
-    const [isFirstRender, setIsFirstRender] = react.useState(true);
-    react.useLayoutEffect(() => {
-        queueMicrotask(() => {
-            setIsFirstRender(false);
-        });
-    }, []);
-    return isFirstRender;
+const useWatch = ({ value, onChange, immediate = false, skip = false }) => {
+    const prevValue = react.useRef(UNINITIALIZED);
+    const onChangeRef = react.useRef(onChange);
+    // Update the ref whenever onChange changes
+    react.useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    react.useEffect(() => {
+        if (skip) {
+            return;
+        }
+        const prev = prevValue.current;
+        const hasChanged = prev === UNINITIALIZED ? false : !esToolkit.isEqual(value, prev);
+        if (immediate && prev === UNINITIALIZED) {
+            onChangeRef.current(value, null);
+        }
+        else if (hasChanged && prev !== UNINITIALIZED) {
+            onChangeRef.current(value, prev);
+        }
+        prevValue.current = value;
+    }, [value, immediate, skip]);
 };
 
 const SCROLL_DEBOUNCE_TIME = 50;
+const scrollStateReducer = (state, action) => {
+    switch (action.type) {
+        case "UPDATE_SCROLLABLE": {
+            if (state.isScrollable === action.payload) {
+                return state;
+            }
+            return { ...state, isScrollable: action.payload };
+        }
+        case "UPDATE_POSITION": {
+            if (state.isAtBeginning === action.payload.isAtBeginning &&
+                state.isAtEnd === action.payload.isAtEnd &&
+                state.scrollPosition.start === action.payload.scrollPosition.start &&
+                state.scrollPosition.end === action.payload.scrollPosition.end) {
+                return state;
+            }
+            return {
+                ...state,
+                isAtBeginning: action.payload.isAtBeginning,
+                isAtEnd: action.payload.isAtEnd,
+                scrollPosition: action.payload.scrollPosition,
+            };
+        }
+        case "UPDATE_ALL": {
+            if (state.isScrollable === action.payload.isScrollable &&
+                state.isAtBeginning === action.payload.isAtBeginning &&
+                state.isAtEnd === action.payload.isAtEnd &&
+                state.scrollPosition.start === action.payload.scrollPosition.start &&
+                state.scrollPosition.end === action.payload.scrollPosition.end) {
+                return state;
+            }
+            return action.payload;
+        }
+        default: {
+            const exhaustiveCheck = action;
+            throw new Error(`Unknown action: ${exhaustiveCheck}`);
+        }
+    }
+};
+const initialScrollState = {
+    isScrollable: false,
+    isAtBeginning: true,
+    isAtEnd: false,
+    scrollPosition: { start: 0, end: 0 },
+};
 /**
  * Hook for detecting scroll values in horizontal or vertical direction.
  * Returns a ref callback to attach to the element you want to observe.
@@ -2200,12 +2263,8 @@ const SCROLL_DEBOUNCE_TIME = 50;
 const useScrollDetection = (options) => {
     const { direction = "vertical", onScrollStateChange, skip = false } = options ?? {};
     const [element, setElement] = react.useState(null);
-    const [isScrollable, setIsScrollable] = react.useState(false);
-    const [isAtBeginning, setIsAtBeginning] = react.useState(true);
-    const [isAtEnd, setIsAtEnd] = react.useState(false);
-    const [scrollPosition, setScrollPosition] = react.useState({ start: 0, end: 0 });
+    const [scrollState, dispatch] = react.useReducer(scrollStateReducer, initialScrollState);
     const observerRef = react.useRef(null);
-    const isFirstRender = useIsFirstRender();
     // Callback ref to track the element
     const ref = react.useCallback((node) => {
         setElement(node);
@@ -2217,13 +2276,7 @@ const useScrollDetection = (options) => {
         const hasOverflow = direction === "horizontal"
             ? element.scrollWidth > element.clientWidth
             : element.scrollHeight > element.clientHeight;
-        setIsScrollable(prev => {
-            if (prev !== hasOverflow) {
-                // State will be updated, so we'll notify in the next effect
-                return hasOverflow;
-            }
-            return prev;
-        });
+        dispatch({ type: "UPDATE_SCROLLABLE", payload: hasOverflow });
     }, [element, direction]);
     const checkScrollPosition = react.useCallback(() => {
         if (!element) {
@@ -2231,21 +2284,23 @@ const useScrollDetection = (options) => {
         }
         if (direction === "horizontal") {
             const { scrollLeft, scrollWidth, clientWidth } = element;
-            const newIsAtBeginning = scrollLeft === 0;
-            const newIsAtEnd = Math.abs(scrollWidth - scrollLeft - clientWidth) <= 1;
-            const newScrollPosition = { start: scrollLeft, end: clientWidth - scrollLeft };
-            setIsAtBeginning(newIsAtBeginning);
-            setIsAtEnd(newIsAtEnd);
-            setScrollPosition(newScrollPosition);
+            const isAtBeginning = scrollLeft === 0;
+            const isAtEnd = Math.abs(scrollWidth - scrollLeft - clientWidth) <= 1;
+            const scrollPosition = { start: scrollLeft, end: clientWidth - scrollLeft };
+            dispatch({
+                type: "UPDATE_POSITION",
+                payload: { isAtBeginning, isAtEnd, scrollPosition },
+            });
         }
         else {
             const { scrollTop, scrollHeight, clientHeight } = element;
-            const newIsAtBeginning = scrollTop === 0;
-            const newIsAtEnd = Math.abs(scrollHeight - scrollTop - clientHeight) <= 1;
-            const newScrollPosition = { start: scrollTop, end: clientHeight - scrollTop };
-            setIsAtBeginning(newIsAtBeginning);
-            setIsAtEnd(newIsAtEnd);
-            setScrollPosition(newScrollPosition);
+            const isAtBeginning = scrollTop === 0;
+            const isAtEnd = Math.abs(scrollHeight - scrollTop - clientHeight) <= 1;
+            const scrollPosition = { start: scrollTop, end: clientHeight - scrollTop };
+            dispatch({
+                type: "UPDATE_POSITION",
+                payload: { isAtBeginning, isAtEnd, scrollPosition },
+            });
         }
     }, [element, direction]);
     const [scrollTrigger, setScrollTrigger] = react.useState(0);
@@ -2264,25 +2319,49 @@ const useScrollDetection = (options) => {
     react.useEffect(() => {
         checkScrollPositionRef.current = checkScrollPosition;
     }, [checkScrollPosition]);
-    // Notify about state changes whenever any state value changes
-    react.useEffect(() => {
-        if (isFirstRender) {
-            return;
-        }
-        onScrollStateChange?.({
-            isScrollable,
-            isAtBeginning,
-            isAtEnd,
-            scrollPosition,
-        });
-    }, [isScrollable, isAtBeginning, isAtEnd, scrollPosition, onScrollStateChange, isFirstRender]);
+    useWatch({
+        value: scrollState,
+        onChange: (changedState) => onScrollStateChange?.(changedState),
+        skip: skip || !onScrollStateChange,
+    });
     react.useEffect(() => {
         if (skip || !element) {
             return;
         }
-        // Initial checks
-        checkScrollableRef.current();
-        checkScrollPositionRef.current();
+        // Initial checks - batch into single update
+        const hasOverflow = direction === "horizontal"
+            ? element.scrollWidth > element.clientWidth
+            : element.scrollHeight > element.clientHeight;
+        if (direction === "horizontal") {
+            const { scrollLeft, scrollWidth, clientWidth } = element;
+            const isAtBeginning = scrollLeft === 0;
+            const isAtEnd = Math.abs(scrollWidth - scrollLeft - clientWidth) <= 1;
+            const scrollPosition = { start: scrollLeft, end: clientWidth - scrollLeft };
+            dispatch({
+                type: "UPDATE_ALL",
+                payload: {
+                    isScrollable: hasOverflow,
+                    isAtBeginning,
+                    isAtEnd,
+                    scrollPosition,
+                },
+            });
+        }
+        else {
+            const { scrollTop, scrollHeight, clientHeight } = element;
+            const isAtBeginning = scrollTop === 0;
+            const isAtEnd = Math.abs(scrollHeight - scrollTop - clientHeight) <= 1;
+            const scrollPosition = { start: scrollTop, end: clientHeight - scrollTop };
+            dispatch({
+                type: "UPDATE_ALL",
+                payload: {
+                    isScrollable: hasOverflow,
+                    isAtBeginning,
+                    isAtEnd,
+                    scrollPosition,
+                },
+            });
+        }
         observerRef.current = new ResizeObserver(() => {
             checkScrollableRef.current();
             checkScrollPositionRef.current();
@@ -2295,8 +2374,15 @@ const useScrollDetection = (options) => {
             }
             element.removeEventListener("scroll", handleScroll);
         };
-    }, [element, handleScroll, skip]);
-    return react.useMemo(() => ({ ref, element, isScrollable, isAtBeginning, isAtEnd, scrollPosition }), [ref, element, isScrollable, isAtBeginning, isAtEnd, scrollPosition]);
+    }, [element, handleScroll, skip, direction]);
+    return react.useMemo(() => ({
+        ref,
+        element,
+        isScrollable: scrollState.isScrollable,
+        isAtBeginning: scrollState.isAtBeginning,
+        isAtEnd: scrollState.isAtEnd,
+        scrollPosition: scrollState.scrollPosition,
+    }), [ref, element, scrollState]);
 };
 
 const cvaZStackContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
@@ -5611,6 +5697,21 @@ const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debo
     }), [onMouseEnter, onMouseLeave, value]);
 };
 
+/**
+ * Differentiate between the first and subsequent renders.
+ *
+ * @returns {boolean} Returns true if it is the first render, false otherwise.
+ */
+const useIsFirstRender = () => {
+    const [isFirstRender, setIsFirstRender] = react.useState(true);
+    react.useLayoutEffect(() => {
+        queueMicrotask(() => {
+            setIsFirstRender(false);
+        });
+    }, []);
+    return isFirstRender;
+};
+
 /**
  * Custom hook for checking if the browser is in fullscreen mode.
  */
@@ -5928,40 +6029,6 @@ function useTextSearch(items, props) {
     return react.useMemo(() => [result, searchText, setSearchText], [result, searchText, setSearchText]);
 }
 
-const UNINITIALIZED = Symbol("UNINITIALIZED");
-/**
- * Hook to watch for changes in a value and react to them.
- * Uses deep equality comparison via es-toolkit's isEqual.
- *
- * @param props - The hook properties
- * @param props.value - The value to watch for changes
- * @param props.onChange - Function to call when the value changes
- * @param props.immediate - Whether to run the callback immediately on mount (default: false)
- * @param props.skip - Whether to skip watching for changes (default: false)
- */
-const useWatch = ({ value, onChange, immediate = false, skip = false }) => {
-    const prevValue = react.useRef(UNINITIALIZED);
-    const onChangeRef = react.useRef(onChange);
-    // Update the ref whenever onChange changes
-    react.useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    react.useEffect(() => {
-        if (skip) {
-            return;
-        }
-        const prev = prevValue.current;
-        const hasChanged = prev === UNINITIALIZED ? false : !esToolkit.isEqual(value, prev);
-        if (immediate && prev === UNINITIALIZED) {
-            onChangeRef.current(value, null);
-        }
-        else if (hasChanged && prev !== UNINITIALIZED) {
-            onChangeRef.current(value, prev);
-        }
-        prevValue.current = value;
-    }, [value, immediate, skip]);
-};
-
 const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect, useState, useCallback, createElement, forwardRef, Fragment, memo, useLayoutEffect, Children, isValidElement, cloneElement, createContext, useContext, useReducer } from 'react';
+import { useRef, useMemo, useEffect, useState, useCallback, createElement, forwardRef, Fragment, memo, useReducer, Children, isValidElement, cloneElement, createContext, useContext, useLayoutEffect } from 'react';
 import { objectKeys, uuidv4, objectEntries, objectValues, nonNullable, filterByMultiple } from '@trackunit/shared-utils';
 import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
@@ -2166,22 +2166,85 @@ const useDebounce = (value, { onBounce, delay = 500 } = {}) => {
     return debouncedValue;
 };
 
+const UNINITIALIZED = Symbol("UNINITIALIZED");
 /**
- * Differentiate between the first and subsequent renders.
+ * Hook to watch for changes in a value and react to them.
+ * Uses deep equality comparison via es-toolkit's isEqual.
  *
- * @returns {boolean} Returns true if it is the first render, false otherwise.
+ * @param props - The hook properties
+ * @param props.value - The value to watch for changes
+ * @param props.onChange - Function to call when the value changes
+ * @param props.immediate - Whether to run the callback immediately on mount (default: false)
+ * @param props.skip - Whether to skip watching for changes (default: false)
  */
-const useIsFirstRender = () => {
-    const [isFirstRender, setIsFirstRender] = useState(true);
-    useLayoutEffect(() => {
-        queueMicrotask(() => {
-            setIsFirstRender(false);
-        });
-    }, []);
-    return isFirstRender;
+const useWatch = ({ value, onChange, immediate = false, skip = false }) => {
+    const prevValue = useRef(UNINITIALIZED);
+    const onChangeRef = useRef(onChange);
+    // Update the ref whenever onChange changes
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        if (skip) {
+            return;
+        }
+        const prev = prevValue.current;
+        const hasChanged = prev === UNINITIALIZED ? false : !isEqual(value, prev);
+        if (immediate && prev === UNINITIALIZED) {
+            onChangeRef.current(value, null);
+        }
+        else if (hasChanged && prev !== UNINITIALIZED) {
+            onChangeRef.current(value, prev);
+        }
+        prevValue.current = value;
+    }, [value, immediate, skip]);
 };
 
 const SCROLL_DEBOUNCE_TIME = 50;
+const scrollStateReducer = (state, action) => {
+    switch (action.type) {
+        case "UPDATE_SCROLLABLE": {
+            if (state.isScrollable === action.payload) {
+                return state;
+            }
+            return { ...state, isScrollable: action.payload };
+        }
+        case "UPDATE_POSITION": {
+            if (state.isAtBeginning === action.payload.isAtBeginning &&
+                state.isAtEnd === action.payload.isAtEnd &&
+                state.scrollPosition.start === action.payload.scrollPosition.start &&
+                state.scrollPosition.end === action.payload.scrollPosition.end) {
+                return state;
+            }
+            return {
+                ...state,
+                isAtBeginning: action.payload.isAtBeginning,
+                isAtEnd: action.payload.isAtEnd,
+                scrollPosition: action.payload.scrollPosition,
+            };
+        }
+        case "UPDATE_ALL": {
+            if (state.isScrollable === action.payload.isScrollable &&
+                state.isAtBeginning === action.payload.isAtBeginning &&
+                state.isAtEnd === action.payload.isAtEnd &&
+                state.scrollPosition.start === action.payload.scrollPosition.start &&
+                state.scrollPosition.end === action.payload.scrollPosition.end) {
+                return state;
+            }
+            return action.payload;
+        }
+        default: {
+            const exhaustiveCheck = action;
+            throw new Error(`Unknown action: ${exhaustiveCheck}`);
+        }
+    }
+};
+const initialScrollState = {
+    isScrollable: false,
+    isAtBeginning: true,
+    isAtEnd: false,
+    scrollPosition: { start: 0, end: 0 },
+};
 /**
  * Hook for detecting scroll values in horizontal or vertical direction.
  * Returns a ref callback to attach to the element you want to observe.
@@ -2198,12 +2261,8 @@ const SCROLL_DEBOUNCE_TIME = 50;
 const useScrollDetection = (options) => {
     const { direction = "vertical", onScrollStateChange, skip = false } = options ?? {};
     const [element, setElement] = useState(null);
-    const [isScrollable, setIsScrollable] = useState(false);
-    const [isAtBeginning, setIsAtBeginning] = useState(true);
-    const [isAtEnd, setIsAtEnd] = useState(false);
-    const [scrollPosition, setScrollPosition] = useState({ start: 0, end: 0 });
+    const [scrollState, dispatch] = useReducer(scrollStateReducer, initialScrollState);
     const observerRef = useRef(null);
-    const isFirstRender = useIsFirstRender();
     // Callback ref to track the element
     const ref = useCallback((node) => {
         setElement(node);
@@ -2215,13 +2274,7 @@ const useScrollDetection = (options) => {
         const hasOverflow = direction === "horizontal"
             ? element.scrollWidth > element.clientWidth
             : element.scrollHeight > element.clientHeight;
-        setIsScrollable(prev => {
-            if (prev !== hasOverflow) {
-                // State will be updated, so we'll notify in the next effect
-                return hasOverflow;
-            }
-            return prev;
-        });
+        dispatch({ type: "UPDATE_SCROLLABLE", payload: hasOverflow });
     }, [element, direction]);
     const checkScrollPosition = useCallback(() => {
         if (!element) {
@@ -2229,21 +2282,23 @@ const useScrollDetection = (options) => {
         }
         if (direction === "horizontal") {
             const { scrollLeft, scrollWidth, clientWidth } = element;
-            const newIsAtBeginning = scrollLeft === 0;
-            const newIsAtEnd = Math.abs(scrollWidth - scrollLeft - clientWidth) <= 1;
-            const newScrollPosition = { start: scrollLeft, end: clientWidth - scrollLeft };
-            setIsAtBeginning(newIsAtBeginning);
-            setIsAtEnd(newIsAtEnd);
-            setScrollPosition(newScrollPosition);
+            const isAtBeginning = scrollLeft === 0;
+            const isAtEnd = Math.abs(scrollWidth - scrollLeft - clientWidth) <= 1;
+            const scrollPosition = { start: scrollLeft, end: clientWidth - scrollLeft };
+            dispatch({
+                type: "UPDATE_POSITION",
+                payload: { isAtBeginning, isAtEnd, scrollPosition },
+            });
         }
         else {
             const { scrollTop, scrollHeight, clientHeight } = element;
-            const newIsAtBeginning = scrollTop === 0;
-            const newIsAtEnd = Math.abs(scrollHeight - scrollTop - clientHeight) <= 1;
-            const newScrollPosition = { start: scrollTop, end: clientHeight - scrollTop };
-            setIsAtBeginning(newIsAtBeginning);
-            setIsAtEnd(newIsAtEnd);
-            setScrollPosition(newScrollPosition);
+            const isAtBeginning = scrollTop === 0;
+            const isAtEnd = Math.abs(scrollHeight - scrollTop - clientHeight) <= 1;
+            const scrollPosition = { start: scrollTop, end: clientHeight - scrollTop };
+            dispatch({
+                type: "UPDATE_POSITION",
+                payload: { isAtBeginning, isAtEnd, scrollPosition },
+            });
         }
     }, [element, direction]);
     const [scrollTrigger, setScrollTrigger] = useState(0);
@@ -2262,25 +2317,49 @@ const useScrollDetection = (options) => {
     useEffect(() => {
         checkScrollPositionRef.current = checkScrollPosition;
     }, [checkScrollPosition]);
-    // Notify about state changes whenever any state value changes
-    useEffect(() => {
-        if (isFirstRender) {
-            return;
-        }
-        onScrollStateChange?.({
-            isScrollable,
-            isAtBeginning,
-            isAtEnd,
-            scrollPosition,
-        });
-    }, [isScrollable, isAtBeginning, isAtEnd, scrollPosition, onScrollStateChange, isFirstRender]);
+    useWatch({
+        value: scrollState,
+        onChange: (changedState) => onScrollStateChange?.(changedState),
+        skip: skip || !onScrollStateChange,
+    });
     useEffect(() => {
         if (skip || !element) {
             return;
         }
-        // Initial checks
-        checkScrollableRef.current();
-        checkScrollPositionRef.current();
+        // Initial checks - batch into single update
+        const hasOverflow = direction === "horizontal"
+            ? element.scrollWidth > element.clientWidth
+            : element.scrollHeight > element.clientHeight;
+        if (direction === "horizontal") {
+            const { scrollLeft, scrollWidth, clientWidth } = element;
+            const isAtBeginning = scrollLeft === 0;
+            const isAtEnd = Math.abs(scrollWidth - scrollLeft - clientWidth) <= 1;
+            const scrollPosition = { start: scrollLeft, end: clientWidth - scrollLeft };
+            dispatch({
+                type: "UPDATE_ALL",
+                payload: {
+                    isScrollable: hasOverflow,
+                    isAtBeginning,
+                    isAtEnd,
+                    scrollPosition,
+                },
+            });
+        }
+        else {
+            const { scrollTop, scrollHeight, clientHeight } = element;
+            const isAtBeginning = scrollTop === 0;
+            const isAtEnd = Math.abs(scrollHeight - scrollTop - clientHeight) <= 1;
+            const scrollPosition = { start: scrollTop, end: clientHeight - scrollTop };
+            dispatch({
+                type: "UPDATE_ALL",
+                payload: {
+                    isScrollable: hasOverflow,
+                    isAtBeginning,
+                    isAtEnd,
+                    scrollPosition,
+                },
+            });
+        }
         observerRef.current = new ResizeObserver(() => {
             checkScrollableRef.current();
             checkScrollPositionRef.current();
@@ -2293,8 +2372,15 @@ const useScrollDetection = (options) => {
             }
             element.removeEventListener("scroll", handleScroll);
         };
-    }, [element, handleScroll, skip]);
-    return useMemo(() => ({ ref, element, isScrollable, isAtBeginning, isAtEnd, scrollPosition }), [ref, element, isScrollable, isAtBeginning, isAtEnd, scrollPosition]);
+    }, [element, handleScroll, skip, direction]);
+    return useMemo(() => ({
+        ref,
+        element,
+        isScrollable: scrollState.isScrollable,
+        isAtBeginning: scrollState.isAtBeginning,
+        isAtEnd: scrollState.isAtEnd,
+        scrollPosition: scrollState.scrollPosition,
+    }), [ref, element, scrollState]);
 };
 
 const cvaZStackContainer = cvaMerge(["grid", "grid-cols-1", "grid-rows-1"]);
@@ -5609,6 +5695,21 @@ const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debo
     }), [onMouseEnter, onMouseLeave, value]);
 };
 
+/**
+ * Differentiate between the first and subsequent renders.
+ *
+ * @returns {boolean} Returns true if it is the first render, false otherwise.
+ */
+const useIsFirstRender = () => {
+    const [isFirstRender, setIsFirstRender] = useState(true);
+    useLayoutEffect(() => {
+        queueMicrotask(() => {
+            setIsFirstRender(false);
+        });
+    }, []);
+    return isFirstRender;
+};
+
 /**
  * Custom hook for checking if the browser is in fullscreen mode.
  */
@@ -5926,40 +6027,6 @@ function useTextSearch(items, props) {
     return useMemo(() => [result, searchText, setSearchText], [result, searchText, setSearchText]);
 }
 
-const UNINITIALIZED = Symbol("UNINITIALIZED");
-/**
- * Hook to watch for changes in a value and react to them.
- * Uses deep equality comparison via es-toolkit's isEqual.
- *
- * @param props - The hook properties
- * @param props.value - The value to watch for changes
- * @param props.onChange - Function to call when the value changes
- * @param props.immediate - Whether to run the callback immediately on mount (default: false)
- * @param props.skip - Whether to skip watching for changes (default: false)
- */
-const useWatch = ({ value, onChange, immediate = false, skip = false }) => {
-    const prevValue = useRef(UNINITIALIZED);
-    const onChangeRef = useRef(onChange);
-    // Update the ref whenever onChange changes
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    useEffect(() => {
-        if (skip) {
-            return;
-        }
-        const prev = prevValue.current;
-        const hasChanged = prev === UNINITIALIZED ? false : !isEqual(value, prev);
-        if (immediate && prev === UNINITIALIZED) {
-            onChangeRef.current(value, null);
-        }
-        else if (hasChanged && prev !== UNINITIALIZED) {
-            onChangeRef.current(value, prev);
-        }
-        prevValue.current = value;
-    }, [value, immediate, skip]);
-};
-
 const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
 /**
  * Use this hook to disable functionality while the tab is hidden within the browser or to react to focus or blur events

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.10.94",
+  "version": "1.10.96",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.118",
-    "@trackunit/css-class-variance-utilities": "1.7.118",
-    "@trackunit/shared-utils": "1.9.118",
-    "@trackunit/ui-icons": "1.7.119",
+    "@trackunit/ui-design-tokens": "1.7.119",
+    "@trackunit/css-class-variance-utilities": "1.7.119",
+    "@trackunit/shared-utils": "1.9.119",
+    "@trackunit/ui-icons": "1.7.120",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",