@siberiacancode/reactuse 0.3.6 → 0.3.8

package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs

@@ -2,15 +2,15 @@ import { useState as p, useRef as m, useEffect as y } from "react";
 import { useRefState as D } from "../useRefState/useRefState.mjs";
 import { isTarget as f } from "../../utils/helpers/isTarget.mjs";
 const M = ((...n) => {
-  const i = typeof navigator < "u" && "mediaDevices" in navigator && !!navigator.mediaDevices && "getDisplayMedia" in navigator.mediaDevices, t = f(n[0]) ? n[0] : void 0, o = n[1] ? n[1] : n[0], g = o?.immediately ?? !1, [d, l] = p(!1), s = m(null), r = m(null), a = D(), c = () => {
-    !r.current || !i || !s.current || (l(!1), s.current.srcObject = null, r.current.getTracks().forEach((e) => e.stop()), r.current = null);
+  const i = typeof navigator < "u" && "mediaDevices" in navigator && !!navigator.mediaDevices && "getDisplayMedia" in navigator.mediaDevices, t = f(n[0]) ? n[0] : void 0, o = n[1] ? n[1] : n[0], g = o?.immediately ?? !1, [l, d] = p(!1), s = m(null), r = m(null), a = D(), c = () => {
+    !r.current || !i || !s.current || (d(!1), s.current.srcObject = null, r.current.getTracks().forEach((e) => e.stop()), r.current = null);
   }, u = async () => {
     if (!i || !s.current) return;
     const e = await navigator.mediaDevices.getDisplayMedia({
       video: o?.video,
       audio: o?.audio
     });
-    return l(!0), r.current = e, s.current.srcObject = e, e.getTracks().forEach((v) => v.onended = c), e;
+    return d(!0), r.current = e, s.current.srcObject = e, e.getTracks().forEach((v) => v.onended = c), e;
   };
   return y(() => {
     if (!i || !t && !a.state) return;
@@ -19,15 +19,15 @@ const M = ((...n) => {
       return u(), () => {
         c();
       };
-  }, [t, a.state, f.getRefState(t)]), t ? {
+  }, [t && f.getRawElement(t), a.state]), t ? {
     stream: r.current,
-    sharing: d,
+    sharing: l,
     supported: i,
     start: u,
     stop: c
   } : {
     stream: r.current,
-    sharing: d,
+    sharing: l,
     supported: i,
     start: u,
     stop: c,

package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDisplayMedia.mjs","sources":["../../../../src/hooks/useDisplayMedia/useDisplayMedia.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use display media return type */\nexport interface UseDisplayMediaReturn {\n  /** Whether screen sharing is currently active */\n  sharing: boolean;\n  /** The media stream object */\n  stream: MediaStream | null;\n  /** Whether the display media API is supported */\n  supported: boolean;\n  /** Start screen sharing */\n  start: () => Promise<void>;\n  /** Stop screen sharing */\n  stop: () => void;\n}\n\n/** The use display media options type */\nexport interface UseDisplayMediaOptions {\n  /** Whether to enable audio sharing */\n  audio?: boolean | MediaTrackConstraints;\n  /** Whether to start immediately */\n  immediately?: boolean;\n  /** Whether to enable video sharing */\n  video?: boolean | MediaTrackConstraints;\n}\n\nexport interface UseDisplayMedia {\n  (target: HookTarget, options?: UseDisplayMediaOptions): UseDisplayMediaReturn;\n\n  <Target extends HTMLVideoElement>(\n    options?: UseDisplayMediaOptions,\n    target?: never\n  ): { ref: StateRef<Target> } & UseDisplayMediaReturn;\n}\n\n/**\n * @name useDisplayMedia\n * @description - Hook that provides screen sharing functionality\n * @category Browser\n * @usage low\n *\n * @browserapi mediaDevices.getDisplayMedia https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia\n *\n * @overload\n * @param {HookTarget} target The target video element to display the media stream\n * @param {boolean | MediaTrackConstraints} [options.audio] Whether to enable audio sharing\n * @param {boolean} [options.immediately=false] Whether to start immediately\n * @param {boolean | MediaTrackConstraints} [options.video] Whether to enable video sharing\n * @returns {UseDisplayMediaReturn} Object containing stream, sharing status and control methods\n *\n * @example\n * const { stream, sharing, start, stop } = useDisplayMedia(ref);\n *\n * @overload\n * @template Target The target video element\n * @param {boolean | MediaTrackConstraints} [options.audio] Whether to enable audio sharing\n * @param {boolean} [options.immediately=false] Whether to start immediately\n * @param {boolean | MediaTrackConstraints} [options.video] Whether to enable video sharing\n * @returns {UseDisplayMediaReturn & { ref: StateRef<HTMLVideoElement> }} Object containing stream, sharing status, control methods and ref\n *\n * @example\n * const { ref, stream, sharing, start, stop } = useDisplayMedia<HTMLVideoElement>();\n */\nexport const useDisplayMedia = ((...params: any[]) => {\n  const supported =\n    typeof navigator !== 'undefined' &&\n    'mediaDevices' in navigator &&\n    !!navigator.mediaDevices &&\n    'getDisplayMedia' in navigator.mediaDevices;\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (params[1] ? params[1] : params[0]) as UseDisplayMediaOptions | undefined;\n  const immediately = options?.immediately ?? false;\n\n  const [sharing, setSharing] = useState(false);\n\n  const elementRef = useRef<HTMLVideoElement>(null);\n  const streamRef = useRef<MediaStream>(null);\n  const internalRef = useRefState<Element>();\n\n  const stop = () => {\n    if (!streamRef.current || !supported || !elementRef.current) return;\n\n    setSharing(false);\n    elementRef.current.srcObject = null;\n    streamRef.current.getTracks().forEach((track) => track.stop());\n    streamRef.current = null;\n  };\n\n  const start = async () => {\n    if (!supported || !elementRef.current) return;\n\n    const displayMedia = await navigator.mediaDevices.getDisplayMedia({\n      video: options?.video,\n      audio: options?.audio\n    });\n\n    setSharing(true);\n    streamRef.current = displayMedia;\n    elementRef.current.srcObject = displayMedia;\n\n    displayMedia.getTracks().forEach((track) => (track.onended = stop));\n    return displayMedia;\n  };\n\n  useEffect(() => {\n    if (!supported || (!target && !internalRef.state)) return;\n\n    const element = (\n      target ? isTarget.getElement(target) : internalRef.current\n    ) as HTMLVideoElement;\n\n    if (!element) return;\n\n    elementRef.current = element;\n\n    if (!immediately) return;\n\n    start();\n\n    return () => {\n      stop();\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n  if (target)\n    return {\n      stream: streamRef.current,\n      sharing,\n      supported,\n      start,\n      stop\n    };\n\n  return {\n    stream: streamRef.current,\n    sharing,\n    supported,\n    start,\n    stop,\n    ref: internalRef\n  };\n}) as UseDisplayMedia;\n"],"names":["useDisplayMedia","params","supported","target","isTarget","options","immediately","sharing","setSharing","useState","elementRef","useRef","streamRef","internalRef","useRefState","stop","track","start","displayMedia","useEffect","element"],"mappings":";;;AAuEO,MAAMA,KAAmB,IAAIC,MAAkB;AACpD,QAAMC,IACJ,OAAO,YAAc,OACrB,kBAAkB,aAClB,CAAC,CAAC,UAAU,gBACZ,qBAAqB,UAAU,cAC3BC,IAAUC,EAASH,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CI,IAAWJ,EAAO,CAAC,IAAIA,EAAO,CAAC,IAAIA,EAAO,CAAC,GAC3CK,IAAcD,GAAS,eAAe,IAEtC,CAACE,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAaC,EAAyB,IAAI,GAC1CC,IAAYD,EAAoB,IAAI,GACpCE,IAAcC,EAAA,GAEdC,IAAO,MAAM;AACjB,IAAI,CAACH,EAAU,WAAW,CAACV,KAAa,CAACQ,EAAW,YAEpDF,EAAW,EAAK,GAChBE,EAAW,QAAQ,YAAY,MAC/BE,EAAU,QAAQ,YAAY,QAAQ,CAACI,MAAUA,EAAM,MAAM,GAC7DJ,EAAU,UAAU;AAAA,EAAA,GAGhBK,IAAQ,YAAY;AACxB,QAAI,CAACf,KAAa,CAACQ,EAAW,QAAS;AAEvC,UAAMQ,IAAe,MAAM,UAAU,aAAa,gBAAgB;AAAA,MAChE,OAAOb,GAAS;AAAA,MAChB,OAAOA,GAAS;AAAA,IAAA,CACjB;AAED,WAAAG,EAAW,EAAI,GACfI,EAAU,UAAUM,GACpBR,EAAW,QAAQ,YAAYQ,GAE/BA,EAAa,YAAY,QAAQ,CAACF,MAAWA,EAAM,UAAUD,CAAK,GAC3DG;AAAA,EAAA;AAuBT,SApBAC,EAAU,MAAM;AACd,QAAI,CAACjB,KAAc,CAACC,KAAU,CAACU,EAAY,MAAQ;AAEnD,UAAMO,IACJjB,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AAGrD,QAAKO,MAELV,EAAW,UAAUU,GAEjB,EAACd;AAEL,aAAAW,EAAA,GAEO,MAAM;AACX,QAAAF,EAAA;AAAA,MAAK;AAAA,EACP,GACC,CAACZ,GAAQU,EAAY,OAAOT,EAAS,YAAYD,CAAM,CAAC,CAAC,GAExDA,IACK;AAAA,IACL,QAAQS,EAAU;AAAA,IAClB,SAAAL;AAAA,IACA,WAAAL;AAAA,IACA,OAAAe;AAAA,IACA,MAAAF;AAAA,EAAA,IAGG;AAAA,IACL,QAAQH,EAAU;AAAA,IAClB,SAAAL;AAAA,IACA,WAAAL;AAAA,IACA,OAAAe;AAAA,IACA,MAAAF;AAAA,IACA,KAAKF;AAAA,EAAA;AAET;"}
+{"version":3,"file":"useDisplayMedia.mjs","sources":["../../../../src/hooks/useDisplayMedia/useDisplayMedia.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use display media return type */\nexport interface UseDisplayMediaReturn {\n  /** Whether screen sharing is currently active */\n  sharing: boolean;\n  /** The media stream object */\n  stream: MediaStream | null;\n  /** Whether the display media API is supported */\n  supported: boolean;\n  /** Start screen sharing */\n  start: () => Promise<void>;\n  /** Stop screen sharing */\n  stop: () => void;\n}\n\n/** The use display media options type */\nexport interface UseDisplayMediaOptions {\n  /** Whether to enable audio sharing */\n  audio?: boolean | MediaTrackConstraints;\n  /** Whether to start immediately */\n  immediately?: boolean;\n  /** Whether to enable video sharing */\n  video?: boolean | MediaTrackConstraints;\n}\n\nexport interface UseDisplayMedia {\n  (target: HookTarget, options?: UseDisplayMediaOptions): UseDisplayMediaReturn;\n\n  <Target extends HTMLVideoElement>(\n    options?: UseDisplayMediaOptions,\n    target?: never\n  ): { ref: StateRef<Target> } & UseDisplayMediaReturn;\n}\n\n/**\n * @name useDisplayMedia\n * @description - Hook that provides screen sharing functionality\n * @category Browser\n * @usage low\n *\n * @browserapi mediaDevices.getDisplayMedia https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia\n *\n * @overload\n * @param {HookTarget} target The target video element to display the media stream\n * @param {boolean | MediaTrackConstraints} [options.audio] Whether to enable audio sharing\n * @param {boolean} [options.immediately=false] Whether to start immediately\n * @param {boolean | MediaTrackConstraints} [options.video] Whether to enable video sharing\n * @returns {UseDisplayMediaReturn} Object containing stream, sharing status and control methods\n *\n * @example\n * const { stream, sharing, start, stop } = useDisplayMedia(ref);\n *\n * @overload\n * @template Target The target video element\n * @param {boolean | MediaTrackConstraints} [options.audio] Whether to enable audio sharing\n * @param {boolean} [options.immediately=false] Whether to start immediately\n * @param {boolean | MediaTrackConstraints} [options.video] Whether to enable video sharing\n * @returns {UseDisplayMediaReturn & { ref: StateRef<HTMLVideoElement> }} Object containing stream, sharing status, control methods and ref\n *\n * @example\n * const { ref, stream, sharing, start, stop } = useDisplayMedia<HTMLVideoElement>();\n */\nexport const useDisplayMedia = ((...params: any[]) => {\n  const supported =\n    typeof navigator !== 'undefined' &&\n    'mediaDevices' in navigator &&\n    !!navigator.mediaDevices &&\n    'getDisplayMedia' in navigator.mediaDevices;\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (params[1] ? params[1] : params[0]) as UseDisplayMediaOptions | undefined;\n  const immediately = options?.immediately ?? false;\n\n  const [sharing, setSharing] = useState(false);\n\n  const elementRef = useRef<HTMLVideoElement>(null);\n  const streamRef = useRef<MediaStream>(null);\n  const internalRef = useRefState<Element>();\n\n  const stop = () => {\n    if (!streamRef.current || !supported || !elementRef.current) return;\n\n    setSharing(false);\n    elementRef.current.srcObject = null;\n    streamRef.current.getTracks().forEach((track) => track.stop());\n    streamRef.current = null;\n  };\n\n  const start = async () => {\n    if (!supported || !elementRef.current) return;\n\n    const displayMedia = await navigator.mediaDevices.getDisplayMedia({\n      video: options?.video,\n      audio: options?.audio\n    });\n\n    setSharing(true);\n    streamRef.current = displayMedia;\n    elementRef.current.srcObject = displayMedia;\n\n    displayMedia.getTracks().forEach((track) => (track.onended = stop));\n    return displayMedia;\n  };\n\n  useEffect(() => {\n    if (!supported || (!target && !internalRef.state)) return;\n\n    const element = (\n      target ? isTarget.getElement(target) : internalRef.current\n    ) as HTMLVideoElement;\n\n    if (!element) return;\n\n    elementRef.current = element;\n\n    if (!immediately) return;\n\n    start();\n\n    return () => {\n      stop();\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n  if (target)\n    return {\n      stream: streamRef.current,\n      sharing,\n      supported,\n      start,\n      stop\n    };\n\n  return {\n    stream: streamRef.current,\n    sharing,\n    supported,\n    start,\n    stop,\n    ref: internalRef\n  };\n}) as UseDisplayMedia;\n"],"names":["useDisplayMedia","params","supported","target","isTarget","options","immediately","sharing","setSharing","useState","elementRef","useRef","streamRef","internalRef","useRefState","stop","track","start","displayMedia","useEffect","element"],"mappings":";;;AAuEO,MAAMA,KAAmB,IAAIC,MAAkB;AACpD,QAAMC,IACJ,OAAO,YAAc,OACrB,kBAAkB,aAClB,CAAC,CAAC,UAAU,gBACZ,qBAAqB,UAAU,cAC3BC,IAAUC,EAASH,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CI,IAAWJ,EAAO,CAAC,IAAIA,EAAO,CAAC,IAAIA,EAAO,CAAC,GAC3CK,IAAcD,GAAS,eAAe,IAEtC,CAACE,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAaC,EAAyB,IAAI,GAC1CC,IAAYD,EAAoB,IAAI,GACpCE,IAAcC,EAAA,GAEdC,IAAO,MAAM;AACjB,IAAI,CAACH,EAAU,WAAW,CAACV,KAAa,CAACQ,EAAW,YAEpDF,EAAW,EAAK,GAChBE,EAAW,QAAQ,YAAY,MAC/BE,EAAU,QAAQ,YAAY,QAAQ,CAACI,MAAUA,EAAM,MAAM,GAC7DJ,EAAU,UAAU;AAAA,EAAA,GAGhBK,IAAQ,YAAY;AACxB,QAAI,CAACf,KAAa,CAACQ,EAAW,QAAS;AAEvC,UAAMQ,IAAe,MAAM,UAAU,aAAa,gBAAgB;AAAA,MAChE,OAAOb,GAAS;AAAA,MAChB,OAAOA,GAAS;AAAA,IAAA,CACjB;AAED,WAAAG,EAAW,EAAI,GACfI,EAAU,UAAUM,GACpBR,EAAW,QAAQ,YAAYQ,GAE/BA,EAAa,YAAY,QAAQ,CAACF,MAAWA,EAAM,UAAUD,CAAK,GAC3DG;AAAA,EAAA;AAuBT,SApBAC,EAAU,MAAM;AACd,QAAI,CAACjB,KAAc,CAACC,KAAU,CAACU,EAAY,MAAQ;AAEnD,UAAMO,IACJjB,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AAGrD,QAAKO,MAELV,EAAW,UAAUU,GAEjB,EAACd;AAEL,aAAAW,EAAA,GAEO,MAAM;AACX,QAAAF,EAAA;AAAA,MAAK;AAAA,EACP,GACC,CAACZ,KAAUC,EAAS,cAAcD,CAAM,GAAGU,EAAY,KAAK,CAAC,GAE5DV,IACK;AAAA,IACL,QAAQS,EAAU;AAAA,IAClB,SAAAL;AAAA,IACA,WAAAL;AAAA,IACA,OAAAe;AAAA,IACA,MAAAF;AAAA,EAAA,IAGG;AAAA,IACL,QAAQH,EAAU;AAAA,IAClB,SAAAL;AAAA,IACA,WAAAL;AAAA,IACA,OAAAe;AAAA,IACA,MAAAF;AAAA,IACA,KAAKF;AAAA,EAAA;AAET;"}

package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs

@@ -1,23 +1,23 @@
-import { useRef as s, useEffect as E } from "react";
+import { useRef as s, useEffect as a } from "react";
 import { useRefState as R } from "../useRefState/useRefState.mjs";
-import { isTarget as f } from "../../utils/helpers/isTarget.mjs";
-const k = 300, C = ((...e) => {
-  const t = f(e[0]) ? e[0] : void 0, l = t ? e[1] : e[0], m = t ? e[2] : e[1], c = s(void 0), r = s(0), o = R(), d = s(l);
-  d.current = l;
+import { isTarget as l } from "../../utils/helpers/isTarget.mjs";
+const k = 300, C = ((...t) => {
+  const e = l(t[0]) ? t[0] : void 0, f = e ? t[1] : t[0], m = e ? t[2] : t[1], c = s(void 0), r = s(0), o = R(), d = s(f);
+  d.current = f;
   const u = s(m);
-  if (u.current = m, E(() => {
-    if (!t && !o.state) return;
-    const n = t ? f.getElement(t) : o.current;
+  if (u.current = m, a(() => {
+    if (!e && !o.state) return;
+    const n = e ? l.getElement(e) : o.current;
     if (!n) return;
-    const i = (a) => {
+    const i = (E) => {
       r.current += 1, r.current === 1 && (c.current = setTimeout(() => {
-        u.current?.onSingleClick && u.current.onSingleClick(a), r.current = 0;
-      }, u.current?.threshold ?? k)), r.current === 2 && (clearTimeout(c.current), d.current(a), r.current = 0);
+        u.current?.onSingleClick && u.current.onSingleClick(E), r.current = 0;
+      }, u.current?.threshold ?? k)), r.current === 2 && (clearTimeout(c.current), d.current(E), r.current = 0);
     };
     return n.addEventListener("mousedown", i), n.addEventListener("touchstart", i), () => {
       n.removeEventListener("mousedown", i), n.removeEventListener("touchstart", i), c.current && clearTimeout(c.current);
     };
-  }, [t, o.state, f.getRefState(t)]), !t)
+  }, [e && l.getRawElement(e), o.state]), !e)
     return o;
 });
 export {

package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDoubleClick.mjs","sources":["../../../../src/hooks/useDoubleClick/useDoubleClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type DoubleClickEvents = MouseEvent | TouchEvent;\n\n/** The use double click options type */\nexport interface UseDoubleClickOptions {\n  /** The threshold time in milliseconds between clicks */\n  threshold?: number;\n  /** The callback function to be invoked on single click */\n  onSingleClick?: (event: DoubleClickEvents) => void;\n}\n\nexport interface UseDoubleClick {\n  (\n    target: HookTarget,\n    callback: (event: DoubleClickEvents) => void,\n    options?: UseDoubleClickOptions\n  ): boolean;\n\n  <Target extends Element>(\n    callback: (event: DoubleClickEvents) => void,\n    options?: UseDoubleClickOptions,\n    target?: never\n  ): StateRef<Target>;\n}\n\nexport const DEFAULT_THRESHOLD_TIME = 300;\n\n/**\n * @name useDoubleClick\n * @description - Hook that defines the logic when double clicking an element\n * @category Elements\n * @usage medium\n\n * @overload\n * @param {HookTarget} target The target element to be double clicked\n * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click\n * @param {UseDoubleClickOptions} [options] The options for the double click\n * @returns {boolean} The double clicking state\n *\n * @example\n * useDoubleClick(ref, () => console.log('double clicked'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click\n * @param {UseDoubleClickOptions} [options] The options for the double click\n * @returns {boolean} The double clicking state\n *\n * @example\n * const ref = useDoubleClick(() => console.log('double clicked'));\n *\n * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useDoubleClick.html}\n */\nexport const useDoubleClick = ((...params: any[]): any => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (target ? params[1] : params[0]) as (event: DoubleClickEvents) => void;\n  const options = (target ? params[2] : params[1]) as UseDoubleClickOptions | undefined;\n\n  const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const clickCountRef = useRef(0);\n  const internalRef = useRefState<Element>();\n\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const onClick = (event: DoubleClickEvents) => {\n      clickCountRef.current += 1;\n\n      if (clickCountRef.current === 1) {\n        timeoutIdRef.current = setTimeout(() => {\n          if (internalOptionsRef.current?.onSingleClick)\n            internalOptionsRef.current.onSingleClick(event);\n          clickCountRef.current = 0;\n        }, internalOptionsRef.current?.threshold ?? DEFAULT_THRESHOLD_TIME);\n      }\n\n      if (clickCountRef.current === 2) {\n        clearTimeout(timeoutIdRef.current);\n        internalCallbackRef.current(event);\n        clickCountRef.current = 0;\n      }\n    };\n\n    element.addEventListener('mousedown', onClick as EventListener);\n    element.addEventListener('touchstart', onClick as EventListener);\n\n    return () => {\n      element.removeEventListener('mousedown', onClick as EventListener);\n      element.removeEventListener('touchstart', onClick as EventListener);\n      if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n  if (target) return;\n  return internalRef;\n}) as UseDoubleClick;\n"],"names":["DEFAULT_THRESHOLD_TIME","useDoubleClick","params","target","isTarget","callback","options","timeoutIdRef","useRef","clickCountRef","internalRef","useRefState","internalCallbackRef","internalOptionsRef","useEffect","element","onClick","event"],"mappings":";;;AAkCO,MAAMA,IAAyB,KA4BzBC,KAAkB,IAAIC,MAAuB;AACxD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCI,IAAWH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCK,IAAeC,EAAsC,MAAS,GAC9DC,IAAgBD,EAAO,CAAC,GACxBE,IAAcC,EAAA,GAEdC,IAAsBJ,EAAOH,CAAQ;AAC3C,EAAAO,EAAoB,UAAUP;AAC9B,QAAMQ,IAAqBL,EAAOF,CAAO;AAqCzC,MApCAO,EAAmB,UAAUP,GAE7BQ,EAAU,MAAM;AACd,QAAI,CAACX,KAAU,CAACO,EAAY,MAAO;AAEnC,UAAMK,IAAUZ,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAU,CAACC,MAA6B;AAC5C,MAAAR,EAAc,WAAW,GAErBA,EAAc,YAAY,MAC5BF,EAAa,UAAU,WAAW,MAAM;AACtC,QAAIM,EAAmB,SAAS,iBAC9BA,EAAmB,QAAQ,cAAcI,CAAK,GAChDR,EAAc,UAAU;AAAA,MAAA,GACvBI,EAAmB,SAAS,aAAab,CAAsB,IAGhES,EAAc,YAAY,MAC5B,aAAaF,EAAa,OAAO,GACjCK,EAAoB,QAAQK,CAAK,GACjCR,EAAc,UAAU;AAAA,IAC1B;AAGF,WAAAM,EAAQ,iBAAiB,aAAaC,CAAwB,GAC9DD,EAAQ,iBAAiB,cAAcC,CAAwB,GAExD,MAAM;AACX,MAAAD,EAAQ,oBAAoB,aAAaC,CAAwB,GACjED,EAAQ,oBAAoB,cAAcC,CAAwB,GAC9DT,EAAa,WAAS,aAAaA,EAAa,OAAO;AAAA,IAAA;AAAA,EAC7D,GACC,CAACJ,GAAQO,EAAY,OAAON,EAAS,YAAYD,CAAM,CAAC,CAAC,GAExD,CAAAA;AACJ,WAAOO;AACT;"}
+{"version":3,"file":"useDoubleClick.mjs","sources":["../../../../src/hooks/useDoubleClick/useDoubleClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type DoubleClickEvents = MouseEvent | TouchEvent;\n\n/** The use double click options type */\nexport interface UseDoubleClickOptions {\n  /** The threshold time in milliseconds between clicks */\n  threshold?: number;\n  /** The callback function to be invoked on single click */\n  onSingleClick?: (event: DoubleClickEvents) => void;\n}\n\nexport interface UseDoubleClick {\n  (\n    target: HookTarget,\n    callback: (event: DoubleClickEvents) => void,\n    options?: UseDoubleClickOptions\n  ): boolean;\n\n  <Target extends Element>(\n    callback: (event: DoubleClickEvents) => void,\n    options?: UseDoubleClickOptions,\n    target?: never\n  ): StateRef<Target>;\n}\n\nexport const DEFAULT_THRESHOLD_TIME = 300;\n\n/**\n * @name useDoubleClick\n * @description - Hook that defines the logic when double clicking an element\n * @category Elements\n * @usage medium\n\n * @overload\n * @param {HookTarget} target The target element to be double clicked\n * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click\n * @param {UseDoubleClickOptions} [options] The options for the double click\n * @returns {boolean} The double clicking state\n *\n * @example\n * useDoubleClick(ref, () => console.log('double clicked'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click\n * @param {UseDoubleClickOptions} [options] The options for the double click\n * @returns {boolean} The double clicking state\n *\n * @example\n * const ref = useDoubleClick(() => console.log('double clicked'));\n *\n * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useDoubleClick.html}\n */\nexport const useDoubleClick = ((...params: any[]): any => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (target ? params[1] : params[0]) as (event: DoubleClickEvents) => void;\n  const options = (target ? params[2] : params[1]) as UseDoubleClickOptions | undefined;\n\n  const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const clickCountRef = useRef(0);\n  const internalRef = useRefState<Element>();\n\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const onClick = (event: DoubleClickEvents) => {\n      clickCountRef.current += 1;\n\n      if (clickCountRef.current === 1) {\n        timeoutIdRef.current = setTimeout(() => {\n          if (internalOptionsRef.current?.onSingleClick)\n            internalOptionsRef.current.onSingleClick(event);\n          clickCountRef.current = 0;\n        }, internalOptionsRef.current?.threshold ?? DEFAULT_THRESHOLD_TIME);\n      }\n\n      if (clickCountRef.current === 2) {\n        clearTimeout(timeoutIdRef.current);\n        internalCallbackRef.current(event);\n        clickCountRef.current = 0;\n      }\n    };\n\n    element.addEventListener('mousedown', onClick as EventListener);\n    element.addEventListener('touchstart', onClick as EventListener);\n\n    return () => {\n      element.removeEventListener('mousedown', onClick as EventListener);\n      element.removeEventListener('touchstart', onClick as EventListener);\n      if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n  if (target) return;\n  return internalRef;\n}) as UseDoubleClick;\n"],"names":["DEFAULT_THRESHOLD_TIME","useDoubleClick","params","target","isTarget","callback","options","timeoutIdRef","useRef","clickCountRef","internalRef","useRefState","internalCallbackRef","internalOptionsRef","useEffect","element","onClick","event"],"mappings":";;;AAkCO,MAAMA,IAAyB,KA4BzBC,KAAkB,IAAIC,MAAuB;AACxD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCI,IAAWH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCK,IAAeC,EAAsC,MAAS,GAC9DC,IAAgBD,EAAO,CAAC,GACxBE,IAAcC,EAAA,GAEdC,IAAsBJ,EAAOH,CAAQ;AAC3C,EAAAO,EAAoB,UAAUP;AAC9B,QAAMQ,IAAqBL,EAAOF,CAAO;AAqCzC,MApCAO,EAAmB,UAAUP,GAE7BQ,EAAU,MAAM;AACd,QAAI,CAACX,KAAU,CAACO,EAAY,MAAO;AAEnC,UAAMK,IAAUZ,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAU,CAACC,MAA6B;AAC5C,MAAAR,EAAc,WAAW,GAErBA,EAAc,YAAY,MAC5BF,EAAa,UAAU,WAAW,MAAM;AACtC,QAAIM,EAAmB,SAAS,iBAC9BA,EAAmB,QAAQ,cAAcI,CAAK,GAChDR,EAAc,UAAU;AAAA,MAAA,GACvBI,EAAmB,SAAS,aAAab,CAAsB,IAGhES,EAAc,YAAY,MAC5B,aAAaF,EAAa,OAAO,GACjCK,EAAoB,QAAQK,CAAK,GACjCR,EAAc,UAAU;AAAA,IAC1B;AAGF,WAAAM,EAAQ,iBAAiB,aAAaC,CAAwB,GAC9DD,EAAQ,iBAAiB,cAAcC,CAAwB,GAExD,MAAM;AACX,MAAAD,EAAQ,oBAAoB,aAAaC,CAAwB,GACjED,EAAQ,oBAAoB,cAAcC,CAAwB,GAC9DT,EAAa,WAAS,aAAaA,EAAa,OAAO;AAAA,IAAA;AAAA,EAC7D,GACC,CAACJ,KAAUC,EAAS,cAAcD,CAAM,GAAGO,EAAY,KAAK,CAAC,GAE5D,CAAAP;AACJ,WAAOO;AACT;"}

package/dist/esm/hooks/useDropZone/useDropZone.mjs

@@ -1,7 +1,7 @@
 import { useRef as V, useState as D, useEffect as F } from "react";
 import { useRefState as O } from "../useRefState/useRefState.mjs";
 import { isTarget as p } from "../../utils/helpers/isTarget.mjs";
-const A = ((...n) => {
+const S = ((...n) => {
   const o = p(n[0]) ? n[0] : void 0, s = o ? typeof n[1] == "object" ? n[1] : { onDrop: n[1] } : typeof n[0] == "object" ? n[0] : { onDrop: n[0] }, f = O(), u = V(0), [g, L] = D(null), [E, v] = D(!1), i = s.dataTypes, y = (e) => {
     if (!e.dataTransfer) return null;
     const t = Array.from(e.dataTransfer.files);
@@ -40,9 +40,9 @@ const A = ((...n) => {
     return e.addEventListener("dragenter", l), e.addEventListener("dragover", c), e.addEventListener("dragleave", m), e.addEventListener("drop", a), () => {
       e.removeEventListener("dragenter", l), e.removeEventListener("dragover", c), e.removeEventListener("dragleave", m), e.removeEventListener("drop", a);
     };
-  }, [o, f.state, p.getRefState(o)]), o ? { overed: E, files: g } : { ref: f, overed: E, files: g };
+  }, [o && p.getRawElement(o), f.state]), o ? { overed: E, files: g } : { ref: f, overed: E, files: g };
 });
 export {
-  A as useDropZone
+  S as useDropZone
 };
 //# sourceMappingURL=useDropZone.mjs.map

package/dist/esm/hooks/useDropZone/useDropZone.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDropZone.mjs","sources":["../../../../src/hooks/useDropZone/useDropZone.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type DropZoneDataTypes = ((types: string[]) => boolean) | string[];\n\nexport interface UseDropZoneOptions {\n  /** The data types for drop zone */\n  dataTypes?: DropZoneDataTypes;\n  /** The multiple mode for drop zone */\n  multiple?: boolean;\n  /** The on drop callback */\n  onDrop?: (files: File[] | null, event: DragEvent) => void;\n  /** The on enter callback */\n  onEnter?: (event: DragEvent) => void;\n  /** The on leave callback */\n  onLeave?: (event: DragEvent) => void;\n  /** The on over callback */\n  onOver?: (event: DragEvent) => void;\n}\n\nexport interface UseDropZoneReturn {\n  /** The files that was dropped in drop zone */\n  files: File[] | null;\n  /** The over drop zone status */\n  overed: boolean;\n}\n\nexport interface UseDropZone {\n  (\n    target: HookTarget,\n    callback?: (files: File[] | null, event: DragEvent) => void\n  ): UseDropZoneReturn;\n\n  <Target extends Element>(\n    callback?: (files: File[] | null, event: DragEvent) => void,\n    target?: never\n  ): UseDropZoneReturn & {\n    ref: StateRef<Target>;\n  };\n\n  (target: HookTarget, options?: UseDropZoneOptions): UseDropZoneReturn;\n\n  <Target extends Element>(\n    options?: UseDropZoneOptions,\n    target?: never\n  ): UseDropZoneReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useDropZone\n * @description - Hook that provides drop zone functionality\n * @category Elements\n * @usage medium\n\n * @overload\n * @template Target The target element\n * @param {Target} target The target element drop zone's\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn} The object with drop zone states\n *\n * @example\n * const { overed, files } = useDropZone(ref, options);\n *\n * @overload\n * @param {Target} target The target element drop zone's\n * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn} The object with drop zone states\n *\n * @example\n * const { overed, files } = useDropZone(ref, () => console.log('callback'));\n *\n * @overload\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n *\n * @example\n * const { ref, overed, files } = useDropZone(options);\n *\n * @overload\n * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n *\n * @example\n * const { ref, overed, files } = useDropZone(() => console.log('callback'));\n */\nexport const useDropZone = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onDrop: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onDrop: params[0] }\n  ) as UseDropZoneOptions;\n\n  const internalRef = useRefState<Element>();\n\n  const counterRef = useRef(0);\n  const [files, setFiles] = useState<File[] | null>(null);\n  const [overed, setOvered] = useState(false);\n\n  const dataTypes = options.dataTypes;\n\n  const getFiles = (event: DragEvent) => {\n    if (!event.dataTransfer) return null;\n    const list = Array.from(event.dataTransfer.files);\n    if (options.multiple) return list;\n    if (!list.length) return null;\n    return [list[0]];\n  };\n\n  const checkDataTypes = (types: string[]) => {\n    if (!dataTypes) return true;\n    if (typeof dataTypes === 'function') return dataTypes(types);\n    if (!dataTypes.length) return true;\n    if (!types.length) return false;\n\n    return types.every((type) => dataTypes.some((dataType) => type.includes(dataType)));\n  };\n\n  const checkValidity = (items: DataTransferItemList) => {\n    const types = Array.from(items).map((item) => item.type);\n    const dataTypesValid = checkDataTypes(types);\n    const multipleFilesValid = options.multiple || items.length <= 1;\n\n    return dataTypesValid && multipleFilesValid;\n  };\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n\n    if (!element) return;\n\n    const onEvent = (event: DragEvent, type: 'drop' | 'enter' | 'leave' | 'over') => {\n      if (!event.dataTransfer) return;\n\n      const isValid = checkValidity(event.dataTransfer.items);\n      if (!isValid) {\n        event.dataTransfer.dropEffect = 'none';\n        return;\n      }\n\n      event.preventDefault();\n      event.dataTransfer.dropEffect = 'copy';\n\n      const currentFiles = getFiles(event);\n\n      if (type === 'drop') {\n        counterRef.current = 0;\n        setOvered(false);\n        setFiles(currentFiles);\n        options.onDrop?.(currentFiles, event);\n        return;\n      }\n\n      if (type === 'enter') {\n        counterRef.current += 1;\n        setOvered(true);\n        options.onEnter?.(event);\n        return;\n      }\n\n      if (type === 'leave') {\n        counterRef.current -= 1;\n        if (counterRef.current !== 0) return;\n        setOvered(false);\n        options.onLeave?.(event);\n        return;\n      }\n\n      if (type === 'over') options.onOver?.(event);\n    };\n\n    const onDrop = ((event: DragEvent) => onEvent(event, 'drop')) as EventListener;\n    const onDragOver = ((event: DragEvent) => onEvent(event, 'over')) as EventListener;\n    const onDragEnter = ((event: DragEvent) => onEvent(event, 'enter')) as EventListener;\n    const onDragLeave = ((event: DragEvent) => onEvent(event, 'leave')) as EventListener;\n\n    element.addEventListener('dragenter', onDragEnter);\n    element.addEventListener('dragover', onDragOver);\n    element.addEventListener('dragleave', onDragLeave);\n    element.addEventListener('drop', onDrop);\n\n    return () => {\n      element.removeEventListener('dragenter', onDragEnter);\n      element.removeEventListener('dragover', onDragOver);\n      element.removeEventListener('dragleave', onDragLeave);\n      element.removeEventListener('drop', onDrop);\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n  if (target) return { overed, files };\n  return { ref: internalRef, overed, files };\n}) as UseDropZone;\n"],"names":["useDropZone","params","target","isTarget","options","internalRef","useRefState","counterRef","useRef","files","setFiles","useState","overed","setOvered","dataTypes","getFiles","event","list","checkDataTypes","types","type","dataType","checkValidity","items","item","dataTypesValid","multipleFilesValid","useEffect","element","onEvent","currentFiles","onDrop","onDragOver","onDragEnter","onDragLeave"],"mappings":";;;AAwGO,MAAMA,KAAe,IAAIC,MAAkB;AAChD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,QAAQA,EAAO,CAAC,EAAA,IACpB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,QAAQA,EAAO,CAAC,EAAA,GAGpBI,IAAcC,EAAA,GAEdC,IAAaC,EAAO,CAAC,GACrB,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GAEpCG,IAAYV,EAAQ,WAEpBW,IAAW,CAACC,MAAqB;AACrC,QAAI,CAACA,EAAM,aAAc,QAAO;AAChC,UAAMC,IAAO,MAAM,KAAKD,EAAM,aAAa,KAAK;AAChD,WAAIZ,EAAQ,WAAiBa,IACxBA,EAAK,SACH,CAACA,EAAK,CAAC,CAAC,IADU;AAAA,EACV,GAGXC,IAAiB,CAACC,MACjBL,IACD,OAAOA,KAAc,aAAmBA,EAAUK,CAAK,IACtDL,EAAU,SACVK,EAAM,SAEJA,EAAM,MAAM,CAACC,MAASN,EAAU,KAAK,CAACO,MAAaD,EAAK,SAASC,CAAQ,CAAC,CAAC,IAFxD,KADI,KAFP,IAQnBC,IAAgB,CAACC,MAAgC;AACrD,UAAMJ,IAAQ,MAAM,KAAKI,CAAK,EAAE,IAAI,CAACC,MAASA,EAAK,IAAI,GACjDC,IAAiBP,EAAeC,CAAK,GACrCO,IAAqBtB,EAAQ,YAAYmB,EAAM,UAAU;AAE/D,WAAOE,KAAkBC;AAAA,EAAA;AAoE3B,SAjEAC,EAAU,MAAM;AACd,QAAI,CAACzB,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMuB,IAAU1B,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY;AAEnE,QAAI,CAACuB,EAAS;AAEd,UAAMC,IAAU,CAACb,GAAkBI,MAA8C;AAC/E,UAAI,CAACJ,EAAM,aAAc;AAGzB,UAAI,CADYM,EAAcN,EAAM,aAAa,KAAK,GACxC;AACZ,QAAAA,EAAM,aAAa,aAAa;AAChC;AAAA,MAAA;AAGF,MAAAA,EAAM,eAAA,GACNA,EAAM,aAAa,aAAa;AAEhC,YAAMc,IAAef,EAASC,CAAK;AAEnC,UAAII,MAAS,QAAQ;AACnB,QAAAb,EAAW,UAAU,GACrBM,EAAU,EAAK,GACfH,EAASoB,CAAY,GACrB1B,EAAQ,SAAS0B,GAAcd,CAAK;AACpC;AAAA,MAAA;AAGF,UAAII,MAAS,SAAS;AACpB,QAAAb,EAAW,WAAW,GACtBM,EAAU,EAAI,GACdT,EAAQ,UAAUY,CAAK;AACvB;AAAA,MAAA;AAGF,UAAII,MAAS,SAAS;AAEpB,YADAb,EAAW,WAAW,GAClBA,EAAW,YAAY,EAAG;AAC9B,QAAAM,EAAU,EAAK,GACfT,EAAQ,UAAUY,CAAK;AACvB;AAAA,MAAA;AAGF,MAAII,MAAS,UAAQhB,EAAQ,SAASY,CAAK;AAAA,IAAA,GAGvCe,KAAU,CAACf,MAAqBa,EAAQb,GAAO,MAAM,IACrDgB,KAAc,CAAChB,MAAqBa,EAAQb,GAAO,MAAM,IACzDiB,KAAe,CAACjB,MAAqBa,EAAQb,GAAO,OAAO,IAC3DkB,KAAe,CAAClB,MAAqBa,EAAQb,GAAO,OAAO;AAEjE,WAAAY,EAAQ,iBAAiB,aAAaK,CAAW,GACjDL,EAAQ,iBAAiB,YAAYI,CAAU,GAC/CJ,EAAQ,iBAAiB,aAAaM,CAAW,GACjDN,EAAQ,iBAAiB,QAAQG,CAAM,GAEhC,MAAM;AACX,MAAAH,EAAQ,oBAAoB,aAAaK,CAAW,GACpDL,EAAQ,oBAAoB,YAAYI,CAAU,GAClDJ,EAAQ,oBAAoB,aAAaM,CAAW,GACpDN,EAAQ,oBAAoB,QAAQG,CAAM;AAAA,IAAA;AAAA,EAC5C,GACC,CAAC7B,GAAQG,EAAY,OAAOF,EAAS,YAAYD,CAAM,CAAC,CAAC,GAExDA,IAAe,EAAE,QAAAU,GAAQ,OAAAH,EAAA,IACtB,EAAE,KAAKJ,GAAa,QAAAO,GAAQ,OAAAH,EAAA;AACrC;"}
+{"version":3,"file":"useDropZone.mjs","sources":["../../../../src/hooks/useDropZone/useDropZone.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type DropZoneDataTypes = ((types: string[]) => boolean) | string[];\n\nexport interface UseDropZoneOptions {\n  /** The data types for drop zone */\n  dataTypes?: DropZoneDataTypes;\n  /** The multiple mode for drop zone */\n  multiple?: boolean;\n  /** The on drop callback */\n  onDrop?: (files: File[] | null, event: DragEvent) => void;\n  /** The on enter callback */\n  onEnter?: (event: DragEvent) => void;\n  /** The on leave callback */\n  onLeave?: (event: DragEvent) => void;\n  /** The on over callback */\n  onOver?: (event: DragEvent) => void;\n}\n\nexport interface UseDropZoneReturn {\n  /** The files that was dropped in drop zone */\n  files: File[] | null;\n  /** The over drop zone status */\n  overed: boolean;\n}\n\nexport interface UseDropZone {\n  (\n    target: HookTarget,\n    callback?: (files: File[] | null, event: DragEvent) => void\n  ): UseDropZoneReturn;\n\n  <Target extends Element>(\n    callback?: (files: File[] | null, event: DragEvent) => void,\n    target?: never\n  ): UseDropZoneReturn & {\n    ref: StateRef<Target>;\n  };\n\n  (target: HookTarget, options?: UseDropZoneOptions): UseDropZoneReturn;\n\n  <Target extends Element>(\n    options?: UseDropZoneOptions,\n    target?: never\n  ): UseDropZoneReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useDropZone\n * @description - Hook that provides drop zone functionality\n * @category Elements\n * @usage medium\n\n * @overload\n * @template Target The target element\n * @param {Target} target The target element drop zone's\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn} The object with drop zone states\n *\n * @example\n * const { overed, files } = useDropZone(ref, options);\n *\n * @overload\n * @param {Target} target The target element drop zone's\n * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn} The object with drop zone states\n *\n * @example\n * const { overed, files } = useDropZone(ref, () => console.log('callback'));\n *\n * @overload\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n *\n * @example\n * const { ref, overed, files } = useDropZone(options);\n *\n * @overload\n * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n *\n * @example\n * const { ref, overed, files } = useDropZone(() => console.log('callback'));\n */\nexport const useDropZone = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onDrop: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onDrop: params[0] }\n  ) as UseDropZoneOptions;\n\n  const internalRef = useRefState<Element>();\n\n  const counterRef = useRef(0);\n  const [files, setFiles] = useState<File[] | null>(null);\n  const [overed, setOvered] = useState(false);\n\n  const dataTypes = options.dataTypes;\n\n  const getFiles = (event: DragEvent) => {\n    if (!event.dataTransfer) return null;\n    const list = Array.from(event.dataTransfer.files);\n    if (options.multiple) return list;\n    if (!list.length) return null;\n    return [list[0]];\n  };\n\n  const checkDataTypes = (types: string[]) => {\n    if (!dataTypes) return true;\n    if (typeof dataTypes === 'function') return dataTypes(types);\n    if (!dataTypes.length) return true;\n    if (!types.length) return false;\n\n    return types.every((type) => dataTypes.some((dataType) => type.includes(dataType)));\n  };\n\n  const checkValidity = (items: DataTransferItemList) => {\n    const types = Array.from(items).map((item) => item.type);\n    const dataTypesValid = checkDataTypes(types);\n    const multipleFilesValid = options.multiple || items.length <= 1;\n\n    return dataTypesValid && multipleFilesValid;\n  };\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n\n    if (!element) return;\n\n    const onEvent = (event: DragEvent, type: 'drop' | 'enter' | 'leave' | 'over') => {\n      if (!event.dataTransfer) return;\n\n      const isValid = checkValidity(event.dataTransfer.items);\n      if (!isValid) {\n        event.dataTransfer.dropEffect = 'none';\n        return;\n      }\n\n      event.preventDefault();\n      event.dataTransfer.dropEffect = 'copy';\n\n      const currentFiles = getFiles(event);\n\n      if (type === 'drop') {\n        counterRef.current = 0;\n        setOvered(false);\n        setFiles(currentFiles);\n        options.onDrop?.(currentFiles, event);\n        return;\n      }\n\n      if (type === 'enter') {\n        counterRef.current += 1;\n        setOvered(true);\n        options.onEnter?.(event);\n        return;\n      }\n\n      if (type === 'leave') {\n        counterRef.current -= 1;\n        if (counterRef.current !== 0) return;\n        setOvered(false);\n        options.onLeave?.(event);\n        return;\n      }\n\n      if (type === 'over') options.onOver?.(event);\n    };\n\n    const onDrop = ((event: DragEvent) => onEvent(event, 'drop')) as EventListener;\n    const onDragOver = ((event: DragEvent) => onEvent(event, 'over')) as EventListener;\n    const onDragEnter = ((event: DragEvent) => onEvent(event, 'enter')) as EventListener;\n    const onDragLeave = ((event: DragEvent) => onEvent(event, 'leave')) as EventListener;\n\n    element.addEventListener('dragenter', onDragEnter);\n    element.addEventListener('dragover', onDragOver);\n    element.addEventListener('dragleave', onDragLeave);\n    element.addEventListener('drop', onDrop);\n\n    return () => {\n      element.removeEventListener('dragenter', onDragEnter);\n      element.removeEventListener('dragover', onDragOver);\n      element.removeEventListener('dragleave', onDragLeave);\n      element.removeEventListener('drop', onDrop);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n  if (target) return { overed, files };\n  return { ref: internalRef, overed, files };\n}) as UseDropZone;\n"],"names":["useDropZone","params","target","isTarget","options","internalRef","useRefState","counterRef","useRef","files","setFiles","useState","overed","setOvered","dataTypes","getFiles","event","list","checkDataTypes","types","type","dataType","checkValidity","items","item","dataTypesValid","multipleFilesValid","useEffect","element","onEvent","currentFiles","onDrop","onDragOver","onDragEnter","onDragLeave"],"mappings":";;;AAwGO,MAAMA,KAAe,IAAIC,MAAkB;AAChD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,QAAQA,EAAO,CAAC,EAAA,IACpB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,QAAQA,EAAO,CAAC,EAAA,GAGpBI,IAAcC,EAAA,GAEdC,IAAaC,EAAO,CAAC,GACrB,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GAEpCG,IAAYV,EAAQ,WAEpBW,IAAW,CAACC,MAAqB;AACrC,QAAI,CAACA,EAAM,aAAc,QAAO;AAChC,UAAMC,IAAO,MAAM,KAAKD,EAAM,aAAa,KAAK;AAChD,WAAIZ,EAAQ,WAAiBa,IACxBA,EAAK,SACH,CAACA,EAAK,CAAC,CAAC,IADU;AAAA,EACV,GAGXC,IAAiB,CAACC,MACjBL,IACD,OAAOA,KAAc,aAAmBA,EAAUK,CAAK,IACtDL,EAAU,SACVK,EAAM,SAEJA,EAAM,MAAM,CAACC,MAASN,EAAU,KAAK,CAACO,MAAaD,EAAK,SAASC,CAAQ,CAAC,CAAC,IAFxD,KADI,KAFP,IAQnBC,IAAgB,CAACC,MAAgC;AACrD,UAAMJ,IAAQ,MAAM,KAAKI,CAAK,EAAE,IAAI,CAACC,MAASA,EAAK,IAAI,GACjDC,IAAiBP,EAAeC,CAAK,GACrCO,IAAqBtB,EAAQ,YAAYmB,EAAM,UAAU;AAE/D,WAAOE,KAAkBC;AAAA,EAAA;AAoE3B,SAjEAC,EAAU,MAAM;AACd,QAAI,CAACzB,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMuB,IAAU1B,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY;AAEnE,QAAI,CAACuB,EAAS;AAEd,UAAMC,IAAU,CAACb,GAAkBI,MAA8C;AAC/E,UAAI,CAACJ,EAAM,aAAc;AAGzB,UAAI,CADYM,EAAcN,EAAM,aAAa,KAAK,GACxC;AACZ,QAAAA,EAAM,aAAa,aAAa;AAChC;AAAA,MAAA;AAGF,MAAAA,EAAM,eAAA,GACNA,EAAM,aAAa,aAAa;AAEhC,YAAMc,IAAef,EAASC,CAAK;AAEnC,UAAII,MAAS,QAAQ;AACnB,QAAAb,EAAW,UAAU,GACrBM,EAAU,EAAK,GACfH,EAASoB,CAAY,GACrB1B,EAAQ,SAAS0B,GAAcd,CAAK;AACpC;AAAA,MAAA;AAGF,UAAII,MAAS,SAAS;AACpB,QAAAb,EAAW,WAAW,GACtBM,EAAU,EAAI,GACdT,EAAQ,UAAUY,CAAK;AACvB;AAAA,MAAA;AAGF,UAAII,MAAS,SAAS;AAEpB,YADAb,EAAW,WAAW,GAClBA,EAAW,YAAY,EAAG;AAC9B,QAAAM,EAAU,EAAK,GACfT,EAAQ,UAAUY,CAAK;AACvB;AAAA,MAAA;AAGF,MAAII,MAAS,UAAQhB,EAAQ,SAASY,CAAK;AAAA,IAAA,GAGvCe,KAAU,CAACf,MAAqBa,EAAQb,GAAO,MAAM,IACrDgB,KAAc,CAAChB,MAAqBa,EAAQb,GAAO,MAAM,IACzDiB,KAAe,CAACjB,MAAqBa,EAAQb,GAAO,OAAO,IAC3DkB,KAAe,CAAClB,MAAqBa,EAAQb,GAAO,OAAO;AAEjE,WAAAY,EAAQ,iBAAiB,aAAaK,CAAW,GACjDL,EAAQ,iBAAiB,YAAYI,CAAU,GAC/CJ,EAAQ,iBAAiB,aAAaM,CAAW,GACjDN,EAAQ,iBAAiB,QAAQG,CAAM,GAEhC,MAAM;AACX,MAAAH,EAAQ,oBAAoB,aAAaK,CAAW,GACpDL,EAAQ,oBAAoB,YAAYI,CAAU,GAClDJ,EAAQ,oBAAoB,aAAaM,CAAW,GACpDN,EAAQ,oBAAoB,QAAQG,CAAM;AAAA,IAAA;AAAA,EAC5C,GACC,CAAC7B,KAAUC,EAAS,cAAcD,CAAM,GAAGG,EAAY,KAAK,CAAC,GAE5DH,IAAe,EAAE,QAAAU,GAAQ,OAAAH,EAAA,IACtB,EAAE,KAAKJ,GAAa,QAAAO,GAAQ,OAAAH,EAAA;AACrC;"}

package/dist/esm/hooks/useElementSize/useElementSize.mjs

@@ -1,9 +1,9 @@
-import { useState as m } from "react";
+import { useState as f } from "react";
 import { useIsomorphicLayoutEffect as a } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import { useRefState as d } from "../useRefState/useRefState.mjs";
+import { useRefState as l } from "../useRefState/useRefState.mjs";
 import { isTarget as s } from "../../utils/helpers/isTarget.mjs";
 const v = ((...h) => {
-  const e = h[0], [i, n] = m({ width: 0, height: 0 }), r = d();
+  const e = h[0], [i, n] = f({ width: 0, height: 0 }), r = l();
   return a(() => {
     const t = e ? s.getElement(e) : r.current;
     if (!t) return;
@@ -13,13 +13,13 @@ const v = ((...h) => {
       height: u
     });
     const o = new ResizeObserver(() => {
-      const { width: g, height: f } = t.getBoundingClientRect();
-      n({ width: g, height: f });
+      const { width: g, height: m } = t.getBoundingClientRect();
+      n({ width: g, height: m });
     });
     return o.observe(t), () => {
       o.disconnect();
     };
-  }, [r.state, e, s.getRefState(e)]), e ? { value: i } : {
+  }, [r.state, e && s.getRawElement(e)]), e ? { value: i } : {
     ref: r,
     value: i
   };

package/dist/esm/hooks/useElementSize/useElementSize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useElementSize.mjs","sources":["../../../../src/hooks/useElementSize/useElementSize.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The element size value type */\nexport interface UseElementSizeValue {\n  /** The element's height */\n  height: number;\n  /** The element's width */\n  width: number;\n}\n\n/** The use element size return type */\nexport interface UseElementSizeReturn {\n  value: UseElementSizeValue;\n}\n\nexport interface UseElementSize {\n  (target: HookTarget): UseElementSizeReturn;\n\n  <Target extends Element>(\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseElementSizeReturn;\n}\n\n/**\n * @name useElementSize\n * @description - Hook that observes and returns the width and height of element\n * @category Elements\n * @usage low\n\n * @overload\n * @param {HookTarget} target The target element to observe\n * @returns {UseElementSizeReturn} An object containing the current width and height of the element\n *\n * @example\n * const { value } = useElementSize(ref);\n *\n * @overload\n * @returns { { ref: StateRef<Target> } & UseElementSizeReturn } An object containing the current width and height of the element\n *\n * @example\n * const { ref, value } = useElementSize();\n */\nexport const useElementSize = ((...params: any[]) => {\n  const target = params[0] as HookTarget | undefined;\n  const [size, setSize] = useState({ width: 0, height: 0 });\n  const internalRef = useRefState<Element>();\n\n  useIsomorphicLayoutEffect(() => {\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n    if (!element) return;\n\n    const { width, height } = element.getBoundingClientRect();\n    setSize({\n      width,\n      height\n    });\n\n    const observer = new ResizeObserver(() => {\n      const { width, height } = element.getBoundingClientRect();\n      setSize({ width, height });\n    });\n\n    observer.observe(element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [internalRef.state, target, isTarget.getRefState(target)]);\n\n  if (target) return { value: size };\n  return {\n    ref: internalRef,\n    value: size\n  };\n}) as UseElementSize;\n"],"names":["useElementSize","params","target","size","setSize","useState","internalRef","useRefState","useIsomorphicLayoutEffect","element","isTarget","width","height","observer"],"mappings":";;;;AAqDO,MAAMA,KAAkB,IAAIC,MAAkB;AACnD,QAAMC,IAASD,EAAO,CAAC,GACjB,CAACE,GAAMC,CAAO,IAAIC,EAAS,EAAE,OAAO,GAAG,QAAQ,GAAG,GAClDC,IAAcC,EAAA;AAyBpB,SAvBAC,EAA0B,MAAM;AAC9B,UAAMC,IAAWP,IAASQ,EAAS,WAAWR,CAAM,IAAII,EAAY;AAEpE,QAAI,CAACG,EAAS;AAEd,UAAM,EAAE,OAAAE,GAAO,QAAAC,MAAWH,EAAQ,sBAAA;AAClC,IAAAL,EAAQ;AAAA,MACN,OAAAO;AAAA,MACA,QAAAC;AAAA,IAAA,CACD;AAED,UAAMC,IAAW,IAAI,eAAe,MAAM;AACxC,YAAM,EAAE,OAAAF,GAAO,QAAAC,EAAAA,IAAWH,EAAQ,sBAAA;AAClC,MAAAL,EAAQ,EAAE,OAAAO,GAAO,QAAAC,GAAQ;AAAA,IAAA,CAC1B;AAED,WAAAC,EAAS,QAAQJ,CAAO,GAEjB,MAAM;AACX,MAAAI,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACP,EAAY,OAAOJ,GAAQQ,EAAS,YAAYR,CAAM,CAAC,CAAC,GAExDA,IAAe,EAAE,OAAOC,EAAA,IACrB;AAAA,IACL,KAAKG;AAAA,IACL,OAAOH;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"useElementSize.mjs","sources":["../../../../src/hooks/useElementSize/useElementSize.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The element size value type */\nexport interface UseElementSizeValue {\n  /** The element's height */\n  height: number;\n  /** The element's width */\n  width: number;\n}\n\n/** The use element size return type */\nexport interface UseElementSizeReturn {\n  value: UseElementSizeValue;\n}\n\nexport interface UseElementSize {\n  (target: HookTarget): UseElementSizeReturn;\n\n  <Target extends Element>(\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseElementSizeReturn;\n}\n\n/**\n * @name useElementSize\n * @description - Hook that observes and returns the width and height of element\n * @category Elements\n * @usage low\n\n * @overload\n * @param {HookTarget} target The target element to observe\n * @returns {UseElementSizeReturn} An object containing the current width and height of the element\n *\n * @example\n * const { value } = useElementSize(ref);\n *\n * @overload\n * @returns { { ref: StateRef<Target> } & UseElementSizeReturn } An object containing the current width and height of the element\n *\n * @example\n * const { ref, value } = useElementSize();\n */\nexport const useElementSize = ((...params: any[]) => {\n  const target = params[0] as HookTarget | undefined;\n  const [size, setSize] = useState({ width: 0, height: 0 });\n  const internalRef = useRefState<Element>();\n\n  useIsomorphicLayoutEffect(() => {\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n    if (!element) return;\n\n    const { width, height } = element.getBoundingClientRect();\n    setSize({\n      width,\n      height\n    });\n\n    const observer = new ResizeObserver(() => {\n      const { width, height } = element.getBoundingClientRect();\n      setSize({ width, height });\n    });\n\n    observer.observe(element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [internalRef.state, target && isTarget.getRawElement(target)]);\n\n  if (target) return { value: size };\n  return {\n    ref: internalRef,\n    value: size\n  };\n}) as UseElementSize;\n"],"names":["useElementSize","params","target","size","setSize","useState","internalRef","useRefState","useIsomorphicLayoutEffect","element","isTarget","width","height","observer"],"mappings":";;;;AAqDO,MAAMA,KAAkB,IAAIC,MAAkB;AACnD,QAAMC,IAASD,EAAO,CAAC,GACjB,CAACE,GAAMC,CAAO,IAAIC,EAAS,EAAE,OAAO,GAAG,QAAQ,GAAG,GAClDC,IAAcC,EAAA;AAyBpB,SAvBAC,EAA0B,MAAM;AAC9B,UAAMC,IAAWP,IAASQ,EAAS,WAAWR,CAAM,IAAII,EAAY;AAEpE,QAAI,CAACG,EAAS;AAEd,UAAM,EAAE,OAAAE,GAAO,QAAAC,MAAWH,EAAQ,sBAAA;AAClC,IAAAL,EAAQ;AAAA,MACN,OAAAO;AAAA,MACA,QAAAC;AAAA,IAAA,CACD;AAED,UAAMC,IAAW,IAAI,eAAe,MAAM;AACxC,YAAM,EAAE,OAAAF,GAAO,QAAAC,EAAAA,IAAWH,EAAQ,sBAAA;AAClC,MAAAL,EAAQ,EAAE,OAAAO,GAAO,QAAAC,GAAQ;AAAA,IAAA,CAC1B;AAED,WAAAC,EAAS,QAAQJ,CAAO,GAEjB,MAAM;AACX,MAAAI,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACP,EAAY,OAAOJ,KAAUQ,EAAS,cAAcR,CAAM,CAAC,CAAC,GAE5DA,IAAe,EAAE,OAAOC,EAAA,IACrB;AAAA,IACL,KAAKG;AAAA,IACL,OAAOH;AAAA,EAAA;AAEX;"}

package/dist/esm/hooks/useEventListener/useEventListener.mjs

@@ -1,20 +1,20 @@
-import { useRef as d, useEffect as E } from "react";
+import { useRef as d, useEffect as R } from "react";
 import { useRefState as g } from "../useRefState/useRefState.mjs";
 import { isTarget as i } from "../../utils/helpers/isTarget.mjs";
-const w = ((...e) => {
-  const t = i(e[0]) ? e[0] : void 0, r = t ? e[1] : e[0], s = t ? e[2] : e[1], n = t ? e[3] : e[2], c = n?.enabled ?? !0, o = g(), f = d(s);
-  f.current = s;
+const b = ((...e) => {
+  const t = i(e[0]) ? e[0] : void 0, r = t ? e[1] : e[0], s = t ? e[2] : e[1], n = t ? e[3] : e[2], c = n?.enabled ?? !0, o = g(), u = d(s);
+  u.current = s;
   const v = d(n);
-  if (v.current = n, E(() => {
+  if (v.current = n, R(() => {
     if (!c) return;
-    const u = (t ? i.getElement(t) : o.current) ?? window, l = (R) => f.current(R);
-    return u.addEventListener(r, l, n), () => {
-      u.removeEventListener(r, l, n);
+    const f = (t ? i.getElement(t) : o.current) ?? window, l = (E) => u.current(E);
+    return f.addEventListener(r, l, n), () => {
+      f.removeEventListener(r, l, n);
     };
-  }, [t, o.state, i.getRefState(t), r, c]), !t)
+  }, [t && i.getRawElement(t), o.state, r, c]), !t)
     return o;
 });
 export {
-  w as useEventListener
+  b as useEventListener
 };
 //# sourceMappingURL=useEventListener.mjs.map

package/dist/esm/hooks/useEventListener/useEventListener.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListener.mjs","sources":["../../../../src/hooks/useEventListener/useEventListener.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use event listener options */\nexport type UseEventListenerOptions = {\n  enabled?: boolean;\n} & AddEventListenerOptions;\n\n/** The use event listener return type */\nexport type UseEventListenerReturn<Target extends Element> = StateRef<Target>;\n\nexport interface UseEventListener {\n  <Event extends keyof WindowEventMap = keyof WindowEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Window, event: WindowEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Document, event: DocumentEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Element, event: HTMLElementEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n    event: Event,\n    listener: (this: Target, event: HTMLElementEventMap[Event]) => void,\n    options?: UseEventListenerOptions,\n    target?: never\n  ): UseEventListenerReturn<Target>;\n\n  <\n    Target extends Element,\n    Event extends keyof MediaQueryListEventMap = keyof MediaQueryListEventMap\n  >(\n    event: Event,\n    listener: (this: Target, event: MediaQueryListEventMap[Event]) => void,\n    options?: UseEventListenerOptions,\n    target?: never\n  ): UseEventListenerReturn<Target>;\n}\n\n/**\n * @name useEventListener\n * @description - Hook that attaches an event listener to the specified target\n * @category Browser\n * @usage necessary\n\n * @overload\n * @template Event Key of window event map\n * @param {Window} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Window, event: WindowEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(window, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @param {Document} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Document, event: DocumentEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(document, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {HookTarget} target The target element to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(ref, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event] | MediaQueryListEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {UseEventListenerReturn<Target>} A reference to the target element\n *\n * @example\n * const ref = useEventListener('click', () => console.log('click'));\n */\nexport const useEventListener = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const event = (target ? params[1] : params[0]) as string;\n  const listener = (target ? params[2] : params[1]) as (...arg: any[]) => undefined | void;\n  const options = (target ? params[3] : params[2]) as UseEventListenerOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n\n  const internalRef = useRefState();\n  const internalListenerRef = useRef(listener);\n  internalListenerRef.current = listener;\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const element =\n      ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n    const listener = (event: Event) => internalListenerRef.current(event);\n\n    element.addEventListener(event, listener, options);\n    return () => {\n      element.removeEventListener(event, listener, options);\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target), event, enabled]);\n\n  if (target) return;\n  return internalRef;\n}) as UseEventListener;\n"],"names":["useEventListener","params","target","isTarget","event","listener","options","enabled","internalRef","useRefState","internalListenerRef","useRef","internalOptionsRef","useEffect","element"],"mappings":";;;AA6GO,MAAMA,KAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAASF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACtCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAUD,GAAS,WAAW,IAE9BE,IAAcC,EAAA,GACdC,IAAsBC,EAAON,CAAQ;AAC3C,EAAAK,EAAoB,UAAUL;AAC9B,QAAMO,IAAqBD,EAAOL,CAAO;AAiBzC,MAhBAM,EAAmB,UAAUN,GAE7BO,EAAU,MAAM;AACd,QAAI,CAACN,EAAS;AAEd,UAAMO,KACFZ,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY,YAAwB,QAEzEH,IAAW,CAACD,MAAiBM,EAAoB,QAAQN,CAAK;AAEpE,WAAAU,EAAQ,iBAAiBV,GAAOC,GAAUC,CAAO,GAC1C,MAAM;AACX,MAAAQ,EAAQ,oBAAoBV,GAAOC,GAAUC,CAAO;AAAA,IAAA;AAAA,EACtD,GACC,CAACJ,GAAQM,EAAY,OAAOL,EAAS,YAAYD,CAAM,GAAGE,GAAOG,CAAO,CAAC,GAExE,CAAAL;AACJ,WAAOM;AACT;"}
+{"version":3,"file":"useEventListener.mjs","sources":["../../../../src/hooks/useEventListener/useEventListener.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use event listener options */\nexport type UseEventListenerOptions = {\n  enabled?: boolean;\n} & AddEventListenerOptions;\n\n/** The use event listener return type */\nexport type UseEventListenerReturn<Target extends Element> = StateRef<Target>;\n\nexport interface UseEventListener {\n  <Event extends keyof WindowEventMap = keyof WindowEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Window, event: WindowEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Document, event: DocumentEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n    target: HookTarget,\n    event: Event,\n    listener: (this: Element, event: HTMLElementEventMap[Event]) => void,\n    options?: UseEventListenerOptions\n  ): void;\n\n  <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n    event: Event,\n    listener: (this: Target, event: HTMLElementEventMap[Event]) => void,\n    options?: UseEventListenerOptions,\n    target?: never\n  ): UseEventListenerReturn<Target>;\n\n  <\n    Target extends Element,\n    Event extends keyof MediaQueryListEventMap = keyof MediaQueryListEventMap\n  >(\n    event: Event,\n    listener: (this: Target, event: MediaQueryListEventMap[Event]) => void,\n    options?: UseEventListenerOptions,\n    target?: never\n  ): UseEventListenerReturn<Target>;\n}\n\n/**\n * @name useEventListener\n * @description - Hook that attaches an event listener to the specified target\n * @category Browser\n * @usage necessary\n\n * @overload\n * @template Event Key of window event map\n * @param {Window} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Window, event: WindowEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(window, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @param {Document} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Document, event: DocumentEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(document, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {HookTarget} target The target element to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(ref, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event] | MediaQueryListEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {UseEventListenerReturn<Target>} A reference to the target element\n *\n * @example\n * const ref = useEventListener('click', () => console.log('click'));\n */\nexport const useEventListener = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const event = (target ? params[1] : params[0]) as string;\n  const listener = (target ? params[2] : params[1]) as (...arg: any[]) => undefined | void;\n  const options = (target ? params[3] : params[2]) as UseEventListenerOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n\n  const internalRef = useRefState();\n  const internalListenerRef = useRef(listener);\n  internalListenerRef.current = listener;\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    const element =\n      ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n    const listener = (event: Event) => internalListenerRef.current(event);\n\n    element.addEventListener(event, listener, options);\n    return () => {\n      element.removeEventListener(event, listener, options);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state, event, enabled]);\n\n  if (target) return;\n  return internalRef;\n}) as UseEventListener;\n"],"names":["useEventListener","params","target","isTarget","event","listener","options","enabled","internalRef","useRefState","internalListenerRef","useRef","internalOptionsRef","useEffect","element"],"mappings":";;;AA6GO,MAAMA,KAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAASF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACtCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAUD,GAAS,WAAW,IAE9BE,IAAcC,EAAA,GACdC,IAAsBC,EAAON,CAAQ;AAC3C,EAAAK,EAAoB,UAAUL;AAC9B,QAAMO,IAAqBD,EAAOL,CAAO;AAiBzC,MAhBAM,EAAmB,UAAUN,GAE7BO,EAAU,MAAM;AACd,QAAI,CAACN,EAAS;AAEd,UAAMO,KACFZ,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY,YAAwB,QAEzEH,IAAW,CAACD,MAAiBM,EAAoB,QAAQN,CAAK;AAEpE,WAAAU,EAAQ,iBAAiBV,GAAOC,GAAUC,CAAO,GAC1C,MAAM;AACX,MAAAQ,EAAQ,oBAAoBV,GAAOC,GAAUC,CAAO;AAAA,IAAA;AAAA,EACtD,GACC,CAACJ,KAAUC,EAAS,cAAcD,CAAM,GAAGM,EAAY,OAAOJ,GAAOG,CAAO,CAAC,GAE5E,CAAAL;AACJ,WAAOM;AACT;"}

package/dist/esm/hooks/useFocus/useFocus.mjs

@@ -1,28 +1,28 @@
-import { useState as g, useRef as R, useEffect as m } from "react";
+import { useState as R, useRef as F, useEffect as g } from "react";
 import { useRefState as L } from "../useRefState/useRefState.mjs";
 import { isTarget as l } from "../../utils/helpers/isTarget.mjs";
-const B = ((...e) => {
-  const t = l(e[0]) ? e[0] : void 0, o = t ? typeof e[1] == "object" ? e[1] : { onFocus: e[1] } : typeof e[0] == "object" ? e[0] : { onFocus: e[0] }, b = o?.enabled ?? !0, d = o?.initialValue ?? !1, [a, u] = g(d), c = L(), f = R(o);
+const S = ((...e) => {
+  const t = l(e[0]) ? e[0] : void 0, o = t ? typeof e[1] == "object" ? e[1] : { onFocus: e[1] } : typeof e[0] == "object" ? e[0] : { onFocus: e[0] }, b = o?.enabled ?? !0, d = o?.initialValue ?? !1, [a, u] = R(d), c = L(), f = F(o);
   f.current = o;
-  const r = R(null), i = () => {
+  const r = F(null), i = () => {
     r.current && (r.current.focus(), u(!0));
   }, v = () => {
     r.current && (r.current.blur(), u(!1));
   };
-  return m(() => {
+  return g(() => {
     if (!b || !t && !c.state) return;
     const n = t ? l.getElement(t) : c.current;
     if (!n) return;
     r.current = n;
     const E = (s) => {
       f.current?.onFocus?.(s), (!i || s.target.matches?.(":focus-visible")) && u(!0);
-    }, F = (s) => {
+    }, m = (s) => {
       f.current?.onBlur?.(s), u(!1);
     };
-    return d && n.focus(), n.addEventListener("focus", E), n.addEventListener("blur", F), () => {
-      n.removeEventListener("focus", E), n.removeEventListener("blur", F);
+    return d && n.focus(), n.addEventListener("focus", E), n.addEventListener("blur", m), () => {
+      n.removeEventListener("focus", E), n.removeEventListener("blur", m);
     };
-  }, [t, c.state, b, l.getRefState(t)]), t ? { focus: i, blur: v, focused: a } : {
+  }, [t && l.getRawElement(t), c.state, b]), t ? { focus: i, blur: v, focused: a } : {
     ref: c,
     focus: i,
     blur: v,
@@ -30,6 +30,6 @@ const B = ((...e) => {
   };
 });
 export {
-  B as useFocus
+  S as useFocus
 };
 //# sourceMappingURL=useFocus.mjs.map

package/dist/esm/hooks/useFocus/useFocus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFocus.mjs","sources":["../../../../src/hooks/useFocus/useFocus.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use focus options type */\nexport interface UseFocusOptions {\n  /** The enabled state of the focus hook */\n  enabled?: boolean;\n  /** The initial focus state of the target */\n  initialValue?: boolean;\n  /** The on blur callback */\n  onBlur?: (event: FocusEvent) => void;\n  /** The on focus callback */\n  onFocus?: (event: FocusEvent) => void;\n}\n\n/** The use focus return type */\nexport interface UseFocusReturn {\n  /** The boolean state value of the target */\n  focused: boolean;\n  /** Blur the target */\n  blur: () => void;\n  /** Focus the target */\n  focus: () => void;\n}\n\nexport interface UseFocus {\n  (target: HookTarget, callback?: (event: FocusEvent) => void): UseFocusReturn;\n\n  (target: HookTarget, options?: UseFocusOptions): UseFocusReturn;\n\n  <Target extends Element>(\n    callback?: (event: FocusEvent) => void,\n    target?: never\n  ): UseFocusReturn & { ref: StateRef<Target> };\n\n  <Target extends Element>(\n    options?: UseFocusOptions,\n    target?: never\n  ): UseFocusReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFocus\n * @description - Hook that allows you to focus on a specific element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref);\n *\n * @overload\n * @template Target The target element\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus();\n */\nexport const useFocus = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onFocus: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onFocus: params[0] }\n  ) as UseFocusOptions | undefined;\n  const enabled = options?.enabled ?? true;\n  const initialValue = options?.initialValue ?? false;\n\n  const [focused, setFocused] = useState(initialValue);\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  const elementRef = useRef<HTMLElement | null>(null);\n\n  const focus = () => {\n    if (!elementRef.current) return;\n    elementRef.current.focus();\n    setFocused(true);\n  };\n\n  const blur = () => {\n    if (!elementRef.current) return;\n    elementRef.current.blur();\n    setFocused(false);\n  };\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n    if (!element) return;\n\n    elementRef.current = element;\n\n    const onFocus = (event: FocusEvent) => {\n      internalOptionsRef.current?.onFocus?.(event);\n      if (!focus || (event.target as HTMLElement).matches?.(':focus-visible')) setFocused(true);\n    };\n\n    const onBlur = (event: FocusEvent) => {\n      internalOptionsRef.current?.onBlur?.(event);\n      setFocused(false);\n    };\n\n    if (initialValue) element.focus();\n\n    element.addEventListener('focus', onFocus);\n    element.addEventListener('blur', onBlur);\n\n    return () => {\n      element.removeEventListener('focus', onFocus);\n      element.removeEventListener('blur', onBlur);\n    };\n  }, [target, internalRef.state, enabled, isTarget.getRefState(target)]);\n\n  if (target) return { focus, blur, focused };\n  return {\n    ref: internalRef,\n    focus,\n    blur,\n    focused\n  };\n}) as UseFocus;\n"],"names":["useFocus","params","target","isTarget","options","enabled","initialValue","focused","setFocused","useState","internalRef","useRefState","internalOptionsRef","useRef","elementRef","focus","blur","useEffect","element","onFocus","event","onBlur"],"mappings":";;;AA4FO,MAAMA,KAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,IACrB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,GAErBI,IAAUD,GAAS,WAAW,IAC9BE,IAAeF,GAAS,gBAAgB,IAExC,CAACG,GAASC,CAAU,IAAIC,EAASH,CAAY,GAC7CI,IAAcC,EAAA,GACdC,IAAqBC,EAAOT,CAAO;AACzC,EAAAQ,EAAmB,UAAUR;AAE7B,QAAMU,IAAaD,EAA2B,IAAI,GAE5CE,IAAQ,MAAM;AAClB,IAAKD,EAAW,YAChBA,EAAW,QAAQ,MAAA,GACnBN,EAAW,EAAI;AAAA,EAAA,GAGXQ,IAAO,MAAM;AACjB,IAAKF,EAAW,YAChBA,EAAW,QAAQ,KAAA,GACnBN,EAAW,EAAK;AAAA,EAAA;AA+BlB,SA5BAS,EAAU,MAAM;AACd,QAAI,CAACZ,KAAY,CAACH,KAAU,CAACQ,EAAY,MAAQ;AACjD,UAAMQ,IAAWhB,IAASC,EAAS,WAAWD,CAAM,IAAIQ,EAAY;AACpE,QAAI,CAACQ,EAAS;AAEd,IAAAJ,EAAW,UAAUI;AAErB,UAAMC,IAAU,CAACC,MAAsB;AACrC,MAAAR,EAAmB,SAAS,UAAUQ,CAAK,IACvC,CAACL,KAAUK,EAAM,OAAuB,UAAU,gBAAgB,QAAc,EAAI;AAAA,IAAA,GAGpFC,IAAS,CAACD,MAAsB;AACpC,MAAAR,EAAmB,SAAS,SAASQ,CAAK,GAC1CZ,EAAW,EAAK;AAAA,IAAA;AAGlB,WAAIF,OAAsB,MAAA,GAE1BY,EAAQ,iBAAiB,SAASC,CAAO,GACzCD,EAAQ,iBAAiB,QAAQG,CAAM,GAEhC,MAAM;AACX,MAAAH,EAAQ,oBAAoB,SAASC,CAAO,GAC5CD,EAAQ,oBAAoB,QAAQG,CAAM;AAAA,IAAA;AAAA,EAC5C,GACC,CAACnB,GAAQQ,EAAY,OAAOL,GAASF,EAAS,YAAYD,CAAM,CAAC,CAAC,GAEjEA,IAAe,EAAE,OAAAa,GAAO,MAAAC,GAAM,SAAAT,EAAA,IAC3B;AAAA,IACL,KAAKG;AAAA,IACL,OAAAK;AAAA,IACA,MAAAC;AAAA,IACA,SAAAT;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useFocus.mjs","sources":["../../../../src/hooks/useFocus/useFocus.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use focus options type */\nexport interface UseFocusOptions {\n  /** The enabled state of the focus hook */\n  enabled?: boolean;\n  /** The initial focus state of the target */\n  initialValue?: boolean;\n  /** The on blur callback */\n  onBlur?: (event: FocusEvent) => void;\n  /** The on focus callback */\n  onFocus?: (event: FocusEvent) => void;\n}\n\n/** The use focus return type */\nexport interface UseFocusReturn {\n  /** The boolean state value of the target */\n  focused: boolean;\n  /** Blur the target */\n  blur: () => void;\n  /** Focus the target */\n  focus: () => void;\n}\n\nexport interface UseFocus {\n  (target: HookTarget, callback?: (event: FocusEvent) => void): UseFocusReturn;\n\n  (target: HookTarget, options?: UseFocusOptions): UseFocusReturn;\n\n  <Target extends Element>(\n    callback?: (event: FocusEvent) => void,\n    target?: never\n  ): UseFocusReturn & { ref: StateRef<Target> };\n\n  <Target extends Element>(\n    options?: UseFocusOptions,\n    target?: never\n  ): UseFocusReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFocus\n * @description - Hook that allows you to focus on a specific element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref);\n *\n * @overload\n * @template Target The target element\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus();\n */\nexport const useFocus = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onFocus: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onFocus: params[0] }\n  ) as UseFocusOptions | undefined;\n  const enabled = options?.enabled ?? true;\n  const initialValue = options?.initialValue ?? false;\n\n  const [focused, setFocused] = useState(initialValue);\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  const elementRef = useRef<HTMLElement | null>(null);\n\n  const focus = () => {\n    if (!elementRef.current) return;\n    elementRef.current.focus();\n    setFocused(true);\n  };\n\n  const blur = () => {\n    if (!elementRef.current) return;\n    elementRef.current.blur();\n    setFocused(false);\n  };\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n    if (!element) return;\n\n    elementRef.current = element;\n\n    const onFocus = (event: FocusEvent) => {\n      internalOptionsRef.current?.onFocus?.(event);\n      if (!focus || (event.target as HTMLElement).matches?.(':focus-visible')) setFocused(true);\n    };\n\n    const onBlur = (event: FocusEvent) => {\n      internalOptionsRef.current?.onBlur?.(event);\n      setFocused(false);\n    };\n\n    if (initialValue) element.focus();\n\n    element.addEventListener('focus', onFocus);\n    element.addEventListener('blur', onBlur);\n\n    return () => {\n      element.removeEventListener('focus', onFocus);\n      element.removeEventListener('blur', onBlur);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state, enabled]);\n\n  if (target) return { focus, blur, focused };\n  return {\n    ref: internalRef,\n    focus,\n    blur,\n    focused\n  };\n}) as UseFocus;\n"],"names":["useFocus","params","target","isTarget","options","enabled","initialValue","focused","setFocused","useState","internalRef","useRefState","internalOptionsRef","useRef","elementRef","focus","blur","useEffect","element","onFocus","event","onBlur"],"mappings":";;;AA4FO,MAAMA,KAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,IACrB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,GAErBI,IAAUD,GAAS,WAAW,IAC9BE,IAAeF,GAAS,gBAAgB,IAExC,CAACG,GAASC,CAAU,IAAIC,EAASH,CAAY,GAC7CI,IAAcC,EAAA,GACdC,IAAqBC,EAAOT,CAAO;AACzC,EAAAQ,EAAmB,UAAUR;AAE7B,QAAMU,IAAaD,EAA2B,IAAI,GAE5CE,IAAQ,MAAM;AAClB,IAAKD,EAAW,YAChBA,EAAW,QAAQ,MAAA,GACnBN,EAAW,EAAI;AAAA,EAAA,GAGXQ,IAAO,MAAM;AACjB,IAAKF,EAAW,YAChBA,EAAW,QAAQ,KAAA,GACnBN,EAAW,EAAK;AAAA,EAAA;AA+BlB,SA5BAS,EAAU,MAAM;AACd,QAAI,CAACZ,KAAY,CAACH,KAAU,CAACQ,EAAY,MAAQ;AACjD,UAAMQ,IAAWhB,IAASC,EAAS,WAAWD,CAAM,IAAIQ,EAAY;AACpE,QAAI,CAACQ,EAAS;AAEd,IAAAJ,EAAW,UAAUI;AAErB,UAAMC,IAAU,CAACC,MAAsB;AACrC,MAAAR,EAAmB,SAAS,UAAUQ,CAAK,IACvC,CAACL,KAAUK,EAAM,OAAuB,UAAU,gBAAgB,QAAc,EAAI;AAAA,IAAA,GAGpFC,IAAS,CAACD,MAAsB;AACpC,MAAAR,EAAmB,SAAS,SAASQ,CAAK,GAC1CZ,EAAW,EAAK;AAAA,IAAA;AAGlB,WAAIF,OAAsB,MAAA,GAE1BY,EAAQ,iBAAiB,SAASC,CAAO,GACzCD,EAAQ,iBAAiB,QAAQG,CAAM,GAEhC,MAAM;AACX,MAAAH,EAAQ,oBAAoB,SAASC,CAAO,GAC5CD,EAAQ,oBAAoB,QAAQG,CAAM;AAAA,IAAA;AAAA,EAC5C,GACC,CAACnB,KAAUC,EAAS,cAAcD,CAAM,GAAGQ,EAAY,OAAOL,CAAO,CAAC,GAErEH,IAAe,EAAE,OAAAa,GAAO,MAAAC,GAAM,SAAAT,EAAA,IAC3B;AAAA,IACL,KAAKG;AAAA,IACL,OAAAK;AAAA,IACA,MAAAC;AAAA,IACA,SAAAT;AAAA,EAAA;AAEJ;"}

package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs

@@ -5,19 +5,19 @@ import { isTarget as l } from "../../utils/helpers/isTarget.mjs";
 const S = "a, input, select, textarea, button, object, [tabindex]", g = (t) => Array.from(t.querySelectorAll(S)).filter((o) => {
   const n = o;
   return n.tabIndex !== -1 && !n.hidden && n.style.display !== "none";
-}), x = (t) => {
+}), w = (t) => {
   const e = t.querySelector("[data-autofocus]");
   if (e) return e.focus();
   const o = g(t);
   o.length && o[0].focus();
-}, k = ((...t) => {
+}, T = ((...t) => {
   const e = l(t[0]) ? t[0] : void 0, o = e ? t[1] : t[0], [n, c] = p(o), u = h(), i = () => c(!0), f = () => c(!1), a = () => c((r) => !r);
   return v(() => {
     if (!n) return;
     const r = e ? l.getElement(e) : u.current;
     if (!r) return;
     const m = r;
-    x(m);
+    w(m);
     const E = (s) => {
       if (s.key !== "Tab") return;
       const [d, ...y] = g(m);
@@ -28,10 +28,10 @@ const S = "a, input, select, textarea, button, object, [tabindex]", g = (t) => A
     return document.addEventListener("keydown", E), () => {
       document.removeEventListener("keydown", E);
     };
-  }, [n, e, u.state, l.getRefState(e)]), e ? { active: n, enable: i, disable: f, toggle: a } : { active: n, enable: i, disable: f, toggle: a, ref: u };
+  }, [n, e && l.getRawElement(e), u.state]), e ? { active: n, enable: i, disable: f, toggle: a } : { active: n, enable: i, disable: f, toggle: a, ref: u };
 });
 export {
   S as FOCUS_SELECTOR,
-  k as useFocusTrap
+  T as useFocusTrap
 };
 //# sourceMappingURL=useFocusTrap.mjs.map

package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.mjs","sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nconst getFocusableElements = (element: HTMLElement) => {\n  const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));\n  return elements.filter((element) => {\n    const htmlEl = element as HTMLElement;\n    return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';\n  }) as HTMLElement[];\n};\n\nconst focusElement = (element: HTMLElement) => {\n  const autofocusElement = element.querySelector('[data-autofocus]') as HTMLElement;\n  if (autofocusElement) return autofocusElement.focus();\n  const focusableElements = getFocusableElements(element);\n  if (focusableElements.length) focusableElements[0].focus();\n};\n\n/** The use focus trap return type */\nexport interface UseFocusTrapReturn {\n  /** Whether focus trap is active */\n  active: boolean;\n  /** Disable focus trap */\n  disable: () => void;\n  /** Enable focus trap */\n  enable: () => void;\n  /** Toggle focus trap */\n  toggle: () => void;\n}\n\nexport interface UseFocusTrap {\n  (target: HookTarget, active?: boolean): UseFocusTrapReturn;\n\n  <Target extends HTMLElement>(\n    active?: boolean,\n    target?: never\n  ): UseFocusTrapReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useFocusTrap\n * @description - Hook that traps focus within a given element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element for focus trap\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn} Object with control methods and state\n *\n * @example\n * const { active, disable, toggle, enable } = useFocusTrap(ref, true);\n *\n * @overload\n * @template Target The target element type\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls\n *\n * @example\n * const { ref, active, disable, toggle, enable } = useFocusTrap(true);\n */\nexport const useFocusTrap = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const initialActive = target ? params[1] : params[0];\n\n  const [active, setActive] = useState(initialActive);\n  const internalRef = useRefState<HTMLElement>();\n\n  const enable = () => setActive(true);\n  const disable = () => setActive(false);\n  const toggle = () => setActive((prevActive: boolean) => !prevActive);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!active) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const htmlElement = element as HTMLElement;\n    focusElement(htmlElement);\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab') return;\n\n      const [firstElement, ...restElements] = getFocusableElements(htmlElement);\n      if (!restElements.length) return;\n\n      const lastElement = restElements.at(-1)!;\n\n      if (event.shiftKey && document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n      }\n\n      if (document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [active, target, internalRef.state, isTarget.getRefState(target)]);\n\n  if (target) return { active, enable, disable, toggle };\n  return { active, enable, disable, toggle, ref: internalRef };\n}) as UseFocusTrap;\n"],"names":["FOCUS_SELECTOR","getFocusableElements","element","htmlEl","focusElement","autofocusElement","focusableElements","useFocusTrap","params","target","isTarget","initialActive","active","setActive","useState","internalRef","useRefState","enable","disable","toggle","prevActive","useIsomorphicLayoutEffect","htmlElement","onKeyDown","event","firstElement","restElements","lastElement"],"mappings":";;;;AAWO,MAAMA,IAAiB,0DAExBC,IAAuB,CAACC,MACX,MAAM,KAAKA,EAAQ,iBAAiBF,CAAc,CAAC,EACpD,OAAO,CAACE,MAAY;AAClC,QAAMC,IAASD;AACf,SAAOC,EAAO,aAAa,MAAM,CAACA,EAAO,UAAUA,EAAO,MAAM,YAAY;AAAA,CAC7E,GAGGC,IAAe,CAACF,MAAyB;AAC7C,QAAMG,IAAmBH,EAAQ,cAAc,kBAAkB;AACjE,MAAIG,EAAkB,QAAOA,EAAiB,MAAA;AAC9C,QAAMC,IAAoBL,EAAqBC,CAAO;AACtD,EAAII,EAAkB,UAAQA,EAAkB,CAAC,EAAE,MAAA;AACrD,GA+CaC,KAAgB,IAAIC,MAAkB;AACjD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAgBF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE7C,CAACI,GAAQC,CAAS,IAAIC,EAASH,CAAa,GAC5CI,IAAcC,EAAA,GAEdC,IAAS,MAAMJ,EAAU,EAAI,GAC7BK,IAAU,MAAML,EAAU,EAAK,GAC/BM,IAAS,MAAMN,EAAU,CAACO,MAAwB,CAACA,CAAU;AAqCnE,SAnCAC,EAA0B,MAAM;AAC9B,QAAI,CAACT,EAAQ;AAEb,UAAMV,IAAUO,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY;AACnE,QAAI,CAACb,EAAS;AAEd,UAAMoB,IAAcpB;AACpB,IAAAE,EAAakB,CAAW;AAExB,UAAMC,IAAY,CAACC,MAAyB;AAC1C,UAAIA,EAAM,QAAQ,MAAO;AAEzB,YAAM,CAACC,GAAc,GAAGC,CAAY,IAAIzB,EAAqBqB,CAAW;AACxE,UAAI,CAACI,EAAa,OAAQ;AAE1B,YAAMC,IAAcD,EAAa,GAAG,EAAE;AAEtC,MAAIF,EAAM,YAAY,SAAS,kBAAkBC,MAC/CD,EAAM,eAAA,GACNG,EAAY,MAAA,IAGV,SAAS,kBAAkBA,MAC7BH,EAAM,eAAA,GACNC,EAAa,MAAA;AAAA,IACf;AAGF,oBAAS,iBAAiB,WAAWF,CAAS,GAEvC,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAS;AAAA,IAAA;AAAA,EACnD,GACC,CAACX,GAAQH,GAAQM,EAAY,OAAOL,EAAS,YAAYD,CAAM,CAAC,CAAC,GAEhEA,IAAe,EAAE,QAAAG,GAAQ,QAAAK,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IACvC,EAAE,QAAAP,GAAQ,QAAAK,GAAQ,SAAAC,GAAS,QAAAC,GAAQ,KAAKJ,EAAA;AACjD;"}
+{"version":3,"file":"useFocusTrap.mjs","sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nconst getFocusableElements = (element: HTMLElement) => {\n  const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));\n  return elements.filter((element) => {\n    const htmlEl = element as HTMLElement;\n    return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';\n  }) as HTMLElement[];\n};\n\nconst focusElement = (element: HTMLElement) => {\n  const autofocusElement = element.querySelector('[data-autofocus]') as HTMLElement;\n  if (autofocusElement) return autofocusElement.focus();\n  const focusableElements = getFocusableElements(element);\n  if (focusableElements.length) focusableElements[0].focus();\n};\n\n/** The use focus trap return type */\nexport interface UseFocusTrapReturn {\n  /** Whether focus trap is active */\n  active: boolean;\n  /** Disable focus trap */\n  disable: () => void;\n  /** Enable focus trap */\n  enable: () => void;\n  /** Toggle focus trap */\n  toggle: () => void;\n}\n\nexport interface UseFocusTrap {\n  (target: HookTarget, active?: boolean): UseFocusTrapReturn;\n\n  <Target extends HTMLElement>(\n    active?: boolean,\n    target?: never\n  ): UseFocusTrapReturn & {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useFocusTrap\n * @description - Hook that traps focus within a given element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element for focus trap\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn} Object with control methods and state\n *\n * @example\n * const { active, disable, toggle, enable } = useFocusTrap(ref, true);\n *\n * @overload\n * @template Target The target element type\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls\n *\n * @example\n * const { ref, active, disable, toggle, enable } = useFocusTrap(true);\n */\nexport const useFocusTrap = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const initialActive = target ? params[1] : params[0];\n\n  const [active, setActive] = useState(initialActive);\n  const internalRef = useRefState<HTMLElement>();\n\n  const enable = () => setActive(true);\n  const disable = () => setActive(false);\n  const toggle = () => setActive((prevActive: boolean) => !prevActive);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!active) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const htmlElement = element as HTMLElement;\n    focusElement(htmlElement);\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab') return;\n\n      const [firstElement, ...restElements] = getFocusableElements(htmlElement);\n      if (!restElements.length) return;\n\n      const lastElement = restElements.at(-1)!;\n\n      if (event.shiftKey && document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n      }\n\n      if (document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    };\n\n    document.addEventListener('keydown', onKeyDown);\n\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [active, target && isTarget.getRawElement(target), internalRef.state]);\n\n  if (target) return { active, enable, disable, toggle };\n  return { active, enable, disable, toggle, ref: internalRef };\n}) as UseFocusTrap;\n"],"names":["FOCUS_SELECTOR","getFocusableElements","element","htmlEl","focusElement","autofocusElement","focusableElements","useFocusTrap","params","target","isTarget","initialActive","active","setActive","useState","internalRef","useRefState","enable","disable","toggle","prevActive","useIsomorphicLayoutEffect","htmlElement","onKeyDown","event","firstElement","restElements","lastElement"],"mappings":";;;;AAWO,MAAMA,IAAiB,0DAExBC,IAAuB,CAACC,MACX,MAAM,KAAKA,EAAQ,iBAAiBF,CAAc,CAAC,EACpD,OAAO,CAACE,MAAY;AAClC,QAAMC,IAASD;AACf,SAAOC,EAAO,aAAa,MAAM,CAACA,EAAO,UAAUA,EAAO,MAAM,YAAY;AAAA,CAC7E,GAGGC,IAAe,CAACF,MAAyB;AAC7C,QAAMG,IAAmBH,EAAQ,cAAc,kBAAkB;AACjE,MAAIG,EAAkB,QAAOA,EAAiB,MAAA;AAC9C,QAAMC,IAAoBL,EAAqBC,CAAO;AACtD,EAAII,EAAkB,UAAQA,EAAkB,CAAC,EAAE,MAAA;AACrD,GA+CaC,KAAgB,IAAIC,MAAkB;AACjD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAgBF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE7C,CAACI,GAAQC,CAAS,IAAIC,EAASH,CAAa,GAC5CI,IAAcC,EAAA,GAEdC,IAAS,MAAMJ,EAAU,EAAI,GAC7BK,IAAU,MAAML,EAAU,EAAK,GAC/BM,IAAS,MAAMN,EAAU,CAACO,MAAwB,CAACA,CAAU;AAqCnE,SAnCAC,EAA0B,MAAM;AAC9B,QAAI,CAACT,EAAQ;AAEb,UAAMV,IAAUO,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY;AACnE,QAAI,CAACb,EAAS;AAEd,UAAMoB,IAAcpB;AACpB,IAAAE,EAAakB,CAAW;AAExB,UAAMC,IAAY,CAACC,MAAyB;AAC1C,UAAIA,EAAM,QAAQ,MAAO;AAEzB,YAAM,CAACC,GAAc,GAAGC,CAAY,IAAIzB,EAAqBqB,CAAW;AACxE,UAAI,CAACI,EAAa,OAAQ;AAE1B,YAAMC,IAAcD,EAAa,GAAG,EAAE;AAEtC,MAAIF,EAAM,YAAY,SAAS,kBAAkBC,MAC/CD,EAAM,eAAA,GACNG,EAAY,MAAA,IAGV,SAAS,kBAAkBA,MAC7BH,EAAM,eAAA,GACNC,EAAa,MAAA;AAAA,IACf;AAGF,oBAAS,iBAAiB,WAAWF,CAAS,GAEvC,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAS;AAAA,IAAA;AAAA,EACnD,GACC,CAACX,GAAQH,KAAUC,EAAS,cAAcD,CAAM,GAAGM,EAAY,KAAK,CAAC,GAEpEN,IAAe,EAAE,QAAAG,GAAQ,QAAAK,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IACvC,EAAE,QAAAP,GAAQ,QAAAK,GAAQ,SAAAC,GAAS,QAAAC,GAAQ,KAAKJ,EAAA;AACjD;"}

package/dist/esm/hooks/useHotkeys/useHotkeys.mjs

@@ -9,26 +9,25 @@ const h = (o, t) => o.toLowerCase().split(/[+_,\-]/g).map((r) => r.trim()).every
 ), M = ((...o) => {
   const t = d(o[0]) ? o[0] : void 0, r = t ? o[1] : o[0], s = t ? o[2] : o[1], y = t ? o[3] : o[2], i = E(window), n = m([]), u = y?.enabled ?? !0, f = L((e) => {
     if (!u || n.current.some(({ code: c }) => c === e.code)) return;
-    const l = y?.alias?.[e.key] ?? e.code, k = [...n.current, { key: e.key, code: e.code, alias: l }];
+    const a = y?.alias?.[e.key] ?? e.code, k = [...n.current, { key: e.key, code: e.code, alias: a }];
     n.current = k, r.split(",").map((c) => c.trim()).some((c) => h(c, k)) && (e.preventDefault(), s(e));
-  }), a = L((e) => {
-    u && (n.current = n.current.filter(({ code: l }) => l !== e.code));
+  }), l = L((e) => {
+    u && (n.current = n.current.filter(({ code: a }) => a !== e.code));
   });
   if (w(() => {
     if (n.current = [], !t && !i.state && !u) return;
     const e = t ? d.getElement(t) : i.current;
     if (e)
-      return e.addEventListener("keydown", f), e.addEventListener("keyup", a), () => {
-        e.removeEventListener("keydown", f), e.removeEventListener("keyup", a);
+      return e.addEventListener("keydown", f), e.addEventListener("keyup", l), () => {
+        e.removeEventListener("keydown", f), e.removeEventListener("keyup", l);
       };
   }, [
-    t,
+    t && d.getRawElement(t),
     i.state,
-    d.getRefState(t),
     u,
     r,
     f,
-    a
+    l
   ]), !t)
     return i;
 });

package/dist/esm/hooks/useHotkeys/useHotkeys.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHotkeys.mjs","sources":["../../../../src/hooks/useHotkeys/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useEvent } from '../useEvent/useEvent';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use hotkeys params type */\nexport interface UseHotkeysOptions {\n  /** Alias map for hotkeys */\n  alias?: Record<string, string>;\n  /** Enable or disable the event listeners */\n  enabled?: boolean;\n}\n\nexport const isHotkeyMatch = (hotkey: string, keys: UseHotkeysKey[]) =>\n  hotkey\n    .toLowerCase()\n    .split(/[+_,\\-]/g)\n    .map((key) => key.trim())\n    .every((key) =>\n      keys.find(\n        (updatedKey) =>\n          key === updatedKey.code.toLocaleLowerCase() ||\n          key === updatedKey.key.toLocaleLowerCase() ||\n          key === updatedKey.alias.toLocaleLowerCase()\n      )\n    );\n\n/** The hotkeys string type */\nexport type UseHotkeysHotkeys = string;\n\n/** The hotkey key information */\nexport interface UseHotkeysKey {\n  /** The alias for the key */\n  alias: string;\n  /** The key code */\n  code: string;\n  /** The key value */\n  key: string;\n}\n\n/** The use hotkeys target type */\nexport type UseHotkeysTarget = Element | React.RefObject<Element | null | undefined>;\n\nexport interface UseHotkeys {\n  (\n    target: UseHotkeysTarget,\n    hotkeys: UseHotkeysHotkeys,\n    callback: (event: KeyboardEvent) => void,\n    options?: UseHotkeysOptions\n  ): void;\n\n  <Target extends Element>(\n    hotkeys: UseHotkeysHotkeys,\n    callback: (event: KeyboardEvent) => void,\n    options?: UseHotkeysOptions,\n    target?: never\n  ): StateRef<Target>;\n}\n\n/**\n * @name useHotkeys\n * @description - Hook that listens for hotkeys\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=window] The target element to attach the event listener to\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {void}\n *\n * @example\n * useHotkeys(ref, 'ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * useHotkeys(ref, 'ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n *\n * @overload\n * @template Target The target element\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {StateRef<Target>} A reference to the target element\n *\n * @example\n * const ref = useHotkeys('ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * const ref = useHotkeys('ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n */\nexport const useHotkeys = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const hotkeys = (target ? params[1] : params[0]) as UseHotkeysHotkeys;\n  const callback = (target ? params[2] : params[1]) as (event: KeyboardEvent) => void;\n  const options = (target ? params[3] : params[2]) as UseHotkeysOptions | undefined;\n\n  const internalRef = useRefState(window);\n  const keysRef = useRef<UseHotkeysKey[]>([]);\n  const enabled = options?.enabled ?? true;\n\n  const onKeyDown = useEvent((event: KeyboardEvent) => {\n    if (!enabled) return;\n\n    if (keysRef.current.some(({ code }) => code === event.code)) return;\n\n    const alias = options?.alias?.[event.key] ?? event.code;\n    const updatedKeys = [...keysRef.current, { key: event.key, code: event.code, alias }];\n    keysRef.current = updatedKeys;\n\n    const hotkeysList = hotkeys.split(',').map((h) => h.trim());\n    const isMatch = hotkeysList.some((hotkey) => isHotkeyMatch(hotkey, updatedKeys));\n    if (!isMatch) return;\n    event.preventDefault();\n    callback(event);\n  });\n\n  const onKeyUp = useEvent((event: KeyboardEvent) => {\n    if (!enabled) return;\n    keysRef.current = keysRef.current.filter(({ code }) => code !== event.code);\n  });\n\n  useEffect(() => {\n    keysRef.current = [];\n    if (!target && !internalRef.state && !enabled) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    element.addEventListener('keydown', onKeyDown as EventListener);\n    element.addEventListener('keyup', onKeyUp as EventListener);\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown as EventListener);\n      element.removeEventListener('keyup', onKeyUp as EventListener);\n    };\n  }, [\n    target,\n    internalRef.state,\n    isTarget.getRefState(target),\n    enabled,\n    hotkeys,\n    onKeyDown,\n    onKeyUp\n  ]);\n\n  if (target) return;\n  return internalRef;\n}) as UseHotkeys;\n"],"names":["isHotkeyMatch","hotkey","keys","key","updatedKey","useHotkeys","params","target","isTarget","hotkeys","callback","options","internalRef","useRefState","keysRef","useRef","enabled","onKeyDown","useEvent","event","code","alias","updatedKeys","h","onKeyUp","useEffect","element"],"mappings":";;;;AAmBO,MAAMA,IAAgB,CAACC,GAAgBC,MAC5CD,EACG,cACA,MAAM,UAAU,EAChB,IAAI,CAACE,MAAQA,EAAI,KAAA,CAAM,EACvB;AAAA,EAAM,CAACA,MACND,EAAK;AAAA,IACH,CAACE,MACCD,MAAQC,EAAW,KAAK,kBAAA,KACxBD,MAAQC,EAAW,IAAI,kBAAA,KACvBD,MAAQC,EAAW,MAAM,kBAAA;AAAA,EAAkB;AAEjD,GAkESC,KAAc,IAAIC,MAAkB;AAC/C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAcC,EAAY,MAAM,GAChCC,IAAUC,EAAwB,EAAE,GACpCC,IAAUL,GAAS,WAAW,IAE9BM,IAAYC,EAAS,CAACC,MAAyB;AAGnD,QAFI,CAACH,KAEDF,EAAQ,QAAQ,KAAK,CAAC,EAAE,MAAAM,QAAWA,MAASD,EAAM,IAAI,EAAG;AAE7D,UAAME,IAAQV,GAAS,QAAQQ,EAAM,GAAG,KAAKA,EAAM,MAC7CG,IAAc,CAAC,GAAGR,EAAQ,SAAS,EAAE,KAAKK,EAAM,KAAK,MAAMA,EAAM,MAAM,OAAAE,GAAO;AAKpF,IAJAP,EAAQ,UAAUQ,GAEEb,EAAQ,MAAM,GAAG,EAAE,IAAI,CAACc,MAAMA,EAAE,MAAM,EAC9B,KAAK,CAACtB,MAAWD,EAAcC,GAAQqB,CAAW,CAAC,MAE/EH,EAAM,eAAA,GACNT,EAASS,CAAK;AAAA,EAAA,CACf,GAEKK,IAAUN,EAAS,CAACC,MAAyB;AACjD,IAAKH,MACLF,EAAQ,UAAUA,EAAQ,QAAQ,OAAO,CAAC,EAAE,MAAAM,QAAWA,MAASD,EAAM,IAAI;AAAA,EAAA,CAC3E;AA0BD,MAxBAM,EAAU,MAAM;AAEd,QADAX,EAAQ,UAAU,CAAA,GACd,CAACP,KAAU,CAACK,EAAY,SAAS,CAACI,EAAS;AAE/C,UAAMU,IAAWnB,IAASC,EAAS,WAAWD,CAAM,IAAIK,EAAY;AACpE,QAAKc;AAEL,aAAAA,EAAQ,iBAAiB,WAAWT,CAA0B,GAC9DS,EAAQ,iBAAiB,SAASF,CAAwB,GAEnD,MAAM;AACX,QAAAE,EAAQ,oBAAoB,WAAWT,CAA0B,GACjES,EAAQ,oBAAoB,SAASF,CAAwB;AAAA,MAAA;AAAA,EAC/D,GACC;AAAA,IACDjB;AAAA,IACAK,EAAY;AAAA,IACZJ,EAAS,YAAYD,CAAM;AAAA,IAC3BS;AAAA,IACAP;AAAA,IACAQ;AAAA,IACAO;AAAA,EAAA,CACD,GAEG,CAAAjB;AACJ,WAAOK;AACT;"}
+{"version":3,"file":"useHotkeys.mjs","sources":["../../../../src/hooks/useHotkeys/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useEvent } from '../useEvent/useEvent';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use hotkeys params type */\nexport interface UseHotkeysOptions {\n  /** Alias map for hotkeys */\n  alias?: Record<string, string>;\n  /** Enable or disable the event listeners */\n  enabled?: boolean;\n}\n\nexport const isHotkeyMatch = (hotkey: string, keys: UseHotkeysKey[]) =>\n  hotkey\n    .toLowerCase()\n    .split(/[+_,\\-]/g)\n    .map((key) => key.trim())\n    .every((key) =>\n      keys.find(\n        (updatedKey) =>\n          key === updatedKey.code.toLocaleLowerCase() ||\n          key === updatedKey.key.toLocaleLowerCase() ||\n          key === updatedKey.alias.toLocaleLowerCase()\n      )\n    );\n\n/** The hotkeys string type */\nexport type UseHotkeysHotkeys = string;\n\n/** The hotkey key information */\nexport interface UseHotkeysKey {\n  /** The alias for the key */\n  alias: string;\n  /** The key code */\n  code: string;\n  /** The key value */\n  key: string;\n}\n\n/** The use hotkeys target type */\nexport type UseHotkeysTarget = Element | React.RefObject<Element | null | undefined>;\n\nexport interface UseHotkeys {\n  (\n    target: UseHotkeysTarget,\n    hotkeys: UseHotkeysHotkeys,\n    callback: (event: KeyboardEvent) => void,\n    options?: UseHotkeysOptions\n  ): void;\n\n  <Target extends Element>(\n    hotkeys: UseHotkeysHotkeys,\n    callback: (event: KeyboardEvent) => void,\n    options?: UseHotkeysOptions,\n    target?: never\n  ): StateRef<Target>;\n}\n\n/**\n * @name useHotkeys\n * @description - Hook that listens for hotkeys\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=window] The target element to attach the event listener to\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {void}\n *\n * @example\n * useHotkeys(ref, 'ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * useHotkeys(ref, 'ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n *\n * @overload\n * @template Target The target element\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {StateRef<Target>} A reference to the target element\n *\n * @example\n * const ref = useHotkeys('ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * const ref = useHotkeys('ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n */\nexport const useHotkeys = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const hotkeys = (target ? params[1] : params[0]) as UseHotkeysHotkeys;\n  const callback = (target ? params[2] : params[1]) as (event: KeyboardEvent) => void;\n  const options = (target ? params[3] : params[2]) as UseHotkeysOptions | undefined;\n\n  const internalRef = useRefState(window);\n  const keysRef = useRef<UseHotkeysKey[]>([]);\n  const enabled = options?.enabled ?? true;\n\n  const onKeyDown = useEvent((event: KeyboardEvent) => {\n    if (!enabled) return;\n\n    if (keysRef.current.some(({ code }) => code === event.code)) return;\n\n    const alias = options?.alias?.[event.key] ?? event.code;\n    const updatedKeys = [...keysRef.current, { key: event.key, code: event.code, alias }];\n    keysRef.current = updatedKeys;\n\n    const hotkeysList = hotkeys.split(',').map((h) => h.trim());\n    const isMatch = hotkeysList.some((hotkey) => isHotkeyMatch(hotkey, updatedKeys));\n    if (!isMatch) return;\n    event.preventDefault();\n    callback(event);\n  });\n\n  const onKeyUp = useEvent((event: KeyboardEvent) => {\n    if (!enabled) return;\n    keysRef.current = keysRef.current.filter(({ code }) => code !== event.code);\n  });\n\n  useEffect(() => {\n    keysRef.current = [];\n    if (!target && !internalRef.state && !enabled) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    element.addEventListener('keydown', onKeyDown as EventListener);\n    element.addEventListener('keyup', onKeyUp as EventListener);\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown as EventListener);\n      element.removeEventListener('keyup', onKeyUp as EventListener);\n    };\n  }, [\n    target && isTarget.getRawElement(target),\n    internalRef.state,\n    enabled,\n    hotkeys,\n    onKeyDown,\n    onKeyUp\n  ]);\n\n  if (target) return;\n  return internalRef;\n}) as UseHotkeys;\n"],"names":["isHotkeyMatch","hotkey","keys","key","updatedKey","useHotkeys","params","target","isTarget","hotkeys","callback","options","internalRef","useRefState","keysRef","useRef","enabled","onKeyDown","useEvent","event","code","alias","updatedKeys","h","onKeyUp","useEffect","element"],"mappings":";;;;AAmBO,MAAMA,IAAgB,CAACC,GAAgBC,MAC5CD,EACG,cACA,MAAM,UAAU,EAChB,IAAI,CAACE,MAAQA,EAAI,KAAA,CAAM,EACvB;AAAA,EAAM,CAACA,MACND,EAAK;AAAA,IACH,CAACE,MACCD,MAAQC,EAAW,KAAK,kBAAA,KACxBD,MAAQC,EAAW,IAAI,kBAAA,KACvBD,MAAQC,EAAW,MAAM,kBAAA;AAAA,EAAkB;AAEjD,GAkESC,KAAc,IAAIC,MAAkB;AAC/C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAcC,EAAY,MAAM,GAChCC,IAAUC,EAAwB,EAAE,GACpCC,IAAUL,GAAS,WAAW,IAE9BM,IAAYC,EAAS,CAACC,MAAyB;AAGnD,QAFI,CAACH,KAEDF,EAAQ,QAAQ,KAAK,CAAC,EAAE,MAAAM,QAAWA,MAASD,EAAM,IAAI,EAAG;AAE7D,UAAME,IAAQV,GAAS,QAAQQ,EAAM,GAAG,KAAKA,EAAM,MAC7CG,IAAc,CAAC,GAAGR,EAAQ,SAAS,EAAE,KAAKK,EAAM,KAAK,MAAMA,EAAM,MAAM,OAAAE,GAAO;AAKpF,IAJAP,EAAQ,UAAUQ,GAEEb,EAAQ,MAAM,GAAG,EAAE,IAAI,CAACc,MAAMA,EAAE,MAAM,EAC9B,KAAK,CAACtB,MAAWD,EAAcC,GAAQqB,CAAW,CAAC,MAE/EH,EAAM,eAAA,GACNT,EAASS,CAAK;AAAA,EAAA,CACf,GAEKK,IAAUN,EAAS,CAACC,MAAyB;AACjD,IAAKH,MACLF,EAAQ,UAAUA,EAAQ,QAAQ,OAAO,CAAC,EAAE,MAAAM,QAAWA,MAASD,EAAM,IAAI;AAAA,EAAA,CAC3E;AAyBD,MAvBAM,EAAU,MAAM;AAEd,QADAX,EAAQ,UAAU,CAAA,GACd,CAACP,KAAU,CAACK,EAAY,SAAS,CAACI,EAAS;AAE/C,UAAMU,IAAWnB,IAASC,EAAS,WAAWD,CAAM,IAAIK,EAAY;AACpE,QAAKc;AAEL,aAAAA,EAAQ,iBAAiB,WAAWT,CAA0B,GAC9DS,EAAQ,iBAAiB,SAASF,CAAwB,GAEnD,MAAM;AACX,QAAAE,EAAQ,oBAAoB,WAAWT,CAA0B,GACjES,EAAQ,oBAAoB,SAASF,CAAwB;AAAA,MAAA;AAAA,EAC/D,GACC;AAAA,IACDjB,KAAUC,EAAS,cAAcD,CAAM;AAAA,IACvCK,EAAY;AAAA,IACZI;AAAA,IACAP;AAAA,IACAQ;AAAA,IACAO;AAAA,EAAA,CACD,GAEG,CAAAjB;AACJ,WAAOK;AACT;"}

package/dist/esm/hooks/useHover/useHover.mjs

@@ -1,11 +1,11 @@
-import { useState as d, useRef as m, useEffect as a } from "react";
+import { useState as m, useRef as d, useEffect as a } from "react";
 import { useRefState as g } from "../useRefState/useRefState.mjs";
-import { isTarget as f } from "../../utils/helpers/isTarget.mjs";
+import { isTarget as i } from "../../utils/helpers/isTarget.mjs";
 const b = ((...e) => {
-  const t = f(e[0]) ? e[0] : void 0, r = t ? typeof e[1] == "object" ? e[1] : { onEntry: e[1] } : typeof e[0] == "object" ? e[0] : { onEntry: e[0] }, i = r?.enabled ?? !0, [c, v] = d(!1), o = g(), s = m(r);
+  const t = i(e[0]) ? e[0] : void 0, r = t ? typeof e[1] == "object" ? e[1] : { onEntry: e[1] } : typeof e[0] == "object" ? e[0] : { onEntry: e[0] }, c = r?.enabled ?? !0, [f, v] = m(!1), o = g(), s = d(r);
   return s.current = r, a(() => {
-    if (!i || !t && !o.state) return;
-    const n = t ? f.getElement(t) : o.current;
+    if (!c || !t && !o.state) return;
+    const n = t ? i.getElement(t) : o.current;
     if (!n) return;
     const l = (u) => {
       s.current?.onEntry?.(u), v(!0);
@@ -15,9 +15,9 @@ const b = ((...e) => {
     return n.addEventListener("mouseenter", l), n.addEventListener("mouseleave", E), () => {
       n.removeEventListener("mouseenter", l), n.removeEventListener("mouseleave", E);
     };
-  }, [i, t, o.state, f.getRefState(t)]), t ? c : {
+  }, [c, t && i.getRawElement(t), o.state]), t ? f : {
     ref: o,
-    value: c
+    value: f
   };
 });
 export {