@react-fabric/core 1.0.0-beta.9 → 1.0.1

package/src/hooks/useControlledValue.ts

@@ -0,0 +1,47 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useDeferredValue, useEffectEvent, useState } from "react";
+import { useEffectDebugger } from "./useEffectDebugger";
+
+/** Hook managing a controlled value with a default fallback, using useDeferredValue for smooth updates. Returns [currentValue, updateValue]. */
+export function useControlledValue<T extends AnyObject = string>(value: T | undefined, defaultValue: T | undefined) {
+  const [currentValue, setCurrentValue] = useState<T | undefined>(() => defaultValue);
+  const deferred = useDeferredValue(value, defaultValue);
+
+  const effectUpdate = useEffectEvent((value: T | undefined) => {
+    setCurrentValue(value);
+  });
+
+  useEffectDebugger(
+    () => {
+      effectUpdate(deferred);
+    },
+    [deferred],
+    "useControlledValue change",
+  );
+
+  return { currentValue, updateValue: setCurrentValue };
+}

package/src/hooks/useDebounce.ts

@@ -1,43 +1,59 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
 import { useMemo, useRef } from "react";
 
-export const useDebounce = (
+/**
+ * Custom hook to debounce a function.
+ * This hook delays the processing of the function until after a specified delay period
+ * has elapsed since the last time the function was invoked. This is useful for optimizing
+ * performance in scenarios where a function may be called frequently, such as during
+ * user input or window resizing events.
+ *
+ * @param {Function} callback - The function to debounce.
+ * @param {DependencyList} deps - The dependency array for the hook.
+ * @param {number} delay - The debounce delay in milliseconds.
+ * @returns A debounced version of the callback function.
+ */
+export function useDebounce(
   callback: undefined | ((...rest: AnyObject) => AnyObject),
-  deps: AnyObject[],
+  deps: React.DependencyList,
   delay: number = 100,
-) => {
-  const timerRef = useRef<AnyObject>();
+) {
+  const timerRef = useRef<number>(undefined);
 
   const cb = useMemo(() => {
     if (typeof window !== "undefined") {
       window.clearTimeout(timerRef.current);
     }
-    const fn = (...args: AnyObject) => {
+    const fn = (...args: unknown[]) => {
       if (typeof window !== "undefined") {
         window.clearTimeout(timerRef.current);
-        timerRef.current = window.setTimeout(() => callback?.(...args), delay);
+        timerRef.current = window.setTimeout(() => {
+          callback?.(...args);
+        }, delay);
       }
     };
     fn.cancel = () => {
@@ -46,7 +62,8 @@ export const useDebounce = (
       }
     };
     return fn;
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, deps);
 
   return cb;
-};
+}

package/src/hooks/useEffectDebugger.ts

@@ -1,154 +1,165 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
 /* istanbul ignore file */
 
-import { useLogger } from "@react-fabric/utilities";
-import {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  type DependencyList,
-  type EffectCallback,
-} from "react";
-
-const loggerM = useLogger("useMemoDebugger");
-const loggerE = useLogger("useEffectDebugger");
-const loggerLE = useLogger("useLayoutEffectDebugger");
+import { getLogger } from "@react-fabric/utilities";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+
+const loggerM = getLogger("useMemoDebugger");
+const loggerE = getLogger("useEffectDebugger");
+const loggerLE = getLogger("useLayoutEffectDebugger");
+
+const getValue = (value: unknown) => {
+  if (typeof value === "string") return value.substr(0, 24);
+  if (typeof value === "number" || typeof value === "boolean") return value;
+  if (typeof value === "function") return "anonymous function";
+  if (typeof value === "object" && value !== null) {
+    if ("type" in value && typeof value.type === "object" && value.type && "name" in value.type && value.type.name)
+      return value.type.name;
+    if ("tagName" in value) return value.tagName;
+    if ("name" in value) return value.name;
+  }
+  return value;
+};
 
 const compareInputs = (
-  oldInputs: DependencyList,
-  newInputs: DependencyList,
+  oldInputs: React.DependencyList,
+  newInputs: React.DependencyList,
   prefix: string,
-  logger: ReturnType<typeof useLogger>,
+  logger: ReturnType<typeof getLogger>,
 ) => {
   if (
-    process.env.NODE_ENV === "production" &&
     typeof window !== "undefined" &&
     // @ts-expect-error ignore
-    window.DEBUG_HOOKS !== true
+    window.DEBUG_EFFECTS !== true
   )
     return;
 
   // Edge-case: different array lengths
   if (oldInputs.length !== newInputs.length) {
     // Not helpful to compare item by item, so just output the whole array
-    logger.debug(
-      "Deps have a different length",
-      { process: prefix },
-      oldInputs.length,
-      newInputs.length,
-    );
+    logger.debug("Deps have a different length", { process: prefix }, oldInputs.length, newInputs.length);
     return;
   }
 
   // Compare individual items
   oldInputs.forEach((oldInput: AnyObject, index) => {
     const newInput: AnyObject = newInputs[index];
-    const diff = [];
+    const diff: unknown[] = [];
     if (oldInput !== newInput) {
-      diff.push(
-        `Dep [${index}] has a different value`,
-        oldInput?.type?.name ??
-          oldInput?.tagName ??
-          oldInput?.name ??
-          oldInput?.substr?.(0, 24) ??
-          oldInput,
-        newInput?.type?.name ??
-          newInput?.tagName ??
-          newInput?.name ??
-          newInput?.substr?.(0, 24) ??
-          newInput,
-        "\n\n",
-      );
+      diff.push(`Dep [${index}] has a different value`, getValue(oldInput), "=>", getValue(newInput), "\n\n");
     }
-    diff.length && logger.debug("Diff", { process: prefix }, ...diff);
+    if (diff.length) logger.debug("Diff", { process: prefix }, ...diff);
   });
 };
 
-export const useMemoDebugger = <T>(
-  func: () => T,
-  inputs: DependencyList,
-  prefix: string,
-): T => {
-  // Using a ref to hold the inputs from the previous run (or same run for initial run
+/**
+ * Custom hook to debug useMemo hooks.
+ * It compares the current and previous dependency arrays and logs any differences.
+ * @param {() => T} func - The function to be memoized or executed in the effect.
+ * @param {DependencyList} inputs - The dependency array for the hook.
+ * @param {string} prefix - A prefix for the log messages to identify the hook.
+ * @returns The result of the memoized function or the effect.
+ *
+ * @example
+ * ```jsx
+ * const value = useMemoDebugger(() => computeValue(), [dependency1, dependency2], "MyComponent");
+ * ```
+ */
+export function useMemoDebugger<T>(func: () => T, inputs: React.DependencyList, prefix: string): T {
+  // Ref holding inputs from the previous render (or current on first run)
   const oldInputsRef = useRef(inputs);
   return useMemo<T>(() => {
-    // Get the old inputs
     const oldInputs = oldInputsRef.current;
-
-    // Compare the old inputs to the current inputs
     compareInputs(oldInputs, inputs, prefix, loggerM);
-
-    // Save the current inputs
     oldInputsRef.current = inputs;
-
-    // Execute wrapped effect
     return func();
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, inputs);
-};
-
-export const useEffectDebugger = (
-  func: EffectCallback,
-  inputs: DependencyList,
-  prefix: string,
-) => {
-  // Using a ref to hold the inputs from the previous run (or same run for initial run
+}
+
+/**
+ * Custom hook to debug useEffect and useLayoutEffect hooks.
+ * It compares the current and previous dependency arrays and logs any differences.
+ * @param {EffectCallback} func - The effect function to be executed.
+ * @param {DependencyList} inputs - The dependency array for the effect.
+ * @param {string} prefix - A prefix for the log messages to identify the effect.
+ * @returns A cleanup function if the effect returns one.
+ *
+ * @example
+ * ```jsx
+ * useEffectDebugger(() => {
+ *   // Effect logic here
+ *   return () => {
+ *     // Cleanup logic here
+ *   };
+ * }, [dependency1, dependency2], "MyComponent");
+ * ```
+ */
+export function useEffectDebugger(func: React.EffectCallback, inputs: React.DependencyList, prefix: string) {
+  // Ref holding inputs from the previous render (or current on first run)
   const oldInputsRef = useRef(inputs);
   useEffect(() => {
-    // Get the old inputs
     const oldInputs = oldInputsRef.current;
 
-    // Compare the old inputs to the current inputs
     compareInputs(oldInputs, inputs, prefix, loggerE);
 
-    // Save the current inputs
     oldInputsRef.current = inputs;
 
-    // Execute wrapped effect
     return func();
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, inputs);
-};
-
-export const useLayoutEffectDebugger = (
-  func: EffectCallback,
-  inputs: DependencyList,
-  prefix: string,
-) => {
+}
+
+/**
+ * Custom hook to debug useLayoutEffect hooks.
+ * It compares the current and previous dependency arrays and logs any differences.
+ * @param {EffectCallback} func - The layout effect function to be executed.
+ * @param {DependencyList} inputs - The dependency array for the layout effect.
+ * @param {string} prefix - A prefix for the log messages to identify the layout effect.
+ * @returns A cleanup function if the layout effect returns one.
+ *
+ * @example
+ * ```jsx
+ *   // Layout effect logic here
+ *     // Cleanup logic here
+ *   };
+ * ```
+ */
+export function useLayoutEffectDebugger(func: React.EffectCallback, inputs: React.DependencyList, prefix: string) {
   // Using a ref to hold the inputs from the previous run (or same run for initial run
   const oldInputsRef = useRef(inputs);
   useLayoutEffect(() => {
-    // Get the old inputs
     const oldInputs = oldInputsRef.current;
 
-    // Compare the old inputs to the current inputs
     compareInputs(oldInputs, inputs, prefix, loggerLE);
 
-    // Save the current inputs
     oldInputsRef.current = inputs;
 
-    // Execute wrapped effect
     return func();
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, inputs);
-};
+}

package/src/hooks/useIsDark.ts

@@ -21,30 +21,16 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useState } from "react";
-import { useLayoutEffectDebugger } from "./useEffectDebugger";
+import { useGlobals } from "../context/context";
 
+/**
+ * Custom hook to determine if the current theme is dark.
+ * It checks the background color of the document's root element
+ * and sets the `isDark` state based on the red component of the RGB color.
+ * If the red component is less than 50, it considers the theme to be dark.
+ */
 export const useIsDark = () => {
-  const [isDark, setDark] = useState(false);
-  const checkTheme = useCallback(() => {
-    const [r] = getComputedStyle(
-      document.documentElement,
-    ).backgroundColor.match(/\d?\d?\d/g) as AnyObject;
-    setDark(+r < 50);
-  }, []);
-  useLayoutEffectDebugger(
-    () => {
-      if (MutationObserver) {
-        const ob = new MutationObserver(checkTheme);
-        ob.observe(document.documentElement, { attributes: true });
-        checkTheme();
-        return () => {
-          ob.disconnect();
-        };
-      }
-    },
-    [],
-    "useIsDark",
-  );
-  return isDark;
+  const { currentColorScheme } = useGlobals();
+
+  return currentColorScheme === "dark";
 };

package/src/hooks/useIsRtl.ts

@@ -1,32 +1,44 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLayoutEffectDebugger } from "./useEffectDebugger";
 
-export const useIsRtl = () => {
-  const { i18n } = useTranslation("core");
+/**
+ * Custom hook to determine if the current locale is RTL (Right-to-Left).
+ * It uses the i18n instance from react-i18next to check the direction.
+ *
+ * @example
+ * ```jsx
+ * const isRtl = useIsRtl();
+ * // This will return true if the current locale is RTL, false otherwise.
+ * ```
+ */
+export function useIsRtl() {
+  const { i18n } = useTranslation();
   const [isRtl, setIsRtl] = useState(false);
 
   /** ***************** update RTL flag on i18n locale change *******************/
@@ -43,4 +55,4 @@ export const useIsRtl = () => {
   );
 
   return isRtl;
-};
+}

package/src/hooks/useNavigator.tsx

@@ -1,44 +1,59 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
+/**
+ * Custom hook to manage navigation through a list of items.
+ * It provides functionality to navigate forward and backward,
+ *
+ * @example
+ * ```jsx
+ * const { headLabel, onNavigate, currentIndex, setCurrentIndex } = useNavigator(5, 0);
+ * // headLabel will show "1/5"
+ * // onNavigate(1) will move to the next item, and onNavigate(-1) will move to the previous item.
+ * // currentIndex will be updated accordingly.
+ * ```
+ */
 export const useNavigator = (totalCount = 0, defaultIndex = 0) => {
   const [currentIndex, setCurrentIndex] = useState(defaultIndex);
-  const onNavigate = useCallback(
-    (dir: 1 | -1) => {
+
+  const onNavigate = (dir: 1 | -1) => {
+    setCurrentIndex((prevValue) => {
       if (dir === -1) {
-        setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : totalCount - 1);
+        return prevValue > 0 ? prevValue - 1 : totalCount - 1;
       }
       if (dir === 1) {
-        setCurrentIndex(currentIndex + 1 < totalCount ? currentIndex + 1 : 0);
+        return prevValue + 1 < totalCount ? prevValue + 1 : 0;
       }
-    },
-    [currentIndex, totalCount],
-  );
+      return prevValue;
+    });
+  };
   const headLabel = useMemo(
     () => (
-      <span className="text-muted leading-none">
+      <span className="text-muted leading-none select-none">
         {currentIndex + 1}/{totalCount}
       </span>
     ),