@siberiacancode/reactuse 0.3.0 → 0.3.2

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

@@ -1 +1 @@
-{"version":3,"file":"useParallax.mjs","sources":["../../../../src/hooks/useParallax/useParallax.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { 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 ? 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","getElement","onMouseMove","event","left","top","elementPositionX","elementPositionY","getSource","getRoll","y","height","getTilt","x","width","source","roll","tilt"],"mappings":"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"}
+{"version":3,"file":"useParallax.mjs","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":"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"}

package/dist/esm/hooks/usePictureInPicture/usePictureInPicture.mjs

@@ -1,26 +1,25 @@
-import { useState as P, useRef as E, useEffect as v } from "react";
-import { useRefState as g } from "../useRefState/useRefState.mjs";
-import { isTarget as I } from "../../utils/helpers/isTarget.mjs";
-import { getElement as x } from "../../utils/helpers/getElement.mjs";
-const O = (...n) => {
-  const c = typeof document < "u" && "pictureInPictureEnabled" in document && !!document.pictureInPictureEnabled, t = I(n[0]) ? n[0] : void 0, r = (t ? n[1] : n[0]) ?? {}, [s, i] = P(!1), f = g(), u = E(null), o = E(r);
+import { useState as v, useRef as m, useEffect as g } from "react";
+import { useRefState as I } from "../useRefState/useRefState.mjs";
+import { isTarget as P } from "../../utils/helpers/isTarget.mjs";
+const y = (...n) => {
+  const c = typeof document < "u" && "pictureInPictureEnabled" in document && !!document.pictureInPictureEnabled, t = P(n[0]) ? n[0] : void 0, r = (t ? n[1] : n[0]) ?? {}, [s, i] = v(!1), f = I(), u = m(null), o = m(r);
   o.current = r;
   const a = async () => {
     c && u.current && (await u.current.requestPictureInPicture(), i(!0), r.onEnter?.());
   }, p = async () => {
     c && (await document.exitPictureInPicture(), i(!1), r.onExit?.());
   };
-  v(() => {
-    const e = t ? x(t) : f.current;
+  g(() => {
+    const e = t ? P.getElement(t) : f.current;
     if (!e) return;
     u.current = e;
     const d = () => {
       i(!0), o.current.onEnter?.();
-    }, m = () => {
+    }, E = () => {
       i(!1), o.current.onExit?.();
     };
-    return e.addEventListener("enterpictureinpicture", d), e.addEventListener("leavepictureinpicture", m), () => {
-      e.removeEventListener("enterpictureinpicture", d), e.removeEventListener("leavepictureinpicture", m);
+    return e.addEventListener("enterpictureinpicture", d), e.addEventListener("leavepictureinpicture", E), () => {
+      e.removeEventListener("enterpictureinpicture", d), e.removeEventListener("leavepictureinpicture", E);
     };
   }, [t]);
   const l = {
@@ -35,6 +34,6 @@ const O = (...n) => {
   return t ? l : { ...l, ref: f };
 };
 export {
-  O as usePictureInPicture
+  y as usePictureInPicture
 };
 //# sourceMappingURL=usePictureInPicture.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePictureInPicture.mjs","sources":["../../../../src/hooks/usePictureInPicture/usePictureInPicture.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The 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 ? (getElement(target) as HTMLVideoElement) : 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","getElement","onEnterPictureInPicture","onLeavePictureInPicture","value"],"mappings":";;;;AAiEO,MAAMA,IAAuB,IAAIC,MAAkB;AACxD,QAAMC,IACJ,OAAO,WAAa,OACpB,6BAA6B,YAC7B,CAAC,CAAC,SAAS,yBAEPC,IAAUC,EAASH,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CI,KAAYF,IAASF,EAAO,CAAC,IAAIA,EAAO,CAAC,MAAqC,CAAA,GAE9E,CAACK,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAEhCC,IAAcC,EAAA,GACdC,IAAaC,EAAyB,IAAI,GAC1CC,IAAeD,EAAmCP,CAAO;AAC/D,EAAAQ,EAAa,UAAUR;AAEvB,QAAMS,IAAQ,YAAY;AACxB,IAAKZ,KAEAS,EAAW,YAEhB,MAAMA,EAAW,QAAQ,wBAAA,GACzBJ,EAAQ,EAAI,GAEZF,EAAQ,UAAA;AAAA,EAAU,GAGdU,IAAO,YAAY;AACvB,IAAKb,MAEL,MAAM,SAAS,qBAAA,GACfK,EAAQ,EAAK,GACbF,EAAQ,SAAA;AAAA,EAAS;AAGnB,EAAAW,EAAU,MAAM;AACd,UAAMC,IAAUd,IAAUe,EAAWf,CAAM,IAAyBM,EAAY;AAChF,QAAI,CAACQ,EAAS;AAEd,IAAAN,EAAW,UAAUM;AAErB,UAAME,IAA0B,MAAM;AACpC,MAAAZ,EAAQ,EAAI,GACZM,EAAa,QAAQ,UAAA;AAAA,IAAU,GAG3BO,IAA0B,MAAM;AACpC,MAAAb,EAAQ,EAAK,GACbM,EAAa,QAAQ,SAAA;AAAA,IAAS;AAGhC,WAAAI,EAAQ,iBAAiB,yBAAyBE,CAAuB,GACzEF,EAAQ,iBAAiB,yBAAyBG,CAAuB,GAElE,MAAM;AACX,MAAAH,EAAQ,oBAAoB,yBAAyBE,CAAuB,GAC5EF,EAAQ,oBAAoB,yBAAyBG,CAAuB;AAAA,IAAA;AAAA,EAC9E,GACC,CAACjB,CAAM,CAAC;AAOX,QAAMkB,IAAQ;AAAA,IACZ,MAAAf;AAAA,IACA,WAAAJ;AAAA,IACA,OAAAY;AAAA,IACA,MAAAC;AAAA,IACA,QAVa,YAAY;AACzB,MAAIT,UAAYS,EAAA,UACLD,EAAA;AAAA,IAAM;AAAA,EAQjB;AAGF,SAAIX,IAAekB,IACZ,EAAE,GAAGA,GAAO,KAAKZ,EAAA;AAC1B;"}
+{"version":3,"file":"usePictureInPicture.mjs","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":";;;AAiEO,MAAMA,IAAuB,IAAIC,MAAkB;AACxD,QAAMC,IACJ,OAAO,WAAa,OACpB,6BAA6B,YAC7B,CAAC,CAAC,SAAS,yBAEPC,IAAUC,EAASH,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CI,KAAYF,IAASF,EAAO,CAAC,IAAIA,EAAO,CAAC,MAAqC,CAAA,GAE9E,CAACK,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAEhCC,IAAcC,EAAA,GACdC,IAAaC,EAAyB,IAAI,GAC1CC,IAAeD,EAAmCP,CAAO;AAC/D,EAAAQ,EAAa,UAAUR;AAEvB,QAAMS,IAAQ,YAAY;AACxB,IAAKZ,KAEAS,EAAW,YAEhB,MAAMA,EAAW,QAAQ,wBAAA,GACzBJ,EAAQ,EAAI,GAEZF,EAAQ,UAAA;AAAA,EAAU,GAGdU,IAAO,YAAY;AACvB,IAAKb,MAEL,MAAM,SAAS,qBAAA,GACfK,EAAQ,EAAK,GACbF,EAAQ,SAAA;AAAA,EAAS;AAGnB,EAAAW,EAAU,MAAM;AACd,UAAMC,IAAUd,IACXC,EAAS,WAAWD,CAAM,IAC3BM,EAAY;AAChB,QAAI,CAACQ,EAAS;AAEd,IAAAN,EAAW,UAAUM;AAErB,UAAMC,IAA0B,MAAM;AACpC,MAAAX,EAAQ,EAAI,GACZM,EAAa,QAAQ,UAAA;AAAA,IAAU,GAG3BM,IAA0B,MAAM;AACpC,MAAAZ,EAAQ,EAAK,GACbM,EAAa,QAAQ,SAAA;AAAA,IAAS;AAGhC,WAAAI,EAAQ,iBAAiB,yBAAyBC,CAAuB,GACzED,EAAQ,iBAAiB,yBAAyBE,CAAuB,GAElE,MAAM;AACX,MAAAF,EAAQ,oBAAoB,yBAAyBC,CAAuB,GAC5ED,EAAQ,oBAAoB,yBAAyBE,CAAuB;AAAA,IAAA;AAAA,EAC9E,GACC,CAAChB,CAAM,CAAC;AAOX,QAAMiB,IAAQ;AAAA,IACZ,MAAAd;AAAA,IACA,WAAAJ;AAAA,IACA,OAAAY;AAAA,IACA,MAAAC;AAAA,IACA,QAVa,YAAY;AACzB,MAAIT,UAAYS,EAAA,UACLD,EAAA;AAAA,IAAM;AAAA,EAQjB;AAGF,SAAIX,IAAeiB,IACZ,EAAE,GAAGA,GAAO,KAAKX,EAAA;AAC1B;"}

package/dist/esm/hooks/useResizeObserver/useResizeObserver.mjs

@@ -1,17 +1,16 @@
-import { useState as v, useRef as C, useEffect as a } from "react";
-import { useRefState as h } from "../useRefState/useRefState.mjs";
-import { isTarget as m } from "../../utils/helpers/isTarget.mjs";
-import { getElement as y } from "../../utils/helpers/getElement.mjs";
-const x = (...e) => {
-  const t = m(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] }, s = n?.onChange, c = n?.enabled ?? !0, [f, g] = v(), [i, R] = v(), r = h(), u = C(s);
-  return u.current = s, a(() => {
+import { useState as v, useRef as a, useEffect as h } from "react";
+import { useRefState as y } from "../useRefState/useRefState.mjs";
+import { isTarget as g } from "../../utils/helpers/isTarget.mjs";
+const k = (...e) => {
+  const t = g(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] }, s = n?.onChange, c = n?.enabled ?? !0, [f, R] = v(), [i, d] = v(), r = y(), u = a(s);
+  return u.current = s, h(() => {
     if (!c || !t && !r.state) return;
-    const b = t ? y(t) : r.current;
+    const b = t ? g.getElement(t) : r.current;
     if (!b) return;
-    const o = new ResizeObserver(([l], d) => {
-      g(l), u.current?.(l, d);
+    const o = new ResizeObserver(([l], C) => {
+      R(l), u.current?.(l, C);
     });
-    return R(o), o.observe(b, n), () => {
+    return d(o), o.observe(b, n), () => {
       o.disconnect();
     };
   }, [t, r.state, n?.box, c]), t ? { entry: f, observer: i } : {
@@ -21,6 +20,6 @@ const x = (...e) => {
   };
 };
 export {
-  x as useResizeObserver
+  k as useResizeObserver
 };
 //# sourceMappingURL=useResizeObserver.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.mjs","sources":["../../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The 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 ? 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","getElement"],"mappings":";;;;AA4FO,MAAMA,IAAqB,IAAIC,MAAkB;AACtD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAWD,GAAS,UACpBE,IAAUF,GAAS,WAAW,IAE9B,CAACG,GAAOC,CAAQ,IAAIC,EAAA,GACpB,CAACC,GAAUC,CAAW,IAAIF,EAAA,GAE1BG,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AAsB3C,SArBAS,EAAoB,UAAUT,GAE9BW,EAAU,MAAM;AACd,QAAI,CAACV,KAAY,CAACJ,KAAU,CAACU,EAAY,MAAQ;AAEjD,UAAMK,IAAUf,IAASgB,EAAWhB,CAAM,IAAIU,EAAY;AAC1D,QAAI,CAACK,EAAS;AAEd,UAAMP,IAAW,IAAI,eAAe,CAAC,CAACH,CAAK,GAAGG,MAAa;AACzD,MAAAF,EAASD,CAAK,GACdO,EAAoB,UAAUP,GAAOG,CAAQ;AAAA,IAAA,CAC9C;AAED,WAAAC,EAAYD,CAAQ,GACpBA,EAAS,QAAQO,GAAoBb,CAAO,GAErC,MAAM;AACXM,MAAAA,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACR,GAAQU,EAAY,OAAOR,GAAS,KAAKE,CAAO,CAAC,GAEjDJ,IAAe,EAAE,OAAAK,GAAO,UAAAG,EAAA,IACrB;AAAA,IACL,KAAKE;AAAA,IACL,OAAAL;AAAA,IACA,UAAAG;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useResizeObserver.mjs","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":";;;AA4FO,MAAMA,IAAqB,IAAIC,MAAkB;AACtD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAE5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAWD,GAAS,UACpBE,IAAUF,GAAS,WAAW,IAE9B,CAACG,GAAOC,CAAQ,IAAIC,EAAA,GACpB,CAACC,GAAUC,CAAW,IAAIF,EAAA,GAE1BG,IAAcC,EAAA,GACdC,IAAsBC,EAAOV,CAAQ;AAsB3C,SArBAS,EAAoB,UAAUT,GAE9BW,EAAU,MAAM;AACd,QAAI,CAACV,KAAY,CAACJ,KAAU,CAACU,EAAY,MAAQ;AAEjD,UAAMK,IAAUf,IAASC,EAAS,WAAWD,CAAM,IAAIU,EAAY;AACnE,QAAI,CAACK,EAAS;AAEd,UAAMP,IAAW,IAAI,eAAe,CAAC,CAACH,CAAK,GAAGG,MAAa;AACzD,MAAAF,EAASD,CAAK,GACdO,EAAoB,UAAUP,GAAOG,CAAQ;AAAA,IAAA,CAC9C;AAED,WAAAC,EAAYD,CAAQ,GACpBA,EAAS,QAAQO,GAAoBb,CAAO,GAErC,MAAM;AACXM,MAAAA,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACR,GAAQU,EAAY,OAAOR,GAAS,KAAKE,CAAO,CAAC,GAEjDJ,IAAe,EAAE,OAAAK,GAAO,UAAAG,EAAA,IACrB;AAAA,IACL,KAAKE;AAAA,IACL,OAAAL;AAAA,IACA,UAAAG;AAAA,EAAA;AAEJ;"}

package/dist/esm/hooks/useRightClick/useRightClick.mjs

@@ -1,16 +1,15 @@
 import { useRef as d, useEffect as m } from "react";
-import { useRefState as h } from "../useRefState/useRefState.mjs";
-import { isTarget as v } from "../../utils/helpers/isTarget.mjs";
-import { getElement as x } from "../../utils/helpers/getElement.mjs";
-const S = (...r) => {
-  const e = v(r[0]) ? r[0] : void 0, i = e ? r[1] : r[0], f = e ? r[2] : r[1], c = h(), s = d(i);
+import { useRefState as v } from "../useRefState/useRefState.mjs";
+import { isTarget as h } from "../../utils/helpers/isTarget.mjs";
+const g = (...r) => {
+  const e = h(r[0]) ? r[0] : void 0, i = e ? r[1] : r[0], l = e ? r[2] : r[1], c = v(), s = d(i);
   s.current = i;
-  const u = d(f);
-  if (u.current = f, m(() => {
+  const u = d(l);
+  if (u.current = l, m(() => {
     if (!e && !c.state) return;
-    const n = e ? x(e) : c.current;
+    const n = e ? h.getElement(e) : c.current;
     if (!n) return;
-    const l = (t) => {
+    const f = (t) => {
       t.preventDefault(), u.current?.onStart?.(t);
       const o = t;
       s.current({ x: o.clientX, y: o.clientY }, t);
@@ -24,13 +23,13 @@ const S = (...r) => {
     }, E = (t) => {
       t.preventDefault(), u.current?.onEnd?.(t);
     };
-    return n.addEventListener("contextmenu", l), n.addEventListener("touchstart", a), n.addEventListener("touchend", E), () => {
-      n.removeEventListener("contextmenu", l), n.removeEventListener("touchstart", a), n.removeEventListener("touchend", E);
+    return n.addEventListener("contextmenu", f), n.addEventListener("touchstart", a), n.addEventListener("touchend", E), () => {
+      n.removeEventListener("contextmenu", f), n.removeEventListener("touchstart", a), n.removeEventListener("touchend", E);
     };
   }, [e, c.state]), !e)
     return c;
 };
 export {
-  S as useRightClick
+  g as useRightClick
 };
 //# sourceMappingURL=useRightClick.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useRightClick.mjs","sources":["../../../../src/hooks/useRightClick/useRightClick.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport 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 ? 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","getElement","onContextMenu","event","mouseEvent","onTouchStart","touchEvent","onTouchEnd"],"mappings":";;;;AAuDO,MAAMA,IAAiB,IAAIC,MAAuB;AACvD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAIzCI,IAAWH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCK,IAAcC,EAAA,GACdC,IAAsBC,EAAOL,CAAQ;AAC3C,EAAAI,EAAoB,UAAUJ;AAC9B,QAAMM,IAAqBD,EAAOJ,CAAO;AA4CzC,MA3CAK,EAAmB,UAAUL,GAE7BM,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAUV,IAASW,EAAWX,CAAM,IAAII,EAAY;AAC1D,QAAI,CAACM,EAAS;AAEd,UAAME,IAAgB,CAACC,MAA2B;AAChD,MAAAA,EAAM,eAAA,GACNL,EAAmB,SAAS,UAAUK,CAAK;AAC3C,YAAMC,IAAaD;AACnB,MAAAP,EAAoB,QAAQ,EAAE,GAAGQ,EAAW,SAAS,GAAGA,EAAW,QAAA,GAAWD,CAAK;AAAA,IAAA,GAG/EE,IAAe,CAACF,MAA2B;AAC/C,MAAAA,EAAM,eAAA,GACNL,EAAmB,SAAS,UAAUK,CAAK;AAC3C,YAAMG,IAAaH;AACnB,MAAAP,EAAoB;AAAA,QAClB,EAAE,GAAGU,EAAW,QAAQ,CAAC,EAAE,SAAS,GAAGA,EAAW,QAAQ,CAAC,EAAE,QAAA;AAAA,QAC7DH;AAAA,MAAA;AAAA,IACF,GAGII,IAAa,CAACJ,MAA2B;AAC7C,MAAAA,EAAM,eAAA,GACNL,EAAmB,SAAS,QAAQK,CAAK;AAAA,IAAA;AAG3C,WAAAH,EAAQ,iBAAiB,eAAeE,CAA8B,GAEtEF,EAAQ,iBAAiB,cAAcK,CAA6B,GACpEL,EAAQ,iBAAiB,YAAYO,CAA2B,GAEzD,MAAM;AACX,MAAAP,EAAQ,oBAAoB,eAAeE,CAA8B,GAEzEF,EAAQ,oBAAoB,cAAcK,CAA6B,GACvEL,EAAQ,oBAAoB,YAAYO,CAA2B;AAAA,IAAA;AAAA,EACrE,GACC,CAACjB,GAAQI,EAAY,KAAK,CAAC,GAE1B,CAAAJ;AACJ,WAAOI;AACT;"}
+{"version":3,"file":"useRightClick.mjs","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":";;;AAuDO,MAAMA,IAAiB,IAAIC,MAAuB;AACvD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAYF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAIzCI,IAAWH,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCK,IAAcC,EAAA,GACdC,IAAsBC,EAAOL,CAAQ;AAC3C,EAAAI,EAAoB,UAAUJ;AAC9B,QAAMM,IAAqBD,EAAOJ,CAAO;AA4CzC,MA3CAK,EAAmB,UAAUL,GAE7BM,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAUV,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AACnE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAgB,CAACC,MAA2B;AAChD,MAAAA,EAAM,eAAA,GACNJ,EAAmB,SAAS,UAAUI,CAAK;AAC3C,YAAMC,IAAaD;AACnB,MAAAN,EAAoB,QAAQ,EAAE,GAAGO,EAAW,SAAS,GAAGA,EAAW,QAAA,GAAWD,CAAK;AAAA,IAAA,GAG/EE,IAAe,CAACF,MAA2B;AAC/C,MAAAA,EAAM,eAAA,GACNJ,EAAmB,SAAS,UAAUI,CAAK;AAC3C,YAAMG,IAAaH;AACnB,MAAAN,EAAoB;AAAA,QAClB,EAAE,GAAGS,EAAW,QAAQ,CAAC,EAAE,SAAS,GAAGA,EAAW,QAAQ,CAAC,EAAE,QAAA;AAAA,QAC7DH;AAAA,MAAA;AAAA,IACF,GAGII,IAAa,CAACJ,MAA2B;AAC7C,MAAAA,EAAM,eAAA,GACNJ,EAAmB,SAAS,QAAQI,CAAK;AAAA,IAAA;AAG3C,WAAAF,EAAQ,iBAAiB,eAAeC,CAA8B,GAEtED,EAAQ,iBAAiB,cAAcI,CAA6B,GACpEJ,EAAQ,iBAAiB,YAAYM,CAA2B,GAEzD,MAAM;AACX,MAAAN,EAAQ,oBAAoB,eAAeC,CAA8B,GAEzED,EAAQ,oBAAoB,cAAcI,CAA6B,GACvEJ,EAAQ,oBAAoB,YAAYM,CAA2B;AAAA,IAAA;AAAA,EACrE,GACC,CAAChB,GAAQI,EAAY,KAAK,CAAC,GAE1B,CAAAJ;AACJ,WAAOI;AACT;"}

package/dist/esm/hooks/useScroll/useScroll.mjs

@@ -1,23 +1,22 @@
-import { useRef as S, useState as j, useEffect as A } from "react";
-import { useRefState as O } from "../useRefState/useRefState.mjs";
-import { isTarget as P } from "../../utils/helpers/isTarget.mjs";
-import { getElement as W } from "../../utils/helpers/getElement.mjs";
-const I = 1, q = (...o) => {
-  const c = P(o[0]) ? o[0] : void 0, g = c ? typeof o[1] == "object" ? o[1] : { onScroll: o[1] } : typeof o[0] == "object" ? o[0] : { onScroll: o[0] }, d = O(), p = S(g), f = S(null);
+import { useRef as S, useState as A, useEffect as O } from "react";
+import { useRefState as P } from "../useRefState/useRefState.mjs";
+import { isTarget as I } from "../../utils/helpers/isTarget.mjs";
+const V = 1, M = (...o) => {
+  const c = I(o[0]) ? o[0] : void 0, g = c ? typeof o[1] == "object" ? o[1] : { onScroll: o[1] } : typeof o[0] == "object" ? o[0] : { onScroll: o[0] }, d = P(), p = S(g), f = S(null);
   p.current = g;
-  const [E, R] = j(!1), u = S({ x: 0, y: 0 });
-  A(() => {
+  const [E, R] = A(!1), u = S({ x: 0, y: 0 });
+  O(() => {
     if (!c && !d.state) return;
-    const e = (c ? W(c) : d.current) ?? window;
+    const e = (c ? I.getElement(c) : d.current) ?? window;
     f.current = e;
     const l = (t) => {
       R(!1), g?.onStop?.(t);
     }, s = (t) => {
       R(!0);
-      const r = t.target === document ? t.target.documentElement : t.target, { display: b, flexDirection: h, direction: V } = r.style, x = V === "rtl" ? -1 : 1, i = r.scrollLeft;
+      const r = t.target === document ? t.target.documentElement : t.target, { display: b, flexDirection: h, direction: _ } = r.style, x = _ === "rtl" ? -1 : 1, i = r.scrollLeft;
       let n = r.scrollTop;
       r instanceof Document && !n && (n = window.document.body.scrollTop);
-      const m = p.current?.offset, a = i * x <= (m?.left ?? 0), T = i * x + r.clientWidth >= r.scrollWidth - (m?.right ?? 0) - I, L = n <= (m?.top ?? 0), w = n + r.clientHeight >= r.scrollHeight - (m?.bottom ?? 0) - I, D = b === "flex" && h === "column-reverse", H = b === "flex" && h === "column-reverse", _ = {
+      const m = p.current?.offset, a = i * x <= (m?.left ?? 0), T = i * x + r.clientWidth >= r.scrollWidth - (m?.right ?? 0) - V, L = n <= (m?.top ?? 0), w = n + r.clientHeight >= r.scrollHeight - (m?.bottom ?? 0) - V, D = b === "flex" && h === "column-reverse", H = b === "flex" && h === "column-reverse", j = {
         x: i,
         y: n,
         directions: {
@@ -33,7 +32,7 @@ const I = 1, q = (...o) => {
           bottom: D ? L : w
         }
       };
-      u.current = { x: i, y: n }, p.current?.onScroll?.(_, t);
+      u.current = { x: i, y: n }, p.current?.onScroll?.(j, t);
     };
     return e.addEventListener("scroll", s), e.addEventListener("scrollend", l), () => {
       e.removeEventListener("scroll", s), e.removeEventListener("scrollend", l);
@@ -60,6 +59,6 @@ const I = 1, q = (...o) => {
   };
 };
 export {
-  q as useScroll
+  M as useScroll
 };
 //# sourceMappingURL=useScroll.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useScroll.mjs","sources":["../../../../src/hooks/useScroll/useScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nconst ARRIVED_STATE_THRESHOLD_PIXELS = 1;\n\nexport interface UseScrollOptions {\n  /** The on scroll callback */\n  onScroll?: (params: UseScrollCallbackParams, event: Event) => void;\n\n  /** The on end scroll callback */\n  onStop?: (event: Event) => void;\n\n  /** Offset arrived states by x pixels. */\n  offset?: {\n    left?: number;\n    right?: number;\n    top?: number;\n    bottom?: number;\n  };\n}\n\nexport interface UseScrollCallbackParams {\n  /** The element x position */\n  x: number;\n  /** The element y position */\n  y: number;\n  /** State of scroll arrived */\n  arrived: {\n    left: boolean;\n    right: boolean;\n    top: boolean;\n    bottom: boolean;\n  };\n  /** State of scroll direction */\n  directions: {\n    left: boolean;\n    right: boolean;\n    top: boolean;\n    bottom: boolean;\n  };\n}\n\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 = ((target ? 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","getElement","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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"}
+{"version":3,"file":"useScroll.mjs","sources":["../../../../src/hooks/useScroll/useScroll.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { 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":";;;AAUA,MAAMA,IAAiC,GAuI1BC,IAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAcC,EAAA,GACdC,IAAqBC,EAAOJ,CAAO,GACnCK,IAAaD,EAAgB,IAAI;AACvC,EAAAD,EAAmB,UAAUH;AAE7B,QAAM,CAACM,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAoBL,EAAO,EAAE,GAAG,GAAG,GAAG,GAAG;AAE/C,EAAAM,EAAU,MAAM;AACd,QAAI,CAACZ,KAAU,CAACG,EAAY,MAAO;AACnC,UAAMU,KACFb,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY,YAAwB;AAE/E,IAAAI,EAAW,UAAUM;AAErB,UAAMC,IAAc,CAACC,MAAiB;AACpC,MAAAN,EAAa,EAAK,GAClBP,GAAS,SAASa,CAAK;AAAA,IAAA,GAGnBC,IAAW,CAACD,MAAiB;AACjC,MAAAN,EAAa,EAAI;AACjB,YAAMT,IACJe,EAAM,WAAW,WAAYA,EAAM,OAAoB,kBAAkBA,EAAM,QAG3E,EAAE,SAAAE,GAAS,eAAAC,GAAe,WAAAC,EAAA,IAAcnB,EAAO,OAC/CoB,IAAsBD,MAAc,QAAQ,KAAK,GAEjDE,IAAarB,EAAO;AAC1B,UAAIsB,IAAYtB,EAAO;AACvB,MAAIA,aAAkB,YAAY,CAACsB,MAAWA,IAAY,OAAO,SAAS,KAAK;AAE/E,YAAMC,IAASlB,EAAmB,SAAS,QACrCmB,IAAOH,IAAaD,MAAwBG,GAAQ,QAAQ,IAC5DE,IACJJ,IAAaD,IAAsBpB,EAAO,eAC1CA,EAAO,eAAeuB,GAAQ,SAAS,KAAK1B,GACxC6B,IAAMJ,MAAcC,GAAQ,OAAO,IACnCI,IACJL,IAAYtB,EAAO,gBACnBA,EAAO,gBAAgBuB,GAAQ,UAAU,KAAK1B,GAE1C+B,IAAkBX,MAAY,UAAUC,MAAkB,kBAC1DW,IAAeZ,MAAY,UAAUC,MAAkB,kBAEvDnB,IAAS;AAAA,QACb,GAAGsB;AAAA,QACH,GAAGC;AAAA,QACH,YAAY;AAAA,UACV,MAAMD,IAAaV,EAAkB,QAAQ;AAAA,UAC7C,OAAOU,IAAaV,EAAkB,QAAQ;AAAA,UAC9C,KAAKW,IAAYX,EAAkB,QAAQ;AAAA,UAC3C,QAAQW,IAAYX,EAAkB,QAAQ;AAAA,QAAA;AAAA,QAEhD,SAAS;AAAA,UACP,MAAMkB,IAAeJ,IAAQD;AAAA,UAC7B,OAAOK,IAAeL,IAAOC;AAAA,UAC7B,KAAKG,IAAkBD,IAASD;AAAA,UAChC,QAAQE,IAAkBF,IAAMC;AAAA,QAAA;AAAA,MAClC;AAGF,MAAAhB,EAAkB,UAAU,EAAE,GAAGU,GAAY,GAAGC,EAAA,GAChDjB,EAAmB,SAAS,WAAWN,GAAQgB,CAAK;AAAA,IAAA;AAGtD,WAAAF,EAAQ,iBAAiB,UAAUG,CAAQ,GAC3CH,EAAQ,iBAAiB,aAAaC,CAAW,GAE1C,MAAM;AACX,MAAAD,EAAQ,oBAAoB,UAAUG,CAAQ,GAC9CH,EAAQ,oBAAoB,aAAaC,CAAW;AAAA,IAAA;AAAA,EACtD,GACC,CAACd,GAAQG,EAAY,KAAK,CAAC;AAE9B,QAAM2B,IAAiB,CAAC/B,MAIlB;AACJ,QAAI,CAACQ,EAAW,QAAS;AAEzB,UAAM,EAAE,UAAAwB,GAAU,OAAAC,GAAO,QAAAC,EAAA,IAAWlC,KAAU,CAAA;AAE9C,IAAAQ,EAAW,QAAQ,eAAe;AAAA,MAChC,UAAAwB;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,IAAA,CACD;AAAA,EAAA,GAGGC,IAAW,CAACnC,MAAiE;AACjF,QAAI,CAACQ,EAAW,QAAS;AAEzB,UAAM,EAAE,GAAA4B,GAAG,GAAAC,GAAG,UAAAL,EAAA,IAAahC,KAAU,CAAA;AAErC,IAAAQ,EAAW,QAAQ,SAAS,EAAE,MAAM4B,GAAG,KAAKC,GAAG,UAAAL,GAAU;AAAA,EAAA;AAG3D,SAAI/B,IAAe,EAAE,gBAAA8B,GAAgB,UAAAI,GAAU,WAAA1B,EAAA,IACxC;AAAA,IACL,KAAKL;AAAA,IACL,WAAAK;AAAA,IACA,gBAAAsB;AAAA,IACA,UAAAI;AAAA,EAAA;AAEJ;"}

package/dist/esm/hooks/useScrollIntoView/useScrollIntoView.mjs

@@ -1,36 +1,35 @@
-import { useRef as h } from "react";
-import { useIsomorphicLayoutEffect as g } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import { useRefState as p } from "../useRefState/useRefState.mjs";
-import { isTarget as v } from "../../utils/helpers/isTarget.mjs";
-import { getElement as w } from "../../utils/helpers/getElement.mjs";
-const y = (...t) => {
-  const e = v(t[0]) ? t[0] : void 0, c = e ? t[1] : t[0], o = p(), {
-    behavior: l = "smooth",
-    block: s = "start",
+import { useRef as g } from "react";
+import { useIsomorphicLayoutEffect as v } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { useRefState as w } from "../useRefState/useRefState.mjs";
+import { isTarget as c } from "../../utils/helpers/isTarget.mjs";
+const d = (...t) => {
+  const e = c(t[0]) ? t[0] : void 0, l = e ? t[1] : t[0], o = w(), {
+    behavior: s = "smooth",
+    block: u = "start",
     inline: f = "nearest",
-    immediately: u = !0
-  } = c ?? {}, n = h(null);
-  g(() => {
-    if (!u || !e && !o.state) return;
-    const r = (e ? w(e) : o.current) ?? window;
+    immediately: m = !0
+  } = l ?? {}, n = g(null);
+  v(() => {
+    if (!m || !e && !o.state) return;
+    const r = (e ? c.getElement(e) : o.current) ?? window;
     n.current = r, r.scrollIntoView({
-      behavior: l,
-      block: s,
+      behavior: s,
+      block: u,
       inline: f
     });
   }, [e, o.state]);
   const i = (r) => {
     if (!n.current) return;
-    const { behavior: m, block: a, inline: b } = r ?? {};
+    const { behavior: a, block: b, inline: h } = r ?? {};
     n.current.scrollIntoView({
-      behavior: m,
-      block: a,
-      inline: b
+      behavior: a,
+      block: b,
+      inline: h
     });
   };
   return e ? { trigger: i } : { ref: o, trigger: i };
 };
 export {
-  y as useScrollIntoView
+  d as useScrollIntoView
 };
 //# sourceMappingURL=useScrollIntoView.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollIntoView.mjs","sources":["../../../../src/hooks/useScrollIntoView/useScrollIntoView.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { 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 = ((target ? 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","getElement","trigger"],"mappings":";;;;;AAgEO,MAAMA,IAAqB,IAAIC,MAAkB;AACtD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCI,IAAcC,EAAA,GACd;AAAA,IACJ,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,aAAAC,IAAc;AAAA,EAAA,IACZN,KAAW,CAAA,GACTO,IAAaC,EAAgB,IAAI;AAEvC,EAAAC,EAA0B,MAAM;AAE9B,QADI,CAACH,KACD,CAACR,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMS,KAAYZ,IAASa,EAAWb,CAAM,IAAIG,EAAY,YAAwB;AAEpF,IAAAM,EAAW,UAAUG,GAErBA,EAAQ,eAAe;AAAA,MACrB,UAAAP;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,IAAA,CACD;AAAA,EAAA,GACA,CAACP,GAAQG,EAAY,KAAK,CAAC;AAE9B,QAAMW,IAAU,CAACf,MAIX;AACJ,QAAI,CAACU,EAAW,QAAS;AAEzB,UAAM,EAAE,UAAAJ,GAAU,OAAAC,GAAO,QAAAC,MAAWR,KAAU,CAAA;AAE9C,IAAAU,EAAW,QAAQ,eAAe;AAAA,MAChC,UAAAJ;AAAAA,MACA,OAAAC;AAAAA,MACA,QAAAC;AAAAA,IAAA,CACD;AAAA,EAAA;AAGH,SAAIP,IAAe,EAAE,SAAAc,EAAA,IACd,EAAE,KAAKX,GAAa,SAAAW,EAAA;AAC7B;"}
+{"version":3,"file":"useScrollIntoView.mjs","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":";;;;AAgEO,MAAMA,IAAqB,IAAIC,MAAkB;AACtD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GAExCI,IAAcC,EAAA,GACd;AAAA,IACJ,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,aAAAC,IAAc;AAAA,EAAA,IACZN,KAAW,CAAA,GACTO,IAAaC,EAAgB,IAAI;AAEvC,EAAAC,EAA0B,MAAM;AAE9B,QADI,CAACH,KACD,CAACR,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMS,KACFZ,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY,YAAwB;AAE/E,IAAAM,EAAW,UAAUG,GAErBA,EAAQ,eAAe;AAAA,MACrB,UAAAP;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,IAAA,CACD;AAAA,EAAA,GACA,CAACP,GAAQG,EAAY,KAAK,CAAC;AAE9B,QAAMU,IAAU,CAACd,MAIX;AACJ,QAAI,CAACU,EAAW,QAAS;AAEzB,UAAM,EAAE,UAAAJ,GAAU,OAAAC,GAAO,QAAAC,MAAWR,KAAU,CAAA;AAE9C,IAAAU,EAAW,QAAQ,eAAe;AAAA,MAChC,UAAAJ;AAAAA,MACA,OAAAC;AAAAA,MACA,QAAAC;AAAAA,IAAA,CACD;AAAA,EAAA;AAGH,SAAIP,IAAe,EAAE,SAAAa,EAAA,IACd,EAAE,KAAKV,GAAa,SAAAU,EAAA;AAC7B;"}

package/dist/esm/hooks/useScrollTo/useScrollTo.mjs

@@ -1,23 +1,22 @@
-import { useRef as g } from "react";
-import { useIsomorphicLayoutEffect as h } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import { useRefState as v } from "../useRefState/useRefState.mjs";
-import { isTarget as y } from "../../utils/helpers/isTarget.mjs";
-import { getElement as b } from "../../utils/helpers/getElement.mjs";
-const E = (...e) => {
-  const t = y(e[0]) ? e[0] : void 0, c = t ? e[1] : e[0], { x: f, y: s, behavior: u = "auto", immediately: l = !0 } = c ?? {}, r = v(), n = g(null);
-  h(() => {
-    if (!l || !t && !r.state) return;
-    const o = (t ? b(t) : r.current) ?? window;
-    n.current = o, o.scrollTo({ top: s, left: f, behavior: u });
+import { useRef as h } from "react";
+import { useIsomorphicLayoutEffect as v } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { useRefState as y } from "../useRefState/useRefState.mjs";
+import { isTarget as c } from "../../utils/helpers/isTarget.mjs";
+const d = (...e) => {
+  const t = c(e[0]) ? e[0] : void 0, f = t ? e[1] : e[0], { x: s, y: u, behavior: l = "auto", immediately: m = !0 } = f ?? {}, r = y(), n = h(null);
+  v(() => {
+    if (!m || !t && !r.state) return;
+    const o = (t ? c.getElement(t) : r.current) ?? window;
+    n.current = o, o.scrollTo({ top: u, left: s, behavior: l });
   }, [t, r.state]);
   const i = (o) => {
     if (!n.current) return;
-    const { x: m, y: a, behavior: p } = o ?? {};
-    n.current.scrollTo({ left: m, top: a, behavior: p });
+    const { x: a, y: p, behavior: g } = o ?? {};
+    n.current.scrollTo({ left: a, top: p, behavior: g });
   };
   return t ? { trigger: i } : { ref: r, trigger: i };
 };
 export {
-  E as useScrollTo
+  d as useScrollTo
 };
 //# sourceMappingURL=useScrollTo.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollTo.mjs","sources":["../../../../src/hooks/useScrollTo/useScrollTo.ts"],"sourcesContent":["import { useRef } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { 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 = ((target ? 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","getElement","trigger"],"mappings":";;;;;AAkEO,MAAMA,IAAe,IAAIC,MAAkB;AAChD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxC,EAAE,GAAAI,GAAG,GAAAC,GAAG,UAAAC,IAAW,QAAQ,aAAAC,IAAc,OAASJ,KAAW,CAAA,GAC7DK,IAAcC,EAAA,GACdC,IAAaC,EAAgB,IAAI;AAEvC,EAAAC,EAA0B,MAAM;AAE9B,QADI,CAACL,KACD,CAACN,KAAU,CAACO,EAAY,MAAO;AAEnC,UAAMK,KAAYZ,IAASa,EAAWb,CAAM,IAAIO,EAAY,YAAwB;AAEpF,IAAAE,EAAW,UAAUG,GAErBA,EAAQ,SAAS,EAAE,KAAKR,GAAG,MAAMD,GAAG,UAAAE,GAAU;AAAA,EAAA,GAC7C,CAACL,GAAQO,EAAY,KAAK,CAAC;AAE9B,QAAMO,IAAU,CAACf,MAAiE;AAChF,QAAI,CAACU,EAAW,QAAS;AAEzB,UAAM,EAAE,GAAAN,GAAG,GAAAC,GAAG,UAAAC,MAAaN,KAAU,CAAA;AAErC,IAAAU,EAAW,QAAQ,SAAS,EAAE,MAAMN,GAAG,KAAKC,GAAG,UAAAC,GAAU;AAAA,EAAA;AAG3D,SAAIL,IAAe,EAAE,SAAAc,EAAA,IACd,EAAE,KAAKP,GAAa,SAAAO,EAAA;AAC7B;"}
+{"version":3,"file":"useScrollTo.mjs","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"],"mappings":";;;;AAkEO,MAAMA,IAAe,IAAIC,MAAkB;AAChD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxC,EAAE,GAAAI,GAAG,GAAAC,GAAG,UAAAC,IAAW,QAAQ,aAAAC,IAAc,OAASJ,KAAW,CAAA,GAC7DK,IAAcC,EAAA,GACdC,IAAaC,EAAgB,IAAI;AAEvC,EAAAC,EAA0B,MAAM;AAE9B,QADI,CAACL,KACD,CAACN,KAAU,CAACO,EAAY,MAAO;AAEnC,UAAMK,KACFZ,IAASC,EAAS,WAAWD,CAAM,IAAIO,EAAY,YAAwB;AAE/E,IAAAE,EAAW,UAAUG,GAErBA,EAAQ,SAAS,EAAE,KAAKR,GAAG,MAAMD,GAAG,UAAAE,GAAU;AAAA,EAAA,GAC7C,CAACL,GAAQO,EAAY,KAAK,CAAC;AAE9B,QAAMM,IAAU,CAACd,MAAiE;AAChF,QAAI,CAACU,EAAW,QAAS;AAEzB,UAAM,EAAE,GAAAN,GAAG,GAAAC,GAAG,UAAAC,MAAaN,KAAU,CAAA;AAErC,IAAAU,EAAW,QAAQ,SAAS,EAAE,MAAMN,GAAG,KAAKC,GAAG,UAAAC,GAAU;AAAA,EAAA;AAG3D,SAAIL,IAAe,EAAE,SAAAa,EAAA,IACd,EAAE,KAAKN,GAAa,SAAAM,EAAA;AAC7B;"}

package/dist/esm/hooks/useSticky/useSticky.mjs

@@ -1,32 +1,31 @@
 import { useState as m, useEffect as v } from "react";
 import { useRefState as L } from "../useRefState/useRefState.mjs";
-import { isTarget as p } from "../../utils/helpers/isTarget.mjs";
-import { getElement as d } from "../../utils/helpers/getElement.mjs";
-const T = (...n) => {
-  const o = p(n[0]) ? n[0] : void 0, r = o ? n[1] : n[0], s = r?.axis ?? "vertical", i = L(), [f, u] = m(!1);
+import { isTarget as f } from "../../utils/helpers/isTarget.mjs";
+const R = (...o) => {
+  const n = f(o[0]) ? o[0] : void 0, r = n ? o[1] : o[0], s = r?.axis ?? "vertical", i = L(), [u, d] = m(!1);
   return v(() => {
-    if (!o && !i.state) return;
-    const c = o ? d(o) : i.current;
+    if (!n && !i.state) return;
+    const c = n ? f.getElement(n) : i.current;
     if (!c) return;
-    const t = r?.root ? d(r.root) : document, a = c.getBoundingClientRect().top + t.scrollTop - t.getBoundingClientRect().top, g = c.getBoundingClientRect().left + t.scrollLeft - t.getBoundingClientRect().left, e = () => {
+    const t = r?.root ? f.getElement(r.root) : document, a = c.getBoundingClientRect().top + t.scrollTop - t.getBoundingClientRect().top, g = c.getBoundingClientRect().left + t.scrollLeft - t.getBoundingClientRect().left, e = () => {
       if (s === "vertical") {
         const l = t.scrollTop;
-        u(l >= a);
+        d(l >= a);
       }
       if (s === "horizontal") {
         const l = t.scrollLeft;
-        u(l >= g);
+        d(l >= g);
       }
     };
     return t.addEventListener("scroll", e), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), e(), () => {
       t.removeEventListener("scroll", e), window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
     };
-  }, [o, i.state, s, r?.root]), o ? f : {
-    stuck: f,
+  }, [n, i.state, s, r?.root]), n ? u : {
+    stuck: u,
     ref: i
   };
 };
 export {
-  T as useSticky
+  R as useSticky
 };
 //# sourceMappingURL=useSticky.mjs.map