@siberiacancode/reactuse 0.2.23 → 0.2.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/cjs/hooks/useAudio/useAudio.cjs.map +1 -1
  2. package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs +2 -0
  3. package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs.map +1 -0
  4. package/dist/cjs/hooks/useBattery/useBattery.cjs.map +1 -1
  5. package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs +1 -1
  6. package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs.map +1 -1
  7. package/dist/cjs/hooks/useEvent/useEvent.cjs +1 -1
  8. package/dist/cjs/hooks/useEvent/useEvent.cjs.map +1 -1
  9. package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs +1 -1
  10. package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs.map +1 -1
  11. package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs +1 -1
  12. package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs.map +1 -1
  13. package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs.map +1 -1
  14. package/dist/cjs/hooks/useLockCallback/useLockCallback.cjs +1 -1
  15. package/dist/cjs/hooks/useLockCallback/useLockCallback.cjs.map +1 -1
  16. package/dist/cjs/hooks/useMemory/useMemory.cjs.map +1 -1
  17. package/dist/cjs/hooks/useScroll/useScroll.cjs.map +1 -1
  18. package/dist/cjs/hooks/useWindowEvent/useWindowEvent.cjs.map +1 -1
  19. package/dist/cjs/hooks/useWindowScroll/useWindowScroll.cjs.map +1 -1
  20. package/dist/cjs/index.cjs +1 -1
  21. package/dist/esm/hooks/useAudio/useAudio.mjs.map +1 -1
  22. package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs +39 -0
  23. package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs.map +1 -0
  24. package/dist/esm/hooks/useBattery/useBattery.mjs.map +1 -1
  25. package/dist/esm/hooks/useClickOutside/useClickOutside.mjs +12 -12
  26. package/dist/esm/hooks/useClickOutside/useClickOutside.mjs.map +1 -1
  27. package/dist/esm/hooks/useEvent/useEvent.mjs +6 -6
  28. package/dist/esm/hooks/useEvent/useEvent.mjs.map +1 -1
  29. package/dist/esm/hooks/useKeyPress/useKeyPress.mjs.map +1 -1
  30. package/dist/esm/hooks/useKeyboard/useKeyboard.mjs +15 -15
  31. package/dist/esm/hooks/useKeyboard/useKeyboard.mjs.map +1 -1
  32. package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs.map +1 -1
  33. package/dist/esm/hooks/useLockCallback/useLockCallback.mjs.map +1 -1
  34. package/dist/esm/hooks/useMemory/useMemory.mjs.map +1 -1
  35. package/dist/esm/hooks/useScroll/useScroll.mjs.map +1 -1
  36. package/dist/esm/hooks/useWindowEvent/useWindowEvent.mjs.map +1 -1
  37. package/dist/esm/hooks/useWindowScroll/useWindowScroll.mjs.map +1 -1
  38. package/dist/esm/index.mjs +336 -334
  39. package/dist/esm/index.mjs.map +1 -1
  40. package/dist/types/hooks/index.d.ts +1 -0
  41. package/dist/types/hooks/useAutoScroll/useAutoScroll.d.ts +33 -0
  42. package/dist/types/hooks/useKeyPress/useKeyPress.d.ts +1 -1
  43. package/dist/types/hooks/useKeyboard/useKeyboard.d.ts +28 -8
  44. package/dist/types/hooks/useWindowEvent/useWindowEvent.d.ts +1 -1
  45. package/dist/types/hooks/useWindowScroll/useWindowScroll.d.ts +1 -1
  46. package/package.json +89 -89
@@ -1,19 +1,19 @@
1
- import { useRef as l, useEffect as u } from "react";
2
- import { useRefState as f } from "../useRefState/useRefState.mjs";
1
+ import { useRef as u, useEffect as f } from "react";
2
+ import { useRefState as l } from "../useRefState/useRefState.mjs";
3
3
  import { isTarget as m } from "../../utils/helpers/isTarget.mjs";
4
4
  import { getElement as a } from "../../utils/helpers/getElement.mjs";
5
- const R = (...e) => {
6
- const t = m(e[0]) ? e[0] : void 0, r = e[1] ? e[1] : e[0], n = f(), o = l(r);
7
- if (o.current = r, u(() => {
8
- if (console.log("target", t), !t && !n.state) return;
9
- const c = (i) => {
10
- const s = t ? a(t) : n.current;
11
- s && !s.contains(i.target) && o.current(i);
5
+ const R = (...t) => {
6
+ const e = m(t[0]) ? t[0] : void 0, r = t[1] ? t[1] : t[0], n = l(), c = u(r);
7
+ if (c.current = r, f(() => {
8
+ if (!e && !n.state) return;
9
+ const o = (i) => {
10
+ const s = e ? a(e) : n.current;
11
+ s && !s.contains(i.target) && c.current(i);
12
12
  };
13
- return document.addEventListener("click", c), () => {
14
- document.removeEventListener("click", c);
13
+ return document.addEventListener("click", o), () => {
14
+ document.removeEventListener("click", o);
15
15
  };
16
- }, [t, n.state]), !t)
16
+ }, [e, n.state]), !e)
17
17
  return n;
18
18
  };
19
19
  export {
@@ -1 +1 @@
1
- {"version":3,"file":"useClickOutside.mjs","sources":["../../../../src/hooks/useClickOutside/useClickOutside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport interface UseClickOutside {\n (target: HookTarget, callback: (event: Event) => void): void;\n\n <Target extends Element>(callback: (event: Event) => void, target?: never): StateRef<Target>;\n}\n\n/**\n * @name useClickOutside\n * @description - Hook to handle click events outside the specified target element(s)\n * @category Sensors\n *\n * @overload\n * @param {HookTarget} target The target element(s) to detect outside clicks for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {void}\n *\n * @example\n * useClickOutside(ref, () => console.log('click outside'));\n *\n * @overload\n * @template Target The target element(s)\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {(node: Target) => void} A React ref to attach to the target element\n *\n * @example\n * const ref = useClickOutside<HTMLDivElement>(() => console.log('click outside'));\n *\n * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useClickOutside.html}\n */\nexport const useClickOutside = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const callback = (params[1] ? params[1] : params[0]) as (event: Event) => void;\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n console.log('target', target);\n if (!target && !internalRef.state) return;\n const onClick = (event: Event) => {\n const element = (target ? getElement(target) : internalRef.current) as Element;\n\n if (element && !element.contains(event.target as Node)) {\n internalCallbackRef.current(event);\n }\n };\n\n document.addEventListener('click', onClick);\n\n return () => {\n document.removeEventListener('click', onClick);\n };\n }, [target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseClickOutside;\n"],"names":["useClickOutside","params","target","isTarget","callback","internalRef","useRefState","internalCallbackRef","useRef","useEffect","onClick","event","element","getElement"],"mappings":";;;;AAuCO,MAAMA,IAAmB,IAAIC,MAAkB;AACpD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYH,EAAO,CAAC,IAAIA,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE5CI,IAAcC,EAAA,GACdC,IAAsBC,EAAOJ,CAAQ;AAqB3C,MApBAG,EAAoB,UAAUH,GAE9BK,EAAU,MAAM;AAEd,QADA,QAAQ,IAAI,UAAUP,CAAM,GACxB,CAACA,KAAU,CAACG,EAAY,MAAO;AACnC,UAAMK,IAAU,CAACC,MAAiB;AAChC,YAAMC,IAAWV,IAASW,EAAWX,CAAM,IAAIG,EAAY;AAE3D,MAAIO,KAAW,CAACA,EAAQ,SAASD,EAAM,MAAc,KACnDJ,EAAoB,QAAQI,CAAK;AAAA,IACnC;AAGF,oBAAS,iBAAiB,SAASD,CAAO,GAEnC,MAAM;AACX,eAAS,oBAAoB,SAASA,CAAO;AAAA,IAAA;AAAA,EAC/C,GACC,CAACR,GAAQG,EAAY,KAAK,CAAC,GAE1B,CAAAH;AACJ,WAAOG;AACT;"}
1
+ {"version":3,"file":"useClickOutside.mjs","sources":["../../../../src/hooks/useClickOutside/useClickOutside.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport interface UseClickOutside {\n (target: HookTarget, callback: (event: Event) => void): void;\n\n <Target extends Element>(callback: (event: Event) => void, target?: never): StateRef<Target>;\n}\n\n/**\n * @name useClickOutside\n * @description - Hook to handle click events outside the specified target element(s)\n * @category Sensors\n *\n * @overload\n * @param {HookTarget} target The target element(s) to detect outside clicks for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {void}\n *\n * @example\n * useClickOutside(ref, () => console.log('click outside'));\n *\n * @overload\n * @template Target The target element(s)\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @returns {(node: Target) => void} A React ref to attach to the target element\n *\n * @example\n * const ref = useClickOutside<HTMLDivElement>(() => console.log('click outside'));\n *\n * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useClickOutside.html}\n */\nexport const useClickOutside = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const callback = (params[1] ? params[1] : params[0]) as (event: Event) => void;\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n const onClick = (event: Event) => {\n const element = (target ? getElement(target) : internalRef.current) as Element;\n\n if (element && !element.contains(event.target as Node)) {\n internalCallbackRef.current(event);\n }\n };\n\n document.addEventListener('click', onClick);\n\n return () => {\n document.removeEventListener('click', onClick);\n };\n }, [target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseClickOutside;\n"],"names":["useClickOutside","params","target","isTarget","callback","internalRef","useRefState","internalCallbackRef","useRef","useEffect","onClick","event","element","getElement"],"mappings":";;;;AAuCO,MAAMA,IAAmB,IAAIC,MAAkB;AACpD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYH,EAAO,CAAC,IAAIA,EAAO,CAAC,IAAIA,EAAO,CAAC,GAE5CI,IAAcC,EAAA,GACdC,IAAsBC,EAAOJ,CAAQ;AAoB3C,MAnBAG,EAAoB,UAAUH,GAE9BK,EAAU,MAAM;AACd,QAAI,CAACP,KAAU,CAACG,EAAY,MAAO;AACnC,UAAMK,IAAU,CAACC,MAAiB;AAChC,YAAMC,IAAWV,IAASW,EAAWX,CAAM,IAAIG,EAAY;AAE3D,MAAIO,KAAW,CAACA,EAAQ,SAASD,EAAM,MAAc,KACnDJ,EAAoB,QAAQI,CAAK;AAAA,IACnC;AAGF,oBAAS,iBAAiB,SAASD,CAAO,GAEnC,MAAM;AACX,eAAS,oBAAoB,SAASA,CAAO;AAAA,IAAA;AAAA,EAC/C,GACC,CAACR,GAAQG,EAAY,KAAK,CAAC,GAE1B,CAAAH;AACJ,WAAOG;AACT;"}
@@ -1,12 +1,12 @@
1
- import { useRef as u, useCallback as c } from "react";
2
- const s = (e) => {
1
+ import { useRef as u, useCallback as o } from "react";
2
+ const c = (e) => {
3
3
  const r = u(e);
4
- return r.current = e, c((...t) => {
5
- const n = r.current;
6
- return n(...t);
4
+ return r.current = e, o((...n) => {
5
+ const t = r.current;
6
+ return t(...n);
7
7
  }, []);
8
8
  };
9
9
  export {
10
- s as useEvent
10
+ c as useEvent
11
11
  };
12
12
  //# sourceMappingURL=useEvent.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useEvent.mjs","sources":["../../../../src/hooks/useEvent/useEvent.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/**\n * @name useEvent\n * @description - Hook that creates an event and returns a stable reference of it\n * @category Browser\n *\n * @template Params The type of the params\n * @template Return The type of the return\n * @param {(...args: Params) => Return} callback The callback function\n * @returns {(...args: Params) => Return} The callback\n *\n * @example\n * const onClick = useEvent(() => console.log('clicked'));\n */\nexport const useEvent = <Params extends unknown[], Return>(\n callback: (...args: Params) => Return\n): ((...args: Params) => Return) => {\n const callbackRef = useRef<typeof callback>(callback);\n callbackRef.current = callback;\n\n return useCallback((...args) => {\n const fn = callbackRef.current;\n return fn(...args);\n }, []);\n};\n"],"names":["useEvent","callback","callbackRef","useRef","useCallback","args","fn"],"mappings":";AAeO,MAAMA,IAAW,CACtBC,MACkC;AAClC,QAAMC,IAAcC,EAAwBF,CAAQ;AACpD,SAAAC,EAAY,UAAUD,GAEfG,EAAY,IAAIC,MAAS;AAC9B,UAAMC,IAAKJ,EAAY;AACvB,WAAOI,EAAG,GAAGD,CAAI;AAAA,EAAA,GAChB,EAAE;AACP;"}
1
+ {"version":3,"file":"useEvent.mjs","sources":["../../../../src/hooks/useEvent/useEvent.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/**\n * @name useEvent\n * @description - Hook that creates an event and returns a stable reference of it\n * @category Browser\n *\n * @template Params The type of the params\n * @template Return The type of the return\n * @param {(...args: Params) => Return} callback The callback function\n * @returns {(...args: Params) => Return} The callback\n *\n * @example\n * const onClick = useEvent(() => console.log('clicked'));\n */\nexport const useEvent = <Params extends unknown[], Return>(\n callback: (...args: Params) => Return\n): ((...args: Params) => Return) => {\n const internalCallbackRef = useRef<typeof callback>(callback);\n internalCallbackRef.current = callback;\n\n return useCallback((...args) => {\n const fn = internalCallbackRef.current;\n return fn(...args);\n }, []);\n};\n"],"names":["useEvent","callback","internalCallbackRef","useRef","useCallback","args","fn"],"mappings":";AAeO,MAAMA,IAAW,CACtBC,MACkC;AAClC,QAAMC,IAAsBC,EAAwBF,CAAQ;AAC5D,SAAAC,EAAoB,UAAUD,GAEvBG,EAAY,IAAIC,MAAS;AAC9B,UAAMC,IAAKJ,EAAoB;AAC/B,WAAOI,EAAG,GAAGD,CAAI;AAAA,EAAA,GAChB,EAAE;AACP;"}
@@ -1 +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 { getElement, 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 *\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('a', window);\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 callbackRef = useRef(callback);\n callbackRef.current = callback;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? 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 callbackRef.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 callbackRef.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]);\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","callbackRef","useEffect","element","getElement","onKeyDown","event","keyboardEvent","onKeyUp"],"mappings":";;;;AAiDO,MAAMA,IAAe,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,IAAcD,EAAOP,CAAQ;AA0CnC,SAzCAQ,EAAY,UAAUR,GAEtBS,EAAU,MAAM;AACd,QAAI,CAACZ,KAAU,CAACO,EAAY,MAAO;AAEnC,UAAMM,IAAWb,IAASc,EAAWd,CAAM,IAAIO,EAAY;AAC3D,QAAI,CAACM,EAAS;AAEd,UAAME,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AACtB,OACE,MAAM,QAAQP,EAAO,OAAO,IACxBA,EAAO,QAAQ,SAASQ,EAAc,GAAG,IACzCA,EAAc,QAAQR,EAAO,aAEjCJ,EAAW,EAAI,GACfM,EAAY,UAAU,IAAMM,CAAa;AAAA,IAC3C,GAGIC,IAAU,CAACF,MAAiB;AAChC,YAAMC,IAAgBD;AACtB,OACE,MAAM,QAAQP,EAAO,OAAO,IACxBA,EAAO,QAAQ,SAASQ,EAAc,GAAG,IACzCA,EAAc,QAAQR,EAAO,aAEjCJ,EAAW,EAAK,GAChBM,EAAY,UAAU,IAAOM,CAAa;AAAA,IAC5C;AAGF,WAAAJ,EAAQ,iBAAiB,WAAWE,CAAS,GAC7CF,EAAQ,iBAAiB,SAASK,CAAO,GAElC,MAAM;AACX,MAAAL,EAAQ,oBAAoB,WAAWE,CAAS,GAChDF,EAAQ,oBAAoB,SAASK,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAAClB,GAAQO,EAAY,KAAK,CAAC,GAE1BP,IAAeI,IACZ,EAAE,SAAAA,GAAS,KAAKG,EAAA;AACzB;"}
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 { getElement, 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 *\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 ? 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]);\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","getElement","onKeyDown","event","keyboardEvent","onKeyUp"],"mappings":";;;;AAiDO,MAAMA,IAAe,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,EAAWd,CAAM,IAAIO,EAAY;AAC3D,QAAI,CAACM,EAAS;AAEd,UAAME,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AACtB,OACE,MAAM,QAAQP,EAAO,OAAO,IACxBA,EAAO,QAAQ,SAASQ,EAAc,GAAG,IACzCA,EAAc,QAAQR,EAAO,aAEjCJ,EAAW,EAAI,GACfM,EAAoB,UAAU,IAAMM,CAAa;AAAA,IACnD,GAGIC,IAAU,CAACF,MAAiB;AAChC,YAAMC,IAAgBD;AACtB,OACE,MAAM,QAAQP,EAAO,OAAO,IACxBA,EAAO,QAAQ,SAASQ,EAAc,GAAG,IACzCA,EAAc,QAAQR,EAAO,aAEjCJ,EAAW,EAAK,GAChBM,EAAoB,UAAU,IAAOM,CAAa;AAAA,IACpD;AAGF,WAAAJ,EAAQ,iBAAiB,WAAWE,CAAS,GAC7CF,EAAQ,iBAAiB,SAASK,CAAO,GAElC,MAAM;AACX,MAAAL,EAAQ,oBAAoB,WAAWE,CAAS,GAChDF,EAAQ,oBAAoB,SAASK,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAAClB,GAAQO,EAAY,KAAK,CAAC,GAE1BP,IAAeI,IACZ,EAAE,SAAAA,GAAS,KAAKG,EAAA;AACzB;"}
@@ -1,21 +1,21 @@
1
- import { useEffect as u } from "react";
2
- import { useRefState as c } from "../useRefState/useRefState.mjs";
3
- import { isTarget as d } from "../../utils/helpers/isTarget.mjs";
4
- import { getElement as m } from "../../utils/helpers/getElement.mjs";
5
- const E = (...n) => {
6
- const e = d(n[0]) ? n[0] : void 0, i = e ? n[1] : n[0], o = c(window);
7
- if (u(() => {
8
- if (!e && !o.state) return;
9
- const t = e ? m(e) : o.current;
10
- if (!t) return;
11
- const s = (r) => i?.onKeyDown?.(r), f = (r) => i?.onKeyUp?.(r);
12
- return t.addEventListener("keydown", s), t.addEventListener("keyup", f), () => {
13
- t.removeEventListener("keydown", s), t.removeEventListener("keyup", f);
1
+ import { useRef as s, useEffect as y } from "react";
2
+ import { useRefState as d } from "../useRefState/useRefState.mjs";
3
+ import { isTarget as w } from "../../utils/helpers/isTarget.mjs";
4
+ import { getElement as v } from "../../utils/helpers/getElement.mjs";
5
+ const k = (...e) => {
6
+ const t = w(e[0]) ? e[0] : void 0, c = t ? typeof e[1] == "object" ? e[1] : { onKeyDown: e[1] } : typeof e[0] == "object" ? e[0] : { onKeyDown: e[0] }, o = d(window), r = s(c);
7
+ if (r.current = c, y(() => {
8
+ if (!t && !o.state) return;
9
+ const n = t ? v(t) : o.current;
10
+ if (!n) return;
11
+ const f = (i) => r.current?.onKeyDown?.(i), u = (i) => r.current?.onKeyUp?.(i);
12
+ return n.addEventListener("keydown", f), n.addEventListener("keyup", u), () => {
13
+ n.removeEventListener("keydown", f), n.removeEventListener("keyup", u);
14
14
  };
15
- }, [e, o.state]), !e)
15
+ }, [t, o.state]), !t)
16
16
  return o;
17
17
  };
18
18
  export {
19
- E as useKeyboard
19
+ k as useKeyboard
20
20
  };
21
21
  //# sourceMappingURL=useKeyboard.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useKeyboard.mjs","sources":["../../../../src/hooks/useKeyboard/useKeyboard.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The keyboard event handler type */\nexport type KeyboardEventHandler = (event: KeyboardEvent) => void;\n\n/** The use keyboard options type */\nexport interface UseKeyboardOptions {\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 | Window, options: UseKeyboardOptions): void;\n\n <Target extends Element>(options: UseKeyboardOptions, target?: never): { ref: StateRef<Target> };\n}\n\n/**\n * @name useKeyboard\n * @description - Hook that helps to listen for keyboard events\n * @category Sensors\n *\n * @overload\n * @param {HookTarget | Window} target The target to attach the event listeners to\n * @param {UseKeyboardOptions} [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 {UseKeyboardOptions} [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 = (target ? params[1] : params[0]) as UseKeyboardOptions;\n\n const internalRef = useRefState(window);\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const onKeyDown = (event: Event) => options?.onKeyDown?.(event as KeyboardEvent);\n const onKeyUp = (event: Event) => options?.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]);\n\n if (target) return;\n return internalRef;\n}) as UseKeyboard;\n"],"names":["useKeyboard","params","target","isTarget","options","internalRef","useRefState","useEffect","element","getElement","onKeyDown","event","onKeyUp"],"mappings":";;;;AAgDO,MAAMA,IAAe,IAAIC,MAAkB;AAChD,QAAMC,IAASC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC3CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCI,IAAcC,EAAY,MAAM;AAoBtC,MAlBAC,EAAU,MAAM;AACd,QAAI,CAACL,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMG,IAAWN,IAASO,EAAWP,CAAM,IAAIG,EAAY;AAC3D,QAAI,CAACG,EAAS;AAEd,UAAME,IAAY,CAACC,MAAiBP,GAAS,YAAYO,CAAsB,GACzEC,IAAU,CAACD,MAAiBP,GAAS,UAAUO,CAAsB;AAE3E,WAAAH,EAAQ,iBAAiB,WAAWE,CAAS,GAC7CF,EAAQ,iBAAiB,SAASI,CAAO,GAElC,MAAM;AACX,MAAAJ,EAAQ,oBAAoB,WAAWE,CAAS,GAChDF,EAAQ,oBAAoB,SAASI,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACV,GAAQG,EAAY,KAAK,CAAC,GAE1B,CAAAH;AACJ,WAAOG;AACT;"}
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 { getElement, 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 *\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 ? 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]);\n\n if (target) return;\n return internalRef;\n}) as UseKeyboard;\n"],"names":["useKeyboard","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","getElement","onKeyDown","event","onKeyUp"],"mappings":";;;;AA4EO,MAAMA,IAAe,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,IAASS,EAAWT,CAAM,IAAIG,EAAY;AAC3D,QAAI,CAACK,EAAS;AAEd,UAAME,IAAY,CAACC,MACjBN,EAAmB,SAAS,YAAYM,CAAsB,GAC1DC,IAAU,CAACD,MAAiBN,EAAmB,SAAS,UAAUM,CAAsB;AAE9F,WAAAH,EAAQ,iBAAiB,WAAWE,CAAS,GAC7CF,EAAQ,iBAAiB,SAASI,CAAO,GAElC,MAAM;AACX,MAAAJ,EAAQ,oBAAoB,WAAWE,CAAS,GAChDF,EAAQ,oBAAoB,SAASI,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACZ,GAAQG,EAAY,KAAK,CAAC,GAE1B,CAAAH;AACJ,WAAOG;AACT;"}
@@ -1 +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 { getElement, 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<{ key: string; code: string }>;\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 * Hook that tracks which keyboard keys are currently pressed\n *\n * @name useKeysPressed\n * @description Tracks all currently pressed keyboard keys and their codes\n * @category Sensors\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 ? 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]);\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","getElement","onKeyDown","event","keyboardEvent","prevValue","code","onKeyUp"],"mappings":";;;;AAqDO,MAAMA,IAAkB,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,IAASU,EAAWV,CAAM,IAAIM,EAAY;AAC3D,QAAI,CAACG,EAAS;AAEd,UAAME,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AACtB,MAAAR,EAAS,CAACU,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,MAAAR,EAAS,CAACU,MAAcA,EAAU,OAAO,CAAC,EAAE,MAAAC,EAAA,MAAWA,MAASF,EAAc,IAAI,CAAC;AAAA,IAAA;AAGrF,WAAAJ,EAAQ,iBAAiB,WAAWE,CAAS,GAC7CF,EAAQ,iBAAiB,SAASO,CAAO,GAElC,MAAM;AACX,MAAAP,EAAQ,oBAAoB,WAAWE,CAAS,GAChDF,EAAQ,oBAAoB,SAASO,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACd,GAASI,EAAY,OAAON,CAAM,CAAC,GAEnCA,IAAeG,IACZ,EAAE,OAAAA,GAAO,KAAKG,EAAA;AACvB;"}
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 { getElement, 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 * Hook that tracks which keyboard keys are currently pressed\n *\n * @name useKeysPressed\n * @description Tracks all currently pressed keyboard keys and their codes\n * @category Sensors\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 ? 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]);\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","getElement","onKeyDown","event","keyboardEvent","prevValue","code","onKeyUp"],"mappings":";;;;AAwDO,MAAMA,IAAkB,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,IAASU,EAAWV,CAAM,IAAIM,EAAY;AAC3D,QAAI,CAACG,EAAS;AAEd,UAAME,IAAY,CAACC,MAAiB;AAClC,YAAMC,IAAgBD;AACtB,MAAAR,EAAS,CAACU,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,MAAAR,EAAS,CAACU,MAAcA,EAAU,OAAO,CAAC,EAAE,MAAAC,EAAA,MAAWA,MAASF,EAAc,IAAI,CAAC;AAAA,IAAA;AAGrF,WAAAJ,EAAQ,iBAAiB,WAAWE,CAAS,GAC7CF,EAAQ,iBAAiB,SAASO,CAAO,GAElC,MAAM;AACX,MAAAP,EAAQ,oBAAoB,WAAWE,CAAS,GAChDF,EAAQ,oBAAoB,SAASO,CAAO;AAAA,IAAA;AAAA,EAC9C,GACC,CAACd,GAASI,EAAY,OAAON,CAAM,CAAC,GAEnCA,IAAeG,IACZ,EAAE,OAAAA,GAAO,KAAKG,EAAA;AACvB;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useLockCallback.mjs","sources":["../../../../src/hooks/useLockCallback/useLockCallback.ts"],"sourcesContent":["import { useRef } from 'react';\n\n/**\n * @name useLockCallback\n * @description - Hook that prevents a callback from being executed multiple times simultaneously\n * @category Utilities\n *\n * @param {Function} callback The callback to be locked\n * @returns {Function} The locked callback\n *\n * @example\n * const lockedCallback = useLockCallback(() => promise());\n */\nexport const useLockCallback = <Callback extends (...args: any[]) => any>(callback: Callback) => {\n const lockRef = useRef(false);\n const callbackRef = useRef(callback);\n callbackRef.current = callback;\n\n return async (...args: Parameters<Callback>) => {\n if (lockRef.current) return;\n lockRef.current = true;\n\n try {\n return await callbackRef.current(...args);\n } finally {\n lockRef.current = false;\n }\n };\n};\n"],"names":["useLockCallback","callback","lockRef","useRef","callbackRef","args"],"mappings":";AAaO,MAAMA,IAAkB,CAA2CC,MAAuB;AAC/F,QAAMC,IAAUC,EAAO,EAAK,GACtBC,IAAcD,EAAOF,CAAQ;AACnC,SAAAG,EAAY,UAAUH,GAEf,UAAUI,MAA+B;AAC9C,QAAI,CAAAH,EAAQ,SACZ;AAAA,MAAAA,EAAQ,UAAU;AAElB,UAAI;AACF,eAAO,MAAME,EAAY,QAAQ,GAAGC,CAAI;AAAA,MAAA,UAC1C;AACE,QAAAH,EAAQ,UAAU;AAAA,MAAA;AAAA;AAAA,EACpB;AAEJ;"}
1
+ {"version":3,"file":"useLockCallback.mjs","sources":["../../../../src/hooks/useLockCallback/useLockCallback.ts"],"sourcesContent":["import { useRef } from 'react';\n\n/**\n * @name useLockCallback\n * @description - Hook that prevents a callback from being executed multiple times simultaneously\n * @category Utilities\n *\n * @param {Function} callback The callback to be locked\n * @returns {Function} The locked callback\n *\n * @example\n * const lockedCallback = useLockCallback(() => promise());\n */\nexport const useLockCallback = <Callback extends (...args: any[]) => any>(callback: Callback) => {\n const lockRef = useRef(false);\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n return async (...args: Parameters<Callback>) => {\n if (lockRef.current) return;\n lockRef.current = true;\n\n try {\n return await internalCallbackRef.current(...args);\n } finally {\n lockRef.current = false;\n }\n };\n};\n"],"names":["useLockCallback","callback","lockRef","useRef","internalCallbackRef","args"],"mappings":";AAaO,MAAMA,IAAkB,CAA2CC,MAAuB;AAC/F,QAAMC,IAAUC,EAAO,EAAK,GACtBC,IAAsBD,EAAOF,CAAQ;AAC3C,SAAAG,EAAoB,UAAUH,GAEvB,UAAUI,MAA+B;AAC9C,QAAI,CAAAH,EAAQ,SACZ;AAAA,MAAAA,EAAQ,UAAU;AAElB,UAAI;AACF,eAAO,MAAME,EAAoB,QAAQ,GAAGC,CAAI;AAAA,MAAA,UAClD;AACE,QAAAH,EAAQ,UAAU;AAAA,MAAA;AAAA;AAAA,EACpB;AAEJ;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useMemory.mjs","sources":["../../../../src/hooks/useMemory/useMemory.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ndeclare global {\n interface Performance {\n memory: {\n readonly jsHeapSizeLimit: number;\n readonly totalJSHeapSize: number;\n readonly usedJSHeapSize: number;\n };\n }\n}\n\n/** The use memory return type */\nexport interface UseMemoryReturn {\n /** The memory supported status */\n supported: boolean;\n /** The current memory usage */\n value: Performance['memory'];\n}\n\n/**\n * @name useMemory\n * @description - Hook that gives you current memory usage\n * @category Browser\n *\n * @browserapi performance.memory https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory\n *\n * @returns {UseMemoryReturn} An object containing the current memory usage\n *\n * @example\n * const { supported, value } = useMemory();\n */\nexport const useMemory = (): UseMemoryReturn => {\n const supported = performance && 'memory' in performance && !!performance.memory;\n const [value, setValue] = useState<Performance['memory']>(\n performance?.memory ?? {\n jsHeapSizeLimit: 0,\n totalJSHeapSize: 0,\n usedJSHeapSize: 0\n }\n );\n\n useEffect(() => {\n if (!supported) return;\n\n const intervalId = setInterval(() => setValue(performance.memory), 1000);\n\n return () => clearInterval(intervalId);\n }, []);\n\n return { supported, value };\n};\n"],"names":["useMemory","supported","value","setValue","useState","useEffect","intervalId"],"mappings":";AAgCO,MAAMA,IAAY,MAAuB;AAC9C,QAAMC,IAAY,eAAe,YAAY,eAAe,CAAC,CAAC,YAAY,QACpE,CAACC,GAAOC,CAAQ,IAAIC;AAAA,IACxB,aAAa,UAAU;AAAA,MACrB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,IAAA;AAAA,EAClB;AAGF,SAAAC,EAAU,MAAM;AACd,QAAI,CAACJ,EAAW;AAEhB,UAAMK,IAAa,YAAY,MAAMH,EAAS,YAAY,MAAM,GAAG,GAAI;AAEvE,WAAO,MAAM,cAAcG,CAAU;AAAA,EAAA,GACpC,EAAE,GAEE,EAAE,WAAAL,GAAW,OAAAC,EAAA;AACtB;"}
1
+ {"version":3,"file":"useMemory.mjs","sources":["../../../../src/hooks/useMemory/useMemory.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ndeclare global {\n interface Performance {\n memory: {\n readonly jsHeapSizeLimit: number;\n readonly totalJSHeapSize: number;\n readonly usedJSHeapSize: number;\n };\n }\n}\n\n/** The use memory return type */\nexport interface UseMemoryReturn {\n /** The memory supported status */\n supported: boolean;\n /** The current memory usage */\n value: Performance['memory'];\n}\n\n/**\n * @name useMemory\n * @description - Hook that gives you current memory usage\n * @category Browser\n *\n * @browserapi performance.memory https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory\n *\n * @returns {UseMemoryReturn} An object containing the current memory usage\n *\n * @example\n * const { supported, value } = useMemory();\n */\nexport const useMemory = (): UseMemoryReturn => {\n const supported = performance && 'memory' in performance && !!performance.memory;\n const [value, setValue] = useState<Performance['memory']>(\n performance?.memory ?? {\n jsHeapSizeLimit: 0,\n totalJSHeapSize: 0,\n usedJSHeapSize: 0\n }\n );\n\n useEffect(() => {\n if (!supported) return;\n const intervalId = setInterval(() => setValue(performance.memory), 1000);\n return () => clearInterval(intervalId);\n }, []);\n\n return { supported, value };\n};\n"],"names":["useMemory","supported","value","setValue","useState","useEffect","intervalId"],"mappings":";AAgCO,MAAMA,IAAY,MAAuB;AAC9C,QAAMC,IAAY,eAAe,YAAY,eAAe,CAAC,CAAC,YAAY,QACpE,CAACC,GAAOC,CAAQ,IAAIC;AAAA,IACxB,aAAa,UAAU;AAAA,MACrB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,IAAA;AAAA,EAClB;AAGF,SAAAC,EAAU,MAAM;AACd,QAAI,CAACJ,EAAW;AAChB,UAAMK,IAAa,YAAY,MAAMH,EAAS,YAAY,MAAM,GAAG,GAAI;AACvE,WAAO,MAAM,cAAcG,CAAU;AAAA,EAAA,GACpC,EAAE,GAEE,EAAE,WAAAL,GAAW,OAAAC,EAAA;AACtB;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useScroll.mjs","sources":["../../../../src/hooks/useScroll/useScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nconst ARRIVED_STATE_THRESHOLD_PIXELS = 1;\n\nexport interface UseScrollOptions {\n /** The on scroll callback */\n onScroll?: (params: UseScrollCallbackParams, event: Event) => void;\n\n /** The on end scroll callback */\n onStop?: (event: Event) => void;\n\n /** Offset arrived states by x pixels. */\n offset?: {\n left?: number;\n right?: number;\n top?: number;\n bottom?: number;\n };\n}\n\nexport interface UseScrollCallbackParams {\n /** The element x position */\n x: number;\n /** The element y position */\n y: number;\n /** State of scroll arrived */\n arrived: {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n };\n /** State of scroll direction */\n directions: {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n };\n}\n\nexport interface UseScroll {\n (target: HookTarget, callback?: (params: UseScrollCallbackParams, event: Event) => void): boolean;\n\n (target: HookTarget, options?: UseScrollOptions): boolean;\n\n <Target extends Element>(\n callback?: (params: UseScrollCallbackParams, event: Event) => void,\n target?: never\n ): {\n ref: StateRef<Target>;\n scrolling: boolean;\n };\n\n <Target extends Element>(\n options?: UseScrollOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n scrolling: boolean;\n };\n}\n\n/**\n * @name useScroll\n * @description - Hook that allows you to control scroll a element\n * @category Sensors\n *\n * @overload\n * @template Target The target element\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0] The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {boolean} The state of scrolling\n *\n * @example\n * const scrolling = useScroll(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {boolean} The state of scrolling\n *\n * @example\n * const scrolling = useScroll(ref, () => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0] The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {[StateRef<Target>, boolean]} The state of scrolling\n *\n * @example\n * const { ref, scrolling } = useScroll(options);\n *\n * @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {[StateRef<Target>, boolean]} The state of scrolling\n *\n * @example\n * const { ref, scrolling } = useScroll(() => console.log('callback'));\n */\nexport const useScroll = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onScroll: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onScroll: params[0] }\n ) as UseScrollOptions | undefined;\n\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n const [scrolling, setScrolling] = useState(false);\n const scrollPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n const element = (target ? getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const onScrollEnd = (event: Event) => {\n setScrolling(false);\n options?.onStop?.(event);\n };\n\n const onScroll = (event: Event) => {\n setScrolling(true);\n const target = (\n event.target === document ? (event.target as Document).documentElement : event.target\n ) as HTMLElement;\n\n const { display, flexDirection, direction } = target.style;\n const directionMultiplier = direction === 'rtl' ? -1 : 1;\n\n const scrollLeft = target.scrollLeft;\n let scrollTop = target.scrollTop;\n if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;\n\n const offset = internalOptionsRef.current?.offset;\n const left = scrollLeft * directionMultiplier <= (offset?.left ?? 0);\n const right =\n scrollLeft * directionMultiplier + target.clientWidth >=\n target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n const top = scrollTop <= (offset?.top ?? 0);\n const bottom =\n scrollTop + target.clientHeight >=\n target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n\n const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';\n const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';\n\n const params = {\n x: scrollLeft,\n y: scrollTop,\n directions: {\n left: scrollLeft < scrollPositionRef.current.x,\n right: scrollLeft > scrollPositionRef.current.x,\n top: scrollTop < scrollPositionRef.current.y,\n bottom: scrollTop > scrollPositionRef.current.y\n },\n arrived: {\n left: isRowReverse ? right : left,\n right: isRowReverse ? left : right,\n top: isColumnReverse ? bottom : top,\n bottom: isColumnReverse ? top : bottom\n }\n };\n\n scrollPositionRef.current = { x: scrollLeft, y: scrollTop };\n internalOptionsRef.current?.onScroll?.(params, event);\n };\n\n element.addEventListener('scroll', onScroll);\n element.addEventListener('scrollend', onScrollEnd);\n\n return () => {\n element.removeEventListener('scroll', onScroll);\n element.removeEventListener('scrollend', onScrollEnd);\n };\n }, [target, internalRef.state]);\n\n if (target) return scrolling;\n return {\n ref: internalRef,\n scrolling\n };\n}) as UseScroll;\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","getElement","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse"],"mappings":";;;;AAUA,MAAMA,IAAiC,GAgH1BC,IAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,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,IAAcC,EAAA,GACdC,IAAqBC,EAAOJ,CAAO;AACzC,EAAAG,EAAmB,UAAUH;AAE7B,QAAM,CAACK,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAoBJ,EAAO,EAAE,GAAG,GAAG,GAAG,GAAG;AAqE/C,SAnEAK,EAAU,MAAM;AACd,QAAI,CAACX,KAAU,CAACG,EAAY,MAAO;AACnC,UAAMS,IAAWZ,IAASa,EAAWb,CAAM,IAAIG,EAAY;AAE3D,QAAI,CAACS,EAAS;AAEd,UAAME,IAAc,CAACC,MAAiB;AACpC,MAAAP,EAAa,EAAK,GAClBN,GAAS,SAASa,CAAK;AAAA,IAAA,GAGnBC,IAAW,CAACD,MAAiB;AACjC,MAAAP,EAAa,EAAI;AACjB,YAAMR,IACJe,EAAM,WAAW,WAAYA,EAAM,OAAoB,kBAAkBA,EAAM,QAG3E,EAAE,SAAAE,GAAS,eAAAC,GAAe,WAAAC,EAAA,IAAcnB,EAAO,OAC/CoB,IAAsBD,MAAc,QAAQ,KAAK,GAEjDE,IAAarB,EAAO;AAC1B,UAAIsB,IAAYtB,EAAO;AACvB,MAAIA,aAAkB,YAAY,CAACsB,MAAWA,IAAY,OAAO,SAAS,KAAK;AAE/E,YAAMC,IAASlB,EAAmB,SAAS,QACrCmB,IAAOH,IAAaD,MAAwBG,GAAQ,QAAQ,IAC5DE,IACJJ,IAAaD,IAAsBpB,EAAO,eAC1CA,EAAO,eAAeuB,GAAQ,SAAS,KAAK1B,GACxC6B,IAAMJ,MAAcC,GAAQ,OAAO,IACnCI,IACJL,IAAYtB,EAAO,gBACnBA,EAAO,gBAAgBuB,GAAQ,UAAU,KAAK1B,GAE1C+B,IAAkBX,MAAY,UAAUC,MAAkB,kBAC1DW,IAAeZ,MAAY,UAAUC,MAAkB,kBAEvDnB,IAAS;AAAA,QACb,GAAGsB;AAAA,QACH,GAAGC;AAAA,QACH,YAAY;AAAA,UACV,MAAMD,IAAaX,EAAkB,QAAQ;AAAA,UAC7C,OAAOW,IAAaX,EAAkB,QAAQ;AAAA,UAC9C,KAAKY,IAAYZ,EAAkB,QAAQ;AAAA,UAC3C,QAAQY,IAAYZ,EAAkB,QAAQ;AAAA,QAAA;AAAA,QAEhD,SAAS;AAAA,UACP,MAAMmB,IAAeJ,IAAQD;AAAA,UAC7B,OAAOK,IAAeL,IAAOC;AAAA,UAC7B,KAAKG,IAAkBD,IAASD;AAAA,UAChC,QAAQE,IAAkBF,IAAMC;AAAA,QAAA;AAAA,MAClC;AAGF,MAAAjB,EAAkB,UAAU,EAAE,GAAGW,GAAY,GAAGC,EAAA,GAChDjB,EAAmB,SAAS,WAAWN,GAAQgB,CAAK;AAAA,IAAA;AAGtD,WAAAH,EAAQ,iBAAiB,UAAUI,CAAQ,GAC3CJ,EAAQ,iBAAiB,aAAaE,CAAW,GAE1C,MAAM;AACX,MAAAF,EAAQ,oBAAoB,UAAUI,CAAQ,GAC9CJ,EAAQ,oBAAoB,aAAaE,CAAW;AAAA,IAAA;AAAA,EACtD,GACC,CAACd,GAAQG,EAAY,KAAK,CAAC,GAE1BH,IAAeO,IACZ;AAAA,IACL,KAAKJ;AAAA,IACL,WAAAI;AAAA,EAAA;AAEJ;"}
1
+ {"version":3,"file":"useScroll.mjs","sources":["../../../../src/hooks/useScroll/useScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\r\n\r\nimport type { HookTarget } from '@/utils/helpers';\r\n\r\nimport { getElement, isTarget } from '@/utils/helpers';\r\n\r\nimport type { StateRef } from '../useRefState/useRefState';\r\n\r\nimport { useRefState } from '../useRefState/useRefState';\r\n\r\nconst ARRIVED_STATE_THRESHOLD_PIXELS = 1;\r\n\r\nexport interface UseScrollOptions {\r\n /** The on scroll callback */\r\n onScroll?: (params: UseScrollCallbackParams, event: Event) => void;\r\n\r\n /** The on end scroll callback */\r\n onStop?: (event: Event) => void;\r\n\r\n /** Offset arrived states by x pixels. */\r\n offset?: {\r\n left?: number;\r\n right?: number;\r\n top?: number;\r\n bottom?: number;\r\n };\r\n}\r\n\r\nexport interface UseScrollCallbackParams {\r\n /** The element x position */\r\n x: number;\r\n /** The element y position */\r\n y: number;\r\n /** State of scroll arrived */\r\n arrived: {\r\n left: boolean;\r\n right: boolean;\r\n top: boolean;\r\n bottom: boolean;\r\n };\r\n /** State of scroll direction */\r\n directions: {\r\n left: boolean;\r\n right: boolean;\r\n top: boolean;\r\n bottom: boolean;\r\n };\r\n}\r\n\r\nexport interface UseScroll {\r\n (target: HookTarget, callback?: (params: UseScrollCallbackParams, event: Event) => void): boolean;\r\n\r\n (target: HookTarget, options?: UseScrollOptions): boolean;\r\n\r\n <Target extends Element>(\r\n callback?: (params: UseScrollCallbackParams, event: Event) => void,\r\n target?: never\r\n ): {\r\n ref: StateRef<Target>;\r\n scrolling: boolean;\r\n };\r\n\r\n <Target extends Element>(\r\n options?: UseScrollOptions,\r\n target?: never\r\n ): {\r\n ref: StateRef<Target>;\r\n scrolling: boolean;\r\n };\r\n}\r\n\r\n/**\r\n * @name useScroll\r\n * @description - Hook that allows you to control scroll a element\r\n * @category Sensors\r\n *\r\n * @overload\r\n * @template Target The target element\r\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\r\n * @param {number} [options.offset.left=0] The left offset for arrived states\r\n * @param {number} [options.offset.right=0] The right offset for arrived states\r\n * @param {number} [options.offset.top=0] The top offset for arrived states\r\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\r\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\r\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\r\n * @returns {boolean} The state of scrolling\r\n *\r\n * @example\r\n * const scrolling = useScroll(ref, options);\r\n *\r\n * @overload\r\n * @template Target The target element\r\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\r\n * @returns {boolean} The state of scrolling\r\n *\r\n * @example\r\n * const scrolling = useScroll(ref, () => console.log('callback'));\r\n *\r\n * @overload\r\n * @template Target The target element\r\n * @param {Target} target The target element to scroll\r\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\r\n * @param {number} [options.offset.left=0] The left offset for arrived states\r\n * @param {number} [options.offset.right=0] The right offset for arrived states\r\n * @param {number} [options.offset.top=0] The top offset for arrived states\r\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\r\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\r\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\r\n * @returns {[StateRef<Target>, boolean]} The state of scrolling\r\n *\r\n * @example\r\n * const { ref, scrolling } = useScroll(options);\r\n *\r\n * @overload\r\n * @template Target The target element\r\n * @param {Target} target The target element to scroll\r\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\r\n * @returns {[StateRef<Target>, boolean]} The state of scrolling\r\n *\r\n * @example\r\n * const { ref, scrolling } = useScroll(() => console.log('callback'));\r\n */\r\nexport const useScroll = ((...params: any[]) => {\r\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\r\n const options = (\r\n target\r\n ? typeof params[1] === 'object'\r\n ? params[1]\r\n : { onScroll: params[1] }\r\n : typeof params[0] === 'object'\r\n ? params[0]\r\n : { onScroll: params[0] }\r\n ) as UseScrollOptions | undefined;\r\n\r\n const internalRef = useRefState<Element>();\r\n const internalOptionsRef = useRef(options);\r\n internalOptionsRef.current = options;\r\n\r\n const [scrolling, setScrolling] = useState(false);\r\n const scrollPositionRef = useRef({ x: 0, y: 0 });\r\n\r\n useEffect(() => {\r\n if (!target && !internalRef.state) return;\r\n const element = (target ? getElement(target) : internalRef.current) as Element;\r\n\r\n if (!element) return;\r\n\r\n const onScrollEnd = (event: Event) => {\r\n setScrolling(false);\r\n options?.onStop?.(event);\r\n };\r\n\r\n const onScroll = (event: Event) => {\r\n setScrolling(true);\r\n const target = (\r\n event.target === document ? (event.target as Document).documentElement : event.target\r\n ) as HTMLElement;\r\n\r\n const { display, flexDirection, direction } = target.style;\r\n const directionMultiplier = direction === 'rtl' ? -1 : 1;\r\n\r\n const scrollLeft = target.scrollLeft;\r\n let scrollTop = target.scrollTop;\r\n if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;\r\n\r\n const offset = internalOptionsRef.current?.offset;\r\n const left = scrollLeft * directionMultiplier <= (offset?.left ?? 0);\r\n const right =\r\n scrollLeft * directionMultiplier + target.clientWidth >=\r\n target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\r\n const top = scrollTop <= (offset?.top ?? 0);\r\n const bottom =\r\n scrollTop + target.clientHeight >=\r\n target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\r\n\r\n const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';\r\n const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';\r\n\r\n const params = {\r\n x: scrollLeft,\r\n y: scrollTop,\r\n directions: {\r\n left: scrollLeft < scrollPositionRef.current.x,\r\n right: scrollLeft > scrollPositionRef.current.x,\r\n top: scrollTop < scrollPositionRef.current.y,\r\n bottom: scrollTop > scrollPositionRef.current.y\r\n },\r\n arrived: {\r\n left: isRowReverse ? right : left,\r\n right: isRowReverse ? left : right,\r\n top: isColumnReverse ? bottom : top,\r\n bottom: isColumnReverse ? top : bottom\r\n }\r\n };\r\n\r\n scrollPositionRef.current = { x: scrollLeft, y: scrollTop };\r\n internalOptionsRef.current?.onScroll?.(params, event);\r\n };\r\n\r\n element.addEventListener('scroll', onScroll);\r\n element.addEventListener('scrollend', onScrollEnd);\r\n\r\n return () => {\r\n element.removeEventListener('scroll', onScroll);\r\n element.removeEventListener('scrollend', onScrollEnd);\r\n };\r\n }, [target, internalRef.state]);\r\n\r\n if (target) return scrolling;\r\n return {\r\n ref: internalRef,\r\n scrolling\r\n };\r\n}) as UseScroll;\r\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","getElement","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse"],"mappings":";;;;AAUA,MAAMA,IAAiC,GAgH1BC,IAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,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,IAAcC,EAAA,GACdC,IAAqBC,EAAOJ,CAAO;AACzC,EAAAG,EAAmB,UAAUH;AAE7B,QAAM,CAACK,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAoBJ,EAAO,EAAE,GAAG,GAAG,GAAG,GAAG;AAqE/C,SAnEAK,EAAU,MAAM;AACd,QAAI,CAACX,KAAU,CAACG,EAAY,MAAO;AACnC,UAAMS,IAAWZ,IAASa,EAAWb,CAAM,IAAIG,EAAY;AAE3D,QAAI,CAACS,EAAS;AAEd,UAAME,IAAc,CAACC,MAAiB;AACpC,MAAAP,EAAa,EAAK,GAClBN,GAAS,SAASa,CAAK;AAAA,IAAA,GAGnBC,IAAW,CAACD,MAAiB;AACjC,MAAAP,EAAa,EAAI;AACjB,YAAMR,IACJe,EAAM,WAAW,WAAYA,EAAM,OAAoB,kBAAkBA,EAAM,QAG3E,EAAE,SAAAE,GAAS,eAAAC,GAAe,WAAAC,EAAA,IAAcnB,EAAO,OAC/CoB,IAAsBD,MAAc,QAAQ,KAAK,GAEjDE,IAAarB,EAAO;AAC1B,UAAIsB,IAAYtB,EAAO;AACvB,MAAIA,aAAkB,YAAY,CAACsB,MAAWA,IAAY,OAAO,SAAS,KAAK;AAE/E,YAAMC,IAASlB,EAAmB,SAAS,QACrCmB,IAAOH,IAAaD,MAAwBG,GAAQ,QAAQ,IAC5DE,IACJJ,IAAaD,IAAsBpB,EAAO,eAC1CA,EAAO,eAAeuB,GAAQ,SAAS,KAAK1B,GACxC6B,IAAMJ,MAAcC,GAAQ,OAAO,IACnCI,IACJL,IAAYtB,EAAO,gBACnBA,EAAO,gBAAgBuB,GAAQ,UAAU,KAAK1B,GAE1C+B,IAAkBX,MAAY,UAAUC,MAAkB,kBAC1DW,IAAeZ,MAAY,UAAUC,MAAkB,kBAEvDnB,IAAS;AAAA,QACb,GAAGsB;AAAA,QACH,GAAGC;AAAA,QACH,YAAY;AAAA,UACV,MAAMD,IAAaX,EAAkB,QAAQ;AAAA,UAC7C,OAAOW,IAAaX,EAAkB,QAAQ;AAAA,UAC9C,KAAKY,IAAYZ,EAAkB,QAAQ;AAAA,UAC3C,QAAQY,IAAYZ,EAAkB,QAAQ;AAAA,QAAA;AAAA,QAEhD,SAAS;AAAA,UACP,MAAMmB,IAAeJ,IAAQD;AAAA,UAC7B,OAAOK,IAAeL,IAAOC;AAAA,UAC7B,KAAKG,IAAkBD,IAASD;AAAA,UAChC,QAAQE,IAAkBF,IAAMC;AAAA,QAAA;AAAA,MAClC;AAGF,MAAAjB,EAAkB,UAAU,EAAE,GAAGW,GAAY,GAAGC,EAAA,GAChDjB,EAAmB,SAAS,WAAWN,GAAQgB,CAAK;AAAA,IAAA;AAGtD,WAAAH,EAAQ,iBAAiB,UAAUI,CAAQ,GAC3CJ,EAAQ,iBAAiB,aAAaE,CAAW,GAE1C,MAAM;AACX,MAAAF,EAAQ,oBAAoB,UAAUI,CAAQ,GAC9CJ,EAAQ,oBAAoB,aAAaE,CAAW;AAAA,IAAA;AAAA,EACtD,GACC,CAACd,GAAQG,EAAY,KAAK,CAAC,GAE1BH,IAAeO,IACZ;AAAA,IACL,KAAKJ;AAAA,IACL,WAAAI;AAAA,EAAA;AAEJ;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useWindowEvent.mjs","sources":["../../../../src/hooks/useWindowEvent/useWindowEvent.ts"],"sourcesContent":["import { target } from '@/utils/helpers';\n\nimport type { UseEventListenerOptions } from '../useEventListener/useEventListener';\n\nimport { useEventListener } from '../useEventListener/useEventListener';\n\n/**\n * @name useWindowEvent\n * @description - Hook attaches an event listener to the window object for the specified event\n * @category Browser\n *\n * @template Event Key of window event map.\n * @param {Event} event The event to listen for.\n * @param {(event: WindowEventMap[Event]) => void} listener The callback function to be executed when the event is triggered\n * @param {UseEventListenerOptions} [options] The options for the event listener\n * @returns {void}\n *\n * @example\n * useWindowEvent('click', () => console.log('clicked'));\n */\nexport const useWindowEvent = <Event extends keyof WindowEventMap>(\n event: Event,\n listener: (this: Window, event: WindowEventMap[Event]) => any,\n options?: UseEventListenerOptions\n) => useEventListener(target(window), event, listener, options);\n"],"names":["useWindowEvent","event","listener","options","useEventListener","target"],"mappings":";;AAoBO,MAAMA,IAAiB,CAC5BC,GACAC,GACAC,MACGC,EAAiBC,EAAO,MAAM,GAAGJ,GAAOC,GAAUC,CAAO;"}
1
+ {"version":3,"file":"useWindowEvent.mjs","sources":["../../../../src/hooks/useWindowEvent/useWindowEvent.ts"],"sourcesContent":["import { target } from '@/utils/helpers';\n\nimport type { UseEventListenerOptions } from '../useEventListener/useEventListener';\n\nimport { useEventListener } from '../useEventListener/useEventListener';\n\n/**\n * @name useWindowEvent\n * @description - Hook attaches an event listener to the window object for the specified event\n * @category Events\n *\n * @template Event Key of window event map.\n * @param {Event} event The event to listen for.\n * @param {(event: WindowEventMap[Event]) => void} listener The callback function to be executed when the event is triggered\n * @param {UseEventListenerOptions} [options] The options for the event listener\n * @returns {void}\n *\n * @example\n * useWindowEvent('click', () => console.log('clicked'));\n */\nexport const useWindowEvent = <Event extends keyof WindowEventMap>(\n event: Event,\n listener: (this: Window, event: WindowEventMap[Event]) => any,\n options?: UseEventListenerOptions\n) => useEventListener(target(window), event, listener, options);\n"],"names":["useWindowEvent","event","listener","options","useEventListener","target"],"mappings":";;AAoBO,MAAMA,IAAiB,CAC5BC,GACAC,GACAC,MACGC,EAAiBC,EAAO,MAAM,GAAGJ,GAAOC,GAAUC,CAAO;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useWindowScroll.mjs","sources":["../../../../src/hooks/useWindowScroll/useWindowScroll.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface ScrollPosition {\n x: number;\n y: number;\n}\n\nexport const scrollTo = ({\n x,\n y,\n behavior = 'smooth'\n}: Partial<ScrollPosition & ScrollOptions>) => {\n const scrollOptions: ScrollToOptions = { behavior };\n if (typeof x === 'number') scrollOptions.left = x;\n if (typeof y === 'number') scrollOptions.top = y;\n window.scrollTo(scrollOptions);\n};\n\n/**\n * @name useWindowScroll\n * @description - Hook that manages the window scroll position\n * @category Browser\n *\n * @returns {UseWindowScrollReturn} An object containing the current window scroll position\n *\n * @example\n * const { value, scrollTo } = useWindowScroll();\n */\nexport const useWindowScroll = () => {\n const [value, setValue] = useState<ScrollPosition>({\n x: typeof window !== 'undefined' ? window.scrollX : Number.POSITIVE_INFINITY,\n y: typeof window !== 'undefined' ? window.scrollY : Number.POSITIVE_INFINITY\n });\n\n useEffect(() => {\n const onChange = () => setValue({ x: window.scrollX, y: window.scrollY });\n window.addEventListener('scroll', onChange);\n window.addEventListener('resize', onChange);\n return () => {\n window.removeEventListener('scroll', onChange);\n window.removeEventListener('resize', onChange);\n };\n }, []);\n\n return { value, scrollTo };\n};\n"],"names":["scrollTo","x","y","behavior","scrollOptions","useWindowScroll","value","setValue","useState","useEffect","onChange"],"mappings":";AAOO,MAAMA,IAAW,CAAC;AAAA,EACvB,GAAAC;AAAA,EACA,GAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAA+C;AAC7C,QAAMC,IAAiC,EAAE,UAAAD,EAAA;AACzC,EAAI,OAAOF,KAAM,aAAUG,EAAc,OAAOH,IAC5C,OAAOC,KAAM,aAAUE,EAAc,MAAMF,IAC/C,OAAO,SAASE,CAAa;AAC/B,GAYaC,IAAkB,MAAM;AACnC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAyB;AAAA,IACjD,GAAG,OAAO,SAAW,MAAc,OAAO,UAAU,OAAO;AAAA,IAC3D,GAAG,OAAO,SAAW,MAAc,OAAO,UAAU,OAAO;AAAA,EAAA,CAC5D;AAED,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAW,MAAMH,EAAS,EAAE,GAAG,OAAO,SAAS,GAAG,OAAO,SAAS;AACxE,kBAAO,iBAAiB,UAAUG,CAAQ,GAC1C,OAAO,iBAAiB,UAAUA,CAAQ,GACnC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,UAAUA,CAAQ;AAAA,IAAA;AAAA,EAC/C,GACC,EAAE,GAEE,EAAE,OAAAJ,GAAO,UAAAN,EAAA;AAClB;"}
1
+ {"version":3,"file":"useWindowScroll.mjs","sources":["../../../../src/hooks/useWindowScroll/useWindowScroll.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface ScrollPosition {\n x: number;\n y: number;\n}\n\nexport const scrollTo = ({\n x,\n y,\n behavior = 'smooth'\n}: Partial<ScrollPosition & ScrollOptions>) => {\n const scrollOptions: ScrollToOptions = { behavior };\n if (typeof x === 'number') scrollOptions.left = x;\n if (typeof y === 'number') scrollOptions.top = y;\n window.scrollTo(scrollOptions);\n};\n\n/**\n * @name useWindowScroll\n * @description - Hook that manages the window scroll position\n * @category Sensors\n *\n * @returns {UseWindowScrollReturn} An object containing the current window scroll position\n *\n * @example\n * const { value, scrollTo } = useWindowScroll();\n */\nexport const useWindowScroll = () => {\n const [value, setValue] = useState<ScrollPosition>({\n x: typeof window !== 'undefined' ? window.scrollX : Number.POSITIVE_INFINITY,\n y: typeof window !== 'undefined' ? window.scrollY : Number.POSITIVE_INFINITY\n });\n\n useEffect(() => {\n const onChange = () => setValue({ x: window.scrollX, y: window.scrollY });\n window.addEventListener('scroll', onChange);\n window.addEventListener('resize', onChange);\n return () => {\n window.removeEventListener('scroll', onChange);\n window.removeEventListener('resize', onChange);\n };\n }, []);\n\n return { value, scrollTo };\n};\n"],"names":["scrollTo","x","y","behavior","scrollOptions","useWindowScroll","value","setValue","useState","useEffect","onChange"],"mappings":";AAOO,MAAMA,IAAW,CAAC;AAAA,EACvB,GAAAC;AAAA,EACA,GAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAA+C;AAC7C,QAAMC,IAAiC,EAAE,UAAAD,EAAA;AACzC,EAAI,OAAOF,KAAM,aAAUG,EAAc,OAAOH,IAC5C,OAAOC,KAAM,aAAUE,EAAc,MAAMF,IAC/C,OAAO,SAASE,CAAa;AAC/B,GAYaC,IAAkB,MAAM;AACnC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAyB;AAAA,IACjD,GAAG,OAAO,SAAW,MAAc,OAAO,UAAU,OAAO;AAAA,IAC3D,GAAG,OAAO,SAAW,MAAc,OAAO,UAAU,OAAO;AAAA,EAAA,CAC5D;AAED,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAW,MAAMH,EAAS,EAAE,GAAG,OAAO,SAAS,GAAG,OAAO,SAAS;AACxE,kBAAO,iBAAiB,UAAUG,CAAQ,GAC1C,OAAO,iBAAiB,UAAUA,CAAQ,GACnC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,UAAUA,CAAQ;AAAA,IAAA;AAAA,EAC/C,GACC,EAAE,GAEE,EAAE,OAAAJ,GAAO,UAAAN,EAAA;AAClB;"}