@versini/ui-hooks 4.4.0 → 4.6.0

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,26 @@
+import { useRef as f, useEffect as d } from "react";
+const i = ["mousedown", "touchstart"];
+function E(r, e, o) {
+  const c = f(null);
+  return d(() => {
+    const s = (t) => {
+      const n = t ? t.target : void 0;
+      if (Array.isArray(o)) {
+        const a = !document.body.contains(n) && n.tagName !== "HTML";
+        o.every(
+          (u) => !!u && !t.composedPath().includes(u)
+        ) && !a && r();
+      } else c.current && !c.current.contains(n) && r();
+    };
+    return (e || i).forEach(
+      (t) => document.addEventListener(t, s)
+    ), () => {
+      (e || i).forEach(
+        (t) => document.removeEventListener(t, s)
+      );
+    };
+  }, [r, o, e]), c;
+}
+export {
+  E as useClickOutside
+};

package/dist/hooks/useInterval.js

@@ -0,0 +1,12 @@
+import { useState as i, useRef as o, useCallback as a, useEffect as v } from "react";
+function p(u, c) {
+  const [t, s] = i(!1), e = o(null), l = o(null), r = a(() => {
+    s((f) => (!f && (!e.current || e.current === -1) && (e.current = window.setInterval(l.current, c)), !0));
+  }, [c]), n = a(() => {
+    s(!1), window.clearInterval(e.current || -1), e.current = -1;
+  }, []);
+  return v(() => (l.current = u, t && r(), n), [u, t, r, n]), { start: r, stop: n, active: t };
+}
+export {
+  p as useInterval
+};

package/dist/hooks/useLocalStorage.js

@@ -1,4 +1,4 @@
-import { useSyncExternalStore as w, useCallback as a, useEffect as d } from "react";
+import { useSyncExternalStore as d, useCallback as a, useEffect as w } from "react";
 function S(t, e) {
   window.dispatchEvent(new StorageEvent("storage", { key: t, newValue: e }));
 }
@@ -14,7 +14,7 @@ function E({
   key: t,
   initialValue: e
 }) {
-  const s = w(m, () => l(t)), o = a(
+  const s = d(m, () => l(t)), o = a(
     (n) => {
       try {
         const r = typeof n == "function" ? n(JSON.parse(s)) : n;
@@ -29,7 +29,7 @@ function E({
   }, [e, o]), f = a(() => {
     o(null);
   }, [o]);
-  return d(() => {
+  return w(() => {
     try {
       l(t) === null && typeof e < "u" && g(t, e);
     } catch (n) {

package/dist/hooks/useUncontrolled.js

@@ -1,22 +1,22 @@
-import { useState as f, useEffect as U } from "react";
+import { useState as u, useEffect as U } from "react";
 function w({
-  value: e,
-  defaultValue: o,
-  finalValue: u,
-  onChange: t = () => {
+  value: t,
+  defaultValue: n,
+  finalValue: c,
+  onChange: e = () => {
   },
   initialControlledDelay: r = 0
 }) {
-  const [c, i] = f(!1), [n, d] = f(
-    o !== void 0 ? o : u
+  const [f, i] = u(!1), [d, o] = u(
+    n !== void 0 ? n : c
   ), m = (s) => {
-    d(s), t == null || t(s);
+    o(s), e == null || e(s);
   };
   return U(() => {
-    (async () => e !== void 0 && !c && r > 0 && (await new Promise(
+    (async () => t !== void 0 && !f && r > 0 && (await new Promise(
       (s) => setTimeout(s, r)
     ), i(!0)))();
-  }, [e, r, c]), e !== void 0 ? !c && r > 0 ? ["", t, !0] : [e, t, !0] : [n, m, !1];
+  }, [t, r, f]), t !== void 0 ? !f && r > 0 ? ["", e, !0] : [t, e, !0] : [d, m, !1];
 }
 export {
   w as useUncontrolled

package/dist/hooks/useViewportSize.js

@@ -0,0 +1,21 @@
+import { useState as w, useCallback as r, useEffect as o } from "react";
+function t(e, i) {
+  o(() => (window.addEventListener(e, i, {
+    passive: !0
+  }), () => window.removeEventListener(e, i)), [e, i]);
+}
+function s() {
+  const [e, i] = w({
+    width: 0,
+    height: 0
+  }), n = r(() => {
+    i({
+      width: window.innerWidth || 0,
+      height: window.innerHeight || 0
+    });
+  }, []);
+  return t("resize", n), t("orientationchange", n), o(n, []), e;
+}
+export {
+  s as useViewportSize
+};

package/dist/index.d.ts

@@ -1,5 +1,23 @@
 import * as react from 'react';
 
+/**
+ * Custom hooks that triggers a callback when a click is detected
+ * outside the target element.
+ *
+ * @param handler - Function to be called when clicked outside
+ * @param events - Array of events to listen to
+ * @param nodes - Array of nodes to check against
+ * @returns Ref to be attached to the target element
+ *
+ * @example
+ * const ref = useClickOutside(() => {
+ *  console.log('Clicked outside!');
+ * });
+ * <div ref={ref}>Click me!</div>
+ *
+ */
+declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: (HTMLElement | null)[]): react.RefObject<T | null>;
+
 interface HotkeyItemOptions {
     preventDefault?: boolean;
 }
@@ -14,6 +32,28 @@ type HotkeyItem = [
 declare function shouldFireEvent(event: KeyboardEvent, tagsToIgnore: string[], triggerOnContentEditable?: boolean): boolean;
 declare function useHotkeys(hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean): void;
 
+/**
+ * Custom hook to call a function within a given interval.
+ *
+ * @param fn Callback function to be executed at each interval
+ * @param interval  Interval time in milliseconds
+ * @returns An object containing start, stop, and active state
+ *
+ * @example
+ * const { start, stop, active } = useInterval(() => {
+ *  console.log("Interval executed");
+ * }, 1000);
+ * start(); // To start the interval
+ * stop(); // To stop the interval
+ * console.log(active); // To check if the interval is active
+ *
+ */
+declare function useInterval(fn: () => void, interval: number): {
+    start: () => void;
+    stop: () => void;
+    active: boolean;
+};
+
 /**
  * Hook that checks if an element is visible in the viewport.
  * @returns
@@ -154,4 +194,4 @@ type UseUniqueIdOptions = string | number | {
 };
 declare function useUniqueId(options?: UseUniqueIdOptions): string | undefined;
 
-export { type HotkeyItem, type HotkeyItemOptions, type StorageProperties, type UseUniqueIdOptions, getHotkeyHandler, shouldFireEvent, useHotkeys, useInViewport, useIsMounted, useLocalStorage, useMergeRefs, useResizeObserver, useUncontrolled, useUniqueId };
+export { type HotkeyItem, type HotkeyItemOptions, type StorageProperties, type UseUniqueIdOptions, getHotkeyHandler, shouldFireEvent, useClickOutside, useHotkeys, useInViewport, useInterval, useIsMounted, useLocalStorage, useMergeRefs, useResizeObserver, useUncontrolled, useUniqueId };

package/dist/index.js

@@ -1,24 +1,28 @@
-import { getHotkeyHandler as r, shouldFireEvent as t, useHotkeys as s } from "./hooks/useHotkeys.js";
-import { useInViewport as f } from "./hooks/useInViewport.js";
-import { useIsMounted as m } from "./hooks/useIsMounted.js";
-import { useLocalStorage as n } from "./hooks/useLocalStorage.js";
-import { useMergeRefs as l } from "./hooks/useMergeRefs.js";
-import { useResizeObserver as a } from "./hooks/useResizeObserver.js";
+import { useClickOutside as r } from "./hooks/useClickOutside.js";
+import { getHotkeyHandler as s, shouldFireEvent as u, useHotkeys as f } from "./hooks/useHotkeys.js";
+import { useInterval as m } from "./hooks/useInterval.js";
+import { useInViewport as n } from "./hooks/useInViewport.js";
+import { useIsMounted as d } from "./hooks/useIsMounted.js";
+import { useLocalStorage as a } from "./hooks/useLocalStorage.js";
+import { useMergeRefs as c } from "./hooks/useMergeRefs.js";
+import { useResizeObserver as k } from "./hooks/useResizeObserver.js";
 import { useUncontrolled as H } from "./hooks/useUncontrolled.js";
-import { useUniqueId as c } from "./hooks/useUniqueId.js";
+import { useUniqueId as M } from "./hooks/useUniqueId.js";
 /*!
-  @versini/ui-hooks v4.4.0
+  @versini/ui-hooks v4.6.0
   © 2025 gizmette.com
 */
 export {
-  r as getHotkeyHandler,
-  t as shouldFireEvent,
-  s as useHotkeys,
-  f as useInViewport,
-  m as useIsMounted,
-  n as useLocalStorage,
-  l as useMergeRefs,
-  a as useResizeObserver,
+  s as getHotkeyHandler,
+  u as shouldFireEvent,
+  r as useClickOutside,
+  f as useHotkeys,
+  n as useInViewport,
+  m as useInterval,
+  d as useIsMounted,
+  a as useLocalStorage,
+  c as useMergeRefs,
+  k as useResizeObserver,
   H as useUncontrolled,
-  c as useUniqueId
+  M as useUniqueId
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-hooks",
-	"version": "4.4.0",
+	"version": "4.6.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -37,5 +37,5 @@
 		"react": "^18.3.1 || ^19.0.0",
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
-	"gitHead": "bc91b8aaa11a672d219b6f32da04f001f33e38d7"
+	"gitHead": "1199c5a06253a95c103981005f5a1131c841bb00"
 }