npm - @siberiacancode/reactuse - Versions diffs - 0.3.7 → 0.3.9 - Mend

@siberiacancode/reactuse 0.3.7 → 0.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (179) hide show

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

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

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

	@@ -1 +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 { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The resize observer callback type /\nexport type UseResizeObserverCallback = (\n entry: ResizeObserverEntry,\n observer: ResizeObserver\n) => void;\n\n/* The resize observer options type /\nexport interface UseResizeObserverOptions extends ResizeObserverOptions {\n /* The enabled state of the resize observer /\n enabled?: boolean;\n /* The callback to execute when resize is detected /\n onChange?: UseResizeObserverCallback;\n}\n\n/* The resize observer return type /\nexport interface UseResizeObserverReturn {\n /* The resize observer entries /\n entry: ResizeObserverEntry;\n /* The resize observer instance /\n observer?: ResizeObserver;\n}\n\nexport interface UseResizeObserver {\n <Target extends Element>(\n options?: UseResizeObserverOptions,\n target?: never\n ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, options?: UseResizeObserverOptions): UseResizeObserverReturn;\n\n <Target extends Element>(\n callback: UseResizeObserverCallback,\n target?: never\n ): UseResizeObserverReturn & { ref: StateRef<Target> };\n\n (target: HookTarget, callback: UseResizeObserverCallback): UseResizeObserverReturn;\n}\n\n/\n @name useResizeObserver\n * @description - Hook that gives you resize observer state\n * @category Sensors\n * @usage low\n \n @browserapi ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\n \n @overload\n * @param {HookTarget} target The target element to observe\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n \n @example\n * const { entries, observer } = useResizeObserver(ref);\n \n @overload\n * @template Target The target element\n * @param {boolean} [options.enabled=true] The enabled state of the resize observer\n * @param {ResizeObserverBoxOptions} [options.box] The box model to observe\n * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n \n @example\n * const { ref, entry, observer } = useResizeObserver();\n \n @overload\n * @template Target The target element\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element\n \n @example\n * const { ref, entry, observer } = useResizeObserver((entry) => console.log(entry));\n \n @overload\n * @param {HookTarget} target The target element to observe\n * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected\n * @returns {UseResizeObserverReturn} An object containing the resize observer state\n \n @example\n * const { entry, observer } = useResizeObserver(ref, (entry) => console.log(entry));\n */\nexport const useResizeObserver = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onChange: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onChange: params[0] }\n ) as UseResizeObserverOptions \| undefined;\n\n const callback = options?.onChange;\n const enabled = options?.enabled ?? true;\n\n const [entry, setEntry] = useState<ResizeObserverEntry>();\n const [observer, setObserver] = useState<ResizeObserver>();\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n\n useEffect(() => {\n if (!enabled \|\| (!target && !internalRef.state)) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const observer = new ResizeObserver(([entry], observer) => {\n setEntry(entry);\n internalCallbackRef.current?.(entry, observer);\n });\n\n setObserver(observer);\n observer.observe(element as Element, options);\n\n return () => {\n observer.disconnect();\n };\n }, [target, ~~internalRef.state,~~ isTarget.~~getRefState~~(target), options?.box, enabled]);\n\n if (target) return { entry, observer };\n return {\n ref: internalRef,\n entry,\n observer\n };\n}) as UseResizeObserver;\n"],"names":["useResizeObserver","params","target","isTarget","options","callback","enabled","entry","setEntry","useState","observer","setObserver","internalRef","useRefState","internalCallbackRef","useRef","useEffect","element"],"mappings":";;;AA4FO,MAAMA,KAAqB,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,OAAOT,~~EAAS,~~YAAYD~~,CAAM,~~GAAGE~~,GAAS,KAAKE,CAAO,CAAC,~~GAE/EJ~~,IAAe,EAAE,OAAAK,GAAO,UAAAG,EAAA,IACrB;AAAA,IACL,KAAKE;AAAA,IACL,OAAAL;AAAA,IACA,UAAAG;AAAA,EAAA;AAEJ;"}
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 { 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 && isTarget.getRawElement(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,KAAqB,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,KAAUC,EAAS,cAAcD,CAAM,GAAGU,EAAY,OAAOR,GAAS,KAAKE,CAAO,CAAC,GAEnFJ,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 CHANGED Viewed

@@ -2,10 +2,10 @@ import { useRef as h, useEffect as m } from "react";
 import { useRefState as v } from "../useRefState/useRefState.mjs";
 import { isTarget as i } from "../../utils/helpers/isTarget.mjs";
 const g = ((...r) => {
-  const e = i(r[0]) ? r[0] : void 0, f = e ? r[1] : r[0], l = e ? r[2] : r[1], c = v(), s = h(f);
-  s.current = f;
-  const u = h(l);
-  if (u.current = l, m(() => {
+  const e = i(r[0]) ? r[0] : void 0, l = e ? r[1] : r[0], f = e ? r[2] : r[1], c = v(), s = h(l);
+  s.current = l;
+  const u = h(f);
+  if (u.current = f, m(() => {
     if (!e && !c.state) return;
     const n = e ? i.getElement(e) : c.current;
     if (!n) return;
@@ -26,7 +26,7 @@ const g = ((...r) => {
     return n.addEventListener("contextmenu", a), n.addEventListener("touchstart", E), n.addEventListener("touchend", d), () => {
       n.removeEventListener("contextmenu", a), n.removeEventListener("touchstart", E), n.removeEventListener("touchend", d);
     };
-  }, [e, c.state, i.getRefState(e)]), !e)
+  }, [e && i.getRawElement(e), c.state]), !e)
     return c;
 });
 export {

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

	@@ -1 +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 { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nexport type RightClickEvent = MouseEvent \| TouchEvent;\nexport interface RightClickPositions {\n x: number;\n y: number;\n}\n\nexport interface UseRightClickOptions {\n // * The callback function to be invoked on right click end\n onEnd?: (event: RightClickEvent) => void;\n // * The callback function to be invoked on right click start\n onStart?: (event: RightClickEvent) => void;\n}\n\nexport interface UseRightClick {\n (target: HookTarget, callback: (event: Event) => void, options?: UseRightClickOptions): void;\n\n <Target extends Element>(\n callback: (positions: RightClickPositions, event: Event) => void,\n options?: UseRightClickOptions,\n target?: never\n ): StateRef<Target>;\n}\n\n/*\n @name useRightClick\n * @description - Hook that handles right-click events and long press on mobile devices\n * @category Elements\n * @usage low\n \n @overload\n * @param {HookTarget} target The target element for right-click handling\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {void}\n \n @example\n * useRightClick(ref, () => console.log('clicked'));\n \n @overload\n * @template Target The target element\n * @param {(event: RightClickEvents) => void} callback The callback function to be invoked on right click\n * @returns {StateRef<Target>} Ref to attach to the element\n \n @example\n * const ref = useRightClick(() => console.log('clicked'));\n */\nexport const useRightClick = ((...params: any[]): any => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const callback = (target ? params[1] : params[0]) as (\n positions: RightClickPositions,\n event: RightClickEvent\n ) => void;\n const options = (target ? params[2] : params[1]) as UseRightClickOptions;\n\n const internalRef = useRefState<Element>();\n const internalCallbackRef = useRef(callback);\n internalCallbackRef.current = callback;\n const internalOptionsRef = useRef(options);\n internalOptionsRef.current = options;\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = target ? isTarget.getElement(target) : internalRef.current;\n if (!element) return;\n\n const onContextMenu = (event: RightClickEvent) => {\n event.preventDefault();\n internalOptionsRef.current?.onStart?.(event);\n const mouseEvent = event as MouseEvent;\n internalCallbackRef.current({ x: mouseEvent.clientX, y: mouseEvent.clientY }, event);\n };\n\n const onTouchStart = (event: RightClickEvent) => {\n event.preventDefault();\n internalOptionsRef.current?.onStart?.(event);\n const touchEvent = event as TouchEvent;\n internalCallbackRef.current(\n { x: touchEvent.touches[0].clientX, y: touchEvent.touches[0].clientY },\n event\n );\n };\n\n const onTouchEnd = (event: RightClickEvent) => {\n event.preventDefault();\n internalOptionsRef.current?.onEnd?.(event);\n };\n\n element.addEventListener('contextmenu', onContextMenu as EventListener);\n\n element.addEventListener('touchstart', onTouchStart as EventListener);\n element.addEventListener('touchend', onTouchEnd as EventListener);\n\n return () => {\n element.removeEventListener('contextmenu', onContextMenu as EventListener);\n\n element.removeEventListener('touchstart', onTouchStart as EventListener);\n element.removeEventListener('touchend', onTouchEnd as EventListener);\n };\n }, [target, ~~internalRef.state,~~ isTarget.~~getRefState~~(target)]);\n\n if (target) return;\n return internalRef;\n}) as UseRightClick;\n"],"names":["useRightClick","params","target","isTarget","callback","options","internalRef","useRefState","internalCallbackRef","useRef","internalOptionsRef","useEffect","element","onContextMenu","event","mouseEvent","onTouchStart","touchEvent","onTouchEnd"],"mappings":";;;AAuDO,MAAMA,KAAiB,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,OAAOH,~~EAAS,~~YAAYD~~,CAAM,~~CAAC~~,CAAC,~~GAExD~~,~~CAAAA~~;AACJ,WAAOI;AACT;"}
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 { 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 && isTarget.getRawElement(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,KAAiB,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,KAAUC,EAAS,cAAcD,CAAM,GAAGI,EAAY,KAAK,CAAC,GAE5D,CAAAJ;AACJ,WAAOI;AACT;"}

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

@@ -1,10 +1,10 @@
-import { useRef as p, useState as A, useEffect as O } from "react";
+import { useRef as E, useState as A, useEffect as O } from "react";
 import { useRefState as P } from "../useRefState/useRefState.mjs";
 import { isTarget as R } from "../../utils/helpers/isTarget.mjs";
 const V = 1, M = ((...o) => {
-  const c = R(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(), S = p(g), f = p(null);
-  S.current = g;
-  const [E, v] = A(!1), u = p({ x: 0, y: 0 });
+  const c = R(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 = E(g), f = E(null);
+  p.current = g;
+  const [S, v] = A(!1), u = E({ x: 0, y: 0 });
   O(() => {
     if (!c && !d.state) return;
     const e = (c ? R.getElement(c) : d.current) ?? window;
@@ -16,7 +16,7 @@ const V = 1, M = ((...o) => {
       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 = S.current?.offset, T = i * x <= (m?.left ?? 0), L = i * x + r.clientWidth >= r.scrollWidth - (m?.right ?? 0) - V, w = n <= (m?.top ?? 0), D = n + r.clientHeight >= r.scrollHeight - (m?.bottom ?? 0) - V, H = b === "flex" && h === "column-reverse", I = b === "flex" && h === "column-reverse", j = {
+      const m = p.current?.offset, T = i * x <= (m?.left ?? 0), w = i * x + r.clientWidth >= r.scrollWidth - (m?.right ?? 0) - V, L = n <= (m?.top ?? 0), D = n + r.clientHeight >= r.scrollHeight - (m?.bottom ?? 0) - V, H = b === "flex" && h === "column-reverse", I = b === "flex" && h === "column-reverse", j = {
         x: i,
         y: n,
         directions: {
@@ -26,18 +26,18 @@ const V = 1, M = ((...o) => {
           bottom: n > u.current.y
         },
         arrived: {
-          left: I ? L : T,
-          right: I ? T : L,
-          top: H ? D : w,
-          bottom: H ? w : D
+          left: I ? w : T,
+          right: I ? T : w,
+          top: H ? D : L,
+          bottom: H ? L : D
         }
       };
-      u.current = { x: i, y: n }, S.current?.onScroll?.(j, 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);
     };
-  }, [c, d.state, R.getRefState(c)]);
+  }, [c && R.getRawElement(c), d.state]);
   const y = (e) => {
     if (!f.current) return;
     const { behavior: l, block: s, inline: t } = e ?? {};
@@ -51,9 +51,9 @@ const V = 1, M = ((...o) => {
     const { x: l, y: s, behavior: t } = e ?? {};
     f.current.scrollTo({ left: l, top: s, behavior: t });
   };
-  return c ? { scrollIntoView: y, scrollTo: a, scrolling: E } : {
+  return c ? { scrollIntoView: y, scrollTo: a, scrolling: S } : {
     ref: d,
-    scrolling: E,
+    scrolling: S,
     scrollIntoView: y,
     scrollTo: a
   };

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

	@@ -1 +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 { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\nconst ARRIVED_STATE_THRESHOLD_PIXELS = 1;\n\nexport interface UseScrollOptions {\n /** The on scroll callback /\n onScroll?: (params: UseScrollCallbackParams, event: Event) => void;\n\n /* The on end scroll callback /\n onStop?: (event: Event) => void;\n\n /* Offset arrived states by x pixels. /\n offset?: {\n left?: number;\n right?: number;\n top?: number;\n bottom?: number;\n };\n}\n\nexport interface UseScrollCallbackParams {\n /* The element x position /\n x: number;\n /* The element y position /\n y: number;\n /* State of scroll arrived /\n arrived: {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n };\n /* State of scroll direction /\n directions: {\n left: boolean;\n right: boolean;\n top: boolean;\n bottom: boolean;\n };\n}\n\n/* The scroll into view params type /\nexport interface ScrollIntoViewParams {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n}\n/* The scroll to params type /\nexport interface ScrollToParams {\n behavior?: ScrollBehavior;\n x: number;\n y: number;\n}\n\n/* The use scroll return type /\nexport interface UseScrollReturn {\n /* The state of scrolling /\n scrolling: boolean;\n /* Function to scroll element into view /\n scrollIntoView: (params?: ScrollIntoViewParams) => void;\n /* Function to scroll element to a specific position /\n scrollTo: (params?: ScrollToParams) => void;\n}\n\nexport interface UseScroll {\n (\n target?: HookTarget,\n callback?: (params: UseScrollCallbackParams, event: Event) => void\n ): UseScrollReturn;\n\n (target?: HookTarget, options?: UseScrollOptions): UseScrollReturn;\n\n <Target extends Element>(\n callback?: (params: UseScrollCallbackParams, event: Event) => void,\n target?: never\n ): UseScrollReturn & { ref: StateRef<Target> };\n\n <Target extends Element>(\n options?: UseScrollOptions,\n target?: never\n ): UseScrollReturn & {\n ref: StateRef<Target>;\n };\n}\n\n/\n @name useScroll\n * @description - Hook that allows you to control scroll a element\n * @category Sensors\n * @usage low\n \n @overload\n * @template Target The target element\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0] The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {UseScrollReturn} The state of scrolling\n \n @example\n * const { scrolling, scrollIntoView, scrollTo} = useScroll(ref, options);\n \n @overload\n * @template Target The target element\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {UseScrollReturn} The state of scrolling\n \n @example\n * const { scrolling, scrollIntoView, scrollTo} = useScroll(ref, () => console.log('callback'));\n \n @overload\n * @template Target The target element\n * @param {Target} [target=window] The target element to scroll\n * @param {ScrollBehavior} [options.behavior=auto] The behavior of scrolling\n * @param {number} [options.offset.left=0] The left offset for arrived states\n * @param {number} [options.offset.right=0] The right offset for arrived states\n * @param {number} [options.offset.top=0] The top offset for arrived states\n * @param {number} [options.offset.bottom=0] The bottom offset for arrived states\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [options.onScroll] The callback function to be invoked on scroll\n * @param {(event: Event) => void} [options.onStop] The callback function to be invoked on scroll end\n * @returns {UseScrollReturn & { ref: StateRef<Target> }} The state of scrolling\n \n @example\n * const { ref, scrolling, scrollIntoView, scrollTo} = useScroll(options);\n \n @overload\n * @template Target The target element\n * @param {Target} target The target element to scroll\n * @param {(params: UseScrollCallbackParams, event: Event) => void} [callback] The callback function to be invoked on scroll\n * @returns {UseScrollReturn & { ref: StateRef<Target> }} The state of scrolling\n \n @example\n * const { ref, scrolling, scrollIntoView, scrollTo} = useScroll(() => console.log('callback'));\n /\nexport const useScroll = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (\n target\n ? typeof params[1] === 'object'\n ? params[1]\n : { onScroll: params[1] }\n : typeof params[0] === 'object'\n ? params[0]\n : { onScroll: params[0] }\n ) as UseScrollOptions \| undefined;\n\n const internalRef = useRefState<Element>();\n const internalOptionsRef = useRef(options);\n const elementRef = useRef<Element>(null);\n internalOptionsRef.current = options;\n\n const [scrolling, setScrolling] = useState(false);\n const scrollPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n elementRef.current = element;\n\n const onScrollEnd = (event: Event) => {\n setScrolling(false);\n options?.onStop?.(event);\n };\n\n const onScroll = (event: Event) => {\n setScrolling(true);\n const target = (\n event.target === document ? (event.target as Document).documentElement : event.target\n ) as HTMLElement;\n\n const { display, flexDirection, direction } = target.style;\n const directionMultiplier = direction === 'rtl' ? -1 : 1;\n\n const scrollLeft = target.scrollLeft;\n let scrollTop = target.scrollTop;\n if (target instanceof Document && !scrollTop) scrollTop = window.document.body.scrollTop;\n\n const offset = internalOptionsRef.current?.offset;\n const left = scrollLeft directionMultiplier <= (offset?.left ?? 0);\n const right =\n scrollLeft * directionMultiplier + target.clientWidth >=\n target.scrollWidth - (offset?.right ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n const top = scrollTop <= (offset?.top ?? 0);\n const bottom =\n scrollTop + target.clientHeight >=\n target.scrollHeight - (offset?.bottom ?? 0) - ARRIVED_STATE_THRESHOLD_PIXELS;\n\n const isColumnReverse = display === 'flex' && flexDirection === 'column-reverse';\n const isRowReverse = display === 'flex' && flexDirection === 'column-reverse';\n\n const params = {\n x: scrollLeft,\n y: scrollTop,\n directions: {\n left: scrollLeft < scrollPositionRef.current.x,\n right: scrollLeft > scrollPositionRef.current.x,\n top: scrollTop < scrollPositionRef.current.y,\n bottom: scrollTop > scrollPositionRef.current.y\n },\n arrived: {\n left: isRowReverse ? right : left,\n right: isRowReverse ? left : right,\n top: isColumnReverse ? bottom : top,\n bottom: isColumnReverse ? top : bottom\n }\n };\n\n scrollPositionRef.current = { x: scrollLeft, y: scrollTop };\n internalOptionsRef.current?.onScroll?.(params, event);\n };\n\n element.addEventListener('scroll', onScroll);\n element.addEventListener('scrollend', onScrollEnd);\n\n return () => {\n element.removeEventListener('scroll', onScroll);\n element.removeEventListener('scrollend', onScrollEnd);\n };\n }, [target, internalRef.state, isTarget.getRefState(target)]);\n\n const scrollIntoView = (params?: {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n }) => {\n if (!elementRef.current) return;\n\n const { behavior, block, inline } = params ?? {};\n\n elementRef.current.scrollIntoView({\n behavior,\n block,\n inline\n });\n };\n\n const scrollTo = (params?: { x: number; y: number; behavior?: ScrollBehavior }) => {\n if (!elementRef.current) return;\n\n const { x, y, behavior } = params ?? {};\n\n elementRef.current.scrollTo({ left: x, top: y, behavior });\n };\n\n if (target) return { scrollIntoView, scrollTo, scrolling };\n return {\n ref: internalRef,\n scrolling,\n scrollIntoView,\n scrollTo\n };\n}) as UseScroll;\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","elementRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse","scrollIntoView","behavior","block","inline","scrollTo","x","y"],"mappings":"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"}
1	+ {"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 && isTarget.getRawElement(target), internalRef.state]);\n\n const scrollIntoView = (params?: {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n }) => {\n if (!elementRef.current) return;\n\n const { behavior, block, inline } = params ?? {};\n\n elementRef.current.scrollIntoView({\n behavior,\n block,\n inline\n });\n };\n\n const scrollTo = (params?: { x: number; y: number; behavior?: ScrollBehavior }) => {\n if (!elementRef.current) return;\n\n const { x, y, behavior } = params ?? {};\n\n elementRef.current.scrollTo({ left: x, top: y, behavior });\n };\n\n if (target) return { scrollIntoView, scrollTo, scrolling };\n return {\n ref: internalRef,\n scrolling,\n scrollIntoView,\n scrollTo\n };\n}) as UseScroll;\n"],"names":["ARRIVED_STATE_THRESHOLD_PIXELS","useScroll","params","target","isTarget","options","internalRef","useRefState","internalOptionsRef","useRef","elementRef","scrolling","setScrolling","useState","scrollPositionRef","useEffect","element","onScrollEnd","event","onScroll","display","flexDirection","direction","directionMultiplier","scrollLeft","scrollTop","offset","left","right","top","bottom","isColumnReverse","isRowReverse","scrollIntoView","behavior","block","inline","scrollTo","x","y"],"mappings":"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"}

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

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

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

	@@ -1 +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 { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The scroll into view options type /\nexport interface UseScrollIntoViewOptions extends ScrollIntoViewOptions {\n /* Whether to immediately the scroll into view /\n immediately?: boolean;\n}\n\n/* The scroll into view return type /\nexport interface UseScrollIntoViewReturn {\n /* Function to scroll element into view /\n trigger: (params?: {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n }) => void;\n}\n\nexport interface UseScrollIntoView {\n <Target extends Element>(\n options?: UseScrollIntoViewOptions,\n target?: never\n ): UseScrollIntoViewReturn & { ref: StateRef<Target> };\n\n (target?: HookTarget, options?: UseScrollIntoViewOptions): UseScrollIntoViewReturn;\n}\n\n/\n @name useScrollIntoView\n * @description - Hook that provides functionality to scroll an element into view\n * @category Sensors\n * @usage low\n \n @overload\n * @param {HookTarget} [target=window] The target element to scroll into view\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {ScrollBehavior} [options.behavior='smooth'] The scrolling behavior\n * @param {ScrollLogicalPosition} [options.block='start'] The vertical alignment\n * @param {ScrollLogicalPosition} [options.inline='nearest'] The horizontal alignment\n * @returns {UseScrollIntoViewReturn} Object containing scroll function\n \n @example\n * const { trigger } = useScrollIntoView(ref);\n \n @overload\n * @template Target The target element\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {ScrollBehavior} [options.behavior='smooth'] The scrolling behavior\n * @param {ScrollLogicalPosition} [options.block='start'] The vertical alignment\n * @param {ScrollLogicalPosition} [options.inline='nearest'] The horizontal alignment\n * @returns {UseScrollIntoViewReturn & { ref: StateRef<Target> }} Object containing scroll function and ref\n \n @example\n * const { ref, trigger } = useScrollIntoView<HTMLDivElement>();\n */\nexport const useScrollIntoView = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (target ? params[1] : params[0]) as UseScrollIntoViewOptions \| undefined;\n\n const internalRef = useRefState<Element>();\n const {\n behavior = 'smooth',\n block = 'start',\n inline = 'nearest',\n immediately = true\n } = options ?? {};\n const elementRef = useRef<Element>(null);\n\n useIsomorphicLayoutEffect(() => {\n if (!immediately) return;\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n elementRef.current = element;\n\n element.scrollIntoView({\n behavior,\n block,\n inline\n });\n }, [target, ~~internalRef.state,~~ isTarget.~~getRefState~~(target)]);\n\n const trigger = (params?: {\n behavior?: ScrollBehavior;\n block?: ScrollLogicalPosition;\n inline?: ScrollLogicalPosition;\n }) => {\n if (!elementRef.current) return;\n\n const { behavior, block, inline } = params ?? {};\n\n elementRef.current.scrollIntoView({\n behavior,\n block,\n inline\n });\n };\n\n if (target) return { trigger };\n return { ref: internalRef, trigger };\n}) as UseScrollIntoView;\n"],"names":["useScrollIntoView","params","target","isTarget","options","internalRef","useRefState","behavior","block","inline","immediately","elementRef","useRef","useIsomorphicLayoutEffect","element","trigger"],"mappings":";;;;AAgEO,MAAMA,KAAqB,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,OAAOF,~~EAAS,~~YAAYD~~,CAAM,~~CAAC~~,CAAC;~~AAE5D~~,~~QAAMa~~,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;"}
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 { 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 && isTarget.getRawElement(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,KAAqB,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,KAAUC,EAAS,cAAcD,CAAM,GAAGG,EAAY,KAAK,CAAC;AAEhE,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 CHANGED Viewed

@@ -8,7 +8,7 @@ const d = ((...e) => {
     if (!m || !t && !r.state) return;
     const o = (t ? i.getElement(t) : r.current) ?? window;
     n.current = o, o.scrollTo({ top: u, left: s, behavior: l });
-  }, [t, r.state, i.getRefState(t)]);
+  }, [t && i.getRawElement(t), r.state]);
   const c = (o) => {
     if (!n.current) return;
     const { x: a, y: g, behavior: p } = o ?? {};

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

	@@ -1 +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 { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use scroll to options type /\nexport interface UseScrollToOptions {\n /* The scrolling behavior /\n behavior?: ScrollBehavior;\n /* Whether to immediately the scroll to /\n immediately?: boolean;\n /* The horizontal position to scroll to /\n x: number;\n /* The vertical position to scroll to /\n y: number;\n}\n\n/* The use scroll to return type /\nexport interface UseScrollToReturn {\n /* The state of scrolling /\n trigger: (params?: { x: number; y: number; behavior?: ScrollBehavior }) => void;\n}\n\nexport interface UseScrollTo {\n <Target extends Element>(\n options?: UseScrollToOptions,\n target?: never\n ): UseScrollToReturn & { ref: StateRef<Target> };\n\n (target?: HookTarget, options?: UseScrollToOptions): UseScrollToReturn;\n}\n\n/\n @name useScrollTo\n * @description - Hook for scrolling to a specific element\n * @category Sensors\n * @usage low\n \n @overload\n * @param {HookTarget} [target=window] The target element for scrolling to\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {number} [options.x] The horizontal position to scroll to\n * @param {number} [options.y] The vertical position to scroll to\n * @param {ScrollBehavior} [options.behavior=auto] The scrolling behavior\n * @returns {UseScrollToReturn} The scroll trigger function\n \n @example\n * const trigger = useScrollTo(ref, options);\n \n @overload\n * @template Target The target element\n * @param {boolean} [options.immediately=true] Whether to scroll immediately\n * @param {number} [options.x] The horizontal position to scroll to\n * @param {number} [options.y] The vertical position to scroll to\n * @param {ScrollBehavior} [options.behavior=auto] The scrolling behavior\n * @returns {UseScrollToReturn & { ref: StateRef<Target> }} The scroll trigger function and ref\n \n @example\n * const { ref, trigger } = useScrollTo(options);\n */\nexport const useScrollTo = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (target ? params[1] : params[0]) as UseScrollToOptions \| undefined;\n const { x, y, behavior = 'auto', immediately = true } = options ?? {};\n const internalRef = useRefState<Element>();\n const elementRef = useRef<Element>(null);\n\n useIsomorphicLayoutEffect(() => {\n if (!immediately) return;\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ?? window;\n\n elementRef.current = element;\n\n element.scrollTo({ top: y, left: x, behavior });\n }, [target, ~~internalRef.state,~~ isTarget.~~getRefState~~(target)]);\n\n const trigger = (params?: { x: number; y: number; behavior?: ScrollBehavior }) => {\n if (!elementRef.current) return;\n\n const { x, y, behavior } = params ?? {};\n\n elementRef.current.scrollTo({ left: x, top: y, behavior });\n };\n\n if (target) return { trigger };\n return { ref: internalRef, trigger };\n}) as UseScrollTo;\n"],"names":["useScrollTo","params","target","isTarget","options","x","y","behavior","immediately","internalRef","useRefState","elementRef","useRef","useIsomorphicLayoutEffect","element","trigger"],"mappings":";;;;AAkEO,MAAMA,KAAe,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,OAAON,~~EAAS,~~YAAYD~~,CAAM,~~CAAC~~,CAAC;~~AAE5D~~,~~QAAMa~~,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;"}
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 { 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 && isTarget.getRawElement(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,KAAe,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,KAAUC,EAAS,cAAcD,CAAM,GAAGO,EAAY,KAAK,CAAC;AAEhE,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/useSize/useSize.mjs ADDED Viewed

@@ -0,0 +1,31 @@
+import { useState as c } from "react";
+import { useIsomorphicLayoutEffect as l } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { useRefState as v } from "../useRefState/useRefState.mjs";
+import { isTarget as h } from "../../utils/helpers/isTarget.mjs";
+const z = ((...u) => {
+  const e = u[0], [n, o] = c({ width: 0, height: 0 }), [s, g] = c(), r = v();
+  return l(() => {
+    const t = e ? h.getElement(e) : r.current;
+    if (!t) return;
+    const { width: m, height: f } = t.getBoundingClientRect();
+    o({
+      width: m,
+      height: f
+    });
+    const i = new ResizeObserver(() => {
+      const { width: a, height: d } = t.getBoundingClientRect();
+      o({ width: a, height: d });
+    });
+    return g(i), i.observe(t), () => {
+      i.disconnect();
+    };
+  }, [r.state, e && h.getRawElement(e)]), e ? { observer: s, value: n } : {
+    observer: s,
+    ref: r,
+    value: n
+  };
+});
+export {
+  z as useSize
+};
+//# sourceMappingURL=useSize.mjs.map

package/dist/esm/hooks/useSize/useSize.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSize.mjs","sources":["../../../../src/hooks/useSize/useSize.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The size value type */\nexport interface UseSizeValue {\n /** The element's height */\n height: number;\n /** The element's width */\n width: number;\n}\n\n/** The use size return type */\nexport interface UseSizeReturn {\n /** The resize observer instance */\n observer?: ResizeObserver;\n /** The current size value */\n value: UseSizeValue;\n}\n\nexport interface UseSize {\n (target: HookTarget): UseSizeReturn;\n\n <Target extends Element>(\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseSizeReturn;\n}\n\n/**\n * @name useSize\n * @description - Hook that observes and returns the width and height of element\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element to observe\n * @returns {UseSizeReturn} An object containing the resize observer, current width and height of the element\n *\n * @example\n * const { value, observer } = useSize(ref);\n *\n * @overload\n * @template Target The target element type\n * @returns { { ref: StateRef<Target> } & UseSizeReturn } An object containing the resize observer, current width and height of the element\n *\n * @example\n * const { ref, value, observer } = useSize();\n */\nexport const useSize = ((...params: any[]) => {\n const target = params[0] as HookTarget | undefined;\n const [size, setSize] = useState({ width: 0, height: 0 });\n const [observer, setObserver] = useState<ResizeObserver>();\n const internalRef = useRefState<Element>();\n\n useIsomorphicLayoutEffect(() => {\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const { width, height } = element.getBoundingClientRect();\n setSize({\n width,\n height\n });\n\n const observer = new ResizeObserver(() => {\n const { width, height } = element.getBoundingClientRect();\n setSize({ width, height });\n });\n\n setObserver(observer);\n observer.observe(element);\n\n return () => {\n observer.disconnect();\n };\n }, [internalRef.state, target && isTarget.getRawElement(target)]);\n\n if (target) return { observer, value: size };\n return {\n observer,\n ref: internalRef,\n value: size\n };\n}) as UseSize;\n"],"names":["useSize","params","target","size","setSize","useState","observer","setObserver","internalRef","useRefState","useIsomorphicLayoutEffect","element","isTarget","width","height"],"mappings":";;;;AAyDO,MAAMA,KAAW,IAAIC,MAAkB;AAC5C,QAAMC,IAASD,EAAO,CAAC,GACjB,CAACE,GAAMC,CAAO,IAAIC,EAAS,EAAE,OAAO,GAAG,QAAQ,GAAG,GAClD,CAACC,GAAUC,CAAW,IAAIF,EAAA,GAC1BG,IAAcC,EAAA;AA0BpB,SAxBAC,EAA0B,MAAM;AAC9B,UAAMC,IAAWT,IAASU,EAAS,WAAWV,CAAM,IAAIM,EAAY;AAEpE,QAAI,CAACG,EAAS;AAEd,UAAM,EAAE,OAAAE,GAAO,QAAAC,MAAWH,EAAQ,sBAAA;AAClC,IAAAP,EAAQ;AAAA,MACN,OAAAS;AAAA,MACA,QAAAC;AAAA,IAAA,CACD;AAED,UAAMR,IAAW,IAAI,eAAe,MAAM;AACxC,YAAM,EAAE,OAAAO,GAAO,QAAAC,EAAAA,IAAWH,EAAQ,sBAAA;AAClC,MAAAP,EAAQ,EAAE,OAAAS,GAAO,QAAAC,GAAQ;AAAA,IAAA,CAC1B;AAED,WAAAP,EAAYD,CAAQ,GACpBA,EAAS,QAAQK,CAAO,GAEjB,MAAM;AACXL,MAAAA,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACE,EAAY,OAAON,KAAUU,EAAS,cAAcV,CAAM,CAAC,CAAC,GAE5DA,IAAe,EAAE,UAAAI,GAAU,OAAOH,EAAA,IAC/B;AAAA,IACL,UAAAG;AAAA,IACA,KAAKE;AAAA,IACL,OAAOL;AAAA,EAAA;AAEX;"}

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

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

package/dist/esm/hooks/useSticky/useSticky.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSticky.mjs","sources":["../../../../src/hooks/useSticky/useSticky.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use sticky return type /\nexport interface UseStickyReturn {\n stuck: boolean;\n}\n\n/* The use sticky axis type /\nexport type UseStickyAxis = 'horizontal' \| 'vertical';\n\n/* The use sticky options type /\nexport interface UseStickyOptions {\n axis?: UseStickyAxis;\n root?: HookTarget;\n}\n\nexport interface UseSticky {\n (target: HookTarget, options?: UseStickyOptions): boolean;\n\n <Target extends Element>(\n options?: UseStickyOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseStickyReturn;\n}\n\n/\n @name UseSticky\n * @description - Hook that allows you to detect that your sticky component is stuck\n * @category Elements\n * @usage low\n \n @overload\n * @param {HookTarget} target The target sticky element\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {UseStickyReturn} The state of the sticky\n \n @example\n * const stuck = useSticky(ref);\n \n @overload\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {{ stickyRef: StateRef<Target> } & UseStickyReturn} The state of the sticky\n \n @example\n * const { stuck, ref } = useSticky();\n */\nexport const useSticky = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (target ? params[1] : params[0]) as UseStickyOptions;\n const axis = options?.axis ?? 'vertical';\n\n const internalRef = useRefState<Element>();\n const [stuck, setStuck] = useState(false);\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const root = (options?.root ? isTarget.getElement(options.root) : document) as Element;\n const elementOffsetTop =\n element.getBoundingClientRect().top + root.scrollTop - root.getBoundingClientRect().top;\n const elementOffsetLeft =\n element.getBoundingClientRect().left + root.scrollLeft - root.getBoundingClientRect().left;\n\n const onSticky = () => {\n if (axis === 'vertical') {\n const scrollTop = root.scrollTop;\n setStuck(scrollTop >= elementOffsetTop);\n }\n\n if (axis === 'horizontal') {\n const scrollLeft = root.scrollLeft;\n setStuck(scrollLeft >= elementOffsetLeft);\n }\n };\n\n root.addEventListener('scroll', onSticky);\n window.addEventListener('resize', onSticky);\n window.addEventListener('orientationchange', onSticky);\n\n onSticky();\n\n return () => {\n root.removeEventListener('scroll', onSticky);\n window.removeEventListener('resize', onSticky);\n window.removeEventListener('orientationchange', onSticky);\n };\n }, [target, ~~internalRef.state,~~ isTarget.~~getRefState~~(target), axis, options?.root]);\n\n if (target) return stuck;\n return {\n stuck,\n ref: internalRef\n };\n}) as UseSticky;\n"],"names":["useSticky","params","target","isTarget","options","axis","internalRef","useRefState","stuck","setStuck","useState","useEffect","element","root","elementOffsetTop","elementOffsetLeft","onSticky","scrollTop","scrollLeft"],"mappings":";;;AA0DO,MAAMA,KAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAOD,GAAS,QAAQ,YAExBE,IAAcC,EAAA,GACd,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAwCxC,SAtCAC,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAWV,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AAEpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAQT,GAAS,OAAOD,EAAS,WAAWC,EAAQ,IAAI,IAAI,UAC5DU,IACJF,EAAQ,wBAAwB,MAAMC,EAAK,YAAYA,EAAK,sBAAA,EAAwB,KAChFE,IACJH,EAAQ,wBAAwB,OAAOC,EAAK,aAAaA,EAAK,sBAAA,EAAwB,MAElFG,IAAW,MAAM;AACrB,UAAIX,MAAS,YAAY;AACvB,cAAMY,IAAYJ,EAAK;AACvB,QAAAJ,EAASQ,KAAaH,CAAgB;AAAA,MAAA;AAGxC,UAAIT,MAAS,cAAc;AACzB,cAAMa,IAAaL,EAAK;AACxB,QAAAJ,EAASS,KAAcH,CAAiB;AAAA,MAAA;AAAA,IAC1C;AAGF,WAAAF,EAAK,iBAAiB,UAAUG,CAAQ,GACxC,OAAO,iBAAiB,UAAUA,CAAQ,GAC1C,OAAO,iBAAiB,qBAAqBA,CAAQ,GAErDA,EAAA,GAEO,MAAM;AACX,MAAAH,EAAK,oBAAoB,UAAUG,CAAQ,GAC3C,OAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,qBAAqBA,CAAQ;AAAA,IAAA;AAAA,EAC1D,GACC,CAACd,~~GAAQI~~,~~EAAY,OAAOH,~~EAAS,~~YAAYD~~,CAAM,~~GAAGG~~,GAAMD,GAAS,IAAI,CAAC,~~GAE7EF~~,IAAeM,IACZ;AAAA,IACL,OAAAA;AAAA,IACA,KAAKF;AAAA,EAAA;AAET;"}
1	+ {"version":3,"file":"useSticky.mjs","sources":["../../../../src/hooks/useSticky/useSticky.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use sticky return type /\nexport interface UseStickyReturn {\n stuck: boolean;\n}\n\n/* The use sticky axis type /\nexport type UseStickyAxis = 'horizontal' \| 'vertical';\n\n/* The use sticky options type /\nexport interface UseStickyOptions {\n axis?: UseStickyAxis;\n root?: HookTarget;\n}\n\nexport interface UseSticky {\n (target: HookTarget, options?: UseStickyOptions): boolean;\n\n <Target extends Element>(\n options?: UseStickyOptions,\n target?: never\n ): {\n ref: StateRef<Target>;\n } & UseStickyReturn;\n}\n\n/\n @name UseSticky\n * @description - Hook that allows you to detect that your sticky component is stuck\n * @category Elements\n * @usage low\n \n @overload\n * @param {HookTarget} target The target sticky element\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {UseStickyReturn} The state of the sticky\n \n @example\n * const stuck = useSticky(ref);\n \n @overload\n * @param {UseStickyAxis} [options.axis='vertical'] The axis of motion of the sticky component\n * @param {UseStickyRoot} [options.root=document] The element that contains your sticky component\n * @returns {{ stickyRef: StateRef<Target> } & UseStickyReturn} The state of the sticky\n \n @example\n * const { stuck, ref } = useSticky();\n */\nexport const useSticky = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const options = (target ? params[1] : params[0]) as UseStickyOptions;\n const axis = options?.axis ?? 'vertical';\n\n const internalRef = useRefState<Element>();\n const [stuck, setStuck] = useState(false);\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n\n if (!element) return;\n\n const root = (options?.root ? isTarget.getElement(options.root) : document) as Element;\n const elementOffsetTop =\n element.getBoundingClientRect().top + root.scrollTop - root.getBoundingClientRect().top;\n const elementOffsetLeft =\n element.getBoundingClientRect().left + root.scrollLeft - root.getBoundingClientRect().left;\n\n const onSticky = () => {\n if (axis === 'vertical') {\n const scrollTop = root.scrollTop;\n setStuck(scrollTop >= elementOffsetTop);\n }\n\n if (axis === 'horizontal') {\n const scrollLeft = root.scrollLeft;\n setStuck(scrollLeft >= elementOffsetLeft);\n }\n };\n\n root.addEventListener('scroll', onSticky);\n window.addEventListener('resize', onSticky);\n window.addEventListener('orientationchange', onSticky);\n\n onSticky();\n\n return () => {\n root.removeEventListener('scroll', onSticky);\n window.removeEventListener('resize', onSticky);\n window.removeEventListener('orientationchange', onSticky);\n };\n }, [target && isTarget.getRawElement(target), internalRef.state, axis, options?.root]);\n\n if (target) return stuck;\n return {\n stuck,\n ref: internalRef\n };\n}) as UseSticky;\n"],"names":["useSticky","params","target","isTarget","options","axis","internalRef","useRefState","stuck","setStuck","useState","useEffect","element","root","elementOffsetTop","elementOffsetLeft","onSticky","scrollTop","scrollLeft"],"mappings":";;;AA0DO,MAAMA,KAAa,IAAIC,MAAkB;AAC9C,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,IAAWF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,GACxCI,IAAOD,GAAS,QAAQ,YAExBE,IAAcC,EAAA,GACd,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAK;AAwCxC,SAtCAC,EAAU,MAAM;AACd,QAAI,CAACT,KAAU,CAACI,EAAY,MAAO;AAEnC,UAAMM,IAAWV,IAASC,EAAS,WAAWD,CAAM,IAAII,EAAY;AAEpE,QAAI,CAACM,EAAS;AAEd,UAAMC,IAAQT,GAAS,OAAOD,EAAS,WAAWC,EAAQ,IAAI,IAAI,UAC5DU,IACJF,EAAQ,wBAAwB,MAAMC,EAAK,YAAYA,EAAK,sBAAA,EAAwB,KAChFE,IACJH,EAAQ,wBAAwB,OAAOC,EAAK,aAAaA,EAAK,sBAAA,EAAwB,MAElFG,IAAW,MAAM;AACrB,UAAIX,MAAS,YAAY;AACvB,cAAMY,IAAYJ,EAAK;AACvB,QAAAJ,EAASQ,KAAaH,CAAgB;AAAA,MAAA;AAGxC,UAAIT,MAAS,cAAc;AACzB,cAAMa,IAAaL,EAAK;AACxB,QAAAJ,EAASS,KAAcH,CAAiB;AAAA,MAAA;AAAA,IAC1C;AAGF,WAAAF,EAAK,iBAAiB,UAAUG,CAAQ,GACxC,OAAO,iBAAiB,UAAUA,CAAQ,GAC1C,OAAO,iBAAiB,qBAAqBA,CAAQ,GAErDA,EAAA,GAEO,MAAM;AACX,MAAAH,EAAK,oBAAoB,UAAUG,CAAQ,GAC3C,OAAO,oBAAoB,UAAUA,CAAQ,GAC7C,OAAO,oBAAoB,qBAAqBA,CAAQ;AAAA,IAAA;AAAA,EAC1D,GACC,CAACd,KAAUC,EAAS,cAAcD,CAAM,GAAGI,EAAY,OAAOD,GAAMD,GAAS,IAAI,CAAC,GAEjFF,IAAeM,IACZ;AAAA,IACL,OAAAA;AAAA,IACA,KAAKF;AAAA,EAAA;AAET;"}

package/dist/esm/hooks/useTextDirection/useTextDirection.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useRef as a, useState as g, useEffect as v } from "react";
 import { useRefState as R } from "../useRefState/useRefState.mjs";
 import { isTarget as o } from "../../utils/helpers/isTarget.mjs";
-const E = ((...i) => {
+const S = ((...i) => {
   const e = o(i[0]) ? i[0] : void 0, s = (e ? i[1] : i[0]) ?? "ltr", r = R(), n = a(null), u = () => typeof window > "u" ? s : (e ? o.getElement(e) : r.current)?.getAttribute("dir") ?? s, [f, c] = g(u()), l = () => {
     n.current && n.current?.removeAttribute("dir");
   }, m = (t) => {
@@ -18,7 +18,7 @@ const E = ((...i) => {
     return b.observe(t, { attributes: !0 }), () => {
       b.disconnect();
     };
-  }, [r.state, e, o.getRefState(e)]), e ? { value: f, set: m, remove: l } : {
+  }, [r.state, e && o.getRawElement(e)]), e ? { value: f, set: m, remove: l } : {
     ref: r,
     value: f,
     set: m,
@@ -26,6 +26,6 @@ const E = ((...i) => {
   };
 });
 export {
-  E as useTextDirection
+  S as useTextDirection
 };
 //# sourceMappingURL=useTextDirection.mjs.map

package/dist/esm/hooks/useTextDirection/useTextDirection.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTextDirection.mjs","sources":["../../../../src/hooks/useTextDirection/useTextDirection.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use text direction value type /\nexport type UseTextDirectionValue = 'auto' \| 'ltr' \| 'rtl';\n\n/* The use text direction return type /\nexport interface UseTextDirectionReturn {\n /* The current direction /\n value: UseTextDirectionValue;\n /** The function to remove the direction /\n remove: () => void;\n /** The function to set the direction /\n set: (value: UseTextDirectionValue \| null) => void;\n}\n\nexport interface UseTextDirection {\n (target: HookTarget, initialValue?: UseTextDirectionValue): UseTextDirectionReturn;\n\n <Target extends Element>(\n initialValue?: UseTextDirectionValue,\n target?: never\n ): UseTextDirectionReturn & { ref: StateRef<Target> };\n}\n\n/\n @name useTextDirection\n * @description - Hook that can get and set the direction of the element\n * @category Elements\n * @usage medium\n \n @overload\n * @param {HookTarget} [target=document.querySelector('html')] The target element to observe\n * @param {UseTextDirectionValue} [initialValue = 'ltr'] The initial direction of the element\n * @returns {UseTextDirectionReturn} An object containing the current text direction of the element\n \n @example\n * const { value, set, remove } = useTextDirection(ref);\n \n @overload\n * @template Target The target element type\n * @param {UseTextDirectionValue} [initialValue = 'ltr'] The initial direction of the element\n * @returns { { ref: StateRef<Target> } & UseTextDirectionReturn } An object containing the current text direction of the element\n \n @example\n * const { ref, value, set, remove } = useTextDirection();\n */\nexport const useTextDirection = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const initialValue = ((target ? params[1] : params[0]) as UseTextDirectionValue) ?? 'ltr';\n\n const internalRef = useRefState();\n const elementRef = useRef<Element>(null);\n\n const getDirection = () => {\n if (typeof window === 'undefined') return initialValue;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n return (element?.getAttribute('dir') as UseTextDirectionValue) ?? initialValue;\n };\n\n const [value, setValue] = useState<UseTextDirectionValue>(getDirection());\n\n const remove = () => {\n if (!elementRef.current) return;\n\n elementRef.current?.removeAttribute('dir');\n };\n\n const set = (value: UseTextDirectionValue) => {\n if (!elementRef.current) return;\n\n setValue(value);\n elementRef.current.setAttribute('dir', value);\n };\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ??\n document.querySelector('html');\n if (!element) return;\n\n elementRef.current = element;\n\n const direction = getDirection();\n element.setAttribute('dir', direction);\n setValue(direction);\n\n const observer = new MutationObserver(() => setValue(getDirection()));\n\n observer.observe(element, { attributes: true });\n\n return () => {\n observer.disconnect();\n };\n }, [internalRef.state, target, isTarget.~~getRefState~~(target)]);\n\n if (target) return { value, set, remove };\n return {\n ref: internalRef,\n value,\n set,\n remove\n };\n}) as UseTextDirection;\n"],"names":["useTextDirection","params","target","isTarget","initialValue","internalRef","useRefState","elementRef","useRef","getDirection","value","setValue","useState","remove","set","useEffect","element","direction","observer"],"mappings":";;;AAsDO,MAAMA,KAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,KAAiBF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,MAAgC,OAE9EI,IAAcC,EAAA,GACdC,IAAaC,EAAgB,IAAI,GAEjCC,IAAe,MACf,OAAO,SAAW,MAAoBL,KACzBF,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY,UACnD,aAAa,KAAK,KAA+BD,GAG9D,CAACM,GAAOC,CAAQ,IAAIC,EAAgCH,GAAc,GAElEI,IAAS,MAAM;AACnB,IAAKN,EAAW,WAEhBA,EAAW,SAAS,gBAAgB,KAAK;AAAA,EAAA,GAGrCO,IAAM,CAACJ,MAAiC;AAC5C,IAAKH,EAAW,YAEhBI,EAASD,CAAK,GACdH,EAAW,QAAQ,aAAa,OAAOG,CAAK;AAAA,EAAA;AA0B9C,SAvBAK,EAAU,MAAM;AACd,QAAI,CAACb,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMW,KACFd,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY,YACrD,SAAS,cAAc,MAAM;AAC/B,QAAI,CAACW,EAAS;AAEd,IAAAT,EAAW,UAAUS;AAErB,UAAMC,IAAYR,EAAA;AAClB,IAAAO,EAAQ,aAAa,OAAOC,CAAS,GACrCN,EAASM,CAAS;AAElB,UAAMC,IAAW,IAAI,iBAAiB,MAAMP,EAASF,EAAA,CAAc,CAAC;AAEpE,WAAAS,EAAS,QAAQF,GAAS,EAAE,YAAY,IAAM,GAEvC,MAAM;AACX,MAAAE,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACb,EAAY,OAAOH,~~GAAQC~~,EAAS,~~YAAYD~~,CAAM,CAAC,CAAC,~~GAExDA~~,IAAe,EAAE,OAAAQ,GAAO,KAAAI,GAAK,QAAAD,EAAA,IAC1B;AAAA,IACL,KAAKR;AAAA,IACL,OAAAK;AAAA,IACA,KAAAI;AAAA,IACA,QAAAD;AAAA,EAAA;AAEJ;"}
1	+ {"version":3,"file":"useTextDirection.mjs","sources":["../../../../src/hooks/useTextDirection/useTextDirection.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useRefState } from '../useRefState/useRefState';\n\n/** The use text direction value type /\nexport type UseTextDirectionValue = 'auto' \| 'ltr' \| 'rtl';\n\n/* The use text direction return type /\nexport interface UseTextDirectionReturn {\n /* The current direction /\n value: UseTextDirectionValue;\n /** The function to remove the direction /\n remove: () => void;\n /** The function to set the direction /\n set: (value: UseTextDirectionValue \| null) => void;\n}\n\nexport interface UseTextDirection {\n (target: HookTarget, initialValue?: UseTextDirectionValue): UseTextDirectionReturn;\n\n <Target extends Element>(\n initialValue?: UseTextDirectionValue,\n target?: never\n ): UseTextDirectionReturn & { ref: StateRef<Target> };\n}\n\n/\n @name useTextDirection\n * @description - Hook that can get and set the direction of the element\n * @category Elements\n * @usage medium\n \n @overload\n * @param {HookTarget} [target=document.querySelector('html')] The target element to observe\n * @param {UseTextDirectionValue} [initialValue = 'ltr'] The initial direction of the element\n * @returns {UseTextDirectionReturn} An object containing the current text direction of the element\n \n @example\n * const { value, set, remove } = useTextDirection(ref);\n \n @overload\n * @template Target The target element type\n * @param {UseTextDirectionValue} [initialValue = 'ltr'] The initial direction of the element\n * @returns { { ref: StateRef<Target> } & UseTextDirectionReturn } An object containing the current text direction of the element\n \n @example\n * const { ref, value, set, remove } = useTextDirection();\n */\nexport const useTextDirection = ((...params: any[]) => {\n const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget \| undefined;\n const initialValue = ((target ? params[1] : params[0]) as UseTextDirectionValue) ?? 'ltr';\n\n const internalRef = useRefState();\n const elementRef = useRef<Element>(null);\n\n const getDirection = () => {\n if (typeof window === 'undefined') return initialValue;\n const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\n return (element?.getAttribute('dir') as UseTextDirectionValue) ?? initialValue;\n };\n\n const [value, setValue] = useState<UseTextDirectionValue>(getDirection());\n\n const remove = () => {\n if (!elementRef.current) return;\n\n elementRef.current?.removeAttribute('dir');\n };\n\n const set = (value: UseTextDirectionValue) => {\n if (!elementRef.current) return;\n\n setValue(value);\n elementRef.current.setAttribute('dir', value);\n };\n\n useEffect(() => {\n if (!target && !internalRef.state) return;\n\n const element =\n ((target ? isTarget.getElement(target) : internalRef.current) as Element) ??\n document.querySelector('html');\n if (!element) return;\n\n elementRef.current = element;\n\n const direction = getDirection();\n element.setAttribute('dir', direction);\n setValue(direction);\n\n const observer = new MutationObserver(() => setValue(getDirection()));\n\n observer.observe(element, { attributes: true });\n\n return () => {\n observer.disconnect();\n };\n }, [internalRef.state, target && isTarget.getRawElement(target)]);\n\n if (target) return { value, set, remove };\n return {\n ref: internalRef,\n value,\n set,\n remove\n };\n}) as UseTextDirection;\n"],"names":["useTextDirection","params","target","isTarget","initialValue","internalRef","useRefState","elementRef","useRef","getDirection","value","setValue","useState","remove","set","useEffect","element","direction","observer"],"mappings":";;;AAsDO,MAAMA,KAAoB,IAAIC,MAAkB;AACrD,QAAMC,IAAUC,EAASF,EAAO,CAAC,CAAC,IAAIA,EAAO,CAAC,IAAI,QAC5CG,KAAiBF,IAASD,EAAO,CAAC,IAAIA,EAAO,CAAC,MAAgC,OAE9EI,IAAcC,EAAA,GACdC,IAAaC,EAAgB,IAAI,GAEjCC,IAAe,MACf,OAAO,SAAW,MAAoBL,KACzBF,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY,UACnD,aAAa,KAAK,KAA+BD,GAG9D,CAACM,GAAOC,CAAQ,IAAIC,EAAgCH,GAAc,GAElEI,IAAS,MAAM;AACnB,IAAKN,EAAW,WAEhBA,EAAW,SAAS,gBAAgB,KAAK;AAAA,EAAA,GAGrCO,IAAM,CAACJ,MAAiC;AAC5C,IAAKH,EAAW,YAEhBI,EAASD,CAAK,GACdH,EAAW,QAAQ,aAAa,OAAOG,CAAK;AAAA,EAAA;AA0B9C,SAvBAK,EAAU,MAAM;AACd,QAAI,CAACb,KAAU,CAACG,EAAY,MAAO;AAEnC,UAAMW,KACFd,IAASC,EAAS,WAAWD,CAAM,IAAIG,EAAY,YACrD,SAAS,cAAc,MAAM;AAC/B,QAAI,CAACW,EAAS;AAEd,IAAAT,EAAW,UAAUS;AAErB,UAAMC,IAAYR,EAAA;AAClB,IAAAO,EAAQ,aAAa,OAAOC,CAAS,GACrCN,EAASM,CAAS;AAElB,UAAMC,IAAW,IAAI,iBAAiB,MAAMP,EAASF,EAAA,CAAc,CAAC;AAEpE,WAAAS,EAAS,QAAQF,GAAS,EAAE,YAAY,IAAM,GAEvC,MAAM;AACX,MAAAE,EAAS,WAAA;AAAA,IAAW;AAAA,EACtB,GACC,CAACb,EAAY,OAAOH,KAAUC,EAAS,cAAcD,CAAM,CAAC,CAAC,GAE5DA,IAAe,EAAE,OAAAQ,GAAO,KAAAI,GAAK,QAAAD,EAAA,IAC1B;AAAA,IACL,KAAKR;AAAA,IACL,OAAAK;AAAA,IACA,KAAAI;AAAA,IACA,QAAAD;AAAA,EAAA;AAEJ;"}

package/dist/esm/hooks/useTextareaAutosize/useTextareaAutosize.mjs CHANGED Viewed

@@ -1,17 +1,17 @@
 import { useState as y, useRef as v, useEffect as R } from "react";
-import { useRefState as V } from "../useRefState/useRefState.mjs";
+import { useRefState as E } from "../useRefState/useRefState.mjs";
 import { isTarget as f } from "../../utils/helpers/isTarget.mjs";
 const p = ((...t) => {
-  const n = f(t[0]) ? t[0] : void 0, o = n ? typeof t[1] == "object" ? t[1] : { initialValue: t[1] } : typeof t[0] == "object" ? t[0] : { initialValue: t[0] }, [g, h] = y(o?.initialValue ?? ""), s = V(), l = v(null), m = v(0), a = () => {
-    const e = l.current;
+  const n = f(t[0]) ? t[0] : void 0, o = n ? typeof t[1] == "object" ? t[1] : { initialValue: t[1] } : typeof t[0] == "object" ? t[0] : { initialValue: t[0] }, [g, m] = y(o?.initialValue ?? ""), s = E(), u = v(null), h = v(0), a = () => {
+    const e = u.current;
     if (!e) return;
-    const i = e.style.minHeight, u = e.style.maxHeight;
+    const i = e.style.minHeight, l = e.style.maxHeight;
     e.style.height = "auto", e.style.minHeight = "auto", e.style.maxHeight = "none";
     const r = e.scrollHeight;
-    e.style.height = `${r}px`, e.style.minHeight = i, e.style.maxHeight = u, r !== m.current && o?.onResize?.(), m.current = r;
+    e.style.height = `${r}px`, e.style.minHeight = i, e.style.maxHeight = l, r !== h.current && o?.onResize?.(), h.current = r;
   }, c = (e) => {
-    h(e);
-    const i = l.current;
+    m(e);
+    const i = u.current;
     i && (i.value = e, requestAnimationFrame(() => {
       a();
     }));
@@ -20,22 +20,22 @@ const p = ((...t) => {
     if (!n && !s.state) return;
     const e = n ? f.getElement(n) : s.current;
     if (!e) return;
-    l.current = e, o?.initialValue && (e.value = o.initialValue), a();
+    u.current = e, o?.initialValue && (e.value = o.initialValue), a();
     const i = (r) => {
       const H = r.target.value;
       c(H), requestAnimationFrame(() => {
         a();
       });
-    }, u = () => {
+    }, l = () => {
       requestAnimationFrame(() => {
         a();
       });
     };
-    return e.addEventListener("input", i), e.addEventListener("resize", u), () => {
-      e.removeEventListener("input", i), e.removeEventListener("resize", u);
+    return e.addEventListener("input", i), e.addEventListener("resize", l), () => {
+      e.removeEventListener("input", i), e.removeEventListener("resize", l);
     };
-  }, [n, s.state, f.getRefState(n)]);
-  const x = () => h("");
+  }, [n && f.getRawElement(n), s.state]);
+  const x = () => m("");
   return n ? {
     value: g,
     set: c,