@siberiacancode/reactuse 0.3.0 → 0.3.2

package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs

@@ -1,18 +1,17 @@
-import { useRef as T, useEffect as Y } from "react";
-import { useRefState as b } from "../useRefState/useRefState.mjs";
-import { isTarget as H } from "../../utils/helpers/isTarget.mjs";
-import { getElement as R } from "../../utils/helpers/getElement.mjs";
-const O = (...r) => {
-  const n = H(r[0]) ? r[0] : void 0, u = r[1] || (typeof r[0] == "object" ? r[0] : {}), { enabled: h = !0 } = u, s = b(), o = T(u);
-  if (o.current = u, Y(() => {
+import { useRef as b, useEffect as p } from "react";
+import { useRefState as H } from "../useRefState/useRefState.mjs";
+import { isTarget as L } from "../../utils/helpers/isTarget.mjs";
+const x = (...r) => {
+  const n = L(r[0]) ? r[0] : void 0, i = r[1] || (typeof r[0] == "object" ? r[0] : {}), { enabled: h = !0 } = i, s = H(), o = b(i);
+  if (o.current = i, p(() => {
     if (!h || !n && !s.state) return;
-    const e = n ? R(n) : s.state;
+    const e = n ? L.getElement(n) : s.state;
     if (!e) return;
     let c = !0, f = 0, a = 0;
     const d = () => {
       if (o.current.force) return;
-      const { scrollHeight: t, clientHeight: l, scrollTop: i } = e, g = t - l, L = g / 2;
-      i < a ? c = !1 : g - i <= L && (c = !0), a = i;
+      const { scrollHeight: t, clientHeight: l, scrollTop: u } = e, g = t - l, Y = g / 2;
+      u < a ? c = !1 : g - u <= Y && (c = !0), a = u;
     }, v = (t) => {
       o.current.force || (t.deltaY < 0 ? c = !1 : d());
     }, m = (t) => {
@@ -21,11 +20,11 @@ const O = (...r) => {
       if (o.current.force) return;
       const l = t.touches[0].clientY;
       f - l < 0 ? c = !1 : d(), f = l;
-    }, p = () => {
+    }, T = () => {
       !c && !o.current.force || e.scrollTo({ top: e.scrollHeight });
     };
     e.addEventListener("wheel", v), e.addEventListener("touchstart", m), e.addEventListener("touchmove", E);
-    const S = new MutationObserver(p);
+    const S = new MutationObserver(T);
     return S.observe(e, {
       childList: !0,
       subtree: !0,
@@ -37,6 +36,6 @@ const O = (...r) => {
     return s;
 };
 export {
-  O as useAutoScroll
+  x as useAutoScroll
 };
 //# sourceMappingURL=useAutoScroll.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useAutoScroll.mjs","sources":["../../../../src/hooks/useAutoScroll/useAutoScroll.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use auto scroll options type */\nexport interface UseAutoScrollOptions {\n  /** Whether auto-scrolling is enabled */\n  enabled?: boolean;\n  /** Whether to force auto-scrolling regardless of user interactions */\n  force?: boolean;\n}\n\nexport interface UseAutoScroll {\n  (target: HookTarget, options?: UseAutoScrollOptions): void;\n\n  <Target extends HTMLElement>(options?: UseAutoScrollOptions): StateRef<Target>;\n}\n\n/**\n * @name useAutoScroll\n * @description - Hook that automatically scrolls a list element to the bottom\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element to auto-scroll\n * @param {boolean} [options.enabled] Whether auto-scrolling is enabled\n * @returns {void}\n *\n * @example\n * useAutoScroll(ref);\n *\n * @overload\n * @template Target\n * @param {boolean} [options.enabled] Whether auto-scrolling is enabled\n * @returns {StateRef<Target>} A React ref to attach to the list element\n *\n * @example\n * const ref = useAutoScroll();\n */\nexport const useAutoScroll = ((...params: any[]) => {\n  const target = isTarget(params[0]) ? params[0] : undefined;\n  const options = (params[1] ||\n    (typeof params[0] === 'object' ? params[0] : {})) as UseAutoScrollOptions;\n  const { enabled = true } = options;\n\n  const internalRef = useRefState<HTMLElement>();\n  const internalOptionsRef = useRef<UseAutoScrollOptions>(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = (target ? getElement(target) : internalRef.state) as HTMLElement;\n\n    if (!element) return;\n\n    let shouldAutoScroll = true;\n    let touchStartY = 0;\n    let lastScrollTop = 0;\n\n    const onCheckScrollPosition = () => {\n      if (internalOptionsRef.current.force) return;\n\n      const { scrollHeight, clientHeight, scrollTop } = element;\n      const maxScrollHeight = scrollHeight - clientHeight;\n      const scrollThreshold = maxScrollHeight / 2;\n\n      if (scrollTop < lastScrollTop) shouldAutoScroll = false;\n      else if (maxScrollHeight - scrollTop <= scrollThreshold) shouldAutoScroll = true;\n\n      lastScrollTop = scrollTop;\n    };\n\n    const onWheel = (event: WheelEvent) => {\n      if (internalOptionsRef.current.force) return;\n\n      if (event.deltaY < 0) shouldAutoScroll = false;\n      else onCheckScrollPosition();\n    };\n\n    const onTouchStart = (event: TouchEvent) => {\n      if (internalOptionsRef.current.force) return;\n      touchStartY = event.touches[0].clientY;\n    };\n\n    const onTouchMove = (event: TouchEvent) => {\n      if (internalOptionsRef.current.force) return;\n\n      const touchEndY = event.touches[0].clientY;\n      const deltaY = touchStartY - touchEndY;\n\n      if (deltaY < 0) shouldAutoScroll = false;\n      else onCheckScrollPosition();\n\n      touchStartY = touchEndY;\n    };\n\n    const onMutation = () => {\n      if (!shouldAutoScroll && !internalOptionsRef.current.force) return;\n      element.scrollTo({ top: element.scrollHeight });\n    };\n\n    element.addEventListener('wheel', onWheel);\n    element.addEventListener('touchstart', onTouchStart);\n    element.addEventListener('touchmove', onTouchMove);\n\n    const observer = new MutationObserver(onMutation);\n\n    observer.observe(element, {\n      childList: true,\n      subtree: true,\n      characterData: true\n    });\n\n    return () => {\n      observer.disconnect();\n      element.removeEventListener('wheel', onWheel);\n      element.removeEventListener('touchstart', onTouchStart);\n      element.removeEventListener('touchmove', onTouchMove);\n    };\n  }, [enabled, target, internalRef.state]);\n\n  if (target) return;\n  return internalRef;\n}) as UseAutoScroll;\n"],"names":["useAutoScroll","params","target","isTarget","options","enabled","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","getElement","shouldAutoScroll","touchStartY","lastScrollTop","onCheckScrollPosition","scrollHeight","clientHeight","scrollTop","maxScrollHeight","scrollThreshold","onWheel","event","onTouchStart","onTouchMove","touchEndY","onMutation","observer"],"mappings":";;;;AA8CO,MAAMA,IAAiB,IAAIC,MAAkB;AAClD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IAAWH,EAAO,CAAC,MACtB,OAAOA,EAAO,CAAC,KAAM,WAAWA,EAAO,CAAC,IAAI,CAAA,IACzC,EAAE,SAAAI,IAAU,GAAA,IAASD,GAErBE,IAAcC,EAAA,GACdC,IAAqBC,EAA6BL,CAAO;AA4E/D,MA3EAI,EAAmB,UAAUJ,GAE7BM,EAAU,MAAM;AACd,QAAI,CAACL,KAAY,CAACH,KAAU,CAACI,EAAY,MAAQ;AAEjD,UAAMK,IAAWT,IAASU,EAAWV,CAAM,IAAII,EAAY;AAE3D,QAAI,CAACK,EAAS;AAEd,QAAIE,IAAmB,IACnBC,IAAc,GACdC,IAAgB;AAEpB,UAAMC,IAAwB,MAAM;AAClC,UAAIR,EAAmB,QAAQ,MAAO;AAEtC,YAAM,EAAE,cAAAS,GAAc,cAAAC,GAAc,WAAAC,EAAA,IAAcR,GAC5CS,IAAkBH,IAAeC,GACjCG,IAAkBD,IAAkB;AAE1C,MAAID,IAAYJ,IAAeF,IAAmB,KACzCO,IAAkBD,KAAaE,MAAiBR,IAAmB,KAE5EE,IAAgBI;AAAA,IAAA,GAGZG,IAAU,CAACC,MAAsB;AACrC,MAAIf,EAAmB,QAAQ,UAE3Be,EAAM,SAAS,IAAGV,IAAmB,KACpCG,EAAA;AAAA,IAAsB,GAGvBQ,IAAe,CAACD,MAAsB;AAC1C,MAAIf,EAAmB,QAAQ,UAC/BM,IAAcS,EAAM,QAAQ,CAAC,EAAE;AAAA,IAAA,GAG3BE,IAAc,CAACF,MAAsB;AACzC,UAAIf,EAAmB,QAAQ,MAAO;AAEtC,YAAMkB,IAAYH,EAAM,QAAQ,CAAC,EAAE;AAGnC,MAFeT,IAAcY,IAEhB,IAAGb,IAAmB,KAC9BG,EAAA,GAELF,IAAcY;AAAA,IAAA,GAGVC,IAAa,MAAM;AACvB,MAAI,CAACd,KAAoB,CAACL,EAAmB,QAAQ,SACrDG,EAAQ,SAAS,EAAE,KAAKA,EAAQ,cAAc;AAAA,IAAA;AAGhD,IAAAA,EAAQ,iBAAiB,SAASW,CAAO,GACzCX,EAAQ,iBAAiB,cAAca,CAAY,GACnDb,EAAQ,iBAAiB,aAAac,CAAW;AAEjD,UAAMG,IAAW,IAAI,iBAAiBD,CAAU;AAEhD,WAAAC,EAAS,QAAQjB,GAAS;AAAA,MACxB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAe;AAAA,IAAA,CAChB,GAEM,MAAM;AACX,MAAAiB,EAAS,WAAA,GACTjB,EAAQ,oBAAoB,SAASW,CAAO,GAC5CX,EAAQ,oBAAoB,cAAca,CAAY,GACtDb,EAAQ,oBAAoB,aAAac,CAAW;AAAA,IAAA;AAAA,EACtD,GACC,CAACpB,GAASH,GAAQI,EAAY,KAAK,CAAC,GAEnC,CAAAJ;AACJ,WAAOI;AACT;"}
+{"version":3,"file":"useAutoScroll.mjs","sources":["../../../../src/hooks/useAutoScroll/useAutoScroll.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 auto scroll options type */\nexport interface UseAutoScrollOptions {\n  /** Whether auto-scrolling is enabled */\n  enabled?: boolean;\n  /** Whether to force auto-scrolling regardless of user interactions */\n  force?: boolean;\n}\n\nexport interface UseAutoScroll {\n  (target: HookTarget, options?: UseAutoScrollOptions): void;\n\n  <Target extends HTMLElement>(options?: UseAutoScrollOptions): StateRef<Target>;\n}\n\n/**\n * @name useAutoScroll\n * @description - Hook that automatically scrolls a list element to the bottom\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element to auto-scroll\n * @param {boolean} [options.enabled] Whether auto-scrolling is enabled\n * @returns {void}\n *\n * @example\n * useAutoScroll(ref);\n *\n * @overload\n * @template Target\n * @param {boolean} [options.enabled] Whether auto-scrolling is enabled\n * @returns {StateRef<Target>} A React ref to attach to the list element\n *\n * @example\n * const ref = useAutoScroll();\n */\nexport const useAutoScroll = ((...params: any[]) => {\n  const target = isTarget(params[0]) ? params[0] : undefined;\n  const options = (params[1] ||\n    (typeof params[0] === 'object' ? params[0] : {})) as UseAutoScrollOptions;\n  const { enabled = true } = options;\n\n  const internalRef = useRefState<HTMLElement>();\n  const internalOptionsRef = useRef<UseAutoScrollOptions>(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.state) as HTMLElement;\n\n    if (!element) return;\n\n    let shouldAutoScroll = true;\n    let touchStartY = 0;\n    let lastScrollTop = 0;\n\n    const onCheckScrollPosition = () => {\n      if (internalOptionsRef.current.force) return;\n\n      const { scrollHeight, clientHeight, scrollTop } = element;\n      const maxScrollHeight = scrollHeight - clientHeight;\n      const scrollThreshold = maxScrollHeight / 2;\n\n      if (scrollTop < lastScrollTop) shouldAutoScroll = false;\n      else if (maxScrollHeight - scrollTop <= scrollThreshold) shouldAutoScroll = true;\n\n      lastScrollTop = scrollTop;\n    };\n\n    const onWheel = (event: WheelEvent) => {\n      if (internalOptionsRef.current.force) return;\n\n      if (event.deltaY < 0) shouldAutoScroll = false;\n      else onCheckScrollPosition();\n    };\n\n    const onTouchStart = (event: TouchEvent) => {\n      if (internalOptionsRef.current.force) return;\n      touchStartY = event.touches[0].clientY;\n    };\n\n    const onTouchMove = (event: TouchEvent) => {\n      if (internalOptionsRef.current.force) return;\n\n      const touchEndY = event.touches[0].clientY;\n      const deltaY = touchStartY - touchEndY;\n\n      if (deltaY < 0) shouldAutoScroll = false;\n      else onCheckScrollPosition();\n\n      touchStartY = touchEndY;\n    };\n\n    const onMutation = () => {\n      if (!shouldAutoScroll && !internalOptionsRef.current.force) return;\n      element.scrollTo({ top: element.scrollHeight });\n    };\n\n    element.addEventListener('wheel', onWheel);\n    element.addEventListener('touchstart', onTouchStart);\n    element.addEventListener('touchmove', onTouchMove);\n\n    const observer = new MutationObserver(onMutation);\n\n    observer.observe(element, {\n      childList: true,\n      subtree: true,\n      characterData: true\n    });\n\n    return () => {\n      observer.disconnect();\n      element.removeEventListener('wheel', onWheel);\n      element.removeEventListener('touchstart', onTouchStart);\n      element.removeEventListener('touchmove', onTouchMove);\n    };\n  }, [enabled, target, internalRef.state]);\n\n  if (target) return;\n  return internalRef;\n}) as UseAutoScroll;\n"],"names":["useAutoScroll","params","target","isTarget","options","enabled","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","shouldAutoScroll","touchStartY","lastScrollTop","onCheckScrollPosition","scrollHeight","clientHeight","scrollTop","maxScrollHeight","scrollThreshold","onWheel","event","onTouchStart","onTouchMove","touchEndY","onMutation","observer"],"mappings":";;;AA8CO,MAAMA,IAAiB,IAAIC,MAAkB;AAClD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IAAWH,EAAO,CAAC,MACtB,OAAOA,EAAO,CAAC,KAAM,WAAWA,EAAO,CAAC,IAAI,CAAA,IACzC,EAAE,SAAAI,IAAU,GAAA,IAASD,GAErBE,IAAcC,EAAA,GACdC,IAAqBC,EAA6BL,CAAO;AA4E/D,MA3EAI,EAAmB,UAAUJ,GAE7BM,EAAU,MAAM;AACd,QAAI,CAACL,KAAY,CAACH,KAAU,CAACI,EAAY,MAAQ;AAEjD,UAAMK,IAAWT,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AAEpE,QAAI,CAACK,EAAS;AAEd,QAAIC,IAAmB,IACnBC,IAAc,GACdC,IAAgB;AAEpB,UAAMC,IAAwB,MAAM;AAClC,UAAIP,EAAmB,QAAQ,MAAO;AAEtC,YAAM,EAAE,cAAAQ,GAAc,cAAAC,GAAc,WAAAC,EAAA,IAAcP,GAC5CQ,IAAkBH,IAAeC,GACjCG,IAAkBD,IAAkB;AAE1C,MAAID,IAAYJ,IAAeF,IAAmB,KACzCO,IAAkBD,KAAaE,MAAiBR,IAAmB,KAE5EE,IAAgBI;AAAA,IAAA,GAGZG,IAAU,CAACC,MAAsB;AACrC,MAAId,EAAmB,QAAQ,UAE3Bc,EAAM,SAAS,IAAGV,IAAmB,KACpCG,EAAA;AAAA,IAAsB,GAGvBQ,IAAe,CAACD,MAAsB;AAC1C,MAAId,EAAmB,QAAQ,UAC/BK,IAAcS,EAAM,QAAQ,CAAC,EAAE;AAAA,IAAA,GAG3BE,IAAc,CAACF,MAAsB;AACzC,UAAId,EAAmB,QAAQ,MAAO;AAEtC,YAAMiB,IAAYH,EAAM,QAAQ,CAAC,EAAE;AAGnC,MAFeT,IAAcY,IAEhB,IAAGb,IAAmB,KAC9BG,EAAA,GAELF,IAAcY;AAAA,IAAA,GAGVC,IAAa,MAAM;AACvB,MAAI,CAACd,KAAoB,CAACJ,EAAmB,QAAQ,SACrDG,EAAQ,SAAS,EAAE,KAAKA,EAAQ,cAAc;AAAA,IAAA;AAGhD,IAAAA,EAAQ,iBAAiB,SAASU,CAAO,GACzCV,EAAQ,iBAAiB,cAAcY,CAAY,GACnDZ,EAAQ,iBAAiB,aAAaa,CAAW;AAEjD,UAAMG,IAAW,IAAI,iBAAiBD,CAAU;AAEhD,WAAAC,EAAS,QAAQhB,GAAS;AAAA,MACxB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAe;AAAA,IAAA,CAChB,GAEM,MAAM;AACX,MAAAgB,EAAS,WAAA,GACThB,EAAQ,oBAAoB,SAASU,CAAO,GAC5CV,EAAQ,oBAAoB,cAAcY,CAAY,GACtDZ,EAAQ,oBAAoB,aAAaa,CAAW;AAAA,IAAA;AAAA,EACtD,GACC,CAACnB,GAASH,GAAQI,EAAY,KAAK,CAAC,GAEnC,CAAAJ;AACJ,WAAOI;AACT;"}

package/dist/esm/hooks/useClickOutside/useClickOutside.mjs

@@ -1,13 +1,12 @@
-import { useRef as u, useEffect as f } from "react";
-import { useRefState as l } from "../useRefState/useRefState.mjs";
-import { isTarget as m } from "../../utils/helpers/isTarget.mjs";
-import { getElement as a } from "../../utils/helpers/getElement.mjs";
-const R = (...t) => {
-  const e = m(t[0]) ? t[0] : void 0, r = t[1] ? t[1] : t[0], n = l(), c = u(r);
-  if (c.current = r, f(() => {
+import { useRef as f, useEffect as l } from "react";
+import { useRefState as m } from "../useRefState/useRefState.mjs";
+import { isTarget as u } from "../../utils/helpers/isTarget.mjs";
+const g = (...t) => {
+  const e = u(t[0]) ? t[0] : void 0, r = t[1] ? t[1] : t[0], n = m(), c = f(r);
+  if (c.current = r, l(() => {
     if (!e && !n.state) return;
     const o = (i) => {
-      const s = e ? a(e) : n.current;
+      const s = e ? u.getElement(e) : n.current;
       s && !s.contains(i.target) && c.current(i);
     };
     return document.addEventListener("click", o), () => {
@@ -17,6 +16,6 @@ const R = (...t) => {
     return n;
 };
 export {
-  R as useClickOutside
+  g as useClickOutside
 };
 //# sourceMappingURL=useClickOutside.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.mjs","sources":["../../../../src/hooks/useClickOutside/useClickOutside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport interface UseClickOutside {\n  (target: HookTarget, callback: (event: Event) => void): void;\n\n  <Target extends Element>(callback: (event: Event) => void, target?: never): StateRef<Target>;\n}\n\n/**\n * @name useClickOutside\n * @description - Hook to handle click events outside the specified target element(s)\n * @category Elements \n * @usage necessary\n\n * @overload\n * @param {HookTarget} target The target element(s) to detect outside clicks for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {void}\n *\n * @example\n * useClickOutside(ref, () => console.log('click outside'));\n *\n * @overload\n * @template Target The target element(s)\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {(node: Target) => void} A React ref to attach to the target element\n *\n * @example\n * const ref = useClickOutside<HTMLDivElement>(() => console.log('click outside'));\n *\n * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useClickOutside.html}\n */\nexport const useClickOutside = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (params[1] ? params[1] : params[0]) as (event: Event) => void;\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n    const onClick = (event: Event) => {\n      const element = (target ? getElement(target) : internalRef.current) as Element;\n\n      if (element && !element.contains(event.target as Node)) {\n        internalCallbackRef.current(event);\n      }\n    };\n\n    document.addEventListener('click', onClick);\n\n    return () => {\n      document.removeEventListener('click', onClick);\n    };\n  }, [target, internalRef.state]);\n\n  if (target) return;\n  return internalRef;\n}) as UseClickOutside;\n"],"names":["useClickOutside","params","target","isTarget","callback","internalRef","useRefState","internalCallbackRef","useRef","useEffect","onClick","event","element","getElement"],"mappings":";;;;AAwCO,MAAMA,IAAmB,IAAIC,MAAkB;AACpD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYH,EAAO,CAAC,IAAIA,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE5CI,IAAcC,EAAA,GACdC,IAAsBC,EAAOJ,CAAQ;AAoB3C,MAnBAG,EAAoB,UAAUH,GAE9BK,EAAU,MAAM;AACd,QAAI,CAACP,KAAU,CAACG,EAAY,MAAO;AACnC,UAAMK,IAAU,CAACC,MAAiB;AAChC,YAAMC,IAAWV,IAASW,EAAWX,CAAM,IAAIG,EAAY;AAE3D,MAAIO,KAAW,CAACA,EAAQ,SAASD,EAAM,MAAc,KACnDJ,EAAoB,QAAQI,CAAK;AAAA,IACnC;AAGF,oBAAS,iBAAiB,SAASD,CAAO,GAEnC,MAAM;AACX,eAAS,oBAAoB,SAASA,CAAO;AAAA,IAAA;AAAA,EAC/C,GACC,CAACR,GAAQG,EAAY,KAAK,CAAC,GAE1B,CAAAH;AACJ,WAAOG;AACT;"}
+{"version":3,"file":"useClickOutside.mjs","sources":["../../../../src/hooks/useClickOutside/useClickOutside.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 interface UseClickOutside {\n  (target: HookTarget, callback: (event: Event) => void): void;\n\n  <Target extends Element>(callback: (event: Event) => void, target?: never): StateRef<Target>;\n}\n\n/**\n * @name useClickOutside\n * @description - Hook to handle click events outside the specified target element(s)\n * @category Elements \n * @usage necessary\n\n * @overload\n * @param {HookTarget} target The target element(s) to detect outside clicks for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {void}\n *\n * @example\n * useClickOutside(ref, () => console.log('click outside'));\n *\n * @overload\n * @template Target The target element(s)\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {(node: Target) => void} A React ref to attach to the target element\n *\n * @example\n * const ref = useClickOutside<HTMLDivElement>(() => console.log('click outside'));\n *\n * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useClickOutside.html}\n */\nexport const useClickOutside = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (params[1] ? params[1] : params[0]) as (event: Event) => void;\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n    const onClick = (event: Event) => {\n      const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n      if (element && !element.contains(event.target as Node)) {\n        internalCallbackRef.current(event);\n      }\n    };\n\n    document.addEventListener('click', onClick);\n\n    return () => {\n      document.removeEventListener('click', onClick);\n    };\n  }, [target, internalRef.state]);\n\n  if (target) return;\n  return internalRef;\n}) as UseClickOutside;\n"],"names":["useClickOutside","params","target","isTarget","callback","internalRef","useRefState","internalCallbackRef","useRef","useEffect","onClick","event","element"],"mappings":";;;AAwCO,MAAMA,IAAmB,IAAIC,MAAkB;AACpD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYH,EAAO,CAAC,IAAIA,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE5CI,IAAcC,EAAA,GACdC,IAAsBC,EAAOJ,CAAQ;AAoB3C,MAnBAG,EAAoB,UAAUH,GAE9BK,EAAU,MAAM;AACd,QAAI,CAACP,KAAU,CAACG,EAAY,MAAO;AACnC,UAAMK,IAAU,CAACC,MAAiB;AAChC,YAAMC,IAAWV,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY;AAEpE,MAAIO,KAAW,CAACA,EAAQ,SAASD,EAAM,MAAc,KACnDJ,EAAoB,QAAQI,CAAK;AAAA,IACnC;AAGF,oBAAS,iBAAiB,SAASD,CAAO,GAEnC,MAAM;AACX,eAAS,oBAAoB,SAASA,CAAO;AAAA,IAAA;AAAA,EAC/C,GACC,CAACR,GAAQG,EAAY,KAAK,CAAC,GAE1B,CAAAH;AACJ,WAAOG;AACT;"}

package/dist/esm/hooks/useCssVar/useCssVar.mjs

@@ -1,34 +1,33 @@
-import { useState as a, useRef as g, useEffect as d } from "react";
-import { useRefState as p } from "../useRefState/useRefState.mjs";
-import { isTarget as b } from "../../utils/helpers/isTarget.mjs";
-import { getElement as v } from "../../utils/helpers/getElement.mjs";
-const C = (...r) => {
-  const t = b(r[0]) ? r[0] : void 0, s = t ? r[1] : r[0], n = t ? r[2] : r[1], [i, u] = a(n ?? ""), c = p(), o = g(null), m = (e) => {
+import { useState as w, useRef as a, useEffect as g } from "react";
+import { useRefState as E } from "../useRefState/useRefState.mjs";
+import { isTarget as i } from "../../utils/helpers/isTarget.mjs";
+const R = (...n) => {
+  const t = i(n[0]) ? n[0] : void 0, s = t ? n[1] : n[0], r = t ? n[2] : n[1], [m, u] = w(r ?? ""), c = E(), o = a(null), f = (e) => {
     if (!o.current) return;
     const l = o.current;
     l.style && (l.style.setProperty(s, e), u(e));
-  }, f = () => {
+  }, y = () => {
     if (!o.current) return;
     const e = o.current;
     e.style && (e.style.removeProperty(s), u(""));
   };
-  return d(() => {
-    if (!n) return;
-    const e = (t ? v(t) : c.current) ?? window.document.documentElement;
-    e.style && (e.style.setProperty(s, n), u(n));
-  }, []), d(() => {
-    const e = (t ? v(t) : c.current) ?? window.document.documentElement;
+  return g(() => {
+    if (!r) return;
+    const e = (t ? i.getElement(t) : c.current) ?? window.document.documentElement;
+    e.style && (e.style.setProperty(s, r), u(r));
+  }, []), g(() => {
+    const e = (t ? i.getElement(t) : c.current) ?? window.document.documentElement;
     o.current = e;
     const l = () => {
-      const w = window.getComputedStyle(e).getPropertyValue(s)?.trim();
-      u(w ?? n);
-    }, y = new MutationObserver(l);
-    return y.observe(e, { attributeFilter: ["style", "class"] }), () => {
-      y.disconnect();
+      const v = window.getComputedStyle(e).getPropertyValue(s)?.trim();
+      u(v ?? r);
+    }, d = new MutationObserver(l);
+    return d.observe(e, { attributeFilter: ["style", "class"] }), () => {
+      d.disconnect();
     };
-  }, [t, c.state]), t ? { value: i, set: m, remove: f } : { ref: c, value: i, set: m, remove: f };
+  }, [t, c.state]), t ? { value: m, set: f, remove: y } : { ref: c, value: m, set: f, remove: y };
 };
 export {
-  C as useCssVar
+  R as useCssVar
 };
 //# sourceMappingURL=useCssVar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCssVar.mjs","sources":["../../../../src/hooks/useCssVar/useCssVar.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The css variable return type */\nexport interface UseCssVarReturn {\n  /** The value of the CSS variable */\n  value: string;\n  /** Remove the value of the CSS variable */\n  remove: () => void;\n  /** Set the value of the CSS variable */\n  set: (value: string) => void;\n}\n\nexport interface UseCssVar {\n  <Target extends HTMLElement>(\n    key: string,\n    initialValue?: string\n  ): UseCssVarReturn & {\n    ref: StateRef<Target>;\n  };\n\n  (target: HookTarget, key: string, initialValue?: string): UseCssVarReturn;\n}\n\n/**\n * @name useCssVar\n * @description - Hook that returns the value of a css variable\n * @category Browser\n * @usage low\n\n * @overload\n * @param {string} key The CSS variable key\n * @param {string} initialValue The initial value of the CSS variable\n * @returns {UseCssVarReturn & { ref: StateRef<Element> }} The object containing the value of the CSS variable and ref\n *\n * @example\n * const { ref, value, set, remove } = useCssVar('--color', 'red');\n *\n * @overload\n * @param {HookTarget} target The target element\n * @param {string} key The CSS variable key\n * @param {string} initialValue The initial value of the CSS variable\n * @returns {UseCssVarReturn} The object containing the value of the CSS variable\n *\n * @example\n * const { value, set, remove } = useCssVar(ref, '--color', 'red');\n */\nexport const useCssVar = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const key = (target ? params[1] : params[0]) as string;\n  const initialValue = (target ? params[2] : params[1]) as string | undefined;\n\n  const [value, setValue] = useState(initialValue ?? '');\n  const internalRef = useRefState<HTMLElement>();\n  const elementRef = useRef<HTMLElement>(null);\n\n  const set = (value: string) => {\n    if (!elementRef.current) return;\n    const element = elementRef.current;\n\n    if (!element.style) return;\n    element.style.setProperty(key, value);\n    setValue(value);\n  };\n\n  const remove = () => {\n    if (!elementRef.current) return;\n    const element = elementRef.current;\n    if (!element.style) return;\n\n    element.style.removeProperty(key);\n    setValue('');\n  };\n\n  useEffect(() => {\n    if (!initialValue) return;\n\n    const element =\n      ((target ? getElement(target) : internalRef.current) as HTMLElement) ??\n      window.document.documentElement;\n\n    if (!element.style) return;\n    element.style.setProperty(key, initialValue);\n    setValue(initialValue);\n  }, []);\n\n  useEffect(() => {\n    const element =\n      ((target ? getElement(target) : internalRef.current) as HTMLElement) ??\n      window.document.documentElement;\n\n    elementRef.current = element;\n\n    const onChange = () => {\n      const value = window.getComputedStyle(element).getPropertyValue(key)?.trim();\n\n      setValue(value ?? initialValue);\n    };\n\n    const observer = new MutationObserver(onChange);\n\n    observer.observe(element, { attributeFilter: ['style', 'class'] });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [target, internalRef.state]);\n\n  if (target) return { value, set, remove };\n  return { ref: internalRef, value, set, remove };\n}) as UseCssVar;\n"],"names":["useCssVar","params","target","isTarget","key","initialValue","value","setValue","useState","internalRef","useRefState","elementRef","useRef","set","element","remove","useEffect","getElement","onChange","observer"],"mappings":";;;;AAsDO,MAAMA,IAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAOF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACpCI,IAAgBH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE7C,CAACK,GAAOC,CAAQ,IAAIC,EAASH,KAAgB,EAAE,GAC/CI,IAAcC,EAAA,GACdC,IAAaC,EAAoB,IAAI,GAErCC,IAAM,CAACP,MAAkB;AAC7B,QAAI,CAACK,EAAW,QAAS;AACzB,UAAMG,IAAUH,EAAW;AAE3B,IAAKG,EAAQ,UACbA,EAAQ,MAAM,YAAYV,GAAKE,CAAK,GACpCC,EAASD,CAAK;AAAA,EAAA,GAGVS,IAAS,MAAM;AACnB,QAAI,CAACJ,EAAW,QAAS;AACzB,UAAMG,IAAUH,EAAW;AAC3B,IAAKG,EAAQ,UAEbA,EAAQ,MAAM,eAAeV,CAAG,GAChCG,EAAS,EAAE;AAAA,EAAA;AAqCb,SAlCAS,EAAU,MAAM;AACd,QAAI,CAACX,EAAc;AAEnB,UAAMS,KACFZ,IAASe,EAAWf,CAAM,IAAIO,EAAY,YAC5C,OAAO,SAAS;AAElB,IAAKK,EAAQ,UACbA,EAAQ,MAAM,YAAYV,GAAKC,CAAY,GAC3CE,EAASF,CAAY;AAAA,EAAA,GACpB,EAAE,GAELW,EAAU,MAAM;AACd,UAAMF,KACFZ,IAASe,EAAWf,CAAM,IAAIO,EAAY,YAC5C,OAAO,SAAS;AAElB,IAAAE,EAAW,UAAUG;AAErB,UAAMI,IAAW,MAAM;AACrB,YAAMZ,IAAQ,OAAO,iBAAiBQ,CAAO,EAAE,iBAAiBV,CAAG,GAAG,KAAA;AAEtE,MAAAG,EAASD,KAASD,CAAY;AAAA,IAAA,GAG1Bc,IAAW,IAAI,iBAAiBD,CAAQ;AAE9C,WAAAC,EAAS,QAAQL,GAAS,EAAE,iBAAiB,CAAC,SAAS,OAAO,GAAG,GAE1D,MAAM;AACX,MAAAK,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACjB,GAAQO,EAAY,KAAK,CAAC,GAE1BP,IAAe,EAAE,OAAAI,GAAO,KAAAO,GAAK,QAAAE,EAAA,IAC1B,EAAE,KAAKN,GAAa,OAAAH,GAAO,KAAAO,GAAK,QAAAE,EAAA;AACzC;"}
+{"version":3,"file":"useCssVar.mjs","sources":["../../../../src/hooks/useCssVar/useCssVar.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 css variable return type */\nexport interface UseCssVarReturn {\n  /** The value of the CSS variable */\n  value: string;\n  /** Remove the value of the CSS variable */\n  remove: () => void;\n  /** Set the value of the CSS variable */\n  set: (value: string) => void;\n}\n\nexport interface UseCssVar {\n  <Target extends HTMLElement>(\n    key: string,\n    initialValue?: string\n  ): UseCssVarReturn & {\n    ref: StateRef<Target>;\n  };\n\n  (target: HookTarget, key: string, initialValue?: string): UseCssVarReturn;\n}\n\n/**\n * @name useCssVar\n * @description - Hook that returns the value of a css variable\n * @category Browser\n * @usage low\n\n * @overload\n * @param {string} key The CSS variable key\n * @param {string} initialValue The initial value of the CSS variable\n * @returns {UseCssVarReturn & { ref: StateRef<Element> }} The object containing the value of the CSS variable and ref\n *\n * @example\n * const { ref, value, set, remove } = useCssVar('--color', 'red');\n *\n * @overload\n * @param {HookTarget} target The target element\n * @param {string} key The CSS variable key\n * @param {string} initialValue The initial value of the CSS variable\n * @returns {UseCssVarReturn} The object containing the value of the CSS variable\n *\n * @example\n * const { value, set, remove } = useCssVar(ref, '--color', 'red');\n */\nexport const useCssVar = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const key = (target ? params[1] : params[0]) as string;\n  const initialValue = (target ? params[2] : params[1]) as string | undefined;\n\n  const [value, setValue] = useState(initialValue ?? '');\n  const internalRef = useRefState<HTMLElement>();\n  const elementRef = useRef<HTMLElement>(null);\n\n  const set = (value: string) => {\n    if (!elementRef.current) return;\n    const element = elementRef.current;\n\n    if (!element.style) return;\n    element.style.setProperty(key, value);\n    setValue(value);\n  };\n\n  const remove = () => {\n    if (!elementRef.current) return;\n    const element = elementRef.current;\n    if (!element.style) return;\n\n    element.style.removeProperty(key);\n    setValue('');\n  };\n\n  useEffect(() => {\n    if (!initialValue) return;\n\n    const element =\n      ((target ? isTarget.getElement(target) : internalRef.current) as HTMLElement) ??\n      window.document.documentElement;\n\n    if (!element.style) return;\n    element.style.setProperty(key, initialValue);\n    setValue(initialValue);\n  }, []);\n\n  useEffect(() => {\n    const element =\n      ((target ? isTarget.getElement(target) : internalRef.current) as HTMLElement) ??\n      window.document.documentElement;\n\n    elementRef.current = element;\n\n    const onChange = () => {\n      const value = window.getComputedStyle(element).getPropertyValue(key)?.trim();\n\n      setValue(value ?? initialValue);\n    };\n\n    const observer = new MutationObserver(onChange);\n\n    observer.observe(element, { attributeFilter: ['style', 'class'] });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [target, internalRef.state]);\n\n  if (target) return { value, set, remove };\n  return { ref: internalRef, value, set, remove };\n}) as UseCssVar;\n"],"names":["useCssVar","params","target","isTarget","key","initialValue","value","setValue","useState","internalRef","useRefState","elementRef","useRef","set","element","remove","useEffect","onChange","observer"],"mappings":";;;AAsDO,MAAMA,IAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAOF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACpCI,IAAgBH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE7C,CAACK,GAAOC,CAAQ,IAAIC,EAASH,KAAgB,EAAE,GAC/CI,IAAcC,EAAA,GACdC,IAAaC,EAAoB,IAAI,GAErCC,IAAM,CAACP,MAAkB;AAC7B,QAAI,CAACK,EAAW,QAAS;AACzB,UAAMG,IAAUH,EAAW;AAE3B,IAAKG,EAAQ,UACbA,EAAQ,MAAM,YAAYV,GAAKE,CAAK,GACpCC,EAASD,CAAK;AAAA,EAAA,GAGVS,IAAS,MAAM;AACnB,QAAI,CAACJ,EAAW,QAAS;AACzB,UAAMG,IAAUH,EAAW;AAC3B,IAAKG,EAAQ,UAEbA,EAAQ,MAAM,eAAeV,CAAG,GAChCG,EAAS,EAAE;AAAA,EAAA;AAqCb,SAlCAS,EAAU,MAAM;AACd,QAAI,CAACX,EAAc;AAEnB,UAAMS,KACFZ,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY,YACrD,OAAO,SAAS;AAElB,IAAKK,EAAQ,UACbA,EAAQ,MAAM,YAAYV,GAAKC,CAAY,GAC3CE,EAASF,CAAY;AAAA,EAAA,GACpB,EAAE,GAELW,EAAU,MAAM;AACd,UAAMF,KACFZ,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY,YACrD,OAAO,SAAS;AAElB,IAAAE,EAAW,UAAUG;AAErB,UAAMG,IAAW,MAAM;AACrB,YAAMX,IAAQ,OAAO,iBAAiBQ,CAAO,EAAE,iBAAiBV,CAAG,GAAG,KAAA;AAEtE,MAAAG,EAASD,KAASD,CAAY;AAAA,IAAA,GAG1Ba,IAAW,IAAI,iBAAiBD,CAAQ;AAE9C,WAAAC,EAAS,QAAQJ,GAAS,EAAE,iBAAiB,CAAC,SAAS,OAAO,GAAG,GAE1D,MAAM;AACX,MAAAI,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAAChB,GAAQO,EAAY,KAAK,CAAC,GAE1BP,IAAe,EAAE,OAAAI,GAAO,KAAAO,GAAK,QAAAE,EAAA,IAC1B,EAAE,KAAKN,GAAa,OAAAH,GAAO,KAAAO,GAAK,QAAAE,EAAA;AACzC;"}

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

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

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 { getElement, 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 = (target ? getElement(target) : internalRef.current) 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]);\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","getElement"],"mappings":";;;;AAuEO,MAAMA,IAAmB,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;AAqBT,SAlBAC,EAAU,MAAM;AACd,QAAI,CAACjB,KAAc,CAACC,KAAU,CAACU,EAAY,MAAQ;AAEnD,UAAMO,IAAWjB,IAASkB,EAAWlB,CAAM,IAAIU,EAAY;AAE3D,QAAKO,MAELV,EAAW,UAAUU,GAEjB,EAACd;AAEL,aAAAW,EAAA,GAEO,MAAM;AACX,QAAAF,EAAA;AAAA,MAAK;AAAA,EACP,GACC,CAACZ,GAAQU,EAAY,KAAK,CAAC,GAE1BV,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, 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,IAAmB,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,KAAK,CAAC,GAE1BV,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/useDocumentEvent/useDocumentEvent.mjs

@@ -1,7 +1,7 @@
 import { useEventListener as r } from "../useEventListener/useEventListener.mjs";
-import { target as m } from "../../utils/helpers/getElement.mjs";
-const u = (t, e, o) => r(m(document), t, e, o);
+import { isTarget as m } from "../../utils/helpers/isTarget.mjs";
+const i = (e, t, o) => r(m.wrap(document), e, t, o);
 export {
-  u as useDocumentEvent
+  i as useDocumentEvent
 };
 //# sourceMappingURL=useDocumentEvent.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useDocumentEvent.mjs","sources":["../../../../src/hooks/useDocumentEvent/useDocumentEvent.ts"],"sourcesContent":["import { target } from '@/utils/helpers';\n\nimport type { UseEventListenerOptions } from '../useEventListener/useEventListener';\n\nimport { useEventListener } from '../useEventListener/useEventListener';\n\n/**\n * @name useDocumentEvent\n * @description - Hook attaches an event listener to the document object for the specified event\n * @category Browser\n * @usage low\n\n * @template Event Key of document event map.\n * @param {Event} event The event to listen for.\n * @param {(event: DocumentEventMap[Event]) => void} listener The callback function to be executed when the event is triggered\n * @param {UseEventListenerOptions} [options] The options for the event listener\n * @returns {void}\n *\n * @example\n * useDocumentEvent('click', () => console.log('clicked'));\n */\nexport const useDocumentEvent = <Event extends keyof DocumentEventMap>(\n  event: Event,\n  listener: (this: Document, event: DocumentEventMap[Event]) => any,\n  options?: UseEventListenerOptions\n) => useEventListener(target(document), event, listener, options);\n"],"names":["useDocumentEvent","event","listener","options","useEventListener","target"],"mappings":";;AAqBO,MAAMA,IAAmB,CAC9BC,GACAC,GACAC,MACGC,EAAiBC,EAAO,QAAQ,GAAGJ,GAAOC,GAAUC,CAAO;"}
+{"version":3,"file":"useDocumentEvent.mjs","sources":["../../../../src/hooks/useDocumentEvent/useDocumentEvent.ts"],"sourcesContent":["import { isTarget } from '@/utils/helpers';\n\nimport type { UseEventListenerOptions } from '../useEventListener/useEventListener';\n\nimport { useEventListener } from '../useEventListener/useEventListener';\n\n/**\n * @name useDocumentEvent\n * @description - Hook attaches an event listener to the document object for the specified event\n * @category Browser\n * @usage low\n\n * @template Event Key of document event map.\n * @param {Event} event The event to listen for.\n * @param {(event: DocumentEventMap[Event]) => void} listener The callback function to be executed when the event is triggered\n * @param {UseEventListenerOptions} [options] The options for the event listener\n * @returns {void}\n *\n * @example\n * useDocumentEvent('click', () => console.log('clicked'));\n */\nexport const useDocumentEvent = <Event extends keyof DocumentEventMap>(\n  event: Event,\n  listener: (this: Document, event: DocumentEventMap[Event]) => any,\n  options?: UseEventListenerOptions\n) => useEventListener(isTarget.wrap(document), event, listener, options);\n"],"names":["useDocumentEvent","event","listener","options","useEventListener","isTarget"],"mappings":";;AAqBO,MAAMA,IAAmB,CAC9BC,GACAC,GACAC,MACGC,EAAiBC,EAAS,KAAK,QAAQ,GAAGJ,GAAOC,GAAUC,CAAO;"}

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

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

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 { getElement, 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 ? 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]);\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","getElement","onClick","event"],"mappings":";;;;AAkCO,MAAMA,IAAyB,KA4BzBC,IAAkB,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,IAASa,EAAWb,CAAM,IAAIO,EAAY;AAC1D,QAAI,CAACK,EAAS;AAEd,UAAME,IAAU,CAACC,MAA6B;AAC5C,MAAAT,EAAc,WAAW,GAErBA,EAAc,YAAY,MAC5BF,EAAa,UAAU,WAAW,MAAM;AACtC,QAAIM,EAAmB,SAAS,iBAC9BA,EAAmB,QAAQ,cAAcK,CAAK,GAChDT,EAAc,UAAU;AAAA,MAAA,GACvBI,EAAmB,SAAS,aAAab,CAAsB,IAGhES,EAAc,YAAY,MAC5B,aAAaF,EAAa,OAAO,GACjCK,EAAoB,QAAQM,CAAK,GACjCT,EAAc,UAAU;AAAA,IAC1B;AAGF,WAAAM,EAAQ,iBAAiB,aAAaE,CAAwB,GAC9DF,EAAQ,iBAAiB,cAAcE,CAAwB,GAExD,MAAM;AACX,MAAAF,EAAQ,oBAAoB,aAAaE,CAAwB,GACjEF,EAAQ,oBAAoB,cAAcE,CAAwB,GAC9DV,EAAa,WAAS,aAAaA,EAAa,OAAO;AAAA,IAAA;AAAA,EAC7D,GACC,CAACJ,GAAQO,EAAY,KAAK,CAAC,GAE1B,CAAAP;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, 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,IAAkB,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,KAAK,CAAC,GAE1B,CAAAP;AACJ,WAAOO;AACT;"}

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

@@ -1,39 +1,38 @@
-import { useRef as V, useState as T, useEffect as F } from "react";
-import { useRefState as R } from "../useRefState/useRefState.mjs";
-import { isTarget as O } from "../../utils/helpers/isTarget.mjs";
-import { getElement as b } from "../../utils/helpers/getElement.mjs";
-const Z = (...n) => {
-  const s = O(n[0]) ? n[0] : void 0, o = s ? typeof n[1] == "object" ? n[1] : { onDrop: n[1] } : typeof n[0] == "object" ? n[0] : { onDrop: n[0] }, a = R(), u = V(0), [v, D] = T(null), [g, p] = T(!1), f = o.dataTypes, L = (e) => {
+import { useRef as F, useState as T, useEffect as R } from "react";
+import { useRefState as O } from "../useRefState/useRefState.mjs";
+import { isTarget as D } from "../../utils/helpers/isTarget.mjs";
+const S = (...n) => {
+  const s = D(n[0]) ? n[0] : void 0, o = s ? typeof n[1] == "object" ? n[1] : { onDrop: n[1] } : typeof n[0] == "object" ? n[0] : { onDrop: n[0] }, f = O(), u = F(0), [p, L] = T(null), [g, v] = T(!1), a = o.dataTypes, y = (e) => {
     if (!e.dataTransfer) return null;
     const t = Array.from(e.dataTransfer.files);
     return o.multiple ? t : t.length ? [t[0]] : null;
-  }, y = (e) => f ? typeof f == "function" ? f(e) : f.length ? e.length ? e.every((t) => f.some((i) => t.includes(i))) : !1 : !0 : !0, h = (e) => {
-    const t = Array.from(e).map((l) => l.type), i = y(t), c = o.multiple || e.length <= 1;
+  }, h = (e) => a ? typeof a == "function" ? a(e) : a.length ? e.length ? e.every((t) => a.some((i) => t.includes(i))) : !1 : !0 : !0, V = (e) => {
+    const t = Array.from(e).map((l) => l.type), i = h(t), c = o.multiple || e.length <= 1;
     return i && c;
   };
-  return F(() => {
-    if (!s && !a.state) return;
-    const e = s ? b(s) : a.current;
+  return R(() => {
+    if (!s && !f.state) return;
+    const e = s ? D.getElement(s) : f.current;
     if (!e) return;
     const t = (r, d) => {
       if (!r.dataTransfer) return;
-      if (!h(r.dataTransfer.items)) {
+      if (!V(r.dataTransfer.items)) {
         r.dataTransfer.dropEffect = "none";
         return;
       }
       r.preventDefault(), r.dataTransfer.dropEffect = "copy";
-      const m = L(r);
+      const m = y(r);
       if (d === "drop") {
-        u.current = 0, p(!1), D(m), o.onDrop?.(m, r);
+        u.current = 0, v(!1), L(m), o.onDrop?.(m, r);
         return;
       }
       if (d === "enter") {
-        u.current += 1, p(!0), o.onEnter?.(r);
+        u.current += 1, v(!0), o.onEnter?.(r);
         return;
       }
       if (d === "leave") {
         if (u.current -= 1, u.current !== 0) return;
-        p(!1), o.onLeave?.(r);
+        v(!1), o.onLeave?.(r);
         return;
       }
       d === "over" && o.onOver?.(r);
@@ -41,9 +40,9 @@ const Z = (...n) => {
     return e.addEventListener("dragenter", l), e.addEventListener("dragover", c), e.addEventListener("dragleave", E), e.addEventListener("drop", i), () => {
       e.removeEventListener("dragenter", l), e.removeEventListener("dragover", c), e.removeEventListener("dragleave", E), e.removeEventListener("drop", i);
     };
-  }, [s, a.current]), s ? { overed: g, files: v } : { ref: a, overed: g, files: v };
+  }, [s, f.current]), s ? { overed: g, files: p } : { ref: f, overed: g, files: p };
 };
 export {
-  Z 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 { getElement, 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 */\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 ? 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.current]);\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","getElement","onEvent","currentFiles","onDrop","onDragOver","onDragEnter","onDragLeave"],"mappings":"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"}
+{"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 */\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.current]);\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":"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"}

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

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

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 { getElement } 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 ? 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.current, 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","getElement","width","height","observer"],"mappings":";;;;AAqDO,MAAMA,IAAkB,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,EAAWR,CAAM,IAAII,EAAY;AAE3D,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,SAASJ,CAAM,CAAC,GAE5BA,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.current, 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,IAAkB,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,SAASJ,CAAM,CAAC,GAE5BA,IAAe,EAAE,OAAOC,EAAA,IACrB;AAAA,IACL,KAAKG;AAAA,IACL,OAAOH;AAAA,EAAA;AAEX;"}