@siberiacancode/reactuse 0.3.3 → 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.
- package/dist/cjs/hooks/useActiveElement/useActiveElement.cjs +1 -1
- package/dist/cjs/hooks/useActiveElement/useActiveElement.cjs.map +1 -1
- package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs +1 -1
- package/dist/cjs/hooks/useAutoScroll/useAutoScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useBreakpoints/useBreakpoints.cjs +1 -1
- package/dist/cjs/hooks/useBreakpoints/useBreakpoints.cjs.map +1 -1
- package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs +1 -1
- package/dist/cjs/hooks/useClickOutside/useClickOutside.cjs.map +1 -1
- package/dist/cjs/hooks/useCookie/useCookie.cjs +1 -1
- package/dist/cjs/hooks/useCookie/useCookie.cjs.map +1 -1
- package/dist/cjs/hooks/useCounter/useCounter.cjs +1 -1
- package/dist/cjs/hooks/useCounter/useCounter.cjs.map +1 -1
- package/dist/cjs/hooks/useCssVar/useCssVar.cjs +1 -1
- package/dist/cjs/hooks/useCssVar/useCssVar.cjs.map +1 -1
- package/dist/cjs/hooks/useDeviceMotion/useDeviceMotion.cjs +1 -1
- package/dist/cjs/hooks/useDeviceMotion/useDeviceMotion.cjs.map +1 -1
- package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs +1 -1
- package/dist/cjs/hooks/useDisplayMedia/useDisplayMedia.cjs.map +1 -1
- package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs +1 -1
- package/dist/cjs/hooks/useDoubleClick/useDoubleClick.cjs.map +1 -1
- package/dist/cjs/hooks/useDropZone/useDropZone.cjs +1 -1
- package/dist/cjs/hooks/useDropZone/useDropZone.cjs.map +1 -1
- package/dist/cjs/hooks/useElementSize/useElementSize.cjs +1 -1
- package/dist/cjs/hooks/useElementSize/useElementSize.cjs.map +1 -1
- package/dist/cjs/hooks/useEventListener/useEventListener.cjs +1 -1
- package/dist/cjs/hooks/useEventListener/useEventListener.cjs.map +1 -1
- package/dist/cjs/hooks/useFileDialog/useFileDialog.cjs +1 -1
- package/dist/cjs/hooks/useFileDialog/useFileDialog.cjs.map +1 -1
- package/dist/cjs/hooks/useFocus/useFocus.cjs +1 -1
- package/dist/cjs/hooks/useFocus/useFocus.cjs.map +1 -1
- package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs +1 -1
- package/dist/cjs/hooks/useFocusTrap/useFocusTrap.cjs.map +1 -1
- package/dist/cjs/hooks/useFullscreen/useFullscreen.cjs +1 -1
- package/dist/cjs/hooks/useFullscreen/useFullscreen.cjs.map +1 -1
- package/dist/cjs/hooks/useHash/useHash.cjs +1 -1
- package/dist/cjs/hooks/useHash/useHash.cjs.map +1 -1
- package/dist/cjs/hooks/useHotkeys/useHotkeys.cjs +1 -1
- package/dist/cjs/hooks/useHotkeys/useHotkeys.cjs.map +1 -1
- package/dist/cjs/hooks/useHover/useHover.cjs +1 -1
- package/dist/cjs/hooks/useHover/useHover.cjs.map +1 -1
- package/dist/cjs/hooks/useInfiniteScroll/useInfiniteScroll.cjs +1 -1
- package/dist/cjs/hooks/useInfiniteScroll/useInfiniteScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs +1 -1
- package/dist/cjs/hooks/useIntersectionObserver/useIntersectionObserver.cjs.map +1 -1
- package/dist/cjs/hooks/useInterval/useInterval.cjs +1 -1
- package/dist/cjs/hooks/useInterval/useInterval.cjs.map +1 -1
- package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs +1 -1
- package/dist/cjs/hooks/useKeyPress/useKeyPress.cjs.map +1 -1
- package/dist/cjs/hooks/useKeyPressEvent/useKeyPressEvent.cjs +1 -1
- package/dist/cjs/hooks/useKeyPressEvent/useKeyPressEvent.cjs.map +1 -1
- package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs +1 -1
- package/dist/cjs/hooks/useKeyboard/useKeyboard.cjs.map +1 -1
- package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs +1 -1
- package/dist/cjs/hooks/useKeysPressed/useKeysPressed.cjs.map +1 -1
- package/dist/cjs/hooks/useLockScroll/useLockScroll.cjs +1 -1
- package/dist/cjs/hooks/useLockScroll/useLockScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useLongPress/useLongPress.cjs +1 -1
- package/dist/cjs/hooks/useLongPress/useLongPress.cjs.map +1 -1
- package/dist/cjs/hooks/useMeasure/useMeasure.cjs +1 -1
- package/dist/cjs/hooks/useMeasure/useMeasure.cjs.map +1 -1
- package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs +1 -1
- package/dist/cjs/hooks/useMediaControls/useMediaControls.cjs.map +1 -1
- package/dist/cjs/hooks/useMouse/useMouse.cjs +1 -1
- package/dist/cjs/hooks/useMouse/useMouse.cjs.map +1 -1
- package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs +1 -1
- package/dist/cjs/hooks/useMutationObserver/useMutationObserver.cjs.map +1 -1
- package/dist/cjs/hooks/useOtpCredential/useOtpCredential.cjs +1 -1
- package/dist/cjs/hooks/useOtpCredential/useOtpCredential.cjs.map +1 -1
- package/dist/cjs/hooks/usePaint/usePaint.cjs +1 -1
- package/dist/cjs/hooks/usePaint/usePaint.cjs.map +1 -1
- package/dist/cjs/hooks/useParallax/useParallax.cjs +1 -1
- package/dist/cjs/hooks/useParallax/useParallax.cjs.map +1 -1
- package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs +1 -1
- package/dist/cjs/hooks/usePictureInPicture/usePictureInPicture.cjs.map +1 -1
- package/dist/cjs/hooks/useRefState/useRefState.cjs +1 -1
- package/dist/cjs/hooks/useRefState/useRefState.cjs.map +1 -1
- package/dist/cjs/hooks/useResizeObserver/useResizeObserver.cjs +1 -1
- package/dist/cjs/hooks/useResizeObserver/useResizeObserver.cjs.map +1 -1
- package/dist/cjs/hooks/useRightClick/useRightClick.cjs +1 -1
- package/dist/cjs/hooks/useRightClick/useRightClick.cjs.map +1 -1
- package/dist/cjs/hooks/useScroll/useScroll.cjs +1 -1
- package/dist/cjs/hooks/useScroll/useScroll.cjs.map +1 -1
- package/dist/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs +1 -1
- package/dist/cjs/hooks/useScrollIntoView/useScrollIntoView.cjs.map +1 -1
- package/dist/cjs/hooks/useScrollTo/useScrollTo.cjs +1 -1
- package/dist/cjs/hooks/useScrollTo/useScrollTo.cjs.map +1 -1
- package/dist/cjs/hooks/useSticky/useSticky.cjs +1 -1
- package/dist/cjs/hooks/useSticky/useSticky.cjs.map +1 -1
- package/dist/cjs/hooks/useStopwatch/useStopwatch.cjs +1 -1
- package/dist/cjs/hooks/useStopwatch/useStopwatch.cjs.map +1 -1
- package/dist/cjs/hooks/useStorage/useStorage.cjs +1 -1
- package/dist/cjs/hooks/useStorage/useStorage.cjs.map +1 -1
- package/dist/cjs/hooks/useTextDirection/useTextDirection.cjs +1 -1
- package/dist/cjs/hooks/useTextDirection/useTextDirection.cjs.map +1 -1
- package/dist/cjs/hooks/useTextareaAutosize/useTextareaAutosize.cjs +1 -1
- package/dist/cjs/hooks/useTextareaAutosize/useTextareaAutosize.cjs.map +1 -1
- package/dist/cjs/hooks/useTimer/useTimer.cjs +1 -1
- package/dist/cjs/hooks/useTimer/useTimer.cjs.map +1 -1
- package/dist/cjs/hooks/useUrlSearchParam/useUrlSearchParam.cjs +1 -1
- package/dist/cjs/hooks/useUrlSearchParam/useUrlSearchParam.cjs.map +1 -1
- package/dist/cjs/hooks/useUrlSearchParams/useUrlSearchParams.cjs +1 -1
- package/dist/cjs/hooks/useUrlSearchParams/useUrlSearchParams.cjs.map +1 -1
- package/dist/cjs/hooks/useVisibility/useVisibility.cjs +1 -1
- package/dist/cjs/hooks/useVisibility/useVisibility.cjs.map +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/utils/helpers/isTarget.cjs +1 -1
- package/dist/cjs/utils/helpers/isTarget.cjs.map +1 -1
- package/dist/esm/hooks/useActiveElement/useActiveElement.mjs +13 -13
- package/dist/esm/hooks/useActiveElement/useActiveElement.mjs.map +1 -1
- package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs +24 -24
- package/dist/esm/hooks/useAutoScroll/useAutoScroll.mjs.map +1 -1
- package/dist/esm/hooks/useBreakpoints/useBreakpoints.mjs +30 -35
- package/dist/esm/hooks/useBreakpoints/useBreakpoints.mjs.map +1 -1
- package/dist/esm/hooks/useClickOutside/useClickOutside.mjs +15 -14
- package/dist/esm/hooks/useClickOutside/useClickOutside.mjs.map +1 -1
- package/dist/esm/hooks/useCookie/useCookie.mjs +2 -2
- package/dist/esm/hooks/useCookie/useCookie.mjs.map +1 -1
- package/dist/esm/hooks/useCounter/useCounter.mjs +2 -2
- package/dist/esm/hooks/useCounter/useCounter.mjs.map +1 -1
- package/dist/esm/hooks/useCssVar/useCssVar.mjs +8 -8
- package/dist/esm/hooks/useCssVar/useCssVar.mjs.map +1 -1
- package/dist/esm/hooks/useDeviceMotion/useDeviceMotion.mjs +2 -2
- package/dist/esm/hooks/useDeviceMotion/useDeviceMotion.mjs.map +1 -1
- package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs +17 -17
- package/dist/esm/hooks/useDisplayMedia/useDisplayMedia.mjs.map +1 -1
- package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs +14 -14
- package/dist/esm/hooks/useDoubleClick/useDoubleClick.mjs.map +1 -1
- package/dist/esm/hooks/useDropZone/useDropZone.mjs +23 -23
- package/dist/esm/hooks/useDropZone/useDropZone.mjs.map +1 -1
- package/dist/esm/hooks/useElementSize/useElementSize.mjs +14 -14
- package/dist/esm/hooks/useElementSize/useElementSize.mjs.map +1 -1
- package/dist/esm/hooks/useEventListener/useEventListener.mjs +14 -14
- package/dist/esm/hooks/useEventListener/useEventListener.mjs.map +1 -1
- package/dist/esm/hooks/useFileDialog/useFileDialog.mjs +2 -2
- package/dist/esm/hooks/useFileDialog/useFileDialog.mjs.map +1 -1
- package/dist/esm/hooks/useFocus/useFocus.mjs +20 -20
- package/dist/esm/hooks/useFocus/useFocus.mjs.map +1 -1
- package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs +21 -21
- package/dist/esm/hooks/useFocusTrap/useFocusTrap.mjs.map +1 -1
- package/dist/esm/hooks/useFullscreen/useFullscreen.mjs +2 -2
- package/dist/esm/hooks/useFullscreen/useFullscreen.mjs.map +1 -1
- package/dist/esm/hooks/useHash/useHash.mjs +2 -2
- package/dist/esm/hooks/useHash/useHash.mjs.map +1 -1
- package/dist/esm/hooks/useHotkeys/useHotkeys.mjs +24 -16
- package/dist/esm/hooks/useHotkeys/useHotkeys.mjs.map +1 -1
- package/dist/esm/hooks/useHover/useHover.mjs +16 -16
- package/dist/esm/hooks/useHover/useHover.mjs.map +1 -1
- package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs +16 -16
- package/dist/esm/hooks/useInfiniteScroll/useInfiniteScroll.mjs.map +1 -1
- package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs +26 -18
- package/dist/esm/hooks/useIntersectionObserver/useIntersectionObserver.mjs.map +1 -1
- package/dist/esm/hooks/useInterval/useInterval.mjs +2 -2
- package/dist/esm/hooks/useInterval/useInterval.mjs.map +1 -1
- package/dist/esm/hooks/useKeyPress/useKeyPress.mjs +15 -15
- package/dist/esm/hooks/useKeyPress/useKeyPress.mjs.map +1 -1
- package/dist/esm/hooks/useKeyPressEvent/useKeyPressEvent.mjs +22 -15
- package/dist/esm/hooks/useKeyPressEvent/useKeyPressEvent.mjs.map +1 -1
- package/dist/esm/hooks/useKeyboard/useKeyboard.mjs +10 -10
- package/dist/esm/hooks/useKeyboard/useKeyboard.mjs.map +1 -1
- package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs +12 -12
- package/dist/esm/hooks/useKeysPressed/useKeysPressed.mjs.map +1 -1
- package/dist/esm/hooks/useLockScroll/useLockScroll.mjs +23 -23
- package/dist/esm/hooks/useLockScroll/useLockScroll.mjs.map +1 -1
- package/dist/esm/hooks/useLongPress/useLongPress.mjs +16 -16
- package/dist/esm/hooks/useLongPress/useLongPress.mjs.map +1 -1
- package/dist/esm/hooks/useMeasure/useMeasure.mjs +15 -15
- package/dist/esm/hooks/useMeasure/useMeasure.mjs.map +1 -1
- package/dist/esm/hooks/useMediaControls/useMediaControls.mjs +28 -28
- package/dist/esm/hooks/useMediaControls/useMediaControls.mjs.map +1 -1
- package/dist/esm/hooks/useMouse/useMouse.mjs +17 -17
- package/dist/esm/hooks/useMouse/useMouse.mjs.map +1 -1
- package/dist/esm/hooks/useMutationObserver/useMutationObserver.mjs +17 -16
- package/dist/esm/hooks/useMutationObserver/useMutationObserver.mjs.map +1 -1
- package/dist/esm/hooks/useOtpCredential/useOtpCredential.mjs +2 -2
- package/dist/esm/hooks/useOtpCredential/useOtpCredential.mjs.map +1 -1
- package/dist/esm/hooks/usePaint/usePaint.mjs +31 -31
- package/dist/esm/hooks/usePaint/usePaint.mjs.map +1 -1
- package/dist/esm/hooks/useParallax/useParallax.mjs +24 -23
- package/dist/esm/hooks/useParallax/useParallax.mjs.map +1 -1
- package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs +25 -25
- package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs.map +1 -1
- package/dist/esm/hooks/useRefState/useRefState.mjs +1 -0
- package/dist/esm/hooks/useRefState/useRefState.mjs.map +1 -1
- package/dist/esm/hooks/useResizeObserver/useResizeObserver.mjs +16 -16
- package/dist/esm/hooks/useResizeObserver/useResizeObserver.mjs.map +1 -1
- package/dist/esm/hooks/useRightClick/useRightClick.mjs +14 -14
- package/dist/esm/hooks/useRightClick/useRightClick.mjs.map +1 -1
- package/dist/esm/hooks/useScroll/useScroll.mjs +22 -22
- package/dist/esm/hooks/useScroll/useScroll.mjs.map +1 -1
- package/dist/esm/hooks/useScrollIntoView/useScrollIntoView.mjs +16 -16
- package/dist/esm/hooks/useScrollIntoView/useScrollIntoView.mjs.map +1 -1
- package/dist/esm/hooks/useScrollTo/useScrollTo.mjs +10 -10
- package/dist/esm/hooks/useScrollTo/useScrollTo.mjs.map +1 -1
- package/dist/esm/hooks/useSticky/useSticky.mjs +17 -17
- package/dist/esm/hooks/useSticky/useSticky.mjs.map +1 -1
- package/dist/esm/hooks/useStopwatch/useStopwatch.mjs +4 -4
- package/dist/esm/hooks/useStopwatch/useStopwatch.mjs.map +1 -1
- package/dist/esm/hooks/useStorage/useStorage.mjs +2 -2
- package/dist/esm/hooks/useStorage/useStorage.mjs.map +1 -1
- package/dist/esm/hooks/useTextDirection/useTextDirection.mjs +12 -12
- package/dist/esm/hooks/useTextDirection/useTextDirection.mjs.map +1 -1
- package/dist/esm/hooks/useTextareaAutosize/useTextareaAutosize.mjs +20 -20
- package/dist/esm/hooks/useTextareaAutosize/useTextareaAutosize.mjs.map +1 -1
- package/dist/esm/hooks/useTimer/useTimer.mjs +3 -3
- package/dist/esm/hooks/useTimer/useTimer.mjs.map +1 -1
- package/dist/esm/hooks/useUrlSearchParam/useUrlSearchParam.mjs +2 -2
- package/dist/esm/hooks/useUrlSearchParam/useUrlSearchParam.mjs.map +1 -1
- package/dist/esm/hooks/useUrlSearchParams/useUrlSearchParams.mjs +2 -2
- package/dist/esm/hooks/useUrlSearchParams/useUrlSearchParams.mjs.map +1 -1
- package/dist/esm/hooks/useVisibility/useVisibility.mjs +25 -17
- package/dist/esm/hooks/useVisibility/useVisibility.mjs.map +1 -1
- package/dist/esm/index.mjs +98 -96
- package/dist/esm/utils/helpers/isTarget.mjs +10 -8
- package/dist/esm/utils/helpers/isTarget.mjs.map +1 -1
- package/dist/types/hooks/useBreakpoints/useBreakpoints.d.ts +1 -11
- package/dist/types/hooks/useClickOutside/useClickOutside.d.ts +1 -1
- package/dist/types/hooks/useHover/useHover.d.ts +6 -6
- package/dist/types/hooks/useRefState/useRefState.d.ts +1 -0
- package/dist/types/utils/helpers/isTarget.d.ts +9 -1
- package/package.json +89 -89
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useParallax.cjs","sources":["../../../../src/hooks/useParallax/useParallax.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useDeviceOrientation } from '../useDeviceOrientation/useDeviceOrientation';\nimport { useOrientation } from '../useOrientation/useOrientation';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use parallax value type */\nexport interface UseParallaxValue {\n /** Roll value. Scaled to `-0.5 ~ 0.5` */\n roll: number;\n /** Sensor source, can be `mouse` or `deviceOrientation` */\n source: 'deviceOrientation' | 'mouse';\n /** Tilt value. Scaled to `-0.5 ~ 0.5` */\n tilt: number;\n}\n\n/** The use parallax options type */\nexport interface UseParallaxOptions {\n /** Device orientation roll adjust function */\n deviceOrientationRollAdjust?: (value: number) => number;\n /** Device orientation tilt adjust function */\n deviceOrientationTiltAdjust?: (value: number) => number;\n /** Mouse roll adjust function */\n mouseRollAdjust?: (value: number) => number;\n /** Mouse tilt adjust function */\n mouseTiltAdjust?: (value: number) => number;\n}\n\ninterface UseParallaxReturn {\n value: UseParallaxValue;\n}\n\nexport interface UseParallax {\n (target: HookTarget, options?: UseParallaxOptions): UseParallaxReturn;\n\n <Target extends Element>(\n options?: UseParallaxOptions,\n target?: never\n ): UseParallaxReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useParallax\n * @description - Hook to help create parallax effect\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn} An object of parallax values\n *\n * @example\n * const { value } = useParallax(ref);\n *\n * @overload\n * @template Target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn & { ref: StateRef<Target> }} An object of parallax values\n *\n * @example\n * const { ref, value } = useParallax();\n */\nexport const useParallax = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (params[1] ? params[1] : params[0]) as UseParallaxOptions | undefined;\n\n const internalRef = useRefState<Element>();\n\n const screenOrientation = useOrientation();\n const deviceOrientation = useDeviceOrientation();\n\n const {\n deviceOrientationRollAdjust = (value) => value,\n deviceOrientationTiltAdjust = (value) => value,\n mouseRollAdjust = (value) => value,\n mouseTiltAdjust = (value) => value\n } = (options ?? {}) as UseParallaxOptions;\n\n const [value, setValue] = useState({\n roll: 0,\n tilt: 0,\n source: 'mouse'\n });\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const onMouseMove = (event: MouseEvent) => {\n const { left, top } = element.getBoundingClientRect();\n const elementPositionX = left + window.scrollX;\n const elementPositionY = top + window.scrollY;\n\n const getSource = () => {\n const isDeviceOrientation =\n deviceOrientation.supported &&\n (deviceOrientation.value.alpha || deviceOrientation.value.gamma);\n\n if (isDeviceOrientation) return 'deviceOrientation';\n return 'mouse';\n };\n\n const getRoll = () => {\n const source = getSource();\n if (source === 'deviceOrientation') {\n let value: number;\n switch (screenOrientation.value.orientationType) {\n case 'landscape-primary':\n value = deviceOrientation.value.gamma! / 90;\n break;\n case 'landscape-secondary':\n value = -deviceOrientation.value.gamma! / 90;\n break;\n case 'portrait-primary':\n value = -deviceOrientation.value.beta! / 90;\n break;\n case 'portrait-secondary':\n value = deviceOrientation.value.beta! / 90;\n break;\n default:\n value = -deviceOrientation.value.beta! / 90;\n }\n return deviceOrientationRollAdjust(value);\n } else {\n const y = event.pageY - elementPositionY;\n const height = element.getBoundingClientRect().height;\n const value = -(y - height / 2) / height;\n return mouseRollAdjust(value);\n }\n };\n\n const getTilt = () => {\n const source = getSource();\n if (source === 'deviceOrientation') {\n let value: number;\n switch (screenOrientation.value.orientationType) {\n case 'landscape-primary':\n value = deviceOrientation.value.beta! / 90;\n break;\n case 'landscape-secondary':\n value = -deviceOrientation.value.beta! / 90;\n break;\n case 'portrait-primary':\n value = deviceOrientation.value.gamma! / 90;\n break;\n case 'portrait-secondary':\n value = -deviceOrientation.value.gamma! / 90;\n break;\n default:\n value = deviceOrientation.value.gamma! / 90;\n }\n return deviceOrientationTiltAdjust(value);\n } else {\n const x = event.pageX - elementPositionX;\n const width = element.getBoundingClientRect().width;\n const value = (x - width / 2) / width;\n return mouseTiltAdjust(value);\n }\n };\n\n const source = getSource();\n const roll = getRoll();\n const tilt = getTilt();\n\n setValue({\n roll,\n source,\n tilt\n });\n };\n\n document.addEventListener('mousemove', onMouseMove);\n return () => {\n document.removeEventListener('mousemove', onMouseMove);\n };\n }, [\n target,\n internalRef.state,\n screenOrientation.value.angle,\n screenOrientation.value.orientationType,\n deviceOrientation.value.gamma,\n deviceOrientation.value.beta,\n deviceOrientation.value.alpha,\n deviceOrientation.value.absolute\n ]);\n\n if (target) return { value };\n\n return {\n ref: internalRef,\n value\n };\n}) as UseParallax;\n"],"names":["useParallax","params","target","isTarget","options","internalRef","useRefState","screenOrientation","useOrientation","deviceOrientation","useDeviceOrientation","deviceOrientationRollAdjust","value","deviceOrientationTiltAdjust","mouseRollAdjust","mouseTiltAdjust","setValue","useState","useEffect","element","onMouseMove","event","left","top","elementPositionX","elementPositionY","getSource","getRoll","y","height","getTilt","x","width","source","roll","tilt"],"mappings":"mTAuEaA,
|
|
1
|
+
{"version":3,"file":"useParallax.cjs","sources":["../../../../src/hooks/useParallax/useParallax.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useDeviceOrientation } from '../useDeviceOrientation/useDeviceOrientation';\nimport { useOrientation } from '../useOrientation/useOrientation';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use parallax value type */\nexport interface UseParallaxValue {\n /** Roll value. Scaled to `-0.5 ~ 0.5` */\n roll: number;\n /** Sensor source, can be `mouse` or `deviceOrientation` */\n source: 'deviceOrientation' | 'mouse';\n /** Tilt value. Scaled to `-0.5 ~ 0.5` */\n tilt: number;\n}\n\n/** The use parallax options type */\nexport interface UseParallaxOptions {\n /** Device orientation roll adjust function */\n deviceOrientationRollAdjust?: (value: number) => number;\n /** Device orientation tilt adjust function */\n deviceOrientationTiltAdjust?: (value: number) => number;\n /** Mouse roll adjust function */\n mouseRollAdjust?: (value: number) => number;\n /** Mouse tilt adjust function */\n mouseTiltAdjust?: (value: number) => number;\n}\n\ninterface UseParallaxReturn {\n value: UseParallaxValue;\n}\n\nexport interface UseParallax {\n (target: HookTarget, options?: UseParallaxOptions): UseParallaxReturn;\n\n <Target extends Element>(\n options?: UseParallaxOptions,\n target?: never\n ): UseParallaxReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useParallax\n * @description - Hook to help create parallax effect\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn} An object of parallax values\n *\n * @example\n * const { value } = useParallax(ref);\n *\n * @overload\n * @template Target The target element for the parallax effect\n * @param {UseParallaxOptions} options The options for the parallax effect\n * @returns {UseParallaxReturn & { ref: StateRef<Target> }} An object of parallax values\n *\n * @example\n * const { ref, value } = useParallax();\n */\nexport const useParallax = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (params[1] ? params[1] : params[0]) as UseParallaxOptions | undefined;\n\n const internalRef = useRefState<Element>();\n\n const screenOrientation = useOrientation();\n const deviceOrientation = useDeviceOrientation();\n\n const {\n deviceOrientationRollAdjust = (value) => value,\n deviceOrientationTiltAdjust = (value) => value,\n mouseRollAdjust = (value) => value,\n mouseTiltAdjust = (value) => value\n } = (options ?? {}) as UseParallaxOptions;\n\n const [value, setValue] = useState({\n roll: 0,\n tilt: 0,\n source: 'mouse'\n });\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n if (!element) return;\n\n const onMouseMove = (event: MouseEvent) => {\n const { left, top } = element.getBoundingClientRect();\n const elementPositionX = left + window.scrollX;\n const elementPositionY = top + window.scrollY;\n\n const getSource = () => {\n const isDeviceOrientation =\n deviceOrientation.supported &&\n (deviceOrientation.value.alpha || deviceOrientation.value.gamma);\n\n if (isDeviceOrientation) return 'deviceOrientation';\n return 'mouse';\n };\n\n const getRoll = () => {\n const source = getSource();\n if (source === 'deviceOrientation') {\n let value: number;\n switch (screenOrientation.value.orientationType) {\n case 'landscape-primary':\n value = deviceOrientation.value.gamma! / 90;\n break;\n case 'landscape-secondary':\n value = -deviceOrientation.value.gamma! / 90;\n break;\n case 'portrait-primary':\n value = -deviceOrientation.value.beta! / 90;\n break;\n case 'portrait-secondary':\n value = deviceOrientation.value.beta! / 90;\n break;\n default:\n value = -deviceOrientation.value.beta! / 90;\n }\n return deviceOrientationRollAdjust(value);\n } else {\n const y = event.pageY - elementPositionY;\n const height = element.getBoundingClientRect().height;\n const value = -(y - height / 2) / height;\n return mouseRollAdjust(value);\n }\n };\n\n const getTilt = () => {\n const source = getSource();\n if (source === 'deviceOrientation') {\n let value: number;\n switch (screenOrientation.value.orientationType) {\n case 'landscape-primary':\n value = deviceOrientation.value.beta! / 90;\n break;\n case 'landscape-secondary':\n value = -deviceOrientation.value.beta! / 90;\n break;\n case 'portrait-primary':\n value = deviceOrientation.value.gamma! / 90;\n break;\n case 'portrait-secondary':\n value = -deviceOrientation.value.gamma! / 90;\n break;\n default:\n value = deviceOrientation.value.gamma! / 90;\n }\n return deviceOrientationTiltAdjust(value);\n } else {\n const x = event.pageX - elementPositionX;\n const width = element.getBoundingClientRect().width;\n const value = (x - width / 2) / width;\n return mouseTiltAdjust(value);\n }\n };\n\n const source = getSource();\n const roll = getRoll();\n const tilt = getTilt();\n\n setValue({\n roll,\n source,\n tilt\n });\n };\n\n document.addEventListener('mousemove', onMouseMove);\n return () => {\n document.removeEventListener('mousemove', onMouseMove);\n };\n }, [\n target,\n internalRef.state,\n isTarget.getRefState(target),\n screenOrientation.value.angle,\n screenOrientation.value.orientationType,\n deviceOrientation.value.gamma,\n deviceOrientation.value.beta,\n deviceOrientation.value.alpha,\n deviceOrientation.value.absolute\n ]);\n\n if (target) return { value };\n\n return {\n ref: internalRef,\n value\n };\n}) as UseParallax;\n"],"names":["useParallax","params","target","isTarget","options","internalRef","useRefState","screenOrientation","useOrientation","deviceOrientation","useDeviceOrientation","deviceOrientationRollAdjust","value","deviceOrientationTiltAdjust","mouseRollAdjust","mouseTiltAdjust","setValue","useState","useEffect","element","onMouseMove","event","left","top","elementPositionX","elementPositionY","getSource","getRoll","y","height","getTilt","x","width","source","roll","tilt"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),v=require("../useRefState/useRefState.cjs"),f=require("../../utils/helpers/isTarget.cjs"),I=((...n)=>{const c=typeof document<"u"&&"pictureInPictureEnabled"in document&&!!document.pictureInPictureEnabled,e=f.isTarget(n[0])?n[0]:void 0,r=(e?n[1]:n[0])??{},[l,u]=i.useState(!1),s=v.useRefState(),o=i.useRef(null),a=i.useRef(r);a.current=r;const d=async()=>{c&&o.current&&(await o.current.requestPictureInPicture(),u(!0),r.onEnter?.())},p=async()=>{c&&(await document.exitPictureInPicture(),u(!1),r.onExit?.())};i.useEffect(()=>{const t=e?f.isTarget.getElement(e):s.current;if(!t)return;o.current=t;const g=()=>{u(!0),a.current.onEnter?.()},E=()=>{u(!1),a.current.onExit?.()};return t.addEventListener("enterpictureinpicture",g),t.addEventListener("leavepictureinpicture",E),()=>{t.removeEventListener("enterpictureinpicture",g),t.removeEventListener("leavepictureinpicture",E)}},[e,s.state,f.isTarget.getRefState(e)]);const P={open:l,supported:c,enter:d,exit:p,toggle:async()=>{l?await p():await d()}};return e?P:{...P,ref:s}});exports.usePictureInPicture=I;
|
|
2
2
|
//# sourceMappingURL=usePictureInPicture.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePictureInPicture.cjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.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 picture in picture options type */\nexport interface UsePictureInPictureOptions {\n /** The callback when Picture-in-Picture mode is entered */\n onEnter?: () => void;\n /** The callback when Picture-in-Picture mode is exited */\n onExit?: () => void;\n}\n\n/** The use picture in picture return type */\nexport interface UsePictureInPictureReturn {\n /** Whether Picture-in-Picture mode is currently active */\n open: boolean;\n /** Whether Picture-in-Picture mode is supported by the browser */\n supported: boolean;\n /** Request to enter Picture-in-Picture mode */\n enter: () => Promise<void>;\n /** Request to exit Picture-in-Picture mode */\n exit: () => Promise<void>;\n /** Toggle Picture-in-Picture mode */\n toggle: () => Promise<void>;\n}\n\nexport interface UsePictureInPicture {\n (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;\n\n (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {\n ref: StateRef<HTMLVideoElement>;\n };\n}\n\n/**\n * @name usePictureInPicture\n * @description - Hook that provides Picture-in-Picture functionality for video elements\n * @category Browser\n * @usage low\n *\n * @browserapi window.PictureInPicture https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API\n *\n * @overload\n * @param {HookTarget} target The target video element\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn} An object containing Picture-in-Picture state and controls\n *\n * @example\n * const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);\n *\n * @overload\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }} An object containing Picture-in-Picture state, controls and ref\n *\n * @example\n * const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();\n */\nexport const usePictureInPicture = ((...params: any[]) => {\n const supported =\n typeof document !== 'undefined' &&\n 'pictureInPictureEnabled' in document &&\n !!document.pictureInPictureEnabled;\n\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};\n\n const [open, setOpen] = useState(false);\n\n const internalRef = useRefState<HTMLVideoElement>();\n const elementRef = useRef<HTMLVideoElement>(null);\n const onOptionsRef = useRef<UsePictureInPictureOptions>(options);\n onOptionsRef.current = options;\n\n const enter = async () => {\n if (!supported) return;\n\n if (!elementRef.current) return;\n\n await elementRef.current.requestPictureInPicture();\n setOpen(true);\n\n options.onEnter?.();\n };\n\n const exit = async () => {\n if (!supported) return;\n\n await document.exitPictureInPicture();\n setOpen(false);\n options.onExit?.();\n };\n\n useEffect(() => {\n const element = target\n ? (isTarget.getElement(target) as HTMLVideoElement)\n : internalRef.current;\n if (!element) return;\n\n elementRef.current = element;\n\n const onEnterPictureInPicture = () => {\n setOpen(true);\n onOptionsRef.current.onEnter?.();\n };\n\n const onLeavePictureInPicture = () => {\n setOpen(false);\n onOptionsRef.current.onExit?.();\n };\n\n element.addEventListener('enterpictureinpicture', onEnterPictureInPicture);\n element.addEventListener('leavepictureinpicture', onLeavePictureInPicture);\n\n return () => {\n element.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);\n element.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);\n };\n }, [target]);\n\n const toggle = async () => {\n if (open) await exit();\n else await enter();\n };\n\n const value = {\n open,\n supported,\n enter,\n exit,\n toggle\n };\n\n if (target) return value;\n return { ...value, ref: internalRef };\n}) as UsePictureInPicture;\n"],"names":["usePictureInPicture","params","supported","target","isTarget","options","open","setOpen","useState","internalRef","useRefState","elementRef","useRef","onOptionsRef","enter","exit","useEffect","element","onEnterPictureInPicture","onLeavePictureInPicture","value"],"mappings":"mMAiEaA,
|
|
1
|
+
{"version":3,"file":"usePictureInPicture.cjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.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 picture in picture options type */\nexport interface UsePictureInPictureOptions {\n /** The callback when Picture-in-Picture mode is entered */\n onEnter?: () => void;\n /** The callback when Picture-in-Picture mode is exited */\n onExit?: () => void;\n}\n\n/** The use picture in picture return type */\nexport interface UsePictureInPictureReturn {\n /** Whether Picture-in-Picture mode is currently active */\n open: boolean;\n /** Whether Picture-in-Picture mode is supported by the browser */\n supported: boolean;\n /** Request to enter Picture-in-Picture mode */\n enter: () => Promise<void>;\n /** Request to exit Picture-in-Picture mode */\n exit: () => Promise<void>;\n /** Toggle Picture-in-Picture mode */\n toggle: () => Promise<void>;\n}\n\nexport interface UsePictureInPicture {\n (target: HookTarget, options?: UsePictureInPictureOptions): UsePictureInPictureReturn;\n\n (options?: UsePictureInPictureOptions): UsePictureInPictureReturn & {\n ref: StateRef<HTMLVideoElement>;\n };\n}\n\n/**\n * @name usePictureInPicture\n * @description - Hook that provides Picture-in-Picture functionality for video elements\n * @category Browser\n * @usage low\n *\n * @browserapi window.PictureInPicture https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API\n *\n * @overload\n * @param {HookTarget} target The target video element\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn} An object containing Picture-in-Picture state and controls\n *\n * @example\n * const { open, supported, enter, exit, toggle } = usePictureInPicture(videoRef);\n *\n * @overload\n * @param {() => void} [options.onEnter] Callback when Picture-in-Picture mode is entered\n * @param {() => void} [options.onExit] Callback when Picture-in-Picture mode is exited\n * @returns {UsePictureInPictureReturn & { ref: StateRef<HTMLVideoElement> }} An object containing Picture-in-Picture state, controls and ref\n *\n * @example\n * const { ref, open, supported, enter, exit, toggle } = usePictureInPicture();\n */\nexport const usePictureInPicture = ((...params: any[]) => {\n const supported =\n typeof document !== 'undefined' &&\n 'pictureInPictureEnabled' in document &&\n !!document.pictureInPictureEnabled;\n\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = ((target ? params[1] : params[0]) as UsePictureInPictureOptions) ?? {};\n\n const [open, setOpen] = useState(false);\n\n const internalRef = useRefState<HTMLVideoElement>();\n const elementRef = useRef<HTMLVideoElement>(null);\n const onOptionsRef = useRef<UsePictureInPictureOptions>(options);\n onOptionsRef.current = options;\n\n const enter = async () => {\n if (!supported) return;\n\n if (!elementRef.current) return;\n\n await elementRef.current.requestPictureInPicture();\n setOpen(true);\n\n options.onEnter?.();\n };\n\n const exit = async () => {\n if (!supported) return;\n\n await document.exitPictureInPicture();\n setOpen(false);\n options.onExit?.();\n };\n\n useEffect(() => {\n const element = target\n ? (isTarget.getElement(target) as HTMLVideoElement)\n : internalRef.current;\n if (!element) return;\n\n elementRef.current = element;\n\n const onEnterPictureInPicture = () => {\n setOpen(true);\n onOptionsRef.current.onEnter?.();\n };\n\n const onLeavePictureInPicture = () => {\n setOpen(false);\n onOptionsRef.current.onExit?.();\n };\n\n element.addEventListener('enterpictureinpicture', onEnterPictureInPicture);\n element.addEventListener('leavepictureinpicture', onLeavePictureInPicture);\n\n return () => {\n element.removeEventListener('enterpictureinpicture', onEnterPictureInPicture);\n element.removeEventListener('leavepictureinpicture', onLeavePictureInPicture);\n };\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n const toggle = async () => {\n if (open) await exit();\n else await enter();\n };\n\n const value = {\n open,\n supported,\n enter,\n exit,\n toggle\n };\n\n if (target) return value;\n return { ...value, ref: internalRef };\n}) as UsePictureInPicture;\n"],"names":["usePictureInPicture","params","supported","target","isTarget","options","open","setOpen","useState","internalRef","useRefState","elementRef","useRef","onOptionsRef","enter","exit","useEffect","element","onEnterPictureInPicture","onLeavePictureInPicture","value"],"mappings":"mMAiEaA,GAAuB,IAAIC,IAAkB,CACxD,MAAMC,EACJ,OAAO,SAAa,KACpB,4BAA6B,UAC7B,CAAC,CAAC,SAAS,wBAEPC,EAAUC,EAAAA,SAASH,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CI,GAAYF,EAASF,EAAO,CAAC,EAAIA,EAAO,CAAC,IAAqC,CAAA,EAE9E,CAACK,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAEhCC,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAyB,IAAI,EAC1CC,EAAeD,EAAAA,OAAmCP,CAAO,EAC/DQ,EAAa,QAAUR,EAEvB,MAAMS,EAAQ,SAAY,CACnBZ,GAEAS,EAAW,UAEhB,MAAMA,EAAW,QAAQ,wBAAA,EACzBJ,EAAQ,EAAI,EAEZF,EAAQ,UAAA,EAAU,EAGdU,EAAO,SAAY,CAClBb,IAEL,MAAM,SAAS,qBAAA,EACfK,EAAQ,EAAK,EACbF,EAAQ,SAAA,EAAS,EAGnBW,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAUd,EACXC,EAAAA,SAAS,WAAWD,CAAM,EAC3BM,EAAY,QAChB,GAAI,CAACQ,EAAS,OAEdN,EAAW,QAAUM,EAErB,MAAMC,EAA0B,IAAM,CACpCX,EAAQ,EAAI,EACZM,EAAa,QAAQ,UAAA,CAAU,EAG3BM,EAA0B,IAAM,CACpCZ,EAAQ,EAAK,EACbM,EAAa,QAAQ,SAAA,CAAS,EAGhC,OAAAI,EAAQ,iBAAiB,wBAAyBC,CAAuB,EACzED,EAAQ,iBAAiB,wBAAyBE,CAAuB,EAElE,IAAM,CACXF,EAAQ,oBAAoB,wBAAyBC,CAAuB,EAC5ED,EAAQ,oBAAoB,wBAAyBE,CAAuB,CAAA,CAC9E,EACC,CAAChB,EAAQM,EAAY,MAAOL,EAAAA,SAAS,YAAYD,CAAM,CAAC,CAAC,EAO5D,MAAMiB,EAAQ,CACZ,KAAAd,EACA,UAAAJ,EACA,MAAAY,EACA,KAAAC,EACA,OAVa,SAAY,CACrBT,QAAYS,EAAA,QACLD,EAAA,CAAM,CAQjB,EAGF,OAAIX,EAAeiB,EACZ,CAAE,GAAGA,EAAO,IAAKX,CAAA,CAC1B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),s=(n,u)=>{let e=n;function t(r){e!==r&&(e=r,u(e))}return Object.defineProperty(t,"current",{get(){return e},set(r){e!==r&&(e=r,u(e))},configurable:!0,enumerable:!0}),t},f=n=>{const[u,e]=c.useState(n),[t]=c.useState(()=>s(n,e));return t.state=u,t};exports.createRefState=s;exports.useRefState=f;
|
|
2
2
|
//# sourceMappingURL=useRefState.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRefState.cjs","sources":["../../../../src/hooks/useRefState/useRefState.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport interface StateRef<Value> {\n (node: Value): void;\n current: Value;\n state?: Value;\n}\n\
|
|
1
|
+
{"version":3,"file":"useRefState.cjs","sources":["../../../../src/hooks/useRefState/useRefState.ts"],"sourcesContent":["import { useState } from 'react';\n\nexport interface StateRef<Value> {\n (node: Value): void;\n current: Value;\n state?: Value;\n}\n\nexport const createRefState = <Value>(\n initialValue: Value | undefined,\n setState: (value: Value) => void\n) => {\n let temp = initialValue;\n function ref(value: Value) {\n if (temp === value) return;\n temp = value;\n setState(temp);\n }\n\n Object.defineProperty(ref, 'current', {\n get() {\n return temp;\n },\n set(value: Value) {\n if (temp === value) return;\n temp = value;\n setState(temp);\n },\n configurable: true,\n enumerable: true\n });\n\n return ref as StateRef<Value>;\n};\n\n/**\n * @name useRefState\n * @description - Hook that returns the state reference of the value\n * @category State\n * @usage low\n *\n * @template Value The type of the value\n * @param {Value} [initialValue] The initial value\n * @returns {StateRef<Value>} The current value\n *\n * @example\n * const internalRefState = useRefState();\n */\nexport const useRefState = <Value>(initialValue?: Value) => {\n const [state, setState] = useState<Value | undefined>(initialValue);\n const [ref] = useState(() => createRefState<Value>(initialValue, setState));\n ref.state = state;\n return ref;\n};\n"],"names":["createRefState","initialValue","setState","temp","ref","value","useRefState","state","useState"],"mappings":"yGAQaA,EAAiB,CAC5BC,EACAC,IACG,CACH,IAAIC,EAAOF,EACX,SAASG,EAAIC,EAAc,CACrBF,IAASE,IACbF,EAAOE,EACPH,EAASC,CAAI,EAAA,CAGf,cAAO,eAAeC,EAAK,UAAW,CACpC,KAAM,CACJ,OAAOD,CAAA,EAET,IAAIE,EAAc,CACZF,IAASE,IACbF,EAAOE,EACPH,EAASC,CAAI,EAAA,EAEf,aAAc,GACd,WAAY,EAAA,CACb,EAEMC,CACT,EAeaE,EAAsBL,GAAyB,CAC1D,KAAM,CAACM,EAAOL,CAAQ,EAAIM,EAAAA,SAA4BP,CAAY,EAC5D,CAACG,CAAG,EAAII,EAAAA,SAAS,IAAMR,EAAsBC,EAAcC,CAAQ,CAAC,EAC1E,OAAAE,EAAI,MAAQG,EACLH,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),d=require("../useRefState/useRefState.cjs"),c=require("../../utils/helpers/isTarget.cjs"),y=((...e)=>{const t=c.isTarget(e[0])?e[0]:void 0,n=t?typeof e[1]=="object"?e[1]:{onChange:e[1]}:typeof e[0]=="object"?e[0]:{onChange:e[0]},u=n?.onChange,i=n?.enabled??!0,[b,v]=s.useState(),[f,R]=s.useState(),r=d.useRefState(),l=s.useRef(u);return l.current=u,s.useEffect(()=>{if(!i||!t&&!r.state)return;const a=t?c.isTarget.getElement(t):r.current;if(!a)return;const o=new ResizeObserver(([g],S)=>{v(g),l.current?.(g,S)});return R(o),o.observe(a,n),()=>{o.disconnect()}},[t,r.state,c.isTarget.getRefState(t),n?.box,i]),t?{entry:b,observer:f}:{ref:r,entry:b,observer:f}});exports.useResizeObserver=y;
|
|
2
2
|
//# sourceMappingURL=useResizeObserver.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResizeObserver.cjs","sources":["../../../../src/hooks/useResizeObserver/useResizeObserver.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 resize observer callback type */\nexport type UseResizeObserverCallback = (\n entry: ResizeObserverEntry,\n observer: ResizeObserver\n) => void;\n\n/** The resize observer options type */\nexport interface UseResizeObserverOptions extends ResizeObserverOptions {\n /** The enabled state of the resize observer */\n enabled?: boolean;\n /** The callback to execute when resize is detected */\n onChange?: UseResizeObserverCallback;\n}\n\n/** The resize observer return type */\nexport interface UseResizeObserverReturn {\n /** The resize observer entries */\n entry: ResizeObserverEntry;\n /** The resize observer instance */\n observer?: ResizeObserver;\n}\n\nexport interface UseResizeObserver {\n <Target extends Element>(\n options?: UseResizeObserverOptions,\n target?: never\n ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, options?: UseResizeObserverOptions): UseResizeObserverReturn;\n\n <Target extends Element>(\n callback: UseResizeObserverCallback,\n target?: never\n ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, callback: UseResizeObserverCallback): UseResizeObserverReturn;\n}\n\n/**\n * @name useResizeObserver\n * @description - Hook that gives you resize observer state\n * @category Sensors\n * @usage low\n *\n * @browserapi ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entries, observer } = useResizeObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver();\n *\n * @overload\n * @template Target The target element\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver((entry) => console.log(entry));\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entry, observer } = useResizeObserver(ref, (entry) => console.log(entry));\n */\nexport const useResizeObserver = ((...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 UseResizeObserverOptions | undefined;\n\n const callback = options?.onChange;\n const enabled = options?.enabled ?? true;\n\n const [entry, setEntry] = useState<ResizeObserverEntry>();\n const [observer, setObserver] = useState<ResizeObserver>();\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 ResizeObserver(([entry], observer) => {\n setEntry(entry);\n internalCallbackRef.current?.(entry, observer);\n });\n\n setObserver(observer);\n observer.observe(element as Element, options);\n\n return () => {\n observer.disconnect();\n };\n }, [target, internalRef.state, options?.box, enabled]);\n\n if (target) return { entry, observer };\n return {\n ref: internalRef,\n entry,\n observer\n };\n}) as UseResizeObserver;\n"],"names":["useResizeObserver","params","target","isTarget","options","callback","enabled","entry","setEntry","useState","observer","setObserver","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element"],"mappings":"mMA4FaA,
|
|
1
|
+
{"version":3,"file":"useResizeObserver.cjs","sources":["../../../../src/hooks/useResizeObserver/useResizeObserver.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 resize observer callback type */\nexport type UseResizeObserverCallback = (\n entry: ResizeObserverEntry,\n observer: ResizeObserver\n) => void;\n\n/** The resize observer options type */\nexport interface UseResizeObserverOptions extends ResizeObserverOptions {\n /** The enabled state of the resize observer */\n enabled?: boolean;\n /** The callback to execute when resize is detected */\n onChange?: UseResizeObserverCallback;\n}\n\n/** The resize observer return type */\nexport interface UseResizeObserverReturn {\n /** The resize observer entries */\n entry: ResizeObserverEntry;\n /** The resize observer instance */\n observer?: ResizeObserver;\n}\n\nexport interface UseResizeObserver {\n <Target extends Element>(\n options?: UseResizeObserverOptions,\n target?: never\n ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, options?: UseResizeObserverOptions): UseResizeObserverReturn;\n\n <Target extends Element>(\n callback: UseResizeObserverCallback,\n target?: never\n ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, callback: UseResizeObserverCallback): UseResizeObserverReturn;\n}\n\n/**\n * @name useResizeObserver\n * @description - Hook that gives you resize observer state\n * @category Sensors\n * @usage low\n *\n * @browserapi ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entries, observer } = useResizeObserver(ref);\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver();\n *\n * @overload\n * @template Target The target element\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n *\n * @example\n * const { ref, entry, observer } = useResizeObserver((entry) => console.log(entry));\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n *\n * @example\n * const { entry, observer } = useResizeObserver(ref, (entry) => console.log(entry));\n */\nexport const useResizeObserver = ((...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 UseResizeObserverOptions | undefined;\n\n const callback = options?.onChange;\n const enabled = options?.enabled ?? true;\n\n const [entry, setEntry] = useState<ResizeObserverEntry>();\n const [observer, setObserver] = useState<ResizeObserver>();\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 ResizeObserver(([entry], observer) => {\n setEntry(entry);\n internalCallbackRef.current?.(entry, observer);\n });\n\n setObserver(observer);\n observer.observe(element as Element, options);\n\n return () => {\n observer.disconnect();\n };\n }, [target, internalRef.state, isTarget.getRefState(target), options?.box, enabled]);\n\n if (target) return { entry, observer };\n return {\n ref: internalRef,\n entry,\n observer\n };\n}) as UseResizeObserver;\n"],"names":["useResizeObserver","params","target","isTarget","options","callback","enabled","entry","setEntry","useState","observer","setObserver","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element"],"mappings":"mMA4FaA,GAAqB,IAAIC,IAAkB,CACtD,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,EAAOC,CAAQ,EAAIC,WAAA,EACpB,CAACC,EAAUC,CAAW,EAAIF,WAAA,EAE1BG,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOV,CAAQ,EAsB3C,OArBAS,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,MAAMP,EAAW,IAAI,eAAe,CAAC,CAACH,CAAK,EAAGG,IAAa,CACzDF,EAASD,CAAK,EACdO,EAAoB,UAAUP,EAAOG,CAAQ,CAAA,CAC9C,EAED,OAAAC,EAAYD,CAAQ,EACpBA,EAAS,QAAQO,EAAoBb,CAAO,EAErC,IAAM,CACXM,EAAS,WAAA,CAAW,CACtB,EACC,CAACR,EAAQU,EAAY,MAAOT,EAAAA,SAAS,YAAYD,CAAM,EAAGE,GAAS,IAAKE,CAAO,CAAC,EAE/EJ,EAAe,CAAE,MAAAK,EAAO,SAAAG,CAAA,EACrB,CACL,IAAKE,EACL,MAAAL,EACA,SAAAG,CAAA,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),h=require("../useRefState/useRefState.cjs"),a=require("../../utils/helpers/isTarget.cjs"),R=((...r)=>{const e=a.isTarget(r[0])?r[0]:void 0,l=e?r[1]:r[0],f=e?r[2]:r[1],o=h.useRefState(),s=i.useRef(l);s.current=l;const u=i.useRef(f);if(u.current=f,i.useEffect(()=>{if(!e&&!o.state)return;const n=e?a.isTarget.getElement(e):o.current;if(!n)return;const d=t=>{t.preventDefault(),u.current?.onStart?.(t);const c=t;s.current({x:c.clientX,y:c.clientY},t)},E=t=>{t.preventDefault(),u.current?.onStart?.(t);const c=t;s.current({x:c.touches[0].clientX,y:c.touches[0].clientY},t)},g=t=>{t.preventDefault(),u.current?.onEnd?.(t)};return n.addEventListener("contextmenu",d),n.addEventListener("touchstart",E),n.addEventListener("touchend",g),()=>{n.removeEventListener("contextmenu",d),n.removeEventListener("touchstart",E),n.removeEventListener("touchend",g)}},[e,o.state,a.isTarget.getRefState(e)]),!e)return o});exports.useRightClick=R;
|
|
2
2
|
//# sourceMappingURL=useRightClick.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRightClick.cjs","sources":["../../../../src/hooks/useRightClick/useRightClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type RightClickEvent = MouseEvent | TouchEvent;\nexport interface RightClickPositions {\n x: number;\n y: number;\n}\n\nexport interface UseRightClickOptions {\n // * The callback function to be invoked on right click end\n onEnd?: (event: RightClickEvent) => void;\n // * The callback function to be invoked on right click start\n onStart?: (event: RightClickEvent) => void;\n}\n\nexport interface UseRightClick {\n (target: HookTarget, callback: (event: Event) => void, options?: UseRightClickOptions): void;\n\n <Target extends Element>(\n callback: (positions: RightClickPositions, event: Event) => void,\n options?: UseRightClickOptions,\n target?: never\n ): StateRef<Target>;\n}\n\n/**\n * @name useRightClick\n * @description - Hook that handles right-click events and long press on mobile devices\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for right-click handling\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {void}\n *\n * @example\n * useRightClick(ref, () => console.log('clicked'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {StateRef<Target>} Ref to attach to the element\n *\n * @example\n * const ref = useRightClick(() => console.log('clicked'));\n */\nexport const useRightClick = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const callback = (target ? params[1] : params[0]) as (\n positions: RightClickPositions,\n event: RightClickEvent\n ) => void;\n const options = (target ? params[2] : params[1]) as UseRightClickOptions;\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const onContextMenu = (event: RightClickEvent) => {\n event.preventDefault();\n internalOptionsRef.current?.onStart?.(event);\n const mouseEvent = event as MouseEvent;\n internalCallbackRef.current({ x: mouseEvent.clientX, y: mouseEvent.clientY }, event);\n };\n\n const onTouchStart = (event: RightClickEvent) => {\n event.preventDefault();\n internalOptionsRef.current?.onStart?.(event);\n const touchEvent = event as TouchEvent;\n internalCallbackRef.current(\n { x: touchEvent.touches[0].clientX, y: touchEvent.touches[0].clientY },\n event\n );\n };\n\n const onTouchEnd = (event: RightClickEvent) => {\n event.preventDefault();\n internalOptionsRef.current?.onEnd?.(event);\n };\n\n element.addEventListener('contextmenu', onContextMenu as EventListener);\n\n element.addEventListener('touchstart', onTouchStart as EventListener);\n element.addEventListener('touchend', onTouchEnd as EventListener);\n\n return () => {\n element.removeEventListener('contextmenu', onContextMenu as EventListener);\n\n element.removeEventListener('touchstart', onTouchStart as EventListener);\n element.removeEventListener('touchend', onTouchEnd as EventListener);\n };\n }, [target, internalRef.state]);\n\n if (target) return;\n return internalRef;\n}) as UseRightClick;\n"],"names":["useRightClick","params","target","isTarget","callback","options","internalRef","useRefState","internalCallbackRef","useRef","internalOptionsRef","useEffect","element","onContextMenu","event","mouseEvent","onTouchStart","touchEvent","onTouchEnd"],"mappings":"mMAuDaA,
|
|
1
|
+
{"version":3,"file":"useRightClick.cjs","sources":["../../../../src/hooks/useRightClick/useRightClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type RightClickEvent = MouseEvent | TouchEvent;\nexport interface RightClickPositions {\n x: number;\n y: number;\n}\n\nexport interface UseRightClickOptions {\n // * The callback function to be invoked on right click end\n onEnd?: (event: RightClickEvent) => void;\n // * The callback function to be invoked on right click start\n onStart?: (event: RightClickEvent) => void;\n}\n\nexport interface UseRightClick {\n (target: HookTarget, callback: (event: Event) => void, options?: UseRightClickOptions): void;\n\n <Target extends Element>(\n callback: (positions: RightClickPositions, event: Event) => void,\n options?: UseRightClickOptions,\n target?: never\n ): StateRef<Target>;\n}\n\n/**\n * @name useRightClick\n * @description - Hook that handles right-click events and long press on mobile devices\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element for right-click handling\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {void}\n *\n * @example\n * useRightClick(ref, () => console.log('clicked'));\n *\n * @overload\n * @template Target The target element\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {StateRef<Target>} Ref to attach to the element\n *\n * @example\n * const ref = useRightClick(() => console.log('clicked'));\n */\nexport const useRightClick = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const callback = (target ? params[1] : params[0]) as (\n positions: RightClickPositions,\n event: RightClickEvent\n ) => void;\n const options = (target ? params[2] : params[1]) as UseRightClickOptions;\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const onContextMenu = (event: RightClickEvent) => {\n event.preventDefault();\n internalOptionsRef.current?.onStart?.(event);\n const mouseEvent = event as MouseEvent;\n internalCallbackRef.current({ x: mouseEvent.clientX, y: mouseEvent.clientY }, event);\n };\n\n const onTouchStart = (event: RightClickEvent) => {\n event.preventDefault();\n internalOptionsRef.current?.onStart?.(event);\n const touchEvent = event as TouchEvent;\n internalCallbackRef.current(\n { x: touchEvent.touches[0].clientX, y: touchEvent.touches[0].clientY },\n event\n );\n };\n\n const onTouchEnd = (event: RightClickEvent) => {\n event.preventDefault();\n internalOptionsRef.current?.onEnd?.(event);\n };\n\n element.addEventListener('contextmenu', onContextMenu as EventListener);\n\n element.addEventListener('touchstart', onTouchStart as EventListener);\n element.addEventListener('touchend', onTouchEnd as EventListener);\n\n return () => {\n element.removeEventListener('contextmenu', onContextMenu as EventListener);\n\n element.removeEventListener('touchstart', onTouchStart as EventListener);\n element.removeEventListener('touchend', onTouchEnd as EventListener);\n };\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n if (target) return;\n return internalRef;\n}) as UseRightClick;\n"],"names":["useRightClick","params","target","isTarget","callback","options","internalRef","useRefState","internalCallbackRef","useRef","internalOptionsRef","useEffect","element","onContextMenu","event","mouseEvent","onTouchStart","touchEvent","onTouchEnd"],"mappings":"mMAuDaA,GAAiB,IAAIC,IAAuB,CACvD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAYF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAIzCI,EAAWH,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCK,EAAcC,EAAAA,YAAA,EACdC,EAAsBC,EAAAA,OAAOL,CAAQ,EAC3CI,EAAoB,QAAUJ,EAC9B,MAAMM,EAAqBD,EAAAA,OAAOJ,CAAO,EA4CzC,GA3CAK,EAAmB,QAAUL,EAE7BM,EAAAA,UAAU,IAAM,CACd,GAAI,CAACT,GAAU,CAACI,EAAY,MAAO,OAEnC,MAAMM,EAAUV,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAII,EAAY,QACnE,GAAI,CAACM,EAAS,OAEd,MAAMC,EAAiBC,GAA2B,CAChDA,EAAM,eAAA,EACNJ,EAAmB,SAAS,UAAUI,CAAK,EAC3C,MAAMC,EAAaD,EACnBN,EAAoB,QAAQ,CAAE,EAAGO,EAAW,QAAS,EAAGA,EAAW,OAAA,EAAWD,CAAK,CAAA,EAG/EE,EAAgBF,GAA2B,CAC/CA,EAAM,eAAA,EACNJ,EAAmB,SAAS,UAAUI,CAAK,EAC3C,MAAMG,EAAaH,EACnBN,EAAoB,QAClB,CAAE,EAAGS,EAAW,QAAQ,CAAC,EAAE,QAAS,EAAGA,EAAW,QAAQ,CAAC,EAAE,OAAA,EAC7DH,CAAA,CACF,EAGII,EAAcJ,GAA2B,CAC7CA,EAAM,eAAA,EACNJ,EAAmB,SAAS,QAAQI,CAAK,CAAA,EAG3C,OAAAF,EAAQ,iBAAiB,cAAeC,CAA8B,EAEtED,EAAQ,iBAAiB,aAAcI,CAA6B,EACpEJ,EAAQ,iBAAiB,WAAYM,CAA2B,EAEzD,IAAM,CACXN,EAAQ,oBAAoB,cAAeC,CAA8B,EAEzED,EAAQ,oBAAoB,aAAcI,CAA6B,EACvEJ,EAAQ,oBAAoB,WAAYM,CAA2B,CAAA,CACrE,EACC,CAAChB,EAAQI,EAAY,MAAOH,EAAAA,SAAS,YAAYD,CAAM,CAAC,CAAC,EAExD,CAAAA,EACJ,OAAOI,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),P=require("../useRefState/useRefState.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),P=require("../useRefState/useRefState.cjs"),y=require("../../utils/helpers/isTarget.cjs"),j=1,V=((...o)=>{const c=y.isTarget(o[0])?o[0]:void 0,a=c?typeof o[1]=="object"?o[1]:{onScroll:o[1]}:typeof o[0]=="object"?o[0]:{onScroll:o[0]},g=P.useRefState(),R=d.useRef(a),u=d.useRef(null);R.current=a;const[T,b]=d.useState(!1),f=d.useRef({x:0,y:0});d.useEffect(()=>{if(!c&&!g.state)return;const e=(c?y.isTarget.getElement(c):g.current)??window;u.current=e;const l=t=>{b(!1),a?.onStop?.(t)},s=t=>{b(!0);const r=t.target===document?t.target.documentElement:t.target,{display:E,flexDirection:h,direction:q}=r.style,p=q==="rtl"?-1:1,i=r.scrollLeft;let n=r.scrollTop;r instanceof Document&&!n&&(n=window.document.body.scrollTop);const S=R.current?.offset,x=i*p<=(S?.left??0),L=i*p+r.clientWidth>=r.scrollWidth-(S?.right??0)-j,w=n<=(S?.top??0),D=n+r.clientHeight>=r.scrollHeight-(S?.bottom??0)-j,H=E==="flex"&&h==="column-reverse",I=E==="flex"&&h==="column-reverse",O={x:i,y:n,directions:{left:i<f.current.x,right:i>f.current.x,top:n<f.current.y,bottom:n>f.current.y},arrived:{left:I?L:x,right:I?x:L,top:H?D:w,bottom:H?w:D}};f.current={x:i,y:n},R.current?.onScroll?.(O,t)};return e.addEventListener("scroll",s),e.addEventListener("scrollend",l),()=>{e.removeEventListener("scroll",s),e.removeEventListener("scrollend",l)}},[c,g.state,y.isTarget.getRefState(c)]);const m=e=>{if(!u.current)return;const{behavior:l,block:s,inline:t}=e??{};u.current.scrollIntoView({behavior:l,block:s,inline:t})},v=e=>{if(!u.current)return;const{x:l,y:s,behavior:t}=e??{};u.current.scrollTo({left:l,top:s,behavior:t})};return c?{scrollIntoView:m,scrollTo:v,scrolling:T}:{ref:g,scrolling:T,scrollIntoView:m,scrollTo:v}});exports.useScroll=V;
|
|
2
2
|
//# sourceMappingURL=useScroll.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScroll.cjs","sources":["../../../../src/hooks/useScroll/useScroll.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\nconst ARRIVED_STATE_THRESHOLD_PIXELS = 1;\n\nexport interface UseScrollOptions {\n /** The on scroll callback */\n onScroll?: (params: UseScrollCallbackParams, event: Event) => void;\n\n /** The on end scroll callback */\n onStop?: (event: Event) => void;\n\n /** Offset arrived states by x pixels. */\n offset?: {\n left?: number;\n right?: number;\n top?: number;\n bottom?: number;\n };\n}\n\nexport interface UseScrollCallbackParams {\n /** The element x position */\n x: number;\n /** The element y position */\n y: number;\n /** State of scroll arrived */\n arrived: {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n };\n /** State of scroll direction */\n directions: {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n };\n}\n\n/** The scroll into view params type */\nexport interface ScrollIntoViewParams {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n}\n/** The scroll to params type */\nexport interface ScrollToParams {\n behavior?: ScrollBehavior;\n x: number;\n y: number;\n}\n\n/** The use scroll return type */\nexport interface UseScrollReturn {\n /** The state of scrolling */\n scrolling: boolean;\n /** Function to scroll element into view */\n scrollIntoView: (params?: ScrollIntoViewParams) => void;\n /** Function to scroll element to a specific position */\n scrollTo: (params?: ScrollToParams) => void;\n}\n\nexport interface UseScroll {\n (\n target?: HookTarget,\n callback?: (params: UseScrollCallbackParams, event: Event) => void\n ): UseScrollReturn;\n\n (target?: HookTarget, options?: UseScrollOptions): UseScrollReturn;\n\n <Target extends Element>(\n callback?: (params: UseScrollCallbackParams, event: Event) => void,\n target?: never\n ): UseScrollReturn & { ref: StateRef<Target> };\n\n <Target extends Element>(\n options?: UseScrollOptions,\n target?: never\n ): UseScrollReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useScroll\n * @description - Hook that allows you to control scroll a element\n * @category Sensors\n * @usage low\n *\n * @overload\n * @template Target The target element\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0] The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {UseScrollReturn} The state of scrolling\n *\n * @example\n * const { scrolling, scrollIntoView, scrollTo} = useScroll(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {UseScrollReturn} The state of scrolling\n *\n * @example\n * const { scrolling, scrollIntoView, scrollTo} = useScroll(ref, () => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {Target} [target=window] The target element to scroll\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0] The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {UseScrollReturn & { ref: StateRef<Target> }} The state of scrolling\n *\n * @example\n * const { ref, scrolling, scrollIntoView, scrollTo} = useScroll(options);\n *\n * @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {UseScrollReturn & { ref: StateRef<Target> }} The state of scrolling\n *\n * @example\n * const { ref, scrolling, scrollIntoView, scrollTo} = useScroll(() => console.log('callback'));\n */\nexport const useScroll = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onScroll: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onScroll: params[0] }\n ) as UseScrollOptions | undefined;\n\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n const elementRef = useRef<Element>(null);\n internalOptionsRef.current = options;\n\n const [scrolling, setScrolling] = useState(false);\n const scrollPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n elementRef.current = element;\n\n const onScrollEnd = (event: Event) => {\n setScrolling(false);\n options?.onStop?.(event);\n };\n\n const onScroll = (event: Event) => {\n setScrolling(true);\n const target = (\n event.target === document ? (event.target as Document).documentElement : event.target\n ) as HTMLElement;\n\n const { display, flexDirection, direction } = target.style;\n const directionMultiplier = direction === 'rtl' ? -1 : 1;\n\n const scrollLeft = target.scrollLeft;\n let scrollTop = target.scrollTop;\n if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;\n\n const offset = internalOptionsRef.current?.offset;\n const left = scrollLeft * directionMultiplier <= (offset?.left ?? 0);\n const right =\n scrollLeft * directionMultiplier + target.clientWidth >=\n target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n const top = scrollTop <= (offset?.top ?? 0);\n const bottom =\n scrollTop + target.clientHeight >=\n target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n\n const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';\n const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';\n\n const params = {\n x: scrollLeft,\n y: scrollTop,\n directions: {\n left: scrollLeft < scrollPositionRef.current.x,\n right: scrollLeft > scrollPositionRef.current.x,\n top: scrollTop < scrollPositionRef.current.y,\n bottom: scrollTop > scrollPositionRef.current.y\n },\n arrived: {\n left: isRowReverse ? right : left,\n right: isRowReverse ? left : right,\n top: isColumnReverse ? bottom : top,\n bottom: isColumnReverse ? top : bottom\n }\n };\n\n scrollPositionRef.current = { x: scrollLeft, y: scrollTop };\n internalOptionsRef.current?.onScroll?.(params, event);\n };\n\n element.addEventListener('scroll', onScroll);\n element.addEventListener('scrollend', onScrollEnd);\n\n return () => {\n element.removeEventListener('scroll', onScroll);\n element.removeEventListener('scrollend', onScrollEnd);\n };\n }, [target, internalRef.state]);\n\n const scrollIntoView = (params?: {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n }) => {\n if (!elementRef.current) return;\n\n const { behavior, block, inline } = params ?? {};\n\n elementRef.current.scrollIntoView({\n behavior,\n block,\n inline\n });\n };\n\n const scrollTo = (params?: { x: number; y: number; behavior?: ScrollBehavior }) => {\n if (!elementRef.current) return;\n\n const { x, y, behavior } = params ?? {};\n\n elementRef.current.scrollTo({ left: x, top: y, behavior });\n };\n\n if (target) return { scrollIntoView, scrollTo, scrolling };\n return {\n ref: internalRef,\n scrolling,\n scrollIntoView,\n scrollTo\n };\n}) as UseScroll;\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","elementRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse","scrollIntoView","behavior","block","inline","scrollTo","x","y"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useScroll.cjs","sources":["../../../../src/hooks/useScroll/useScroll.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\nconst ARRIVED_STATE_THRESHOLD_PIXELS = 1;\n\nexport interface UseScrollOptions {\n /** The on scroll callback */\n onScroll?: (params: UseScrollCallbackParams, event: Event) => void;\n\n /** The on end scroll callback */\n onStop?: (event: Event) => void;\n\n /** Offset arrived states by x pixels. */\n offset?: {\n left?: number;\n right?: number;\n top?: number;\n bottom?: number;\n };\n}\n\nexport interface UseScrollCallbackParams {\n /** The element x position */\n x: number;\n /** The element y position */\n y: number;\n /** State of scroll arrived */\n arrived: {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n };\n /** State of scroll direction */\n directions: {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n };\n}\n\n/** The scroll into view params type */\nexport interface ScrollIntoViewParams {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n}\n/** The scroll to params type */\nexport interface ScrollToParams {\n behavior?: ScrollBehavior;\n x: number;\n y: number;\n}\n\n/** The use scroll return type */\nexport interface UseScrollReturn {\n /** The state of scrolling */\n scrolling: boolean;\n /** Function to scroll element into view */\n scrollIntoView: (params?: ScrollIntoViewParams) => void;\n /** Function to scroll element to a specific position */\n scrollTo: (params?: ScrollToParams) => void;\n}\n\nexport interface UseScroll {\n (\n target?: HookTarget,\n callback?: (params: UseScrollCallbackParams, event: Event) => void\n ): UseScrollReturn;\n\n (target?: HookTarget, options?: UseScrollOptions): UseScrollReturn;\n\n <Target extends Element>(\n callback?: (params: UseScrollCallbackParams, event: Event) => void,\n target?: never\n ): UseScrollReturn & { ref: StateRef<Target> };\n\n <Target extends Element>(\n options?: UseScrollOptions,\n target?: never\n ): UseScrollReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/**\n * @name useScroll\n * @description - Hook that allows you to control scroll a element\n * @category Sensors\n * @usage low\n *\n * @overload\n * @template Target The target element\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0] The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {UseScrollReturn} The state of scrolling\n *\n * @example\n * const { scrolling, scrollIntoView, scrollTo} = useScroll(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {UseScrollReturn} The state of scrolling\n *\n * @example\n * const { scrolling, scrollIntoView, scrollTo} = useScroll(ref, () => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {Target} [target=window] The target element to scroll\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0] The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {UseScrollReturn & { ref: StateRef<Target> }} The state of scrolling\n *\n * @example\n * const { ref, scrolling, scrollIntoView, scrollTo} = useScroll(options);\n *\n * @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {UseScrollReturn & { ref: StateRef<Target> }} The state of scrolling\n *\n * @example\n * const { ref, scrolling, scrollIntoView, scrollTo} = useScroll(() => console.log('callback'));\n */\nexport const useScroll = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onScroll: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onScroll: params[0] }\n ) as UseScrollOptions | undefined;\n\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n const elementRef = useRef<Element>(null);\n internalOptionsRef.current = options;\n\n const [scrolling, setScrolling] = useState(false);\n const scrollPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n elementRef.current = element;\n\n const onScrollEnd = (event: Event) => {\n setScrolling(false);\n options?.onStop?.(event);\n };\n\n const onScroll = (event: Event) => {\n setScrolling(true);\n const target = (\n event.target === document ? (event.target as Document).documentElement : event.target\n ) as HTMLElement;\n\n const { display, flexDirection, direction } = target.style;\n const directionMultiplier = direction === 'rtl' ? -1 : 1;\n\n const scrollLeft = target.scrollLeft;\n let scrollTop = target.scrollTop;\n if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;\n\n const offset = internalOptionsRef.current?.offset;\n const left = scrollLeft * directionMultiplier <= (offset?.left ?? 0);\n const right =\n scrollLeft * directionMultiplier + target.clientWidth >=\n target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n const top = scrollTop <= (offset?.top ?? 0);\n const bottom =\n scrollTop + target.clientHeight >=\n target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n\n const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';\n const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';\n\n const params = {\n x: scrollLeft,\n y: scrollTop,\n directions: {\n left: scrollLeft < scrollPositionRef.current.x,\n right: scrollLeft > scrollPositionRef.current.x,\n top: scrollTop < scrollPositionRef.current.y,\n bottom: scrollTop > scrollPositionRef.current.y\n },\n arrived: {\n left: isRowReverse ? right : left,\n right: isRowReverse ? left : right,\n top: isColumnReverse ? bottom : top,\n bottom: isColumnReverse ? top : bottom\n }\n };\n\n scrollPositionRef.current = { x: scrollLeft, y: scrollTop };\n internalOptionsRef.current?.onScroll?.(params, event);\n };\n\n element.addEventListener('scroll', onScroll);\n element.addEventListener('scrollend', onScrollEnd);\n\n return () => {\n element.removeEventListener('scroll', onScroll);\n element.removeEventListener('scrollend', onScrollEnd);\n };\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n const scrollIntoView = (params?: {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n }) => {\n if (!elementRef.current) return;\n\n const { behavior, block, inline } = params ?? {};\n\n elementRef.current.scrollIntoView({\n behavior,\n block,\n inline\n });\n };\n\n const scrollTo = (params?: { x: number; y: number; behavior?: ScrollBehavior }) => {\n if (!elementRef.current) return;\n\n const { x, y, behavior } = params ?? {};\n\n elementRef.current.scrollTo({ left: x, top: y, behavior });\n };\n\n if (target) return { scrollIntoView, scrollTo, scrolling };\n return {\n ref: internalRef,\n scrolling,\n scrollIntoView,\n scrollTo\n };\n}) as UseScroll;\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","elementRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse","scrollIntoView","behavior","block","inline","scrollTo","x","y"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),m=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),v=require("../useRefState/useRefState.cjs"),i=require("../../utils/helpers/isTarget.cjs"),w=((...t)=>{const e=i.isTarget(t[0])?t[0]:void 0,c=e?t[1]:t[0],r=v.useRefState(),{behavior:u="smooth",block:l="start",inline:a="nearest",immediately:f=!0}=c??{},o=S.useRef(null);m.useIsomorphicLayoutEffect(()=>{if(!f||!e&&!r.state)return;const n=(e?i.isTarget.getElement(e):r.current)??window;o.current=n,n.scrollIntoView({behavior:u,block:l,inline:a})},[e,r.state,i.isTarget.getRefState(e)]);const s=n=>{if(!o.current)return;const{behavior:g,block:b,inline:h}=n??{};o.current.scrollIntoView({behavior:g,block:b,inline:h})};return e?{trigger:s}:{ref:r,trigger:s}});exports.useScrollIntoView=w;
|
|
2
2
|
//# sourceMappingURL=useScrollIntoView.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollIntoView.cjs","sources":["../../../../src/hooks/useScrollIntoView/useScrollIntoView.ts"],"sourcesContent":["import { 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 { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The scroll into view options type */\nexport interface UseScrollIntoViewOptions extends ScrollIntoViewOptions {\n /** Whether to immediately the scroll into view */\n immediately?: boolean;\n}\n\n/** The scroll into view return type */\nexport interface UseScrollIntoViewReturn {\n /** Function to scroll element into view */\n trigger: (params?: {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n }) => void;\n}\n\nexport interface UseScrollIntoView {\n <Target extends Element>(\n options?: UseScrollIntoViewOptions,\n target?: never\n ): UseScrollIntoViewReturn & { ref: StateRef<Target> };\n\n (target?: HookTarget, options?: UseScrollIntoViewOptions): UseScrollIntoViewReturn;\n}\n\n/**\n * @name useScrollIntoView\n * @description - Hook that provides functionality to scroll an element into view\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} [target=window] The target element to scroll into view\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {ScrollBehavior} [options.behavior='smooth'] The scrolling behavior\n * @param {ScrollLogicalPosition} [options.block='start'] The vertical alignment\n * @param {ScrollLogicalPosition} [options.inline='nearest'] The horizontal alignment\n * @returns {UseScrollIntoViewReturn} Object containing scroll function\n *\n * @example\n * const { trigger } = useScrollIntoView(ref);\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {ScrollBehavior} [options.behavior='smooth'] The scrolling behavior\n * @param {ScrollLogicalPosition} [options.block='start'] The vertical alignment\n * @param {ScrollLogicalPosition} [options.inline='nearest'] The horizontal alignment\n * @returns {UseScrollIntoViewReturn & { ref: StateRef<Target> }} Object containing scroll function and ref\n *\n * @example\n * const { ref, trigger } = useScrollIntoView<HTMLDivElement>();\n */\nexport const useScrollIntoView = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseScrollIntoViewOptions | undefined;\n\n const internalRef = useRefState<Element>();\n const {\n behavior = 'smooth',\n block = 'start',\n inline = 'nearest',\n immediately = true\n } = options ?? {};\n const elementRef = useRef<Element>(null);\n\n useIsomorphicLayoutEffect(() => {\n if (!immediately) return;\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n elementRef.current = element;\n\n element.scrollIntoView({\n behavior,\n block,\n inline\n });\n }, [target, internalRef.state]);\n\n const trigger = (params?: {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n }) => {\n if (!elementRef.current) return;\n\n const { behavior, block, inline } = params ?? {};\n\n elementRef.current.scrollIntoView({\n behavior,\n block,\n inline\n });\n };\n\n if (target) return { trigger };\n return { ref: internalRef, trigger };\n}) as UseScrollIntoView;\n"],"names":["useScrollIntoView","params","target","isTarget","options","internalRef","useRefState","behavior","block","inline","immediately","elementRef","useRef","useIsomorphicLayoutEffect","element","trigger"],"mappings":"2QAgEaA,
|
|
1
|
+
{"version":3,"file":"useScrollIntoView.cjs","sources":["../../../../src/hooks/useScrollIntoView/useScrollIntoView.ts"],"sourcesContent":["import { 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 { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The scroll into view options type */\nexport interface UseScrollIntoViewOptions extends ScrollIntoViewOptions {\n /** Whether to immediately the scroll into view */\n immediately?: boolean;\n}\n\n/** The scroll into view return type */\nexport interface UseScrollIntoViewReturn {\n /** Function to scroll element into view */\n trigger: (params?: {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n }) => void;\n}\n\nexport interface UseScrollIntoView {\n <Target extends Element>(\n options?: UseScrollIntoViewOptions,\n target?: never\n ): UseScrollIntoViewReturn & { ref: StateRef<Target> };\n\n (target?: HookTarget, options?: UseScrollIntoViewOptions): UseScrollIntoViewReturn;\n}\n\n/**\n * @name useScrollIntoView\n * @description - Hook that provides functionality to scroll an element into view\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} [target=window] The target element to scroll into view\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {ScrollBehavior} [options.behavior='smooth'] The scrolling behavior\n * @param {ScrollLogicalPosition} [options.block='start'] The vertical alignment\n * @param {ScrollLogicalPosition} [options.inline='nearest'] The horizontal alignment\n * @returns {UseScrollIntoViewReturn} Object containing scroll function\n *\n * @example\n * const { trigger } = useScrollIntoView(ref);\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {ScrollBehavior} [options.behavior='smooth'] The scrolling behavior\n * @param {ScrollLogicalPosition} [options.block='start'] The vertical alignment\n * @param {ScrollLogicalPosition} [options.inline='nearest'] The horizontal alignment\n * @returns {UseScrollIntoViewReturn & { ref: StateRef<Target> }} Object containing scroll function and ref\n *\n * @example\n * const { ref, trigger } = useScrollIntoView<HTMLDivElement>();\n */\nexport const useScrollIntoView = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseScrollIntoViewOptions | undefined;\n\n const internalRef = useRefState<Element>();\n const {\n behavior = 'smooth',\n block = 'start',\n inline = 'nearest',\n immediately = true\n } = options ?? {};\n const elementRef = useRef<Element>(null);\n\n useIsomorphicLayoutEffect(() => {\n if (!immediately) return;\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n elementRef.current = element;\n\n element.scrollIntoView({\n behavior,\n block,\n inline\n });\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n const trigger = (params?: {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n }) => {\n if (!elementRef.current) return;\n\n const { behavior, block, inline } = params ?? {};\n\n elementRef.current.scrollIntoView({\n behavior,\n block,\n inline\n });\n };\n\n if (target) return { trigger };\n return { ref: internalRef, trigger };\n}) as UseScrollIntoView;\n"],"names":["useScrollIntoView","params","target","isTarget","options","internalRef","useRefState","behavior","block","inline","immediately","elementRef","useRef","useIsomorphicLayoutEffect","element","trigger"],"mappings":"2QAgEaA,GAAqB,IAAIC,IAAkB,CACtD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EAExCI,EAAcC,EAAAA,YAAA,EACd,CACJ,SAAAC,EAAW,SACX,MAAAC,EAAQ,QACR,OAAAC,EAAS,UACT,YAAAC,EAAc,EAAA,EACZN,GAAW,CAAA,EACTO,EAAaC,EAAAA,OAAgB,IAAI,EAEvCC,EAAAA,0BAA0B,IAAM,CAE9B,GADI,CAACH,GACD,CAACR,GAAU,CAACG,EAAY,MAAO,OAEnC,MAAMS,GACFZ,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,UAAwB,OAE/EM,EAAW,QAAUG,EAErBA,EAAQ,eAAe,CACrB,SAAAP,EACA,MAAAC,EACA,OAAAC,CAAA,CACD,CAAA,EACA,CAACP,EAAQG,EAAY,MAAOF,EAAAA,SAAS,YAAYD,CAAM,CAAC,CAAC,EAE5D,MAAMa,EAAWd,GAIX,CACJ,GAAI,CAACU,EAAW,QAAS,OAEzB,KAAM,CAAE,SAAAJ,EAAU,MAAAC,EAAO,OAAAC,GAAWR,GAAU,CAAA,EAE9CU,EAAW,QAAQ,eAAe,CAChC,SAAAJ,EACA,MAAAC,EACA,OAAAC,CAAA,CACD,CAAA,EAGH,OAAIP,EAAe,CAAE,QAAAa,CAAA,EACd,CAAE,IAAKV,EAAa,QAAAU,CAAA,CAC7B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),b=require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),h=require("../useRefState/useRefState.cjs"),s=require("../../utils/helpers/isTarget.cjs"),v=((...t)=>{const e=s.isTarget(t[0])?t[0]:void 0,i=e?t[1]:t[0],{x:u,y:l,behavior:f="auto",immediately:a=!0}=i??{},r=h.useRefState(),n=S.useRef(null);b.useIsomorphicLayoutEffect(()=>{if(!a||!e&&!r.state)return;const o=(e?s.isTarget.getElement(e):r.current)??window;n.current=o,o.scrollTo({top:l,left:u,behavior:f})},[e,r.state,s.isTarget.getRefState(e)]);const c=o=>{if(!n.current)return;const{x:g,y:T,behavior:y}=o??{};n.current.scrollTo({left:g,top:T,behavior:y})};return e?{trigger:c}:{ref:r,trigger:c}});exports.useScrollTo=v;
|
|
2
2
|
//# sourceMappingURL=useScrollTo.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollTo.cjs","sources":["../../../../src/hooks/useScrollTo/useScrollTo.ts"],"sourcesContent":["import { 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 { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use scroll to options type */\nexport interface UseScrollToOptions {\n /** The scrolling behavior */\n behavior?: ScrollBehavior;\n /** Whether to immediately the scroll to */\n immediately?: boolean;\n /** The horizontal position to scroll to */\n x: number;\n /** The vertical position to scroll to */\n y: number;\n}\n\n/** The use scroll to return type */\nexport interface UseScrollToReturn {\n /** The state of scrolling */\n trigger: (params?: { x: number; y: number; behavior?: ScrollBehavior }) => void;\n}\n\nexport interface UseScrollTo {\n <Target extends Element>(\n options?: UseScrollToOptions,\n target?: never\n ): UseScrollToReturn & { ref: StateRef<Target> };\n\n (target?: HookTarget, options?: UseScrollToOptions): UseScrollToReturn;\n}\n\n/**\n * @name useScrollTo\n * @description - Hook for scrolling to a specific element\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} [target=window] The target element for scrolling to\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {number} [options.x] The horizontal position to scroll to\n * @param {number} [options.y] The vertical position to scroll to\n * @param {ScrollBehavior} [options.behavior=auto] The scrolling behavior\n * @returns {UseScrollToReturn} The scroll trigger function\n *\n * @example\n * const trigger = useScrollTo(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {number} [options.x] The horizontal position to scroll to\n * @param {number} [options.y] The vertical position to scroll to\n * @param {ScrollBehavior} [options.behavior=auto] The scrolling behavior\n * @returns {UseScrollToReturn & { ref: StateRef<Target> }} The scroll trigger function and ref\n *\n * @example\n * const { ref, trigger } = useScrollTo(options);\n */\nexport const useScrollTo = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseScrollToOptions | undefined;\n const { x, y, behavior = 'auto', immediately = true } = options ?? {};\n const internalRef = useRefState<Element>();\n const elementRef = useRef<Element>(null);\n\n useIsomorphicLayoutEffect(() => {\n if (!immediately) return;\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n elementRef.current = element;\n\n element.scrollTo({ top: y, left: x, behavior });\n }, [target, internalRef.state]);\n\n const trigger = (params?: { x: number; y: number; behavior?: ScrollBehavior }) => {\n if (!elementRef.current) return;\n\n const { x, y, behavior } = params ?? {};\n\n elementRef.current.scrollTo({ left: x, top: y, behavior });\n };\n\n if (target) return { trigger };\n return { ref: internalRef, trigger };\n}) as UseScrollTo;\n"],"names":["useScrollTo","params","target","isTarget","options","x","y","behavior","immediately","internalRef","useRefState","elementRef","useRef","useIsomorphicLayoutEffect","element","trigger"
|
|
1
|
+
{"version":3,"file":"useScrollTo.cjs","sources":["../../../../src/hooks/useScrollTo/useScrollTo.ts"],"sourcesContent":["import { 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 { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use scroll to options type */\nexport interface UseScrollToOptions {\n /** The scrolling behavior */\n behavior?: ScrollBehavior;\n /** Whether to immediately the scroll to */\n immediately?: boolean;\n /** The horizontal position to scroll to */\n x: number;\n /** The vertical position to scroll to */\n y: number;\n}\n\n/** The use scroll to return type */\nexport interface UseScrollToReturn {\n /** The state of scrolling */\n trigger: (params?: { x: number; y: number; behavior?: ScrollBehavior }) => void;\n}\n\nexport interface UseScrollTo {\n <Target extends Element>(\n options?: UseScrollToOptions,\n target?: never\n ): UseScrollToReturn & { ref: StateRef<Target> };\n\n (target?: HookTarget, options?: UseScrollToOptions): UseScrollToReturn;\n}\n\n/**\n * @name useScrollTo\n * @description - Hook for scrolling to a specific element\n * @category Sensors\n * @usage low\n *\n * @overload\n * @param {HookTarget} [target=window] The target element for scrolling to\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {number} [options.x] The horizontal position to scroll to\n * @param {number} [options.y] The vertical position to scroll to\n * @param {ScrollBehavior} [options.behavior=auto] The scrolling behavior\n * @returns {UseScrollToReturn} The scroll trigger function\n *\n * @example\n * const trigger = useScrollTo(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {number} [options.x] The horizontal position to scroll to\n * @param {number} [options.y] The vertical position to scroll to\n * @param {ScrollBehavior} [options.behavior=auto] The scrolling behavior\n * @returns {UseScrollToReturn & { ref: StateRef<Target> }} The scroll trigger function and ref\n *\n * @example\n * const { ref, trigger } = useScrollTo(options);\n */\nexport const useScrollTo = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseScrollToOptions | undefined;\n const { x, y, behavior = 'auto', immediately = true } = options ?? {};\n const internalRef = useRefState<Element>();\n const elementRef = useRef<Element>(null);\n\n useIsomorphicLayoutEffect(() => {\n if (!immediately) return;\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n elementRef.current = element;\n\n element.scrollTo({ top: y, left: x, behavior });\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n const trigger = (params?: { x: number; y: number; behavior?: ScrollBehavior }) => {\n if (!elementRef.current) return;\n\n const { x, y, behavior } = params ?? {};\n\n elementRef.current.scrollTo({ left: x, top: y, behavior });\n };\n\n if (target) return { trigger };\n return { ref: internalRef, trigger };\n}) as UseScrollTo;\n"],"names":["useScrollTo","params","target","isTarget","options","x","y","behavior","immediately","internalRef","useRefState","elementRef","useRef","useIsomorphicLayoutEffect","element","trigger"],"mappings":"2QAkEaA,GAAe,IAAIC,IAAkB,CAChD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACxC,CAAE,EAAAI,EAAG,EAAAC,EAAG,SAAAC,EAAW,OAAQ,YAAAC,EAAc,IAASJ,GAAW,CAAA,EAC7DK,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAgB,IAAI,EAEvCC,EAAAA,0BAA0B,IAAM,CAE9B,GADI,CAACL,GACD,CAACN,GAAU,CAACO,EAAY,MAAO,OAEnC,MAAMK,GACFZ,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIO,EAAY,UAAwB,OAE/EE,EAAW,QAAUG,EAErBA,EAAQ,SAAS,CAAE,IAAKR,EAAG,KAAMD,EAAG,SAAAE,EAAU,CAAA,EAC7C,CAACL,EAAQO,EAAY,MAAON,EAAAA,SAAS,YAAYD,CAAM,CAAC,CAAC,EAE5D,MAAMa,EAAWd,GAAiE,CAChF,GAAI,CAACU,EAAW,QAAS,OAEzB,KAAM,CAAE,EAAAN,EAAG,EAAAC,EAAG,SAAAC,GAAaN,GAAU,CAAA,EAErCU,EAAW,QAAQ,SAAS,CAAE,KAAMN,EAAG,IAAKC,EAAG,SAAAC,EAAU,CAAA,EAG3D,OAAIL,EAAe,CAAE,QAAAa,CAAA,EACd,CAAE,IAAKN,EAAa,QAAAM,CAAA,CAC7B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),L=require("../useRefState/useRefState.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),L=require("../useRefState/useRefState.cjs"),i=require("../../utils/helpers/isTarget.cjs"),S=((...o)=>{const t=i.isTarget(o[0])?o[0]:void 0,r=t?o[1]:o[0],c=r?.axis??"vertical",s=L.useRefState(),[f,a]=g.useState(!1);return g.useEffect(()=>{if(!t&&!s.state)return;const l=t?i.isTarget.getElement(t):s.current;if(!l)return;const e=r?.root?i.isTarget.getElement(r.root):document,d=l.getBoundingClientRect().top+e.scrollTop-e.getBoundingClientRect().top,v=l.getBoundingClientRect().left+e.scrollLeft-e.getBoundingClientRect().left,n=()=>{if(c==="vertical"){const u=e.scrollTop;a(u>=d)}if(c==="horizontal"){const u=e.scrollLeft;a(u>=v)}};return e.addEventListener("scroll",n),window.addEventListener("resize",n),window.addEventListener("orientationchange",n),n(),()=>{e.removeEventListener("scroll",n),window.removeEventListener("resize",n),window.removeEventListener("orientationchange",n)}},[t,s.state,i.isTarget.getRefState(t),c,r?.root]),t?f:{stuck:f,ref:s}});exports.useSticky=S;
|
|
2
2
|
//# sourceMappingURL=useSticky.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSticky.cjs","sources":["../../../../src/hooks/useSticky/useSticky.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use sticky return type */\nexport interface UseStickyReturn {\n stuck: boolean;\n}\n\n/** The use sticky axis type */\nexport type UseStickyAxis = 'horizontal' | 'vertical';\n\n/** The use sticky options type */\nexport interface UseStickyOptions {\n axis?: UseStickyAxis;\n root?: HookTarget;\n}\n\nexport interface UseSticky {\n (target: HookTarget, options?: UseStickyOptions): boolean;\n\n <Target extends Element>(\n options?: UseStickyOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseStickyReturn;\n}\n\n/**\n * @name UseSticky\n * @description - Hook that allows you to detect that your sticky component is stuck\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target sticky element\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {UseStickyReturn} The state of the sticky\n *\n * @example\n * const stuck = useSticky(ref);\n *\n * @overload\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {{ stickyRef: StateRef<Target> } & UseStickyReturn} The state of the sticky\n *\n * @example\n * const { stuck, ref } = useSticky();\n */\nexport const useSticky = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseStickyOptions;\n const axis = options?.axis ?? 'vertical';\n\n const internalRef = useRefState<Element>();\n const [stuck, setStuck] = useState(false);\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const root = (options?.root ? isTarget.getElement(options.root) : document) as Element;\n const elementOffsetTop =\n element.getBoundingClientRect().top + root.scrollTop - root.getBoundingClientRect().top;\n const elementOffsetLeft =\n element.getBoundingClientRect().left + root.scrollLeft - root.getBoundingClientRect().left;\n\n const onSticky = () => {\n if (axis === 'vertical') {\n const scrollTop = root.scrollTop;\n setStuck(scrollTop >= elementOffsetTop);\n }\n\n if (axis === 'horizontal') {\n const scrollLeft = root.scrollLeft;\n setStuck(scrollLeft >= elementOffsetLeft);\n }\n };\n\n root.addEventListener('scroll', onSticky);\n window.addEventListener('resize', onSticky);\n window.addEventListener('orientationchange', onSticky);\n\n onSticky();\n\n return () => {\n root.removeEventListener('scroll', onSticky);\n window.removeEventListener('resize', onSticky);\n window.removeEventListener('orientationchange', onSticky);\n };\n }, [target, internalRef.state, axis, options?.root]);\n\n if (target) return stuck;\n return {\n stuck,\n ref: internalRef\n };\n}) as UseSticky;\n"],"names":["useSticky","params","target","isTarget","options","axis","internalRef","useRefState","stuck","setStuck","useState","useEffect","element","root","elementOffsetTop","elementOffsetLeft","onSticky","scrollTop","scrollLeft"],"mappings":"mMA0DaA,
|
|
1
|
+
{"version":3,"file":"useSticky.cjs","sources":["../../../../src/hooks/useSticky/useSticky.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use sticky return type */\nexport interface UseStickyReturn {\n stuck: boolean;\n}\n\n/** The use sticky axis type */\nexport type UseStickyAxis = 'horizontal' | 'vertical';\n\n/** The use sticky options type */\nexport interface UseStickyOptions {\n axis?: UseStickyAxis;\n root?: HookTarget;\n}\n\nexport interface UseSticky {\n (target: HookTarget, options?: UseStickyOptions): boolean;\n\n <Target extends Element>(\n options?: UseStickyOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseStickyReturn;\n}\n\n/**\n * @name UseSticky\n * @description - Hook that allows you to detect that your sticky component is stuck\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target sticky element\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {UseStickyReturn} The state of the sticky\n *\n * @example\n * const stuck = useSticky(ref);\n *\n * @overload\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {{ stickyRef: StateRef<Target> } & UseStickyReturn} The state of the sticky\n *\n * @example\n * const { stuck, ref } = useSticky();\n */\nexport const useSticky = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const options = (target ? params[1] : params[0]) as UseStickyOptions;\n const axis = options?.axis ?? 'vertical';\n\n const internalRef = useRefState<Element>();\n const [stuck, setStuck] = useState(false);\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const root = (options?.root ? isTarget.getElement(options.root) : document) as Element;\n const elementOffsetTop =\n element.getBoundingClientRect().top + root.scrollTop - root.getBoundingClientRect().top;\n const elementOffsetLeft =\n element.getBoundingClientRect().left + root.scrollLeft - root.getBoundingClientRect().left;\n\n const onSticky = () => {\n if (axis === 'vertical') {\n const scrollTop = root.scrollTop;\n setStuck(scrollTop >= elementOffsetTop);\n }\n\n if (axis === 'horizontal') {\n const scrollLeft = root.scrollLeft;\n setStuck(scrollLeft >= elementOffsetLeft);\n }\n };\n\n root.addEventListener('scroll', onSticky);\n window.addEventListener('resize', onSticky);\n window.addEventListener('orientationchange', onSticky);\n\n onSticky();\n\n return () => {\n root.removeEventListener('scroll', onSticky);\n window.removeEventListener('resize', onSticky);\n window.removeEventListener('orientationchange', onSticky);\n };\n }, [target, internalRef.state, isTarget.getRefState(target), axis, options?.root]);\n\n if (target) return stuck;\n return {\n stuck,\n ref: internalRef\n };\n}) as UseSticky;\n"],"names":["useSticky","params","target","isTarget","options","axis","internalRef","useRefState","stuck","setStuck","useState","useEffect","element","root","elementOffsetTop","elementOffsetLeft","onSticky","scrollTop","scrollLeft"],"mappings":"mMA0DaA,GAAa,IAAIC,IAAkB,CAC9C,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,EAAWF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,EACxCI,EAAOD,GAAS,MAAQ,WAExBE,EAAcC,EAAAA,YAAA,EACd,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAK,EAwCxC,OAtCAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACT,GAAU,CAACI,EAAY,MAAO,OAEnC,MAAMM,EAAWV,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAII,EAAY,QAEpE,GAAI,CAACM,EAAS,OAEd,MAAMC,EAAQT,GAAS,KAAOD,EAAAA,SAAS,WAAWC,EAAQ,IAAI,EAAI,SAC5DU,EACJF,EAAQ,wBAAwB,IAAMC,EAAK,UAAYA,EAAK,sBAAA,EAAwB,IAChFE,EACJH,EAAQ,wBAAwB,KAAOC,EAAK,WAAaA,EAAK,sBAAA,EAAwB,KAElFG,EAAW,IAAM,CACrB,GAAIX,IAAS,WAAY,CACvB,MAAMY,EAAYJ,EAAK,UACvBJ,EAASQ,GAAaH,CAAgB,CAAA,CAGxC,GAAIT,IAAS,aAAc,CACzB,MAAMa,EAAaL,EAAK,WACxBJ,EAASS,GAAcH,CAAiB,CAAA,CAC1C,EAGF,OAAAF,EAAK,iBAAiB,SAAUG,CAAQ,EACxC,OAAO,iBAAiB,SAAUA,CAAQ,EAC1C,OAAO,iBAAiB,oBAAqBA,CAAQ,EAErDA,EAAA,EAEO,IAAM,CACXH,EAAK,oBAAoB,SAAUG,CAAQ,EAC3C,OAAO,oBAAoB,SAAUA,CAAQ,EAC7C,OAAO,oBAAoB,oBAAqBA,CAAQ,CAAA,CAC1D,EACC,CAACd,EAAQI,EAAY,MAAOH,EAAAA,SAAS,YAAYD,CAAM,EAAGG,EAAMD,GAAS,IAAI,CAAC,EAE7EF,EAAeM,EACZ,CACL,MAAAA,EACA,IAAKF,CAAA,CAET"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),f=t=>{if(!t)return{days:0,hours:0,minutes:0,seconds:0,count:0};const s=Math.floor(t/86400),d=Math.floor(t%86400/3600),e=Math.floor(t%3600/60),u=Math.floor(t%60);return{days:s,hours:d,minutes:e,seconds:u,count:t}},y=(...t)=>{const s=(typeof t[0]=="number"?t[0]:t[0]?.initialTime)??0,e=(typeof t[0]=="number"?t[1]:t[0])?.immediately??!1,[u,l]=i.useState(f(s)),[c,r]=i.useState(!e&&!s);return i.useEffect(()=>{if(c)return;const a=()=>{l(n=>{const o=n.count+1;return o%60===0?{...n,minutes:n.minutes+1,seconds:0,count:o}:o%
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),f=t=>{if(!t)return{days:0,hours:0,minutes:0,seconds:0,count:0};const s=Math.floor(t/86400),d=Math.floor(t%86400/3600),e=Math.floor(t%3600/60),u=Math.floor(t%60);return{days:s,hours:d,minutes:e,seconds:u,count:t}},y=((...t)=>{const s=(typeof t[0]=="number"?t[0]:t[0]?.initialTime)??0,e=(typeof t[0]=="number"?t[1]:t[0])?.immediately??!1,[u,l]=i.useState(f(s)),[c,r]=i.useState(!e&&!s);return i.useEffect(()=>{if(c)return;const a=()=>{l(n=>{const o=n.count+1;return o%60===0?{...n,minutes:n.minutes+1,seconds:0,count:o}:o%3600===0?{...n,hours:n.hours+1,minutes:0,seconds:0,count:o}:o%(3600*24)===0?{...n,days:n.days+1,hours:0,minutes:0,seconds:0,count:o}:{...n,seconds:n.seconds+1,count:o}})},h=setInterval(()=>a(),1e3);return()=>clearInterval(h)},[c]),{...u,paused:c,pause:()=>r(!0),start:()=>r(!1),reset:()=>l(f(s)),toggle:()=>r(a=>!a)}});exports.useStopwatch=y;
|
|
2
2
|
//# sourceMappingURL=useStopwatch.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStopwatch.cjs","sources":["../../../../src/hooks/useStopwatch/useStopwatch.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst getStopwatchTime = (time: number) => {\n if (!time)\n return {\n days: 0,\n hours: 0,\n minutes: 0,\n seconds: 0,\n count: 0\n };\n\n const days = Math.floor(time / 86400);\n const hours = Math.floor((time % 86400) / 3600);\n const minutes = Math.floor((time % 3600) / 60);\n const seconds = Math.floor(time % 60);\n\n return { days, hours, minutes, seconds, count: time };\n};\n\n/** The use stopwatch return type */\nexport interface UseStopwatchReturn {\n /** The total count of the stopwatch */\n count: number;\n /** The day count of the stopwatch */\n days: number;\n /** The hour count of the stopwatch */\n hours: number;\n /** The minute count of the stopwatch */\n minutes: number;\n /** The over state of the stopwatch */\n over: boolean;\n /** The paused state of the stopwatch */\n paused: boolean;\n /** The second count of the stopwatch */\n seconds: number;\n /** The function to pause the stopwatch */\n pause: () => void;\n /** The function to reset the stopwatch */\n reset: () => void;\n /** The function to start the stopwatch */\n start: () => void;\n /** The function to toggle the stopwatch */\n toggle: () => void;\n}\n\n/** The use stopwatch options */\nexport interface UseStopwatchOptions {\n /** The immediately state of the timer */\n immediately?: boolean;\n}\n\ninterface UseStopwatch {\n (initialTime?: number, options?: UseStopwatchOptions): UseStopwatchReturn;\n (options?: UseStopwatchOptions & { initialTime?: number }): UseStopwatchReturn;\n}\n/**\n * @name useStopwatch\n * @description - Hook that creates a stopwatch functionality\n * @category Time\n * @usage high\n *\n * @overload\n * @param {number} [initialTime=0] The initial time of the timer\n * @param {boolean} [options.enabled=true] The enabled state of the timer\n * @returns {UseStopwatchReturn} An object containing the current time and functions to interact with the timer\n *\n * @example\n * const { seconds, minutes, start, pause, reset } = useStopwatch(1000, { enabled: false });\n *\n * @overload\n * @param {number} [options.initialTime=0] -The initial time of the timer\n * @param {boolean} [options.enabled=true] The enabled state of the timer\n * @returns {UseStopwatchReturn} An object containing the current time and functions to interact with the timer\n *\n * @example\n * const { seconds, minutes, start, pause, reset } = useStopwatch({ initialTime: 1000, enabled: false });\n */\nexport const useStopwatch = ((...params: any[]) => {\n const initialTime =\n (typeof params[0] === 'number'\n ? (params[0] as number | undefined)\n : (params[0] as UseStopwatchOptions & { initialTime?: number })?.initialTime) ?? 0;\n\n const options =\n typeof params[0] === 'number'\n ? (params[1] as UseStopwatchOptions | undefined)\n : (params[0] as (UseStopwatchOptions & { initialTime?: number }) | undefined);\n\n const immediately = options?.immediately ?? false;\n\n const [time, setTime] = useState(getStopwatchTime(initialTime));\n const [paused, setPaused] = useState(!immediately && !initialTime);\n\n useEffect(() => {\n if (paused) return;\n const onInterval = () => {\n setTime((prevTime) => {\n const updatedCount = prevTime.count + 1;\n\n if (updatedCount % 60 === 0) {\n return {\n ...prevTime,\n minutes: prevTime.minutes + 1,\n seconds: 0,\n count: updatedCount\n };\n }\n\n if (updatedCount % (60 * 60) === 0) {\n return {\n ...prevTime,\n hours: prevTime.hours + 1,\n minutes: 0,\n seconds: 0,\n count: updatedCount\n };\n }\n\n if (updatedCount % (60 * 60 * 24) === 0) {\n return {\n ...prevTime,\n days: prevTime.days + 1,\n hours: 0,\n minutes: 0,\n seconds: 0,\n count: updatedCount\n };\n }\n\n return {\n ...prevTime,\n seconds: prevTime.seconds + 1,\n count: updatedCount\n };\n });\n };\n\n const interval = setInterval(() => onInterval(), 1000);\n return () => clearInterval(interval);\n }, [paused]);\n\n return {\n ...time,\n paused,\n pause: () => setPaused(true),\n start: () => setPaused(false),\n reset: () => setTime(getStopwatchTime(initialTime)),\n toggle: () => setPaused((prevPause) => !prevPause)\n };\n}) as UseStopwatch;\n"],"names":["getStopwatchTime","time","days","hours","minutes","seconds","useStopwatch","params","initialTime","immediately","setTime","useState","paused","setPaused","useEffect","onInterval","prevTime","updatedCount","interval","prevPause"],"mappings":"yGAEMA,EAAoBC,GAAiB,CACzC,GAAI,CAACA,EACH,MAAO,CACL,KAAM,EACN,MAAO,EACP,QAAS,EACT,QAAS,EACT,MAAO,CAAA,EAGX,MAAMC,EAAO,KAAK,MAAMD,EAAO,KAAK,EAC9BE,EAAQ,KAAK,MAAOF,EAAO,MAAS,IAAI,EACxCG,EAAU,KAAK,MAAOH,EAAO,KAAQ,EAAE,EACvCI,EAAU,KAAK,MAAMJ,EAAO,EAAE,EAEpC,MAAO,CAAE,KAAAC,EAAM,MAAAC,EAAO,QAAAC,EAAS,QAAAC,EAAS,MAAOJ,CAAA,CACjD,EA4DaK,
|
|
1
|
+
{"version":3,"file":"useStopwatch.cjs","sources":["../../../../src/hooks/useStopwatch/useStopwatch.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst getStopwatchTime = (time: number) => {\n if (!time)\n return {\n days: 0,\n hours: 0,\n minutes: 0,\n seconds: 0,\n count: 0\n };\n\n const days = Math.floor(time / 86400);\n const hours = Math.floor((time % 86400) / 3600);\n const minutes = Math.floor((time % 3600) / 60);\n const seconds = Math.floor(time % 60);\n\n return { days, hours, minutes, seconds, count: time };\n};\n\n/** The use stopwatch return type */\nexport interface UseStopwatchReturn {\n /** The total count of the stopwatch */\n count: number;\n /** The day count of the stopwatch */\n days: number;\n /** The hour count of the stopwatch */\n hours: number;\n /** The minute count of the stopwatch */\n minutes: number;\n /** The over state of the stopwatch */\n over: boolean;\n /** The paused state of the stopwatch */\n paused: boolean;\n /** The second count of the stopwatch */\n seconds: number;\n /** The function to pause the stopwatch */\n pause: () => void;\n /** The function to reset the stopwatch */\n reset: () => void;\n /** The function to start the stopwatch */\n start: () => void;\n /** The function to toggle the stopwatch */\n toggle: () => void;\n}\n\n/** The use stopwatch options */\nexport interface UseStopwatchOptions {\n /** The immediately state of the timer */\n immediately?: boolean;\n}\n\ninterface UseStopwatch {\n (initialTime?: number, options?: UseStopwatchOptions): UseStopwatchReturn;\n (options?: UseStopwatchOptions & { initialTime?: number }): UseStopwatchReturn;\n}\n/**\n * @name useStopwatch\n * @description - Hook that creates a stopwatch functionality\n * @category Time\n * @usage high\n *\n * @overload\n * @param {number} [initialTime=0] The initial time of the timer\n * @param {boolean} [options.enabled=true] The enabled state of the timer\n * @returns {UseStopwatchReturn} An object containing the current time and functions to interact with the timer\n *\n * @example\n * const { seconds, minutes, start, pause, reset } = useStopwatch(1000, { enabled: false });\n *\n * @overload\n * @param {number} [options.initialTime=0] -The initial time of the timer\n * @param {boolean} [options.enabled=true] The enabled state of the timer\n * @returns {UseStopwatchReturn} An object containing the current time and functions to interact with the timer\n *\n * @example\n * const { seconds, minutes, start, pause, reset } = useStopwatch({ initialTime: 1000, enabled: false });\n */\nexport const useStopwatch = ((...params: any[]) => {\n const initialTime =\n (typeof params[0] === 'number'\n ? (params[0] as number | undefined)\n : (params[0] as UseStopwatchOptions & { initialTime?: number })?.initialTime) ?? 0;\n\n const options =\n typeof params[0] === 'number'\n ? (params[1] as UseStopwatchOptions | undefined)\n : (params[0] as (UseStopwatchOptions & { initialTime?: number }) | undefined);\n\n const immediately = options?.immediately ?? false;\n\n const [time, setTime] = useState(getStopwatchTime(initialTime));\n const [paused, setPaused] = useState(!immediately && !initialTime);\n\n useEffect(() => {\n if (paused) return;\n const onInterval = () => {\n setTime((prevTime) => {\n const updatedCount = prevTime.count + 1;\n\n if (updatedCount % 60 === 0) {\n return {\n ...prevTime,\n minutes: prevTime.minutes + 1,\n seconds: 0,\n count: updatedCount\n };\n }\n\n if (updatedCount % (60 * 60) === 0) {\n return {\n ...prevTime,\n hours: prevTime.hours + 1,\n minutes: 0,\n seconds: 0,\n count: updatedCount\n };\n }\n\n if (updatedCount % (60 * 60 * 24) === 0) {\n return {\n ...prevTime,\n days: prevTime.days + 1,\n hours: 0,\n minutes: 0,\n seconds: 0,\n count: updatedCount\n };\n }\n\n return {\n ...prevTime,\n seconds: prevTime.seconds + 1,\n count: updatedCount\n };\n });\n };\n\n const interval = setInterval(() => onInterval(), 1000);\n return () => clearInterval(interval);\n }, [paused]);\n\n return {\n ...time,\n paused,\n pause: () => setPaused(true),\n start: () => setPaused(false),\n reset: () => setTime(getStopwatchTime(initialTime)),\n toggle: () => setPaused((prevPause) => !prevPause)\n };\n}) as UseStopwatch;\n"],"names":["getStopwatchTime","time","days","hours","minutes","seconds","useStopwatch","params","initialTime","immediately","setTime","useState","paused","setPaused","useEffect","onInterval","prevTime","updatedCount","interval","prevPause"],"mappings":"yGAEMA,EAAoBC,GAAiB,CACzC,GAAI,CAACA,EACH,MAAO,CACL,KAAM,EACN,MAAO,EACP,QAAS,EACT,QAAS,EACT,MAAO,CAAA,EAGX,MAAMC,EAAO,KAAK,MAAMD,EAAO,KAAK,EAC9BE,EAAQ,KAAK,MAAOF,EAAO,MAAS,IAAI,EACxCG,EAAU,KAAK,MAAOH,EAAO,KAAQ,EAAE,EACvCI,EAAU,KAAK,MAAMJ,EAAO,EAAE,EAEpC,MAAO,CAAE,KAAAC,EAAM,MAAAC,EAAO,QAAAC,EAAS,QAAAC,EAAS,MAAOJ,CAAA,CACjD,EA4DaK,GAAgB,IAAIC,IAAkB,CACjD,MAAMC,GACH,OAAOD,EAAO,CAAC,GAAM,SACjBA,EAAO,CAAC,EACRA,EAAO,CAAC,GAAsD,cAAgB,EAO/EE,GAJJ,OAAOF,EAAO,CAAC,GAAM,SAChBA,EAAO,CAAC,EACRA,EAAO,CAAC,IAEc,aAAe,GAEtC,CAACN,EAAMS,CAAO,EAAIC,EAAAA,SAASX,EAAiBQ,CAAW,CAAC,EACxD,CAACI,EAAQC,CAAS,EAAIF,EAAAA,SAAS,CAACF,GAAe,CAACD,CAAW,EAEjEM,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIF,EAAQ,OACZ,MAAMG,EAAa,IAAM,CACvBL,EAASM,GAAa,CACpB,MAAMC,EAAeD,EAAS,MAAQ,EAEtC,OAAIC,EAAe,KAAO,EACjB,CACL,GAAGD,EACH,QAASA,EAAS,QAAU,EAC5B,QAAS,EACT,MAAOC,CAAA,EAIPA,EAAgB,OAAa,EACxB,CACL,GAAGD,EACH,MAAOA,EAAS,MAAQ,EACxB,QAAS,EACT,QAAS,EACT,MAAOC,CAAA,EAIPA,GAAgB,KAAU,MAAQ,EAC7B,CACL,GAAGD,EACH,KAAMA,EAAS,KAAO,EACtB,MAAO,EACP,QAAS,EACT,QAAS,EACT,MAAOC,CAAA,EAIJ,CACL,GAAGD,EACH,QAASA,EAAS,QAAU,EAC5B,MAAOC,CAAA,CACT,CACD,CAAA,EAGGC,EAAW,YAAY,IAAMH,EAAA,EAAc,GAAI,EACrD,MAAO,IAAM,cAAcG,CAAQ,CAAA,EAClC,CAACN,CAAM,CAAC,EAEJ,CACL,GAAGX,EACH,OAAAW,EACA,MAAO,IAAMC,EAAU,EAAI,EAC3B,MAAO,IAAMA,EAAU,EAAK,EAC5B,MAAO,IAAMH,EAAQV,EAAiBQ,CAAW,CAAC,EAClD,OAAQ,IAAMK,EAAWM,GAAc,CAACA,CAAS,CAAA,CAErD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),c="reactuse-storage",u=t=>window.dispatchEvent(new StorageEvent(c,t)),g=(t,n,o)=>{const r=t.getItem(n);t.setItem(n,o),u({key:n,oldValue:r,newValue:o,storageArea:t})},V=(t,n)=>{const o=t.getItem(n);t.removeItem(n),u({key:n,oldValue:o,newValue:null,storageArea:t})},f=(t,n)=>{const o=t.getItem(n);if(o)return o},z=(t,n)=>{const o=typeof n=="object"&&n&&("serializer"in n||"deserializer"in n||"initialValue"in n||"storage"in n)?n:void 0,r=o?o?.initialValue:n;if(typeof window>"u")return{value:typeof r=="function"?r():r,set:()=>{},remove:()=>{}};const a=e=>o?.serializer?o.serializer(e):typeof e=="string"?e:JSON.stringify(e),i=o?.storage??window?.localStorage,v=e=>g(i,t,a(e)),S=()=>V(i,t),d=e=>{if(o?.deserializer)return o.deserializer(e);if(e!=="undefined")try{return JSON.parse(e)}catch{return e}},[w,E]=l.useState(()=>{const e=f(i,t);if(e===void 0&&r!==void 0){const s=typeof r=="function"?r():r;return g(i,t,a(s)),s}return e?d(e):void 0});return l.useEffect(()=>{const e=()=>{const s=f(i,t);E(s?d(s):void 0)};return window.addEventListener(c,e),()=>window.removeEventListener(c,e)},[t]),{value:w,set:v,remove:S}};exports.STORAGE_EVENT=c;exports.dispatchStorageEvent=u;exports.useStorage=z;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),c="reactuse-storage",u=t=>window.dispatchEvent(new StorageEvent(c,t)),g=(t,n,o)=>{const r=t.getItem(n);t.setItem(n,o),u({key:n,oldValue:r,newValue:o,storageArea:t})},V=(t,n)=>{const o=t.getItem(n);t.removeItem(n),u({key:n,oldValue:o,newValue:null,storageArea:t})},f=(t,n)=>{const o=t.getItem(n);if(o)return o},z=((t,n)=>{const o=typeof n=="object"&&n&&("serializer"in n||"deserializer"in n||"initialValue"in n||"storage"in n)?n:void 0,r=o?o?.initialValue:n;if(typeof window>"u")return{value:typeof r=="function"?r():r,set:()=>{},remove:()=>{}};const a=e=>o?.serializer?o.serializer(e):typeof e=="string"?e:JSON.stringify(e),i=o?.storage??window?.localStorage,v=e=>g(i,t,a(e)),S=()=>V(i,t),d=e=>{if(o?.deserializer)return o.deserializer(e);if(e!=="undefined")try{return JSON.parse(e)}catch{return e}},[w,E]=l.useState(()=>{const e=f(i,t);if(e===void 0&&r!==void 0){const s=typeof r=="function"?r():r;return g(i,t,a(s)),s}return e?d(e):void 0});return l.useEffect(()=>{const e=()=>{const s=f(i,t);E(s?d(s):void 0)};return window.addEventListener(c,e),()=>window.removeEventListener(c,e)},[t]),{value:w,set:v,remove:S}});exports.STORAGE_EVENT=c;exports.dispatchStorageEvent=u;exports.useStorage=z;
|
|
2
2
|
//# sourceMappingURL=useStorage.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStorage.cjs","sources":["../../../../src/hooks/useStorage/useStorage.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/* The use storage initial value type */\nexport type UseStorageInitialValue<Value> = (() => Value) | Value;\n\n/* The use storage options type */\nexport interface UseStorageOptions<Value> {\n /* The initial value of the storage */\n initialValue?: UseStorageInitialValue<Value>;\n /* The storage to be used */\n storage?: Storage;\n /* The deserializer function to be invoked */\n deserializer?: (value: string) => Value;\n /* The serializer function to be invoked */\n serializer?: (value: Value) => string;\n}\n\n/* The use storage return type */\nexport interface UseStorageReturn<Value> {\n /* The value of the storage */\n value: Value;\n /* The error state of the storage */\n remove: () => void;\n /* The loading state of the storage */\n set: (value: Value) => void;\n}\n\nexport interface UseStorage {\n <Value>(key: string, options?: UseStorageOptions<Value>): UseStorageReturn<Value | undefined>;\n\n <Value>(\n key: string,\n initialValue?: UseStorageInitialValue<Value>\n ): UseStorageReturn<Value | undefined>;\n}\n\nexport const STORAGE_EVENT = 'reactuse-storage';\n\nexport const dispatchStorageEvent = (params: Partial<StorageEvent>) =>\n window.dispatchEvent(new StorageEvent(STORAGE_EVENT, params));\n\nconst setStorageItem = (storage: Storage, key: string, value: string) => {\n const oldValue = storage.getItem(key);\n\n storage.setItem(key, value);\n dispatchStorageEvent({\n key,\n oldValue,\n newValue: value,\n storageArea: storage\n });\n};\n\nconst removeStorageItem = (storage: Storage, key: string) => {\n const oldValue = storage.getItem(key);\n\n storage.removeItem(key);\n dispatchStorageEvent({ key, oldValue, newValue: null, storageArea: storage });\n};\n\nconst getStorageItem = (storage: Storage, key: string) => {\n const value = storage.getItem(key);\n if (!value) return undefined;\n return value;\n};\n\n/**\n * @name useStorage\n * @description - Hook that manages storage value\n * @category State\n * @usage high\n *\n * @overload\n * @param {string} key The key of the storage\n * @param {UseStorageInitialValue<Value>} [initialValue] The initial value of the storage\n * @returns {UseStorageReturn<Value>} The value and the set function\n *\n * @overload\n * @param {string} key The key of the storage\n * @param {(value: Value) => string} [params.serializer] The serializer function\n * @param {(value: string) => Value} [params.deserializer] The deserializer function\n * @param {Storage} [params.storage] The storage\n * @param {UseStorageInitialValue<Value>} [params.initialValue] The initial value of the storage\n * @returns {UseStorageReturn<Value>} The value and the set function\n *\n * @example\n * const { value, set, remove } = useStorage('key', 'value');\n */\nexport const useStorage = (<Value>(key: string, params?: any): UseStorageReturn<Value> => {\n const options = (\n typeof params === 'object' &&\n params &&\n ('serializer' in params ||\n 'deserializer' in params ||\n 'initialValue' in params ||\n 'storage' in params)\n ? params\n : undefined\n ) as UseStorageOptions<Value>;\n\n const initialValue = (options ? options?.initialValue : params) as UseStorageInitialValue<Value>;\n\n if (typeof window === 'undefined') {\n const value = typeof initialValue === 'function' ? (initialValue as () => any)() : initialValue;\n return {\n value,\n set: () => {},\n remove: () => {}\n };\n }\n\n const serializer = (value: Value) => {\n if (options?.serializer) return options.serializer(value);\n if (typeof value === 'string') return value;\n return JSON.stringify(value);\n };\n\n const storage = options?.storage ?? window?.localStorage;\n\n const set = (value: Value) => setStorageItem(storage, key, serializer(value));\n const remove = () => removeStorageItem(storage, key);\n\n const deserializer = (value: string) => {\n if (options?.deserializer) return options.deserializer(value);\n if (value === 'undefined') return undefined as unknown as Value;\n\n try {\n return JSON.parse(value) as Value;\n } catch {\n return value as Value;\n }\n };\n\n const [value, setValue] = useState<Value | undefined>(() => {\n const storageValue = getStorageItem(storage, key);\n if (storageValue === undefined && initialValue !== undefined) {\n const value =\n typeof initialValue === 'function' ? (initialValue as () => Value)() : initialValue;\n setStorageItem(storage, key, serializer(value));\n return value;\n }\n return storageValue ? deserializer(storageValue) : undefined;\n });\n\n useEffect(() => {\n const onChange = () => {\n const storageValue = getStorageItem(storage, key);\n setValue(storageValue ? deserializer(storageValue) : undefined);\n };\n window.addEventListener(STORAGE_EVENT, onChange);\n return () => window.removeEventListener(STORAGE_EVENT, onChange);\n }, [key]);\n\n return {\n value: value as Value,\n set,\n remove\n };\n}) as UseStorage;\n"],"names":["STORAGE_EVENT","dispatchStorageEvent","params","setStorageItem","storage","key","value","oldValue","removeStorageItem","getStorageItem","useStorage","options","initialValue","serializer","set","remove","deserializer","setValue","useState","storageValue","useEffect","onChange"],"mappings":"yGAoCaA,EAAgB,mBAEhBC,EAAwBC,GACnC,OAAO,cAAc,IAAI,aAAaF,EAAeE,CAAM,CAAC,EAExDC,EAAiB,CAACC,EAAkBC,EAAaC,IAAkB,CACvE,MAAMC,EAAWH,EAAQ,QAAQC,CAAG,EAEpCD,EAAQ,QAAQC,EAAKC,CAAK,EAC1BL,EAAqB,CACnB,IAAAI,EACA,SAAAE,EACA,SAAUD,EACV,YAAaF,CAAA,CACd,CACH,EAEMI,EAAoB,CAACJ,EAAkBC,IAAgB,CAC3D,MAAME,EAAWH,EAAQ,QAAQC,CAAG,EAEpCD,EAAQ,WAAWC,CAAG,EACtBJ,EAAqB,CAAE,IAAAI,EAAK,SAAAE,EAAU,SAAU,KAAM,YAAaH,EAAS,CAC9E,EAEMK,EAAiB,CAACL,EAAkBC,IAAgB,CACxD,MAAMC,EAAQF,EAAQ,QAAQC,CAAG,EACjC,GAAKC,EACL,OAAOA,CACT,EAwBaI,
|
|
1
|
+
{"version":3,"file":"useStorage.cjs","sources":["../../../../src/hooks/useStorage/useStorage.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/* The use storage initial value type */\nexport type UseStorageInitialValue<Value> = (() => Value) | Value;\n\n/* The use storage options type */\nexport interface UseStorageOptions<Value> {\n /* The initial value of the storage */\n initialValue?: UseStorageInitialValue<Value>;\n /* The storage to be used */\n storage?: Storage;\n /* The deserializer function to be invoked */\n deserializer?: (value: string) => Value;\n /* The serializer function to be invoked */\n serializer?: (value: Value) => string;\n}\n\n/* The use storage return type */\nexport interface UseStorageReturn<Value> {\n /* The value of the storage */\n value: Value;\n /* The error state of the storage */\n remove: () => void;\n /* The loading state of the storage */\n set: (value: Value) => void;\n}\n\nexport interface UseStorage {\n <Value>(key: string, options?: UseStorageOptions<Value>): UseStorageReturn<Value | undefined>;\n\n <Value>(\n key: string,\n initialValue?: UseStorageInitialValue<Value>\n ): UseStorageReturn<Value | undefined>;\n}\n\nexport const STORAGE_EVENT = 'reactuse-storage';\n\nexport const dispatchStorageEvent = (params: Partial<StorageEvent>) =>\n window.dispatchEvent(new StorageEvent(STORAGE_EVENT, params));\n\nconst setStorageItem = (storage: Storage, key: string, value: string) => {\n const oldValue = storage.getItem(key);\n\n storage.setItem(key, value);\n dispatchStorageEvent({\n key,\n oldValue,\n newValue: value,\n storageArea: storage\n });\n};\n\nconst removeStorageItem = (storage: Storage, key: string) => {\n const oldValue = storage.getItem(key);\n\n storage.removeItem(key);\n dispatchStorageEvent({ key, oldValue, newValue: null, storageArea: storage });\n};\n\nconst getStorageItem = (storage: Storage, key: string) => {\n const value = storage.getItem(key);\n if (!value) return undefined;\n return value;\n};\n\n/**\n * @name useStorage\n * @description - Hook that manages storage value\n * @category State\n * @usage high\n *\n * @overload\n * @param {string} key The key of the storage\n * @param {UseStorageInitialValue<Value>} [initialValue] The initial value of the storage\n * @returns {UseStorageReturn<Value>} The value and the set function\n *\n * @overload\n * @param {string} key The key of the storage\n * @param {(value: Value) => string} [params.serializer] The serializer function\n * @param {(value: string) => Value} [params.deserializer] The deserializer function\n * @param {Storage} [params.storage] The storage\n * @param {UseStorageInitialValue<Value>} [params.initialValue] The initial value of the storage\n * @returns {UseStorageReturn<Value>} The value and the set function\n *\n * @example\n * const { value, set, remove } = useStorage('key', 'value');\n */\nexport const useStorage = (<Value>(key: string, params?: any): UseStorageReturn<Value> => {\n const options = (\n typeof params === 'object' &&\n params &&\n ('serializer' in params ||\n 'deserializer' in params ||\n 'initialValue' in params ||\n 'storage' in params)\n ? params\n : undefined\n ) as UseStorageOptions<Value>;\n\n const initialValue = (options ? options?.initialValue : params) as UseStorageInitialValue<Value>;\n\n if (typeof window === 'undefined') {\n const value = typeof initialValue === 'function' ? (initialValue as () => any)() : initialValue;\n return {\n value,\n set: () => {},\n remove: () => {}\n };\n }\n\n const serializer = (value: Value) => {\n if (options?.serializer) return options.serializer(value);\n if (typeof value === 'string') return value;\n return JSON.stringify(value);\n };\n\n const storage = options?.storage ?? window?.localStorage;\n\n const set = (value: Value) => setStorageItem(storage, key, serializer(value));\n const remove = () => removeStorageItem(storage, key);\n\n const deserializer = (value: string) => {\n if (options?.deserializer) return options.deserializer(value);\n if (value === 'undefined') return undefined as unknown as Value;\n\n try {\n return JSON.parse(value) as Value;\n } catch {\n return value as Value;\n }\n };\n\n const [value, setValue] = useState<Value | undefined>(() => {\n const storageValue = getStorageItem(storage, key);\n if (storageValue === undefined && initialValue !== undefined) {\n const value =\n typeof initialValue === 'function' ? (initialValue as () => Value)() : initialValue;\n setStorageItem(storage, key, serializer(value));\n return value;\n }\n return storageValue ? deserializer(storageValue) : undefined;\n });\n\n useEffect(() => {\n const onChange = () => {\n const storageValue = getStorageItem(storage, key);\n setValue(storageValue ? deserializer(storageValue) : undefined);\n };\n window.addEventListener(STORAGE_EVENT, onChange);\n return () => window.removeEventListener(STORAGE_EVENT, onChange);\n }, [key]);\n\n return {\n value: value as Value,\n set,\n remove\n };\n}) as UseStorage;\n"],"names":["STORAGE_EVENT","dispatchStorageEvent","params","setStorageItem","storage","key","value","oldValue","removeStorageItem","getStorageItem","useStorage","options","initialValue","serializer","set","remove","deserializer","setValue","useState","storageValue","useEffect","onChange"],"mappings":"yGAoCaA,EAAgB,mBAEhBC,EAAwBC,GACnC,OAAO,cAAc,IAAI,aAAaF,EAAeE,CAAM,CAAC,EAExDC,EAAiB,CAACC,EAAkBC,EAAaC,IAAkB,CACvE,MAAMC,EAAWH,EAAQ,QAAQC,CAAG,EAEpCD,EAAQ,QAAQC,EAAKC,CAAK,EAC1BL,EAAqB,CACnB,IAAAI,EACA,SAAAE,EACA,SAAUD,EACV,YAAaF,CAAA,CACd,CACH,EAEMI,EAAoB,CAACJ,EAAkBC,IAAgB,CAC3D,MAAME,EAAWH,EAAQ,QAAQC,CAAG,EAEpCD,EAAQ,WAAWC,CAAG,EACtBJ,EAAqB,CAAE,IAAAI,EAAK,SAAAE,EAAU,SAAU,KAAM,YAAaH,EAAS,CAC9E,EAEMK,EAAiB,CAACL,EAAkBC,IAAgB,CACxD,MAAMC,EAAQF,EAAQ,QAAQC,CAAG,EACjC,GAAKC,EACL,OAAOA,CACT,EAwBaI,GAAc,CAAQL,EAAaH,IAA0C,CACxF,MAAMS,EACJ,OAAOT,GAAW,UAClBA,IACC,eAAgBA,GACf,iBAAkBA,GAClB,iBAAkBA,GAClB,YAAaA,GACXA,EACA,OAGAU,EAAgBD,EAAUA,GAAS,aAAeT,EAExD,GAAI,OAAO,OAAW,IAEpB,MAAO,CACL,MAFY,OAAOU,GAAiB,WAAcA,IAA+BA,EAGjF,IAAK,IAAM,CAAA,EACX,OAAQ,IAAM,CAAA,CAAC,EAInB,MAAMC,EAAcP,GACdK,GAAS,WAAmBA,EAAQ,WAAWL,CAAK,EACpD,OAAOA,GAAU,SAAiBA,EAC/B,KAAK,UAAUA,CAAK,EAGvBF,EAAUO,GAAS,SAAW,QAAQ,aAEtCG,EAAOR,GAAiBH,EAAeC,EAASC,EAAKQ,EAAWP,CAAK,CAAC,EACtES,EAAS,IAAMP,EAAkBJ,EAASC,CAAG,EAE7CW,EAAgBV,GAAkB,CACtC,GAAIK,GAAS,aAAc,OAAOA,EAAQ,aAAaL,CAAK,EAC5D,GAAIA,IAAU,YAEd,GAAI,CACF,OAAO,KAAK,MAAMA,CAAK,CAAA,MACjB,CACN,OAAOA,CAAA,CACT,EAGI,CAACA,EAAOW,CAAQ,EAAIC,EAAAA,SAA4B,IAAM,CAC1D,MAAMC,EAAeV,EAAeL,EAASC,CAAG,EAChD,GAAIc,IAAiB,QAAaP,IAAiB,OAAW,CAC5D,MAAMN,EACJ,OAAOM,GAAiB,WAAcA,IAAiCA,EACzE,OAAAT,EAAeC,EAASC,EAAKQ,EAAWP,CAAK,CAAC,EACvCA,CAAA,CAET,OAAOa,EAAeH,EAAaG,CAAY,EAAI,MAAA,CACpD,EAEDC,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAW,IAAM,CACrB,MAAMF,EAAeV,EAAeL,EAASC,CAAG,EAChDY,EAASE,EAAeH,EAAaG,CAAY,EAAI,MAAS,CAAA,EAEhE,cAAO,iBAAiBnB,EAAeqB,CAAQ,EACxC,IAAM,OAAO,oBAAoBrB,EAAeqB,CAAQ,CAAA,EAC9D,CAAChB,CAAG,CAAC,EAED,CACL,MAAAC,EACA,IAAAQ,EACA,OAAAC,CAAA,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),m=require("../useRefState/useRefState.cjs"),u=require("../../utils/helpers/isTarget.cjs"),T=((...i)=>{const e=u.isTarget(i[0])?i[0]:void 0,f=(e?i[1]:i[0])??"ltr",r=m.useRefState(),n=o.useRef(null),s=()=>typeof window>"u"?f:(e?u.isTarget.getElement(e):r.current)?.getAttribute("dir")??f,[l,c]=o.useState(s()),a=()=>{n.current&&n.current?.removeAttribute("dir")},d=t=>{n.current&&(c(t),n.current.setAttribute("dir",t))};return o.useEffect(()=>{if(!e&&!r.state)return;const t=(e?u.isTarget.getElement(e):r.current)??document.querySelector("html");if(!t)return;n.current=t;const g=s();t.setAttribute("dir",g),c(g);const b=new MutationObserver(()=>c(s()));return b.observe(t,{attributes:!0}),()=>{b.disconnect()}},[r.state,e,u.isTarget.getRefState(e)]),e?{value:l,set:d,remove:a}:{ref:r,value:l,set:d,remove:a}});exports.useTextDirection=T;
|
|
2
2
|
//# sourceMappingURL=useTextDirection.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTextDirection.cjs","sources":["../../../../src/hooks/useTextDirection/useTextDirection.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 text direction value type */\nexport type UseTextDirectionValue = 'auto' | 'ltr' | 'rtl';\n\n/** The use text direction return type */\nexport interface UseTextDirectionReturn {\n /** The current direction */\n value: UseTextDirectionValue;\n /*** The function to remove the direction */\n remove: () => void;\n /*** The function to set the direction */\n set: (value: UseTextDirectionValue | null) => void;\n}\n\nexport interface UseTextDirection {\n (target: HookTarget, initialValue?: UseTextDirectionValue): UseTextDirectionReturn;\n\n <Target extends Element>(\n initialValue?: UseTextDirectionValue,\n target?: never\n ): UseTextDirectionReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useTextDirection\n * @description - Hook that can get and set the direction of the element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=document.querySelector('html')] The target element to observe\n * @param {UseTextDirectionValue} [initialValue = 'ltr'] The initial direction of the element\n * @returns {UseTextDirectionReturn} An object containing the current text direction of the element\n *\n * @example\n * const { value, set, remove } = useTextDirection(ref);\n *\n * @overload\n * @template Target The target element type\n * @param {UseTextDirectionValue} [initialValue = 'ltr'] The initial direction of the element\n * @returns { { ref: StateRef<Target> } & UseTextDirectionReturn } An object containing the current text direction of the element\n *\n * @example\n * const { ref, value, set, remove } = useTextDirection();\n */\nexport const useTextDirection = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const initialValue = ((target ? params[1] : params[0]) as UseTextDirectionValue) ?? 'ltr';\n\n const internalRef = useRefState();\n const elementRef = useRef<Element>(null);\n\n const getDirection = () => {\n if (typeof window === 'undefined') return initialValue;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n return (element?.getAttribute('dir') as UseTextDirectionValue) ?? initialValue;\n };\n\n const [value, setValue] = useState<UseTextDirectionValue>(getDirection());\n\n const remove = () => {\n if (!elementRef.current) return;\n\n elementRef.current?.removeAttribute('dir');\n };\n\n const set = (value: UseTextDirectionValue) => {\n if (!elementRef.current) return;\n\n setValue(value);\n elementRef.current.setAttribute('dir', value);\n };\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ??\n document.querySelector('html');\n if (!element) return;\n\n elementRef.current = element;\n\n const direction = getDirection();\n element.setAttribute('dir', direction);\n setValue(direction);\n\n const observer = new MutationObserver(() => setValue(getDirection()));\n\n observer.observe(element, { attributes: true });\n\n return () => {\n observer.disconnect();\n };\n }, [internalRef.state, target]);\n\n if (target) return { value, set, remove };\n return {\n ref: internalRef,\n value,\n set,\n remove\n };\n}) as UseTextDirection;\n"],"names":["useTextDirection","params","target","isTarget","initialValue","internalRef","useRefState","elementRef","useRef","getDirection","value","setValue","useState","remove","set","useEffect","element","direction","observer"],"mappings":"mMAsDaA,
|
|
1
|
+
{"version":3,"file":"useTextDirection.cjs","sources":["../../../../src/hooks/useTextDirection/useTextDirection.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 text direction value type */\nexport type UseTextDirectionValue = 'auto' | 'ltr' | 'rtl';\n\n/** The use text direction return type */\nexport interface UseTextDirectionReturn {\n /** The current direction */\n value: UseTextDirectionValue;\n /*** The function to remove the direction */\n remove: () => void;\n /*** The function to set the direction */\n set: (value: UseTextDirectionValue | null) => void;\n}\n\nexport interface UseTextDirection {\n (target: HookTarget, initialValue?: UseTextDirectionValue): UseTextDirectionReturn;\n\n <Target extends Element>(\n initialValue?: UseTextDirectionValue,\n target?: never\n ): UseTextDirectionReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name useTextDirection\n * @description - Hook that can get and set the direction of the element\n * @category Elements\n * @usage medium\n *\n * @overload\n * @param {HookTarget} [target=document.querySelector('html')] The target element to observe\n * @param {UseTextDirectionValue} [initialValue = 'ltr'] The initial direction of the element\n * @returns {UseTextDirectionReturn} An object containing the current text direction of the element\n *\n * @example\n * const { value, set, remove } = useTextDirection(ref);\n *\n * @overload\n * @template Target The target element type\n * @param {UseTextDirectionValue} [initialValue = 'ltr'] The initial direction of the element\n * @returns { { ref: StateRef<Target> } & UseTextDirectionReturn } An object containing the current text direction of the element\n *\n * @example\n * const { ref, value, set, remove } = useTextDirection();\n */\nexport const useTextDirection = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n const initialValue = ((target ? params[1] : params[0]) as UseTextDirectionValue) ?? 'ltr';\n\n const internalRef = useRefState();\n const elementRef = useRef<Element>(null);\n\n const getDirection = () => {\n if (typeof window === 'undefined') return initialValue;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n return (element?.getAttribute('dir') as UseTextDirectionValue) ?? initialValue;\n };\n\n const [value, setValue] = useState<UseTextDirectionValue>(getDirection());\n\n const remove = () => {\n if (!elementRef.current) return;\n\n elementRef.current?.removeAttribute('dir');\n };\n\n const set = (value: UseTextDirectionValue) => {\n if (!elementRef.current) return;\n\n setValue(value);\n elementRef.current.setAttribute('dir', value);\n };\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ??\n document.querySelector('html');\n if (!element) return;\n\n elementRef.current = element;\n\n const direction = getDirection();\n element.setAttribute('dir', direction);\n setValue(direction);\n\n const observer = new MutationObserver(() => setValue(getDirection()));\n\n observer.observe(element, { attributes: true });\n\n return () => {\n observer.disconnect();\n };\n }, [internalRef.state, target, isTarget.getRefState(target)]);\n\n if (target) return { value, set, remove };\n return {\n ref: internalRef,\n value,\n set,\n remove\n };\n}) as UseTextDirection;\n"],"names":["useTextDirection","params","target","isTarget","initialValue","internalRef","useRefState","elementRef","useRef","getDirection","value","setValue","useState","remove","set","useEffect","element","direction","observer"],"mappings":"mMAsDaA,GAAoB,IAAIC,IAAkB,CACrD,MAAMC,EAAUC,EAAAA,SAASF,EAAO,CAAC,CAAC,EAAIA,EAAO,CAAC,EAAI,OAC5CG,GAAiBF,EAASD,EAAO,CAAC,EAAIA,EAAO,CAAC,IAAgC,MAE9EI,EAAcC,EAAAA,YAAA,EACdC,EAAaC,EAAAA,OAAgB,IAAI,EAEjCC,EAAe,IACf,OAAO,OAAW,IAAoBL,GACzBF,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,UACnD,aAAa,KAAK,GAA+BD,EAG9D,CAACM,EAAOC,CAAQ,EAAIC,EAAAA,SAAgCH,GAAc,EAElEI,EAAS,IAAM,CACdN,EAAW,SAEhBA,EAAW,SAAS,gBAAgB,KAAK,CAAA,EAGrCO,EAAOJ,GAAiC,CACvCH,EAAW,UAEhBI,EAASD,CAAK,EACdH,EAAW,QAAQ,aAAa,MAAOG,CAAK,EAAA,EA0B9C,OAvBAK,EAAAA,UAAU,IAAM,CACd,GAAI,CAACb,GAAU,CAACG,EAAY,MAAO,OAEnC,MAAMW,GACFd,EAASC,EAAAA,SAAS,WAAWD,CAAM,EAAIG,EAAY,UACrD,SAAS,cAAc,MAAM,EAC/B,GAAI,CAACW,EAAS,OAEdT,EAAW,QAAUS,EAErB,MAAMC,EAAYR,EAAA,EAClBO,EAAQ,aAAa,MAAOC,CAAS,EACrCN,EAASM,CAAS,EAElB,MAAMC,EAAW,IAAI,iBAAiB,IAAMP,EAASF,EAAA,CAAc,CAAC,EAEpE,OAAAS,EAAS,QAAQF,EAAS,CAAE,WAAY,GAAM,EAEvC,IAAM,CACXE,EAAS,WAAA,CAAW,CACtB,EACC,CAACb,EAAY,MAAOH,EAAQC,EAAAA,SAAS,YAAYD,CAAM,CAAC,CAAC,EAExDA,EAAe,CAAE,MAAAQ,EAAO,IAAAI,EAAK,OAAAD,CAAA,EAC1B,CACL,IAAKR,EACL,MAAAK,EACA,IAAAI,EACA,OAAAD,CAAA,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),y=require("../useRefState/useRefState.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),y=require("../useRefState/useRefState.cjs"),h=require("../../utils/helpers/isTarget.cjs"),H=((...i)=>{const t=h.isTarget(i[0])?i[0]:void 0,r=t?i[1]:typeof i[0]=="string"?{initialValue:i[0]}:i[0],[a,g]=c.useState(r?.initialValue??""),u=y.useRefState(),o=c.useRef(null),s=()=>{const e=o.current;if(!e)return;const n=e.style.minHeight,l=e.style.maxHeight;e.style.height="auto",e.style.minHeight="auto",e.style.maxHeight="none";const f=e.scrollHeight;e.style.height=`${f}px`,e.style.minHeight=n,e.style.maxHeight=l,r?.onResize?.()};c.useEffect(()=>{if(!t&&!u.state)return;const e=t?h.isTarget.getElement(t):u.current;if(!e)return;o.current=e,r?.initialValue&&(e.value=r.initialValue),s();const n=f=>{const x=f.target.value;g(x),requestAnimationFrame(()=>{s()})},l=()=>{requestAnimationFrame(()=>{s()})};return e.addEventListener("input",n),e.addEventListener("resize",l),()=>{e.removeEventListener("input",n),e.removeEventListener("resize",l)}},[t,u.state,h.isTarget.getRefState(t),r?.initialValue]),c.useEffect(()=>{const e=o.current;e&&(e.value=a,requestAnimationFrame(()=>{s()}))},[a]);const m=e=>{g(e);const n=o.current;n&&(n.value=e,requestAnimationFrame(()=>{s()}))},v=()=>g("");return t?{value:a,setValue:m,clear:v}:{ref:u,value:a,setValue:m,clear:v}});exports.useTextareaAutosize=H;
|
|
2
2
|
//# sourceMappingURL=useTextareaAutosize.cjs.map
|