@siberiacancode/reactuse 0.3.9 → 0.3.12

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 (74) hide show
  1. package/dist/cjs/hooks/useActiveElement/useActiveElement.cjs +1 -1
  2. package/dist/cjs/hooks/useActiveElement/useActiveElement.cjs.map +1 -1
  3. package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs +1 -1
  4. package/dist/cjs/hooks/useAutoScroll/useAutoScroll.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/useDoubleClick/useDoubleClick.cjs +1 -1
  8. package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs.map +1 -1
  9. package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs.map +1 -1
  10. package/dist/cjs/hooks/useHash/useHash.cjs +1 -1
  11. package/dist/cjs/hooks/useHash/useHash.cjs.map +1 -1
  12. package/dist/cjs/hooks/useHover/useHover.cjs +1 -1
  13. package/dist/cjs/hooks/useHover/useHover.cjs.map +1 -1
  14. package/dist/cjs/hooks/useInfiniteScroll/useInfiniteScroll.cjs +1 -1
  15. package/dist/cjs/hooks/useInfiniteScroll/useInfiniteScroll.cjs.map +1 -1
  16. package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs +1 -1
  17. package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs.map +1 -1
  18. package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs +1 -1
  19. package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs.map +1 -1
  20. package/dist/cjs/hooks/useLongPress/useLongPress.cjs +1 -1
  21. package/dist/cjs/hooks/useLongPress/useLongPress.cjs.map +1 -1
  22. package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs.map +1 -1
  23. package/dist/cjs/hooks/usePostMessage/usePostMessage.cjs +1 -1
  24. package/dist/cjs/hooks/usePostMessage/usePostMessage.cjs.map +1 -1
  25. package/dist/cjs/hooks/useSticky/useSticky.cjs +1 -1
  26. package/dist/cjs/hooks/useSticky/useSticky.cjs.map +1 -1
  27. package/dist/cjs/hooks/useUrlSearchParams/useUrlSearchParams.cjs +1 -1
  28. package/dist/cjs/hooks/useUrlSearchParams/useUrlSearchParams.cjs.map +1 -1
  29. package/dist/cjs/hooks/useWindowScroll/useWindowScroll.cjs +1 -1
  30. package/dist/cjs/hooks/useWindowScroll/useWindowScroll.cjs.map +1 -1
  31. package/dist/esm/hooks/useActiveElement/useActiveElement.mjs +1 -1
  32. package/dist/esm/hooks/useActiveElement/useActiveElement.mjs.map +1 -1
  33. package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs +11 -11
  34. package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs.map +1 -1
  35. package/dist/esm/hooks/useClickOutside/useClickOutside.mjs +9 -9
  36. package/dist/esm/hooks/useClickOutside/useClickOutside.mjs.map +1 -1
  37. package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs +3 -1
  38. package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs.map +1 -1
  39. package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs.map +1 -1
  40. package/dist/esm/hooks/useHash/useHash.mjs +6 -3
  41. package/dist/esm/hooks/useHash/useHash.mjs.map +1 -1
  42. package/dist/esm/hooks/useHover/useHover.mjs +4 -4
  43. package/dist/esm/hooks/useHover/useHover.mjs.map +1 -1
  44. package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs +1 -1
  45. package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs.map +1 -1
  46. package/dist/esm/hooks/useKeyPress/useKeyPress.mjs +1 -1
  47. package/dist/esm/hooks/useKeyPress/useKeyPress.mjs.map +1 -1
  48. package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs +1 -1
  49. package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs.map +1 -1
  50. package/dist/esm/hooks/useLongPress/useLongPress.mjs +1 -4
  51. package/dist/esm/hooks/useLongPress/useLongPress.mjs.map +1 -1
  52. package/dist/esm/hooks/useMediaControls/useMediaControls.mjs.map +1 -1
  53. package/dist/esm/hooks/usePostMessage/usePostMessage.mjs +18 -14
  54. package/dist/esm/hooks/usePostMessage/usePostMessage.mjs.map +1 -1
  55. package/dist/esm/hooks/useSticky/useSticky.mjs +1 -1
  56. package/dist/esm/hooks/useSticky/useSticky.mjs.map +1 -1
  57. package/dist/esm/hooks/useUrlSearchParams/useUrlSearchParams.mjs +6 -6
  58. package/dist/esm/hooks/useUrlSearchParams/useUrlSearchParams.mjs.map +1 -1
  59. package/dist/esm/hooks/useWindowScroll/useWindowScroll.mjs +1 -4
  60. package/dist/esm/hooks/useWindowScroll/useWindowScroll.mjs.map +1 -1
  61. package/dist/types/hooks/useActiveElement/useActiveElement.d.ts +4 -3
  62. package/dist/types/hooks/useAutoScroll/useAutoScroll.d.ts +5 -3
  63. package/dist/types/hooks/useClickOutside/useClickOutside.d.ts +5 -3
  64. package/dist/types/hooks/useDoubleClick/useDoubleClick.d.ts +7 -5
  65. package/dist/types/hooks/useFocusTrap/useFocusTrap.d.ts +2 -2
  66. package/dist/types/hooks/useHash/useHash.d.ts +10 -5
  67. package/dist/types/hooks/useHover/useHover.d.ts +8 -6
  68. package/dist/types/hooks/useInfiniteScroll/useInfiniteScroll.d.ts +12 -6
  69. package/dist/types/hooks/useKeyPress/useKeyPress.d.ts +10 -4
  70. package/dist/types/hooks/useKeysPressed/useKeysPressed.d.ts +10 -10
  71. package/dist/types/hooks/useLongPress/useLongPress.d.ts +9 -3
  72. package/dist/types/hooks/usePostMessage/usePostMessage.d.ts +5 -2
  73. package/dist/types/hooks/useSticky/useSticky.d.ts +5 -5
  74. package/package.json +89 -89
@@ -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 { 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;"}
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 UseKeysPressedReturn {\n /** The array of currently pressed keys */\n value: Array<{ key: string; code: string }>;\n}\n\nexport interface UseKeysPressed {\n (target: HookTarget | Window, options?: UseKeysPressedOptions): UseKeysPressedReturn;\n\n <Target extends Element>(\n options?: UseKeysPressedOptions\n ): UseKeysPressedReturn & { ref: StateRef<Target> };\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 {UseKeysPressedReturn} Object containing the array of currently pressed keys\n *\n * @example\n * const { value } = useKeysPressed(ref);\n *\n * @overload\n * @template Target - Type of the target DOM element\n * @param {UseKeysPressedOptions} [options] - Optional configuration options\n * @returns {UseKeysPressedReturn & { ref: StateRef<Target> }} Object containing the array of currently pressed keys and ref to attach to the 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":";;;AAmDO,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,IAAe,EAAE,OAAAG,EAAA,IACd,EAAE,OAAAA,GAAO,KAAKG,EAAA;AACvB;"}
@@ -19,10 +19,7 @@ const g = 400, P = ((...t) => {
19
19
  return o.addEventListener("mousedown", c), window.addEventListener("mouseup", i), o.addEventListener("touchstart", c), window.addEventListener("touchend", i), () => {
20
20
  o.removeEventListener("mousedown", c), window.removeEventListener("mouseup", i), o.removeEventListener("touchstart", c), window.removeEventListener("touchend", i), n.current && clearTimeout(n.current);
21
21
  };
22
- }, [e && a.getRawElement(e), u.state]), e ? E : {
23
- ref: u,
24
- pressed: E
25
- };
22
+ }, [e && a.getRawElement(e), u.state]), e ? { pressed: E } : { pressed: E, ref: u };
26
23
  });
27
24
  export {
28
25
  P as useLongPress
@@ -1 +1 @@
1
- {"version":3,"file":"useLongPress.mjs","sources":["../../../../src/hooks/useLongPress/useLongPress.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type LongPressEvents = MouseEvent | TouchEvent;\n\n// * The use long press options type */\nexport interface UseLongPressOptions {\n // * The threshold time in milliseconds\n threshold?: number;\n // * The callback function to be invoked on long press cancel\n onCancel?: (event: LongPressEvents) => void;\n // * The callback function to be invoked on long press end\n onFinish?: (event: LongPressEvents) => void;\n // * The callback function to be invoked on long press start\n onStart?: (event: LongPressEvents) => void;\n}\n\nexport interface UseLongPress {\n (\n target: HookTarget,\n callback: (event: LongPressEvents) => void,\n options?: UseLongPressOptions\n ): boolean;\n\n <Target extends Element>(\n callback: (event: LongPressEvents) => void,\n options?: UseLongPressOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n pressed: boolean;\n };\n}\n\nconst DEFAULT_THRESHOLD_TIME = 400;\n\n/**\n * @name useLongPress\n * @description - Hook that defines the logic when long pressing an element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to be long pressed\n * @param {(event: LongPressEvents) => void} callback The callback function to be invoked on long press\n * @param {UseLongPressOptions} [options] The options for the long press\n * @returns {boolean} The long pressing state\n *\n * @example\n * const pressed = useLongPress(ref, () => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: LongPressEvents) => void} callback The callback function to be invoked on long press\n * @param {UseLongPressOptions} [options] The options for the long press\n * @returns {boolean} The long pressing state\n *\n * @example\n * const { ref, pressed } = useLongPress(() => console.log('callback'));\n */\nexport const useLongPress = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const callback = (target ? params[1] : params[0]) as (event: LongPressEvents) => void;\n const options = (target ? params[2] : params[1]) as UseLongPressOptions | undefined;\n\n const [pressed, setPressed] = useState(false);\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const isPressedRef = useRef(false);\n const internalRef = useRefState<Element>();\n\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const onStart = (event: LongPressEvents) => {\n internalOptionsRef.current?.onStart?.(event);\n\n isPressedRef.current = true;\n timeoutIdRef.current = setTimeout(() => {\n internalCallbackRef.current(event);\n setPressed(true);\n }, internalOptionsRef.current?.threshold ?? DEFAULT_THRESHOLD_TIME);\n };\n\n const onCancel = (event: LongPressEvents) => {\n setPressed((prevPressed) => {\n if (prevPressed) {\n internalOptionsRef.current?.onFinish?.(event);\n } else if (isPressedRef.current) {\n internalOptionsRef.current?.onCancel?.(event);\n }\n\n isPressedRef.current = false;\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n\n return false;\n });\n };\n\n element.addEventListener('mousedown', onStart as EventListener);\n window.addEventListener('mouseup', onCancel as EventListener);\n\n element.addEventListener('touchstart', onStart as EventListener);\n window.addEventListener('touchend', onCancel as EventListener);\n\n return () => {\n element.removeEventListener('mousedown', onStart as EventListener);\n window.removeEventListener('mouseup', onCancel as EventListener);\n\n element.removeEventListener('touchstart', onStart as EventListener);\n window.removeEventListener('touchend', onCancel as EventListener);\n\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n };\n }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n if (target) return pressed;\n return {\n ref: internalRef,\n pressed\n };\n}) as UseLongPress;\n"],"names":["DEFAULT_THRESHOLD_TIME","useLongPress","params","target","isTarget","callback","options","pressed","setPressed","useState","timeoutIdRef","useRef","isPressedRef","internalRef","useRefState","internalCallbackRef","internalOptionsRef","useEffect","element","onStart","event","onCancel","prevPressed"],"mappings":";;;AAyCA,MAAMA,IAAyB,KA0BlBC,KAAgB,IAAIC,MAAuB;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,GAExC,CAACK,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAeC,EAAsC,MAAS,GAC9DC,IAAeD,EAAO,EAAK,GAC3BE,IAAcC,EAAA,GAEdC,IAAsBJ,EAAON,CAAQ;AAC3C,EAAAU,EAAoB,UAAUV;AAC9B,QAAMW,IAAqBL,EAAOL,CAAO;AAmDzC,SAlDAU,EAAmB,UAAUV,GAE7BW,EAAU,MAAM;AACd,QAAI,CAACd,KAAU,CAACU,EAAY,MAAO;AAEnC,UAAMK,IAAUf,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAU,CAACC,MAA2B;AAC1C,MAAAJ,EAAmB,SAAS,UAAUI,CAAK,GAE3CR,EAAa,UAAU,IACvBF,EAAa,UAAU,WAAW,MAAM;AACtC,QAAAK,EAAoB,QAAQK,CAAK,GACjCZ,EAAW,EAAI;AAAA,MAAA,GACdQ,EAAmB,SAAS,aAAahB,CAAsB;AAAA,IAAA,GAG9DqB,IAAW,CAACD,MAA2B;AAC3C,MAAAZ,EAAW,CAACc,OACNA,IACFN,EAAmB,SAAS,WAAWI,CAAK,IACnCR,EAAa,WACtBI,EAAmB,SAAS,WAAWI,CAAK,GAG9CR,EAAa,UAAU,IACnBF,EAAa,WAAS,aAAaA,EAAa,OAAO,GAEpD,GACR;AAAA,IAAA;AAGH,WAAAQ,EAAQ,iBAAiB,aAAaC,CAAwB,GAC9D,OAAO,iBAAiB,WAAWE,CAAyB,GAE5DH,EAAQ,iBAAiB,cAAcC,CAAwB,GAC/D,OAAO,iBAAiB,YAAYE,CAAyB,GAEtD,MAAM;AACX,MAAAH,EAAQ,oBAAoB,aAAaC,CAAwB,GACjE,OAAO,oBAAoB,WAAWE,CAAyB,GAE/DH,EAAQ,oBAAoB,cAAcC,CAAwB,GAClE,OAAO,oBAAoB,YAAYE,CAAyB,GAE5DX,EAAa,WAAS,aAAaA,EAAa,OAAO;AAAA,IAAA;AAAA,EAC7D,GACC,CAACP,KAAUC,EAAS,cAAcD,CAAM,GAAGU,EAAY,KAAK,CAAC,GAE5DV,IAAeI,IACZ;AAAA,IACL,KAAKM;AAAA,IACL,SAAAN;AAAA,EAAA;AAEJ;"}
1
+ {"version":3,"file":"useLongPress.mjs","sources":["../../../../src/hooks/useLongPress/useLongPress.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type LongPressEvents = MouseEvent | TouchEvent;\n\n// * The use long press options type */\nexport interface UseLongPressOptions {\n // * The threshold time in milliseconds\n threshold?: number;\n // * The callback function to be invoked on long press cancel\n onCancel?: (event: LongPressEvents) => void;\n // * The callback function to be invoked on long press end\n onFinish?: (event: LongPressEvents) => void;\n // * The callback function to be invoked on long press start\n onStart?: (event: LongPressEvents) => void;\n}\n\n/** The use long press return type */\nexport interface UseLongPressReturn {\n /** The long pressing state */\n pressed: boolean;\n /** The ref to attach to the element */\n ref: StateRef<Element>;\n}\n\nexport interface UseLongPress {\n (\n target: HookTarget,\n callback: (event: LongPressEvents) => void,\n options?: UseLongPressOptions\n ): UseLongPressReturn;\n\n <Target extends Element>(\n callback: (event: LongPressEvents) => void,\n options?: UseLongPressOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseLongPressReturn;\n}\n\nconst DEFAULT_THRESHOLD_TIME = 400;\n\n/**\n * @name useLongPress\n * @description - Hook that defines the logic when long pressing an element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to be long pressed\n * @param {(event: LongPressEvents) => void} callback The callback function to be invoked on long press\n * @param {UseLongPressOptions} [options] The options for the long press\n * @returns {boolean} The long pressing state\n *\n * @example\n * const pressed = useLongPress(ref, () => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: LongPressEvents) => void} callback The callback function to be invoked on long press\n * @param {UseLongPressOptions} [options] The options for the long press\n * @returns {boolean} The long pressing state\n *\n * @example\n * const { ref, pressed } = useLongPress(() => console.log('callback'));\n */\nexport const useLongPress = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const callback = (target ? params[1] : params[0]) as (event: LongPressEvents) => void;\n const options = (target ? params[2] : params[1]) as UseLongPressOptions | undefined;\n\n const [pressed, setPressed] = useState(false);\n const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n const isPressedRef = useRef(false);\n const internalRef = useRefState<Element>();\n\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const onStart = (event: LongPressEvents) => {\n internalOptionsRef.current?.onStart?.(event);\n\n isPressedRef.current = true;\n timeoutIdRef.current = setTimeout(() => {\n internalCallbackRef.current(event);\n setPressed(true);\n }, internalOptionsRef.current?.threshold ?? DEFAULT_THRESHOLD_TIME);\n };\n\n const onCancel = (event: LongPressEvents) => {\n setPressed((prevPressed) => {\n if (prevPressed) {\n internalOptionsRef.current?.onFinish?.(event);\n } else if (isPressedRef.current) {\n internalOptionsRef.current?.onCancel?.(event);\n }\n\n isPressedRef.current = false;\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n\n return false;\n });\n };\n\n element.addEventListener('mousedown', onStart as EventListener);\n window.addEventListener('mouseup', onCancel as EventListener);\n\n element.addEventListener('touchstart', onStart as EventListener);\n window.addEventListener('touchend', onCancel as EventListener);\n\n return () => {\n element.removeEventListener('mousedown', onStart as EventListener);\n window.removeEventListener('mouseup', onCancel as EventListener);\n\n element.removeEventListener('touchstart', onStart as EventListener);\n window.removeEventListener('touchend', onCancel as EventListener);\n\n if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);\n };\n }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n if (target) return { pressed };\n return { pressed, ref: internalRef };\n}) as UseLongPress;\n"],"names":["DEFAULT_THRESHOLD_TIME","useLongPress","params","target","isTarget","callback","options","pressed","setPressed","useState","timeoutIdRef","useRef","isPressedRef","internalRef","useRefState","internalCallbackRef","internalOptionsRef","useEffect","element","onStart","event","onCancel","prevPressed"],"mappings":";;;AAgDA,MAAMA,IAAyB,KA0BlBC,KAAgB,IAAIC,MAAuB;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,GAExC,CAACK,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAeC,EAAsC,MAAS,GAC9DC,IAAeD,EAAO,EAAK,GAC3BE,IAAcC,EAAA,GAEdC,IAAsBJ,EAAON,CAAQ;AAC3C,EAAAU,EAAoB,UAAUV;AAC9B,QAAMW,IAAqBL,EAAOL,CAAO;AAmDzC,SAlDAU,EAAmB,UAAUV,GAE7BW,EAAU,MAAM;AACd,QAAI,CAACd,KAAU,CAACU,EAAY,MAAO;AAEnC,UAAMK,IAAUf,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMC,IAAU,CAACC,MAA2B;AAC1C,MAAAJ,EAAmB,SAAS,UAAUI,CAAK,GAE3CR,EAAa,UAAU,IACvBF,EAAa,UAAU,WAAW,MAAM;AACtC,QAAAK,EAAoB,QAAQK,CAAK,GACjCZ,EAAW,EAAI;AAAA,MAAA,GACdQ,EAAmB,SAAS,aAAahB,CAAsB;AAAA,IAAA,GAG9DqB,IAAW,CAACD,MAA2B;AAC3C,MAAAZ,EAAW,CAACc,OACNA,IACFN,EAAmB,SAAS,WAAWI,CAAK,IACnCR,EAAa,WACtBI,EAAmB,SAAS,WAAWI,CAAK,GAG9CR,EAAa,UAAU,IACnBF,EAAa,WAAS,aAAaA,EAAa,OAAO,GAEpD,GACR;AAAA,IAAA;AAGH,WAAAQ,EAAQ,iBAAiB,aAAaC,CAAwB,GAC9D,OAAO,iBAAiB,WAAWE,CAAyB,GAE5DH,EAAQ,iBAAiB,cAAcC,CAAwB,GAC/D,OAAO,iBAAiB,YAAYE,CAAyB,GAEtD,MAAM;AACX,MAAAH,EAAQ,oBAAoB,aAAaC,CAAwB,GACjE,OAAO,oBAAoB,WAAWE,CAAyB,GAE/DH,EAAQ,oBAAoB,cAAcC,CAAwB,GAClE,OAAO,oBAAoB,YAAYE,CAAyB,GAE5DX,EAAa,WAAS,aAAaA,EAAa,OAAO;AAAA,IAAA;AAAA,EAC7D,GACC,CAACP,KAAUC,EAAS,cAAcD,CAAM,GAAGU,EAAY,KAAK,CAAC,GAE5DV,IAAe,EAAE,SAAAI,EAAA,IACd,EAAE,SAAAA,GAAS,KAAKM,EAAA;AACzB;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useMediaControls.mjs","sources":["../../../../src/hooks/useMediaControls/useMediaControls.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const timeRangeToArray = (timeRanges: TimeRanges) => {\n let ranges: [number, number][] = [];\n\n for (let i = 0; i < timeRanges.length; ++i)\n ranges = [...ranges, [timeRanges.start(i), timeRanges.end(i)]];\n\n return ranges;\n};\n\n/** The media source configuration type */\nexport interface UseMediaSource {\n /** The media attribute of the media */\n media?: string;\n /** The source URL of the media */\n src: string;\n /** The MIME type of the media */\n type?: string;\n}\n\n/** The media controls return type */\nexport interface UseMediaControlsReturn {\n /** Whether the media is currently buffering */\n buffered: [number, number][];\n /** The current playback position in seconds */\n currentTime: number;\n /** The total duration of the media in seconds */\n duration: number;\n /** Whether the media has ended */\n ended: boolean;\n /** Whether the media is currently muted */\n muted: boolean;\n /** The current playback rate (1.0 is normal speed) */\n playbackRate: number;\n /** Whether the media is currently playing */\n playing: boolean;\n /** Whether the media is currently seeking */\n seeking: boolean;\n /** Whether the media is currently stalled */\n stalled: boolean;\n /** The current volume level (0.0 to 1.0) */\n volume: number;\n /** Whether the media is currently waiting */\n waiting: boolean;\n\n /** Set the playback rate */\n changePlaybackRate: (rate: number) => void;\n /** Set the volume level (0.0 to 1.0) */\n changeVolume: (volume: number) => void;\n /** Set the muted state */\n mute: () => void;\n /** Pause the media */\n pause: () => void;\n /** Start playing the media */\n play: () => Promise<void>;\n /** Seek to a specific time in seconds */\n seek: (time: number) => void;\n /** Toggle between play and pause */\n toggle: () => Promise<void>;\n /** Set the unmuted state */\n unmute: () => void;\n}\n\nexport interface UseMediaControls {\n (target: HookTarget, src: string): UseMediaControlsReturn;\n\n (target: HookTarget, options: UseMediaSource): UseMediaControlsReturn;\n\n <Target extends HTMLMediaElement>(\n src: string\n ): UseMediaControlsReturn & {\n ref: StateRef<Target>;\n };\n\n <Target extends HTMLMediaElement>(\n options: UseMediaSource\n ): UseMediaControlsReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useMediaControls\n * @description Hook that provides controls for HTML media elements (audio/video)\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target media element\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n *\n * @example\n * const { playing, play, pause } = useMediaControls(videoRef, 'video.mp4');\n *\n * @overload\n * @param {HookTarget} target The target media element\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n *\n * @example\n * const { playing, play, pause } = useMediaControls(audioRef, { src: 'audio.mp3', type: 'audio/mp3' });\n *\n * @overload\n * @template Target The target media element type\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n *\n * @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>('video.mp4');\n *\n * @overload\n * @template Target The target media element type\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n *\n * @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>({ src: 'video.mp4', type: 'video/mp4' });\n */\nexport const useMediaControls = ((...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 : { src: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { src: params[0] }\n ) as UseMediaSource;\n\n const internalRef = useRefState<HTMLMediaElement>();\n const elementRef = useRef<HTMLMediaElement | null>(null);\n\n const [playing, setPlaying] = useState(false);\n const [duration, setDuration] = useState(0);\n const [currentTime, setCurrentTime] = useState(0);\n const [seeking, setSeeking] = useState(false);\n const [waiting, setWaiting] = useState(false);\n const [buffered, setBuffered] = useState<[number, number][]>([]);\n const [stalled, setStalled] = useState(false);\n const [ended, setEnded] = useState(false);\n const [playbackRate, setPlaybackRateState] = useState(1);\n\n const [muted, setMutedState] = useState(false);\n const [volume, setVolumeState] = useState(1);\n\n useEffect(() => {\n const element = (\n target ? isTarget.getElement(target) : internalRef.current\n ) as HTMLMediaElement;\n\n if (!element) return;\n\n elementRef.current = element;\n element.src = options.src;\n\n if (options.type) element.setAttribute('type', options.type);\n if (options.media) element.setAttribute('media', options.media);\n\n setDuration(element.duration);\n setCurrentTime(element.currentTime);\n setPlaying(false);\n setEnded(element.ended);\n setMutedState(element.muted);\n setVolumeState(element.volume);\n setPlaybackRateState(element.playbackRate);\n\n const onPlaying = () => {\n setPlaying(true);\n setStalled(false);\n };\n const onPause = () => setPlaying(false);\n const onWaiting = () => setWaiting(true);\n const onStalled = () => setStalled(true);\n const onSeeking = () => setSeeking(true);\n const onSeeked = () => setSeeking(false);\n const onEnded = () => {\n setPlaying(false);\n setEnded(true);\n };\n const onDurationChange = () => setDuration(element.duration);\n const onTimeUpdate = () => setCurrentTime(element.currentTime);\n const onVolumechange = () => {\n setMutedState(element.muted);\n setVolumeState(element.volume);\n };\n const onRatechange = () => setPlaybackRateState(element.playbackRate);\n const onProgress = () => setBuffered(timeRangeToArray(element.buffered));\n\n element.addEventListener('playing', onPlaying);\n element.addEventListener('pause', onPause);\n element.addEventListener('waiting', onWaiting);\n element.addEventListener('progress', onProgress);\n element.addEventListener('stalled', onStalled);\n element.addEventListener('seeking', onSeeking);\n element.addEventListener('seeked', onSeeked);\n element.addEventListener('ended', onEnded);\n element.addEventListener('loadedmetadata', onDurationChange);\n element.addEventListener('timeupdate', onTimeUpdate);\n element.addEventListener('volumechange', onVolumechange);\n element.addEventListener('ratechange', onRatechange);\n\n return () => {\n element.removeEventListener('playing', onPlaying);\n element.removeEventListener('pause', onPause);\n element.removeEventListener('waiting', onWaiting);\n element.removeEventListener('progress', onProgress);\n element.removeEventListener('stalled', onStalled);\n element.removeEventListener('seeking', onSeeking);\n element.removeEventListener('seeked', onSeeked);\n element.removeEventListener('ended', onEnded);\n element.removeEventListener('loadedmetadata', onDurationChange);\n element.removeEventListener('timeupdate', onTimeUpdate);\n element.removeEventListener('volumechange', onVolumechange);\n element.removeEventListener('ratechange', onRatechange);\n };\n }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n const play = async () => {\n const element = elementRef.current;\n if (!element) return;\n\n await element.play();\n };\n\n const pause = () => {\n if (!elementRef.current) return;\n elementRef.current.pause();\n };\n\n const toggle = async (value = !playing) => {\n if (value) return play();\n return pause();\n };\n\n const seek = (time: number) => {\n if (!elementRef.current) return;\n elementRef.current.currentTime = Math.min(Math.max(time, 0), duration);\n };\n\n const changeVolume = (value: number) => {\n if (!elementRef.current) return;\n elementRef.current.volume = Math.min(Math.max(value, 0), 1);\n };\n\n const mute = () => {\n if (!elementRef.current) return;\n elementRef.current.muted = true;\n };\n\n const unmute = () => {\n if (!elementRef.current) return;\n elementRef.current.muted = false;\n };\n\n const changePlaybackRate = (value: number) => {\n if (!elementRef.current) return;\n elementRef.current.playbackRate = value;\n };\n\n return {\n playing,\n duration,\n currentTime,\n seeking,\n waiting,\n buffered,\n stalled,\n ended,\n playbackRate,\n muted,\n volume,\n\n play,\n pause,\n toggle,\n seek,\n changeVolume,\n mute,\n unmute,\n changePlaybackRate,\n\n ...(!target && { ref: internalRef })\n };\n}) as UseMediaControls;\n"],"names":["timeRangeToArray","timeRanges","ranges","i","useMediaControls","params","target","isTarget","options","internalRef","useRefState","elementRef","useRef","playing","setPlaying","useState","duration","setDuration","currentTime","setCurrentTime","seeking","setSeeking","waiting","setWaiting","buffered","setBuffered","stalled","setStalled","ended","setEnded","playbackRate","setPlaybackRateState","muted","setMutedState","volume","setVolumeState","useEffect","element","onPlaying","onPause","onWaiting","onStalled","onSeeking","onSeeked","onEnded","onDurationChange","onTimeUpdate","onVolumechange","onRatechange","onProgress","play","pause","value","time"],"mappings":"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"}
1
+ {"version":3,"file":"useMediaControls.mjs","sources":["../../../../src/hooks/useMediaControls/useMediaControls.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const timeRangeToArray = (timeRanges: TimeRanges) => {\n let ranges: [number, number][] = [];\n\n for (let i = 0; i < timeRanges.length; ++i)\n ranges = [...ranges, [timeRanges.start(i), timeRanges.end(i)]];\n\n return ranges;\n};\n\n/** The media source configuration type */\nexport interface UseMediaSource {\n /** The media attribute of the media */\n media?: string;\n /** The source URL of the media */\n src: string;\n /** The MIME type of the media */\n type?: string;\n}\n\n/** The media controls return type */\nexport interface UseMediaControlsReturn {\n /** Whether the media is currently buffering */\n buffered: [number, number][];\n /** The current playback position in seconds */\n currentTime: number;\n /** The total duration of the media in seconds */\n duration: number;\n /** Whether the media has ended */\n ended: boolean;\n /** Whether the media is currently muted */\n muted: boolean;\n /** The current playback rate (1.0 is normal speed) */\n playbackRate: number;\n /** Whether the media is currently playing */\n playing: boolean;\n /** Whether the media is currently seeking */\n seeking: boolean;\n /** Whether the media is currently stalled */\n stalled: boolean;\n /** The current volume level (0.0 to 1.0) */\n volume: number;\n /** Whether the media is currently waiting */\n waiting: boolean;\n /** Set the playback rate */\n changePlaybackRate: (rate: number) => void;\n /** Set the volume level (0.0 to 1.0) */\n changeVolume: (volume: number) => void;\n /** Set the muted state */\n mute: () => void;\n /** Pause the media */\n pause: () => void;\n /** Start playing the media */\n play: () => Promise<void>;\n /** Seek to a specific time in seconds */\n seek: (time: number) => void;\n /** Toggle between play and pause */\n toggle: () => Promise<void>;\n /** Set the unmuted state */\n unmute: () => void;\n}\n\nexport interface UseMediaControls {\n (target: HookTarget, src: string): UseMediaControlsReturn;\n\n (target: HookTarget, options: UseMediaSource): UseMediaControlsReturn;\n\n <Target extends HTMLMediaElement>(\n src: string\n ): UseMediaControlsReturn & {\n ref: StateRef<Target>;\n };\n\n <Target extends HTMLMediaElement>(\n options: UseMediaSource\n ): UseMediaControlsReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useMediaControls\n * @description Hook that provides controls for HTML media elements (audio/video)\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target media element\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n *\n * @example\n * const { playing, play, pause } = useMediaControls(videoRef, 'video.mp4');\n *\n * @overload\n * @param {HookTarget} target The target media element\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn} An object containing media controls and state\n *\n * @example\n * const { playing, play, pause } = useMediaControls(audioRef, { src: 'audio.mp3', type: 'audio/mp3' });\n *\n * @overload\n * @template Target The target media element type\n * @param {string} src The source URL of the media\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n *\n * @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>('video.mp4');\n *\n * @overload\n * @template Target The target media element type\n * @param {UseMediaSource} options The media source configuration\n * @returns {UseMediaControlsReturn & { ref: StateRef<Target> }} An object containing media controls, state and ref\n *\n * @example\n * const { ref, playing, play, pause } = useMediaControls<HTMLVideoElement>({ src: 'video.mp4', type: 'video/mp4' });\n */\nexport const useMediaControls = ((...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 : { src: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { src: params[0] }\n ) as UseMediaSource;\n\n const internalRef = useRefState<HTMLMediaElement>();\n const elementRef = useRef<HTMLMediaElement | null>(null);\n\n const [playing, setPlaying] = useState(false);\n const [duration, setDuration] = useState(0);\n const [currentTime, setCurrentTime] = useState(0);\n const [seeking, setSeeking] = useState(false);\n const [waiting, setWaiting] = useState(false);\n const [buffered, setBuffered] = useState<[number, number][]>([]);\n const [stalled, setStalled] = useState(false);\n const [ended, setEnded] = useState(false);\n const [playbackRate, setPlaybackRateState] = useState(1);\n\n const [muted, setMutedState] = useState(false);\n const [volume, setVolumeState] = useState(1);\n\n useEffect(() => {\n const element = (\n target ? isTarget.getElement(target) : internalRef.current\n ) as HTMLMediaElement;\n\n if (!element) return;\n\n elementRef.current = element;\n element.src = options.src;\n\n if (options.type) element.setAttribute('type', options.type);\n if (options.media) element.setAttribute('media', options.media);\n\n setDuration(element.duration);\n setCurrentTime(element.currentTime);\n setPlaying(false);\n setEnded(element.ended);\n setMutedState(element.muted);\n setVolumeState(element.volume);\n setPlaybackRateState(element.playbackRate);\n\n const onPlaying = () => {\n setPlaying(true);\n setStalled(false);\n };\n const onPause = () => setPlaying(false);\n const onWaiting = () => setWaiting(true);\n const onStalled = () => setStalled(true);\n const onSeeking = () => setSeeking(true);\n const onSeeked = () => setSeeking(false);\n const onEnded = () => {\n setPlaying(false);\n setEnded(true);\n };\n const onDurationChange = () => setDuration(element.duration);\n const onTimeUpdate = () => setCurrentTime(element.currentTime);\n const onVolumechange = () => {\n setMutedState(element.muted);\n setVolumeState(element.volume);\n };\n const onRatechange = () => setPlaybackRateState(element.playbackRate);\n const onProgress = () => setBuffered(timeRangeToArray(element.buffered));\n\n element.addEventListener('playing', onPlaying);\n element.addEventListener('pause', onPause);\n element.addEventListener('waiting', onWaiting);\n element.addEventListener('progress', onProgress);\n element.addEventListener('stalled', onStalled);\n element.addEventListener('seeking', onSeeking);\n element.addEventListener('seeked', onSeeked);\n element.addEventListener('ended', onEnded);\n element.addEventListener('loadedmetadata', onDurationChange);\n element.addEventListener('timeupdate', onTimeUpdate);\n element.addEventListener('volumechange', onVolumechange);\n element.addEventListener('ratechange', onRatechange);\n\n return () => {\n element.removeEventListener('playing', onPlaying);\n element.removeEventListener('pause', onPause);\n element.removeEventListener('waiting', onWaiting);\n element.removeEventListener('progress', onProgress);\n element.removeEventListener('stalled', onStalled);\n element.removeEventListener('seeking', onSeeking);\n element.removeEventListener('seeked', onSeeked);\n element.removeEventListener('ended', onEnded);\n element.removeEventListener('loadedmetadata', onDurationChange);\n element.removeEventListener('timeupdate', onTimeUpdate);\n element.removeEventListener('volumechange', onVolumechange);\n element.removeEventListener('ratechange', onRatechange);\n };\n }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n const play = async () => {\n const element = elementRef.current;\n if (!element) return;\n\n await element.play();\n };\n\n const pause = () => {\n if (!elementRef.current) return;\n elementRef.current.pause();\n };\n\n const toggle = async (value = !playing) => {\n if (value) return play();\n return pause();\n };\n\n const seek = (time: number) => {\n if (!elementRef.current) return;\n elementRef.current.currentTime = Math.min(Math.max(time, 0), duration);\n };\n\n const changeVolume = (value: number) => {\n if (!elementRef.current) return;\n elementRef.current.volume = Math.min(Math.max(value, 0), 1);\n };\n\n const mute = () => {\n if (!elementRef.current) return;\n elementRef.current.muted = true;\n };\n\n const unmute = () => {\n if (!elementRef.current) return;\n elementRef.current.muted = false;\n };\n\n const changePlaybackRate = (value: number) => {\n if (!elementRef.current) return;\n elementRef.current.playbackRate = value;\n };\n\n return {\n playing,\n duration,\n currentTime,\n seeking,\n waiting,\n buffered,\n stalled,\n ended,\n playbackRate,\n muted,\n volume,\n\n play,\n pause,\n toggle,\n seek,\n changeVolume,\n mute,\n unmute,\n changePlaybackRate,\n\n ...(!target && { ref: internalRef })\n };\n}) as UseMediaControls;\n"],"names":["timeRangeToArray","timeRanges","ranges","i","useMediaControls","params","target","isTarget","options","internalRef","useRefState","elementRef","useRef","playing","setPlaying","useState","duration","setDuration","currentTime","setCurrentTime","seeking","setSeeking","waiting","setWaiting","buffered","setBuffered","stalled","setStalled","ended","setEnded","playbackRate","setPlaybackRateState","muted","setMutedState","volume","setVolumeState","useEffect","element","onPlaying","onPause","onWaiting","onStalled","onSeeking","onSeeked","onEnded","onDurationChange","onTimeUpdate","onVolumechange","onRatechange","onProgress","play","pause","value","time"],"mappings":"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"}
@@ -1,20 +1,24 @@
1
- import { useRef as n, useEffect as o } from "react";
2
- const d = (e, t) => {
3
- const a = n(t);
4
- return a.current = t, o(() => {
5
- const r = (s) => {
6
- Array.isArray(e) && (!e.includes(s.origin) || !e.includes("*")) || s.origin !== e && e !== "*" || a.current(s.data, s);
1
+ import { useRef as i, useEffect as u } from "react";
2
+ const f = (s, t) => {
3
+ const o = i(t);
4
+ o.current = t;
5
+ const r = i(s);
6
+ return r.current = s, u(() => {
7
+ const n = (e) => {
8
+ if (Array.isArray(r.current)) {
9
+ if (!r.current.includes(e.origin)) return;
10
+ } else if (r.current !== "*" && e.origin !== r.current)
11
+ return;
12
+ o.current(e.data, e);
7
13
  };
8
- return window.addEventListener("message", r), () => window.removeEventListener("message", r);
9
- }, []), (r) => {
10
- if (Array.isArray(e)) {
11
- e.forEach((s) => window.postMessage(r, s));
12
- return;
13
- }
14
- window.postMessage(r, e);
14
+ return window.addEventListener("message", n), () => window.removeEventListener("message", n);
15
+ }, []), (n) => {
16
+ if (Array.isArray(r.current))
17
+ return r.current.forEach((e) => window.postMessage(n, e));
18
+ window.postMessage(n, r.current);
15
19
  };
16
20
  };
17
21
  export {
18
- d as usePostMessage
22
+ f as usePostMessage
19
23
  };
20
24
  //# sourceMappingURL=usePostMessage.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"usePostMessage.mjs","sources":["../../../../src/hooks/usePostMessage/usePostMessage.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport type UsePostMessageReturn<Message> = (message: Message) => void;\n\n/**\n * @name usePostMessage\n * @description - Hook that allows you to receive messages from other origins\n * @category Browser\n * @usage low\n *\n * @overload\n * @template Message The message data type\n * @param {string | string[]} origin The origin of the message\n * @param {(message: Message) => Message} callback callback to get received message\n * @returns {(message: Message) => void} An object containing the current message\n *\n * @example\n * const postMessage = usePostMessage();\n */\nexport const usePostMessage = <Message>(\n origin: string | '*' | string[],\n callback: (message: Message, event: MessageEvent<Message>) => void\n): UsePostMessageReturn<Message> => {\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n const onMessage = (event: MessageEvent<Message>) => {\n if (\n (Array.isArray(origin) && (!origin.includes(event.origin) || !origin.includes('*'))) ||\n (event.origin !== origin && origin !== '*')\n )\n return;\n\n internalCallbackRef.current(event.data as Message, event);\n };\n\n window.addEventListener('message', onMessage);\n return () => window.removeEventListener('message', onMessage);\n }, []);\n\n const postMessage = (message: Message) => {\n if (Array.isArray(origin)) {\n origin.forEach((origin) => window.postMessage(message, origin));\n return;\n }\n\n window.postMessage(message, origin);\n };\n\n return postMessage;\n};\n"],"names":["usePostMessage","origin","callback","internalCallbackRef","useRef","useEffect","onMessage","event","message"],"mappings":";AAmBO,MAAMA,IAAiB,CAC5BC,GACAC,MACkC;AAClC,QAAMC,IAAsBC,EAAOF,CAAQ;AAC3C,SAAAC,EAAoB,UAAUD,GAE9BG,EAAU,MAAM;AACd,UAAMC,IAAY,CAACC,MAAiC;AAClD,MACG,MAAM,QAAQN,CAAM,MAAM,CAACA,EAAO,SAASM,EAAM,MAAM,KAAK,CAACN,EAAO,SAAS,GAAG,MAChFM,EAAM,WAAWN,KAAUA,MAAW,OAIzCE,EAAoB,QAAQI,EAAM,MAAiBA,CAAK;AAAA,IAAA;AAG1D,kBAAO,iBAAiB,WAAWD,CAAS,GACrC,MAAM,OAAO,oBAAoB,WAAWA,CAAS;AAAA,EAAA,GAC3D,EAAE,GAEe,CAACE,MAAqB;AACxC,QAAI,MAAM,QAAQP,CAAM,GAAG;AACzB,MAAAA,EAAO,QAAQ,CAACA,MAAW,OAAO,YAAYO,GAASP,CAAM,CAAC;AAC9D;AAAA,IAAA;AAGF,WAAO,YAAYO,GAASP,CAAM;AAAA,EAAA;AAItC;"}
1
+ {"version":3,"file":"usePostMessage.mjs","sources":["../../../../src/hooks/usePostMessage/usePostMessage.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/** The origin of the message */\nexport type UsePostMessageOrigin = string | '*' | string[];\n\n/** The return type of the usePostMessage hook */\nexport type UsePostMessageReturn<Message> = (message: Message) => void;\n\n/**\n * @name usePostMessage\n * @description - Hook that allows you to receive messages from other origins\n * @category Browser\n * @usage low\n *\n * @overload\n * @template Message The message data type\n * @param {UsePostMessageOrigin} origin The origin of the message\n * @param {(message: Message) => Message} callback callback to get received message\n * @returns {(message: Message) => void} An object containing the current message\n *\n * @example\n * const postMessage = usePostMessage();\n */\nexport const usePostMessage = <Message>(\n origin: UsePostMessageOrigin,\n callback: (message: Message, event: MessageEvent<Message>) => void\n): UsePostMessageReturn<Message> => {\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOriginRef = useRef(origin);\n internalOriginRef.current = origin;\n\n useEffect(() => {\n const onMessage = (event: MessageEvent<Message>) => {\n if (Array.isArray(internalOriginRef.current)) {\n if (!internalOriginRef.current.includes(event.origin)) return;\n } else if (internalOriginRef.current !== '*' && event.origin !== internalOriginRef.current)\n return;\n\n internalCallbackRef.current(event.data as Message, event);\n };\n\n window.addEventListener('message', onMessage);\n return () => window.removeEventListener('message', onMessage);\n }, []);\n\n const postMessage = (message: Message) => {\n if (Array.isArray(internalOriginRef.current))\n return internalOriginRef.current.forEach((origin) => window.postMessage(message, origin));\n\n window.postMessage(message, internalOriginRef.current);\n };\n\n return postMessage;\n};\n"],"names":["usePostMessage","origin","callback","internalCallbackRef","useRef","internalOriginRef","useEffect","onMessage","event","message"],"mappings":";AAuBO,MAAMA,IAAiB,CAC5BC,GACAC,MACkC;AAClC,QAAMC,IAAsBC,EAAOF,CAAQ;AAC3C,EAAAC,EAAoB,UAAUD;AAC9B,QAAMG,IAAoBD,EAAOH,CAAM;AACvC,SAAAI,EAAkB,UAAUJ,GAE5BK,EAAU,MAAM;AACd,UAAMC,IAAY,CAACC,MAAiC;AAClD,UAAI,MAAM,QAAQH,EAAkB,OAAO;AACzC,YAAI,CAACA,EAAkB,QAAQ,SAASG,EAAM,MAAM,EAAG;AAAA,iBAC9CH,EAAkB,YAAY,OAAOG,EAAM,WAAWH,EAAkB;AACjF;AAEF,MAAAF,EAAoB,QAAQK,EAAM,MAAiBA,CAAK;AAAA,IAAA;AAG1D,kBAAO,iBAAiB,WAAWD,CAAS,GACrC,MAAM,OAAO,oBAAoB,WAAWA,CAAS;AAAA,EAAA,GAC3D,EAAE,GAEe,CAACE,MAAqB;AACxC,QAAI,MAAM,QAAQJ,EAAkB,OAAO;AACzC,aAAOA,EAAkB,QAAQ,QAAQ,CAACJ,MAAW,OAAO,YAAYQ,GAASR,CAAM,CAAC;AAE1F,WAAO,YAAYQ,GAASJ,EAAkB,OAAO;AAAA,EAAA;AAIzD;"}
@@ -20,7 +20,7 @@ const R = ((...o) => {
20
20
  return e.addEventListener("scroll", n), window.addEventListener("resize", n), window.addEventListener("orientationchange", n), n(), () => {
21
21
  e.removeEventListener("scroll", n), window.removeEventListener("resize", n), window.removeEventListener("orientationchange", n);
22
22
  };
23
- }, [t && s.getRawElement(t), i.state, c, r?.root]), t ? u : {
23
+ }, [t && s.getRawElement(t), i.state, c, r?.root]), t ? { stuck: u } : {
24
24
  stuck: u,
25
25
  ref: i
26
26
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useSticky.mjs","sources":["../../../../src/hooks/useSticky/useSticky.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 sticky return type */\nexport interface UseStickyReturn {\n stuck: boolean;\n}\n\n/** The use sticky axis type */\nexport type UseStickyAxis = 'horizontal' | 'vertical';\n\n/** The use sticky options type */\nexport interface UseStickyOptions {\n axis?: UseStickyAxis;\n root?: HookTarget;\n}\n\nexport interface UseSticky {\n (target: HookTarget, options?: UseStickyOptions): boolean;\n\n <Target extends Element>(\n options?: UseStickyOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseStickyReturn;\n}\n\n/**\n * @name UseSticky\n * @description - Hook that allows you to detect that your sticky component is stuck\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target sticky element\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {UseStickyReturn} The state of the sticky\n *\n * @example\n * const stuck = useSticky(ref);\n *\n * @overload\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {{ stickyRef: StateRef<Target> } & UseStickyReturn} The state of the sticky\n *\n * @example\n * const { stuck, ref } = useSticky();\n */\nexport const useSticky = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseStickyOptions;\n const axis = options?.axis ?? 'vertical';\n\n const internalRef = useRefState<Element>();\n const [stuck, setStuck] = useState(false);\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const root = (options?.root ? isTarget.getElement(options.root) : document) as Element;\n const elementOffsetTop =\n element.getBoundingClientRect().top + root.scrollTop - root.getBoundingClientRect().top;\n const elementOffsetLeft =\n element.getBoundingClientRect().left + root.scrollLeft - root.getBoundingClientRect().left;\n\n const onSticky = () => {\n if (axis === 'vertical') {\n const scrollTop = root.scrollTop;\n setStuck(scrollTop >= elementOffsetTop);\n }\n\n if (axis === 'horizontal') {\n const scrollLeft = root.scrollLeft;\n setStuck(scrollLeft >= elementOffsetLeft);\n }\n };\n\n root.addEventListener('scroll', onSticky);\n window.addEventListener('resize', onSticky);\n window.addEventListener('orientationchange', onSticky);\n\n onSticky();\n\n return () => {\n root.removeEventListener('scroll', onSticky);\n window.removeEventListener('resize', onSticky);\n window.removeEventListener('orientationchange', onSticky);\n };\n }, [target && isTarget.getRawElement(target), internalRef.state, axis, options?.root]);\n\n if (target) return stuck;\n return {\n stuck,\n ref: internalRef\n };\n}) as UseSticky;\n"],"names":["useSticky","params","target","isTarget","options","axis","internalRef","useRefState","stuck","setStuck","useState","useEffect","element","root","elementOffsetTop","elementOffsetLeft","onSticky","scrollTop","scrollLeft"],"mappings":";;;AA0DO,MAAMA,KAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAOD,GAAS,QAAQ,YAExBE,IAAcC,EAAA,GACd,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAwCxC,SAtCAC,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAWV,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AAEpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAQT,GAAS,OAAOD,EAAS,WAAWC,EAAQ,IAAI,IAAI,UAC5DU,IACJF,EAAQ,wBAAwB,MAAMC,EAAK,YAAYA,EAAK,sBAAA,EAAwB,KAChFE,IACJH,EAAQ,wBAAwB,OAAOC,EAAK,aAAaA,EAAK,sBAAA,EAAwB,MAElFG,IAAW,MAAM;AACrB,UAAIX,MAAS,YAAY;AACvB,cAAMY,IAAYJ,EAAK;AACvB,QAAAJ,EAASQ,KAAaH,CAAgB;AAAA,MAAA;AAGxC,UAAIT,MAAS,cAAc;AACzB,cAAMa,IAAaL,EAAK;AACxB,QAAAJ,EAASS,KAAcH,CAAiB;AAAA,MAAA;AAAA,IAC1C;AAGF,WAAAF,EAAK,iBAAiB,UAAUG,CAAQ,GACxC,OAAO,iBAAiB,UAAUA,CAAQ,GAC1C,OAAO,iBAAiB,qBAAqBA,CAAQ,GAErDA,EAAA,GAEO,MAAM;AACX,MAAAH,EAAK,oBAAoB,UAAUG,CAAQ,GAC3C,OAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,qBAAqBA,CAAQ;AAAA,IAAA;AAAA,EAC1D,GACC,CAACd,KAAUC,EAAS,cAAcD,CAAM,GAAGI,EAAY,OAAOD,GAAMD,GAAS,IAAI,CAAC,GAEjFF,IAAeM,IACZ;AAAA,IACL,OAAAA;AAAA,IACA,KAAKF;AAAA,EAAA;AAET;"}
1
+ {"version":3,"file":"useSticky.mjs","sources":["../../../../src/hooks/useSticky/useSticky.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 sticky return type */\nexport interface UseStickyReturn {\n stuck: boolean;\n}\n\n/** The use sticky axis type */\nexport type UseStickyAxis = 'horizontal' | 'vertical';\n\n/** The use sticky options type */\nexport interface UseStickyOptions {\n axis?: UseStickyAxis;\n root?: HookTarget;\n}\n\nexport interface UseSticky {\n (target: HookTarget, options?: UseStickyOptions): UseStickyReturn;\n\n <Target extends Element>(\n options?: UseStickyOptions,\n target?: never\n ): UseStickyReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name UseSticky\n * @description - Hook that allows you to detect that your sticky component is stuck\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target sticky element\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {UseStickyReturn} The state of the sticky\n *\n * @example\n * const { stuck } = useSticky(ref);\n *\n * @overload\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {{ ref: StateRef<Target> } & UseStickyReturn} The state of the sticky\n *\n * @example\n * const { stuck, ref } = useSticky();\n */\nexport const useSticky = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseStickyOptions;\n const axis = options?.axis ?? 'vertical';\n\n const internalRef = useRefState<Element>();\n const [stuck, setStuck] = useState(false);\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const root = (options?.root ? isTarget.getElement(options.root) : document) as Element;\n const elementOffsetTop =\n element.getBoundingClientRect().top + root.scrollTop - root.getBoundingClientRect().top;\n const elementOffsetLeft =\n element.getBoundingClientRect().left + root.scrollLeft - root.getBoundingClientRect().left;\n\n const onSticky = () => {\n if (axis === 'vertical') {\n const scrollTop = root.scrollTop;\n setStuck(scrollTop >= elementOffsetTop);\n }\n\n if (axis === 'horizontal') {\n const scrollLeft = root.scrollLeft;\n setStuck(scrollLeft >= elementOffsetLeft);\n }\n };\n\n root.addEventListener('scroll', onSticky);\n window.addEventListener('resize', onSticky);\n window.addEventListener('orientationchange', onSticky);\n\n onSticky();\n\n return () => {\n root.removeEventListener('scroll', onSticky);\n window.removeEventListener('resize', onSticky);\n window.removeEventListener('orientationchange', onSticky);\n };\n }, [target && isTarget.getRawElement(target), internalRef.state, axis, options?.root]);\n\n if (target) return { stuck };\n return {\n stuck,\n ref: internalRef\n };\n}) as UseSticky;\n"],"names":["useSticky","params","target","isTarget","options","axis","internalRef","useRefState","stuck","setStuck","useState","useEffect","element","root","elementOffsetTop","elementOffsetLeft","onSticky","scrollTop","scrollLeft"],"mappings":";;;AA0DO,MAAMA,KAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAOD,GAAS,QAAQ,YAExBE,IAAcC,EAAA,GACd,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAwCxC,SAtCAC,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAWV,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AAEpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAQT,GAAS,OAAOD,EAAS,WAAWC,EAAQ,IAAI,IAAI,UAC5DU,IACJF,EAAQ,wBAAwB,MAAMC,EAAK,YAAYA,EAAK,sBAAA,EAAwB,KAChFE,IACJH,EAAQ,wBAAwB,OAAOC,EAAK,aAAaA,EAAK,sBAAA,EAAwB,MAElFG,IAAW,MAAM;AACrB,UAAIX,MAAS,YAAY;AACvB,cAAMY,IAAYJ,EAAK;AACvB,QAAAJ,EAASQ,KAAaH,CAAgB;AAAA,MAAA;AAGxC,UAAIT,MAAS,cAAc;AACzB,cAAMa,IAAaL,EAAK;AACxB,QAAAJ,EAASS,KAAcH,CAAiB;AAAA,MAAA;AAAA,IAC1C;AAGF,WAAAF,EAAK,iBAAiB,UAAUG,CAAQ,GACxC,OAAO,iBAAiB,UAAUA,CAAQ,GAC1C,OAAO,iBAAiB,qBAAqBA,CAAQ,GAErDA,EAAA,GAEO,MAAM;AACX,MAAAH,EAAK,oBAAoB,UAAUG,CAAQ,GAC3C,OAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,qBAAqBA,CAAQ;AAAA,IAAA;AAAA,EAC1D,GACC,CAACd,KAAUC,EAAS,cAAcD,CAAM,GAAGI,EAAY,OAAOD,GAAMD,GAAS,IAAI,CAAC,GAEjFF,IAAe,EAAE,OAAAM,EAAA,IACd;AAAA,IACL,OAAAA;AAAA,IACA,KAAKF;AAAA,EAAA;AAET;"}
@@ -1,7 +1,7 @@
1
- import { useState as L, useEffect as v } from "react";
1
+ import { useState as z, useEffect as L } from "react";
2
2
  import { getUrlSearchParams as u, URL_SEARCH_PARAMS_EVENT as g, createQueryString as U, dispatchUrlSearchParamsEvent as m } from "../useUrlSearchParam/useUrlSearchParam.mjs";
3
3
  const A = ((t) => {
4
- const i = typeof t == "object" && t && ("serializer" in t || "deserializer" in t || "initialValue" in t || "mode" in t || "write" in t) ? t : {}, c = i ? i?.initialValue : t, { mode: n = "history", write: f = "replace" } = i, l = (e) => i?.serializer ? i.serializer(e) : typeof e == "string" ? e : JSON.stringify(e), p = (e) => {
4
+ const i = typeof t == "object" && t && ("serializer" in t || "deserializer" in t || "initialValue" in t || "mode" in t || "write" in t) ? t : void 0, c = i ? i?.initialValue : t, { mode: n = "history", write: f = "replace" } = i ?? {}, l = (e) => i?.serializer ? i.serializer(e) : typeof e == "string" ? e : JSON.stringify(e), p = (e) => {
5
5
  if (i?.deserializer) return i.deserializer(e);
6
6
  if (e !== "undefined")
7
7
  try {
@@ -15,8 +15,8 @@ const A = ((t) => {
15
15
  if (d === void 0)
16
16
  o.delete(E);
17
17
  else {
18
- const z = l ? l(d) : String(d);
19
- o.set(E, z);
18
+ const v = l ? l(d) : String(d);
19
+ o.set(E, v);
20
20
  }
21
21
  });
22
22
  const y = U(o, e);
@@ -24,7 +24,7 @@ const A = ((t) => {
24
24
  }, a = (e) => typeof e == "string" ? a(new URLSearchParams(e)) : e instanceof URLSearchParams ? Array.from(e.entries()).reduce(
25
25
  (r, [s, o]) => (r[s] = p(o), r),
26
26
  {}
27
- ) : e, [w, S] = L(() => {
27
+ ) : e, [w, S] = z(() => {
28
28
  if (typeof window > "u") return c ?? {};
29
29
  const e = u(n), r = {
30
30
  ...c && a(c),
@@ -39,7 +39,7 @@ const A = ((t) => {
39
39
  );
40
40
  S(a(s));
41
41
  };
42
- return v(() => {
42
+ return L(() => {
43
43
  const e = () => {
44
44
  const r = u(n);
45
45
  S(a(r));
@@ -1 +1 @@
1
- {"version":3,"file":"useUrlSearchParams.mjs","sources":["../../../../src/hooks/useUrlSearchParams/useUrlSearchParams.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport {\n createQueryString,\n dispatchUrlSearchParamsEvent,\n getUrlSearchParams,\n URL_SEARCH_PARAMS_EVENT\n} from '../useUrlSearchParam/useUrlSearchParam';\n\n/** The url params type */\nexport type UrlParams = Record<string, any>;\n\n/** The url search params mod */\nexport type UrlSearchParamsMode = 'hash-params' | 'hash' | 'history';\n\n/** The use url search params set options type */\nexport interface UseUrlSearchParamsSetOptions {\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n}\n\n/* The use search params initial value type */\nexport type UseUrlSearchParamsInitialValue<Value> = (() => Value) | Value;\n\n/** The use url search params options type */\nexport interface UseUrlSearchParamsOptions<Value> {\n /* The initial value of the url search params */\n initialValue?: UseUrlSearchParamsInitialValue<string | URLSearchParams | Value>;\n /** The mode to use for writing to the URL */\n mode?: UrlSearchParamsMode;\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n /* The deserializer function to be invoked */\n deserializer?: (value: string) => Value[keyof Value];\n /* The serializer function to be invoked */\n serializer?: (value: Value[keyof Value]) => string;\n}\n\n/** The use url search params return type */\nexport interface UseUrlSearchParamsReturn<Value> {\n /** The value of the url search params */\n value: Value;\n /** The set function */\n set: (value: Partial<Value>, options?: UseUrlSearchParamsSetOptions) => void;\n}\n\nexport interface UseUrlSearchParams {\n <Value>(\n key: string,\n options: UseUrlSearchParamsOptions<Value> & {\n initialValue: UseUrlSearchParamsInitialValue<Value>;\n }\n ): UseUrlSearchParamsReturn<Value>;\n\n <Value>(options?: UseUrlSearchParamsOptions<Value>): UseUrlSearchParamsReturn<Value | undefined>;\n\n <Value>(initialValue: UseUrlSearchParamsInitialValue<Value>): UseUrlSearchParamsReturn<Value>;\n\n <Value>(key: string): UseUrlSearchParamsReturn<Value | undefined>;\n}\n\n/**\n * @name useUrlSearchParams\n * @description - Hook that provides reactive URLSearchParams\n * @category State\n * @usage high\n *\n * @overload\n * @template Value The type of the url param values\n * @param {UseUrlSearchParamsOptions<Value> & { initialValue: UseUrlSearchParamsInitialValue<Value> }} options The options object with required initialValue\n * @param {UseUrlSearchParamsInitialValue<Value>} [options.initialValue] The initial value for the url params\n * @param {UrlSearchParamsMode} [options.mode='history'] The mode to use for the URL ('history' | 'hash-params' | 'hash')\n * @param {'push' | 'replace'} [options.write='replace'] The mode to use for writing to the URL\n * @param {(value: Value[keyof Value]) => string} [options.serializer] Custom serializer function to convert value to string\n * @param {(value: string) => Value[keyof Value]} [options.deserializer] Custom deserializer function to convert string to value\n * @returns {UseUrlSearchParamsReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParams({ initialValue: { page: 1 } });\n *\n * @overload\n * @template Value The type of the url param values\n * @param {UseUrlSearchParamsInitialValue<Value>} [initialValue] The initial value for the url params\n * @returns {UseUrlSearchParamsReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParams({ page: 1 });\n */\nexport const useUrlSearchParams = (<Value extends UrlParams>(\n params: any\n): UseUrlSearchParamsReturn<Value> => {\n const options = (\n typeof params === 'object' &&\n params &&\n ('serializer' in params ||\n 'deserializer' in params ||\n 'initialValue' in params ||\n 'mode' in params ||\n 'write' in params)\n ? params\n : {}\n ) as UseUrlSearchParamsOptions<Value>;\n const initialValue = (\n options ? options?.initialValue : params\n ) as UseUrlSearchParamsInitialValue<Value>;\n\n const { mode = 'history', write: writeMode = 'replace' } = options;\n\n const serializer = (value: Value[keyof Value]) => {\n if (options?.serializer) return options.serializer(value);\n if (typeof value === 'string') return value;\n return JSON.stringify(value);\n };\n\n const deserializer = (value: string) => {\n if (options?.deserializer) return options.deserializer(value);\n if (value === 'undefined') return undefined as unknown as Value[keyof Value];\n\n try {\n return JSON.parse(value) as Value;\n } catch {\n return value as Value[keyof Value];\n }\n };\n\n const setUrlSearchParams = <Value extends UrlParams>(\n mode: UrlSearchParamsMode,\n value: Partial<Value>,\n write: 'push' | 'replace' = 'replace'\n ) => {\n const urlSearchParams = getUrlSearchParams(mode);\n\n Object.entries(value).forEach(([key, param]) => {\n if (param === undefined) {\n urlSearchParams.delete(key);\n } else {\n const serializedValue = serializer ? serializer(param) : String(param);\n urlSearchParams.set(key, serializedValue);\n }\n });\n\n const query = createQueryString(urlSearchParams, mode);\n if (write === 'replace') window.history.replaceState({}, '', query);\n if (write === 'push') window.history.pushState({}, '', query);\n dispatchUrlSearchParamsEvent();\n\n return urlSearchParams;\n };\n\n const getParsedUrlSearchParams = (searchParams: string | UrlParams | URLSearchParams) => {\n if (typeof searchParams === 'string') {\n return getParsedUrlSearchParams(new URLSearchParams(searchParams));\n }\n\n if (searchParams instanceof URLSearchParams) {\n return Array.from(searchParams.entries()).reduce(\n (acc, [key, value]) => {\n acc[key] = deserializer(value);\n return acc;\n },\n {} as Record<string, any>\n );\n }\n\n return searchParams;\n };\n\n const [value, setValue] = useState<Value>(() => {\n if (typeof window === 'undefined') return (initialValue ?? {}) as Value;\n\n const urlSearchParams = getUrlSearchParams(mode);\n const value = {\n ...(initialValue && getParsedUrlSearchParams(initialValue)),\n ...getParsedUrlSearchParams(urlSearchParams)\n } as Value;\n\n setUrlSearchParams(mode, value, writeMode);\n\n return value;\n });\n\n const set = (params: Partial<Value>, options?: UseUrlSearchParamsSetOptions) => {\n const searchParams = setUrlSearchParams(\n mode,\n { ...value, ...params },\n options?.write ?? writeMode\n );\n setValue(getParsedUrlSearchParams(searchParams) as Value);\n };\n\n useEffect(() => {\n const onParamsChange = () => {\n const searchParams = getUrlSearchParams(mode);\n setValue(getParsedUrlSearchParams(searchParams) as Value);\n };\n\n window.addEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.addEventListener('popstate', onParamsChange);\n if (mode !== 'history') window.addEventListener('hashchange', onParamsChange);\n\n return () => {\n window.removeEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.removeEventListener('popstate', onParamsChange);\n if (mode !== 'history') window.removeEventListener('hashchange', onParamsChange);\n };\n }, [mode]);\n\n return {\n value,\n set\n };\n}) as UseUrlSearchParams;\n\nexport { createQueryString, dispatchUrlSearchParamsEvent, getUrlSearchParams };\n"],"names":["useUrlSearchParams","params","options","initialValue","mode","writeMode","serializer","value","deserializer","setUrlSearchParams","write","urlSearchParams","getUrlSearchParams","key","param","serializedValue","query","createQueryString","dispatchUrlSearchParamsEvent","getParsedUrlSearchParams","searchParams","acc","setValue","useState","set","useEffect","onParamsChange","URL_SEARCH_PARAMS_EVENT"],"mappings":"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"}
1
+ {"version":3,"file":"useUrlSearchParams.mjs","sources":["../../../../src/hooks/useUrlSearchParams/useUrlSearchParams.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport {\n createQueryString,\n dispatchUrlSearchParamsEvent,\n getUrlSearchParams,\n URL_SEARCH_PARAMS_EVENT\n} from '../useUrlSearchParam/useUrlSearchParam';\n\n/** The url params type */\nexport type UrlParams = Record<string, any>;\n\n/** The url search params mod */\nexport type UrlSearchParamsMode = 'hash-params' | 'hash' | 'history';\n\n/** The use url search params set options type */\nexport interface UseUrlSearchParamsSetOptions {\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n}\n\n/* The use search params initial value type */\nexport type UseUrlSearchParamsInitialValue<Value> = (() => Value) | Value;\n\n/** The use url search params options type */\nexport interface UseUrlSearchParamsOptions<Value> {\n /* The initial value of the url search params */\n initialValue?: UseUrlSearchParamsInitialValue<string | URLSearchParams | Value>;\n /** The mode to use for writing to the URL */\n mode?: UrlSearchParamsMode;\n /** The mode to use for writing to the URL */\n write?: 'push' | 'replace';\n /* The deserializer function to be invoked */\n deserializer?: (value: string) => Value[keyof Value];\n /* The serializer function to be invoked */\n serializer?: (value: Value[keyof Value]) => string;\n}\n\n/** The use url search params return type */\nexport interface UseUrlSearchParamsReturn<Value> {\n /** The value of the url search params */\n value: Value;\n /** The set function */\n set: (value: Partial<Value>, options?: UseUrlSearchParamsSetOptions) => void;\n}\n\nexport interface UseUrlSearchParams {\n <Value>(\n key: string,\n options: UseUrlSearchParamsOptions<Value> & {\n initialValue: UseUrlSearchParamsInitialValue<Value>;\n }\n ): UseUrlSearchParamsReturn<Value>;\n\n <Value>(options?: UseUrlSearchParamsOptions<Value>): UseUrlSearchParamsReturn<Value | undefined>;\n\n <Value>(initialValue: UseUrlSearchParamsInitialValue<Value>): UseUrlSearchParamsReturn<Value>;\n\n <Value>(key: string): UseUrlSearchParamsReturn<Value | undefined>;\n}\n\n/**\n * @name useUrlSearchParams\n * @description - Hook that provides reactive URLSearchParams\n * @category State\n * @usage high\n *\n * @overload\n * @template Value The type of the url param values\n * @param {UseUrlSearchParamsOptions<Value> & { initialValue: UseUrlSearchParamsInitialValue<Value> }} options The options object with required initialValue\n * @param {UseUrlSearchParamsInitialValue<Value>} [options.initialValue] The initial value for the url params\n * @param {UrlSearchParamsMode} [options.mode='history'] The mode to use for the URL ('history' | 'hash-params' | 'hash')\n * @param {'push' | 'replace'} [options.write='replace'] The mode to use for writing to the URL\n * @param {(value: Value[keyof Value]) => string} [options.serializer] Custom serializer function to convert value to string\n * @param {(value: string) => Value[keyof Value]} [options.deserializer] Custom deserializer function to convert string to value\n * @returns {UseUrlSearchParamsReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParams({ initialValue: { page: 1 } });\n *\n * @overload\n * @template Value The type of the url param values\n * @param {UseUrlSearchParamsInitialValue<Value>} [initialValue] The initial value for the url params\n * @returns {UseUrlSearchParamsReturn<Value>} The object with value and function for change value\n *\n * @example\n * const { value, set } = useUrlSearchParams({ page: 1 });\n */\nexport const useUrlSearchParams = (<Value extends UrlParams>(\n params: any\n): UseUrlSearchParamsReturn<Value> => {\n const options = (\n typeof params === 'object' &&\n params &&\n ('serializer' in params ||\n 'deserializer' in params ||\n 'initialValue' in params ||\n 'mode' in params ||\n 'write' in params)\n ? params\n : undefined\n ) as UseUrlSearchParamsOptions<Value> | undefined;\n const initialValue = (\n options ? options?.initialValue : params\n ) as UseUrlSearchParamsInitialValue<Value>;\n\n const { mode = 'history', write: writeMode = 'replace' } = options ?? {};\n\n const serializer = (value: Value[keyof Value]) => {\n if (options?.serializer) return options.serializer(value);\n if (typeof value === 'string') return value;\n return JSON.stringify(value);\n };\n\n const deserializer = (value: string) => {\n if (options?.deserializer) return options.deserializer(value);\n if (value === 'undefined') return undefined as unknown as Value[keyof Value];\n\n try {\n return JSON.parse(value) as Value;\n } catch {\n return value as Value[keyof Value];\n }\n };\n\n const setUrlSearchParams = <Value extends UrlParams>(\n mode: UrlSearchParamsMode,\n value: Partial<Value>,\n write: 'push' | 'replace' = 'replace'\n ) => {\n const urlSearchParams = getUrlSearchParams(mode);\n\n Object.entries(value).forEach(([key, param]) => {\n if (param === undefined) {\n urlSearchParams.delete(key);\n } else {\n const serializedValue = serializer ? serializer(param) : String(param);\n urlSearchParams.set(key, serializedValue);\n }\n });\n\n const query = createQueryString(urlSearchParams, mode);\n if (write === 'replace') window.history.replaceState({}, '', query);\n if (write === 'push') window.history.pushState({}, '', query);\n dispatchUrlSearchParamsEvent();\n\n return urlSearchParams;\n };\n\n const getParsedUrlSearchParams = (searchParams: string | UrlParams | URLSearchParams) => {\n if (typeof searchParams === 'string') {\n return getParsedUrlSearchParams(new URLSearchParams(searchParams));\n }\n\n if (searchParams instanceof URLSearchParams) {\n return Array.from(searchParams.entries()).reduce(\n (acc, [key, value]) => {\n acc[key] = deserializer(value);\n return acc;\n },\n {} as Record<string, any>\n );\n }\n\n return searchParams;\n };\n\n const [value, setValue] = useState<Value>(() => {\n if (typeof window === 'undefined') return (initialValue ?? {}) as Value;\n\n const urlSearchParams = getUrlSearchParams(mode);\n const value = {\n ...(initialValue && getParsedUrlSearchParams(initialValue)),\n ...getParsedUrlSearchParams(urlSearchParams)\n } as Value;\n\n setUrlSearchParams(mode, value, writeMode);\n\n return value;\n });\n\n const set = (params: Partial<Value>, options?: UseUrlSearchParamsSetOptions) => {\n const searchParams = setUrlSearchParams(\n mode,\n { ...value, ...params },\n options?.write ?? writeMode\n );\n setValue(getParsedUrlSearchParams(searchParams) as Value);\n };\n\n useEffect(() => {\n const onParamsChange = () => {\n const searchParams = getUrlSearchParams(mode);\n setValue(getParsedUrlSearchParams(searchParams) as Value);\n };\n\n window.addEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.addEventListener('popstate', onParamsChange);\n if (mode !== 'history') window.addEventListener('hashchange', onParamsChange);\n\n return () => {\n window.removeEventListener(URL_SEARCH_PARAMS_EVENT, onParamsChange);\n window.removeEventListener('popstate', onParamsChange);\n if (mode !== 'history') window.removeEventListener('hashchange', onParamsChange);\n };\n }, [mode]);\n\n return {\n value,\n set\n };\n}) as UseUrlSearchParams;\n\nexport { createQueryString, dispatchUrlSearchParamsEvent, getUrlSearchParams };\n"],"names":["useUrlSearchParams","params","options","initialValue","mode","writeMode","serializer","value","deserializer","setUrlSearchParams","write","urlSearchParams","getUrlSearchParams","key","param","serializedValue","query","createQueryString","dispatchUrlSearchParamsEvent","getParsedUrlSearchParams","searchParams","acc","setValue","useState","set","useEffect","onParamsChange","URL_SEARCH_PARAMS_EVENT"],"mappings":";;AAwFO,MAAMA,KAAsB,CACjCC,MACoC;AACpC,QAAMC,IACJ,OAAOD,KAAW,YAClBA,MACC,gBAAgBA,KACf,kBAAkBA,KAClB,kBAAkBA,KAClB,UAAUA,KACV,WAAWA,KACTA,IACA,QAEAE,IACJD,IAAUA,GAAS,eAAeD,GAG9B,EAAE,MAAAG,IAAO,WAAW,OAAOC,IAAY,UAAA,IAAcH,KAAW,CAAA,GAEhEI,IAAa,CAACC,MACdL,GAAS,aAAmBA,EAAQ,WAAWK,CAAK,IACpD,OAAOA,KAAU,WAAiBA,IAC/B,KAAK,UAAUA,CAAK,GAGvBC,IAAe,CAACD,MAAkB;AACtC,QAAIL,GAAS,aAAc,QAAOA,EAAQ,aAAaK,CAAK;AAC5D,QAAIA,MAAU;AAEd,UAAI;AACF,eAAO,KAAK,MAAMA,CAAK;AAAA,MAAA,QACjB;AACN,eAAOA;AAAAA,MAAA;AAAA,EACT,GAGIE,IAAqB,CACzBL,GACAG,GACAG,IAA4B,cACzB;AACH,UAAMC,IAAkBC,EAAmBR,CAAI;AAE/C,WAAO,QAAQG,CAAK,EAAE,QAAQ,CAAC,CAACM,GAAKC,CAAK,MAAM;AAC9C,UAAIA,MAAU;AACZ,QAAAH,EAAgB,OAAOE,CAAG;AAAA,WACrB;AACL,cAAME,IAAkBT,IAAaA,EAAWQ,CAAK,IAAI,OAAOA,CAAK;AACrE,QAAAH,EAAgB,IAAIE,GAAKE,CAAe;AAAA,MAAA;AAAA,IAC1C,CACD;AAED,UAAMC,IAAQC,EAAkBN,GAAiBP,CAAI;AACrD,WAAIM,MAAU,aAAW,OAAO,QAAQ,aAAa,CAAA,GAAI,IAAIM,CAAK,GAC9DN,MAAU,UAAQ,OAAO,QAAQ,UAAU,CAAA,GAAI,IAAIM,CAAK,GAC5DE,EAAA,GAEOP;AAAA,EAAA,GAGHQ,IAA2B,CAACC,MAC5B,OAAOA,KAAiB,WACnBD,EAAyB,IAAI,gBAAgBC,CAAY,CAAC,IAG/DA,aAAwB,kBACnB,MAAM,KAAKA,EAAa,QAAA,CAAS,EAAE;AAAA,IACxC,CAACC,GAAK,CAACR,GAAKN,CAAK,OACfc,EAAIR,CAAG,IAAIL,EAAaD,CAAK,GACtBc;AAAA,IAET,CAAA;AAAA,EAAC,IAIED,GAGH,CAACb,GAAOe,CAAQ,IAAIC,EAAgB,MAAM;AAC9C,QAAI,OAAO,SAAW,IAAa,QAAQpB,KAAgB,CAAA;AAE3D,UAAMQ,IAAkBC,EAAmBR,CAAI,GACzCG,IAAQ;AAAA,MACZ,GAAIJ,KAAgBgB,EAAyBhB,CAAY;AAAA,MACzD,GAAGgB,EAAyBR,CAAe;AAAA,IAAA;AAG7C,WAAAF,EAAmBL,GAAMG,GAAOF,CAAS,GAElCE;AAAAA,EAAA,CACR,GAEKiB,IAAM,CAACvB,GAAwBC,MAA2C;AAC9E,UAAMkB,IAAeX;AAAA,MACnBL;AAAA,MACA,EAAE,GAAGG,GAAO,GAAGN,EAAAA;AAAAA,MACfC,GAAS,SAASG;AAAA,IAAA;AAEpB,IAAAiB,EAASH,EAAyBC,CAAY,CAAU;AAAA,EAAA;AAG1D,SAAAK,EAAU,MAAM;AACd,UAAMC,IAAiB,MAAM;AAC3B,YAAMN,IAAeR,EAAmBR,CAAI;AAC5C,MAAAkB,EAASH,EAAyBC,CAAY,CAAU;AAAA,IAAA;AAG1D,kBAAO,iBAAiBO,GAAyBD,CAAc,GAC/D,OAAO,iBAAiB,YAAYA,CAAc,GAC9CtB,MAAS,aAAW,OAAO,iBAAiB,cAAcsB,CAAc,GAErE,MAAM;AACX,aAAO,oBAAoBC,GAAyBD,CAAc,GAClE,OAAO,oBAAoB,YAAYA,CAAc,GACjDtB,MAAS,aAAW,OAAO,oBAAoB,cAAcsB,CAAc;AAAA,IAAA;AAAA,EACjF,GACC,CAACtB,CAAI,CAAC,GAEF;AAAA,IACL,OAAAG;AAAA,IACA,KAAAiB;AAAA,EAAA;AAEJ;"}
@@ -7,10 +7,7 @@ const i = ({
7
7
  const r = { behavior: e };
8
8
  typeof o == "number" && (r.left = o), typeof n == "number" && (r.top = n), window.scrollTo(r);
9
9
  }, w = () => {
10
- const [o, n] = t({
11
- x: typeof window < "u" ? window.scrollX : Number.POSITIVE_INFINITY,
12
- y: typeof window < "u" ? window.scrollY : Number.POSITIVE_INFINITY
13
- });
10
+ const [o, n] = t(() => typeof window > "u" ? { x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY } : { x: window.scrollX, y: window.scrollY });
14
11
  return s(() => {
15
12
  const e = () => n({ x: window.scrollX, y: window.scrollY });
16
13
  return window.addEventListener("scroll", e), window.addEventListener("resize", e), () => {
@@ -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 Sensors\n * @usage low\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,GAaaC,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 * @usage low\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 if (typeof window === 'undefined')\n return { x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY };\n return { x: window.scrollX, y: window.scrollY };\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,GAaaC,IAAkB,MAAM;AACnC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAyB,MAC7C,OAAO,SAAW,MACb,EAAE,GAAG,OAAO,mBAAmB,GAAG,OAAO,kBAAA,IAC3C,EAAE,GAAG,OAAO,SAAS,GAAG,OAAO,QAAA,CACvC;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,13 +1,14 @@
1
1
  import { HookTarget } from '../../utils/helpers';
2
2
  import { StateRef } from '../useRefState/useRefState';
3
3
  /** The use active element return type */
4
- export type UseActiveElementReturn<ActiveElement extends HTMLElement = HTMLElement> = ActiveElement | null;
4
+ export interface UseActiveElementReturn<ActiveElement extends HTMLElement = HTMLElement> {
5
+ value: ActiveElement | null;
6
+ }
5
7
  export interface UseActiveElement {
6
8
  (): UseActiveElementReturn;
7
9
  <Target extends Element, ActiveElement extends HTMLElement = HTMLElement>(target?: never): {
8
10
  ref: StateRef<Target>;
9
- value: UseActiveElementReturn<ActiveElement>;
10
- };
11
+ } & UseActiveElementReturn<ActiveElement>;
11
12
  <ActiveElement extends HTMLElement = HTMLElement>(target: HookTarget): UseActiveElementReturn<ActiveElement>;
12
13
  }
13
14
  /**
@@ -9,7 +9,9 @@ export interface UseAutoScrollOptions {
9
9
  }
10
10
  export interface UseAutoScroll {
11
11
  (target: HookTarget, options?: UseAutoScrollOptions): void;
12
- <Target extends HTMLElement>(options?: UseAutoScrollOptions): StateRef<Target>;
12
+ <Target extends HTMLElement>(options?: UseAutoScrollOptions): {
13
+ ref: StateRef<Target>;
14
+ };
13
15
  }
14
16
  /**
15
17
  * @name useAutoScroll
@@ -28,9 +30,9 @@ export interface UseAutoScroll {
28
30
  * @overload
29
31
  * @template Target
30
32
  * @param {boolean} [options.enabled] Whether auto-scrolling is enabled
31
- * @returns {StateRef<Target>} A React ref to attach to the list element
33
+ * @returns {{ ref: StateRef<Target> }} A React ref to attach to the list element
32
34
  *
33
35
  * @example
34
- * const ref = useAutoScroll();
36
+ * const { ref } = useAutoScroll();
35
37
  */
36
38
  export declare const useAutoScroll: UseAutoScroll;
@@ -2,7 +2,9 @@ import { HookTarget } from '../../utils/helpers';
2
2
  import { StateRef } from '../useRefState/useRefState';
3
3
  export interface UseClickOutside {
4
4
  (target: HookTarget, callback: (event: Event) => void): void;
5
- <Target extends Element>(callback: (event: Event) => void, target?: never): StateRef<Target>;
5
+ <Target extends Element>(callback: (event: Event) => void, target?: never): {
6
+ ref: StateRef<Target>;
7
+ };
6
8
  }
7
9
  /**
8
10
  * @name useClickOutside
@@ -21,10 +23,10 @@ export interface UseClickOutside {
21
23
  * @overload
22
24
  * @template Target The target element(s)
23
25
  * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected
24
- * @returns {StateRef<Target>} A ref to attach to the target element
26
+ * @returns {{ ref: StateRef<Target> }} A ref to attach to the target element
25
27
  *
26
28
  * @example
27
- * const ref = useClickOutside<HTMLDivElement>(() => console.log('click outside'));
29
+ * const { ref } = useClickOutside<HTMLDivElement>(() => console.log('click outside'));
28
30
  *
29
31
  * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useClickOutside.html}
30
32
  */
@@ -9,8 +9,10 @@ export interface UseDoubleClickOptions {
9
9
  onSingleClick?: (event: DoubleClickEvents) => void;
10
10
  }
11
11
  export interface UseDoubleClick {
12
- (target: HookTarget, callback: (event: DoubleClickEvents) => void, options?: UseDoubleClickOptions): boolean;
13
- <Target extends Element>(callback: (event: DoubleClickEvents) => void, options?: UseDoubleClickOptions, target?: never): StateRef<Target>;
12
+ (target: HookTarget, callback: (event: DoubleClickEvents) => void, options?: UseDoubleClickOptions): void;
13
+ <Target extends Element>(callback: (event: DoubleClickEvents) => void, options?: UseDoubleClickOptions, target?: never): {
14
+ ref: StateRef<Target>;
15
+ };
14
16
  }
15
17
  export declare const DEFAULT_THRESHOLD_TIME = 300;
16
18
  /**
@@ -23,7 +25,7 @@ export declare const DEFAULT_THRESHOLD_TIME = 300;
23
25
  * @param {HookTarget} target The target element to be double clicked
24
26
  * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click
25
27
  * @param {UseDoubleClickOptions} [options] The options for the double click
26
- * @returns {boolean} The double clicking state
28
+ * @returns {void} The double clicking state
27
29
  *
28
30
  * @example
29
31
  * useDoubleClick(ref, () => console.log('double clicked'));
@@ -32,10 +34,10 @@ export declare const DEFAULT_THRESHOLD_TIME = 300;
32
34
  * @template Target The target element
33
35
  * @param {(event: DoubleClickEvents) => void} callback The callback function to be invoked on double click
34
36
  * @param {UseDoubleClickOptions} [options] The options for the double click
35
- * @returns {boolean} The double clicking state
37
+ * @returns {{ ref: StateRef<Target> }} The double clicking state
36
38
  *
37
39
  * @example
38
- * const ref = useDoubleClick(() => console.log('double clicked'));
40
+ * const { ref } = useDoubleClick(() => console.log('double clicked'));
39
41
  *
40
42
  * @see {@link https://siberiacancode.github.io/reactuse/functions/hooks/useDoubleClick.html}
41
43
  */
@@ -27,7 +27,7 @@ export interface UseFocusTrap {
27
27
  * @overload
28
28
  * @param {HookTarget} target The target element for focus trap
29
29
  * @param {boolean} [active=true] Whether focus trap is active
30
- * @returns {UseFocusTrapReturn} Object with control methods and state
30
+ * @returns {UseFocusTrapReturn} Object with the focus trap state and methods
31
31
  *
32
32
  * @example
33
33
  * const { active, disable, toggle, enable } = useFocusTrap(ref, true);
@@ -35,7 +35,7 @@ export interface UseFocusTrap {
35
35
  * @overload
36
36
  * @template Target The target element type
37
37
  * @param {boolean} [active=true] Whether focus trap is active
38
- * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls
38
+ * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with the focus trap state and methods
39
39
  *
40
40
  * @example
41
41
  * const { ref, active, disable, toggle, enable } = useFocusTrap(true);
@@ -9,7 +9,12 @@ export interface UseHashOptions {
9
9
  onChange?: (hash: string) => void;
10
10
  }
11
11
  /** The use hash return type */
12
- type UseHashReturn = [string, (value: string) => void];
12
+ interface UseHashReturn {
13
+ /** The hash value */
14
+ value: string;
15
+ /** The function to set the hash value */
16
+ set: (value: string) => void;
17
+ }
13
18
  export interface UseHash {
14
19
  (initialValue?: string, options?: UseHashOptions): UseHashReturn;
15
20
  (options?: UseHashOptions): UseHashReturn;
@@ -31,7 +36,7 @@ export interface UseHash {
31
36
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
32
37
  *
33
38
  * @example
34
- * const [hash, setHash] = useHash("initial");
39
+ * const { value, set } = useHash("initial");
35
40
  *
36
41
  * @overload
37
42
  * @param {string} [initialValue] The initial hash value if no hash exists
@@ -39,7 +44,7 @@ export interface UseHash {
39
44
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
40
45
  *
41
46
  * @example
42
- * const [hash, setHash] = useHash("initial", (newHash) => console.log('callback'));
47
+ * const { value, set } = useHash("initial", (newHash) => console.log('callback'));
43
48
  *
44
49
  * @overload
45
50
  * @param {UseHashOptions} [options] Configuration options
@@ -49,14 +54,14 @@ export interface UseHash {
49
54
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
50
55
  *
51
56
  * @example
52
- * const [hash, setHash] = useHash();
57
+ * const { value, set } = useHash();
53
58
  *
54
59
  * @overload
55
60
  * @param {(hash: string) => void} [callback] Callback function called when hash changes
56
61
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
57
62
  *
58
63
  * @example
59
- * const [hash, setHash] = useHash((newHash) => console.log('callback'));
64
+ * const { value, set } = useHash((newHash) => console.log('callback'));
60
65
  */
61
66
  export declare const useHash: UseHash;
62
67
  export {};
@@ -9,18 +9,20 @@ export interface UseHoverOptions {
9
9
  /** The on leave callback */
10
10
  onLeave?: (event: Event) => void;
11
11
  }
12
+ /** The use hover return type */
12
13
  export interface UseHoverReturn {
14
+ /** The value of the hover */
13
15
  value: boolean;
14
16
  }
15
17
  export interface UseHover {
16
- (target: HookTarget, callback?: (event: Event) => void): boolean;
17
- (target: HookTarget, options?: UseHoverOptions): boolean;
18
- <Target extends Element>(callback?: (event: Event) => void, target?: never): {
18
+ (target: HookTarget, callback?: (event: Event) => void): UseHoverReturn;
19
+ (target: HookTarget, options?: UseHoverOptions): UseHoverReturn;
20
+ <Target extends Element>(callback?: (event: Event) => void, target?: never): UseHoverReturn & {
19
21
  ref: StateRef<Target>;
20
- } & UseHoverReturn;
21
- <Target extends Element>(options?: UseHoverOptions, target?: never): {
22
+ };
23
+ <Target extends Element>(options?: UseHoverOptions, target?: never): UseHoverReturn & {
22
24
  ref: StateRef<Target>;
23
- } & UseHoverReturn;
25
+ };
24
26
  }
25
27
  /**
26
28
  * @name useHover