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

package/dist/cjs/hooks/useContextMenu.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * A hook that provides a context menu that appears on right-click.
+ * It uses the Floating UI library to manage the positioning and interactions of the menu.
+ * This hook is useful for creating custom context menus that can be triggered by right-clicking on elements.
+ *
+ * @param {ContextMenuProps} props - The properties for the ContextMenu hook.
+ * @returns {[React.ReactElement | null, (e: MouseEvent) => void]} An array containing the rendered ContextMenu component (or null if not open) and the function to handle right-click events.
+ */
+function useContextMenu(menu) {
+  var _refs$domReference$cu, _refs$domReference$cu2;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var nodeId = react$1.useFloatingNodeId();
+  var _useFloating = react$1.useFloating({
+      open: isOpen,
+      nodeId: nodeId,
+      onOpenChange: function onOpenChange(open, evt) {
+        var target = evt === null || evt === void 0 ? void 0 : evt.target;
+        if (!(target !== null && target !== void 0 && target.closest(".menu-list"))) setIsOpen(open);
+      },
+      strategy: "fixed",
+      placement: "bottom-start",
+      whileElementsMounted: react$1.autoUpdate,
+      middleware: [react$1.offset(8), react$1.flip()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var click = react$1.useClick(context, {
+    toggle: true,
+    ignoreMouse: true
+  });
+  var dismiss = react$1.useDismiss(context, {
+    bubbles: true
+  });
+  var _useInteractions = react$1.useInteractions([dismiss, click]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var handleClick = function handleClick(e) {
+    var virtual = {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: e.clientX,
+          y: e.clientY,
+          top: e.clientY,
+          left: e.clientX,
+          right: e.clientX,
+          bottom: e.clientY
+        };
+      }
+    };
+    refs.setReference(virtual);
+    setIsOpen(true);
+    e.nativeEvent.stopImmediatePropagation();
+    e.preventDefault();
+    return false;
+  };
+  var tryClosingRef = react.useRef(function (e) {
+    var _e$target;
+    if (!((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest("[data-dropdown-dismiss='false']"))) setTimeout(function () {
+      return setIsOpen(false);
+    }, 50);
+  });
+  return [isOpen && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+    root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined,
+    children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingOverlay, {
+      lockScroll: true,
+      style: {
+        zIndex: "var(--z-overlay-mask)",
+        position: "absolute",
+        overflow: "hidden"
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+        context: context,
+        children: /*#__PURE__*/react.cloneElement(menu, _objectSpread(_objectSpread({}, getFloatingProps()), {}, {
+          style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+            borderRadius: "var(--rounding)",
+            zIndex: "var(--z-popover)",
+            fontSize: "0.875rem"
+          }),
+          className: "bg-default outline rounded-capped shadow-lg",
+          ref: refs.floating,
+          onMouseUp: tryClosingRef.current
+        }))
+      })
+    })
+  }, "cmenu"), handleClick];
+}
+
+exports.useContextMenu = useContextMenu;

package/dist/cjs/hooks/useControlledValue.js

@@ -4,19 +4,25 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var useEffectDebugger = require('./useEffectDebugger.js');
 
-var useControlledValue = function useControlledValue(value, defaultValue) {
-  var _useState = react.useState(defaultValue),
+/** Hook managing a controlled value with a default fallback, using useDeferredValue for smooth updates. Returns [currentValue, updateValue]. */
+function useControlledValue(value, defaultValue) {
+  var _useState = react.useState(function () {
+      return defaultValue;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
-    updateValue = _useState2[1];
-  var deferred = react.useDeferredValue(value);
+    setCurrentValue = _useState2[1];
+  var deferred = react.useDeferredValue(value, defaultValue);
+  var effectUpdate = react.useEffectEvent(function (value) {
+    setCurrentValue(value);
+  });
   useEffectDebugger.useEffectDebugger(function () {
-    updateValue(deferred !== null && deferred !== void 0 ? deferred : defaultValue);
+    effectUpdate(deferred);
   }, [deferred], "useControlledValue change");
   return {
     currentValue: currentValue,
-    updateValue: updateValue
+    updateValue: setCurrentValue
   };
-};
+}
 
 exports.useControlledValue = useControlledValue;

package/dist/cjs/hooks/useDebounce.js

@@ -2,32 +2,47 @@
 
 var react = require('react');
 
-/*
+/**
  * 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.
  */
 
-var useDebounce = function useDebounce(callback, deps) {
+
+/**
+ * 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.
+ */
+function useDebounce(callback, deps) {
   var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
-  var timerRef = react.useRef();
+  var timerRef = react.useRef(undefined);
   var cb = react.useMemo(function () {
     if (typeof window !== "undefined") {
       window.clearTimeout(timerRef.current);
@@ -39,7 +54,7 @@ var useDebounce = function useDebounce(callback, deps) {
       if (typeof window !== "undefined") {
         window.clearTimeout(timerRef.current);
         timerRef.current = window.setTimeout(function () {
-          return callback === null || callback === void 0 ? void 0 : callback.apply(void 0, args);
+          callback === null || callback === void 0 || callback.apply(void 0, args);
         }, delay);
       }
     };
@@ -49,8 +64,9 @@ var useDebounce = function useDebounce(callback, deps) {
       }
     };
     return fn;
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, deps);
   return cb;
-};
+}
 
 exports.useDebounce = useDebounce;

package/dist/cjs/hooks/useEffectDebugger.js

@@ -1,38 +1,27 @@
 'use strict';
 
+var _typeof = require('@babel/runtime/helpers/typeof');
 var utilities = require('@react-fabric/utilities');
 var react = require('react');
 
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 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.
- */
-
-var loggerM = utilities.useLogger("useMemoDebugger");
-var loggerE = utilities.useLogger("useEffectDebugger");
-var loggerLE = utilities.useLogger("useLayoutEffectDebugger");
+var loggerM = utilities.getLogger("useMemoDebugger");
+var loggerE = utilities.getLogger("useEffectDebugger");
+var loggerLE = utilities.getLogger("useLayoutEffectDebugger");
+var getValue = function getValue(value) {
+  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;
+};
 var compareInputs = function compareInputs(oldInputs, newInputs, prefix, logger) {
-  if (process.env.NODE_ENV === "production" && typeof window !== "undefined" &&
+  if (typeof window !== "undefined" &&
   // @ts-expect-error ignore
-  window.DEBUG_HOOKS !== true) return;
+  window.DEBUG_EFFECTS !== true) return;
 
   // Edge-case: different array lengths
   if (oldInputs.length !== newInputs.length) {
@@ -48,65 +37,95 @@ var compareInputs = function compareInputs(oldInputs, newInputs, prefix, logger)
     var newInput = newInputs[index];
     var diff = [];
     if (oldInput !== newInput) {
-      var _ref, _ref2, _ref3, _oldInput$type$name, _oldInput$type, _oldInput$substr, _ref4, _ref5, _ref6, _newInput$type$name, _newInput$type, _newInput$substr;
-      diff.push("Dep [".concat(index, "] has a different value"), (_ref = (_ref2 = (_ref3 = (_oldInput$type$name = oldInput === null || oldInput === void 0 || (_oldInput$type = oldInput.type) === null || _oldInput$type === void 0 ? void 0 : _oldInput$type.name) !== null && _oldInput$type$name !== void 0 ? _oldInput$type$name : oldInput === null || oldInput === void 0 ? void 0 : oldInput.tagName) !== null && _ref3 !== void 0 ? _ref3 : oldInput === null || oldInput === void 0 ? void 0 : oldInput.name) !== null && _ref2 !== void 0 ? _ref2 : oldInput === null || oldInput === void 0 || (_oldInput$substr = oldInput.substr) === null || _oldInput$substr === void 0 ? void 0 : _oldInput$substr.call(oldInput, 0, 24)) !== null && _ref !== void 0 ? _ref : oldInput, (_ref4 = (_ref5 = (_ref6 = (_newInput$type$name = newInput === null || newInput === void 0 || (_newInput$type = newInput.type) === null || _newInput$type === void 0 ? void 0 : _newInput$type.name) !== null && _newInput$type$name !== void 0 ? _newInput$type$name : newInput === null || newInput === void 0 ? void 0 : newInput.tagName) !== null && _ref6 !== void 0 ? _ref6 : newInput === null || newInput === void 0 ? void 0 : newInput.name) !== null && _ref5 !== void 0 ? _ref5 : newInput === null || newInput === void 0 || (_newInput$substr = newInput.substr) === null || _newInput$substr === void 0 ? void 0 : _newInput$substr.call(newInput, 0, 24)) !== null && _ref4 !== void 0 ? _ref4 : newInput, "\n\n");
+      diff.push("Dep [".concat(index, "] has a different value"), getValue(oldInput), "=>", getValue(newInput), "\n\n");
     }
-    diff.length && logger.debug.apply(logger, ["Diff", {
+    if (diff.length) logger.debug.apply(logger, ["Diff", {
       process: prefix
     }].concat(diff));
   });
 };
-var useMemoDebugger = function useMemoDebugger(func, inputs, prefix) {
-  // 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");
+ * ```
+ */
+function useMemoDebugger(func, inputs, prefix) {
+  // Ref holding inputs from the previous render (or current on first run)
   var oldInputsRef = react.useRef(inputs);
   return react.useMemo(function () {
-    // Get the old inputs
     var 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);
-};
-var useEffectDebugger = function useEffectDebugger(func, inputs, prefix) {
-  // 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");
+ * ```
+ */
+function useEffectDebugger(func, inputs, prefix) {
+  // Ref holding inputs from the previous render (or current on first run)
   var oldInputsRef = react.useRef(inputs);
   react.useEffect(function () {
-    // Get the old inputs
     var 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);
-};
-var useLayoutEffectDebugger = function useLayoutEffectDebugger(func, inputs, prefix) {
+}
+
+/**
+ * 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
+ *   };
+ * ```
+ */
+function useLayoutEffectDebugger(func, inputs, prefix) {
   // Using a ref to hold the inputs from the previous run (or same run for initial run
   var oldInputsRef = react.useRef(inputs);
   react.useLayoutEffect(function () {
-    // Get the old inputs
     var 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);
-};
+}
 
 exports.useEffectDebugger = useEffectDebugger;
 exports.useLayoutEffectDebugger = useLayoutEffectDebugger;

package/dist/cjs/hooks/useIsDark.js

@@ -1,33 +1,41 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var react = require('react');
-var useEffectDebugger = require('./useEffectDebugger.js');
+var context = require('../context/context.js');
 
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 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.
+ */
+
+
+/**
+ * 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.
+ */
 var useIsDark = function useIsDark() {
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isDark = _useState2[0],
-    setDark = _useState2[1];
-  var checkTheme = react.useCallback(function () {
-    var _ref = getComputedStyle(document.documentElement).backgroundColor.match(/\d?\d?\d/g),
-      _ref2 = _slicedToArray(_ref, 1),
-      r = _ref2[0];
-    setDark(+r < 50);
-  }, []);
-  useEffectDebugger.useLayoutEffectDebugger(function () {
-    if (MutationObserver) {
-      var ob = new MutationObserver(checkTheme);
-      ob.observe(document.documentElement, {
-        attributes: true
-      });
-      checkTheme();
-      return function () {
-        ob.disconnect();
-      };
-    }
-  }, [], "useIsDark");
-  return isDark;
+  var _useGlobals = context.useGlobals(),
+    currentColorScheme = _useGlobals.currentColorScheme;
+  return currentColorScheme === "dark";
 };
 
 exports.useIsDark = useIsDark;

package/dist/cjs/hooks/useIsRtl.js

@@ -5,8 +5,18 @@ var react = require('react');
 var reactI18next = require('react-i18next');
 var useEffectDebugger = require('./useEffectDebugger.js');
 
-var useIsRtl = function useIsRtl() {
-  var _useTranslation = reactI18next.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.
+ * ```
+ */
+function useIsRtl() {
+  var _useTranslation = reactI18next.useTranslation(),
     i18n = _useTranslation.i18n;
   var _useState = react.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -22,6 +32,6 @@ var useIsRtl = function useIsRtl() {
     }
   }, [i18n.language], "useIsRtl");
   return isRtl;
-};
+}
 
 exports.useIsRtl = useIsRtl;

package/dist/cjs/hooks/useNavigator.js

@@ -11,17 +11,20 @@ var useNavigator = function useNavigator() {
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
     setCurrentIndex = _useState2[1];
-  var onNavigate = react.useCallback(function (dir) {
-    if (dir === -1) {
-      setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : totalCount - 1);
-    }
-    if (dir === 1) {
-      setCurrentIndex(currentIndex + 1 < totalCount ? currentIndex + 1 : 0);
-    }
-  }, [currentIndex, totalCount]);
+  var onNavigate = function onNavigate(dir) {
+    setCurrentIndex(function (prevValue) {
+      if (dir === -1) {
+        return prevValue > 0 ? prevValue - 1 : totalCount - 1;
+      }
+      if (dir === 1) {
+        return prevValue + 1 < totalCount ? prevValue + 1 : 0;
+      }
+      return prevValue;
+    });
+  };
   var headLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: "text-muted leading-none",
+      className: "text-muted leading-none select-none",
       children: [currentIndex + 1, "/", totalCount]
     });
   }, [currentIndex, totalCount]);