@siberiacancode/reactuse 0.3.2 → 0.3.4

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 (227) 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/useAudio/useAudio.cjs +1 -1
  4. package/dist/cjs/hooks/useAudio/useAudio.cjs.map +1 -1
  5. package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs +1 -1
  6. package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs.map +1 -1
  7. package/dist/cjs/hooks/useBreakpoints/useBreakpoints.cjs +1 -1
  8. package/dist/cjs/hooks/useBreakpoints/useBreakpoints.cjs.map +1 -1
  9. package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs +1 -1
  10. package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs.map +1 -1
  11. package/dist/cjs/hooks/useCookie/useCookie.cjs +1 -1
  12. package/dist/cjs/hooks/useCookie/useCookie.cjs.map +1 -1
  13. package/dist/cjs/hooks/useCounter/useCounter.cjs +1 -1
  14. package/dist/cjs/hooks/useCounter/useCounter.cjs.map +1 -1
  15. package/dist/cjs/hooks/useCssVar/useCssVar.cjs +1 -1
  16. package/dist/cjs/hooks/useCssVar/useCssVar.cjs.map +1 -1
  17. package/dist/cjs/hooks/useDeviceMotion/useDeviceMotion.cjs +1 -1
  18. package/dist/cjs/hooks/useDeviceMotion/useDeviceMotion.cjs.map +1 -1
  19. package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs +1 -1
  20. package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs.map +1 -1
  21. package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs +1 -1
  22. package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs.map +1 -1
  23. package/dist/cjs/hooks/useDropZone/useDropZone.cjs +1 -1
  24. package/dist/cjs/hooks/useDropZone/useDropZone.cjs.map +1 -1
  25. package/dist/cjs/hooks/useElementSize/useElementSize.cjs +1 -1
  26. package/dist/cjs/hooks/useElementSize/useElementSize.cjs.map +1 -1
  27. package/dist/cjs/hooks/useEventListener/useEventListener.cjs +1 -1
  28. package/dist/cjs/hooks/useEventListener/useEventListener.cjs.map +1 -1
  29. package/dist/cjs/hooks/useFileDialog/useFileDialog.cjs +1 -1
  30. package/dist/cjs/hooks/useFileDialog/useFileDialog.cjs.map +1 -1
  31. package/dist/cjs/hooks/useFocus/useFocus.cjs +1 -1
  32. package/dist/cjs/hooks/useFocus/useFocus.cjs.map +1 -1
  33. package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs +1 -1
  34. package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs.map +1 -1
  35. package/dist/cjs/hooks/useFullscreen/useFullscreen.cjs +1 -1
  36. package/dist/cjs/hooks/useFullscreen/useFullscreen.cjs.map +1 -1
  37. package/dist/cjs/hooks/useHash/useHash.cjs +1 -1
  38. package/dist/cjs/hooks/useHash/useHash.cjs.map +1 -1
  39. package/dist/cjs/hooks/useHotkeys/useHotkeys.cjs +1 -1
  40. package/dist/cjs/hooks/useHotkeys/useHotkeys.cjs.map +1 -1
  41. package/dist/cjs/hooks/useHover/useHover.cjs +1 -1
  42. package/dist/cjs/hooks/useHover/useHover.cjs.map +1 -1
  43. package/dist/cjs/hooks/useInfiniteScroll/useInfiniteScroll.cjs +1 -1
  44. package/dist/cjs/hooks/useInfiniteScroll/useInfiniteScroll.cjs.map +1 -1
  45. package/dist/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs +1 -1
  46. package/dist/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs.map +1 -1
  47. package/dist/cjs/hooks/useInterval/useInterval.cjs +1 -1
  48. package/dist/cjs/hooks/useInterval/useInterval.cjs.map +1 -1
  49. package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs +1 -1
  50. package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs.map +1 -1
  51. package/dist/cjs/hooks/useKeyPressEvent/useKeyPressEvent.cjs +1 -1
  52. package/dist/cjs/hooks/useKeyPressEvent/useKeyPressEvent.cjs.map +1 -1
  53. package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs +1 -1
  54. package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs.map +1 -1
  55. package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs +1 -1
  56. package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs.map +1 -1
  57. package/dist/cjs/hooks/useLockScroll/useLockScroll.cjs +1 -1
  58. package/dist/cjs/hooks/useLockScroll/useLockScroll.cjs.map +1 -1
  59. package/dist/cjs/hooks/useLongPress/useLongPress.cjs +1 -1
  60. package/dist/cjs/hooks/useLongPress/useLongPress.cjs.map +1 -1
  61. package/dist/cjs/hooks/useMeasure/useMeasure.cjs +1 -1
  62. package/dist/cjs/hooks/useMeasure/useMeasure.cjs.map +1 -1
  63. package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs +1 -1
  64. package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs.map +1 -1
  65. package/dist/cjs/hooks/useMouse/useMouse.cjs +1 -1
  66. package/dist/cjs/hooks/useMouse/useMouse.cjs.map +1 -1
  67. package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs +1 -1
  68. package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs.map +1 -1
  69. package/dist/cjs/hooks/useOtpCredential/useOtpCredential.cjs +1 -1
  70. package/dist/cjs/hooks/useOtpCredential/useOtpCredential.cjs.map +1 -1
  71. package/dist/cjs/hooks/usePaint/usePaint.cjs +1 -1
  72. package/dist/cjs/hooks/usePaint/usePaint.cjs.map +1 -1
  73. package/dist/cjs/hooks/useParallax/useParallax.cjs +1 -1
  74. package/dist/cjs/hooks/useParallax/useParallax.cjs.map +1 -1
  75. package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs +1 -1
  76. package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs.map +1 -1
  77. package/dist/cjs/hooks/useRefState/useRefState.cjs +1 -1
  78. package/dist/cjs/hooks/useRefState/useRefState.cjs.map +1 -1
  79. package/dist/cjs/hooks/useResizeObserver/useResizeObserver.cjs +1 -1
  80. package/dist/cjs/hooks/useResizeObserver/useResizeObserver.cjs.map +1 -1
  81. package/dist/cjs/hooks/useRightClick/useRightClick.cjs +1 -1
  82. package/dist/cjs/hooks/useRightClick/useRightClick.cjs.map +1 -1
  83. package/dist/cjs/hooks/useScroll/useScroll.cjs +1 -1
  84. package/dist/cjs/hooks/useScroll/useScroll.cjs.map +1 -1
  85. package/dist/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs +1 -1
  86. package/dist/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs.map +1 -1
  87. package/dist/cjs/hooks/useScrollTo/useScrollTo.cjs +1 -1
  88. package/dist/cjs/hooks/useScrollTo/useScrollTo.cjs.map +1 -1
  89. package/dist/cjs/hooks/useSticky/useSticky.cjs +1 -1
  90. package/dist/cjs/hooks/useSticky/useSticky.cjs.map +1 -1
  91. package/dist/cjs/hooks/useStopwatch/useStopwatch.cjs +1 -1
  92. package/dist/cjs/hooks/useStopwatch/useStopwatch.cjs.map +1 -1
  93. package/dist/cjs/hooks/useStorage/useStorage.cjs +1 -1
  94. package/dist/cjs/hooks/useStorage/useStorage.cjs.map +1 -1
  95. package/dist/cjs/hooks/useTextDirection/useTextDirection.cjs +1 -1
  96. package/dist/cjs/hooks/useTextDirection/useTextDirection.cjs.map +1 -1
  97. package/dist/cjs/hooks/useTextareaAutosize/useTextareaAutosize.cjs +2 -0
  98. package/dist/cjs/hooks/useTextareaAutosize/useTextareaAutosize.cjs.map +1 -0
  99. package/dist/cjs/hooks/useTimer/useTimer.cjs +1 -1
  100. package/dist/cjs/hooks/useTimer/useTimer.cjs.map +1 -1
  101. package/dist/cjs/hooks/useUrlSearchParam/useUrlSearchParam.cjs +1 -1
  102. package/dist/cjs/hooks/useUrlSearchParam/useUrlSearchParam.cjs.map +1 -1
  103. package/dist/cjs/hooks/useUrlSearchParams/useUrlSearchParams.cjs +1 -1
  104. package/dist/cjs/hooks/useUrlSearchParams/useUrlSearchParams.cjs.map +1 -1
  105. package/dist/cjs/hooks/useVisibility/useVisibility.cjs +1 -1
  106. package/dist/cjs/hooks/useVisibility/useVisibility.cjs.map +1 -1
  107. package/dist/cjs/index.cjs +1 -1
  108. package/dist/cjs/utils/helpers/isTarget.cjs +1 -1
  109. package/dist/cjs/utils/helpers/isTarget.cjs.map +1 -1
  110. package/dist/esm/hooks/useActiveElement/useActiveElement.mjs +13 -13
  111. package/dist/esm/hooks/useActiveElement/useActiveElement.mjs.map +1 -1
  112. package/dist/esm/hooks/useAudio/useAudio.mjs +29 -23
  113. package/dist/esm/hooks/useAudio/useAudio.mjs.map +1 -1
  114. package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs +24 -24
  115. package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs.map +1 -1
  116. package/dist/esm/hooks/useBreakpoints/useBreakpoints.mjs +30 -35
  117. package/dist/esm/hooks/useBreakpoints/useBreakpoints.mjs.map +1 -1
  118. package/dist/esm/hooks/useClickOutside/useClickOutside.mjs +15 -14
  119. package/dist/esm/hooks/useClickOutside/useClickOutside.mjs.map +1 -1
  120. package/dist/esm/hooks/useCookie/useCookie.mjs +2 -2
  121. package/dist/esm/hooks/useCookie/useCookie.mjs.map +1 -1
  122. package/dist/esm/hooks/useCounter/useCounter.mjs +2 -2
  123. package/dist/esm/hooks/useCounter/useCounter.mjs.map +1 -1
  124. package/dist/esm/hooks/useCssVar/useCssVar.mjs +8 -8
  125. package/dist/esm/hooks/useCssVar/useCssVar.mjs.map +1 -1
  126. package/dist/esm/hooks/useDeviceMotion/useDeviceMotion.mjs +2 -2
  127. package/dist/esm/hooks/useDeviceMotion/useDeviceMotion.mjs.map +1 -1
  128. package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs +17 -17
  129. package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs.map +1 -1
  130. package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs +14 -14
  131. package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs.map +1 -1
  132. package/dist/esm/hooks/useDropZone/useDropZone.mjs +23 -23
  133. package/dist/esm/hooks/useDropZone/useDropZone.mjs.map +1 -1
  134. package/dist/esm/hooks/useElementSize/useElementSize.mjs +14 -14
  135. package/dist/esm/hooks/useElementSize/useElementSize.mjs.map +1 -1
  136. package/dist/esm/hooks/useEventListener/useEventListener.mjs +14 -14
  137. package/dist/esm/hooks/useEventListener/useEventListener.mjs.map +1 -1
  138. package/dist/esm/hooks/useFileDialog/useFileDialog.mjs +2 -2
  139. package/dist/esm/hooks/useFileDialog/useFileDialog.mjs.map +1 -1
  140. package/dist/esm/hooks/useFocus/useFocus.mjs +20 -20
  141. package/dist/esm/hooks/useFocus/useFocus.mjs.map +1 -1
  142. package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs +21 -21
  143. package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs.map +1 -1
  144. package/dist/esm/hooks/useFullscreen/useFullscreen.mjs +2 -2
  145. package/dist/esm/hooks/useFullscreen/useFullscreen.mjs.map +1 -1
  146. package/dist/esm/hooks/useHash/useHash.mjs +2 -2
  147. package/dist/esm/hooks/useHash/useHash.mjs.map +1 -1
  148. package/dist/esm/hooks/useHotkeys/useHotkeys.mjs +24 -16
  149. package/dist/esm/hooks/useHotkeys/useHotkeys.mjs.map +1 -1
  150. package/dist/esm/hooks/useHover/useHover.mjs +16 -16
  151. package/dist/esm/hooks/useHover/useHover.mjs.map +1 -1
  152. package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs +16 -16
  153. package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs.map +1 -1
  154. package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs +26 -18
  155. package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs.map +1 -1
  156. package/dist/esm/hooks/useInterval/useInterval.mjs +2 -2
  157. package/dist/esm/hooks/useInterval/useInterval.mjs.map +1 -1
  158. package/dist/esm/hooks/useKeyPress/useKeyPress.mjs +15 -15
  159. package/dist/esm/hooks/useKeyPress/useKeyPress.mjs.map +1 -1
  160. package/dist/esm/hooks/useKeyPressEvent/useKeyPressEvent.mjs +22 -15
  161. package/dist/esm/hooks/useKeyPressEvent/useKeyPressEvent.mjs.map +1 -1
  162. package/dist/esm/hooks/useKeyboard/useKeyboard.mjs +10 -10
  163. package/dist/esm/hooks/useKeyboard/useKeyboard.mjs.map +1 -1
  164. package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs +12 -12
  165. package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs.map +1 -1
  166. package/dist/esm/hooks/useLockScroll/useLockScroll.mjs +23 -23
  167. package/dist/esm/hooks/useLockScroll/useLockScroll.mjs.map +1 -1
  168. package/dist/esm/hooks/useLongPress/useLongPress.mjs +16 -16
  169. package/dist/esm/hooks/useLongPress/useLongPress.mjs.map +1 -1
  170. package/dist/esm/hooks/useMeasure/useMeasure.mjs +15 -15
  171. package/dist/esm/hooks/useMeasure/useMeasure.mjs.map +1 -1
  172. package/dist/esm/hooks/useMediaControls/useMediaControls.mjs +28 -28
  173. package/dist/esm/hooks/useMediaControls/useMediaControls.mjs.map +1 -1
  174. package/dist/esm/hooks/useMouse/useMouse.mjs +17 -17
  175. package/dist/esm/hooks/useMouse/useMouse.mjs.map +1 -1
  176. package/dist/esm/hooks/useMutationObserver/useMutationObserver.mjs +17 -16
  177. package/dist/esm/hooks/useMutationObserver/useMutationObserver.mjs.map +1 -1
  178. package/dist/esm/hooks/useOtpCredential/useOtpCredential.mjs +2 -2
  179. package/dist/esm/hooks/useOtpCredential/useOtpCredential.mjs.map +1 -1
  180. package/dist/esm/hooks/usePaint/usePaint.mjs +31 -31
  181. package/dist/esm/hooks/usePaint/usePaint.mjs.map +1 -1
  182. package/dist/esm/hooks/useParallax/useParallax.mjs +24 -23
  183. package/dist/esm/hooks/useParallax/useParallax.mjs.map +1 -1
  184. package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs +25 -25
  185. package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs.map +1 -1
  186. package/dist/esm/hooks/useRefState/useRefState.mjs +1 -0
  187. package/dist/esm/hooks/useRefState/useRefState.mjs.map +1 -1
  188. package/dist/esm/hooks/useResizeObserver/useResizeObserver.mjs +16 -16
  189. package/dist/esm/hooks/useResizeObserver/useResizeObserver.mjs.map +1 -1
  190. package/dist/esm/hooks/useRightClick/useRightClick.mjs +14 -14
  191. package/dist/esm/hooks/useRightClick/useRightClick.mjs.map +1 -1
  192. package/dist/esm/hooks/useScroll/useScroll.mjs +22 -22
  193. package/dist/esm/hooks/useScroll/useScroll.mjs.map +1 -1
  194. package/dist/esm/hooks/useScrollIntoView/useScrollIntoView.mjs +16 -16
  195. package/dist/esm/hooks/useScrollIntoView/useScrollIntoView.mjs.map +1 -1
  196. package/dist/esm/hooks/useScrollTo/useScrollTo.mjs +10 -10
  197. package/dist/esm/hooks/useScrollTo/useScrollTo.mjs.map +1 -1
  198. package/dist/esm/hooks/useSticky/useSticky.mjs +17 -17
  199. package/dist/esm/hooks/useSticky/useSticky.mjs.map +1 -1
  200. package/dist/esm/hooks/useStopwatch/useStopwatch.mjs +4 -4
  201. package/dist/esm/hooks/useStopwatch/useStopwatch.mjs.map +1 -1
  202. package/dist/esm/hooks/useStorage/useStorage.mjs +2 -2
  203. package/dist/esm/hooks/useStorage/useStorage.mjs.map +1 -1
  204. package/dist/esm/hooks/useTextDirection/useTextDirection.mjs +12 -12
  205. package/dist/esm/hooks/useTextDirection/useTextDirection.mjs.map +1 -1
  206. package/dist/esm/hooks/useTextareaAutosize/useTextareaAutosize.mjs +58 -0
  207. package/dist/esm/hooks/useTextareaAutosize/useTextareaAutosize.mjs.map +1 -0
  208. package/dist/esm/hooks/useTimer/useTimer.mjs +3 -3
  209. package/dist/esm/hooks/useTimer/useTimer.mjs.map +1 -1
  210. package/dist/esm/hooks/useUrlSearchParam/useUrlSearchParam.mjs +2 -2
  211. package/dist/esm/hooks/useUrlSearchParam/useUrlSearchParam.mjs.map +1 -1
  212. package/dist/esm/hooks/useUrlSearchParams/useUrlSearchParams.mjs +2 -2
  213. package/dist/esm/hooks/useUrlSearchParams/useUrlSearchParams.mjs.map +1 -1
  214. package/dist/esm/hooks/useVisibility/useVisibility.mjs +25 -17
  215. package/dist/esm/hooks/useVisibility/useVisibility.mjs.map +1 -1
  216. package/dist/esm/index.mjs +255 -251
  217. package/dist/esm/index.mjs.map +1 -1
  218. package/dist/esm/utils/helpers/isTarget.mjs +10 -8
  219. package/dist/esm/utils/helpers/isTarget.mjs.map +1 -1
  220. package/dist/types/hooks/elements.d.ts +1 -0
  221. package/dist/types/hooks/useBreakpoints/useBreakpoints.d.ts +1 -11
  222. package/dist/types/hooks/useClickOutside/useClickOutside.d.ts +1 -1
  223. package/dist/types/hooks/useHover/useHover.d.ts +6 -6
  224. package/dist/types/hooks/useRefState/useRefState.d.ts +1 -0
  225. package/dist/types/hooks/useTextareaAutosize/useTextareaAutosize.d.ts +60 -0
  226. package/dist/types/utils/helpers/isTarget.d.ts +9 -1
  227. package/package.json +12 -12
@@ -1 +1 @@
1
- {"version":3,"file":"useDropZone.cjs","sources":["../../../../src/hooks/useDropZone/useDropZone.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type DropZoneDataTypes = ((types: string[]) => boolean) | string[];\n\nexport interface UseDropZoneOptions {\n /** The data types for drop zone */\n dataTypes?: DropZoneDataTypes;\n /** The multiple mode for drop zone */\n multiple?: boolean;\n /** The on drop callback */\n onDrop?: (files: File[] | null, event: DragEvent) => void;\n /** The on enter callback */\n onEnter?: (event: DragEvent) => void;\n /** The on leave callback */\n onLeave?: (event: DragEvent) => void;\n /** The on over callback */\n onOver?: (event: DragEvent) => void;\n}\n\nexport interface UseDropZoneReturn {\n /** The files that was dropped in drop zone */\n files: File[] | null;\n /** The over drop zone status */\n overed: boolean;\n}\n\nexport interface UseDropZone {\n (\n target: HookTarget,\n callback?: (files: File[] | null, event: DragEvent) => void\n ): UseDropZoneReturn;\n\n <Target extends Element>(\n callback?: (files: File[] | null, event: DragEvent) => void,\n target?: never\n ): UseDropZoneReturn & {\n ref: StateRef<Target>;\n };\n\n (target: HookTarget, options?: UseDropZoneOptions): UseDropZoneReturn;\n\n <Target extends Element>(\n options?: UseDropZoneOptions,\n target?: never\n ): UseDropZoneReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useDropZone\n * @description - Hook that provides drop zone functionality\n * @category Elements\n * @usage medium\n\n * @overload\n * @template Target The target element\n * @param {Target} target The target element drop zone's\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn} The object with drop zone states\n *\n * @example\n * const { overed, files } = useDropZone(ref, options);\n *\n * @overload\n * @param {Target} target The target element drop zone's\n * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn} The object with drop zone states\n *\n * @example\n * const { overed, files } = useDropZone(ref, () => console.log('callback'));\n *\n * @overload\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n *\n * @example\n * const { ref, overed, files } = useDropZone(options);\n *\n * @overload\n * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n *\n * @example\n * const { ref, overed, files } = useDropZone(() => console.log('callback'));\n */\n\nexport const useDropZone = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onDrop: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onDrop: params[0] }\n ) as UseDropZoneOptions;\n\n const internalRef = useRefState<Element>();\n\n const counterRef = useRef(0);\n const [files, setFiles] = useState<File[] | null>(null);\n const [overed, setOvered] = useState(false);\n\n const dataTypes = options.dataTypes;\n\n const getFiles = (event: DragEvent) => {\n if (!event.dataTransfer) return null;\n const list = Array.from(event.dataTransfer.files);\n if (options.multiple) return list;\n if (!list.length) return null;\n return [list[0]];\n };\n\n const checkDataTypes = (types: string[]) => {\n if (!dataTypes) return true;\n if (typeof dataTypes === 'function') return dataTypes(types);\n if (!dataTypes.length) return true;\n if (!types.length) return false;\n\n return types.every((type) => dataTypes.some((dataType) => type.includes(dataType)));\n };\n\n const checkValidity = (items: DataTransferItemList) => {\n const types = Array.from(items).map((item) => item.type);\n const dataTypesValid = checkDataTypes(types);\n const multipleFilesValid = options.multiple || items.length <= 1;\n\n return dataTypesValid && multipleFilesValid;\n };\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n\n if (!element) return;\n\n const onEvent = (event: DragEvent, type: 'drop' | 'enter' | 'leave' | 'over') => {\n if (!event.dataTransfer) return;\n\n const isValid = checkValidity(event.dataTransfer.items);\n if (!isValid) {\n event.dataTransfer.dropEffect = 'none';\n return;\n }\n\n event.preventDefault();\n event.dataTransfer.dropEffect = 'copy';\n\n const currentFiles = getFiles(event);\n\n if (type === 'drop') {\n counterRef.current = 0;\n setOvered(false);\n setFiles(currentFiles);\n options.onDrop?.(currentFiles, event);\n return;\n }\n\n if (type === 'enter') {\n counterRef.current += 1;\n setOvered(true);\n options.onEnter?.(event);\n return;\n }\n\n if (type === 'leave') {\n counterRef.current -= 1;\n if (counterRef.current !== 0) return;\n setOvered(false);\n options.onLeave?.(event);\n return;\n }\n\n if (type === 'over') options.onOver?.(event);\n };\n\n const onDrop = ((event: DragEvent) => onEvent(event, 'drop')) as EventListener;\n const onDragOver = ((event: DragEvent) => onEvent(event, 'over')) as EventListener;\n const onDragEnter = ((event: DragEvent) => onEvent(event, 'enter')) as EventListener;\n const onDragLeave = ((event: DragEvent) => onEvent(event, 'leave')) as EventListener;\n\n element.addEventListener('dragenter', onDragEnter);\n element.addEventListener('dragover', onDragOver);\n element.addEventListener('dragleave', onDragLeave);\n element.addEventListener('drop', onDrop);\n\n return () => {\n element.removeEventListener('dragenter', onDragEnter);\n element.removeEventListener('dragover', onDragOver);\n element.removeEventListener('dragleave', onDragLeave);\n element.removeEventListener('drop', onDrop);\n };\n }, [target, internalRef.current]);\n\n if (target) return { overed, files };\n return { ref: internalRef, overed, files };\n}) as UseDropZone;\n"],"names":["useDropZone","params","target","isTarget","options","internalRef","useRefState","counterRef","useRef","files","setFiles","useState","overed","setOvered","dataTypes","getFiles","event","list","checkDataTypes","types","type","dataType","checkValidity","items","item","dataTypesValid","multipleFilesValid","useEffect","element","onEvent","currentFiles","onDrop","onDragOver","onDragEnter","onDragLeave"],"mappings":"mMAyGaA,EAAe,IAAIC,IAAkB,CAChD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,OAAQA,EAAO,CAAC,CAAA,EACpB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,OAAQA,EAAO,CAAC,CAAA,EAGpBI,EAAcC,EAAAA,YAAA,EAEdC,EAAaC,EAAAA,OAAO,CAAC,EACrB,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAwB,IAAI,EAChD,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EAEpCG,EAAYV,EAAQ,UAEpBW,EAAYC,GAAqB,CACrC,GAAI,CAACA,EAAM,aAAc,OAAO,KAChC,MAAMC,EAAO,MAAM,KAAKD,EAAM,aAAa,KAAK,EAChD,OAAIZ,EAAQ,SAAiBa,EACxBA,EAAK,OACH,CAACA,EAAK,CAAC,CAAC,EADU,IACV,EAGXC,EAAkBC,GACjBL,EACD,OAAOA,GAAc,WAAmBA,EAAUK,CAAK,EACtDL,EAAU,OACVK,EAAM,OAEJA,EAAM,MAAOC,GAASN,EAAU,KAAMO,GAAaD,EAAK,SAASC,CAAQ,CAAC,CAAC,EAFxD,GADI,GAFP,GAQnBC,EAAiBC,GAAgC,CACrD,MAAMJ,EAAQ,MAAM,KAAKI,CAAK,EAAE,IAAKC,GAASA,EAAK,IAAI,EACjDC,EAAiBP,EAAeC,CAAK,EACrCO,EAAqBtB,EAAQ,UAAYmB,EAAM,QAAU,EAE/D,OAAOE,GAAkBC,CAAA,EAoE3B,OAjEAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACzB,GAAU,CAACG,EAAY,MAAO,OAEnC,MAAMuB,EAAU1B,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,QAEnE,GAAI,CAACuB,EAAS,OAEd,MAAMC,EAAU,CAACb,EAAkBI,IAA8C,CAC/E,GAAI,CAACJ,EAAM,aAAc,OAGzB,GAAI,CADYM,EAAcN,EAAM,aAAa,KAAK,EACxC,CACZA,EAAM,aAAa,WAAa,OAChC,MAAA,CAGFA,EAAM,eAAA,EACNA,EAAM,aAAa,WAAa,OAEhC,MAAMc,EAAef,EAASC,CAAK,EAEnC,GAAII,IAAS,OAAQ,CACnBb,EAAW,QAAU,EACrBM,EAAU,EAAK,EACfH,EAASoB,CAAY,EACrB1B,EAAQ,SAAS0B,EAAcd,CAAK,EACpC,MAAA,CAGF,GAAII,IAAS,QAAS,CACpBb,EAAW,SAAW,EACtBM,EAAU,EAAI,EACdT,EAAQ,UAAUY,CAAK,EACvB,MAAA,CAGF,GAAII,IAAS,QAAS,CAEpB,GADAb,EAAW,SAAW,EAClBA,EAAW,UAAY,EAAG,OAC9BM,EAAU,EAAK,EACfT,EAAQ,UAAUY,CAAK,EACvB,MAAA,CAGEI,IAAS,QAAQhB,EAAQ,SAASY,CAAK,CAAA,EAGvCe,EAAWf,GAAqBa,EAAQb,EAAO,MAAM,EACrDgB,EAAehB,GAAqBa,EAAQb,EAAO,MAAM,EACzDiB,EAAgBjB,GAAqBa,EAAQb,EAAO,OAAO,EAC3DkB,EAAgBlB,GAAqBa,EAAQb,EAAO,OAAO,EAEjE,OAAAY,EAAQ,iBAAiB,YAAaK,CAAW,EACjDL,EAAQ,iBAAiB,WAAYI,CAAU,EAC/CJ,EAAQ,iBAAiB,YAAaM,CAAW,EACjDN,EAAQ,iBAAiB,OAAQG,CAAM,EAEhC,IAAM,CACXH,EAAQ,oBAAoB,YAAaK,CAAW,EACpDL,EAAQ,oBAAoB,WAAYI,CAAU,EAClDJ,EAAQ,oBAAoB,YAAaM,CAAW,EACpDN,EAAQ,oBAAoB,OAAQG,CAAM,CAAA,CAC5C,EACC,CAAC7B,EAAQG,EAAY,OAAO,CAAC,EAE5BH,EAAe,CAAE,OAAAU,EAAQ,MAAAH,CAAA,EACtB,CAAE,IAAKJ,EAAa,OAAAO,EAAQ,MAAAH,CAAA,CACrC"}
1
+ {"version":3,"file":"useDropZone.cjs","sources":["../../../../src/hooks/useDropZone/useDropZone.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type DropZoneDataTypes = ((types: string[]) => boolean) | string[];\n\nexport interface UseDropZoneOptions {\n /** The data types for drop zone */\n dataTypes?: DropZoneDataTypes;\n /** The multiple mode for drop zone */\n multiple?: boolean;\n /** The on drop callback */\n onDrop?: (files: File[] | null, event: DragEvent) => void;\n /** The on enter callback */\n onEnter?: (event: DragEvent) => void;\n /** The on leave callback */\n onLeave?: (event: DragEvent) => void;\n /** The on over callback */\n onOver?: (event: DragEvent) => void;\n}\n\nexport interface UseDropZoneReturn {\n /** The files that was dropped in drop zone */\n files: File[] | null;\n /** The over drop zone status */\n overed: boolean;\n}\n\nexport interface UseDropZone {\n (\n target: HookTarget,\n callback?: (files: File[] | null, event: DragEvent) => void\n ): UseDropZoneReturn;\n\n <Target extends Element>(\n callback?: (files: File[] | null, event: DragEvent) => void,\n target?: never\n ): UseDropZoneReturn & {\n ref: StateRef<Target>;\n };\n\n (target: HookTarget, options?: UseDropZoneOptions): UseDropZoneReturn;\n\n <Target extends Element>(\n options?: UseDropZoneOptions,\n target?: never\n ): UseDropZoneReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useDropZone\n * @description - Hook that provides drop zone functionality\n * @category Elements\n * @usage medium\n\n * @overload\n * @template Target The target element\n * @param {Target} target The target element drop zone's\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn} The object with drop zone states\n *\n * @example\n * const { overed, files } = useDropZone(ref, options);\n *\n * @overload\n * @param {Target} target The target element drop zone's\n * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn} The object with drop zone states\n *\n * @example\n * const { overed, files } = useDropZone(ref, () => console.log('callback'));\n *\n * @overload\n * @param {DataTypes} [options.dataTypes] The data types\n * @param {boolean} [options.multiple] The multiple mode\n * @param {(files: File[] | null, event: DragEvent) => void} [options.onDrop] The on drop callback function\n * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function\n * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function\n * @param {(event: DragEvent) => void} [options.onOver] The on over callback function\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n *\n * @example\n * const { ref, overed, files } = useDropZone(options);\n *\n * @overload\n * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop\n * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref\n *\n * @example\n * const { ref, overed, files } = useDropZone(() => console.log('callback'));\n */\n\nexport const useDropZone = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onDrop: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onDrop: params[0] }\n ) as UseDropZoneOptions;\n\n const internalRef = useRefState<Element>();\n\n const counterRef = useRef(0);\n const [files, setFiles] = useState<File[] | null>(null);\n const [overed, setOvered] = useState(false);\n\n const dataTypes = options.dataTypes;\n\n const getFiles = (event: DragEvent) => {\n if (!event.dataTransfer) return null;\n const list = Array.from(event.dataTransfer.files);\n if (options.multiple) return list;\n if (!list.length) return null;\n return [list[0]];\n };\n\n const checkDataTypes = (types: string[]) => {\n if (!dataTypes) return true;\n if (typeof dataTypes === 'function') return dataTypes(types);\n if (!dataTypes.length) return true;\n if (!types.length) return false;\n\n return types.every((type) => dataTypes.some((dataType) => type.includes(dataType)));\n };\n\n const checkValidity = (items: DataTransferItemList) => {\n const types = Array.from(items).map((item) => item.type);\n const dataTypesValid = checkDataTypes(types);\n const multipleFilesValid = options.multiple || items.length <= 1;\n\n return dataTypesValid && multipleFilesValid;\n };\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n\n if (!element) return;\n\n const onEvent = (event: DragEvent, type: 'drop' | 'enter' | 'leave' | 'over') => {\n if (!event.dataTransfer) return;\n\n const isValid = checkValidity(event.dataTransfer.items);\n if (!isValid) {\n event.dataTransfer.dropEffect = 'none';\n return;\n }\n\n event.preventDefault();\n event.dataTransfer.dropEffect = 'copy';\n\n const currentFiles = getFiles(event);\n\n if (type === 'drop') {\n counterRef.current = 0;\n setOvered(false);\n setFiles(currentFiles);\n options.onDrop?.(currentFiles, event);\n return;\n }\n\n if (type === 'enter') {\n counterRef.current += 1;\n setOvered(true);\n options.onEnter?.(event);\n return;\n }\n\n if (type === 'leave') {\n counterRef.current -= 1;\n if (counterRef.current !== 0) return;\n setOvered(false);\n options.onLeave?.(event);\n return;\n }\n\n if (type === 'over') options.onOver?.(event);\n };\n\n const onDrop = ((event: DragEvent) => onEvent(event, 'drop')) as EventListener;\n const onDragOver = ((event: DragEvent) => onEvent(event, 'over')) as EventListener;\n const onDragEnter = ((event: DragEvent) => onEvent(event, 'enter')) as EventListener;\n const onDragLeave = ((event: DragEvent) => onEvent(event, 'leave')) as EventListener;\n\n element.addEventListener('dragenter', onDragEnter);\n element.addEventListener('dragover', onDragOver);\n element.addEventListener('dragleave', onDragLeave);\n element.addEventListener('drop', onDrop);\n\n return () => {\n element.removeEventListener('dragenter', onDragEnter);\n element.removeEventListener('dragover', onDragOver);\n element.removeEventListener('dragleave', onDragLeave);\n element.removeEventListener('drop', onDrop);\n };\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n if (target) return { overed, files };\n return { ref: internalRef, overed, files };\n}) as UseDropZone;\n"],"names":["useDropZone","params","target","isTarget","options","internalRef","useRefState","counterRef","useRef","files","setFiles","useState","overed","setOvered","dataTypes","getFiles","event","list","checkDataTypes","types","type","dataType","checkValidity","items","item","dataTypesValid","multipleFilesValid","useEffect","element","onEvent","currentFiles","onDrop","onDragOver","onDragEnter","onDragLeave"],"mappings":"mMAyGaA,GAAe,IAAIC,IAAkB,CAChD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,OAAQA,EAAO,CAAC,CAAA,EACpB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,OAAQA,EAAO,CAAC,CAAA,EAGpBI,EAAcC,EAAAA,YAAA,EAEdC,EAAaC,EAAAA,OAAO,CAAC,EACrB,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAwB,IAAI,EAChD,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EAEpCG,EAAYV,EAAQ,UAEpBW,EAAYC,GAAqB,CACrC,GAAI,CAACA,EAAM,aAAc,OAAO,KAChC,MAAMC,EAAO,MAAM,KAAKD,EAAM,aAAa,KAAK,EAChD,OAAIZ,EAAQ,SAAiBa,EACxBA,EAAK,OACH,CAACA,EAAK,CAAC,CAAC,EADU,IACV,EAGXC,EAAkBC,GACjBL,EACD,OAAOA,GAAc,WAAmBA,EAAUK,CAAK,EACtDL,EAAU,OACVK,EAAM,OAEJA,EAAM,MAAOC,GAASN,EAAU,KAAMO,GAAaD,EAAK,SAASC,CAAQ,CAAC,CAAC,EAFxD,GADI,GAFP,GAQnBC,EAAiBC,GAAgC,CACrD,MAAMJ,EAAQ,MAAM,KAAKI,CAAK,EAAE,IAAKC,GAASA,EAAK,IAAI,EACjDC,EAAiBP,EAAeC,CAAK,EACrCO,EAAqBtB,EAAQ,UAAYmB,EAAM,QAAU,EAE/D,OAAOE,GAAkBC,CAAA,EAoE3B,OAjEAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACzB,GAAU,CAACG,EAAY,MAAO,OAEnC,MAAMuB,EAAU1B,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,QAEnE,GAAI,CAACuB,EAAS,OAEd,MAAMC,EAAU,CAACb,EAAkBI,IAA8C,CAC/E,GAAI,CAACJ,EAAM,aAAc,OAGzB,GAAI,CADYM,EAAcN,EAAM,aAAa,KAAK,EACxC,CACZA,EAAM,aAAa,WAAa,OAChC,MAAA,CAGFA,EAAM,eAAA,EACNA,EAAM,aAAa,WAAa,OAEhC,MAAMc,EAAef,EAASC,CAAK,EAEnC,GAAII,IAAS,OAAQ,CACnBb,EAAW,QAAU,EACrBM,EAAU,EAAK,EACfH,EAASoB,CAAY,EACrB1B,EAAQ,SAAS0B,EAAcd,CAAK,EACpC,MAAA,CAGF,GAAII,IAAS,QAAS,CACpBb,EAAW,SAAW,EACtBM,EAAU,EAAI,EACdT,EAAQ,UAAUY,CAAK,EACvB,MAAA,CAGF,GAAII,IAAS,QAAS,CAEpB,GADAb,EAAW,SAAW,EAClBA,EAAW,UAAY,EAAG,OAC9BM,EAAU,EAAK,EACfT,EAAQ,UAAUY,CAAK,EACvB,MAAA,CAGEI,IAAS,QAAQhB,EAAQ,SAASY,CAAK,CAAA,EAGvCe,GAAWf,GAAqBa,EAAQb,EAAO,MAAM,GACrDgB,GAAehB,GAAqBa,EAAQb,EAAO,MAAM,GACzDiB,GAAgBjB,GAAqBa,EAAQb,EAAO,OAAO,GAC3DkB,GAAgBlB,GAAqBa,EAAQb,EAAO,OAAO,GAEjE,OAAAY,EAAQ,iBAAiB,YAAaK,CAAW,EACjDL,EAAQ,iBAAiB,WAAYI,CAAU,EAC/CJ,EAAQ,iBAAiB,YAAaM,CAAW,EACjDN,EAAQ,iBAAiB,OAAQG,CAAM,EAEhC,IAAM,CACXH,EAAQ,oBAAoB,YAAaK,CAAW,EACpDL,EAAQ,oBAAoB,WAAYI,CAAU,EAClDJ,EAAQ,oBAAoB,YAAaM,CAAW,EACpDN,EAAQ,oBAAoB,OAAQG,CAAM,CAAA,CAC5C,EACC,CAAC7B,EAAQG,EAAY,MAAOF,EAAAA,SAAS,YAAYD,CAAM,CAAC,CAAC,EAExDA,EAAe,CAAE,OAAAU,EAAQ,MAAAH,CAAA,EACtB,CAAE,IAAKJ,EAAa,OAAAO,EAAQ,MAAAH,CAAA,CACrC"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),l=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),f=require("../useRefState/useRefState.cjs"),d=require("../../utils/helpers/isTarget.cjs"),S=(...o)=>{const e=o[0],[n,i]=a.useState({width:0,height:0}),r=f.useRefState();return l.useIsomorphicLayoutEffect(()=>{const t=e?d.isTarget.getElement(e):r.current;if(!t)return;const{width:u,height:c}=t.getBoundingClientRect();i({width:u,height:c});const s=new ResizeObserver(()=>{const{width:h,height:g}=t.getBoundingClientRect();i({width:h,height:g})});return s.observe(t),()=>{s.disconnect()}},[r.current,e]),e?{value:n}:{ref:r,value:n}};exports.useElementSize=S;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),l=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),d=require("../useRefState/useRefState.cjs"),o=require("../../utils/helpers/isTarget.cjs"),S=((...u)=>{const e=u[0],[i,n]=f.useState({width:0,height:0}),r=d.useRefState();return l.useIsomorphicLayoutEffect(()=>{const t=e?o.isTarget.getElement(e):r.current;if(!t)return;const{width:c,height:a}=t.getBoundingClientRect();n({width:c,height:a});const s=new ResizeObserver(()=>{const{width:g,height:h}=t.getBoundingClientRect();n({width:g,height:h})});return s.observe(t),()=>{s.disconnect()}},[r.state,e,o.isTarget.getRefState(e)]),e?{value:i}:{ref:r,value:i}});exports.useElementSize=S;
2
2
  //# sourceMappingURL=useElementSize.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useElementSize.cjs","sources":["../../../../src/hooks/useElementSize/useElementSize.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The element size value type */\nexport interface UseElementSizeValue {\n /** The element's height */\n height: number;\n /** The element's width */\n width: number;\n}\n\n/** The use element size return type */\nexport interface UseElementSizeReturn {\n value: UseElementSizeValue;\n}\n\nexport interface UseElementSize {\n (target: HookTarget): UseElementSizeReturn;\n\n <Target extends Element>(\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseElementSizeReturn;\n}\n\n/**\n * @name useElementSize\n * @description - Hook that observes and returns the width and height of element\n * @category Elements\n * @usage low\n\n * @overload\n * @param {HookTarget} target The target element to observe\n * @returns {UseElementSizeReturn} An object containing the current width and height of the element\n *\n * @example\n * const { value } = useElementSize(ref);\n *\n * @overload\n * @returns { { ref: StateRef<Target> } & UseElementSizeReturn } An object containing the current width and height of the element\n *\n * @example\n * const { ref, value } = useElementSize();\n */\nexport const useElementSize = ((...params: any[]) => {\n const target = params[0] as HookTarget | undefined;\n const [size, setSize] = useState({ width: 0, height: 0 });\n const internalRef = useRefState<Element>();\n\n useIsomorphicLayoutEffect(() => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const { width, height } = element.getBoundingClientRect();\n setSize({\n width,\n height\n });\n\n const observer = new ResizeObserver(() => {\n const { width, height } = element.getBoundingClientRect();\n setSize({ width, height });\n });\n\n observer.observe(element);\n\n return () => {\n observer.disconnect();\n };\n }, [internalRef.current, target]);\n\n if (target) return { value: size };\n return {\n ref: internalRef,\n value: size\n };\n}) as UseElementSize;\n"],"names":["useElementSize","params","target","size","setSize","useState","internalRef","useRefState","useIsomorphicLayoutEffect","element","isTarget","width","height","observer"],"mappings":"2QAqDaA,EAAkB,IAAIC,IAAkB,CACnD,MAAMC,EAASD,EAAO,CAAC,EACjB,CAACE,EAAMC,CAAO,EAAIC,EAAAA,SAAS,CAAE,MAAO,EAAG,OAAQ,EAAG,EAClDC,EAAcC,EAAAA,YAAA,EAyBpB,OAvBAC,EAAAA,0BAA0B,IAAM,CAC9B,MAAMC,EAAWP,EAASQ,EAAAA,SAAS,WAAWR,CAAM,EAAII,EAAY,QAEpE,GAAI,CAACG,EAAS,OAEd,KAAM,CAAE,MAAAE,EAAO,OAAAC,GAAWH,EAAQ,sBAAA,EAClCL,EAAQ,CACN,MAAAO,EACA,OAAAC,CAAA,CACD,EAED,MAAMC,EAAW,IAAI,eAAe,IAAM,CACxC,KAAM,CAAE,MAAAF,EAAO,OAAAC,CAAAA,EAAWH,EAAQ,sBAAA,EAClCL,EAAQ,CAAE,MAAAO,EAAO,OAAAC,EAAQ,CAAA,CAC1B,EAED,OAAAC,EAAS,QAAQJ,CAAO,EAEjB,IAAM,CACXI,EAAS,WAAA,CAAW,CACtB,EACC,CAACP,EAAY,QAASJ,CAAM,CAAC,EAE5BA,EAAe,CAAE,MAAOC,CAAA,EACrB,CACL,IAAKG,EACL,MAAOH,CAAA,CAEX"}
1
+ {"version":3,"file":"useElementSize.cjs","sources":["../../../../src/hooks/useElementSize/useElementSize.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The element size value type */\nexport interface UseElementSizeValue {\n /** The element's height */\n height: number;\n /** The element's width */\n width: number;\n}\n\n/** The use element size return type */\nexport interface UseElementSizeReturn {\n value: UseElementSizeValue;\n}\n\nexport interface UseElementSize {\n (target: HookTarget): UseElementSizeReturn;\n\n <Target extends Element>(\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseElementSizeReturn;\n}\n\n/**\n * @name useElementSize\n * @description - Hook that observes and returns the width and height of element\n * @category Elements\n * @usage low\n\n * @overload\n * @param {HookTarget} target The target element to observe\n * @returns {UseElementSizeReturn} An object containing the current width and height of the element\n *\n * @example\n * const { value } = useElementSize(ref);\n *\n * @overload\n * @returns { { ref: StateRef<Target> } & UseElementSizeReturn } An object containing the current width and height of the element\n *\n * @example\n * const { ref, value } = useElementSize();\n */\nexport const useElementSize = ((...params: any[]) => {\n const target = params[0] as HookTarget | undefined;\n const [size, setSize] = useState({ width: 0, height: 0 });\n const internalRef = useRefState<Element>();\n\n useIsomorphicLayoutEffect(() => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const { width, height } = element.getBoundingClientRect();\n setSize({\n width,\n height\n });\n\n const observer = new ResizeObserver(() => {\n const { width, height } = element.getBoundingClientRect();\n setSize({ width, height });\n });\n\n observer.observe(element);\n\n return () => {\n observer.disconnect();\n };\n }, [internalRef.state, target, isTarget.getRefState(target)]);\n\n if (target) return { value: size };\n return {\n ref: internalRef,\n value: size\n };\n}) as UseElementSize;\n"],"names":["useElementSize","params","target","size","setSize","useState","internalRef","useRefState","useIsomorphicLayoutEffect","element","isTarget","width","height","observer"],"mappings":"2QAqDaA,GAAkB,IAAIC,IAAkB,CACnD,MAAMC,EAASD,EAAO,CAAC,EACjB,CAACE,EAAMC,CAAO,EAAIC,EAAAA,SAAS,CAAE,MAAO,EAAG,OAAQ,EAAG,EAClDC,EAAcC,EAAAA,YAAA,EAyBpB,OAvBAC,EAAAA,0BAA0B,IAAM,CAC9B,MAAMC,EAAWP,EAASQ,EAAAA,SAAS,WAAWR,CAAM,EAAII,EAAY,QAEpE,GAAI,CAACG,EAAS,OAEd,KAAM,CAAE,MAAAE,EAAO,OAAAC,GAAWH,EAAQ,sBAAA,EAClCL,EAAQ,CACN,MAAAO,EACA,OAAAC,CAAA,CACD,EAED,MAAMC,EAAW,IAAI,eAAe,IAAM,CACxC,KAAM,CAAE,MAAAF,EAAO,OAAAC,CAAAA,EAAWH,EAAQ,sBAAA,EAClCL,EAAQ,CAAE,MAAAO,EAAO,OAAAC,EAAQ,CAAA,CAC1B,EAED,OAAAC,EAAS,QAAQJ,CAAO,EAEjB,IAAM,CACXI,EAAS,WAAA,CAAW,CACtB,EACC,CAACP,EAAY,MAAOJ,EAAQQ,EAAAA,SAAS,YAAYR,CAAM,CAAC,CAAC,EAExDA,EAAe,CAAE,MAAOC,CAAA,EACrB,CACL,IAAKG,EACL,MAAOH,CAAA,CAEX"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),R=require("../useRefState/useRefState.cjs"),d=require("../../utils/helpers/isTarget.cjs"),E=(...e)=>{const t=d.isTarget(e[0])?e[0]:void 0,s=t?e[1]:e[0],o=t?e[2]:e[1],n=t?e[3]:e[2],c=n?.enabled??!0,r=R.useRefState(),u=i.useRef(o);u.current=o;const v=i.useRef(n);if(v.current=n,i.useEffect(()=>{if(!c||!t&&!r.state)return;const f=(t?d.isTarget.getElement(t):r.current)??window,l=g=>u.current(g);return f.addEventListener(s,l,n),()=>{f.removeEventListener(s,l,n)}},[t,r.state,s,c]),!t)return r};exports.useEventListener=E;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),R=require("../useRefState/useRefState.cjs"),o=require("../../utils/helpers/isTarget.cjs"),E=((...t)=>{const e=o.isTarget(t[0])?t[0]:void 0,s=e?t[1]:t[0],c=e?t[2]:t[1],n=e?t[3]:t[2],u=n?.enabled??!0,r=R.useRefState(),f=i.useRef(c);f.current=c;const d=i.useRef(n);if(d.current=n,i.useEffect(()=>{if(!u||!e&&!r.state)return;const l=(e?o.isTarget.getElement(e):r.current)??window,g=v=>f.current(v);return l.addEventListener(s,g,n),()=>{l.removeEventListener(s,g,n)}},[e,r.state,o.isTarget.getRefState(e),s,u]),!e)return r});exports.useEventListener=E;
2
2
  //# sourceMappingURL=useEventListener.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useEventListener.cjs","sources":["../../../../src/hooks/useEventListener/useEventListener.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use event listener options */\nexport type UseEventListenerOptions = {\n enabled?: boolean;\n} & AddEventListenerOptions;\n\n/** The use event listener return type */\nexport type UseEventListenerReturn<Target extends Element> = StateRef<Target>;\n\nexport interface UseEventListener {\n <Event extends keyof WindowEventMap = keyof WindowEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Window, event: WindowEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Document, event: DocumentEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Element, event: HTMLElementEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n event: Event,\n listener: (this: Target, event: HTMLElementEventMap[Event]) => void,\n options?: UseEventListenerOptions,\n target?: never\n ): UseEventListenerReturn<Target>;\n\n <\n Target extends Element,\n Event extends keyof MediaQueryListEventMap = keyof MediaQueryListEventMap\n >(\n event: Event,\n listener: (this: Target, event: MediaQueryListEventMap[Event]) => void,\n options?: UseEventListenerOptions,\n target?: never\n ): UseEventListenerReturn<Target>;\n}\n\n/**\n * @name useEventListener\n * @description - Hook that attaches an event listener to the specified target\n * @category Browser\n * @usage necessary\n\n * @overload\n * @template Event Key of window event map\n * @param {Window} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Window, event: WindowEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(window, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @param {Document} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Document, event: DocumentEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(document, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {HookTarget} target The target element to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(ref, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event] | MediaQueryListEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {UseEventListenerReturn<Target>} A reference to the target element\n *\n * @example\n * const ref = useEventListener('click', () => console.log('click'));\n */\nexport const useEventListener = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const event = (target ? params[1] : params[0]) as string;\n const listener = (target ? params[2] : params[1]) as (...arg: any[]) => undefined | void;\n const options = (target ? params[3] : params[2]) as UseEventListenerOptions | undefined;\n\n const enabled = options?.enabled ?? true;\n\n const internalRef = useRefState();\n const internalListenerRef = useRef(listener);\n internalListenerRef.current = listener;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n const listener = (event: Event) => internalListenerRef.current(event);\n\n element.addEventListener(event, listener, options);\n return () => {\n element.removeEventListener(event, listener, options);\n };\n }, [target, internalRef.state, event, enabled]);\n\n if (target) return;\n return internalRef;\n}) as UseEventListener;\n"],"names":["useEventListener","params","target","isTarget","event","listener","options","enabled","internalRef","useRefState","internalListenerRef","useRef","internalOptionsRef","useEffect","element"],"mappings":"mMA6GaA,EAAoB,IAAIC,IAAkB,CACrD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAASF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACtCI,EAAYH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCK,EAAWJ,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCM,EAAUD,GAAS,SAAW,GAE9BE,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAON,CAAQ,EAC3CK,EAAoB,QAAUL,EAC9B,MAAMO,EAAqBD,EAAAA,OAAOL,CAAO,EAiBzC,GAhBAM,EAAmB,QAAUN,EAE7BO,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,GAAY,CAACL,GAAU,CAACM,EAAY,MAAQ,OAEjD,MAAMM,GACFZ,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,UAAwB,OAEzEH,EAAYD,GAAiBM,EAAoB,QAAQN,CAAK,EAEpE,OAAAU,EAAQ,iBAAiBV,EAAOC,EAAUC,CAAO,EAC1C,IAAM,CACXQ,EAAQ,oBAAoBV,EAAOC,EAAUC,CAAO,CAAA,CACtD,EACC,CAACJ,EAAQM,EAAY,MAAOJ,EAAOG,CAAO,CAAC,EAE1C,CAAAL,EACJ,OAAOM,CACT"}
1
+ {"version":3,"file":"useEventListener.cjs","sources":["../../../../src/hooks/useEventListener/useEventListener.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use event listener options */\nexport type UseEventListenerOptions = {\n enabled?: boolean;\n} & AddEventListenerOptions;\n\n/** The use event listener return type */\nexport type UseEventListenerReturn<Target extends Element> = StateRef<Target>;\n\nexport interface UseEventListener {\n <Event extends keyof WindowEventMap = keyof WindowEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Window, event: WindowEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Document, event: DocumentEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n target: HookTarget,\n event: Event,\n listener: (this: Element, event: HTMLElementEventMap[Event]) => void,\n options?: UseEventListenerOptions\n ): void;\n\n <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(\n event: Event,\n listener: (this: Target, event: HTMLElementEventMap[Event]) => void,\n options?: UseEventListenerOptions,\n target?: never\n ): UseEventListenerReturn<Target>;\n\n <\n Target extends Element,\n Event extends keyof MediaQueryListEventMap = keyof MediaQueryListEventMap\n >(\n event: Event,\n listener: (this: Target, event: MediaQueryListEventMap[Event]) => void,\n options?: UseEventListenerOptions,\n target?: never\n ): UseEventListenerReturn<Target>;\n}\n\n/**\n * @name useEventListener\n * @description - Hook that attaches an event listener to the specified target\n * @category Browser\n * @usage necessary\n\n * @overload\n * @template Event Key of window event map\n * @param {Window} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Window, event: WindowEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(window, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @param {Document} target The window object to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Document, event: DocumentEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(document, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {HookTarget} target The target element to attach the event listener to\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {void}\n *\n * @example\n * useEventListener(ref, 'click', () => console.log('click'));\n *\n * @overload\n * @template Event Key of window event map\n * @template Target The target element\n * @param {Event | Event[]} event An array of event types to listen for\n * @param {(this: Target, event: HTMLElementEventMap[Event] | MediaQueryListEventMap[Event]) => void} handler The event handler function\n * @param {UseEventListenerOptions} [options] Options for the event listener\n * @returns {UseEventListenerReturn<Target>} A reference to the target element\n *\n * @example\n * const ref = useEventListener('click', () => console.log('click'));\n */\nexport const useEventListener = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const event = (target ? params[1] : params[0]) as string;\n const listener = (target ? params[2] : params[1]) as (...arg: any[]) => undefined | void;\n const options = (target ? params[3] : params[2]) as UseEventListenerOptions | undefined;\n\n const enabled = options?.enabled ?? true;\n\n const internalRef = useRefState();\n const internalListenerRef = useRef(listener);\n internalListenerRef.current = listener;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n const listener = (event: Event) => internalListenerRef.current(event);\n\n element.addEventListener(event, listener, options);\n return () => {\n element.removeEventListener(event, listener, options);\n };\n }, [target, internalRef.state, isTarget.getRefState(target), event, enabled]);\n\n if (target) return;\n return internalRef;\n}) as UseEventListener;\n"],"names":["useEventListener","params","target","isTarget","event","listener","options","enabled","internalRef","useRefState","internalListenerRef","useRef","internalOptionsRef","useEffect","element"],"mappings":"mMA6GaA,GAAoB,IAAIC,IAAkB,CACrD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAASF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACtCI,EAAYH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCK,EAAWJ,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCM,EAAUD,GAAS,SAAW,GAE9BE,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAON,CAAQ,EAC3CK,EAAoB,QAAUL,EAC9B,MAAMO,EAAqBD,EAAAA,OAAOL,CAAO,EAiBzC,GAhBAM,EAAmB,QAAUN,EAE7BO,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,GAAY,CAACL,GAAU,CAACM,EAAY,MAAQ,OAEjD,MAAMM,GACFZ,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,UAAwB,OAEzEH,EAAYD,GAAiBM,EAAoB,QAAQN,CAAK,EAEpE,OAAAU,EAAQ,iBAAiBV,EAAOC,EAAUC,CAAO,EAC1C,IAAM,CACXQ,EAAQ,oBAAoBV,EAAOC,EAAUC,CAAO,CAAA,CACtD,EACC,CAACJ,EAAQM,EAAY,MAAOL,EAAAA,SAAS,YAAYD,CAAM,EAAGE,EAAOG,CAAO,CAAC,EAExE,CAAAL,EACJ,OAAOM,CACT"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),o={multiple:!0,accept:"*",reset:!1},b=(...r)=>{const l=typeof r[0]=="function"?r[0]:void 0,u=l?r[0]:r[1],[a,s]=n.useState(null),e=n.useRef(null),i=n.useRef(l);i.current=l;const f=()=>{s(null),i.current?.(null),e.current&&(e.current.value="")},g=t=>{if(!e.current)return;e.current.multiple=t?.multiple??u?.multiple??o.multiple,e.current.accept=t?.accept??u?.accept??o.accept;const c=t?.capture??u?.capture;c&&(e.current.capture=c),(t?.reset??u?.reset??o.reset)&&f(),e.current.click()};return n.useEffect(()=>{const t=()=>{const c=document.createElement("input");return c.type="file",c.onchange=v=>{const{files:p}=v.target;s(p),i.current?.(p)},c};return e.current=t(),()=>{e.current&&e.current.remove()}},[]),{value:a,open:g,reset:f}};exports.useFileDialog=b;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),o={multiple:!0,accept:"*",reset:!1},b=((...r)=>{const l=typeof r[0]=="function"?r[0]:void 0,u=l?r[0]:r[1],[a,s]=n.useState(null),e=n.useRef(null),i=n.useRef(l);i.current=l;const f=()=>{s(null),i.current?.(null),e.current&&(e.current.value="")},g=t=>{if(!e.current)return;e.current.multiple=t?.multiple??u?.multiple??o.multiple,e.current.accept=t?.accept??u?.accept??o.accept;const c=t?.capture??u?.capture;c&&(e.current.capture=c),(t?.reset??u?.reset??o.reset)&&f(),e.current.click()};return n.useEffect(()=>{const t=()=>{const c=document.createElement("input");return c.type="file",c.onchange=v=>{const{files:p}=v.target;s(p),i.current?.(p)},c};return e.current=t(),()=>{e.current&&e.current.remove()}},[]),{value:a,open:g,reset:f}});exports.useFileDialog=b;
2
2
  //# sourceMappingURL=useFileDialog.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useFileDialog.cjs","sources":["../../../../src/hooks/useFileDialog/useFileDialog.ts"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useEffect, useRef, useState } from 'react';\n\n/* The use file dialog options */\nexport interface UseFileDialogOptions extends Pick<ComponentProps<'input'>, 'accept' | 'multiple'> {\n /** The capture value */\n capture?: string;\n /** The reset value */\n reset?: boolean;\n}\n\nconst DEFAULT_OPTIONS = {\n multiple: true,\n accept: '*',\n reset: false\n} satisfies UseFileDialogOptions;\n\n/* The use file dialog return type */\nexport interface UseFileDialogReturn {\n /** The selected files */\n value: FileList | null;\n /** The open function */\n open: (openParams?: UseFileDialogOptions) => void;\n /** The reset function */\n reset: () => void;\n}\n\nexport interface UseFileDialog {\n (\n callback?: (value: FileList | null) => void,\n options?: UseFileDialogOptions\n ): UseFileDialogReturn;\n\n (options?: UseFileDialogOptions, callback?: never): UseFileDialogReturn;\n}\n\n/**\n * @name useFileDialog\n * @description - Hook to handle file input\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {(value: FileList | null) => void} callback The callback to execute when a file is selected\n * @param {boolean} [options.multiple=true] Whether multiple files can be selected\n * @param {string} [options.accept='*'] The accepted file types\n * @param {boolean} [options.reset=false] Whether the input should be reset when the callback is called\n * @param {string} [options.capture] The capture value\n * @returns {UseFileDialogReturn} An object containing the selected files\n *\n * @example\n * const { values, open, reset } = useFileDialog((value) => console.log(value));\n *\n * @overload\n * @param {boolean} [options.multiple=true] Whether multiple files can be selected\n * @param {string} [options.accept='*'] The accepted file types\n * @param {boolean} [options.reset=false] Whether the input should be reset when the callback is called\n * @param {string} [options.capture] The capture value\n * @returns {UseFileDialogReturn} An object containing the selected files\n *\n * @example\n * const { values, open, reset } = useFileDialog({ accept: 'image/*' });\n */\nexport const useFileDialog = ((...params: any[]) => {\n const callback = (typeof params[0] === 'function' ? params[0] : undefined) as\n | ((value: FileList | null) => void)\n | undefined;\n const options = (callback ? params[0] : params[1]) as UseFileDialogOptions | undefined;\n\n const [value, setValue] = useState<FileList | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n const reset = () => {\n setValue(null);\n internalCallbackRef.current?.(null);\n if (inputRef.current) inputRef.current.value = '';\n };\n\n const open = (openParams?: UseFileDialogOptions) => {\n if (!inputRef.current) return;\n\n inputRef.current.multiple =\n openParams?.multiple ?? options?.multiple ?? DEFAULT_OPTIONS.multiple;\n inputRef.current.accept = openParams?.accept ?? options?.accept ?? DEFAULT_OPTIONS.accept;\n\n const capture = openParams?.capture ?? options?.capture;\n if (capture) inputRef.current.capture = capture;\n\n if (openParams?.reset ?? options?.reset ?? DEFAULT_OPTIONS.reset) reset();\n\n inputRef.current.click();\n };\n\n useEffect(() => {\n const init = () => {\n const input = document.createElement('input');\n input.type = 'file';\n\n input.onchange = (event: Event) => {\n const { files } = event.target as HTMLInputElement;\n setValue(files);\n internalCallbackRef.current?.(files);\n };\n return input;\n };\n\n inputRef.current = init();\n return () => {\n if (!inputRef.current) return;\n inputRef.current.remove();\n };\n }, []);\n\n return { value, open, reset };\n}) as UseFileDialog;\n"],"names":["DEFAULT_OPTIONS","useFileDialog","params","callback","options","value","setValue","useState","inputRef","useRef","internalCallbackRef","reset","open","openParams","capture","useEffect","init","input","event","files"],"mappings":"yGAYMA,EAAkB,CACtB,SAAU,GACV,OAAQ,IACR,MAAO,EACT,EAgDaC,EAAiB,IAAIC,IAAkB,CAClD,MAAMC,EAAY,OAAOD,EAAO,CAAC,GAAM,WAAaA,EAAO,CAAC,EAAI,OAG1DE,EAAWD,EAAWD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE1C,CAACG,EAAOC,CAAQ,EAAIC,EAAAA,SAA0B,IAAI,EAClDC,EAAWC,EAAAA,OAAgC,IAAI,EAC/CC,EAAsBD,EAAAA,OAAON,CAAQ,EAC3CO,EAAoB,QAAUP,EAE9B,MAAMQ,EAAQ,IAAM,CAClBL,EAAS,IAAI,EACbI,EAAoB,UAAU,IAAI,EAC9BF,EAAS,UAASA,EAAS,QAAQ,MAAQ,GAAA,EAG3CI,EAAQC,GAAsC,CAClD,GAAI,CAACL,EAAS,QAAS,OAEvBA,EAAS,QAAQ,SACfK,GAAY,UAAYT,GAAS,UAAYJ,EAAgB,SAC/DQ,EAAS,QAAQ,OAASK,GAAY,QAAUT,GAAS,QAAUJ,EAAgB,OAEnF,MAAMc,EAAUD,GAAY,SAAWT,GAAS,QAC5CU,IAASN,EAAS,QAAQ,QAAUM,IAEpCD,GAAY,OAAST,GAAS,OAASJ,EAAgB,QAAOW,EAAA,EAElEH,EAAS,QAAQ,MAAA,CAAM,EAGzBO,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAO,IAAM,CACjB,MAAMC,EAAQ,SAAS,cAAc,OAAO,EAC5C,OAAAA,EAAM,KAAO,OAEbA,EAAM,SAAYC,GAAiB,CACjC,KAAM,CAAE,MAAAC,GAAUD,EAAM,OACxBZ,EAASa,CAAK,EACdT,EAAoB,UAAUS,CAAK,CAAA,EAE9BF,CAAA,EAGT,OAAAT,EAAS,QAAUQ,EAAA,EACZ,IAAM,CACNR,EAAS,SACdA,EAAS,QAAQ,OAAA,CAAO,CAC1B,EACC,EAAE,EAEE,CAAE,MAAAH,EAAO,KAAAO,EAAM,MAAAD,CAAA,CACxB"}
1
+ {"version":3,"file":"useFileDialog.cjs","sources":["../../../../src/hooks/useFileDialog/useFileDialog.ts"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useEffect, useRef, useState } from 'react';\n\n/* The use file dialog options */\nexport interface UseFileDialogOptions extends Pick<ComponentProps<'input'>, 'accept' | 'multiple'> {\n /** The capture value */\n capture?: string;\n /** The reset value */\n reset?: boolean;\n}\n\nconst DEFAULT_OPTIONS = {\n multiple: true,\n accept: '*',\n reset: false\n} satisfies UseFileDialogOptions;\n\n/* The use file dialog return type */\nexport interface UseFileDialogReturn {\n /** The selected files */\n value: FileList | null;\n /** The open function */\n open: (openParams?: UseFileDialogOptions) => void;\n /** The reset function */\n reset: () => void;\n}\n\nexport interface UseFileDialog {\n (\n callback?: (value: FileList | null) => void,\n options?: UseFileDialogOptions\n ): UseFileDialogReturn;\n\n (options?: UseFileDialogOptions, callback?: never): UseFileDialogReturn;\n}\n\n/**\n * @name useFileDialog\n * @description - Hook to handle file input\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {(value: FileList | null) => void} callback The callback to execute when a file is selected\n * @param {boolean} [options.multiple=true] Whether multiple files can be selected\n * @param {string} [options.accept='*'] The accepted file types\n * @param {boolean} [options.reset=false] Whether the input should be reset when the callback is called\n * @param {string} [options.capture] The capture value\n * @returns {UseFileDialogReturn} An object containing the selected files\n *\n * @example\n * const { values, open, reset } = useFileDialog((value) => console.log(value));\n *\n * @overload\n * @param {boolean} [options.multiple=true] Whether multiple files can be selected\n * @param {string} [options.accept='*'] The accepted file types\n * @param {boolean} [options.reset=false] Whether the input should be reset when the callback is called\n * @param {string} [options.capture] The capture value\n * @returns {UseFileDialogReturn} An object containing the selected files\n *\n * @example\n * const { values, open, reset } = useFileDialog({ accept: 'image/*' });\n */\nexport const useFileDialog = ((...params: any[]) => {\n const callback = (typeof params[0] === 'function' ? params[0] : undefined) as\n | ((value: FileList | null) => void)\n | undefined;\n const options = (callback ? params[0] : params[1]) as UseFileDialogOptions | undefined;\n\n const [value, setValue] = useState<FileList | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n const reset = () => {\n setValue(null);\n internalCallbackRef.current?.(null);\n if (inputRef.current) inputRef.current.value = '';\n };\n\n const open = (openParams?: UseFileDialogOptions) => {\n if (!inputRef.current) return;\n\n inputRef.current.multiple =\n openParams?.multiple ?? options?.multiple ?? DEFAULT_OPTIONS.multiple;\n inputRef.current.accept = openParams?.accept ?? options?.accept ?? DEFAULT_OPTIONS.accept;\n\n const capture = openParams?.capture ?? options?.capture;\n if (capture) inputRef.current.capture = capture;\n\n if (openParams?.reset ?? options?.reset ?? DEFAULT_OPTIONS.reset) reset();\n\n inputRef.current.click();\n };\n\n useEffect(() => {\n const init = () => {\n const input = document.createElement('input');\n input.type = 'file';\n\n input.onchange = (event: Event) => {\n const { files } = event.target as HTMLInputElement;\n setValue(files);\n internalCallbackRef.current?.(files);\n };\n return input;\n };\n\n inputRef.current = init();\n return () => {\n if (!inputRef.current) return;\n inputRef.current.remove();\n };\n }, []);\n\n return { value, open, reset };\n}) as UseFileDialog;\n"],"names":["DEFAULT_OPTIONS","useFileDialog","params","callback","options","value","setValue","useState","inputRef","useRef","internalCallbackRef","reset","open","openParams","capture","useEffect","init","input","event","files"],"mappings":"yGAYMA,EAAkB,CACtB,SAAU,GACV,OAAQ,IACR,MAAO,EACT,EAgDaC,GAAiB,IAAIC,IAAkB,CAClD,MAAMC,EAAY,OAAOD,EAAO,CAAC,GAAM,WAAaA,EAAO,CAAC,EAAI,OAG1DE,EAAWD,EAAWD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE1C,CAACG,EAAOC,CAAQ,EAAIC,EAAAA,SAA0B,IAAI,EAClDC,EAAWC,EAAAA,OAAgC,IAAI,EAC/CC,EAAsBD,EAAAA,OAAON,CAAQ,EAC3CO,EAAoB,QAAUP,EAE9B,MAAMQ,EAAQ,IAAM,CAClBL,EAAS,IAAI,EACbI,EAAoB,UAAU,IAAI,EAC9BF,EAAS,UAASA,EAAS,QAAQ,MAAQ,GAAA,EAG3CI,EAAQC,GAAsC,CAClD,GAAI,CAACL,EAAS,QAAS,OAEvBA,EAAS,QAAQ,SACfK,GAAY,UAAYT,GAAS,UAAYJ,EAAgB,SAC/DQ,EAAS,QAAQ,OAASK,GAAY,QAAUT,GAAS,QAAUJ,EAAgB,OAEnF,MAAMc,EAAUD,GAAY,SAAWT,GAAS,QAC5CU,IAASN,EAAS,QAAQ,QAAUM,IAEpCD,GAAY,OAAST,GAAS,OAASJ,EAAgB,QAAOW,EAAA,EAElEH,EAAS,QAAQ,MAAA,CAAM,EAGzBO,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAO,IAAM,CACjB,MAAMC,EAAQ,SAAS,cAAc,OAAO,EAC5C,OAAAA,EAAM,KAAO,OAEbA,EAAM,SAAYC,GAAiB,CACjC,KAAM,CAAE,MAAAC,GAAUD,EAAM,OACxBZ,EAASa,CAAK,EACdT,EAAoB,UAAUS,CAAK,CAAA,EAE9BF,CAAA,EAGT,OAAAT,EAAS,QAAUQ,EAAA,EACZ,IAAM,CACNR,EAAS,SACdA,EAAS,QAAQ,OAAA,CAAO,CAC1B,EACC,EAAE,EAEE,CAAE,MAAAH,EAAO,KAAAO,EAAM,MAAAD,CAAA,CACxB"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),E=require("../useRefState/useRefState.cjs"),R=require("../../utils/helpers/isTarget.cjs"),S=(...e)=>{const n=R.isTarget(e[0])?e[0]:void 0,u=n?typeof e[1]=="object"?e[1]:{onFocus:e[1]}:typeof e[0]=="object"?e[0]:{onFocus:e[0]},a=u?.enabled??!0,b=u?.initialValue??!1,[d,o]=i.useState(b),s=E.useRefState(),f=i.useRef(u);f.current=u;const r=i.useRef(null),l=()=>{r.current&&(r.current.focus(),o(!0))},g=()=>{r.current&&(r.current.blur(),o(!1))};return i.useEffect(()=>{if(!a||!n&&!s.state)return;const t=n?R.isTarget.getElement(n):s.current;if(!t)return;r.current=t;const v=c=>{f.current?.onFocus?.(c),(!l||c.target.matches?.(":focus-visible"))&&o(!0)},F=c=>{f.current?.onBlur?.(c),o(!1)};return b&&t.focus(),t.addEventListener("focus",v),t.addEventListener("blur",F),()=>{t.removeEventListener("focus",v),t.removeEventListener("blur",F)}},[n,s.state,a]),n?{focus:l,blur:g,focused:d}:{ref:s,focus:l,blur:g,focused:d}};exports.useFocus=S;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),E=require("../useRefState/useRefState.cjs"),a=require("../../utils/helpers/isTarget.cjs"),S=((...e)=>{const t=a.isTarget(e[0])?e[0]:void 0,u=t?typeof e[1]=="object"?e[1]:{onFocus:e[1]}:typeof e[0]=="object"?e[0]:{onFocus:e[0]},b=u?.enabled??!0,d=u?.initialValue??!1,[g,s]=i.useState(d),o=E.useRefState(),f=i.useRef(u);f.current=u;const r=i.useRef(null),l=()=>{r.current&&(r.current.focus(),s(!0))},v=()=>{r.current&&(r.current.blur(),s(!1))};return i.useEffect(()=>{if(!b||!t&&!o.state)return;const n=t?a.isTarget.getElement(t):o.current;if(!n)return;r.current=n;const R=c=>{f.current?.onFocus?.(c),(!l||c.target.matches?.(":focus-visible"))&&s(!0)},F=c=>{f.current?.onBlur?.(c),s(!1)};return d&&n.focus(),n.addEventListener("focus",R),n.addEventListener("blur",F),()=>{n.removeEventListener("focus",R),n.removeEventListener("blur",F)}},[t,o.state,b,a.isTarget.getRefState(t)]),t?{focus:l,blur:v,focused:g}:{ref:o,focus:l,blur:v,focused:g}});exports.useFocus=S;
2
2
  //# sourceMappingURL=useFocus.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useFocus.cjs","sources":["../../../../src/hooks/useFocus/useFocus.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use focus options type */\nexport interface UseFocusOptions {\n /** The enabled state of the focus hook */\n enabled?: boolean;\n /** The initial focus state of the target */\n initialValue?: boolean;\n /** The on blur callback */\n onBlur?: (event: FocusEvent) => void;\n /** The on focus callback */\n onFocus?: (event: FocusEvent) => void;\n}\n\n/** The use focus return type */\nexport interface UseFocusReturn {\n /** The boolean state value of the target */\n focused: boolean;\n /** Blur the target */\n blur: () => void;\n /** Focus the target */\n focus: () => void;\n}\n\nexport interface UseFocus {\n (target: HookTarget, callback?: (event: FocusEvent) => void): UseFocusReturn;\n\n (target: HookTarget, options?: UseFocusOptions): UseFocusReturn;\n\n <Target extends Element>(\n callback?: (event: FocusEvent) => void,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n\n <Target extends Element>(\n options?: UseFocusOptions,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFocus\n * @description - Hook that allows you to focus on a specific element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref);\n *\n * @overload\n * @template Target The target element\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus();\n */\nexport const useFocus = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onFocus: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onFocus: params[0] }\n ) as UseFocusOptions | undefined;\n const enabled = options?.enabled ?? true;\n const initialValue = options?.initialValue ?? false;\n\n const [focused, setFocused] = useState(initialValue);\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n const elementRef = useRef<HTMLElement | null>(null);\n\n const focus = () => {\n if (!elementRef.current) return;\n elementRef.current.focus();\n setFocused(true);\n };\n\n const blur = () => {\n if (!elementRef.current) return;\n elementRef.current.blur();\n setFocused(false);\n };\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n if (!element) return;\n\n elementRef.current = element;\n\n const onFocus = (event: FocusEvent) => {\n internalOptionsRef.current?.onFocus?.(event);\n if (!focus || (event.target as HTMLElement).matches?.(':focus-visible')) setFocused(true);\n };\n\n const onBlur = (event: FocusEvent) => {\n internalOptionsRef.current?.onBlur?.(event);\n setFocused(false);\n };\n\n if (initialValue) element.focus();\n\n element.addEventListener('focus', onFocus);\n element.addEventListener('blur', onBlur);\n\n return () => {\n element.removeEventListener('focus', onFocus);\n element.removeEventListener('blur', onBlur);\n };\n }, [target, internalRef.state, enabled]);\n\n if (target) return { focus, blur, focused };\n return {\n ref: internalRef,\n focus,\n blur,\n focused\n };\n}) as UseFocus;\n"],"names":["useFocus","params","target","isTarget","options","enabled","initialValue","focused","setFocused","useState","internalRef","useRefState","internalOptionsRef","useRef","elementRef","focus","blur","useEffect","element","onFocus","event","onBlur"],"mappings":"mMA4FaA,EAAY,IAAIC,IAAkB,CAC7C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EACrB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EAErBI,EAAUD,GAAS,SAAW,GAC9BE,EAAeF,GAAS,cAAgB,GAExC,CAACG,EAASC,CAAU,EAAIC,EAAAA,SAASH,CAAY,EAC7CI,EAAcC,EAAAA,YAAA,EACdC,EAAqBC,EAAAA,OAAOT,CAAO,EACzCQ,EAAmB,QAAUR,EAE7B,MAAMU,EAAaD,EAAAA,OAA2B,IAAI,EAE5CE,EAAQ,IAAM,CACbD,EAAW,UAChBA,EAAW,QAAQ,MAAA,EACnBN,EAAW,EAAI,EAAA,EAGXQ,EAAO,IAAM,CACZF,EAAW,UAChBA,EAAW,QAAQ,KAAA,EACnBN,EAAW,EAAK,EAAA,EA+BlB,OA5BAS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACZ,GAAY,CAACH,GAAU,CAACQ,EAAY,MAAQ,OACjD,MAAMQ,EAAWhB,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIQ,EAAY,QACpE,GAAI,CAACQ,EAAS,OAEdJ,EAAW,QAAUI,EAErB,MAAMC,EAAWC,GAAsB,CACrCR,EAAmB,SAAS,UAAUQ,CAAK,GACvC,CAACL,GAAUK,EAAM,OAAuB,UAAU,gBAAgB,MAAc,EAAI,CAAA,EAGpFC,EAAUD,GAAsB,CACpCR,EAAmB,SAAS,SAASQ,CAAK,EAC1CZ,EAAW,EAAK,CAAA,EAGlB,OAAIF,KAAsB,MAAA,EAE1BY,EAAQ,iBAAiB,QAASC,CAAO,EACzCD,EAAQ,iBAAiB,OAAQG,CAAM,EAEhC,IAAM,CACXH,EAAQ,oBAAoB,QAASC,CAAO,EAC5CD,EAAQ,oBAAoB,OAAQG,CAAM,CAAA,CAC5C,EACC,CAACnB,EAAQQ,EAAY,MAAOL,CAAO,CAAC,EAEnCH,EAAe,CAAE,MAAAa,EAAO,KAAAC,EAAM,QAAAT,CAAA,EAC3B,CACL,IAAKG,EACL,MAAAK,EACA,KAAAC,EACA,QAAAT,CAAA,CAEJ"}
1
+ {"version":3,"file":"useFocus.cjs","sources":["../../../../src/hooks/useFocus/useFocus.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use focus options type */\nexport interface UseFocusOptions {\n /** The enabled state of the focus hook */\n enabled?: boolean;\n /** The initial focus state of the target */\n initialValue?: boolean;\n /** The on blur callback */\n onBlur?: (event: FocusEvent) => void;\n /** The on focus callback */\n onFocus?: (event: FocusEvent) => void;\n}\n\n/** The use focus return type */\nexport interface UseFocusReturn {\n /** The boolean state value of the target */\n focused: boolean;\n /** Blur the target */\n blur: () => void;\n /** Focus the target */\n focus: () => void;\n}\n\nexport interface UseFocus {\n (target: HookTarget, callback?: (event: FocusEvent) => void): UseFocusReturn;\n\n (target: HookTarget, options?: UseFocusOptions): UseFocusReturn;\n\n <Target extends Element>(\n callback?: (event: FocusEvent) => void,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n\n <Target extends Element>(\n options?: UseFocusOptions,\n target?: never\n ): UseFocusReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFocus\n * @description - Hook that allows you to focus on a specific element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));\n *\n * @overload\n * @param {HookTarget} target The target element to focus\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn} An object with focus state and methods\n *\n * @example\n * const { focus, blur, focused } = useFocus(ref);\n *\n * @overload\n * @template Target The target element\n * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the focus hook\n * @param {boolean} [options.initialValue=false] The initial focus state of the target\n * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus\n * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur\n * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref\n *\n * @example\n * const { ref, focus, blur, focused } = useFocus();\n */\nexport const useFocus = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onFocus: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onFocus: params[0] }\n ) as UseFocusOptions | undefined;\n const enabled = options?.enabled ?? true;\n const initialValue = options?.initialValue ?? false;\n\n const [focused, setFocused] = useState(initialValue);\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n const elementRef = useRef<HTMLElement | null>(null);\n\n const focus = () => {\n if (!elementRef.current) return;\n elementRef.current.focus();\n setFocused(true);\n };\n\n const blur = () => {\n if (!elementRef.current) return;\n elementRef.current.blur();\n setFocused(false);\n };\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as HTMLElement;\n if (!element) return;\n\n elementRef.current = element;\n\n const onFocus = (event: FocusEvent) => {\n internalOptionsRef.current?.onFocus?.(event);\n if (!focus || (event.target as HTMLElement).matches?.(':focus-visible')) setFocused(true);\n };\n\n const onBlur = (event: FocusEvent) => {\n internalOptionsRef.current?.onBlur?.(event);\n setFocused(false);\n };\n\n if (initialValue) element.focus();\n\n element.addEventListener('focus', onFocus);\n element.addEventListener('blur', onBlur);\n\n return () => {\n element.removeEventListener('focus', onFocus);\n element.removeEventListener('blur', onBlur);\n };\n }, [target, internalRef.state, enabled, isTarget.getRefState(target)]);\n\n if (target) return { focus, blur, focused };\n return {\n ref: internalRef,\n focus,\n blur,\n focused\n };\n}) as UseFocus;\n"],"names":["useFocus","params","target","isTarget","options","enabled","initialValue","focused","setFocused","useState","internalRef","useRefState","internalOptionsRef","useRef","elementRef","focus","blur","useEffect","element","onFocus","event","onBlur"],"mappings":"mMA4FaA,GAAY,IAAIC,IAAkB,CAC7C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EACrB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EAErBI,EAAUD,GAAS,SAAW,GAC9BE,EAAeF,GAAS,cAAgB,GAExC,CAACG,EAASC,CAAU,EAAIC,EAAAA,SAASH,CAAY,EAC7CI,EAAcC,EAAAA,YAAA,EACdC,EAAqBC,EAAAA,OAAOT,CAAO,EACzCQ,EAAmB,QAAUR,EAE7B,MAAMU,EAAaD,EAAAA,OAA2B,IAAI,EAE5CE,EAAQ,IAAM,CACbD,EAAW,UAChBA,EAAW,QAAQ,MAAA,EACnBN,EAAW,EAAI,EAAA,EAGXQ,EAAO,IAAM,CACZF,EAAW,UAChBA,EAAW,QAAQ,KAAA,EACnBN,EAAW,EAAK,EAAA,EA+BlB,OA5BAS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACZ,GAAY,CAACH,GAAU,CAACQ,EAAY,MAAQ,OACjD,MAAMQ,EAAWhB,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIQ,EAAY,QACpE,GAAI,CAACQ,EAAS,OAEdJ,EAAW,QAAUI,EAErB,MAAMC,EAAWC,GAAsB,CACrCR,EAAmB,SAAS,UAAUQ,CAAK,GACvC,CAACL,GAAUK,EAAM,OAAuB,UAAU,gBAAgB,MAAc,EAAI,CAAA,EAGpFC,EAAUD,GAAsB,CACpCR,EAAmB,SAAS,SAASQ,CAAK,EAC1CZ,EAAW,EAAK,CAAA,EAGlB,OAAIF,KAAsB,MAAA,EAE1BY,EAAQ,iBAAiB,QAASC,CAAO,EACzCD,EAAQ,iBAAiB,OAAQG,CAAM,EAEhC,IAAM,CACXH,EAAQ,oBAAoB,QAASC,CAAO,EAC5CD,EAAQ,oBAAoB,OAAQG,CAAM,CAAA,CAC5C,EACC,CAACnB,EAAQQ,EAAY,MAAOL,EAASF,WAAS,YAAYD,CAAM,CAAC,CAAC,EAEjEA,EAAe,CAAE,MAAAa,EAAO,KAAAC,EAAM,QAAAT,CAAA,EAC3B,CACL,IAAKG,EACL,MAAAK,EACA,KAAAC,EACA,QAAAT,CAAA,CAEJ"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),T=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),h=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),b="a, input, select, textarea, button, object, [tabindex]",S=e=>Array.from(e.querySelectorAll(b)).filter(o=>{const n=o;return n.tabIndex!==-1&&!n.hidden&&n.style.display!=="none"}),p=e=>{const t=e.querySelector("[data-autofocus]");if(t)return t.focus();const o=S(e);o.length&&o[0].focus()},q=(...e)=>{const t=g.isTarget(e[0])?e[0]:void 0,o=t?e[1]:e[0],[n,c]=v.useState(o),u=h.useRefState(),i=()=>c(!0),l=()=>c(!1),a=()=>c(s=>!s);return T.useIsomorphicLayoutEffect(()=>{if(!n)return;const s=t?g.isTarget.getElement(t):u.current;if(!s)return;const f=s;p(f);const m=r=>{if(r.key!=="Tab")return;const[E,...d]=S(f);if(!d.length)return;const y=d.at(-1);r.shiftKey&&document.activeElement===E&&(r.preventDefault(),y.focus()),document.activeElement===y&&(r.preventDefault(),E.focus())};return document.addEventListener("keydown",m),()=>{document.removeEventListener("keydown",m)}},[n,t,u.state]),t?{active:n,enable:i,disable:l,toggle:a}:{active:n,enable:i,disable:l,toggle:a,ref:u}};exports.FOCUS_SELECTOR=b;exports.useFocusTrap=q;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),v=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),h=require("../useRefState/useRefState.cjs"),i=require("../../utils/helpers/isTarget.cjs"),S="a, input, select, textarea, button, object, [tabindex]",b=t=>Array.from(t.querySelectorAll(S)).filter(s=>{const n=s;return n.tabIndex!==-1&&!n.hidden&&n.style.display!=="none"}),p=t=>{const e=t.querySelector("[data-autofocus]");if(e)return e.focus();const s=b(t);s.length&&s[0].focus()},q=((...t)=>{const e=i.isTarget(t[0])?t[0]:void 0,s=e?t[1]:t[0],[n,c]=T.useState(s),u=h.useRefState(),l=()=>c(!0),a=()=>c(!1),f=()=>c(o=>!o);return v.useIsomorphicLayoutEffect(()=>{if(!n)return;const o=e?i.isTarget.getElement(e):u.current;if(!o)return;const m=o;p(m);const E=r=>{if(r.key!=="Tab")return;const[d,...g]=b(m);if(!g.length)return;const y=g.at(-1);r.shiftKey&&document.activeElement===d&&(r.preventDefault(),y.focus()),document.activeElement===y&&(r.preventDefault(),d.focus())};return document.addEventListener("keydown",E),()=>{document.removeEventListener("keydown",E)}},[n,e,u.state,i.isTarget.getRefState(e)]),e?{active:n,enable:l,disable:a,toggle:f}:{active:n,enable:l,disable:a,toggle:f,ref:u}});exports.FOCUS_SELECTOR=S;exports.useFocusTrap=q;
2
2
  //# sourceMappingURL=useFocusTrap.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useFocusTrap.cjs","sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nconst getFocusableElements = (element: HTMLElement) => {\n const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));\n return elements.filter((element) => {\n const htmlEl = element as HTMLElement;\n return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';\n }) as HTMLElement[];\n};\n\nconst focusElement = (element: HTMLElement) => {\n const autofocusElement = element.querySelector('[data-autofocus]') as HTMLElement;\n if (autofocusElement) return autofocusElement.focus();\n const focusableElements = getFocusableElements(element);\n if (focusableElements.length) focusableElements[0].focus();\n};\n\n/** The use focus trap return type */\nexport interface UseFocusTrapReturn {\n /** Whether focus trap is active */\n active: boolean;\n /** Disable focus trap */\n disable: () => void;\n /** Enable focus trap */\n enable: () => void;\n /** Toggle focus trap */\n toggle: () => void;\n}\n\nexport interface UseFocusTrap {\n (target: HookTarget, active?: boolean): UseFocusTrapReturn;\n\n <Target extends HTMLElement>(\n active?: boolean,\n target?: never\n ): UseFocusTrapReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useFocusTrap\n * @description - Hook that traps focus within a given element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element for focus trap\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn} Object with control methods and state\n *\n * @example\n * const { active, disable, toggle, enable } = useFocusTrap(ref, true);\n *\n * @overload\n * @template Target The target element type\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls\n *\n * @example\n * const { ref, active, disable, toggle, enable } = useFocusTrap(true);\n */\nexport const useFocusTrap = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const initialActive = target ? params[1] : params[0];\n\n const [active, setActive] = useState(initialActive);\n const internalRef = useRefState<HTMLElement>();\n\n const enable = () => setActive(true);\n const disable = () => setActive(false);\n const toggle = () => setActive((prevActive: boolean) => !prevActive);\n\n useIsomorphicLayoutEffect(() => {\n if (!active) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const htmlElement = element as HTMLElement;\n focusElement(htmlElement);\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Tab') return;\n\n const [firstElement, ...restElements] = getFocusableElements(htmlElement);\n if (!restElements.length) return;\n\n const lastElement = restElements.at(-1)!;\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n\n if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n };\n\n document.addEventListener('keydown', onKeyDown);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [active, target, internalRef.state]);\n\n if (target) return { active, enable, disable, toggle };\n return { active, enable, disable, toggle, ref: internalRef };\n}) as UseFocusTrap;\n"],"names":["FOCUS_SELECTOR","getFocusableElements","element","htmlEl","focusElement","autofocusElement","focusableElements","useFocusTrap","params","target","isTarget","initialActive","active","setActive","useState","internalRef","useRefState","enable","disable","toggle","prevActive","useIsomorphicLayoutEffect","htmlElement","onKeyDown","event","firstElement","restElements","lastElement"],"mappings":"2QAWaA,EAAiB,yDAExBC,EAAwBC,GACX,MAAM,KAAKA,EAAQ,iBAAiBF,CAAc,CAAC,EACpD,OAAQE,GAAY,CAClC,MAAMC,EAASD,EACf,OAAOC,EAAO,WAAa,IAAM,CAACA,EAAO,QAAUA,EAAO,MAAM,UAAY,MAAA,CAC7E,EAGGC,EAAgBF,GAAyB,CAC7C,MAAMG,EAAmBH,EAAQ,cAAc,kBAAkB,EACjE,GAAIG,EAAkB,OAAOA,EAAiB,MAAA,EAC9C,MAAMC,EAAoBL,EAAqBC,CAAO,EAClDI,EAAkB,QAAQA,EAAkB,CAAC,EAAE,MAAA,CACrD,EA+CaC,EAAgB,IAAIC,IAAkB,CACjD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAgBF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE7C,CAACI,EAAQC,CAAS,EAAIC,EAAAA,SAASH,CAAa,EAC5CI,EAAcC,EAAAA,YAAA,EAEdC,EAAS,IAAMJ,EAAU,EAAI,EAC7BK,EAAU,IAAML,EAAU,EAAK,EAC/BM,EAAS,IAAMN,EAAWO,GAAwB,CAACA,CAAU,EAqCnE,OAnCAC,EAAAA,0BAA0B,IAAM,CAC9B,GAAI,CAACT,EAAQ,OAEb,MAAMV,EAAUO,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,QACnE,GAAI,CAACb,EAAS,OAEd,MAAMoB,EAAcpB,EACpBE,EAAakB,CAAW,EAExB,MAAMC,EAAaC,GAAyB,CAC1C,GAAIA,EAAM,MAAQ,MAAO,OAEzB,KAAM,CAACC,EAAc,GAAGC,CAAY,EAAIzB,EAAqBqB,CAAW,EACxE,GAAI,CAACI,EAAa,OAAQ,OAE1B,MAAMC,EAAcD,EAAa,GAAG,EAAE,EAElCF,EAAM,UAAY,SAAS,gBAAkBC,IAC/CD,EAAM,eAAA,EACNG,EAAY,MAAA,GAGV,SAAS,gBAAkBA,IAC7BH,EAAM,eAAA,EACNC,EAAa,MAAA,EACf,EAGF,gBAAS,iBAAiB,UAAWF,CAAS,EAEvC,IAAM,CACX,SAAS,oBAAoB,UAAWA,CAAS,CAAA,CACnD,EACC,CAACX,EAAQH,EAAQM,EAAY,KAAK,CAAC,EAElCN,EAAe,CAAE,OAAAG,EAAQ,OAAAK,EAAQ,QAAAC,EAAS,OAAAC,CAAA,EACvC,CAAE,OAAAP,EAAQ,OAAAK,EAAQ,QAAAC,EAAS,OAAAC,EAAQ,IAAKJ,CAAA,CACjD"}
1
+ {"version":3,"file":"useFocusTrap.cjs","sources":["../../../../src/hooks/useFocusTrap/useFocusTrap.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\nexport const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]';\n\nconst getFocusableElements = (element: HTMLElement) => {\n const elements = Array.from(element.querySelectorAll(FOCUS_SELECTOR));\n return elements.filter((element) => {\n const htmlEl = element as HTMLElement;\n return htmlEl.tabIndex !== -1 && !htmlEl.hidden && htmlEl.style.display !== 'none';\n }) as HTMLElement[];\n};\n\nconst focusElement = (element: HTMLElement) => {\n const autofocusElement = element.querySelector('[data-autofocus]') as HTMLElement;\n if (autofocusElement) return autofocusElement.focus();\n const focusableElements = getFocusableElements(element);\n if (focusableElements.length) focusableElements[0].focus();\n};\n\n/** The use focus trap return type */\nexport interface UseFocusTrapReturn {\n /** Whether focus trap is active */\n active: boolean;\n /** Disable focus trap */\n disable: () => void;\n /** Enable focus trap */\n enable: () => void;\n /** Toggle focus trap */\n toggle: () => void;\n}\n\nexport interface UseFocusTrap {\n (target: HookTarget, active?: boolean): UseFocusTrapReturn;\n\n <Target extends HTMLElement>(\n active?: boolean,\n target?: never\n ): UseFocusTrapReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useFocusTrap\n * @description - Hook that traps focus within a given element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element for focus trap\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn} Object with control methods and state\n *\n * @example\n * const { active, disable, toggle, enable } = useFocusTrap(ref, true);\n *\n * @overload\n * @template Target The target element type\n * @param {boolean} [active=true] Whether focus trap is active\n * @returns {UseFocusTrapReturn & { ref: StateRef<Target> }} Object with ref and controls\n *\n * @example\n * const { ref, active, disable, toggle, enable } = useFocusTrap(true);\n */\nexport const useFocusTrap = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const initialActive = target ? params[1] : params[0];\n\n const [active, setActive] = useState(initialActive);\n const internalRef = useRefState<HTMLElement>();\n\n const enable = () => setActive(true);\n const disable = () => setActive(false);\n const toggle = () => setActive((prevActive: boolean) => !prevActive);\n\n useIsomorphicLayoutEffect(() => {\n if (!active) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const htmlElement = element as HTMLElement;\n focusElement(htmlElement);\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Tab') return;\n\n const [firstElement, ...restElements] = getFocusableElements(htmlElement);\n if (!restElements.length) return;\n\n const lastElement = restElements.at(-1)!;\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n\n if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n };\n\n document.addEventListener('keydown', onKeyDown);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [active, target, internalRef.state, isTarget.getRefState(target)]);\n\n if (target) return { active, enable, disable, toggle };\n return { active, enable, disable, toggle, ref: internalRef };\n}) as UseFocusTrap;\n"],"names":["FOCUS_SELECTOR","getFocusableElements","element","htmlEl","focusElement","autofocusElement","focusableElements","useFocusTrap","params","target","isTarget","initialActive","active","setActive","useState","internalRef","useRefState","enable","disable","toggle","prevActive","useIsomorphicLayoutEffect","htmlElement","onKeyDown","event","firstElement","restElements","lastElement"],"mappings":"2QAWaA,EAAiB,yDAExBC,EAAwBC,GACX,MAAM,KAAKA,EAAQ,iBAAiBF,CAAc,CAAC,EACpD,OAAQE,GAAY,CAClC,MAAMC,EAASD,EACf,OAAOC,EAAO,WAAa,IAAM,CAACA,EAAO,QAAUA,EAAO,MAAM,UAAY,MAAA,CAC7E,EAGGC,EAAgBF,GAAyB,CAC7C,MAAMG,EAAmBH,EAAQ,cAAc,kBAAkB,EACjE,GAAIG,EAAkB,OAAOA,EAAiB,MAAA,EAC9C,MAAMC,EAAoBL,EAAqBC,CAAO,EAClDI,EAAkB,QAAQA,EAAkB,CAAC,EAAE,MAAA,CACrD,EA+CaC,GAAgB,IAAIC,IAAkB,CACjD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAgBF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAE7C,CAACI,EAAQC,CAAS,EAAIC,EAAAA,SAASH,CAAa,EAC5CI,EAAcC,EAAAA,YAAA,EAEdC,EAAS,IAAMJ,EAAU,EAAI,EAC7BK,EAAU,IAAML,EAAU,EAAK,EAC/BM,EAAS,IAAMN,EAAWO,GAAwB,CAACA,CAAU,EAqCnE,OAnCAC,EAAAA,0BAA0B,IAAM,CAC9B,GAAI,CAACT,EAAQ,OAEb,MAAMV,EAAUO,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,QACnE,GAAI,CAACb,EAAS,OAEd,MAAMoB,EAAcpB,EACpBE,EAAakB,CAAW,EAExB,MAAMC,EAAaC,GAAyB,CAC1C,GAAIA,EAAM,MAAQ,MAAO,OAEzB,KAAM,CAACC,EAAc,GAAGC,CAAY,EAAIzB,EAAqBqB,CAAW,EACxE,GAAI,CAACI,EAAa,OAAQ,OAE1B,MAAMC,EAAcD,EAAa,GAAG,EAAE,EAElCF,EAAM,UAAY,SAAS,gBAAkBC,IAC/CD,EAAM,eAAA,EACNG,EAAY,MAAA,GAGV,SAAS,gBAAkBA,IAC7BH,EAAM,eAAA,EACNC,EAAa,MAAA,EACf,EAGF,gBAAS,iBAAiB,UAAWF,CAAS,EAEvC,IAAM,CACX,SAAS,oBAAoB,UAAWA,CAAS,CAAA,CACnD,EACC,CAACX,EAAQH,EAAQM,EAAY,MAAOL,WAAS,YAAYD,CAAM,CAAC,CAAC,EAEhEA,EAAe,CAAE,OAAAG,EAAQ,OAAAK,EAAQ,QAAAC,EAAS,OAAAC,CAAA,EACvC,CAAE,OAAAP,EAAQ,OAAAK,EAAQ,QAAAC,EAAS,OAAAC,EAAQ,IAAKJ,CAAA,CACjD"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),e=require("screenfull"),b=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),h=(...t)=>{const n=g.isTarget(t[0])?t[0]:void 0,r=n?t[1]:t[0],[s,E]=a.useState(r?.initialValue??!1),l=b.useRefState(),i=()=>{e.isEnabled&&(e.isFullscreen?r?.onEnter?.():(e.off("change",i),r?.onExit?.()),E(e.isFullscreen))},o=()=>{const f=n?g.isTarget.getElement(n):l.current;if(f&&e.isEnabled)try{e.request(f),e.on("change",i)}catch(d){console.error(d)}},c=()=>{e.isEnabled&&e.exit()},u=()=>{if(s)return c();o()};return a.useEffect(()=>()=>{e.isEnabled&&e.off("change",i)},[]),n?{enter:o,exit:c,toggle:u,value:s}:{ref:l,enter:o,exit:c,toggle:u,value:s}};exports.useFullscreen=h;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),e=require("screenfull"),b=require("../useRefState/useRefState.cjs"),g=require("../../utils/helpers/isTarget.cjs"),h=((...t)=>{const n=g.isTarget(t[0])?t[0]:void 0,r=n?t[1]:t[0],[s,E]=a.useState(r?.initialValue??!1),l=b.useRefState(),i=()=>{e.isEnabled&&(e.isFullscreen?r?.onEnter?.():(e.off("change",i),r?.onExit?.()),E(e.isFullscreen))},o=()=>{const f=n?g.isTarget.getElement(n):l.current;if(f&&e.isEnabled)try{e.request(f),e.on("change",i)}catch(d){console.error(d)}},c=()=>{e.isEnabled&&e.exit()},u=()=>{if(s)return c();o()};return a.useEffect(()=>()=>{e.isEnabled&&e.off("change",i)},[]),n?{enter:o,exit:c,toggle:u,value:s}:{ref:l,enter:o,exit:c,toggle:u,value:s}});exports.useFullscreen=h;
2
2
  //# sourceMappingURL=useFullscreen.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useFullscreen.cjs","sources":["../../../../src/hooks/useFullscreen/useFullscreen.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport screenfull from 'screenfull';\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 fullscreen options type */\nexport interface UseFullScreenOptions {\n /** initial value */\n initialValue?: boolean;\n /** on enter fullscreen */\n onEnter?: () => void;\n /** on exit fullscreen */\n onExit?: () => void;\n}\n\n/** The use click outside return type */\nexport interface UseFullScreenReturn {\n /** The fullscreen state */\n value: boolean;\n /** The fullscreen enter method */\n enter: () => void;\n /** The fullscreen exit method */\n exit: () => void;\n /** The fullscreen toggle method */\n toggle: () => void;\n}\n\nexport interface UseFullScreen {\n (target: HookTarget, options?: UseFullScreenOptions): UseFullScreenReturn;\n\n <Target extends Element>(\n options?: UseFullScreenOptions,\n target?: never\n ): UseFullScreenReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFullscreen\n * @description - Hook to handle fullscreen events\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn} An object with the fullscreen state and methods\n *\n * @example\n * const { enter, exit, toggle, value } = useFullscreen(ref);\n *\n * @overload\n * @template Target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn & { ref: RefObject<Target> }} An object with the fullscreen state and methods\n *\n * @example\n * const { ref, enter, exit, toggle, value } = useFullscreen();\n */\nexport const useFullscreen = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseFullScreenOptions | undefined;\n\n const [value, setValue] = useState(options?.initialValue ?? false);\n const internalRef = useRefState<Element>();\n\n const onChange = () => {\n if (!screenfull.isEnabled) return;\n\n if (screenfull.isFullscreen) {\n options?.onEnter?.();\n } else {\n screenfull.off('change', onChange);\n options?.onExit?.();\n }\n\n setValue(screenfull.isFullscreen);\n };\n\n const enter = () => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n if (screenfull.isEnabled) {\n try {\n screenfull.request(element);\n screenfull.on('change', onChange);\n } catch (error) {\n console.error(error);\n }\n }\n };\n\n const exit = () => {\n if (screenfull.isEnabled) screenfull.exit();\n };\n\n const toggle = () => {\n if (value) return exit();\n enter();\n };\n\n useEffect(\n () => () => {\n if (screenfull.isEnabled) screenfull.off('change', onChange);\n },\n []\n );\n\n if (target)\n return {\n enter,\n exit,\n toggle,\n value\n };\n return {\n ref: internalRef,\n enter,\n exit,\n toggle,\n value\n };\n}) as UseFullScreen;\n"],"names":["useFullscreen","params","target","isTarget","options","value","setValue","useState","internalRef","useRefState","onChange","screenfull","enter","element","error","exit","toggle","useEffect"],"mappings":"2NAoEaA,EAAiB,IAAIC,IAAkB,CAClD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExC,CAACI,EAAOC,CAAQ,EAAIC,EAAAA,SAASH,GAAS,cAAgB,EAAK,EAC3DI,EAAcC,EAAAA,YAAA,EAEdC,EAAW,IAAM,CAChBC,EAAW,YAEZA,EAAW,aACbP,GAAS,UAAA,GAETO,EAAW,IAAI,SAAUD,CAAQ,EACjCN,GAAS,SAAA,GAGXE,EAASK,EAAW,YAAY,EAAA,EAG5BC,EAAQ,IAAM,CAClB,MAAMC,EAAWX,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,QACpE,GAAKK,GAEDF,EAAW,UACb,GAAI,CACFA,EAAW,QAAQE,CAAO,EAC1BF,EAAW,GAAG,SAAUD,CAAQ,CAAA,OACzBI,EAAO,CACd,QAAQ,MAAMA,CAAK,CAAA,CAEvB,EAGIC,EAAO,IAAM,CACbJ,EAAW,WAAWA,EAAW,KAAA,CAAK,EAGtCK,EAAS,IAAM,CACnB,GAAIX,SAAcU,EAAA,EAClBH,EAAA,CAAM,EAUR,OAPAK,EAAAA,UACE,IAAM,IAAM,CACNN,EAAW,WAAWA,EAAW,IAAI,SAAUD,CAAQ,CAAA,EAE7D,CAAA,CAAC,EAGCR,EACK,CACL,MAAAU,EACA,KAAAG,EACA,OAAAC,EACA,MAAAX,CAAA,EAEG,CACL,IAAKG,EACL,MAAAI,EACA,KAAAG,EACA,OAAAC,EACA,MAAAX,CAAA,CAEJ"}
1
+ {"version":3,"file":"useFullscreen.cjs","sources":["../../../../src/hooks/useFullscreen/useFullscreen.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport screenfull from 'screenfull';\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 fullscreen options type */\nexport interface UseFullScreenOptions {\n /** initial value */\n initialValue?: boolean;\n /** on enter fullscreen */\n onEnter?: () => void;\n /** on exit fullscreen */\n onExit?: () => void;\n}\n\n/** The use click outside return type */\nexport interface UseFullScreenReturn {\n /** The fullscreen state */\n value: boolean;\n /** The fullscreen enter method */\n enter: () => void;\n /** The fullscreen exit method */\n exit: () => void;\n /** The fullscreen toggle method */\n toggle: () => void;\n}\n\nexport interface UseFullScreen {\n (target: HookTarget, options?: UseFullScreenOptions): UseFullScreenReturn;\n\n <Target extends Element>(\n options?: UseFullScreenOptions,\n target?: never\n ): UseFullScreenReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useFullscreen\n * @description - Hook to handle fullscreen events\n * @category Browser\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn} An object with the fullscreen state and methods\n *\n * @example\n * const { enter, exit, toggle, value } = useFullscreen(ref);\n *\n * @overload\n * @template Target The target element for fullscreen\n * @param {boolean} [options.initialValue=false] initial value of fullscreen\n * @param {() => void} [options.onEnter] on enter fullscreen\n * @param {() => void} [options.onExit] on exit fullscreen\n * @returns {UseFullScreenReturn & { ref: RefObject<Target> }} An object with the fullscreen state and methods\n *\n * @example\n * const { ref, enter, exit, toggle, value } = useFullscreen();\n */\nexport const useFullscreen = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseFullScreenOptions | undefined;\n\n const [value, setValue] = useState(options?.initialValue ?? false);\n const internalRef = useRefState<Element>();\n\n const onChange = () => {\n if (!screenfull.isEnabled) return;\n\n if (screenfull.isFullscreen) {\n options?.onEnter?.();\n } else {\n screenfull.off('change', onChange);\n options?.onExit?.();\n }\n\n setValue(screenfull.isFullscreen);\n };\n\n const enter = () => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n if (screenfull.isEnabled) {\n try {\n screenfull.request(element);\n screenfull.on('change', onChange);\n } catch (error) {\n console.error(error);\n }\n }\n };\n\n const exit = () => {\n if (screenfull.isEnabled) screenfull.exit();\n };\n\n const toggle = () => {\n if (value) return exit();\n enter();\n };\n\n useEffect(\n () => () => {\n if (screenfull.isEnabled) screenfull.off('change', onChange);\n },\n []\n );\n\n if (target)\n return {\n enter,\n exit,\n toggle,\n value\n };\n return {\n ref: internalRef,\n enter,\n exit,\n toggle,\n value\n };\n}) as UseFullScreen;\n"],"names":["useFullscreen","params","target","isTarget","options","value","setValue","useState","internalRef","useRefState","onChange","screenfull","enter","element","error","exit","toggle","useEffect"],"mappings":"2NAoEaA,GAAiB,IAAIC,IAAkB,CAClD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExC,CAACI,EAAOC,CAAQ,EAAIC,EAAAA,SAASH,GAAS,cAAgB,EAAK,EAC3DI,EAAcC,EAAAA,YAAA,EAEdC,EAAW,IAAM,CAChBC,EAAW,YAEZA,EAAW,aACbP,GAAS,UAAA,GAETO,EAAW,IAAI,SAAUD,CAAQ,EACjCN,GAAS,SAAA,GAGXE,EAASK,EAAW,YAAY,EAAA,EAG5BC,EAAQ,IAAM,CAClB,MAAMC,EAAWX,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIM,EAAY,QACpE,GAAKK,GAEDF,EAAW,UACb,GAAI,CACFA,EAAW,QAAQE,CAAO,EAC1BF,EAAW,GAAG,SAAUD,CAAQ,CAAA,OACzBI,EAAO,CACd,QAAQ,MAAMA,CAAK,CAAA,CAEvB,EAGIC,EAAO,IAAM,CACbJ,EAAW,WAAWA,EAAW,KAAA,CAAK,EAGtCK,EAAS,IAAM,CACnB,GAAIX,SAAcU,EAAA,EAClBH,EAAA,CAAM,EAUR,OAPAK,EAAAA,UACE,IAAM,IAAM,CACNN,EAAW,WAAWA,EAAW,IAAI,SAAUD,CAAQ,CAAA,EAE7D,CAAA,CAAC,EAGCR,EACK,CACL,MAAAU,EACA,KAAAG,EACA,OAAAC,EACA,MAAAX,CAAA,EAEG,CACL,IAAKG,EACL,MAAAI,EACA,KAAAG,EACA,OAAAC,EACA,MAAAX,CAAA,CAEJ"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),c=()=>decodeURIComponent(window.location.hash.replace("#","")),w=(...e)=>{const i=typeof e[0]=="string"?e[0]:"",t=typeof e[1]=="object"?e[1]:typeof e[1]=="function"?{onChange:e[1]}:typeof e[0]=="object"?e[0]:{},h=t?.enabled??!0,r=t?.mode??"replace",[u,a]=s.useState(()=>typeof window>"u"?i:c()||i),o=s.useRef(t);o.current=t;const f=n=>{window.location.hash=n,a(n),o.current?.onChange?.(n)};return s.useEffect(()=>{if(!h)return;r==="replace"&&(window.location.hash=u);const n=()=>{const d=c();a(d),o.current?.onChange?.(d)};return window.addEventListener("hashchange",n),()=>{window.removeEventListener("hashchange",n)}},[h,r]),[u,f]};exports.getHash=c;exports.useHash=w;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),c=()=>decodeURIComponent(window.location.hash.replace("#","")),w=((...e)=>{const i=typeof e[0]=="string"?e[0]:"",t=typeof e[1]=="object"?e[1]:typeof e[1]=="function"?{onChange:e[1]}:typeof e[0]=="object"?e[0]:{},h=t?.enabled??!0,r=t?.mode??"replace",[u,a]=s.useState(()=>typeof window>"u"?i:c()||i),o=s.useRef(t);o.current=t;const f=n=>{window.location.hash=n,a(n),o.current?.onChange?.(n)};return s.useEffect(()=>{if(!h)return;r==="replace"&&(window.location.hash=u);const n=()=>{const d=c();a(d),o.current?.onChange?.(d)};return window.addEventListener("hashchange",n),()=>{window.removeEventListener("hashchange",n)}},[h,r]),[u,f]});exports.getHash=c;exports.useHash=w;
2
2
  //# sourceMappingURL=useHash.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useHash.cjs","sources":["../../../../src/hooks/useHash/useHash.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));\n\n/** The use hash options type */\nexport interface UseHashOptions {\n /** The enabled state of the hook */\n enabled?: boolean;\n /** The mode of hash setting */\n mode?: 'initial' | 'replace';\n /** Callback function called when hash changes */\n onChange?: (hash: string) => void;\n}\n\n/** The use hash return type */\ntype UseHashReturn = [string, (value: string) => void];\n\nexport interface UseHash {\n (initialValue?: string, options?: UseHashOptions): UseHashReturn;\n\n (options?: UseHashOptions): UseHashReturn;\n\n (initialValue?: string, callback?: (hash: string) => void): UseHashReturn;\n\n (callback?: (hash: string) => void): UseHashReturn;\n}\n\n/**\n * @name useHash\n * @description - Hook that manages the hash value\n * @category State\n * @usage low\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\");\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\", (newHash) => console.log('callback'));\n *\n * @overload\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash();\n *\n * @overload\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash((newHash) => console.log('callback'));\n */\nexport const useHash = ((...params: any[]) => {\n const initialValue = typeof params[0] === 'string' ? params[0] : '';\n const options =\n typeof params[1] === 'object'\n ? params[1]\n : typeof params[1] === 'function'\n ? { onChange: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : {};\n\n const enabled = options?.enabled ?? true;\n const mode = options?.mode ?? 'replace';\n\n const [hash, setHash] = useState(() => {\n if (typeof window === 'undefined') return initialValue;\n return getHash() || initialValue;\n });\n\n const optionsRef = useRef(options);\n optionsRef.current = options;\n\n const set = (value: string) => {\n window.location.hash = value;\n setHash(value);\n optionsRef.current?.onChange?.(value);\n };\n\n useEffect(() => {\n if (!enabled) return;\n\n if (mode === 'replace') window.location.hash = hash;\n\n const onHashChange = () => {\n const newHash = getHash();\n setHash(newHash);\n optionsRef.current?.onChange?.(newHash);\n };\n\n window.addEventListener('hashchange', onHashChange);\n return () => {\n window.removeEventListener('hashchange', onHashChange);\n };\n }, [enabled, mode]);\n\n return [hash, set] as const;\n}) as UseHash;\n"],"names":["getHash","useHash","params","initialValue","options","enabled","mode","hash","setHash","useState","optionsRef","useRef","set","value","useEffect","onHashChange","newHash"],"mappings":"yGAEaA,EAAU,IAAM,mBAAmB,OAAO,SAAS,KAAK,QAAQ,IAAK,EAAE,CAAC,EAmExEC,EAAW,IAAIC,IAAkB,CAC5C,MAAMC,EAAe,OAAOD,EAAO,CAAC,GAAM,SAAWA,EAAO,CAAC,EAAI,GAC3DE,EACJ,OAAOF,EAAO,CAAC,GAAM,SACjBA,EAAO,CAAC,EACR,OAAOA,EAAO,CAAC,GAAM,WACnB,CAAE,SAAUA,EAAO,CAAC,CAAA,EACpB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAA,EAEJG,EAAUD,GAAS,SAAW,GAC9BE,EAAOF,GAAS,MAAQ,UAExB,CAACG,EAAMC,CAAO,EAAIC,EAAAA,SAAS,IAC3B,OAAO,OAAW,IAAoBN,EACnCH,KAAaG,CACrB,EAEKO,EAAaC,EAAAA,OAAOP,CAAO,EACjCM,EAAW,QAAUN,EAErB,MAAMQ,EAAOC,GAAkB,CAC7B,OAAO,SAAS,KAAOA,EACvBL,EAAQK,CAAK,EACbH,EAAW,SAAS,WAAWG,CAAK,CAAA,EAGtCC,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACT,EAAS,OAEVC,IAAS,YAAW,OAAO,SAAS,KAAOC,GAE/C,MAAMQ,EAAe,IAAM,CACzB,MAAMC,EAAUhB,EAAA,EAChBQ,EAAQQ,CAAO,EACfN,EAAW,SAAS,WAAWM,CAAO,CAAA,EAGxC,cAAO,iBAAiB,aAAcD,CAAY,EAC3C,IAAM,CACX,OAAO,oBAAoB,aAAcA,CAAY,CAAA,CACvD,EACC,CAACV,EAASC,CAAI,CAAC,EAEX,CAACC,EAAMK,CAAG,CACnB"}
1
+ {"version":3,"file":"useHash.cjs","sources":["../../../../src/hooks/useHash/useHash.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));\n\n/** The use hash options type */\nexport interface UseHashOptions {\n /** The enabled state of the hook */\n enabled?: boolean;\n /** The mode of hash setting */\n mode?: 'initial' | 'replace';\n /** Callback function called when hash changes */\n onChange?: (hash: string) => void;\n}\n\n/** The use hash return type */\ntype UseHashReturn = [string, (value: string) => void];\n\nexport interface UseHash {\n (initialValue?: string, options?: UseHashOptions): UseHashReturn;\n\n (options?: UseHashOptions): UseHashReturn;\n\n (initialValue?: string, callback?: (hash: string) => void): UseHashReturn;\n\n (callback?: (hash: string) => void): UseHashReturn;\n}\n\n/**\n * @name useHash\n * @description - Hook that manages the hash value\n * @category State\n * @usage low\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\");\n *\n * @overload\n * @param {string} [initialValue] The initial hash value if no hash exists\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash(\"initial\", (newHash) => console.log('callback'));\n *\n * @overload\n * @param {UseHashOptions} [options] Configuration options\n * @param {boolean} [options.enabled] The enabled state of the hook\n * @param {'initial' | 'replace'} [options.mode] The mode of hash setting\n * @param {(hash: string) => void} [options.onChange] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash();\n *\n * @overload\n * @param {(hash: string) => void} [callback] Callback function called when hash changes\n * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value\n *\n * @example\n * const [hash, setHash] = useHash((newHash) => console.log('callback'));\n */\nexport const useHash = ((...params: any[]) => {\n const initialValue = typeof params[0] === 'string' ? params[0] : '';\n const options =\n typeof params[1] === 'object'\n ? params[1]\n : typeof params[1] === 'function'\n ? { onChange: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : {};\n\n const enabled = options?.enabled ?? true;\n const mode = options?.mode ?? 'replace';\n\n const [hash, setHash] = useState(() => {\n if (typeof window === 'undefined') return initialValue;\n return getHash() || initialValue;\n });\n\n const optionsRef = useRef(options);\n optionsRef.current = options;\n\n const set = (value: string) => {\n window.location.hash = value;\n setHash(value);\n optionsRef.current?.onChange?.(value);\n };\n\n useEffect(() => {\n if (!enabled) return;\n\n if (mode === 'replace') window.location.hash = hash;\n\n const onHashChange = () => {\n const newHash = getHash();\n setHash(newHash);\n optionsRef.current?.onChange?.(newHash);\n };\n\n window.addEventListener('hashchange', onHashChange);\n return () => {\n window.removeEventListener('hashchange', onHashChange);\n };\n }, [enabled, mode]);\n\n return [hash, set] as const;\n}) as UseHash;\n"],"names":["getHash","useHash","params","initialValue","options","enabled","mode","hash","setHash","useState","optionsRef","useRef","set","value","useEffect","onHashChange","newHash"],"mappings":"yGAEaA,EAAU,IAAM,mBAAmB,OAAO,SAAS,KAAK,QAAQ,IAAK,EAAE,CAAC,EAmExEC,GAAW,IAAIC,IAAkB,CAC5C,MAAMC,EAAe,OAAOD,EAAO,CAAC,GAAM,SAAWA,EAAO,CAAC,EAAI,GAC3DE,EACJ,OAAOF,EAAO,CAAC,GAAM,SACjBA,EAAO,CAAC,EACR,OAAOA,EAAO,CAAC,GAAM,WACnB,CAAE,SAAUA,EAAO,CAAC,CAAA,EACpB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAA,EAEJG,EAAUD,GAAS,SAAW,GAC9BE,EAAOF,GAAS,MAAQ,UAExB,CAACG,EAAMC,CAAO,EAAIC,EAAAA,SAAS,IAC3B,OAAO,OAAW,IAAoBN,EACnCH,KAAaG,CACrB,EAEKO,EAAaC,EAAAA,OAAOP,CAAO,EACjCM,EAAW,QAAUN,EAErB,MAAMQ,EAAOC,GAAkB,CAC7B,OAAO,SAAS,KAAOA,EACvBL,EAAQK,CAAK,EACbH,EAAW,SAAS,WAAWG,CAAK,CAAA,EAGtCC,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACT,EAAS,OAEVC,IAAS,YAAW,OAAO,SAAS,KAAOC,GAE/C,MAAMQ,EAAe,IAAM,CACzB,MAAMC,EAAUhB,EAAA,EAChBQ,EAAQQ,CAAO,EACfN,EAAW,SAAS,WAAWM,CAAO,CAAA,EAGxC,cAAO,iBAAiB,aAAcD,CAAY,EAC3C,IAAM,CACX,OAAO,oBAAoB,aAAcA,CAAY,CAAA,CACvD,EACC,CAACV,EAASC,CAAI,CAAC,EAEX,CAACC,EAAMK,CAAG,CACnB"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),L=require("../useEvent/useEvent.cjs"),g=require("../useRefState/useRefState.cjs"),w=require("../../utils/helpers/isTarget.cjs"),E=(t,o)=>t.toLowerCase().split(/[+_,\-]/g).map(r=>r.trim()).every(r=>o.find(s=>r===s.code.toLocaleLowerCase()||r===s.key.toLocaleLowerCase()||r===s.alias.toLocaleLowerCase())),h=(...t)=>{const o=w.isTarget(t[0])?t[0]:void 0,r=o?t[1]:t[0],s=o?t[2]:t[1],y=o?t[3]:t[2],i=g.useRefState(window),n=k.useRef([]),u=y?.enabled??!0,a=L.useEvent(e=>{if(!u||n.current.some(({code:c})=>c===e.code))return;const f=y?.alias?.[e.key]??e.code,d=[...n.current,{key:e.key,code:e.code,alias:f}];n.current=d,r.split(",").map(c=>c.trim()).some(c=>E(c,d))&&(e.preventDefault(),s(e))}),l=L.useEvent(e=>{u&&(n.current=n.current.filter(({code:f})=>f!==e.code))});if(k.useEffect(()=>{if(n.current=[],!o&&!i.state&&!u)return;const e=o?w.isTarget.getElement(o):i.current;if(e)return e.addEventListener("keydown",a),e.addEventListener("keyup",l),()=>{e.removeEventListener("keydown",a),e.removeEventListener("keyup",l)}},[o,i.state,u,r,a,l]),!o)return i};exports.isHotkeyMatch=E;exports.useHotkeys=h;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react"),g=require("../useEvent/useEvent.cjs"),E=require("../useRefState/useRefState.cjs"),y=require("../../utils/helpers/isTarget.cjs"),w=(o,t)=>o.toLowerCase().split(/[+_,\-]/g).map(r=>r.trim()).every(r=>t.find(n=>r===n.code.toLocaleLowerCase()||r===n.key.toLocaleLowerCase()||r===n.alias.toLocaleLowerCase())),h=((...o)=>{const t=y.isTarget(o[0])?o[0]:void 0,r=t?o[1]:o[0],n=t?o[2]:o[1],d=t?o[3]:o[2],i=E.useRefState(window),s=L.useRef([]),u=d?.enabled??!0,a=g.useEvent(e=>{if(!u||s.current.some(({code:c})=>c===e.code))return;const f=d?.alias?.[e.key]??e.code,k=[...s.current,{key:e.key,code:e.code,alias:f}];s.current=k,r.split(",").map(c=>c.trim()).some(c=>w(c,k))&&(e.preventDefault(),n(e))}),l=g.useEvent(e=>{u&&(s.current=s.current.filter(({code:f})=>f!==e.code))});if(L.useEffect(()=>{if(s.current=[],!t&&!i.state&&!u)return;const e=t?y.isTarget.getElement(t):i.current;if(e)return e.addEventListener("keydown",a),e.addEventListener("keyup",l),()=>{e.removeEventListener("keydown",a),e.removeEventListener("keyup",l)}},[t,i.state,y.isTarget.getRefState(t),u,r,a,l]),!t)return i});exports.isHotkeyMatch=w;exports.useHotkeys=h;
2
2
  //# sourceMappingURL=useHotkeys.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useHotkeys.cjs","sources":["../../../../src/hooks/useHotkeys/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useEvent } from '../useEvent/useEvent';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use hotkeys params type */\nexport interface UseHotkeysOptions {\n /** Alias map for hotkeys */\n alias?: Record<string, string>;\n /** Enable or disable the event listeners */\n enabled?: boolean;\n}\n\nexport const isHotkeyMatch = (hotkey: string, keys: UseHotkeysKey[]) =>\n hotkey\n .toLowerCase()\n .split(/[+_,\\-]/g)\n .map((key) => key.trim())\n .every((key) =>\n keys.find(\n (updatedKey) =>\n key === updatedKey.code.toLocaleLowerCase() ||\n key === updatedKey.key.toLocaleLowerCase() ||\n key === updatedKey.alias.toLocaleLowerCase()\n )\n );\n\n/** The hotkeys string type */\nexport type UseHotkeysHotkeys = string;\n\n/** The hotkey key information */\nexport interface UseHotkeysKey {\n /** The alias for the key */\n alias: string;\n /** The key code */\n code: string;\n /** The key value */\n key: string;\n}\n\n/** The use hotkeys target type */\nexport type UseHotkeysTarget = Element | React.RefObject<Element | null | undefined>;\n\nexport interface UseHotkeys {\n (\n target: UseHotkeysTarget,\n hotkeys: UseHotkeysHotkeys,\n callback: (event: KeyboardEvent) => void,\n options?: UseHotkeysOptions\n ): void;\n\n <Target extends Element>(\n hotkeys: UseHotkeysHotkeys,\n callback: (event: KeyboardEvent) => void,\n options?: UseHotkeysOptions,\n target?: never\n ): StateRef<Target>;\n}\n\n/**\n * @name useHotkeys\n * @description - Hook that listens for hotkeys\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=window] The target element to attach the event listener to\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {void}\n *\n * @example\n * useHotkeys(ref, 'ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * useHotkeys(ref, 'ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n *\n * @overload\n * @template Target The target element\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {StateRef<Target>} A reference to the target element\n *\n * @example\n * const ref = useHotkeys('ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * const ref = useHotkeys('ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n */\nexport const useHotkeys = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const hotkeys = (target ? params[1] : params[0]) as UseHotkeysHotkeys;\n const callback = (target ? params[2] : params[1]) as (event: KeyboardEvent) => void;\n const options = (target ? params[3] : params[2]) as UseHotkeysOptions | undefined;\n\n const internalRef = useRefState(window);\n const keysRef = useRef<UseHotkeysKey[]>([]);\n const enabled = options?.enabled ?? true;\n\n const onKeyDown = useEvent((event: KeyboardEvent) => {\n if (!enabled) return;\n\n if (keysRef.current.some(({ code }) => code === event.code)) return;\n\n const alias = options?.alias?.[event.key] ?? event.code;\n const updatedKeys = [...keysRef.current, { key: event.key, code: event.code, alias }];\n keysRef.current = updatedKeys;\n\n const hotkeysList = hotkeys.split(',').map((h) => h.trim());\n const isMatch = hotkeysList.some((hotkey) => isHotkeyMatch(hotkey, updatedKeys));\n if (!isMatch) return;\n event.preventDefault();\n callback(event);\n });\n\n const onKeyUp = useEvent((event: KeyboardEvent) => {\n if (!enabled) return;\n keysRef.current = keysRef.current.filter(({ code }) => code !== event.code);\n });\n\n useEffect(() => {\n keysRef.current = [];\n if (!target && !internalRef.state && !enabled) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n element.addEventListener('keydown', onKeyDown as EventListener);\n element.addEventListener('keyup', onKeyUp as EventListener);\n\n return () => {\n element.removeEventListener('keydown', onKeyDown as EventListener);\n element.removeEventListener('keyup', onKeyUp as EventListener);\n };\n }, [target, internalRef.state, enabled, hotkeys, onKeyDown, onKeyUp]);\n\n if (target) return;\n return internalRef;\n}) as UseHotkeys;\n"],"names":["isHotkeyMatch","hotkey","keys","key","updatedKey","useHotkeys","params","target","isTarget","hotkeys","callback","options","internalRef","useRefState","keysRef","useRef","enabled","onKeyDown","useEvent","event","code","alias","updatedKeys","h","onKeyUp","useEffect","element"],"mappings":"yOAmBaA,EAAgB,CAACC,EAAgBC,IAC5CD,EACG,cACA,MAAM,UAAU,EAChB,IAAKE,GAAQA,EAAI,KAAA,CAAM,EACvB,MAAOA,GACND,EAAK,KACFE,GACCD,IAAQC,EAAW,KAAK,kBAAA,GACxBD,IAAQC,EAAW,IAAI,kBAAA,GACvBD,IAAQC,EAAW,MAAM,kBAAA,CAAkB,CAEjD,EAkESC,EAAc,IAAIC,IAAkB,CAC/C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACxCI,EAAYH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCK,EAAWJ,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCM,EAAcC,EAAAA,YAAY,MAAM,EAChCC,EAAUC,EAAAA,OAAwB,EAAE,EACpCC,EAAUL,GAAS,SAAW,GAE9BM,EAAYC,WAAUC,GAAyB,CAGnD,GAFI,CAACH,GAEDF,EAAQ,QAAQ,KAAK,CAAC,CAAE,KAAAM,KAAWA,IAASD,EAAM,IAAI,EAAG,OAE7D,MAAME,EAAQV,GAAS,QAAQQ,EAAM,GAAG,GAAKA,EAAM,KAC7CG,EAAc,CAAC,GAAGR,EAAQ,QAAS,CAAE,IAAKK,EAAM,IAAK,KAAMA,EAAM,KAAM,MAAAE,EAAO,EACpFP,EAAQ,QAAUQ,EAEEb,EAAQ,MAAM,GAAG,EAAE,IAAKc,GAAMA,EAAE,MAAM,EAC9B,KAAMtB,GAAWD,EAAcC,EAAQqB,CAAW,CAAC,IAE/EH,EAAM,eAAA,EACNT,EAASS,CAAK,EAAA,CACf,EAEKK,EAAUN,WAAUC,GAAyB,CAC5CH,IACLF,EAAQ,QAAUA,EAAQ,QAAQ,OAAO,CAAC,CAAE,KAAAM,KAAWA,IAASD,EAAM,IAAI,EAAA,CAC3E,EAkBD,GAhBAM,EAAAA,UAAU,IAAM,CAEd,GADAX,EAAQ,QAAU,CAAA,EACd,CAACP,GAAU,CAACK,EAAY,OAAS,CAACI,EAAS,OAE/C,MAAMU,EAAWnB,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIK,EAAY,QACpE,GAAKc,EAEL,OAAAA,EAAQ,iBAAiB,UAAWT,CAA0B,EAC9DS,EAAQ,iBAAiB,QAASF,CAAwB,EAEnD,IAAM,CACXE,EAAQ,oBAAoB,UAAWT,CAA0B,EACjES,EAAQ,oBAAoB,QAASF,CAAwB,CAAA,CAC/D,EACC,CAACjB,EAAQK,EAAY,MAAOI,EAASP,EAASQ,EAAWO,CAAO,CAAC,EAEhE,CAAAjB,EACJ,OAAOK,CACT"}
1
+ {"version":3,"file":"useHotkeys.cjs","sources":["../../../../src/hooks/useHotkeys/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useEvent } from '../useEvent/useEvent';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use hotkeys params type */\nexport interface UseHotkeysOptions {\n /** Alias map for hotkeys */\n alias?: Record<string, string>;\n /** Enable or disable the event listeners */\n enabled?: boolean;\n}\n\nexport const isHotkeyMatch = (hotkey: string, keys: UseHotkeysKey[]) =>\n hotkey\n .toLowerCase()\n .split(/[+_,\\-]/g)\n .map((key) => key.trim())\n .every((key) =>\n keys.find(\n (updatedKey) =>\n key === updatedKey.code.toLocaleLowerCase() ||\n key === updatedKey.key.toLocaleLowerCase() ||\n key === updatedKey.alias.toLocaleLowerCase()\n )\n );\n\n/** The hotkeys string type */\nexport type UseHotkeysHotkeys = string;\n\n/** The hotkey key information */\nexport interface UseHotkeysKey {\n /** The alias for the key */\n alias: string;\n /** The key code */\n code: string;\n /** The key value */\n key: string;\n}\n\n/** The use hotkeys target type */\nexport type UseHotkeysTarget = Element | React.RefObject<Element | null | undefined>;\n\nexport interface UseHotkeys {\n (\n target: UseHotkeysTarget,\n hotkeys: UseHotkeysHotkeys,\n callback: (event: KeyboardEvent) => void,\n options?: UseHotkeysOptions\n ): void;\n\n <Target extends Element>(\n hotkeys: UseHotkeysHotkeys,\n callback: (event: KeyboardEvent) => void,\n options?: UseHotkeysOptions,\n target?: never\n ): StateRef<Target>;\n}\n\n/**\n * @name useHotkeys\n * @description - Hook that listens for hotkeys\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=window] The target element to attach the event listener to\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {void}\n *\n * @example\n * useHotkeys(ref, 'ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * useHotkeys(ref, 'ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n *\n * @overload\n * @template Target The target element\n * @param {string} hotkeys The hotkey to listen for\n * @param {(event: KeyboardEvent) => void} callback The callback function to execute when hotkey is pressed\n * @param {Record<string, string>} [options.alias] Alias map for hotkeys\n * @param {boolean} [options.enabled=true] Enable or disable the event listeners\n * @returns {StateRef<Target>} A reference to the target element\n *\n * @example\n * const ref = useHotkeys('ctrl+a', () => console.log('hotkey pressed'));\n * @example\n * const ref = useHotkeys('ctrl+a, ctrl+b', () => console.log('hotkey pressed'));\n */\nexport const useHotkeys = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const hotkeys = (target ? params[1] : params[0]) as UseHotkeysHotkeys;\n const callback = (target ? params[2] : params[1]) as (event: KeyboardEvent) => void;\n const options = (target ? params[3] : params[2]) as UseHotkeysOptions | undefined;\n\n const internalRef = useRefState(window);\n const keysRef = useRef<UseHotkeysKey[]>([]);\n const enabled = options?.enabled ?? true;\n\n const onKeyDown = useEvent((event: KeyboardEvent) => {\n if (!enabled) return;\n\n if (keysRef.current.some(({ code }) => code === event.code)) return;\n\n const alias = options?.alias?.[event.key] ?? event.code;\n const updatedKeys = [...keysRef.current, { key: event.key, code: event.code, alias }];\n keysRef.current = updatedKeys;\n\n const hotkeysList = hotkeys.split(',').map((h) => h.trim());\n const isMatch = hotkeysList.some((hotkey) => isHotkeyMatch(hotkey, updatedKeys));\n if (!isMatch) return;\n event.preventDefault();\n callback(event);\n });\n\n const onKeyUp = useEvent((event: KeyboardEvent) => {\n if (!enabled) return;\n keysRef.current = keysRef.current.filter(({ code }) => code !== event.code);\n });\n\n useEffect(() => {\n keysRef.current = [];\n if (!target && !internalRef.state && !enabled) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n element.addEventListener('keydown', onKeyDown as EventListener);\n element.addEventListener('keyup', onKeyUp as EventListener);\n\n return () => {\n element.removeEventListener('keydown', onKeyDown as EventListener);\n element.removeEventListener('keyup', onKeyUp as EventListener);\n };\n }, [\n target,\n internalRef.state,\n isTarget.getRefState(target),\n enabled,\n hotkeys,\n onKeyDown,\n onKeyUp\n ]);\n\n if (target) return;\n return internalRef;\n}) as UseHotkeys;\n"],"names":["isHotkeyMatch","hotkey","keys","key","updatedKey","useHotkeys","params","target","isTarget","hotkeys","callback","options","internalRef","useRefState","keysRef","useRef","enabled","onKeyDown","useEvent","event","code","alias","updatedKeys","h","onKeyUp","useEffect","element"],"mappings":"yOAmBaA,EAAgB,CAACC,EAAgBC,IAC5CD,EACG,cACA,MAAM,UAAU,EAChB,IAAKE,GAAQA,EAAI,KAAA,CAAM,EACvB,MAAOA,GACND,EAAK,KACFE,GACCD,IAAQC,EAAW,KAAK,kBAAA,GACxBD,IAAQC,EAAW,IAAI,kBAAA,GACvBD,IAAQC,EAAW,MAAM,kBAAA,CAAkB,CAEjD,EAkESC,GAAc,IAAIC,IAAkB,CAC/C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACxCI,EAAYH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCK,EAAWJ,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCM,EAAcC,EAAAA,YAAY,MAAM,EAChCC,EAAUC,EAAAA,OAAwB,EAAE,EACpCC,EAAUL,GAAS,SAAW,GAE9BM,EAAYC,WAAUC,GAAyB,CAGnD,GAFI,CAACH,GAEDF,EAAQ,QAAQ,KAAK,CAAC,CAAE,KAAAM,KAAWA,IAASD,EAAM,IAAI,EAAG,OAE7D,MAAME,EAAQV,GAAS,QAAQQ,EAAM,GAAG,GAAKA,EAAM,KAC7CG,EAAc,CAAC,GAAGR,EAAQ,QAAS,CAAE,IAAKK,EAAM,IAAK,KAAMA,EAAM,KAAM,MAAAE,EAAO,EACpFP,EAAQ,QAAUQ,EAEEb,EAAQ,MAAM,GAAG,EAAE,IAAKc,GAAMA,EAAE,MAAM,EAC9B,KAAMtB,GAAWD,EAAcC,EAAQqB,CAAW,CAAC,IAE/EH,EAAM,eAAA,EACNT,EAASS,CAAK,EAAA,CACf,EAEKK,EAAUN,WAAUC,GAAyB,CAC5CH,IACLF,EAAQ,QAAUA,EAAQ,QAAQ,OAAO,CAAC,CAAE,KAAAM,KAAWA,IAASD,EAAM,IAAI,EAAA,CAC3E,EA0BD,GAxBAM,EAAAA,UAAU,IAAM,CAEd,GADAX,EAAQ,QAAU,CAAA,EACd,CAACP,GAAU,CAACK,EAAY,OAAS,CAACI,EAAS,OAE/C,MAAMU,EAAWnB,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIK,EAAY,QACpE,GAAKc,EAEL,OAAAA,EAAQ,iBAAiB,UAAWT,CAA0B,EAC9DS,EAAQ,iBAAiB,QAASF,CAAwB,EAEnD,IAAM,CACXE,EAAQ,oBAAoB,UAAWT,CAA0B,EACjES,EAAQ,oBAAoB,QAASF,CAAwB,CAAA,CAC/D,EACC,CACDjB,EACAK,EAAY,MACZJ,EAAAA,SAAS,YAAYD,CAAM,EAC3BS,EACAP,EACAQ,EACAO,CAAA,CACD,EAEG,CAAAjB,EACJ,OAAOK,CACT"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),d=require("../useRefState/useRefState.cjs"),E=require("../../utils/helpers/isTarget.cjs"),g=(...e)=>{const t=E.isTarget(e[0])?e[0]:void 0,o=t?typeof e[1]=="object"?e[1]:{onEntry:e[1]}:typeof e[0]=="object"?e[0]:{onEntry:e[0]},i=o?.enabled??!0,[v,f]=c.useState(!1),r=d.useRefState(),s=c.useRef(o);return s.current=o,c.useEffect(()=>{if(!i||!t&&!r.state)return;const n=t?E.isTarget.getElement(t):r.current;if(!n)return;const l=u=>{s.current?.onEntry?.(u),f(!0)},a=u=>{s.current?.onLeave?.(u),f(!1)};return n.addEventListener("mouseenter",l),n.addEventListener("mouseleave",a),()=>{n.removeEventListener("mouseenter",l),n.removeEventListener("mouseleave",a)}},[i,t,r.state]),t?v:{ref:r,value:v}};exports.useHover=g;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),E=require("../useRefState/useRefState.cjs"),c=require("../../utils/helpers/isTarget.cjs"),d=((...e)=>{const t=c.isTarget(e[0])?e[0]:void 0,o=t?typeof e[1]=="object"?e[1]:{onEntry:e[1]}:typeof e[0]=="object"?e[0]:{onEntry:e[0]},f=o?.enabled??!0,[v,l]=i.useState(!1),r=E.useRefState(),s=i.useRef(o);return s.current=o,i.useEffect(()=>{if(!f||!t&&!r.state)return;const n=t?c.isTarget.getElement(t):r.current;if(!n)return;const a=u=>{s.current?.onEntry?.(u),l(!0)},g=u=>{s.current?.onLeave?.(u),l(!1)};return n.addEventListener("mouseenter",a),n.addEventListener("mouseleave",g),()=>{n.removeEventListener("mouseenter",a),n.removeEventListener("mouseleave",g)}},[f,t,r.state,c.isTarget.getRefState(t)]),t?v:{ref:r,value:v}});exports.useHover=d;
2
2
  //# sourceMappingURL=useHover.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useHover.cjs","sources":["../../../../src/hooks/useHover/useHover.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use hover options type */\nexport interface UseHoverOptions {\n /** The enabled state of the hook */\n enabled?: boolean;\n /** The on entry callback */\n onEntry?: (event: Event) => void;\n /** The on leave callback */\n onLeave?: (event: Event) => void;\n}\n\nexport interface UseHoverReturn {\n value: boolean;\n}\n\nexport interface UseHover {\n (target: HookTarget, callback?: (event: Event) => void): boolean;\n\n (target: HookTarget, options?: UseHoverOptions): boolean;\n\n <Target extends Element>(\n callback?: (event: Event) => void,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseHoverReturn;\n\n <Target extends Element>(\n options?: UseHoverOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseHoverReturn;\n}\n\n/**\n * @name useHover\n * @description - Hook that defines the logic when hovering an element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {boolean} The state of the hover\n *\n * @example\n * const hovering = useHover(ref, () => console.log('callback'));\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {boolean} The state of the hover\n *\n * @example\n * const hovering = useHover(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The state of the hover\n *\n * @example\n * const [ref, hovering] = useHover(() => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The state of the hover\n *\n * @example\n * const [ref, hovering] = useHover(options);\n */\nexport const useHover = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onEntry: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onEntry: params[0] }\n ) as UseHoverOptions | undefined;\n\n const enabled = options?.enabled ?? true;\n\n const [hovering, setHovering] = useState(false);\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const onMouseEnter = (event: Event) => {\n internalOptionsRef.current?.onEntry?.(event);\n setHovering(true);\n };\n\n const onMouseLeave = (event: Event) => {\n internalOptionsRef.current?.onLeave?.(event);\n setHovering(false);\n };\n\n element.addEventListener('mouseenter', onMouseEnter);\n element.addEventListener('mouseleave', onMouseLeave);\n\n return () => {\n element.removeEventListener('mouseenter', onMouseEnter);\n element.removeEventListener('mouseleave', onMouseLeave);\n };\n }, [enabled, target, internalRef.state]);\n\n if (target) return hovering;\n return {\n ref: internalRef,\n value: hovering\n } as const;\n}) as UseHover;\n"],"names":["useHover","params","target","isTarget","options","enabled","hovering","setHovering","useState","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","onMouseEnter","event","onMouseLeave"],"mappings":"mMAoFaA,EAAY,IAAIC,IAAkB,CAC7C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EACrB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EAGrBI,EAAUD,GAAS,SAAW,GAE9B,CAACE,EAAUC,CAAW,EAAIC,EAAAA,SAAS,EAAK,EACxCC,EAAcC,EAAAA,YAAA,EACdC,EAAqBC,EAAAA,OAAOR,CAAO,EA6BzC,OA5BAO,EAAmB,QAAUP,EAE7BS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACR,GAAY,CAACH,GAAU,CAACO,EAAY,MAAQ,OAEjD,MAAMK,EAAWZ,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIO,EAAY,QAEpE,GAAI,CAACK,EAAS,OAEd,MAAMC,EAAgBC,GAAiB,CACrCL,EAAmB,SAAS,UAAUK,CAAK,EAC3CT,EAAY,EAAI,CAAA,EAGZU,EAAgBD,GAAiB,CACrCL,EAAmB,SAAS,UAAUK,CAAK,EAC3CT,EAAY,EAAK,CAAA,EAGnB,OAAAO,EAAQ,iBAAiB,aAAcC,CAAY,EACnDD,EAAQ,iBAAiB,aAAcG,CAAY,EAE5C,IAAM,CACXH,EAAQ,oBAAoB,aAAcC,CAAY,EACtDD,EAAQ,oBAAoB,aAAcG,CAAY,CAAA,CACxD,EACC,CAACZ,EAASH,EAAQO,EAAY,KAAK,CAAC,EAEnCP,EAAeI,EACZ,CACL,IAAKG,EACL,MAAOH,CAAA,CAEX"}
1
+ {"version":3,"file":"useHover.cjs","sources":["../../../../src/hooks/useHover/useHover.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use hover options type */\nexport interface UseHoverOptions {\n /** The enabled state of the hook */\n enabled?: boolean;\n /** The on entry callback */\n onEntry?: (event: Event) => void;\n /** The on leave callback */\n onLeave?: (event: Event) => void;\n}\n\nexport interface UseHoverReturn {\n value: boolean;\n}\n\nexport interface UseHover {\n (target: HookTarget, callback?: (event: Event) => void): boolean;\n\n (target: HookTarget, options?: UseHoverOptions): boolean;\n\n <Target extends Element>(\n callback?: (event: Event) => void,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseHoverReturn;\n\n <Target extends Element>(\n options?: UseHoverOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseHoverReturn;\n}\n\n/**\n * @name useHover\n * @description - Hook that defines the logic when hovering an element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {boolean} The value of the hover\n *\n * @example\n * const hovering = useHover(ref, () => console.log('callback'));\n *\n * @overload\n * @param {HookTarget} target The target element to be hovered\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {boolean} The value of the hover\n *\n * @example\n * const hovering = useHover(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [callback] The callback function to be invoked on mouse enter\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The object with the ref and the value of the hover\n *\n * @example\n * const { ref, value } = useHover(() => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} [options.onEntry] The callback function to be invoked on mouse enter\n * @param {(event: Event) => void} [options.onLeave] The callback function to be invoked on mouse leave\n * @returns {{ ref: StateRef<Target> } & UseHoverReturn} The object with the ref and the value of the hover\n *\n * @example\n * const { ref, value } = useHover(options);\n */\nexport const useHover = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onEntry: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onEntry: params[0] }\n ) as UseHoverOptions | undefined;\n\n const enabled = options?.enabled ?? true;\n\n const [hovering, setHovering] = useState(false);\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const onMouseEnter = (event: Event) => {\n internalOptionsRef.current?.onEntry?.(event);\n setHovering(true);\n };\n\n const onMouseLeave = (event: Event) => {\n internalOptionsRef.current?.onLeave?.(event);\n setHovering(false);\n };\n\n element.addEventListener('mouseenter', onMouseEnter);\n element.addEventListener('mouseleave', onMouseLeave);\n\n return () => {\n element.removeEventListener('mouseenter', onMouseEnter);\n element.removeEventListener('mouseleave', onMouseLeave);\n };\n }, [enabled, target, internalRef.state, isTarget.getRefState(target)]);\n\n if (target) return hovering;\n return {\n ref: internalRef,\n value: hovering\n } as const;\n}) as UseHover;\n"],"names":["useHover","params","target","isTarget","options","enabled","hovering","setHovering","useState","internalRef","useRefState","internalOptionsRef","useRef","useEffect","element","onMouseEnter","event","onMouseLeave"],"mappings":"mMAoFaA,GAAY,IAAIC,IAAkB,CAC7C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EACrB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,QAASA,EAAO,CAAC,CAAA,EAGrBI,EAAUD,GAAS,SAAW,GAE9B,CAACE,EAAUC,CAAW,EAAIC,EAAAA,SAAS,EAAK,EACxCC,EAAcC,EAAAA,YAAA,EACdC,EAAqBC,EAAAA,OAAOR,CAAO,EA6BzC,OA5BAO,EAAmB,QAAUP,EAE7BS,EAAAA,UAAU,IAAM,CACd,GAAI,CAACR,GAAY,CAACH,GAAU,CAACO,EAAY,MAAQ,OAEjD,MAAMK,EAAWZ,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIO,EAAY,QAEpE,GAAI,CAACK,EAAS,OAEd,MAAMC,EAAgBC,GAAiB,CACrCL,EAAmB,SAAS,UAAUK,CAAK,EAC3CT,EAAY,EAAI,CAAA,EAGZU,EAAgBD,GAAiB,CACrCL,EAAmB,SAAS,UAAUK,CAAK,EAC3CT,EAAY,EAAK,CAAA,EAGnB,OAAAO,EAAQ,iBAAiB,aAAcC,CAAY,EACnDD,EAAQ,iBAAiB,aAAcG,CAAY,EAE5C,IAAM,CACXH,EAAQ,oBAAoB,aAAcC,CAAY,EACtDD,EAAQ,oBAAoB,aAAcG,CAAY,CAAA,CACxD,EACC,CAACZ,EAASH,EAAQO,EAAY,MAAON,WAAS,YAAYD,CAAM,CAAC,CAAC,EAEjEA,EAAeI,EACZ,CACL,IAAKG,EACL,MAAOH,CAAA,CAEX"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),I=require("../useRefState/useRefState.cjs"),h=require("../../utils/helpers/isTarget.cjs"),k=(...e)=>{const t=h.isTarget(e[0])?e[0]:void 0,c=t?e[1]:e[0],i=t?e[2]:e[1],l=i?.direction??"bottom",u=i?.distance??10,[n,a]=o.useState(!1),r=I.useRefState(),f=o.useRef(c);f.current=c;const d=o.useRef(n);return d.current=n,o.useEffect(()=>{if(!t&&!r.state)return;const s=t?h.isTarget.getElement(t):r.current;if(!s)return;const g=async R=>{if(d.current)return;const{clientHeight:L,scrollHeight:T,scrollTop:S,clientWidth:v,scrollWidth:E,scrollLeft:b}=R.target,q=T-(S+L),y=E-(b+v);({bottom:q,top:S,right:y,left:b})[l]<=u&&(a(!0),await f.current(R),a(!1))};return s.addEventListener("scroll",g),()=>{s.removeEventListener("scroll",g)}},[t,r.state,l,u]),t?n:{ref:r,loading:n}};exports.useInfiniteScroll=k;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),I=require("../useRefState/useRefState.cjs"),c=require("../../utils/helpers/isTarget.cjs"),k=((...e)=>{const t=c.isTarget(e[0])?e[0]:void 0,i=t?e[1]:e[0],l=t?e[2]:e[1],a=l?.direction??"bottom",u=l?.distance??10,[n,f]=o.useState(!1),r=I.useRefState(),d=o.useRef(i);d.current=i;const g=o.useRef(n);return g.current=n,o.useEffect(()=>{if(!t&&!r.state)return;const s=t?c.isTarget.getElement(t):r.current;if(!s)return;const R=async S=>{if(g.current)return;const{clientHeight:L,scrollHeight:T,scrollTop:b,clientWidth:v,scrollWidth:E,scrollLeft:h}=S.target,q=T-(b+L),y=E-(h+v);({bottom:q,top:b,right:y,left:h})[a]<=u&&(f(!0),await d.current(S),f(!1))};return s.addEventListener("scroll",R),()=>{s.removeEventListener("scroll",R)}},[t,r.state,c.isTarget.getRefState(t),a,u]),t?n:{ref:r,loading:n}});exports.useInfiniteScroll=k;
2
2
  //# sourceMappingURL=useInfiniteScroll.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useInfiniteScroll.cjs","sources":["../../../../src/hooks/useInfiniteScroll/useInfiniteScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use infinite scroll options type */\nexport interface UseInfiniteScrollOptions {\n /** The direction to trigger the callback */\n direction?: 'bottom' | 'left' | 'right' | 'top';\n /** The distance in pixels to trigger the callback */\n distance?: number;\n}\n\nexport interface UseInfiniteScroll {\n (\n target: HookTarget,\n callback: (event: Event) => void,\n options?: UseInfiniteScrollOptions\n ): boolean;\n\n <Target extends Element>(\n callback: (event: Event) => void,\n options?: UseInfiniteScrollOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n loading: boolean;\n };\n}\n\n/**\n * @name useInfiniteScroll\n * @description - Hook that defines the logic for infinite scroll\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {{ ref: StateRef<Target>, loading: boolean }} An object containing the ref and loading\n *\n * @example\n * const { ref, loading } = useInfiniteScroll(() => console.log('infinite scroll'));\n *\n * @overload\n * @param {HookTarget} target The target element to detect infinite scroll for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {boolean} A loading indicator of the infinite scroll\n *\n * @example\n * const loading = useInfiniteScroll(ref, () => console.log('infinite scroll'));\n */\nexport const useInfiniteScroll = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const callback = (target ? params[1] : params[0]) as (event: Event) => void;\n const options = (target ? params[2] : params[1]) as UseInfiniteScrollOptions | undefined;\n\n const direction = options?.direction ?? 'bottom';\n const distance = options?.distance ?? 10;\n\n const [loading, setIsLoading] = useState(false);\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalLoadingRef = useRef(loading);\n internalLoadingRef.current = loading;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const onLoadMore = async (event: Event) => {\n if (internalLoadingRef.current) return;\n\n const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } =\n event.target as Element;\n const scrollBottom = scrollHeight - (scrollTop + clientHeight);\n const scrollRight = scrollWidth - (scrollLeft + clientWidth);\n\n const distances = {\n bottom: scrollBottom,\n top: scrollTop,\n right: scrollRight,\n left: scrollLeft\n };\n\n if (distances[direction] <= distance) {\n setIsLoading(true);\n await internalCallbackRef.current(event);\n setIsLoading(false);\n }\n };\n\n element.addEventListener('scroll', onLoadMore);\n\n return () => {\n element.removeEventListener('scroll', onLoadMore);\n };\n }, [target, internalRef.state, direction, distance]);\n\n if (target) return loading;\n return {\n ref: internalRef,\n loading\n };\n}) as UseInfiniteScroll;\n"],"names":["useInfiniteScroll","params","target","isTarget","callback","options","direction","distance","loading","setIsLoading","useState","internalRef","useRefState","internalCallbackRef","useRef","internalLoadingRef","useEffect","element","onLoadMore","event","clientHeight","scrollHeight","scrollTop","clientWidth","scrollWidth","scrollLeft","scrollBottom","scrollRight"],"mappings":"mMA6DaA,EAAqB,IAAIC,IAAkB,CACtD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCI,EAAWH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCK,EAAYD,GAAS,WAAa,SAClCE,EAAWF,GAAS,UAAY,GAEhC,CAACG,EAASC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAExCC,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOV,CAAQ,EAC3CS,EAAoB,QAAUT,EAC9B,MAAMW,EAAqBD,EAAAA,OAAON,CAAO,EAqCzC,OApCAO,EAAmB,QAAUP,EAE7BQ,EAAAA,UAAU,IAAM,CACd,GAAI,CAACd,GAAU,CAACS,EAAY,MAAO,OACnC,MAAMM,EAAWf,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIS,EAAY,QACpE,GAAI,CAACM,EAAS,OAEd,MAAMC,EAAa,MAAOC,GAAiB,CACzC,GAAIJ,EAAmB,QAAS,OAEhC,KAAM,CAAE,aAAAK,EAAc,aAAAC,EAAc,UAAAC,EAAW,YAAAC,EAAa,YAAAC,EAAa,WAAAC,GACvEN,EAAM,OACFO,EAAeL,GAAgBC,EAAYF,GAC3CO,EAAcH,GAAeC,EAAaF,IAE9B,CAChB,OAAQG,EACR,IAAKJ,EACL,MAAOK,EACP,KAAMF,CAAA,GAGMnB,CAAS,GAAKC,IAC1BE,EAAa,EAAI,EACjB,MAAMI,EAAoB,QAAQM,CAAK,EACvCV,EAAa,EAAK,EACpB,EAGF,OAAAQ,EAAQ,iBAAiB,SAAUC,CAAU,EAEtC,IAAM,CACXD,EAAQ,oBAAoB,SAAUC,CAAU,CAAA,CAClD,EACC,CAAChB,EAAQS,EAAY,MAAOL,EAAWC,CAAQ,CAAC,EAE/CL,EAAeM,EACZ,CACL,IAAKG,EACL,QAAAH,CAAA,CAEJ"}
1
+ {"version":3,"file":"useInfiniteScroll.cjs","sources":["../../../../src/hooks/useInfiniteScroll/useInfiniteScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use infinite scroll options type */\nexport interface UseInfiniteScrollOptions {\n /** The direction to trigger the callback */\n direction?: 'bottom' | 'left' | 'right' | 'top';\n /** The distance in pixels to trigger the callback */\n distance?: number;\n}\n\nexport interface UseInfiniteScroll {\n (\n target: HookTarget,\n callback: (event: Event) => void,\n options?: UseInfiniteScrollOptions\n ): boolean;\n\n <Target extends Element>(\n callback: (event: Event) => void,\n options?: UseInfiniteScrollOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n loading: boolean;\n };\n}\n\n/**\n * @name useInfiniteScroll\n * @description - Hook that defines the logic for infinite scroll\n * @category Sensors\n * @usage medium\n *\n * @overload\n * @template Target The target element\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {{ ref: StateRef<Target>, loading: boolean }} An object containing the ref and loading\n *\n * @example\n * const { ref, loading } = useInfiniteScroll(() => console.log('infinite scroll'));\n *\n * @overload\n * @param {HookTarget} target The target element to detect infinite scroll for\n * @param {(event: Event) => void} callback The callback to execute when a click outside the target is detected\n * @param {number} [options.distance=10] The distance in pixels to trigger the callback\n * @param {string} [options.direction='bottom'] The direction to trigger the callback\n * @returns {boolean} A loading indicator of the infinite scroll\n *\n * @example\n * const loading = useInfiniteScroll(ref, () => console.log('infinite scroll'));\n */\nexport const useInfiniteScroll = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const callback = (target ? params[1] : params[0]) as (event: Event) => void;\n const options = (target ? params[2] : params[1]) as UseInfiniteScrollOptions | undefined;\n\n const direction = options?.direction ?? 'bottom';\n const distance = options?.distance ?? 10;\n\n const [loading, setIsLoading] = useState(false);\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalLoadingRef = useRef(loading);\n internalLoadingRef.current = loading;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const onLoadMore = async (event: Event) => {\n if (internalLoadingRef.current) return;\n\n const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } =\n event.target as Element;\n const scrollBottom = scrollHeight - (scrollTop + clientHeight);\n const scrollRight = scrollWidth - (scrollLeft + clientWidth);\n\n const distances = {\n bottom: scrollBottom,\n top: scrollTop,\n right: scrollRight,\n left: scrollLeft\n };\n\n if (distances[direction] <= distance) {\n setIsLoading(true);\n await internalCallbackRef.current(event);\n setIsLoading(false);\n }\n };\n\n element.addEventListener('scroll', onLoadMore);\n\n return () => {\n element.removeEventListener('scroll', onLoadMore);\n };\n }, [target, internalRef.state, isTarget.getRefState(target), direction, distance]);\n\n if (target) return loading;\n return {\n ref: internalRef,\n loading\n };\n}) as UseInfiniteScroll;\n"],"names":["useInfiniteScroll","params","target","isTarget","callback","options","direction","distance","loading","setIsLoading","useState","internalRef","useRefState","internalCallbackRef","useRef","internalLoadingRef","useEffect","element","onLoadMore","event","clientHeight","scrollHeight","scrollTop","clientWidth","scrollWidth","scrollLeft","scrollBottom","scrollRight"],"mappings":"mMA6DaA,GAAqB,IAAIC,IAAkB,CACtD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACzCI,EAAWH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCK,EAAYD,GAAS,WAAa,SAClCE,EAAWF,GAAS,UAAY,GAEhC,CAACG,EAASC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAExCC,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOV,CAAQ,EAC3CS,EAAoB,QAAUT,EAC9B,MAAMW,EAAqBD,EAAAA,OAAON,CAAO,EAqCzC,OApCAO,EAAmB,QAAUP,EAE7BQ,EAAAA,UAAU,IAAM,CACd,GAAI,CAACd,GAAU,CAACS,EAAY,MAAO,OACnC,MAAMM,EAAWf,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIS,EAAY,QACpE,GAAI,CAACM,EAAS,OAEd,MAAMC,EAAa,MAAOC,GAAiB,CACzC,GAAIJ,EAAmB,QAAS,OAEhC,KAAM,CAAE,aAAAK,EAAc,aAAAC,EAAc,UAAAC,EAAW,YAAAC,EAAa,YAAAC,EAAa,WAAAC,GACvEN,EAAM,OACFO,EAAeL,GAAgBC,EAAYF,GAC3CO,EAAcH,GAAeC,EAAaF,IAE9B,CAChB,OAAQG,EACR,IAAKJ,EACL,MAAOK,EACP,KAAMF,CAAA,GAGMnB,CAAS,GAAKC,IAC1BE,EAAa,EAAI,EACjB,MAAMI,EAAoB,QAAQM,CAAK,EACvCV,EAAa,EAAK,EACpB,EAGF,OAAAQ,EAAQ,iBAAiB,SAAUC,CAAU,EAEtC,IAAM,CACXD,EAAQ,oBAAoB,SAAUC,CAAU,CAAA,CAClD,EACC,CAAChB,EAAQS,EAAY,MAAOR,EAAAA,SAAS,YAAYD,CAAM,EAAGI,EAAWC,CAAQ,CAAC,EAE7EL,EAAeM,EACZ,CACL,IAAKG,EACL,QAAAH,CAAA,CAEJ"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),h=require("../useRefState/useRefState.cjs"),c=require("../../utils/helpers/isTarget.cjs"),O=(...e)=>{const r=c.isTarget(e[0])?e[0]:void 0,t=r?typeof e[1]=="object"?e[1]:{onChange:e[1]}:typeof e[0]=="object"?e[0]:{onChange:e[0]},u=t?.onChange,i=t?.enabled??!0,[b,v]=o.useState(),[l,d]=o.useState(),n=h.useRefState(),f=o.useRef(u);return f.current=u,o.useEffect(()=>{if(!i||!r&&!n.state)return;const g=r?c.isTarget.getElement(r):n.current;if(!g)return;const s=new IntersectionObserver((a,S)=>{d(a),f.current?.(a,S)},{...t,root:t?.root?c.isTarget.getElement(t.root):document});return v(s),s.observe(g),()=>{s.disconnect()}},[r,n.state,t?.rootMargin,t?.threshold,t?.root,i]),r?{observer:b,entries:l}:{observer:b,ref:n,entries:l}};exports.useIntersectionObserver=O;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),R=require("../useRefState/useRefState.cjs"),s=require("../../utils/helpers/isTarget.cjs"),T=((...e)=>{const r=s.isTarget(e[0])?e[0]:void 0,t=r?typeof e[1]=="object"?e[1]:{onChange:e[1]}:typeof e[0]=="object"?e[0]:{onChange:e[0]},i=t?.onChange,u=t?.enabled??!0,[b,v]=o.useState(),[f,d]=o.useState(),n=R.useRefState(),g=o.useRef(i);return g.current=i,o.useEffect(()=>{if(!u||!r&&!n.state)return;const l=r?s.isTarget.getElement(r):n.current;if(!l)return;const c=new IntersectionObserver((a,S)=>{d(a),g.current?.(a,S)},{...t,root:t?.root?s.isTarget.getElement(t.root):document});return v(c),c.observe(l),()=>{c.disconnect()}},[r,n.state,s.isTarget.getRefState(r),t?.rootMargin,t?.threshold,t?.root,u]),r?{observer:b,entries:f}:{observer:b,ref:n,entries:f}});exports.useIntersectionObserver=T;
2
2
  //# sourceMappingURL=useIntersectionObserver.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useIntersectionObserver.cjs","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The intersection observer callback type */\nexport type UseIntersectionObserverCallback = (\n entries: IntersectionObserverEntry[],\n observer: IntersectionObserver\n) => void;\n\n/** The intersection observer options type */\nexport interface UseIntersectionObserverOptions extends Omit<IntersectionObserverInit, 'root'> {\n /** The enabled state of the intersection observer */\n enabled?: boolean;\n /** The callback to execute when intersection is detected */\n onChange?: UseIntersectionObserverCallback;\n /** The root element to observe */\n root?: HookTarget;\n}\n\n/** The intersection observer return type */\nexport interface UseIntersectionObserverReturn {\n /** The intersection observer entry */\n entries?: IntersectionObserverEntry[];\n /** The intersection observer instance */\n observer?: IntersectionObserver;\n}\n\nexport interface UseIntersectionObserver {\n <Target extends Element>(\n options?: UseIntersectionObserverOptions,\n target?: never\n ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;\n\n <Target extends Element>(\n callback: UseIntersectionObserverCallback,\n target?: never\n ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, callback: UseIntersectionObserverCallback): UseIntersectionObserverReturn;\n}\n\n/**\n * @name useIntersectionObserver\n * @description - Hook that gives you intersection observer state\n * @category Sensors\n * @usage medium\n *\n * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver\n *\n * @overload\n * @param {HookTarget} target The target element to detect intersection\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { ref, entries, observer } = useIntersectionObserver();\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { entries, observer } = useIntersectionObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entries, observer } = useIntersectionObserver(() => console.log('callback'));\n *\n * @overload\n * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected\n * @param {HookTarget} target The target element to detect intersection\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { entries, observer } = useIntersectionObserver(ref, () => console.log('callback'));\n */\nexport const useIntersectionObserver = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onChange: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onChange: params[0] }\n ) as UseIntersectionObserverOptions | undefined;\n\n const callback = options?.onChange;\n const enabled = options?.enabled ?? true;\n\n const [observer, setObserver] = useState<IntersectionObserver>();\n const [entries, setEntries] = useState<IntersectionObserverEntry[]>();\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const observer = new IntersectionObserver(\n (entries, observer) => {\n setEntries(entries);\n internalCallbackRef.current?.(entries, observer);\n },\n {\n ...options,\n root: options?.root ? (isTarget.getElement(options.root) as Document | Element) : document\n }\n );\n\n setObserver(observer);\n observer.observe(element as Element);\n\n return () => {\n observer.disconnect();\n };\n }, [target, internalRef.state, options?.rootMargin, options?.threshold, options?.root, enabled]);\n\n if (target) return { observer, entries };\n return {\n observer,\n ref: internalRef,\n entries\n };\n}) as UseIntersectionObserver;\n"],"names":["useIntersectionObserver","params","target","isTarget","options","callback","enabled","observer","setObserver","useState","entries","setEntries","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element"],"mappings":"mMA8FaA,EAA2B,IAAIC,IAAkB,CAC5D,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EACtB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EAGtBI,EAAWD,GAAS,SACpBE,EAAUF,GAAS,SAAW,GAE9B,CAACG,EAAUC,CAAW,EAAIC,WAAA,EAC1B,CAACC,EAASC,CAAU,EAAIF,WAAA,EAExBG,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOV,CAAQ,EA4B3C,OA3BAS,EAAoB,QAAUT,EAE9BW,EAAAA,UAAU,IAAM,CACd,GAAI,CAACV,GAAY,CAACJ,GAAU,CAACU,EAAY,MAAQ,OAEjD,MAAMK,EAAUf,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIU,EAAY,QACnE,GAAI,CAACK,EAAS,OAEd,MAAMV,EAAW,IAAI,qBACnB,CAACG,EAASH,IAAa,CACrBI,EAAWD,CAAO,EAClBI,EAAoB,UAAUJ,EAASH,CAAQ,CAAA,EAEjD,CACE,GAAGH,EACH,KAAMA,GAAS,KAAQD,EAAAA,SAAS,WAAWC,EAAQ,IAAI,EAA2B,QAAA,CACpF,EAGF,OAAAI,EAAYD,CAAQ,EACpBA,EAAS,QAAQU,CAAkB,EAE5B,IAAM,CACXV,EAAS,WAAA,CAAW,CACtB,EACC,CAACL,EAAQU,EAAY,MAAOR,GAAS,WAAYA,GAAS,UAAWA,GAAS,KAAME,CAAO,CAAC,EAE3FJ,EAAe,CAAE,SAAAK,EAAU,QAAAG,CAAA,EACxB,CACL,SAAAH,EACA,IAAKK,EACL,QAAAF,CAAA,CAEJ"}
1
+ {"version":3,"file":"useIntersectionObserver.cjs","sources":["../../../../src/hooks/useIntersectionObserver/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The intersection observer callback type */\nexport type UseIntersectionObserverCallback = (\n entries: IntersectionObserverEntry[],\n observer: IntersectionObserver\n) => void;\n\n/** The intersection observer options type */\nexport interface UseIntersectionObserverOptions extends Omit<IntersectionObserverInit, 'root'> {\n /** The enabled state of the intersection observer */\n enabled?: boolean;\n /** The callback to execute when intersection is detected */\n onChange?: UseIntersectionObserverCallback;\n /** The root element to observe */\n root?: HookTarget;\n}\n\n/** The intersection observer return type */\nexport interface UseIntersectionObserverReturn {\n /** The intersection observer entry */\n entries?: IntersectionObserverEntry[];\n /** The intersection observer instance */\n observer?: IntersectionObserver;\n}\n\nexport interface UseIntersectionObserver {\n <Target extends Element>(\n options?: UseIntersectionObserverOptions,\n target?: never\n ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;\n\n <Target extends Element>(\n callback: UseIntersectionObserverCallback,\n target?: never\n ): UseIntersectionObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, callback: UseIntersectionObserverCallback): UseIntersectionObserverReturn;\n}\n\n/**\n * @name useIntersectionObserver\n * @description - Hook that gives you intersection observer state\n * @category Sensors\n * @usage medium\n *\n * @browserapi IntersectionObserver https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver\n *\n * @overload\n * @param {HookTarget} target The target element to detect intersection\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { ref, entries, observer } = useIntersectionObserver();\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The IntersectionObserver options\n * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected\n * @param {HookTarget} [options.root=document] The root element to observe\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { entries, observer } = useIntersectionObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected\n * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entries, observer } = useIntersectionObserver(() => console.log('callback'));\n *\n * @overload\n * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected\n * @param {HookTarget} target The target element to detect intersection\n * @returns {UseIntersectionObserverReturn} An object containing the state\n *\n * @example\n * const { entries, observer } = useIntersectionObserver(ref, () => console.log('callback'));\n */\nexport const useIntersectionObserver = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onChange: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onChange: params[0] }\n ) as UseIntersectionObserverOptions | undefined;\n\n const callback = options?.onChange;\n const enabled = options?.enabled ?? true;\n\n const [observer, setObserver] = useState<IntersectionObserver>();\n const [entries, setEntries] = useState<IntersectionObserverEntry[]>();\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n if (!enabled || (!target && !internalRef.state)) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const observer = new IntersectionObserver(\n (entries, observer) => {\n setEntries(entries);\n internalCallbackRef.current?.(entries, observer);\n },\n {\n ...options,\n root: options?.root ? (isTarget.getElement(options.root) as Document | Element) : document\n }\n );\n\n setObserver(observer);\n observer.observe(element as Element);\n\n return () => {\n observer.disconnect();\n };\n }, [\n target,\n internalRef.state,\n isTarget.getRefState(target),\n options?.rootMargin,\n options?.threshold,\n options?.root,\n enabled\n ]);\n\n if (target) return { observer, entries };\n return {\n observer,\n ref: internalRef,\n entries\n };\n}) as UseIntersectionObserver;\n"],"names":["useIntersectionObserver","params","target","isTarget","options","callback","enabled","observer","setObserver","useState","entries","setEntries","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element"],"mappings":"mMA8FaA,GAA2B,IAAIC,IAAkB,CAC5D,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAE5CG,EACJF,EACI,OAAOD,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EACtB,OAAOA,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACR,CAAE,SAAUA,EAAO,CAAC,CAAA,EAGtBI,EAAWD,GAAS,SACpBE,EAAUF,GAAS,SAAW,GAE9B,CAACG,EAAUC,CAAW,EAAIC,WAAA,EAC1B,CAACC,EAASC,CAAU,EAAIF,WAAA,EAExBG,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOV,CAAQ,EAoC3C,OAnCAS,EAAoB,QAAUT,EAE9BW,EAAAA,UAAU,IAAM,CACd,GAAI,CAACV,GAAY,CAACJ,GAAU,CAACU,EAAY,MAAQ,OAEjD,MAAMK,EAAUf,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIU,EAAY,QACnE,GAAI,CAACK,EAAS,OAEd,MAAMV,EAAW,IAAI,qBACnB,CAACG,EAASH,IAAa,CACrBI,EAAWD,CAAO,EAClBI,EAAoB,UAAUJ,EAASH,CAAQ,CAAA,EAEjD,CACE,GAAGH,EACH,KAAMA,GAAS,KAAQD,EAAAA,SAAS,WAAWC,EAAQ,IAAI,EAA2B,QAAA,CACpF,EAGF,OAAAI,EAAYD,CAAQ,EACpBA,EAAS,QAAQU,CAAkB,EAE5B,IAAM,CACXV,EAAS,WAAA,CAAW,CACtB,EACC,CACDL,EACAU,EAAY,MACZT,EAAAA,SAAS,YAAYD,CAAM,EAC3BE,GAAS,WACTA,GAAS,UACTA,GAAS,KACTE,CAAA,CACD,EAEGJ,EAAe,CAAE,SAAAK,EAAU,QAAAG,CAAA,EACxB,CACL,SAAAH,EACA,IAAKK,EACL,QAAAF,CAAA,CAEJ"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),i=(...e)=>{const o=e[0],r=(typeof e[1]=="number"?e[1]:e[1].interval)??1e3,l=(typeof e[1]=="object"?e[1]:e[2])?.immediately??!0,[t,c]=n.useState(l??!0),u=n.useRef(void 0),s=n.useRef(o);return s.current=o,n.useEffect(()=>{if(t)return u.current=setInterval(()=>s.current(),r),()=>{clearInterval(u.current)}},[t,r]),{active:t,pause:()=>c(!1),resume:()=>{r<=0||c(!0)},toggle:()=>c(!t)}};exports.useInterval=i;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),i=((...e)=>{const o=e[0],r=(typeof e[1]=="number"?e[1]:e[1].interval)??1e3,l=(typeof e[1]=="object"?e[1]:e[2])?.immediately??!0,[t,c]=n.useState(l??!0),u=n.useRef(void 0),s=n.useRef(o);return s.current=o,n.useEffect(()=>{if(t)return u.current=setInterval(()=>s.current(),r),()=>{clearInterval(u.current)}},[t,r]),{active:t,pause:()=>c(!1),resume:()=>{r<=0||c(!0)},toggle:()=>c(!t)}});exports.useInterval=i;
2
2
  //# sourceMappingURL=useInterval.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useInterval.cjs","sources":["../../../../src/hooks/useInterval/useInterval.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\n/** The use interval options */\nexport interface UseIntervalOptions {\n /** Start the interval immediately */\n immediately?: boolean;\n}\n\n/** The use interval return type */\nexport interface UseIntervalReturn {\n /** Is the interval active */\n active: boolean;\n /** Pause the interval */\n pause: () => void;\n /** Resume the interval */\n resume: () => void;\n /** Toggle the interval */\n toggle: () => void;\n}\n\ninterface UseInterval {\n (callback: () => void, interval?: number, options?: UseIntervalOptions): UseIntervalReturn;\n\n (callback: () => void, options?: UseIntervalOptions & { interval?: number }): UseIntervalReturn;\n}\n\n/**\n * @name useInterval\n * @description - Hook that makes and interval and returns controlling functions\n * @category Time\n * @usage high\n *\n * @overload\n * @param {() => void} callback Any callback function\n * @param {number} [interval=1000] Time in milliseconds\n * @param {boolean} [options.immediately=true] Start the interval immediately\n * @returns {UseIntervalReturn}\n *\n * @example\n * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), 2500);\n *\n * @overload\n * @param {() => void} callback Any callback function\n * @param {number} [options.interval=1000] Time in milliseconds\n * @param {boolean} [options.immediately=true] Start the interval immediately\n *\n * @example\n * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), { interval: 2500 });\n */\nexport const useInterval = ((...params: any[]): UseIntervalReturn => {\n const callback = params[0] as () => void;\n const interval =\n ((typeof params[1] === 'number'\n ? params[1]\n : (params[1] as UseIntervalOptions & { interval?: number }).interval) as number) ?? 1000;\n const options =\n typeof params[1] === 'object'\n ? (params[1] as (UseIntervalOptions & { interval?: number }) | undefined)\n : (params[2] as UseIntervalOptions | undefined);\n const immediately = options?.immediately ?? true;\n\n const [active, setActive] = useState<boolean>(immediately ?? true);\n\n const intervalIdRef = useRef<ReturnType<typeof setInterval>>(undefined);\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n if (!active) return;\n\n intervalIdRef.current = setInterval(() => internalCallbackRef.current(), interval);\n return () => {\n clearInterval(intervalIdRef.current);\n };\n }, [active, interval]);\n\n const pause = () => setActive(false);\n\n const resume = () => {\n if (interval <= 0) return;\n setActive(true);\n };\n\n const toggle = () => setActive(!active);\n\n return {\n active,\n pause,\n resume,\n toggle\n };\n}) as UseInterval;\n"],"names":["useInterval","params","callback","interval","immediately","active","setActive","useState","intervalIdRef","useRef","internalCallbackRef","useEffect"],"mappings":"yGAiDaA,EAAe,IAAIC,IAAqC,CACnE,MAAMC,EAAWD,EAAO,CAAC,EACnBE,GACF,OAAOF,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACPA,EAAO,CAAC,EAAiD,WAAwB,IAKlFG,GAHJ,OAAOH,EAAO,CAAC,GAAM,SAChBA,EAAO,CAAC,EACRA,EAAO,CAAC,IACc,aAAe,GAEtC,CAACI,EAAQC,CAAS,EAAIC,EAAAA,SAAkBH,GAAe,EAAI,EAE3DI,EAAgBC,EAAAA,OAAuC,MAAS,EAChEC,EAAsBD,EAAAA,OAAOP,CAAQ,EAC3C,OAAAQ,EAAoB,QAAUR,EAE9BS,EAAAA,UAAU,IAAM,CACd,GAAKN,EAEL,OAAAG,EAAc,QAAU,YAAY,IAAME,EAAoB,QAAA,EAAWP,CAAQ,EAC1E,IAAM,CACX,cAAcK,EAAc,OAAO,CAAA,CACrC,EACC,CAACH,EAAQF,CAAQ,CAAC,EAWd,CACL,OAAAE,EACA,MAXY,IAAMC,EAAU,EAAK,EAYjC,OAVa,IAAM,CACfH,GAAY,GAChBG,EAAU,EAAI,CAAA,EASd,OANa,IAAMA,EAAU,CAACD,CAAM,CAMpC,CAEJ"}
1
+ {"version":3,"file":"useInterval.cjs","sources":["../../../../src/hooks/useInterval/useInterval.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\n/** The use interval options */\nexport interface UseIntervalOptions {\n /** Start the interval immediately */\n immediately?: boolean;\n}\n\n/** The use interval return type */\nexport interface UseIntervalReturn {\n /** Is the interval active */\n active: boolean;\n /** Pause the interval */\n pause: () => void;\n /** Resume the interval */\n resume: () => void;\n /** Toggle the interval */\n toggle: () => void;\n}\n\ninterface UseInterval {\n (callback: () => void, interval?: number, options?: UseIntervalOptions): UseIntervalReturn;\n\n (callback: () => void, options?: UseIntervalOptions & { interval?: number }): UseIntervalReturn;\n}\n\n/**\n * @name useInterval\n * @description - Hook that makes and interval and returns controlling functions\n * @category Time\n * @usage high\n *\n * @overload\n * @param {() => void} callback Any callback function\n * @param {number} [interval=1000] Time in milliseconds\n * @param {boolean} [options.immediately=true] Start the interval immediately\n * @returns {UseIntervalReturn}\n *\n * @example\n * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), 2500);\n *\n * @overload\n * @param {() => void} callback Any callback function\n * @param {number} [options.interval=1000] Time in milliseconds\n * @param {boolean} [options.immediately=true] Start the interval immediately\n *\n * @example\n * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), { interval: 2500 });\n */\nexport const useInterval = ((...params: any[]): UseIntervalReturn => {\n const callback = params[0] as () => void;\n const interval =\n ((typeof params[1] === 'number'\n ? params[1]\n : (params[1] as UseIntervalOptions & { interval?: number }).interval) as number) ?? 1000;\n const options =\n typeof params[1] === 'object'\n ? (params[1] as (UseIntervalOptions & { interval?: number }) | undefined)\n : (params[2] as UseIntervalOptions | undefined);\n const immediately = options?.immediately ?? true;\n\n const [active, setActive] = useState<boolean>(immediately ?? true);\n\n const intervalIdRef = useRef<ReturnType<typeof setInterval>>(undefined);\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n if (!active) return;\n\n intervalIdRef.current = setInterval(() => internalCallbackRef.current(), interval);\n return () => {\n clearInterval(intervalIdRef.current);\n };\n }, [active, interval]);\n\n const pause = () => setActive(false);\n\n const resume = () => {\n if (interval <= 0) return;\n setActive(true);\n };\n\n const toggle = () => setActive(!active);\n\n return {\n active,\n pause,\n resume,\n toggle\n };\n}) as UseInterval;\n"],"names":["useInterval","params","callback","interval","immediately","active","setActive","useState","intervalIdRef","useRef","internalCallbackRef","useEffect"],"mappings":"yGAiDaA,GAAe,IAAIC,IAAqC,CACnE,MAAMC,EAAWD,EAAO,CAAC,EACnBE,GACF,OAAOF,EAAO,CAAC,GAAM,SACnBA,EAAO,CAAC,EACPA,EAAO,CAAC,EAAiD,WAAwB,IAKlFG,GAHJ,OAAOH,EAAO,CAAC,GAAM,SAChBA,EAAO,CAAC,EACRA,EAAO,CAAC,IACc,aAAe,GAEtC,CAACI,EAAQC,CAAS,EAAIC,EAAAA,SAAkBH,GAAe,EAAI,EAE3DI,EAAgBC,EAAAA,OAAuC,MAAS,EAChEC,EAAsBD,EAAAA,OAAOP,CAAQ,EAC3C,OAAAQ,EAAoB,QAAUR,EAE9BS,EAAAA,UAAU,IAAM,CACd,GAAKN,EAEL,OAAAG,EAAc,QAAU,YAAY,IAAME,EAAoB,QAAA,EAAWP,CAAQ,EAC1E,IAAM,CACX,cAAcK,EAAc,OAAO,CAAA,CACrC,EACC,CAACH,EAAQF,CAAQ,CAAC,EAWd,CACL,OAAAE,EACA,MAXY,IAAMC,EAAU,EAAK,EAYjC,OAVa,IAAM,CACfH,GAAY,GAChBG,EAAU,EAAI,CAAA,EASd,OANa,IAAMA,EAAU,CAACD,CAAM,CAMpC,CAEJ"}