@siberiacancode/reactuse 0.3.6 → 0.3.8

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

@@ -1 +1 @@
-{"version":3,"file":"useHover.mjs","sources":["../../../../src/hooks/useHover/useHover.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 hover options type */\nexport interface UseHoverOptions {\n  /** The enabled state of the hook */\n  enabled?: boolean;\n  /** The on entry callback */\n  onEntry?: (event: Event) => void;\n  /** The on leave callback */\n  onLeave?: (event: Event) => void;\n}\n\nexport interface UseHoverReturn {\n  value: boolean;\n}\n\nexport interface UseHover {\n  (target: HookTarget, callback?: (event: Event) => void): boolean;\n\n  (target: HookTarget, options?: UseHoverOptions): boolean;\n\n  <Target extends Element>(\n    callback?: (event: Event) => void,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseHoverReturn;\n\n  <Target extends Element>(\n    options?: UseHoverOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseHoverReturn;\n}\n\n/**\n * @name useHover\n * @description - Hook that defines the logic when hovering an element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {boolean} The value of the hover\n *\n * @example\n * const hovering = useHover(ref, () => console.log('callback'));\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {boolean} The value of the hover\n *\n * @example\n * const hovering = useHover(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The object with the ref and the value of the hover\n *\n * @example\n * const { ref, value } = useHover(() => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The object with the ref and the value of the hover\n *\n * @example\n * const { ref, value } = useHover(options);\n */\nexport const useHover = ((...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        : { onEntry: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onEntry: params[0] }\n  ) as UseHoverOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n\n  const [hovering, setHovering] = useState(false);\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n    if (!element) return;\n\n    const onMouseEnter = (event: Event) => {\n      internalOptionsRef.current?.onEntry?.(event);\n      setHovering(true);\n    };\n\n    const onMouseLeave = (event: Event) => {\n      internalOptionsRef.current?.onLeave?.(event);\n      setHovering(false);\n    };\n\n    element.addEventListener('mouseenter', onMouseEnter);\n    element.addEventListener('mouseleave', onMouseLeave);\n\n    return () => {\n      element.removeEventListener('mouseenter', onMouseEnter);\n      element.removeEventListener('mouseleave', onMouseLeave);\n    };\n  }, [enabled, target, internalRef.state, isTarget.getRefState(target)]);\n\n  if (target) return hovering;\n  return {\n    ref: internalRef,\n    value: hovering\n  } as const;\n}) as UseHover;\n"],"names":["useHover","params","target","isTarget","options","enabled","hovering","setHovering","useState","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","onMouseEnter","event","onMouseLeave"],"mappings":";;;AAoFO,MAAMA,KAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,IACrB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,GAGrBI,IAAUD,GAAS,WAAW,IAE9B,CAACE,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAcC,EAAA,GACdC,IAAqBC,EAAOR,CAAO;AA6BzC,SA5BAO,EAAmB,UAAUP,GAE7BS,EAAU,MAAM;AACd,QAAI,CAACR,KAAY,CAACH,KAAU,CAACO,EAAY,MAAQ;AAEjD,UAAMK,IAAWZ,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY;AAEpE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAe,CAACC,MAAiB;AACrC,MAAAL,EAAmB,SAAS,UAAUK,CAAK,GAC3CT,EAAY,EAAI;AAAA,IAAA,GAGZU,IAAe,CAACD,MAAiB;AACrC,MAAAL,EAAmB,SAAS,UAAUK,CAAK,GAC3CT,EAAY,EAAK;AAAA,IAAA;AAGnB,WAAAO,EAAQ,iBAAiB,cAAcC,CAAY,GACnDD,EAAQ,iBAAiB,cAAcG,CAAY,GAE5C,MAAM;AACX,MAAAH,EAAQ,oBAAoB,cAAcC,CAAY,GACtDD,EAAQ,oBAAoB,cAAcG,CAAY;AAAA,IAAA;AAAA,EACxD,GACC,CAACZ,GAASH,GAAQO,EAAY,OAAON,EAAS,YAAYD,CAAM,CAAC,CAAC,GAEjEA,IAAeI,IACZ;AAAA,IACL,KAAKG;AAAA,IACL,OAAOH;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"useHover.mjs","sources":["../../../../src/hooks/useHover/useHover.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 hover options type */\nexport interface UseHoverOptions {\n  /** The enabled state of the hook */\n  enabled?: boolean;\n  /** The on entry callback */\n  onEntry?: (event: Event) => void;\n  /** The on leave callback */\n  onLeave?: (event: Event) => void;\n}\n\nexport interface UseHoverReturn {\n  value: boolean;\n}\n\nexport interface UseHover {\n  (target: HookTarget, callback?: (event: Event) => void): boolean;\n\n  (target: HookTarget, options?: UseHoverOptions): boolean;\n\n  <Target extends Element>(\n    callback?: (event: Event) => void,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseHoverReturn;\n\n  <Target extends Element>(\n    options?: UseHoverOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  } & UseHoverReturn;\n}\n\n/**\n * @name useHover\n * @description - Hook that defines the logic when hovering an element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {boolean} The value of the hover\n *\n * @example\n * const hovering = useHover(ref, () => console.log('callback'));\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {boolean} The value of the hover\n *\n * @example\n * const hovering = useHover(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The object with the ref and the value of the hover\n *\n * @example\n * const { ref, value } = useHover(() => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The object with the ref and the value of the hover\n *\n * @example\n * const { ref, value } = useHover(options);\n */\nexport const useHover = ((...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        : { onEntry: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onEntry: params[0] }\n  ) as UseHoverOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n\n  const [hovering, setHovering] = useState(false);\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n    if (!element) return;\n\n    const onMouseEnter = (event: Event) => {\n      internalOptionsRef.current?.onEntry?.(event);\n      setHovering(true);\n    };\n\n    const onMouseLeave = (event: Event) => {\n      internalOptionsRef.current?.onLeave?.(event);\n      setHovering(false);\n    };\n\n    element.addEventListener('mouseenter', onMouseEnter);\n    element.addEventListener('mouseleave', onMouseLeave);\n\n    return () => {\n      element.removeEventListener('mouseenter', onMouseEnter);\n      element.removeEventListener('mouseleave', onMouseLeave);\n    };\n  }, [enabled, target && isTarget.getRawElement(target), internalRef.state]);\n\n  if (target) return hovering;\n  return {\n    ref: internalRef,\n    value: hovering\n  } as const;\n}) as UseHover;\n"],"names":["useHover","params","target","isTarget","options","enabled","hovering","setHovering","useState","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","onMouseEnter","event","onMouseLeave"],"mappings":";;;AAoFO,MAAMA,KAAY,IAAIC,MAAkB;AAC7C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,IACrB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,SAASA,EAAO,CAAC,EAAA,GAGrBI,IAAUD,GAAS,WAAW,IAE9B,CAACE,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAcC,EAAA,GACdC,IAAqBC,EAAOR,CAAO;AA6BzC,SA5BAO,EAAmB,UAAUP,GAE7BS,EAAU,MAAM;AACd,QAAI,CAACR,KAAY,CAACH,KAAU,CAACO,EAAY,MAAQ;AAEjD,UAAMK,IAAWZ,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY;AAEpE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAe,CAACC,MAAiB;AACrC,MAAAL,EAAmB,SAAS,UAAUK,CAAK,GAC3CT,EAAY,EAAI;AAAA,IAAA,GAGZU,IAAe,CAACD,MAAiB;AACrC,MAAAL,EAAmB,SAAS,UAAUK,CAAK,GAC3CT,EAAY,EAAK;AAAA,IAAA;AAGnB,WAAAO,EAAQ,iBAAiB,cAAcC,CAAY,GACnDD,EAAQ,iBAAiB,cAAcG,CAAY,GAE5C,MAAM;AACX,MAAAH,EAAQ,oBAAoB,cAAcC,CAAY,GACtDD,EAAQ,oBAAoB,cAAcG,CAAY;AAAA,IAAA;AAAA,EACxD,GACC,CAACZ,GAASH,KAAUC,EAAS,cAAcD,CAAM,GAAGO,EAAY,KAAK,CAAC,GAErEP,IAAeI,IACZ;AAAA,IACL,KAAKG;AAAA,IACL,OAAOH;AAAA,EAAA;AAEX;"}

package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs

@@ -1,17 +1,17 @@
-import { useState as H, useRef as L, useEffect as I } from "react";
-import { useRefState as T } from "../useRefState/useRefState.mjs";
+import { useState as w, useRef as L, useEffect as H } from "react";
+import { useRefState as I } from "../useRefState/useRefState.mjs";
 import { isTarget as c } from "../../utils/helpers/isTarget.mjs";
 const B = ((...e) => {
-  const t = c(e[0]) ? e[0] : void 0, s = t ? e[1] : e[0], i = t ? e[2] : e[1], l = i?.direction ?? "bottom", f = i?.distance ?? 10, [n, a] = H(!1), o = T(), u = L(s);
+  const t = c(e[0]) ? e[0] : void 0, s = t ? e[1] : e[0], i = t ? e[2] : e[1], l = i?.direction ?? "bottom", f = i?.distance ?? 10, [n, a] = w(!1), o = I(), u = L(s);
   u.current = s;
   const d = L(n);
-  return d.current = n, I(() => {
+  return d.current = n, H(() => {
     if (!t && !o.state) return;
     const r = t ? c.getElement(t) : o.current;
     if (!r) return;
     const g = async (m) => {
       if (d.current) return;
-      const { clientHeight: b, scrollHeight: E, scrollTop: R, clientWidth: S, scrollWidth: v, scrollLeft: h } = m.target, k = E - (R + b), p = v - (h + S);
+      const { clientHeight: E, scrollHeight: b, scrollTop: R, clientWidth: v, scrollWidth: S, scrollLeft: h } = m.target, k = b - (R + E), p = S - (h + v);
       ({
         bottom: k,
         top: R,
@@ -22,7 +22,7 @@ const B = ((...e) => {
     return r.addEventListener("scroll", g), () => {
       r.removeEventListener("scroll", g);
     };
-  }, [t, o.state, c.getRefState(t), l, f]), t ? n : {
+  }, [t && c.getRawElement(t), o.state, l, f]), t ? n : {
     ref: o,
     loading: n
   };

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

@@ -1 +1 @@
-{"version":3,"file":"useInfiniteScroll.mjs","sources":["../../../../src/hooks/useInfiniteScroll/useInfiniteScroll.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 infinite scroll options type */\nexport interface UseInfiniteScrollOptions {\n  /** The direction to trigger the callback */\n  direction?: 'bottom' | 'left' | 'right' | 'top';\n  /** The distance in pixels to trigger the callback */\n  distance?: number;\n}\n\nexport interface UseInfiniteScroll {\n  (\n    target: HookTarget,\n    callback: (event: Event) => void,\n    options?: UseInfiniteScrollOptions\n  ): boolean;\n\n  <Target extends Element>(\n    callback: (event: Event) => void,\n    options?: UseInfiniteScrollOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n    loading: boolean;\n  };\n}\n\n/**\n * @name useInfiniteScroll\n * @description - Hook that defines the logic for infinite scroll\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {{ ref: StateRef<Target>, loading: boolean }} An object containing the ref and loading\n *\n * @example\n * const { ref, loading } = useInfiniteScroll(() => console.log('infinite scroll'));\n *\n * @overload\n * @param {HookTarget} target The target element to detect infinite scroll for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {boolean} A loading indicator of the infinite scroll\n *\n * @example\n * const loading = useInfiniteScroll(ref, () => console.log('infinite scroll'));\n */\nexport const useInfiniteScroll = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (target ? params[1] : params[0]) as (event: Event) => void;\n  const options = (target ? params[2] : params[1]) as UseInfiniteScrollOptions | undefined;\n\n  const direction = options?.direction ?? 'bottom';\n  const distance = options?.distance ?? 10;\n\n  const [loading, setIsLoading] = useState(false);\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalLoadingRef = useRef(loading);\n  internalLoadingRef.current = loading;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onLoadMore = async (event: Event) => {\n      if (internalLoadingRef.current) return;\n\n      const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } =\n        event.target as Element;\n      const scrollBottom = scrollHeight - (scrollTop + clientHeight);\n      const scrollRight = scrollWidth - (scrollLeft + clientWidth);\n\n      const distances = {\n        bottom: scrollBottom,\n        top: scrollTop,\n        right: scrollRight,\n        left: scrollLeft\n      };\n\n      if (distances[direction] <= distance) {\n        setIsLoading(true);\n        await internalCallbackRef.current(event);\n        setIsLoading(false);\n      }\n    };\n\n    element.addEventListener('scroll', onLoadMore);\n\n    return () => {\n      element.removeEventListener('scroll', onLoadMore);\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target), direction, distance]);\n\n  if (target) return loading;\n  return {\n    ref: internalRef,\n    loading\n  };\n}) as UseInfiniteScroll;\n"],"names":["useInfiniteScroll","params","target","isTarget","callback","options","direction","distance","loading","setIsLoading","useState","internalRef","useRefState","internalCallbackRef","useRef","internalLoadingRef","useEffect","element","onLoadMore","event","clientHeight","scrollHeight","scrollTop","clientWidth","scrollWidth","scrollLeft","scrollBottom","scrollRight"],"mappings":";;;AA6DO,MAAMA,KAAqB,IAAIC,MAAkB;AACtD,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,IAAYD,GAAS,aAAa,UAClCE,IAAWF,GAAS,YAAY,IAEhC,CAACG,GAASC,CAAY,IAAIC,EAAS,EAAK,GAExCC,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AAC3C,EAAAS,EAAoB,UAAUT;AAC9B,QAAMW,IAAqBD,EAAON,CAAO;AAqCzC,SApCAO,EAAmB,UAAUP,GAE7BQ,EAAU,MAAM;AACd,QAAI,CAACd,KAAU,CAACS,EAAY,MAAO;AACnC,UAAMM,IAAWf,IAASC,EAAS,WAAWD,CAAM,IAAIS,EAAY;AACpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAa,OAAOC,MAAiB;AACzC,UAAIJ,EAAmB,QAAS;AAEhC,YAAM,EAAE,cAAAK,GAAc,cAAAC,GAAc,WAAAC,GAAW,aAAAC,GAAa,aAAAC,GAAa,YAAAC,MACvEN,EAAM,QACFO,IAAeL,KAAgBC,IAAYF,IAC3CO,IAAcH,KAAeC,IAAaF;AAShD,OAPkB;AAAA,QAChB,QAAQG;AAAA,QACR,KAAKJ;AAAA,QACL,OAAOK;AAAA,QACP,MAAMF;AAAA,MAAA,GAGMnB,CAAS,KAAKC,MAC1BE,EAAa,EAAI,GACjB,MAAMI,EAAoB,QAAQM,CAAK,GACvCV,EAAa,EAAK;AAAA,IACpB;AAGF,WAAAQ,EAAQ,iBAAiB,UAAUC,CAAU,GAEtC,MAAM;AACX,MAAAD,EAAQ,oBAAoB,UAAUC,CAAU;AAAA,IAAA;AAAA,EAClD,GACC,CAAChB,GAAQS,EAAY,OAAOR,EAAS,YAAYD,CAAM,GAAGI,GAAWC,CAAQ,CAAC,GAE7EL,IAAeM,IACZ;AAAA,IACL,KAAKG;AAAA,IACL,SAAAH;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useInfiniteScroll.mjs","sources":["../../../../src/hooks/useInfiniteScroll/useInfiniteScroll.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 infinite scroll options type */\nexport interface UseInfiniteScrollOptions {\n  /** The direction to trigger the callback */\n  direction?: 'bottom' | 'left' | 'right' | 'top';\n  /** The distance in pixels to trigger the callback */\n  distance?: number;\n}\n\nexport interface UseInfiniteScroll {\n  (\n    target: HookTarget,\n    callback: (event: Event) => void,\n    options?: UseInfiniteScrollOptions\n  ): boolean;\n\n  <Target extends Element>(\n    callback: (event: Event) => void,\n    options?: UseInfiniteScrollOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n    loading: boolean;\n  };\n}\n\n/**\n * @name useInfiniteScroll\n * @description - Hook that defines the logic for infinite scroll\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {{ ref: StateRef<Target>, loading: boolean }} An object containing the ref and loading\n *\n * @example\n * const { ref, loading } = useInfiniteScroll(() => console.log('infinite scroll'));\n *\n * @overload\n * @param {HookTarget} target The target element to detect infinite scroll for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {boolean} A loading indicator of the infinite scroll\n *\n * @example\n * const loading = useInfiniteScroll(ref, () => console.log('infinite scroll'));\n */\nexport const useInfiniteScroll = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const callback = (target ? params[1] : params[0]) as (event: Event) => void;\n  const options = (target ? params[2] : params[1]) as UseInfiniteScrollOptions | undefined;\n\n  const direction = options?.direction ?? 'bottom';\n  const distance = options?.distance ?? 10;\n\n  const [loading, setIsLoading] = useState(false);\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n  const internalLoadingRef = useRef(loading);\n  internalLoadingRef.current = loading;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onLoadMore = async (event: Event) => {\n      if (internalLoadingRef.current) return;\n\n      const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } =\n        event.target as Element;\n      const scrollBottom = scrollHeight - (scrollTop + clientHeight);\n      const scrollRight = scrollWidth - (scrollLeft + clientWidth);\n\n      const distances = {\n        bottom: scrollBottom,\n        top: scrollTop,\n        right: scrollRight,\n        left: scrollLeft\n      };\n\n      if (distances[direction] <= distance) {\n        setIsLoading(true);\n        await internalCallbackRef.current(event);\n        setIsLoading(false);\n      }\n    };\n\n    element.addEventListener('scroll', onLoadMore);\n\n    return () => {\n      element.removeEventListener('scroll', onLoadMore);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state, direction, distance]);\n\n  if (target) return loading;\n  return {\n    ref: internalRef,\n    loading\n  };\n}) as UseInfiniteScroll;\n"],"names":["useInfiniteScroll","params","target","isTarget","callback","options","direction","distance","loading","setIsLoading","useState","internalRef","useRefState","internalCallbackRef","useRef","internalLoadingRef","useEffect","element","onLoadMore","event","clientHeight","scrollHeight","scrollTop","clientWidth","scrollWidth","scrollLeft","scrollBottom","scrollRight"],"mappings":";;;AA6DO,MAAMA,KAAqB,IAAIC,MAAkB;AACtD,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,IAAYD,GAAS,aAAa,UAClCE,IAAWF,GAAS,YAAY,IAEhC,CAACG,GAASC,CAAY,IAAIC,EAAS,EAAK,GAExCC,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AAC3C,EAAAS,EAAoB,UAAUT;AAC9B,QAAMW,IAAqBD,EAAON,CAAO;AAqCzC,SApCAO,EAAmB,UAAUP,GAE7BQ,EAAU,MAAM;AACd,QAAI,CAACd,KAAU,CAACS,EAAY,MAAO;AACnC,UAAMM,IAAWf,IAASC,EAAS,WAAWD,CAAM,IAAIS,EAAY;AACpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAa,OAAOC,MAAiB;AACzC,UAAIJ,EAAmB,QAAS;AAEhC,YAAM,EAAE,cAAAK,GAAc,cAAAC,GAAc,WAAAC,GAAW,aAAAC,GAAa,aAAAC,GAAa,YAAAC,MACvEN,EAAM,QACFO,IAAeL,KAAgBC,IAAYF,IAC3CO,IAAcH,KAAeC,IAAaF;AAShD,OAPkB;AAAA,QAChB,QAAQG;AAAA,QACR,KAAKJ;AAAA,QACL,OAAOK;AAAA,QACP,MAAMF;AAAA,MAAA,GAGMnB,CAAS,KAAKC,MAC1BE,EAAa,EAAI,GACjB,MAAMI,EAAoB,QAAQM,CAAK,GACvCV,EAAa,EAAK;AAAA,IACpB;AAGF,WAAAQ,EAAQ,iBAAiB,UAAUC,CAAU,GAEtC,MAAM;AACX,MAAAD,EAAQ,oBAAoB,UAAUC,CAAU;AAAA,IAAA;AAAA,EAClD,GACC,CAAChB,KAAUC,EAAS,cAAcD,CAAM,GAAGS,EAAY,OAAOL,GAAWC,CAAQ,CAAC,GAEjFL,IAAeM,IACZ;AAAA,IACL,KAAKG;AAAA,IACL,SAAAH;AAAA,EAAA;AAEJ;"}

package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs

@@ -1,39 +1,38 @@
-import { useState as v, useRef as R, useEffect as C } from "react";
-import { useRefState as E } from "../useRefState/useRefState.mjs";
+import { useState as v, useRef as E, useEffect as R } from "react";
+import { useRefState as m } from "../useRefState/useRefState.mjs";
 import { isTarget as r } from "../../utils/helpers/isTarget.mjs";
-const j = ((...e) => {
-  const o = r(e[0]) ? e[0] : void 0, t = o ? typeof e[1] == "object" ? e[1] : { onChange: e[1] } : typeof e[0] == "object" ? e[0] : { onChange: e[0] }, c = t?.onChange, f = t?.enabled ?? !0, [i, d] = v(), [u, a] = v(), n = E(), b = R(c);
-  return b.current = c, C(() => {
-    if (!f || !o && !n.state) return;
-    const l = o ? r.getElement(o) : n.current;
-    if (!l) return;
+const k = ((...e) => {
+  const n = r(e[0]) ? e[0] : void 0, t = n ? typeof e[1] == "object" ? e[1] : { onChange: e[1] } : typeof e[0] == "object" ? e[0] : { onChange: e[0] }, c = t?.onChange, i = t?.enabled ?? !0, [f, d] = v(), [u, a] = v(), o = m(), l = E(c);
+  return l.current = c, R(() => {
+    if (!i || !n && !o.state) return;
+    const b = n ? r.getElement(n) : o.current;
+    if (!b) return;
     const s = new IntersectionObserver(
       (g, h) => {
-        a(g), b.current?.(g, h);
+        a(g), l.current?.(g, h);
       },
       {
         ...t,
         root: t?.root ? r.getElement(t.root) : document
       }
     );
-    return d(s), s.observe(l), () => {
+    return d(s), s.observe(b), () => {
       s.disconnect();
     };
   }, [
-    o,
-    n.state,
-    r.getRefState(o),
+    n && r.getRawElement(n),
+    o.state,
     t?.rootMargin,
     t?.threshold,
     t?.root,
-    f
-  ]), o ? { observer: i, entries: u } : {
-    observer: i,
-    ref: n,
+    i
+  ]), n ? { observer: f, entries: u } : {
+    observer: f,
+    ref: o,
     entries: u
   };
 });
 export {
-  j as useIntersectionObserver
+  k as useIntersectionObserver
 };
 //# sourceMappingURL=useIntersectionObserver.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useIntersectionObserver.mjs","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.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 intersection observer callback type */\nexport type UseIntersectionObserverCallback = (\n  entries: IntersectionObserverEntry[],\n  observer: IntersectionObserver\n) => void;\n\n/** The intersection observer options type */\nexport interface UseIntersectionObserverOptions extends Omit<IntersectionObserverInit, 'root'> {\n  /** The enabled state of the intersection observer */\n  enabled?: boolean;\n  /** The callback to execute when intersection is detected */\n  onChange?: UseIntersectionObserverCallback;\n  /** The root element to observe */\n  root?: HookTarget;\n}\n\n/** The intersection observer return type */\nexport interface UseIntersectionObserverReturn {\n  /** The intersection observer entry */\n  entries?: IntersectionObserverEntry[];\n  /** The intersection observer instance */\n  observer?: IntersectionObserver;\n}\n\nexport interface UseIntersectionObserver {\n  <Target extends Element>(\n    options?: UseIntersectionObserverOptions,\n    target?: never\n  ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;\n\n  <Target extends Element>(\n    callback: UseIntersectionObserverCallback,\n    target?: never\n  ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, callback: UseIntersectionObserverCallback): UseIntersectionObserverReturn;\n}\n\n/**\n * @name useIntersectionObserver\n * @description - Hook that gives you intersection observer state\n * @category Sensors\n * @usage medium\n *\n * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver\n *\n * @overload\n * @param {HookTarget} target The target element to detect intersection\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { ref, entries, observer } = useIntersectionObserver();\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { entries, observer } = useIntersectionObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entries, observer } = useIntersectionObserver(() => console.log('callback'));\n *\n * @overload\n * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected\n * @param {HookTarget} target The target element to detect intersection\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { entries, observer } = useIntersectionObserver(ref, () => console.log('callback'));\n */\nexport const useIntersectionObserver = ((...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        : { onChange: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onChange: params[0] }\n  ) as UseIntersectionObserverOptions | undefined;\n\n  const callback = options?.onChange;\n  const enabled = options?.enabled ?? true;\n\n  const [observer, setObserver] = useState<IntersectionObserver>();\n  const [entries, setEntries] = useState<IntersectionObserverEntry[]>();\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const observer = new IntersectionObserver(\n      (entries, observer) => {\n        setEntries(entries);\n        internalCallbackRef.current?.(entries, observer);\n      },\n      {\n        ...options,\n        root: options?.root ? (isTarget.getElement(options.root) as Document | Element) : document\n      }\n    );\n\n    setObserver(observer);\n    observer.observe(element as Element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    target,\n    internalRef.state,\n    isTarget.getRefState(target),\n    options?.rootMargin,\n    options?.threshold,\n    options?.root,\n    enabled\n  ]);\n\n  if (target) return { observer, entries };\n  return {\n    observer,\n    ref: internalRef,\n    entries\n  };\n}) as UseIntersectionObserver;\n"],"names":["useIntersectionObserver","params","target","isTarget","options","callback","enabled","observer","setObserver","useState","entries","setEntries","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element"],"mappings":";;;AA8FO,MAAMA,KAA2B,IAAIC,MAAkB;AAC5D,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAWD,GAAS,UACpBE,IAAUF,GAAS,WAAW,IAE9B,CAACG,GAAUC,CAAW,IAAIC,EAAA,GAC1B,CAACC,GAASC,CAAU,IAAIF,EAAA,GAExBG,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AAoC3C,SAnCAS,EAAoB,UAAUT,GAE9BW,EAAU,MAAM;AACd,QAAI,CAACV,KAAY,CAACJ,KAAU,CAACU,EAAY,MAAQ;AAEjD,UAAMK,IAAUf,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMV,IAAW,IAAI;AAAA,MACnB,CAACG,GAASH,MAAa;AACrB,QAAAI,EAAWD,CAAO,GAClBI,EAAoB,UAAUJ,GAASH,CAAQ;AAAA,MAAA;AAAA,MAEjD;AAAA,QACE,GAAGH;AAAA,QACH,MAAMA,GAAS,OAAQD,EAAS,WAAWC,EAAQ,IAAI,IAA2B;AAAA,MAAA;AAAA,IACpF;AAGF,WAAAI,EAAYD,CAAQ,GACpBA,EAAS,QAAQU,CAAkB,GAE5B,MAAM;AACXV,MAAAA,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC;AAAA,IACDL;AAAA,IACAU,EAAY;AAAA,IACZT,EAAS,YAAYD,CAAM;AAAA,IAC3BE,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTE;AAAA,EAAA,CACD,GAEGJ,IAAe,EAAE,UAAAK,GAAU,SAAAG,EAAA,IACxB;AAAA,IACL,UAAAH;AAAA,IACA,KAAKK;AAAA,IACL,SAAAF;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useIntersectionObserver.mjs","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.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 intersection observer callback type */\nexport type UseIntersectionObserverCallback = (\n  entries: IntersectionObserverEntry[],\n  observer: IntersectionObserver\n) => void;\n\n/** The intersection observer options type */\nexport interface UseIntersectionObserverOptions extends Omit<IntersectionObserverInit, 'root'> {\n  /** The enabled state of the intersection observer */\n  enabled?: boolean;\n  /** The callback to execute when intersection is detected */\n  onChange?: UseIntersectionObserverCallback;\n  /** The root element to observe */\n  root?: HookTarget;\n}\n\n/** The intersection observer return type */\nexport interface UseIntersectionObserverReturn {\n  /** The intersection observer entry */\n  entries?: IntersectionObserverEntry[];\n  /** The intersection observer instance */\n  observer?: IntersectionObserver;\n}\n\nexport interface UseIntersectionObserver {\n  <Target extends Element>(\n    options?: UseIntersectionObserverOptions,\n    target?: never\n  ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;\n\n  <Target extends Element>(\n    callback: UseIntersectionObserverCallback,\n    target?: never\n  ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n  (target: HookTarget, callback: UseIntersectionObserverCallback): UseIntersectionObserverReturn;\n}\n\n/**\n * @name useIntersectionObserver\n * @description - Hook that gives you intersection observer state\n * @category Sensors\n * @usage medium\n *\n * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver\n *\n * @overload\n * @param {HookTarget} target The target element to detect intersection\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { ref, entries, observer } = useIntersectionObserver();\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { entries, observer } = useIntersectionObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entries, observer } = useIntersectionObserver(() => console.log('callback'));\n *\n * @overload\n * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected\n * @param {HookTarget} target The target element to detect intersection\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { entries, observer } = useIntersectionObserver(ref, () => console.log('callback'));\n */\nexport const useIntersectionObserver = ((...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        : { onChange: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onChange: params[0] }\n  ) as UseIntersectionObserverOptions | undefined;\n\n  const callback = options?.onChange;\n  const enabled = options?.enabled ?? true;\n\n  const [observer, setObserver] = useState<IntersectionObserver>();\n  const [entries, setEntries] = useState<IntersectionObserverEntry[]>();\n\n  const internalRef = useRefState<Element>();\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!enabled || (!target && !internalRef.state)) return;\n\n    const element = target ? isTarget.getElement(target) : internalRef.current;\n    if (!element) return;\n\n    const observer = new IntersectionObserver(\n      (entries, observer) => {\n        setEntries(entries);\n        internalCallbackRef.current?.(entries, observer);\n      },\n      {\n        ...options,\n        root: options?.root ? (isTarget.getElement(options.root) as Document | Element) : document\n      }\n    );\n\n    setObserver(observer);\n    observer.observe(element as Element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    target && isTarget.getRawElement(target),\n    internalRef.state,\n    options?.rootMargin,\n    options?.threshold,\n    options?.root,\n    enabled\n  ]);\n\n  if (target) return { observer, entries };\n  return {\n    observer,\n    ref: internalRef,\n    entries\n  };\n}) as UseIntersectionObserver;\n"],"names":["useIntersectionObserver","params","target","isTarget","options","callback","enabled","observer","setObserver","useState","entries","setEntries","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element"],"mappings":";;;AA8FO,MAAMA,KAA2B,IAAIC,MAAkB;AAC5D,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAWD,GAAS,UACpBE,IAAUF,GAAS,WAAW,IAE9B,CAACG,GAAUC,CAAW,IAAIC,EAAA,GAC1B,CAACC,GAASC,CAAU,IAAIF,EAAA,GAExBG,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AAmC3C,SAlCAS,EAAoB,UAAUT,GAE9BW,EAAU,MAAM;AACd,QAAI,CAACV,KAAY,CAACJ,KAAU,CAACU,EAAY,MAAQ;AAEjD,UAAMK,IAAUf,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMV,IAAW,IAAI;AAAA,MACnB,CAACG,GAASH,MAAa;AACrB,QAAAI,EAAWD,CAAO,GAClBI,EAAoB,UAAUJ,GAASH,CAAQ;AAAA,MAAA;AAAA,MAEjD;AAAA,QACE,GAAGH;AAAA,QACH,MAAMA,GAAS,OAAQD,EAAS,WAAWC,EAAQ,IAAI,IAA2B;AAAA,MAAA;AAAA,IACpF;AAGF,WAAAI,EAAYD,CAAQ,GACpBA,EAAS,QAAQU,CAAkB,GAE5B,MAAM;AACXV,MAAAA,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC;AAAA,IACDL,KAAUC,EAAS,cAAcD,CAAM;AAAA,IACvCU,EAAY;AAAA,IACZR,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,IACTE;AAAA,EAAA,CACD,GAEGJ,IAAe,EAAE,UAAAK,GAAU,SAAAG,EAAA,IACxB;AAAA,IACL,UAAAH;AAAA,IACA,KAAKK;AAAA,IACL,SAAAF;AAAA,EAAA;AAEJ;"}

package/dist/esm/hooks/useInterval/useInterval.mjs

@@ -1,7 +1,7 @@
-import { useState as i, useRef as s, useEffect as f } from "react";
-const y = ((...e) => {
-  const o = e[0], n = (typeof e[1] == "number" ? e[1] : e[1].interval) ?? 1e3, l = (typeof e[1] == "object" ? e[1] : e[2])?.immediately ?? !0, [t, r] = i(l ?? !0), c = s(void 0), u = s(o);
-  return u.current = o, f(() => {
+import { useState as f, useRef as s, useEffect as v } from "react";
+const I = ((...e) => {
+  const o = e[0], n = (typeof e[1] == "number" ? e[1] : e[1].interval) ?? 1e3, l = (typeof e[1] == "object" ? e[1] : e[2])?.immediately ?? !0, [t, r] = f(l ?? !0), c = s(void 0), u = s(o);
+  return u.current = o, v(() => {
     if (t)
       return c.current = setInterval(() => u.current(), n), () => {
         clearInterval(c.current);
@@ -12,10 +12,10 @@ const y = ((...e) => {
     resume: () => {
       n <= 0 || r(!0);
     },
-    toggle: () => r(!t)
+    toggle: (i = !t) => r(i)
   };
 });
 export {
-  y as useInterval
+  I as useInterval
 };
 //# sourceMappingURL=useInterval.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useInterval.mjs","sources":["../../../../src/hooks/useInterval/useInterval.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\n/** The use interval options */\nexport interface UseIntervalOptions {\n  /** Start the interval immediately */\n  immediately?: boolean;\n}\n\n/** The use interval return type */\nexport interface UseIntervalReturn {\n  /** Is the interval active */\n  active: boolean;\n  /** Pause the interval */\n  pause: () => void;\n  /** Resume the interval */\n  resume: () => void;\n  /** Toggle the interval */\n  toggle: () => void;\n}\n\ninterface UseInterval {\n  (callback: () => void, interval?: number, options?: UseIntervalOptions): UseIntervalReturn;\n\n  (callback: () => void, options?: UseIntervalOptions & { interval?: number }): UseIntervalReturn;\n}\n\n/**\n * @name useInterval\n * @description - Hook that makes and interval and returns controlling functions\n * @category Time\n * @usage high\n *\n * @overload\n * @param {() => void} callback Any callback function\n * @param {number} [interval=1000] Time in milliseconds\n * @param {boolean} [options.immediately=true] Start the interval immediately\n * @returns {UseIntervalReturn}\n *\n * @example\n * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), 2500);\n *\n * @overload\n * @param {() => void} callback Any callback function\n * @param {number} [options.interval=1000] Time in milliseconds\n * @param {boolean} [options.immediately=true] Start the interval immediately\n *\n * @example\n * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), { interval: 2500 });\n */\nexport const useInterval = ((...params: any[]): UseIntervalReturn => {\n  const callback = params[0] as () => void;\n  const interval =\n    ((typeof params[1] === 'number'\n      ? params[1]\n      : (params[1] as UseIntervalOptions & { interval?: number }).interval) as number) ?? 1000;\n  const options =\n    typeof params[1] === 'object'\n      ? (params[1] as (UseIntervalOptions & { interval?: number }) | undefined)\n      : (params[2] as UseIntervalOptions | undefined);\n  const immediately = options?.immediately ?? true;\n\n  const [active, setActive] = useState<boolean>(immediately ?? true);\n\n  const intervalIdRef = useRef<ReturnType<typeof setInterval>>(undefined);\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!active) return;\n\n    intervalIdRef.current = setInterval(() => internalCallbackRef.current(), interval);\n    return () => {\n      clearInterval(intervalIdRef.current);\n    };\n  }, [active, interval]);\n\n  const pause = () => setActive(false);\n\n  const resume = () => {\n    if (interval <= 0) return;\n    setActive(true);\n  };\n\n  const toggle = () => setActive(!active);\n\n  return {\n    active,\n    pause,\n    resume,\n    toggle\n  };\n}) as UseInterval;\n"],"names":["useInterval","params","callback","interval","immediately","active","setActive","useState","intervalIdRef","useRef","internalCallbackRef","useEffect"],"mappings":";AAiDO,MAAMA,KAAe,IAAIC,MAAqC;AACnE,QAAMC,IAAWD,EAAO,CAAC,GACnBE,KACF,OAAOF,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACPA,EAAO,CAAC,EAAiD,aAAwB,KAKlFG,KAHJ,OAAOH,EAAO,CAAC,KAAM,WAChBA,EAAO,CAAC,IACRA,EAAO,CAAC,IACc,eAAe,IAEtC,CAACI,GAAQC,CAAS,IAAIC,EAAkBH,KAAe,EAAI,GAE3DI,IAAgBC,EAAuC,MAAS,GAChEC,IAAsBD,EAAOP,CAAQ;AAC3C,SAAAQ,EAAoB,UAAUR,GAE9BS,EAAU,MAAM;AACd,QAAKN;AAEL,aAAAG,EAAc,UAAU,YAAY,MAAME,EAAoB,QAAA,GAAWP,CAAQ,GAC1E,MAAM;AACX,sBAAcK,EAAc,OAAO;AAAA,MAAA;AAAA,EACrC,GACC,CAACH,GAAQF,CAAQ,CAAC,GAWd;AAAA,IACL,QAAAE;AAAA,IACA,OAXY,MAAMC,EAAU,EAAK;AAAA,IAYjC,QAVa,MAAM;AACnB,MAAIH,KAAY,KAChBG,EAAU,EAAI;AAAA,IAAA;AAAA,IASd,QANa,MAAMA,EAAU,CAACD,CAAM;AAAA,EAMpC;AAEJ;"}
+{"version":3,"file":"useInterval.mjs","sources":["../../../../src/hooks/useInterval/useInterval.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\n/** The use interval options */\nexport interface UseIntervalOptions {\n  /** Start the interval immediately */\n  immediately?: boolean;\n}\n\n/** The use interval return type */\nexport interface UseIntervalReturn {\n  /** Is the interval active */\n  active: boolean;\n  /** Pause the interval */\n  pause: () => void;\n  /** Resume the interval */\n  resume: () => void;\n  /** Toggle the interval */\n  toggle: () => void;\n}\n\ninterface UseInterval {\n  (callback: () => void, interval?: number, options?: UseIntervalOptions): UseIntervalReturn;\n\n  (callback: () => void, options?: UseIntervalOptions & { interval?: number }): UseIntervalReturn;\n}\n\n/**\n * @name useInterval\n * @description - Hook that makes and interval and returns controlling functions\n * @category Time\n * @usage high\n *\n * @overload\n * @param {() => void} callback Any callback function\n * @param {number} [interval=1000] Time in milliseconds\n * @param {boolean} [options.immediately=true] Start the interval immediately\n * @returns {UseIntervalReturn}\n *\n * @example\n * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), 2500);\n *\n * @overload\n * @param {() => void} callback Any callback function\n * @param {number} [options.interval=1000] Time in milliseconds\n * @param {boolean} [options.immediately=true] Start the interval immediately\n *\n * @example\n * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), { interval: 2500 });\n */\nexport const useInterval = ((...params: any[]): UseIntervalReturn => {\n  const callback = params[0] as () => void;\n  const interval =\n    ((typeof params[1] === 'number'\n      ? params[1]\n      : (params[1] as UseIntervalOptions & { interval?: number }).interval) as number) ?? 1000;\n  const options =\n    typeof params[1] === 'object'\n      ? (params[1] as (UseIntervalOptions & { interval?: number }) | undefined)\n      : (params[2] as UseIntervalOptions | undefined);\n  const immediately = options?.immediately ?? true;\n\n  const [active, setActive] = useState<boolean>(immediately ?? true);\n\n  const intervalIdRef = useRef<ReturnType<typeof setInterval>>(undefined);\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!active) return;\n\n    intervalIdRef.current = setInterval(() => internalCallbackRef.current(), interval);\n    return () => {\n      clearInterval(intervalIdRef.current);\n    };\n  }, [active, interval]);\n\n  const pause = () => setActive(false);\n\n  const resume = () => {\n    if (interval <= 0) return;\n    setActive(true);\n  };\n\n  const toggle = (value = !active) => setActive(value);\n\n  return {\n    active,\n    pause,\n    resume,\n    toggle\n  };\n}) as UseInterval;\n"],"names":["useInterval","params","callback","interval","immediately","active","setActive","useState","intervalIdRef","useRef","internalCallbackRef","useEffect","value"],"mappings":";AAiDO,MAAMA,KAAe,IAAIC,MAAqC;AACnE,QAAMC,IAAWD,EAAO,CAAC,GACnBE,KACF,OAAOF,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACPA,EAAO,CAAC,EAAiD,aAAwB,KAKlFG,KAHJ,OAAOH,EAAO,CAAC,KAAM,WAChBA,EAAO,CAAC,IACRA,EAAO,CAAC,IACc,eAAe,IAEtC,CAACI,GAAQC,CAAS,IAAIC,EAAkBH,KAAe,EAAI,GAE3DI,IAAgBC,EAAuC,MAAS,GAChEC,IAAsBD,EAAOP,CAAQ;AAC3C,SAAAQ,EAAoB,UAAUR,GAE9BS,EAAU,MAAM;AACd,QAAKN;AAEL,aAAAG,EAAc,UAAU,YAAY,MAAME,EAAoB,QAAA,GAAWP,CAAQ,GAC1E,MAAM;AACX,sBAAcK,EAAc,OAAO;AAAA,MAAA;AAAA,EACrC,GACC,CAACH,GAAQF,CAAQ,CAAC,GAWd;AAAA,IACL,QAAAE;AAAA,IACA,OAXY,MAAMC,EAAU,EAAK;AAAA,IAYjC,QAVa,MAAM;AACnB,MAAIH,KAAY,KAChBG,EAAU,EAAI;AAAA,IAAA;AAAA,IASd,QANa,CAACM,IAAQ,CAACP,MAAWC,EAAUM,CAAK;AAAA,EAMjD;AAEJ;"}

package/dist/esm/hooks/useKeyPress/useKeyPress.mjs

@@ -1,11 +1,11 @@
-import { useState as E, useRef as v, useEffect as R } from "react";
-import { useRefState as m } from "../useRefState/useRefState.mjs";
+import { useState as E, useRef as v, useEffect as m } from "react";
+import { useRefState as w } from "../useRefState/useRefState.mjs";
 import { isTarget as i } from "../../utils/helpers/isTarget.mjs";
 const A = ((...n) => {
-  const e = i(n[0]) ? n[0] : void 0, f = e ? n[1] : n[0], y = e ? n[2] : n[1], [a, d] = E(!1), o = m(window), t = v(f);
+  const e = i(n[0]) ? n[0] : void 0, f = e ? n[1] : n[0], y = e ? n[2] : n[1], [a, d] = E(!1), o = w(window), t = v(f);
   t.current = f;
   const c = v(y);
-  return c.current = y, R(() => {
+  return c.current = y, m(() => {
     if (!e && !o.state) return;
     const s = e ? i.getElement(e) : o.current;
     if (!s) return;
@@ -19,7 +19,7 @@ const A = ((...n) => {
     return s.addEventListener("keydown", k), s.addEventListener("keyup", l), () => {
       s.removeEventListener("keydown", k), s.removeEventListener("keyup", l);
     };
-  }, [e, o.state, i.getRefState(e)]), e ? a : { pressed: a, ref: o };
+  }, [e && i.getRawElement(e), o.state]), e ? a : { pressed: a, ref: o };
 });
 export {
   A as useKeyPress

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

@@ -1 +1 @@
-{"version":3,"file":"useKeyPress.mjs","sources":["../../../../src/hooks/useKeyPress/useKeyPress.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 key or keys to listen for */\nexport type UseKeyPressKey = string | string[];\n\n/** The callback function to be invoked when key is pressed */\nexport type UseKeyPressCallback = (pressed: boolean, event: KeyboardEvent) => void;\n\nexport interface UseKeyPress {\n  (target: HookTarget | Window, key: UseKeyPressKey, callback?: UseKeyPressCallback): boolean;\n\n  <Target extends Element>(\n    key: UseKeyPressKey,\n    callback?: UseKeyPressCallback,\n    target?: never\n  ): { pressed: boolean; ref: StateRef<Target> };\n}\n\n/**\n * @name useKeyPress\n * @description - Hook that listens for key press events\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=window] The target to attach the event listeners to\n * @param {UseKeyPressKey} key The key or keys to listen for\n * @param {(pressed: boolean, event: KeyboardEvent) => void} [callback] Callback function invoked when key is pressed\n * @returns {boolean} The pressed state of the key\n *\n * @example\n * const isKeyPressed = useKeyPress(ref, 'a');\n *\n * @overload\n * @template Target The target element type\n * @param {UseKeyPressKey} key The key or keys to listen for\n * @param {(pressed: boolean, event: KeyboardEvent) => void} [callback] Callback function invoked when key is pressed\n * @returns {{ pressed: boolean; ref: StateRef<Target> }} An object containing the pressed state and ref\n *\n * @example\n * const { pressed, ref } = useKeyPress('a');\n */\nexport const useKeyPress = ((...params: any[]) => {\n  const target = isTarget(params[0]) ? params[0] : undefined;\n  const key = (target ? params[1] : params[0]) as UseKeyPressKey;\n  const callback = (target ? params[2] : params[1]) as UseKeyPressCallback | undefined;\n\n  const [pressed, setPressed] = useState(false);\n  const internalRef = useRefState(window);\n\n  const keyRef = useRef(key);\n  keyRef.current = key;\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onKeyDown = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (\n        Array.isArray(keyRef.current)\n          ? keyRef.current.includes(keyboardEvent.key)\n          : keyboardEvent.key === keyRef.current\n      ) {\n        setPressed(true);\n        internalCallbackRef.current?.(true, keyboardEvent);\n      }\n    };\n\n    const onKeyUp = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (\n        Array.isArray(keyRef.current)\n          ? keyRef.current.includes(keyboardEvent.key)\n          : keyboardEvent.key === keyRef.current\n      ) {\n        setPressed(false);\n        internalCallbackRef.current?.(false, keyboardEvent);\n      }\n    };\n\n    element.addEventListener('keydown', onKeyDown);\n    element.addEventListener('keyup', onKeyUp);\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown);\n      element.removeEventListener('keyup', onKeyUp);\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n  if (target) return pressed;\n  return { pressed, ref: internalRef };\n}) as UseKeyPress;\n"],"names":["useKeyPress","params","target","isTarget","key","callback","pressed","setPressed","useState","internalRef","useRefState","keyRef","useRef","internalCallbackRef","useEffect","element","onKeyDown","event","keyboardEvent","onKeyUp"],"mappings":";;;AAkDO,MAAMA,KAAe,IAAIC,MAAkB;AAChD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IAAOF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACpCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAEzC,CAACK,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAcC,EAAY,MAAM,GAEhCC,IAASC,EAAOR,CAAG;AACzB,EAAAO,EAAO,UAAUP;AACjB,QAAMS,IAAsBD,EAAOP,CAAQ;AA0C3C,SAzCAQ,EAAoB,UAAUR,GAE9BS,EAAU,MAAM;AACd,QAAI,CAACZ,KAAU,CAACO,EAAY,MAAO;AAEnC,UAAMM,IAAWb,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY;AACpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AACtB,OACE,MAAM,QAAQN,EAAO,OAAO,IACxBA,EAAO,QAAQ,SAASO,EAAc,GAAG,IACzCA,EAAc,QAAQP,EAAO,aAEjCJ,EAAW,EAAI,GACfM,EAAoB,UAAU,IAAMK,CAAa;AAAA,IACnD,GAGIC,IAAU,CAACF,MAAiB;AAChC,YAAMC,IAAgBD;AACtB,OACE,MAAM,QAAQN,EAAO,OAAO,IACxBA,EAAO,QAAQ,SAASO,EAAc,GAAG,IACzCA,EAAc,QAAQP,EAAO,aAEjCJ,EAAW,EAAK,GAChBM,EAAoB,UAAU,IAAOK,CAAa;AAAA,IACpD;AAGF,WAAAH,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASI,CAAO,GAElC,MAAM;AACX,MAAAJ,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASI,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACjB,GAAQO,EAAY,OAAON,EAAS,YAAYD,CAAM,CAAC,CAAC,GAExDA,IAAeI,IACZ,EAAE,SAAAA,GAAS,KAAKG,EAAA;AACzB;"}
+{"version":3,"file":"useKeyPress.mjs","sources":["../../../../src/hooks/useKeyPress/useKeyPress.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 key or keys to listen for */\nexport type UseKeyPressKey = string | string[];\n\n/** The callback function to be invoked when key is pressed */\nexport type UseKeyPressCallback = (pressed: boolean, event: KeyboardEvent) => void;\n\nexport interface UseKeyPress {\n  (target: HookTarget | Window, key: UseKeyPressKey, callback?: UseKeyPressCallback): boolean;\n\n  <Target extends Element>(\n    key: UseKeyPressKey,\n    callback?: UseKeyPressCallback,\n    target?: never\n  ): { pressed: boolean; ref: StateRef<Target> };\n}\n\n/**\n * @name useKeyPress\n * @description - Hook that listens for key press events\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=window] The target to attach the event listeners to\n * @param {UseKeyPressKey} key The key or keys to listen for\n * @param {(pressed: boolean, event: KeyboardEvent) => void} [callback] Callback function invoked when key is pressed\n * @returns {boolean} The pressed state of the key\n *\n * @example\n * const isKeyPressed = useKeyPress(ref, 'a');\n *\n * @overload\n * @template Target The target element type\n * @param {UseKeyPressKey} key The key or keys to listen for\n * @param {(pressed: boolean, event: KeyboardEvent) => void} [callback] Callback function invoked when key is pressed\n * @returns {{ pressed: boolean; ref: StateRef<Target> }} An object containing the pressed state and ref\n *\n * @example\n * const { pressed, ref } = useKeyPress('a');\n */\nexport const useKeyPress = ((...params: any[]) => {\n  const target = isTarget(params[0]) ? params[0] : undefined;\n  const key = (target ? params[1] : params[0]) as UseKeyPressKey;\n  const callback = (target ? params[2] : params[1]) as UseKeyPressCallback | undefined;\n\n  const [pressed, setPressed] = useState(false);\n  const internalRef = useRefState(window);\n\n  const keyRef = useRef(key);\n  keyRef.current = key;\n  const internalCallbackRef = useRef(callback);\n  internalCallbackRef.current = callback;\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onKeyDown = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (\n        Array.isArray(keyRef.current)\n          ? keyRef.current.includes(keyboardEvent.key)\n          : keyboardEvent.key === keyRef.current\n      ) {\n        setPressed(true);\n        internalCallbackRef.current?.(true, keyboardEvent);\n      }\n    };\n\n    const onKeyUp = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (\n        Array.isArray(keyRef.current)\n          ? keyRef.current.includes(keyboardEvent.key)\n          : keyboardEvent.key === keyRef.current\n      ) {\n        setPressed(false);\n        internalCallbackRef.current?.(false, keyboardEvent);\n      }\n    };\n\n    element.addEventListener('keydown', onKeyDown);\n    element.addEventListener('keyup', onKeyUp);\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown);\n      element.removeEventListener('keyup', onKeyUp);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n  if (target) return pressed;\n  return { pressed, ref: internalRef };\n}) as UseKeyPress;\n"],"names":["useKeyPress","params","target","isTarget","key","callback","pressed","setPressed","useState","internalRef","useRefState","keyRef","useRef","internalCallbackRef","useEffect","element","onKeyDown","event","keyboardEvent","onKeyUp"],"mappings":";;;AAkDO,MAAMA,KAAe,IAAIC,MAAkB;AAChD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IAAOF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACpCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAEzC,CAACK,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAcC,EAAY,MAAM,GAEhCC,IAASC,EAAOR,CAAG;AACzB,EAAAO,EAAO,UAAUP;AACjB,QAAMS,IAAsBD,EAAOP,CAAQ;AA0C3C,SAzCAQ,EAAoB,UAAUR,GAE9BS,EAAU,MAAM;AACd,QAAI,CAACZ,KAAU,CAACO,EAAY,MAAO;AAEnC,UAAMM,IAAWb,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY;AACpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AACtB,OACE,MAAM,QAAQN,EAAO,OAAO,IACxBA,EAAO,QAAQ,SAASO,EAAc,GAAG,IACzCA,EAAc,QAAQP,EAAO,aAEjCJ,EAAW,EAAI,GACfM,EAAoB,UAAU,IAAMK,CAAa;AAAA,IACnD,GAGIC,IAAU,CAACF,MAAiB;AAChC,YAAMC,IAAgBD;AACtB,OACE,MAAM,QAAQN,EAAO,OAAO,IACxBA,EAAO,QAAQ,SAASO,EAAc,GAAG,IACzCA,EAAc,QAAQP,EAAO,aAEjCJ,EAAW,EAAK,GAChBM,EAAoB,UAAU,IAAOK,CAAa;AAAA,IACpD;AAGF,WAAAH,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASI,CAAO,GAElC,MAAM;AACX,MAAAJ,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASI,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACjB,KAAUC,EAAS,cAAcD,CAAM,GAAGO,EAAY,KAAK,CAAC,GAE5DP,IAAeI,IACZ,EAAE,SAAAA,GAAS,KAAKG,EAAA;AACzB;"}

package/dist/esm/hooks/useKeyPressEvent/useKeyPressEvent.mjs

@@ -1,8 +1,8 @@
 import { useRef as d, useEffect as l } from "react";
-import { useRefState as p } from "../useRefState/useRefState.mjs";
+import { useRefState as E } from "../useRefState/useRefState.mjs";
 import { isTarget as s } from "../../utils/helpers/isTarget.mjs";
 const g = ((...e) => {
-  const t = s(e[0]) ? e[0] : void 0, u = t ? e[1] : e[0], i = t ? e[2] : e[1], n = t ? e[3] : e[2], o = p(window), r = d(u);
+  const t = s(e[0]) ? e[0] : void 0, u = t ? e[1] : e[0], i = t ? e[2] : e[1], n = t ? e[3] : e[2], o = E(window), r = d(u);
   r.current = u;
   const f = d(i);
   if (f.current = i, l(() => {
@@ -22,9 +22,8 @@ const g = ((...e) => {
       });
     };
   }, [
-    t,
+    t && s.getRawElement(t),
     o.state,
-    s.getRefState(t),
     n?.capture,
     n?.passive,
     n?.once

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

@@ -1 +1 @@
-{"version":3,"file":"useKeyPressEvent.mjs","sources":["../../../../src/hooks/useKeyPressEvent/useKeyPressEvent.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 key or keys to listen for */\nexport type UseKeyPressEventKey = string | string[];\n\n/** The use key press event options type */\nexport interface UseKeyPressEventOptions {\n  /** Whether the event should be captured */\n  capture?: boolean;\n  /** Whether the event listener should only be triggered once */\n  once?: boolean;\n  /** Whether the event listener should be passive */\n  passive?: boolean;\n}\n\nexport interface UseKeyPressEvent {\n  (\n    target: HookTarget | Window,\n    key: UseKeyPressEventKey,\n    listener: (event: KeyboardEvent) => void,\n    options?: UseKeyPressEventOptions\n  ): void;\n\n  <Target extends Element>(\n    key: UseKeyPressEventKey,\n    listener: (event: KeyboardEvent) => void,\n    options?: UseKeyPressEventOptions,\n    target?: never\n  ): { ref: StateRef<Target> };\n}\n\n/**\n * @name useKeyPressEvent\n * @description - Hook that listens for key press events on specified targets\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {UseKeyPressEventKey} key The key or array of keys to listen for.\n * @param {HookTarget | Window} target The target to attach the event listener to.\n * @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.\n * @param {UseKeyPressEventOptions} [options] The options for the event listener.\n * @returns {void}\n *\n * @example\n * useKeyPressEvent(ref, 'Enter', () => console.log('pressed'));\n *\n * @overload\n * @template Target extends Element\n * @param {UseKeyPressEventKey} key The key or array of keys to listen for.\n * @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.\n * @param {UseKeyPressEventOptions} [options] The options for the event listener.\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n *\n * @example\n * const ref = useKeyPressEvent('Enter', (event) => console.log('pressed'));\n */\nexport const useKeyPressEvent = ((...params: any[]) => {\n  const target = isTarget(params[0]) ? params[0] : undefined;\n  const key = (target ? params[1] : params[0]) as UseKeyPressEventKey;\n  const listener = (target ? params[2] : params[1]) as (event: KeyboardEvent) => void;\n  const options = (target ? params[3] : params[2]) as UseKeyPressEventOptions | undefined;\n\n  const internalRef = useRefState(window);\n\n  const keyRef = useRef(key);\n  keyRef.current = key;\n  const listenerRef = useRef(listener);\n  listenerRef.current = listener;\n\n  useEffect(() => {\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onKeyDown = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      const keys = Array.isArray(keyRef.current) ? keyRef.current : [keyRef.current];\n      if (keys.includes(keyboardEvent.key)) {\n        listenerRef.current(keyboardEvent);\n      }\n    };\n\n    element.addEventListener('keydown', onKeyDown, {\n      capture: options?.capture,\n      passive: options?.passive,\n      once: options?.once\n    });\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown, {\n        capture: options?.capture\n      });\n    };\n  }, [\n    target,\n    internalRef.state,\n    isTarget.getRefState(target),\n    options?.capture,\n    options?.passive,\n    options?.once\n  ]);\n\n  if (target) return;\n  return internalRef;\n}) as UseKeyPressEvent;\n"],"names":["useKeyPressEvent","params","target","isTarget","key","listener","options","internalRef","useRefState","keyRef","useRef","listenerRef","useEffect","element","onKeyDown","event","keyboardEvent"],"mappings":";;;AAiEO,MAAMA,KAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IAAOF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACpCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAcC,EAAY,MAAM,GAEhCC,IAASC,EAAON,CAAG;AACzB,EAAAK,EAAO,UAAUL;AACjB,QAAMO,IAAcD,EAAOL,CAAQ;AAmCnC,MAlCAM,EAAY,UAAUN,GAEtBO,EAAU,MAAM;AACd,UAAMC,IAAWX,IAASC,EAAS,WAAWD,CAAM,IAAIK,EAAY;AACpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AAEtB,OADa,MAAM,QAAQN,EAAO,OAAO,IAAIA,EAAO,UAAU,CAACA,EAAO,OAAO,GACpE,SAASO,EAAc,GAAG,KACjCL,EAAY,QAAQK,CAAa;AAAA,IACnC;AAGF,WAAAH,EAAQ,iBAAiB,WAAWC,GAAW;AAAA,MAC7C,SAASR,GAAS;AAAA,MAClB,SAASA,GAAS;AAAA,MAClB,MAAMA,GAAS;AAAA,IAAA,CAChB,GAEM,MAAM;AACX,MAAAO,EAAQ,oBAAoB,WAAWC,GAAW;AAAA,QAChD,SAASR,GAAS;AAAA,MAAA,CACnB;AAAA,IAAA;AAAA,EACH,GACC;AAAA,IACDJ;AAAA,IACAK,EAAY;AAAA,IACZJ,EAAS,YAAYD,CAAM;AAAA,IAC3BI,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,EAAA,CACV,GAEG,CAAAJ;AACJ,WAAOK;AACT;"}
+{"version":3,"file":"useKeyPressEvent.mjs","sources":["../../../../src/hooks/useKeyPressEvent/useKeyPressEvent.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 key or keys to listen for */\nexport type UseKeyPressEventKey = string | string[];\n\n/** The use key press event options type */\nexport interface UseKeyPressEventOptions {\n  /** Whether the event should be captured */\n  capture?: boolean;\n  /** Whether the event listener should only be triggered once */\n  once?: boolean;\n  /** Whether the event listener should be passive */\n  passive?: boolean;\n}\n\nexport interface UseKeyPressEvent {\n  (\n    target: HookTarget | Window,\n    key: UseKeyPressEventKey,\n    listener: (event: KeyboardEvent) => void,\n    options?: UseKeyPressEventOptions\n  ): void;\n\n  <Target extends Element>(\n    key: UseKeyPressEventKey,\n    listener: (event: KeyboardEvent) => void,\n    options?: UseKeyPressEventOptions,\n    target?: never\n  ): { ref: StateRef<Target> };\n}\n\n/**\n * @name useKeyPressEvent\n * @description - Hook that listens for key press events on specified targets\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {UseKeyPressEventKey} key The key or array of keys to listen for.\n * @param {HookTarget | Window} target The target to attach the event listener to.\n * @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.\n * @param {UseKeyPressEventOptions} [options] The options for the event listener.\n * @returns {void}\n *\n * @example\n * useKeyPressEvent(ref, 'Enter', () => console.log('pressed'));\n *\n * @overload\n * @template Target extends Element\n * @param {UseKeyPressEventKey} key The key or array of keys to listen for.\n * @param {(event: KeyboardEvent) => void} listener The callback function to be executed when the specified key or keys are pressed.\n * @param {UseKeyPressEventOptions} [options] The options for the event listener.\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n *\n * @example\n * const ref = useKeyPressEvent('Enter', (event) => console.log('pressed'));\n */\nexport const useKeyPressEvent = ((...params: any[]) => {\n  const target = isTarget(params[0]) ? params[0] : undefined;\n  const key = (target ? params[1] : params[0]) as UseKeyPressEventKey;\n  const listener = (target ? params[2] : params[1]) as (event: KeyboardEvent) => void;\n  const options = (target ? params[3] : params[2]) as UseKeyPressEventOptions | undefined;\n\n  const internalRef = useRefState(window);\n\n  const keyRef = useRef(key);\n  keyRef.current = key;\n  const listenerRef = useRef(listener);\n  listenerRef.current = listener;\n\n  useEffect(() => {\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onKeyDown = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      const keys = Array.isArray(keyRef.current) ? keyRef.current : [keyRef.current];\n      if (keys.includes(keyboardEvent.key)) {\n        listenerRef.current(keyboardEvent);\n      }\n    };\n\n    element.addEventListener('keydown', onKeyDown, {\n      capture: options?.capture,\n      passive: options?.passive,\n      once: options?.once\n    });\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown, {\n        capture: options?.capture\n      });\n    };\n  }, [\n    target && isTarget.getRawElement(target),\n    internalRef.state,\n    options?.capture,\n    options?.passive,\n    options?.once\n  ]);\n\n  if (target) return;\n  return internalRef;\n}) as UseKeyPressEvent;\n"],"names":["useKeyPressEvent","params","target","isTarget","key","listener","options","internalRef","useRefState","keyRef","useRef","listenerRef","useEffect","element","onKeyDown","event","keyboardEvent"],"mappings":";;;AAiEO,MAAMA,KAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IAAOF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACpCI,IAAYH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACzCK,IAAWJ,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCM,IAAcC,EAAY,MAAM,GAEhCC,IAASC,EAAON,CAAG;AACzB,EAAAK,EAAO,UAAUL;AACjB,QAAMO,IAAcD,EAAOL,CAAQ;AAkCnC,MAjCAM,EAAY,UAAUN,GAEtBO,EAAU,MAAM;AACd,UAAMC,IAAWX,IAASC,EAAS,WAAWD,CAAM,IAAIK,EAAY;AACpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AAEtB,OADa,MAAM,QAAQN,EAAO,OAAO,IAAIA,EAAO,UAAU,CAACA,EAAO,OAAO,GACpE,SAASO,EAAc,GAAG,KACjCL,EAAY,QAAQK,CAAa;AAAA,IACnC;AAGF,WAAAH,EAAQ,iBAAiB,WAAWC,GAAW;AAAA,MAC7C,SAASR,GAAS;AAAA,MAClB,SAASA,GAAS;AAAA,MAClB,MAAMA,GAAS;AAAA,IAAA,CAChB,GAEM,MAAM;AACX,MAAAO,EAAQ,oBAAoB,WAAWC,GAAW;AAAA,QAChD,SAASR,GAAS;AAAA,MAAA,CACnB;AAAA,IAAA;AAAA,EACH,GACC;AAAA,IACDJ,KAAUC,EAAS,cAAcD,CAAM;AAAA,IACvCK,EAAY;AAAA,IACZD,GAAS;AAAA,IACTA,GAAS;AAAA,IACTA,GAAS;AAAA,EAAA,CACV,GAEG,CAAAJ;AACJ,WAAOK;AACT;"}

package/dist/esm/hooks/useKeyboard/useKeyboard.mjs

@@ -1,20 +1,20 @@
 import { useRef as y, useEffect as d } from "react";
 import { useRefState as w } from "../useRefState/useRefState.mjs";
 import { isTarget as c } from "../../utils/helpers/isTarget.mjs";
-const p = ((...e) => {
-  const t = c(e[0]) ? e[0] : void 0, f = t ? typeof e[1] == "object" ? e[1] : { onKeyDown: e[1] } : typeof e[0] == "object" ? e[0] : { onKeyDown: e[0] }, o = w(window), r = y(f);
-  if (r.current = f, d(() => {
+const l = ((...e) => {
+  const t = c(e[0]) ? e[0] : void 0, u = t ? typeof e[1] == "object" ? e[1] : { onKeyDown: e[1] } : typeof e[0] == "object" ? e[0] : { onKeyDown: e[0] }, o = w(window), r = y(u);
+  if (r.current = u, d(() => {
     if (!t && !o.state) return;
     const n = t ? c.getElement(t) : o.current;
     if (!n) return;
-    const u = (i) => r.current?.onKeyDown?.(i), s = (i) => r.current?.onKeyUp?.(i);
-    return n.addEventListener("keydown", u), n.addEventListener("keyup", s), () => {
-      n.removeEventListener("keydown", u), n.removeEventListener("keyup", s);
+    const f = (i) => r.current?.onKeyDown?.(i), s = (i) => r.current?.onKeyUp?.(i);
+    return n.addEventListener("keydown", f), n.addEventListener("keyup", s), () => {
+      n.removeEventListener("keydown", f), n.removeEventListener("keyup", s);
     };
-  }, [t, o.state, c.getRefState(t)]), !t)
+  }, [t && c.getRawElement(t), o.state]), !t)
     return o;
 });
 export {
-  p as useKeyboard
+  l as useKeyboard
 };
 //# sourceMappingURL=useKeyboard.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useKeyboard.mjs","sources":["../../../../src/hooks/useKeyboard/useKeyboard.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 keyboard event handler type */\nexport type KeyboardEventHandler = (event: KeyboardEvent) => void;\n\n/** The use keyboard event options type */\nexport interface UseKeyboardEventOptions {\n  /** The callback function to be invoked on key down */\n  onKeyDown?: KeyboardEventHandler;\n  /** The callback function to be invoked on key up */\n  onKeyUp?: KeyboardEventHandler;\n}\n\nexport interface UseKeyboard {\n  (target: HookTarget, callback: KeyboardEventHandler): void;\n\n  (target: HookTarget, options: UseKeyboardEventOptions): void;\n\n  <Target extends HTMLElement>(\n    callback: KeyboardEventHandler,\n    target?: never\n  ): { ref: StateRef<Target> };\n\n  <Target extends HTMLElement>(\n    options: UseKeyboardEventOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useKeyboard\n * @description - Hook that helps to listen for keyboard events\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target to attach the event listeners to\n * @param {KeyboardEventHandler} callback The callback function to be invoked on key down\n * @returns {void}\n *\n * @example\n * useKeyboard(ref, (event) => console.log('key down'));\n *\n * @overload\n * @param {HookTarget} target The target to attach the event listeners to\n * @param {UseKeyboardEventOptions} [options] The keyboard event options\n * @returns {void}\n *\n * @example\n * useKeyboard(ref, { onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });\n *\n * @overload\n * @template Target The target element type\n * @param {KeyboardEventHandler} callback The callback function to be invoked on key down\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n *\n * @example\n * const ref = useKeyboard((event) => console.log('key down'));\n *\n * @overload\n * @template Target The target element type\n * @param {UseKeyboardEventOptions} [options] The keyboard event options\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n *\n * @example\n * const ref = useKeyboard({ onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });\n */\nexport const useKeyboard = ((...params: any[]) => {\n  const target = isTarget(params[0]) ? params[0] : undefined;\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onKeyDown: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onKeyDown: params[0] }\n  ) as UseKeyboardEventOptions;\n\n  const internalRef = useRefState(window);\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) as HTMLElement;\n    if (!element) return;\n\n    const onKeyDown = (event: Event) =>\n      internalOptionsRef.current?.onKeyDown?.(event as KeyboardEvent);\n    const onKeyUp = (event: Event) => internalOptionsRef.current?.onKeyUp?.(event as KeyboardEvent);\n\n    element.addEventListener('keydown', onKeyDown);\n    element.addEventListener('keyup', onKeyUp);\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown);\n      element.removeEventListener('keyup', onKeyUp);\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n  if (target) return;\n  return internalRef;\n}) as UseKeyboard;\n"],"names":["useKeyboard","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","onKeyDown","event","onKeyUp"],"mappings":";;;AA6EO,MAAMA,KAAe,IAAIC,MAAkB;AAChD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,WAAWA,EAAO,CAAC,EAAA,IACvB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,WAAWA,EAAO,CAAC,EAAA,GAGvBI,IAAcC,EAAY,MAAM,GAChCC,IAAqBC,EAAOJ,CAAO;AAsBzC,MArBAG,EAAmB,UAAUH,GAE7BK,EAAU,MAAM;AACd,QAAI,CAACP,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMK,IAAWR,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY;AACpE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAY,CAACC,MACjBL,EAAmB,SAAS,YAAYK,CAAsB,GAC1DC,IAAU,CAACD,MAAiBL,EAAmB,SAAS,UAAUK,CAAsB;AAE9F,WAAAF,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASG,CAAO,GAElC,MAAM;AACX,MAAAH,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASG,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACX,GAAQG,EAAY,OAAOF,EAAS,YAAYD,CAAM,CAAC,CAAC,GAExD,CAAAA;AACJ,WAAOG;AACT;"}
+{"version":3,"file":"useKeyboard.mjs","sources":["../../../../src/hooks/useKeyboard/useKeyboard.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 keyboard event handler type */\nexport type KeyboardEventHandler = (event: KeyboardEvent) => void;\n\n/** The use keyboard event options type */\nexport interface UseKeyboardEventOptions {\n  /** The callback function to be invoked on key down */\n  onKeyDown?: KeyboardEventHandler;\n  /** The callback function to be invoked on key up */\n  onKeyUp?: KeyboardEventHandler;\n}\n\nexport interface UseKeyboard {\n  (target: HookTarget, callback: KeyboardEventHandler): void;\n\n  (target: HookTarget, options: UseKeyboardEventOptions): void;\n\n  <Target extends HTMLElement>(\n    callback: KeyboardEventHandler,\n    target?: never\n  ): { ref: StateRef<Target> };\n\n  <Target extends HTMLElement>(\n    options: UseKeyboardEventOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useKeyboard\n * @description - Hook that helps to listen for keyboard events\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target to attach the event listeners to\n * @param {KeyboardEventHandler} callback The callback function to be invoked on key down\n * @returns {void}\n *\n * @example\n * useKeyboard(ref, (event) => console.log('key down'));\n *\n * @overload\n * @param {HookTarget} target The target to attach the event listeners to\n * @param {UseKeyboardEventOptions} [options] The keyboard event options\n * @returns {void}\n *\n * @example\n * useKeyboard(ref, { onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });\n *\n * @overload\n * @template Target The target element type\n * @param {KeyboardEventHandler} callback The callback function to be invoked on key down\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n *\n * @example\n * const ref = useKeyboard((event) => console.log('key down'));\n *\n * @overload\n * @template Target The target element type\n * @param {UseKeyboardEventOptions} [options] The keyboard event options\n * @returns {{ ref: StateRef<Target> }} An object containing the ref\n *\n * @example\n * const ref = useKeyboard({ onKeyDown: (event) => console.log('key down'), onKeyUp: (event) => console.log('key up') });\n */\nexport const useKeyboard = ((...params: any[]) => {\n  const target = isTarget(params[0]) ? params[0] : undefined;\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onKeyDown: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onKeyDown: params[0] }\n  ) as UseKeyboardEventOptions;\n\n  const internalRef = useRefState(window);\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) as HTMLElement;\n    if (!element) return;\n\n    const onKeyDown = (event: Event) =>\n      internalOptionsRef.current?.onKeyDown?.(event as KeyboardEvent);\n    const onKeyUp = (event: Event) => internalOptionsRef.current?.onKeyUp?.(event as KeyboardEvent);\n\n    element.addEventListener('keydown', onKeyDown);\n    element.addEventListener('keyup', onKeyUp);\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown);\n      element.removeEventListener('keyup', onKeyUp);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n  if (target) return;\n  return internalRef;\n}) as UseKeyboard;\n"],"names":["useKeyboard","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","onKeyDown","event","onKeyUp"],"mappings":";;;AA6EO,MAAMA,KAAe,IAAIC,MAAkB;AAChD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,WAAWA,EAAO,CAAC,EAAA,IACvB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,WAAWA,EAAO,CAAC,EAAA,GAGvBI,IAAcC,EAAY,MAAM,GAChCC,IAAqBC,EAAOJ,CAAO;AAsBzC,MArBAG,EAAmB,UAAUH,GAE7BK,EAAU,MAAM;AACd,QAAI,CAACP,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMK,IAAWR,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY;AACpE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAY,CAACC,MACjBL,EAAmB,SAAS,YAAYK,CAAsB,GAC1DC,IAAU,CAACD,MAAiBL,EAAmB,SAAS,UAAUK,CAAsB;AAE9F,WAAAF,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASG,CAAO,GAElC,MAAM;AACX,MAAAH,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASG,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACX,KAAUC,EAAS,cAAcD,CAAM,GAAGG,EAAY,KAAK,CAAC,GAE5D,CAAAH;AACJ,WAAOG;AACT;"}

package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs

@@ -1,24 +1,24 @@
-import { useState as v, useEffect as E } from "react";
+import { useState as k, useEffect as v } from "react";
 import { useRefState as a } from "../useRefState/useRefState.mjs";
 import { isTarget as u } from "../../utils/helpers/isTarget.mjs";
 const p = ((...r) => {
-  const e = u(r[0]) ? r[0] : void 0, f = (e ? r[1] : r[0])?.enabled ?? !0, [y, s] = v([]), i = a(window);
-  return E(() => {
+  const e = u(r[0]) ? r[0] : void 0, f = (e ? r[1] : r[0])?.enabled ?? !0, [y, s] = k([]), i = a(window);
+  return v(() => {
     if (!f) return;
     s([]);
     const t = e ? u.getElement(e) : i.current;
     if (!t) return;
-    const k = (c) => {
+    const m = (c) => {
       const n = c;
       s((o) => o.some(({ code: d }) => d === n.code) ? o : [...o, { key: n.key, code: n.code }]);
-    }, m = (c) => {
+    }, E = (c) => {
       const n = c;
       s((o) => o.filter(({ code: d }) => d !== n.code));
     };
-    return t.addEventListener("keydown", k), t.addEventListener("keyup", m), () => {
-      t.removeEventListener("keydown", k), t.removeEventListener("keyup", m);
+    return t.addEventListener("keydown", m), t.addEventListener("keyup", E), () => {
+      t.removeEventListener("keydown", m), t.removeEventListener("keyup", E);
     };
-  }, [f, i.state, e, u.getRefState(e)]), e ? y : { value: y, ref: i };
+  }, [f, i.state, e && u.getRawElement(e)]), e ? y : { value: y, ref: i };
 });
 export {
   p as useKeysPressed

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

@@ -1 +1 @@
-{"version":3,"file":"useKeysPressed.mjs","sources":["../../../../src/hooks/useKeysPressed/useKeysPressed.ts"],"sourcesContent":["import { useEffect, 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 keys pressed options type */\nexport interface UseKeysPressedOptions {\n  /** Enable or disable the event listeners */\n  enabled?: boolean;\n}\n\nexport interface UseKeysPressed {\n  (\n    target: HookTarget | Window,\n    options?: UseKeysPressedOptions\n  ): Array<{\n    key: string;\n    code: string;\n  }>;\n\n  <Target extends Element>(\n    options?: UseKeysPressedOptions\n  ): {\n    value: Array<{ key: string; code: string }>;\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useKeysPressed\n * @description Tracks all currently pressed keyboard keys and their codes\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget | Window} target DOM element or ref to attach keyboard listeners to\n * @param {UseKeysPressedOptions} [options.enabled=true] Enable or disable the event listeners\n * @returns {Array<{ key: string; code: string }>} Array of currently pressed keys with their key and code values\n *\n * @example\n * const pressedKeys = useKeysPressed(ref);\n *\n * @overload\n * @template Target - Type of the target DOM element\n * @param {UseKeysPressedOptions} [options] - Optional configuration options\n * @returns {{ keys: Array<{ key: string; code: string }>; ref: StateRef<Target> }} Object containing pressed keys array and ref to attach to a DOM element\n *\n * @example\n * const { value, ref } = useKeysPressed();\n */\nexport const useKeysPressed = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (target ? params[1] : params[0]) as UseKeysPressedOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n  const [value, setValue] = useState<{ key: string; code: string }[]>([]);\n  const internalRef = useRefState(window);\n\n  useEffect(() => {\n    if (!enabled) return;\n    setValue([]);\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onKeyDown = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      setValue((prevValue) => {\n        if (prevValue.some(({ code }) => code === keyboardEvent.code)) return prevValue;\n        return [...prevValue, { key: keyboardEvent.key, code: keyboardEvent.code }];\n      });\n    };\n\n    const onKeyUp = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      setValue((prevValue) => prevValue.filter(({ code }) => code !== keyboardEvent.code));\n    };\n\n    element.addEventListener('keydown', onKeyDown);\n    element.addEventListener('keyup', onKeyUp);\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown);\n      element.removeEventListener('keyup', onKeyUp);\n    };\n  }, [enabled, internalRef.state, target, isTarget.getRefState(target)]);\n\n  if (target) return value;\n  return { value, ref: internalRef };\n}) as UseKeysPressed;\n"],"names":["useKeysPressed","params","target","isTarget","enabled","value","setValue","useState","internalRef","useRefState","useEffect","element","onKeyDown","event","keyboardEvent","prevValue","code","onKeyUp"],"mappings":";;;AAuDO,MAAMA,KAAkB,IAAIC,MAAkB;AACnD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAG5CG,KAFWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,IAErB,WAAW,IAC9B,CAACI,GAAOC,CAAQ,IAAIC,EAA0C,CAAA,CAAE,GAChEC,IAAcC,EAAY,MAAM;AA+BtC,SA7BAC,EAAU,MAAM;AACd,QAAI,CAACN,EAAS;AACd,IAAAE,EAAS,CAAA,CAAE;AAEX,UAAMK,IAAWT,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY;AACpE,QAAI,CAACG,EAAS;AAEd,UAAMC,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AACtB,MAAAP,EAAS,CAACS,MACJA,EAAU,KAAK,CAAC,EAAE,MAAAC,EAAA,MAAWA,MAASF,EAAc,IAAI,IAAUC,IAC/D,CAAC,GAAGA,GAAW,EAAE,KAAKD,EAAc,KAAK,MAAMA,EAAc,MAAM,CAC3E;AAAA,IAAA,GAGGG,IAAU,CAACJ,MAAiB;AAChC,YAAMC,IAAgBD;AACtB,MAAAP,EAAS,CAACS,MAAcA,EAAU,OAAO,CAAC,EAAE,MAAAC,EAAA,MAAWA,MAASF,EAAc,IAAI,CAAC;AAAA,IAAA;AAGrF,WAAAH,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASM,CAAO,GAElC,MAAM;AACX,MAAAN,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASM,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACb,GAASI,EAAY,OAAON,GAAQC,EAAS,YAAYD,CAAM,CAAC,CAAC,GAEjEA,IAAeG,IACZ,EAAE,OAAAA,GAAO,KAAKG,EAAA;AACvB;"}
+{"version":3,"file":"useKeysPressed.mjs","sources":["../../../../src/hooks/useKeysPressed/useKeysPressed.ts"],"sourcesContent":["import { useEffect, 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 keys pressed options type */\nexport interface UseKeysPressedOptions {\n  /** Enable or disable the event listeners */\n  enabled?: boolean;\n}\n\nexport interface UseKeysPressed {\n  (\n    target: HookTarget | Window,\n    options?: UseKeysPressedOptions\n  ): Array<{\n    key: string;\n    code: string;\n  }>;\n\n  <Target extends Element>(\n    options?: UseKeysPressedOptions\n  ): {\n    value: Array<{ key: string; code: string }>;\n    ref: StateRef<Target>;\n  };\n}\n\n/**\n * @name useKeysPressed\n * @description Tracks all currently pressed keyboard keys and their codes\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget | Window} target DOM element or ref to attach keyboard listeners to\n * @param {UseKeysPressedOptions} [options.enabled=true] Enable or disable the event listeners\n * @returns {Array<{ key: string; code: string }>} Array of currently pressed keys with their key and code values\n *\n * @example\n * const pressedKeys = useKeysPressed(ref);\n *\n * @overload\n * @template Target - Type of the target DOM element\n * @param {UseKeysPressedOptions} [options] - Optional configuration options\n * @returns {{ keys: Array<{ key: string; code: string }>; ref: StateRef<Target> }} Object containing pressed keys array and ref to attach to a DOM element\n *\n * @example\n * const { value, ref } = useKeysPressed();\n */\nexport const useKeysPressed = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (target ? params[1] : params[0]) as UseKeysPressedOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n  const [value, setValue] = useState<{ key: string; code: string }[]>([]);\n  const internalRef = useRefState(window);\n\n  useEffect(() => {\n    if (!enabled) return;\n    setValue([]);\n\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const onKeyDown = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      setValue((prevValue) => {\n        if (prevValue.some(({ code }) => code === keyboardEvent.code)) return prevValue;\n        return [...prevValue, { key: keyboardEvent.key, code: keyboardEvent.code }];\n      });\n    };\n\n    const onKeyUp = (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      setValue((prevValue) => prevValue.filter(({ code }) => code !== keyboardEvent.code));\n    };\n\n    element.addEventListener('keydown', onKeyDown);\n    element.addEventListener('keyup', onKeyUp);\n\n    return () => {\n      element.removeEventListener('keydown', onKeyDown);\n      element.removeEventListener('keyup', onKeyUp);\n    };\n  }, [enabled, internalRef.state, target && isTarget.getRawElement(target)]);\n\n  if (target) return value;\n  return { value, ref: internalRef };\n}) as UseKeysPressed;\n"],"names":["useKeysPressed","params","target","isTarget","enabled","value","setValue","useState","internalRef","useRefState","useEffect","element","onKeyDown","event","keyboardEvent","prevValue","code","onKeyUp"],"mappings":";;;AAuDO,MAAMA,KAAkB,IAAIC,MAAkB;AACnD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAG5CG,KAFWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,IAErB,WAAW,IAC9B,CAACI,GAAOC,CAAQ,IAAIC,EAA0C,CAAA,CAAE,GAChEC,IAAcC,EAAY,MAAM;AA+BtC,SA7BAC,EAAU,MAAM;AACd,QAAI,CAACN,EAAS;AACd,IAAAE,EAAS,CAAA,CAAE;AAEX,UAAMK,IAAWT,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY;AACpE,QAAI,CAACG,EAAS;AAEd,UAAMC,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AACtB,MAAAP,EAAS,CAACS,MACJA,EAAU,KAAK,CAAC,EAAE,MAAAC,EAAA,MAAWA,MAASF,EAAc,IAAI,IAAUC,IAC/D,CAAC,GAAGA,GAAW,EAAE,KAAKD,EAAc,KAAK,MAAMA,EAAc,MAAM,CAC3E;AAAA,IAAA,GAGGG,IAAU,CAACJ,MAAiB;AAChC,YAAMC,IAAgBD;AACtB,MAAAP,EAAS,CAACS,MAAcA,EAAU,OAAO,CAAC,EAAE,MAAAC,EAAA,MAAWA,MAASF,EAAc,IAAI,CAAC;AAAA,IAAA;AAGrF,WAAAH,EAAQ,iBAAiB,WAAWC,CAAS,GAC7CD,EAAQ,iBAAiB,SAASM,CAAO,GAElC,MAAM;AACX,MAAAN,EAAQ,oBAAoB,WAAWC,CAAS,GAChDD,EAAQ,oBAAoB,SAASM,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACb,GAASI,EAAY,OAAON,KAAUC,EAAS,cAAcD,CAAM,CAAC,CAAC,GAErEA,IAAeG,IACZ,EAAE,OAAAA,GAAO,KAAKG,EAAA;AACvB;"}

package/dist/esm/hooks/useLockScroll/useLockScroll.mjs

@@ -1,40 +1,37 @@
 import { useState as w, useRef as a } from "react";
 import { useIsomorphicLayoutEffect as g } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
 import { useRefState as v } from "../useRefState/useRefState.mjs";
-import { isTarget as i } from "../../utils/helpers/isTarget.mjs";
-const R = ((...r) => {
-  const o = i(r[0]) ? r[0] : void 0, n = (o ? r[1] : r[0])?.enabled ?? !0, [l, s] = w(n), c = v(), t = a(null);
+import { isTarget as f } from "../../utils/helpers/isTarget.mjs";
+const R = ((...o) => {
+  const r = f(o[0]) ? o[0] : void 0, n = (r ? o[1] : o[0])?.enabled ?? !0, [l, s] = w(n), u = v(), t = a(null);
   g(() => {
-    const e = (o ? i.getElement(o) : c.current) ?? document.body;
+    const e = (r ? f.getElement(r) : u.current) ?? document.body;
     if (!(e instanceof HTMLElement) || (t.current = e, !n)) return;
-    const m = window.getComputedStyle(e).overflow;
-    return t.current.__originalOverflow = m, e.style.overflow = "hidden", () => {
-      e.style.overflow = m, t.current = null;
+    const d = window.getComputedStyle(e).overflow;
+    return t.current.__originalOverflow = d, e.style.overflow = "hidden", () => {
+      e.style.overflow = d, t.current = null;
     };
-  }, [o, c.state, i.getRefState(o), n]);
-  const u = () => {
+  }, [r && f.getRawElement(r), u.state, n]);
+  const c = () => {
     if (!t.current) return;
     const e = t.current;
     t.current.__originalOverflow = window.getComputedStyle(e).overflow, e.style.overflow = "hidden", s(!0);
-  }, f = () => {
+  }, i = () => {
     if (!t.current) return;
     const e = t.current;
     e.style.overflow = t.current.__originalOverflow, s(!1);
-  }, d = () => {
-    if (l) return f();
-    u();
-  };
-  return o ? {
+  }, m = (e = !l) => e ? c() : i();
+  return r ? {
     value: l,
-    lock: u,
-    unlock: f,
-    toggle: d
+    lock: c,
+    unlock: i,
+    toggle: m
   } : {
-    ref: c,
+    ref: u,
     value: l,
-    lock: u,
-    unlock: f,
-    toggle: d
+    lock: c,
+    unlock: i,
+    toggle: m
   };
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"useLockScroll.mjs","sources":["../../../../src/hooks/useLockScroll/useLockScroll.ts"],"sourcesContent":["import { 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 { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use lock scroll options type */\nexport interface UseLockScrollOptions {\n  /** Enable or disable scroll locking. Default: true */\n  enabled?: boolean;\n}\n\n/** The use lock scroll return type */\nexport interface UseLockScrollReturn<Target extends Element> {\n  /** The ref to attach to the element */\n  ref: StateRef<Target>;\n  /** The value of the lock state */\n  value: boolean;\n  /** Lock the scroll */\n  lock: () => void;\n  /** Toggle the scroll lock */\n  toggle: () => void;\n  /** Unlock the scroll */\n  unlock: () => void;\n}\n\nexport interface UseLockScroll {\n  (target: HookTarget, options?: UseLockScrollOptions): UseLockScrollReturn<Element>;\n\n  <Target extends Element>(\n    options?: UseLockScrollOptions,\n    target?: never\n  ): UseLockScrollReturn<Target> & { ref: StateRef<Target> };\n}\n\n/**\n * @name useLockScroll\n * @description - Hook that locks scroll on an element or document body\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=document.body] The target element to lock scroll on\n * @param {UseLockScrollOptions} [options] The options for scroll locking\n * @returns {void}\n *\n * @example\n * const { lock, unlock, value, toggle } = useLockScroll(ref);\n *\n * @overload\n * @template Target The target element\n * @param {UseLockScrollOptions} [options] The options for scroll locking\n * @returns {StateRef<Target>} Ref to attach to element, or locks body scroll by default\n *\n * @example\n * const { ref, lock, unlock, value, toggle } = useLockScroll();\n */\nexport const useLockScroll = ((...params: any[]): any => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (target ? params[1] : params[0]) as UseLockScrollOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n  const [locked, setLocked] = useState(enabled);\n\n  const internalRef = useRefState<Element>();\n  const elementRef = useRef<Element>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    const element =\n      ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? document.body;\n\n    if (!(element instanceof HTMLElement)) return;\n\n    elementRef.current = element;\n\n    if (!enabled) return;\n\n    const originalStyle = window.getComputedStyle(element).overflow;\n    (elementRef.current as any).__originalOverflow = originalStyle;\n    element.style.overflow = 'hidden';\n\n    return () => {\n      element.style.overflow = originalStyle;\n      elementRef.current = null;\n    };\n  }, [target, internalRef.state, isTarget.getRefState(target), enabled]);\n\n  const lock = () => {\n    if (!elementRef.current) return;\n    const element = elementRef.current as HTMLElement;\n    (elementRef.current as any).__originalOverflow = window.getComputedStyle(element).overflow;\n    element.style.overflow = 'hidden';\n    setLocked(true);\n  };\n\n  const unlock = () => {\n    if (!elementRef.current) return;\n    const element = elementRef.current as HTMLElement;\n    element.style.overflow = (elementRef.current as any).__originalOverflow;\n    setLocked(false);\n  };\n\n  const toggle = () => {\n    if (locked) return unlock();\n    lock();\n  };\n\n  if (target)\n    return {\n      value: locked,\n      lock,\n      unlock,\n      toggle\n    };\n  return {\n    ref: internalRef,\n    value: locked,\n    lock,\n    unlock,\n    toggle\n  };\n}) as UseLockScroll;\n"],"names":["useLockScroll","params","target","isTarget","enabled","locked","setLocked","useState","internalRef","useRefState","elementRef","useRef","useIsomorphicLayoutEffect","element","originalStyle","lock","unlock","toggle"],"mappings":";;;;AA8DO,MAAMA,KAAiB,IAAIC,MAAuB;AACvD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAG5CG,KAFWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,IAErB,WAAW,IAC9B,CAACI,GAAQC,CAAS,IAAIC,EAASH,CAAO,GAEtCI,IAAcC,EAAA,GACdC,IAAaC,EAAgB,IAAI;AAEvC,EAAAC,EAA0B,MAAM;AAC9B,UAAMC,KACFX,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY,YAAwB,SAAS;AAMxF,QAJI,EAAEK,aAAmB,iBAEzBH,EAAW,UAAUG,GAEjB,CAACT,GAAS;AAEd,UAAMU,IAAgB,OAAO,iBAAiBD,CAAO,EAAE;AACtD,WAAAH,EAAW,QAAgB,qBAAqBI,GACjDD,EAAQ,MAAM,WAAW,UAElB,MAAM;AACX,MAAAA,EAAQ,MAAM,WAAWC,GACzBJ,EAAW,UAAU;AAAA,IAAA;AAAA,EACvB,GACC,CAACR,GAAQM,EAAY,OAAOL,EAAS,YAAYD,CAAM,GAAGE,CAAO,CAAC;AAErE,QAAMW,IAAO,MAAM;AACjB,QAAI,CAACL,EAAW,QAAS;AACzB,UAAMG,IAAUH,EAAW;AAC1B,IAAAA,EAAW,QAAgB,qBAAqB,OAAO,iBAAiBG,CAAO,EAAE,UAClFA,EAAQ,MAAM,WAAW,UACzBP,EAAU,EAAI;AAAA,EAAA,GAGVU,IAAS,MAAM;AACnB,QAAI,CAACN,EAAW,QAAS;AACzB,UAAMG,IAAUH,EAAW;AAC3B,IAAAG,EAAQ,MAAM,WAAYH,EAAW,QAAgB,oBACrDJ,EAAU,EAAK;AAAA,EAAA,GAGXW,IAAS,MAAM;AACnB,QAAIZ,UAAeW,EAAA;AACnB,IAAAD,EAAA;AAAA,EAAK;AAGP,SAAIb,IACK;AAAA,IACL,OAAOG;AAAA,IACP,MAAAU;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,EAAA,IAEG;AAAA,IACL,KAAKT;AAAA,IACL,OAAOH;AAAA,IACP,MAAAU;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useLockScroll.mjs","sources":["../../../../src/hooks/useLockScroll/useLockScroll.ts"],"sourcesContent":["import { 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 { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use lock scroll options type */\nexport interface UseLockScrollOptions {\n  /** Enable or disable scroll locking. Default: true */\n  enabled?: boolean;\n}\n\n/** The use lock scroll return type */\nexport interface UseLockScrollReturn<Target extends Element> {\n  /** The ref to attach to the element */\n  ref: StateRef<Target>;\n  /** The value of the lock state */\n  value: boolean;\n  /** Lock the scroll */\n  lock: () => void;\n  /** Toggle the scroll lock */\n  toggle: (value?: boolean) => void;\n  /** Unlock the scroll */\n  unlock: () => void;\n}\n\nexport interface UseLockScroll {\n  (target: HookTarget, options?: UseLockScrollOptions): UseLockScrollReturn<Element>;\n\n  <Target extends Element>(\n    options?: UseLockScrollOptions,\n    target?: never\n  ): UseLockScrollReturn<Target> & { ref: StateRef<Target> };\n}\n\n/**\n * @name useLockScroll\n * @description - Hook that locks scroll on an element or document body\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=document.body] The target element to lock scroll on\n * @param {UseLockScrollOptions} [options] The options for scroll locking\n * @returns {void}\n *\n * @example\n * const { lock, unlock, value, toggle } = useLockScroll(ref);\n *\n * @overload\n * @template Target The target element\n * @param {UseLockScrollOptions} [options] The options for scroll locking\n * @returns {StateRef<Target>} Ref to attach to element, or locks body scroll by default\n *\n * @example\n * const { ref, lock, unlock, value, toggle } = useLockScroll();\n */\nexport const useLockScroll = ((...params: any[]): any => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (target ? params[1] : params[0]) as UseLockScrollOptions | undefined;\n\n  const enabled = options?.enabled ?? true;\n  const [locked, setLocked] = useState(enabled);\n\n  const internalRef = useRefState<Element>();\n  const elementRef = useRef<Element>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    const element =\n      ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? document.body;\n\n    if (!(element instanceof HTMLElement)) return;\n\n    elementRef.current = element;\n\n    if (!enabled) return;\n\n    const originalStyle = window.getComputedStyle(element).overflow;\n    (elementRef.current as any).__originalOverflow = originalStyle;\n    element.style.overflow = 'hidden';\n\n    return () => {\n      element.style.overflow = originalStyle;\n      elementRef.current = null;\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state, enabled]);\n\n  const lock = () => {\n    if (!elementRef.current) return;\n    const element = elementRef.current as HTMLElement;\n    (elementRef.current as any).__originalOverflow = window.getComputedStyle(element).overflow;\n    element.style.overflow = 'hidden';\n    setLocked(true);\n  };\n\n  const unlock = () => {\n    if (!elementRef.current) return;\n    const element = elementRef.current as HTMLElement;\n    element.style.overflow = (elementRef.current as any).__originalOverflow;\n    setLocked(false);\n  };\n\n  const toggle = (value = !locked) => {\n    if (value) return lock();\n    return unlock();\n  };\n\n  if (target)\n    return {\n      value: locked,\n      lock,\n      unlock,\n      toggle\n    };\n  return {\n    ref: internalRef,\n    value: locked,\n    lock,\n    unlock,\n    toggle\n  };\n}) as UseLockScroll;\n"],"names":["useLockScroll","params","target","isTarget","enabled","locked","setLocked","useState","internalRef","useRefState","elementRef","useRef","useIsomorphicLayoutEffect","element","originalStyle","lock","unlock","toggle","value"],"mappings":";;;;AA8DO,MAAMA,KAAiB,IAAIC,MAAuB;AACvD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAG5CG,KAFWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,IAErB,WAAW,IAC9B,CAACI,GAAQC,CAAS,IAAIC,EAASH,CAAO,GAEtCI,IAAcC,EAAA,GACdC,IAAaC,EAAgB,IAAI;AAEvC,EAAAC,EAA0B,MAAM;AAC9B,UAAMC,KACFX,IAASC,EAAS,WAAWD,CAAM,IAAIM,EAAY,YAAwB,SAAS;AAMxF,QAJI,EAAEK,aAAmB,iBAEzBH,EAAW,UAAUG,GAEjB,CAACT,GAAS;AAEd,UAAMU,IAAgB,OAAO,iBAAiBD,CAAO,EAAE;AACtD,WAAAH,EAAW,QAAgB,qBAAqBI,GACjDD,EAAQ,MAAM,WAAW,UAElB,MAAM;AACX,MAAAA,EAAQ,MAAM,WAAWC,GACzBJ,EAAW,UAAU;AAAA,IAAA;AAAA,EACvB,GACC,CAACR,KAAUC,EAAS,cAAcD,CAAM,GAAGM,EAAY,OAAOJ,CAAO,CAAC;AAEzE,QAAMW,IAAO,MAAM;AACjB,QAAI,CAACL,EAAW,QAAS;AACzB,UAAMG,IAAUH,EAAW;AAC1B,IAAAA,EAAW,QAAgB,qBAAqB,OAAO,iBAAiBG,CAAO,EAAE,UAClFA,EAAQ,MAAM,WAAW,UACzBP,EAAU,EAAI;AAAA,EAAA,GAGVU,IAAS,MAAM;AACnB,QAAI,CAACN,EAAW,QAAS;AACzB,UAAMG,IAAUH,EAAW;AAC3B,IAAAG,EAAQ,MAAM,WAAYH,EAAW,QAAgB,oBACrDJ,EAAU,EAAK;AAAA,EAAA,GAGXW,IAAS,CAACC,IAAQ,CAACb,MACnBa,IAAcH,EAAA,IACXC,EAAA;AAGT,SAAId,IACK;AAAA,IACL,OAAOG;AAAA,IACP,MAAAU;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,EAAA,IAEG;AAAA,IACL,KAAKT;AAAA,IACL,OAAOH;AAAA,IACP,MAAAU;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,EAAA;AAEJ;"}

package/dist/esm/hooks/useLongPress/useLongPress.mjs

@@ -1,9 +1,9 @@
 import { useState as R, useRef as f, useEffect as h } from "react";
 import { useRefState as T } from "../useRefState/useRefState.mjs";
 import { isTarget as a } from "../../utils/helpers/isTarget.mjs";
-const S = 400, P = ((...t) => {
-  const e = a(t[0]) ? t[0] : void 0, l = e ? t[1] : t[0], m = e ? t[2] : t[1], [E, v] = R(!1), n = f(void 0), d = f(!1), u = T(), L = f(l);
-  L.current = l;
+const g = 400, P = ((...t) => {
+  const e = a(t[0]) ? t[0] : void 0, l = e ? t[1] : t[0], m = e ? t[2] : t[1], [E, v] = R(!1), n = f(void 0), d = f(!1), u = T(), w = f(l);
+  w.current = l;
   const r = f(m);
   return r.current = m, h(() => {
     if (!e && !u.state) return;
@@ -11,15 +11,15 @@ const S = 400, P = ((...t) => {
     if (!o) return;
     const c = (s) => {
       r.current?.onStart?.(s), d.current = !0, n.current = setTimeout(() => {
-        L.current(s), v(!0);
-      }, r.current?.threshold ?? S);
+        w.current(s), v(!0);
+      }, r.current?.threshold ?? g);
     }, i = (s) => {
-      v((w) => (w ? r.current?.onFinish?.(s) : d.current && r.current?.onCancel?.(s), d.current = !1, n.current && clearTimeout(n.current), !1));
+      v((L) => (L ? r.current?.onFinish?.(s) : d.current && r.current?.onCancel?.(s), d.current = !1, n.current && clearTimeout(n.current), !1));
     };
     return o.addEventListener("mousedown", c), window.addEventListener("mouseup", i), o.addEventListener("touchstart", c), window.addEventListener("touchend", i), () => {
       o.removeEventListener("mousedown", c), window.removeEventListener("mouseup", i), o.removeEventListener("touchstart", c), window.removeEventListener("touchend", i), n.current && clearTimeout(n.current);
     };
-  }, [e, u.state, a.getRefState(e)]), e ? E : {
+  }, [e && a.getRawElement(e), u.state]), e ? E : {
     ref: u,
     pressed: E
   };