@siberiacancode/reactuse 0.2.30 → 0.2.32

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

@@ -1,49 +1,65 @@
-import { useRef as T, useState as _, useEffect as j } from "react";
-import { useRefState as A } from "../useRefState/useRefState.mjs";
-import { isTarget as I } from "../../utils/helpers/isTarget.mjs";
-import { getElement as O } from "../../utils/helpers/getElement.mjs";
-const D = 1, V = (...t) => {
-  const r = I(t[0]) ? t[0] : void 0, u = r ? typeof t[1] == "object" ? t[1] : { onScroll: t[1] } : typeof t[0] == "object" ? t[0] : { onScroll: t[0] }, i = A(), d = T(u);
-  d.current = u;
-  const [m, g] = _(!1), l = T({ x: 0, y: 0 });
-  return j(() => {
-    if (!r && !i.state) return;
-    const s = r ? O(r) : i.current;
-    if (!s) return;
-    const p = (n) => {
-      g(!1), u?.onStop?.(n);
-    }, S = (n) => {
-      g(!0);
-      const e = n.target === document ? n.target.documentElement : n.target, { display: E, flexDirection: R, direction: H } = e.style, y = H === "rtl" ? -1 : 1, c = e.scrollLeft;
-      let o = e.scrollTop;
-      e instanceof Document && !o && (o = window.document.body.scrollTop);
-      const f = d.current?.offset, v = c * y <= (f?.left ?? 0), x = c * y + e.clientWidth >= e.scrollWidth - (f?.right ?? 0) - D, h = o <= (f?.top ?? 0), L = o + e.clientHeight >= e.scrollHeight - (f?.bottom ?? 0) - D, a = E === "flex" && R === "column-reverse", b = E === "flex" && R === "column-reverse", w = {
-        x: c,
-        y: o,
+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);
+  p.current = g;
+  const [E, R] = j(!1), u = S({ x: 0, y: 0 });
+  A(() => {
+    if (!c && !d.state) return;
+    const e = (c ? W(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;
+      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", _ = {
+        x: i,
+        y: n,
         directions: {
-          left: c < l.current.x,
-          right: c > l.current.x,
-          top: o < l.current.y,
-          bottom: o > l.current.y
+          left: i < u.current.x,
+          right: i > u.current.x,
+          top: n < u.current.y,
+          bottom: n > u.current.y
         },
         arrived: {
-          left: b ? x : v,
-          right: b ? v : x,
-          top: a ? L : h,
-          bottom: a ? h : L
+          left: H ? T : a,
+          right: H ? a : T,
+          top: D ? w : L,
+          bottom: D ? L : w
         }
       };
-      l.current = { x: c, y: o }, d.current?.onScroll?.(w, n);
+      u.current = { x: i, y: n }, p.current?.onScroll?.(_, t);
     };
-    return s.addEventListener("scroll", S), s.addEventListener("scrollend", p), () => {
-      s.removeEventListener("scroll", S), s.removeEventListener("scrollend", p);
+    return e.addEventListener("scroll", s), e.addEventListener("scrollend", l), () => {
+      e.removeEventListener("scroll", s), e.removeEventListener("scrollend", l);
     };
-  }, [r, i.state]), r ? m : {
-    ref: i,
-    scrolling: m
+  }, [c, d.state]);
+  const v = (e) => {
+    if (!f.current) return;
+    const { behavior: l, block: s, inline: t } = e ?? {};
+    f.current.scrollIntoView({
+      behavior: l,
+      block: s,
+      inline: t
+    });
+  }, y = (e) => {
+    if (!f.current) return;
+    const { x: l, y: s, behavior: t } = e ?? {};
+    f.current.scrollTo({ left: l, top: s, behavior: t });
+  };
+  return c ? { scrollIntoView: v, scrollTo: y, scrolling: E } : {
+    ref: d,
+    scrolling: E,
+    scrollIntoView: v,
+    scrollTo: y
   };
 };
 export {
-  V as useScroll
+  q 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\nexport interface UseScroll {\n  (target: HookTarget, callback?: (params: UseScrollCallbackParams, event: Event) => void): boolean;\n\n  (target: HookTarget, options?: UseScrollOptions): boolean;\n\n  <Target extends Element>(\n    callback?: (params: UseScrollCallbackParams, event: Event) => void,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n    scrolling: boolean;\n  };\n\n  <Target extends Element>(\n    options?: UseScrollOptions,\n    target?: never\n  ): {\n    ref: StateRef<Target>;\n    scrolling: boolean;\n  };\n}\n\n/**\n * @name useScroll\n * @description - Hook that allows you to control scroll a element\n * @category Sensors\n * @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 {boolean} The state of scrolling\n *\n * @example\n * const scrolling = useScroll(ref, options);\n *\n * @overload\n * @template Target The target element\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {boolean} The state of scrolling\n *\n * @example\n * const scrolling = useScroll(ref, () => console.log('callback'));\n *\n * @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0]  The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {[StateRef<Target>, boolean]} The state of scrolling\n *\n * @example\n * const { ref, scrolling } = useScroll(options);\n *\n * @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {[StateRef<Target>, boolean]} The state of scrolling\n *\n * @example\n * const { ref, scrolling } = useScroll(() => console.log('callback'));\n */\nexport const useScroll = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = (\n    target\n      ? typeof params[1] === 'object'\n        ? params[1]\n        : { onScroll: params[1] }\n      : typeof params[0] === 'object'\n        ? params[0]\n        : { onScroll: params[0] }\n  ) as UseScrollOptions | undefined;\n\n  const internalRef = useRefState<Element>();\n  const internalOptionsRef = useRef(options);\n  internalOptionsRef.current = options;\n\n  const [scrolling, setScrolling] = useState(false);\n  const scrollPositionRef = useRef({ x: 0, y: 0 });\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n    const element = (target ? getElement(target) : internalRef.current) as Element;\n\n    if (!element) return;\n\n    const onScrollEnd = (event: Event) => {\n      setScrolling(false);\n      options?.onStop?.(event);\n    };\n\n    const onScroll = (event: Event) => {\n      setScrolling(true);\n      const target = (\n        event.target === document ? (event.target as Document).documentElement : event.target\n      ) as HTMLElement;\n\n      const { display, flexDirection, direction } = target.style;\n      const directionMultiplier = direction === 'rtl' ? -1 : 1;\n\n      const scrollLeft = target.scrollLeft;\n      let scrollTop = target.scrollTop;\n      if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;\n\n      const offset = internalOptionsRef.current?.offset;\n      const left = scrollLeft * directionMultiplier <= (offset?.left ?? 0);\n      const right =\n        scrollLeft * directionMultiplier + target.clientWidth >=\n        target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n      const top = scrollTop <= (offset?.top ?? 0);\n      const bottom =\n        scrollTop + target.clientHeight >=\n        target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n\n      const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';\n      const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';\n\n      const params = {\n        x: scrollLeft,\n        y: scrollTop,\n        directions: {\n          left: scrollLeft < scrollPositionRef.current.x,\n          right: scrollLeft > scrollPositionRef.current.x,\n          top: scrollTop < scrollPositionRef.current.y,\n          bottom: scrollTop > scrollPositionRef.current.y\n        },\n        arrived: {\n          left: isRowReverse ? right : left,\n          right: isRowReverse ? left : right,\n          top: isColumnReverse ? bottom : top,\n          bottom: isColumnReverse ? top : bottom\n        }\n      };\n\n      scrollPositionRef.current = { x: scrollLeft, y: scrollTop };\n      internalOptionsRef.current?.onScroll?.(params, event);\n    };\n\n    element.addEventListener('scroll', onScroll);\n    element.addEventListener('scrollend', onScrollEnd);\n\n    return () => {\n      element.removeEventListener('scroll', onScroll);\n      element.removeEventListener('scrollend', onScrollEnd);\n    };\n  }, [target, internalRef.state]);\n\n  if (target) return scrolling;\n  return {\n    ref: internalRef,\n    scrolling\n  };\n}) as UseScroll;\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","getElement","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse"],"mappings":";;;;AAUA,MAAMA,IAAiC,GAiH1BC,IAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IACJF,IACI,OAAOD,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,IACtB,OAAOA,EAAO,CAAC,KAAM,WACnBA,EAAO,CAAC,IACR,EAAE,UAAUA,EAAO,CAAC,EAAA,GAGtBI,IAAcC,EAAA,GACdC,IAAqBC,EAAOJ,CAAO;AACzC,EAAAG,EAAmB,UAAUH;AAE7B,QAAM,CAACK,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAoBJ,EAAO,EAAE,GAAG,GAAG,GAAG,GAAG;AAqE/C,SAnEAK,EAAU,MAAM;AACd,QAAI,CAACX,KAAU,CAACG,EAAY,MAAO;AACnC,UAAMS,IAAWZ,IAASa,EAAWb,CAAM,IAAIG,EAAY;AAE3D,QAAI,CAACS,EAAS;AAEd,UAAME,IAAc,CAACC,MAAiB;AACpC,MAAAP,EAAa,EAAK,GAClBN,GAAS,SAASa,CAAK;AAAA,IAAA,GAGnBC,IAAW,CAACD,MAAiB;AACjC,MAAAP,EAAa,EAAI;AACjB,YAAMR,IACJe,EAAM,WAAW,WAAYA,EAAM,OAAoB,kBAAkBA,EAAM,QAG3E,EAAE,SAAAE,GAAS,eAAAC,GAAe,WAAAC,EAAA,IAAcnB,EAAO,OAC/CoB,IAAsBD,MAAc,QAAQ,KAAK,GAEjDE,IAAarB,EAAO;AAC1B,UAAIsB,IAAYtB,EAAO;AACvB,MAAIA,aAAkB,YAAY,CAACsB,MAAWA,IAAY,OAAO,SAAS,KAAK;AAE/E,YAAMC,IAASlB,EAAmB,SAAS,QACrCmB,IAAOH,IAAaD,MAAwBG,GAAQ,QAAQ,IAC5DE,IACJJ,IAAaD,IAAsBpB,EAAO,eAC1CA,EAAO,eAAeuB,GAAQ,SAAS,KAAK1B,GACxC6B,IAAMJ,MAAcC,GAAQ,OAAO,IACnCI,IACJL,IAAYtB,EAAO,gBACnBA,EAAO,gBAAgBuB,GAAQ,UAAU,KAAK1B,GAE1C+B,IAAkBX,MAAY,UAAUC,MAAkB,kBAC1DW,IAAeZ,MAAY,UAAUC,MAAkB,kBAEvDnB,IAAS;AAAA,QACb,GAAGsB;AAAA,QACH,GAAGC;AAAA,QACH,YAAY;AAAA,UACV,MAAMD,IAAaX,EAAkB,QAAQ;AAAA,UAC7C,OAAOW,IAAaX,EAAkB,QAAQ;AAAA,UAC9C,KAAKY,IAAYZ,EAAkB,QAAQ;AAAA,UAC3C,QAAQY,IAAYZ,EAAkB,QAAQ;AAAA,QAAA;AAAA,QAEhD,SAAS;AAAA,UACP,MAAMmB,IAAeJ,IAAQD;AAAA,UAC7B,OAAOK,IAAeL,IAAOC;AAAA,UAC7B,KAAKG,IAAkBD,IAASD;AAAA,UAChC,QAAQE,IAAkBF,IAAMC;AAAA,QAAA;AAAA,MAClC;AAGF,MAAAjB,EAAkB,UAAU,EAAE,GAAGW,GAAY,GAAGC,EAAA,GAChDjB,EAAmB,SAAS,WAAWN,GAAQgB,CAAK;AAAA,IAAA;AAGtD,WAAAH,EAAQ,iBAAiB,UAAUI,CAAQ,GAC3CJ,EAAQ,iBAAiB,aAAaE,CAAW,GAE1C,MAAM;AACX,MAAAF,EAAQ,oBAAoB,UAAUI,CAAQ,GAC9CJ,EAAQ,oBAAoB,aAAaE,CAAW;AAAA,IAAA;AAAA,EACtD,GACC,CAACd,GAAQG,EAAY,KAAK,CAAC,GAE1BH,IAAeO,IACZ;AAAA,IACL,KAAKJ;AAAA,IACL,WAAAI;AAAA,EAAA;AAEJ;"}
+{"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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"}

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

@@ -1,36 +1,36 @@
-import { useEffect as h } from "react";
-import { useRefState as v } from "../useRefState/useRefState.mjs";
-import { isTarget as k } from "../../utils/helpers/isTarget.mjs";
-import { getElement as l } from "../../utils/helpers/getElement.mjs";
-const d = (...r) => {
-  const e = k(r[0]) ? r[0] : void 0, s = e ? r[1] : r[0], t = v(), {
-    behavior: f = "smooth",
-    block: u = "start",
-    inline: b = "nearest",
-    enabled: n = !0
-  } = s ?? {};
-  h(() => {
-    if (!n || !e && !t.state) return;
-    const o = e ? l(e) : t.current;
-    o && o.scrollIntoView({
-      behavior: f,
-      block: u,
-      inline: b
+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",
+    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;
+    n.current = r, r.scrollIntoView({
+      behavior: l,
+      block: s,
+      inline: f
     });
-  }, [e, t.state, n]);
-  const i = (o) => {
-    const c = e ? l(e) : t.current;
-    if (!c) return;
-    const { behavior: m, block: a, inline: g } = o ?? {};
-    c.scrollIntoView({
+  }, [e, o.state]);
+  const i = (r) => {
+    if (!n.current) return;
+    const { behavior: m, block: a, inline: b } = r ?? {};
+    n.current.scrollIntoView({
       behavior: m,
       block: a,
-      inline: g
+      inline: b
     });
   };
-  return e ? { trigger: i } : { ref: t, trigger: i };
+  return e ? { trigger: i } : { ref: o, trigger: i };
 };
 export {
-  d as useScrollIntoView
+  y 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 { useEffect } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { getElement, isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The scroll into view options type */\nexport interface UseScrollIntoViewOptions extends ScrollIntoViewOptions {\n  /** Whether to enable the scroll into view */\n  enabled?: 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 The target element to scroll into view\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 {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    enabled = true\n  } = options ?? {};\n\n  useEffect(() => {\n    if (!enabled) return;\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    element.scrollIntoView({\n      behavior,\n      block,\n      inline\n    });\n  }, [target, internalRef.state, enabled]);\n\n  const trigger = (params?: {\n    behavior?: ScrollBehavior;\n    block?: ScrollLogicalPosition;\n    inline?: ScrollLogicalPosition;\n  }) => {\n    const element = (target ? getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n\n    const { behavior, block, inline } = params ?? {};\n\n    element.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","enabled","useEffect","element","getElement","trigger"],"mappings":";;;;AA6DO,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,SAAAC,IAAU;AAAA,EAAA,IACRN,KAAW,CAAA;AAEf,EAAAO,EAAU,MAAM;AAEd,QADI,CAACD,KACD,CAACR,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMO,IAAWV,IAASW,EAAWX,CAAM,IAAIG,EAAY;AAC3D,IAAKO,KAELA,EAAQ,eAAe;AAAA,MACrB,UAAAL;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,IAAA,CACD;AAAA,EAAA,GACA,CAACP,GAAQG,EAAY,OAAOK,CAAO,CAAC;AAEvC,QAAMI,IAAU,CAACb,MAIX;AACJ,UAAMW,IAAWV,IAASW,EAAWX,CAAM,IAAIG,EAAY;AAC3D,QAAI,CAACO,EAAS;AAEd,UAAM,EAAE,UAAAL,GAAU,OAAAC,GAAO,QAAAC,MAAWR,KAAU,CAAA;AAE9C,IAAAW,EAAQ,eAAe;AAAA,MACrB,UAAAL;AAAAA,MACA,OAAAC;AAAAA,MACA,QAAAC;AAAAA,IAAA,CACD;AAAA,EAAA;AAGH,SAAIP,IAAe,EAAE,SAAAY,EAAA,IACd,EAAE,KAAKT,GAAa,SAAAS,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 { 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;"}

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

@@ -1,21 +1,21 @@
-import { useLayoutEffect as p } from "react";
+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 h } from "../../utils/helpers/isTarget.mjs";
-import { getElement as f } from "../../utils/helpers/getElement.mjs";
-const E = (...r) => {
-  const t = h(r[0]) ? r[0] : void 0, c = t ? r[1] : r[0], { x: s, y: u, behavior: l = "auto", enabled: m = !0 } = c ?? {}, e = v();
-  p(() => {
-    if (!m || !t && !e.state) return;
-    const o = t ? f(t) : e.current;
-    o && o.scrollTo({ top: u, left: s, behavior: l });
-  }, [t, e.state]);
-  const n = (o) => {
-    const i = t ? f(t) : e.current;
-    if (!i) return;
-    const { x: a, y: b, behavior: g } = o ?? {};
-    i.scrollTo({ left: a, top: b, behavior: g });
+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 });
+  }, [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 });
   };
-  return t ? { trigger: n } : { ref: e, trigger: n };
+  return t ? { trigger: i } : { ref: r, trigger: i };
 };
 export {
   E as useScrollTo

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollTo.mjs","sources":["../../../../src/hooks/useScrollTo/useScrollTo.ts"],"sourcesContent":["import { useLayoutEffect } 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 scroll to options type */\nexport interface UseScrollToOptions {\n  /** The scrolling behavior */\n  behavior?: ScrollBehavior;\n  /** Whether to enable the scroll to */\n  enabled?: 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 The target element for scrolling to\n * @param {UseScrollToOptions} [options] The scroll options\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 {UseScrollToOptions} [options] The scroll options\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', enabled = true } = options ?? {};\n  const internalRef = useRefState<Element>();\n\n  useLayoutEffect(() => {\n    if (!enabled) return;\n    if (!target && !internalRef.state) return;\n\n    const element = (target ? getElement(target) : internalRef.current) as Element;\n    if (!element) return;\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    const element = (target ? getElement(target) : internalRef.current) as Element;\n    if (!element) return;\n    const { x, y, behavior } = params ?? {};\n\n    element.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","enabled","internalRef","useRefState","useLayoutEffect","element","getElement","trigger"],"mappings":";;;;AA2DO,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,SAAAC,IAAU,OAASJ,KAAW,CAAA,GACzDK,IAAcC,EAAA;AAEpB,EAAAC,EAAgB,MAAM;AAEpB,QADI,CAACH,KACD,CAACN,KAAU,CAACO,EAAY,MAAO;AAEnC,UAAMG,IAAWV,IAASW,EAAWX,CAAM,IAAIO,EAAY;AAC3D,IAAKG,KAELA,EAAQ,SAAS,EAAE,KAAKN,GAAG,MAAMD,GAAG,UAAAE,GAAU;AAAA,EAAA,GAC7C,CAACL,GAAQO,EAAY,KAAK,CAAC;AAE9B,QAAMK,IAAU,CAACb,MAAiE;AAChF,UAAMW,IAAWV,IAASW,EAAWX,CAAM,IAAIO,EAAY;AAC3D,QAAI,CAACG,EAAS;AACd,UAAM,EAAE,GAAAP,GAAG,GAAAC,GAAG,UAAAC,MAAaN,KAAU,CAAA;AAErC,IAAAW,EAAQ,SAAS,EAAE,MAAMP,GAAG,KAAKC,GAAG,UAAAC,GAAU;AAAA,EAAA;AAGhD,SAAIL,IAAe,EAAE,SAAAY,EAAA,IACd,EAAE,KAAKL,GAAa,SAAAK,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 { 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;"}