@atom-learning/components 2.37.0 → 2.38.0

package/dist/utilities/hooks/useCallbackRef.js

@@ -1,2 +1,2 @@
-import*as l from"react";const n=()=>{const e=l.useRef(null),u=l.useCallback(t=>{t&&(e.current=t)},[]);return[e,u]},s=()=>{const[e,u]=l.useState(null),t=l.useCallback(a=>{a&&u(a)},[]);return[e,t]};export{n as useCallbackRef,s as useCallbackRefState};
+import*as t from"react";const n=()=>{const e=t.useRef(null),u=t.useCallback(l=>{l&&(e.current=l)},[]);return[e,u]},s=()=>{const[e,u]=t.useState(null),l=t.useCallback(a=>{a&&u(a)},[]);return[e,l]};export{n as useCallbackRef,s as useCallbackRefState};
 //# sourceMappingURL=useCallbackRef.js.map

package/dist/utilities/hooks/useResizeObserver.d.ts

@@ -0,0 +1,8 @@
+declare type TUseResizeObserverOptions = {
+    elements: (HTMLElement | undefined | null)[];
+    onResize: (entries: ResizeObserverEntry[]) => void;
+    delay?: number;
+};
+declare type TUseResizeObserverOutput = ResizeObserver | null;
+export declare const useResizeObserver: ({ delay, elements, onResize }: TUseResizeObserverOptions) => TUseResizeObserverOutput;
+export {};

package/dist/utilities/hooks/useResizeObserver.js

@@ -0,0 +1,2 @@
+import*as t from"react";import{debounce as u}from"throttle-debounce";const c=r=>{try{return new ResizeObserver(r)}catch{return null}},l=({delay:r=500,elements:n,onResize:s})=>{const e=t.useMemo(()=>c(u(r,s)),[r,s]);return t.useEffect(()=>(n.forEach(o=>{o&&(e==null||e.observe(o))}),()=>{n.forEach(o=>o&&(e==null?void 0:e.unobserve(o)))}),[e,n]),e};export{l as useResizeObserver};
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/utilities/hooks/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../../../src/utilities/hooks/useResizeObserver.ts"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\ntype TUseResizeObserverOptions = {\n  elements: (HTMLElement | undefined | null)[]\n  onResize: (entries: ResizeObserverEntry[]) => void\n  delay?: number\n}\n\ntype TUseResizeObserverOutput = ResizeObserver | null\n\nconst createResizeObserver = (callback: () => void) => {\n  try {\n    return new ResizeObserver(callback)\n  } catch {\n    return null\n  }\n}\n\nexport const useResizeObserver = ({\n  delay = 500,\n  elements,\n  onResize\n}: TUseResizeObserverOptions): TUseResizeObserverOutput => {\n  const observer = React.useMemo(\n    () => createResizeObserver(debounce(delay, onResize)),\n    [delay, onResize]\n  )\n\n  React.useEffect(() => {\n    elements.forEach((element) => {\n      if (element) {\n        observer?.observe(element)\n      }\n    })\n\n    return () => {\n      elements.forEach((element) => element && observer?.unobserve(element))\n    }\n  }, [observer, elements])\n\n  return observer\n}\n"],"names":["createResizeObserver","callback","useResizeObserver","delay","elements","onResize","observer","React","debounce","element"],"mappings":"qEAWA,MAAMA,EAAwBC,GAAyB,CACrD,GAAI,CACF,OAAO,IAAI,eAAeA,CAAQ,CACpC,OACE,OAAO,IACT,CACF,EAEaC,EAAoB,CAAC,CAChC,MAAAC,EAAQ,IACR,SAAAC,EACA,SAAAC,CACF,IAA2D,CACzD,MAAMC,EAAWC,EAAM,QACrB,IAAMP,EAAqBQ,EAASL,EAAOE,CAAQ,CAAC,EACpD,CAACF,EAAOE,CAAQ,CAClB,EAEA,OAAAE,EAAM,UAAU,KACdH,EAAS,QAASK,GAAY,CACxBA,IACFH,GAAA,MAAAA,EAAU,QAAQG,CAEtB,EAAA,CAAC,EAEM,IAAM,CACXL,EAAS,QAASK,GAAYA,IAAWH,GAAA,KAAA,OAAAA,EAAU,UAAUG,CAAAA,EAAQ,CACvE,GACC,CAACH,EAAUF,CAAQ,CAAC,EAEhBE,CACT"}

package/dist/utilities/hooks/useScrollPosition.d.ts

@@ -0,0 +1,11 @@
+declare type TUseScrollPositionOptions = {
+    element?: HTMLElement | null;
+    delay?: number;
+    delayMethod?: 'throttle' | 'debounce';
+};
+declare type TUseScrollPositionOutput = {
+    left: number;
+    top: number;
+};
+export declare const useScrollPosition: ({ element, delay, delayMethod }: TUseScrollPositionOptions) => TUseScrollPositionOutput;
+export {};

package/dist/utilities/hooks/useScrollPosition.js

@@ -0,0 +1,2 @@
+import{useState as c,useMemo as u,useEffect as f}from"react";import{throttle as i,debounce as d}from"throttle-debounce";const m=({element:e,delay:r=500,delayMethod:t="throttle"})=>{const[n,s]=c({left:0,top:0}),o=u(()=>{if(t==="throttle")return i;if(t==="debounce")return d},[t]);return f(()=>{if(!e)return;const l=o(r,()=>{s({left:e.scrollLeft,top:e.scrollTop})});return e.addEventListener("scroll",l),()=>{e.removeEventListener("scroll",l)}},[e,o,r]),n};export{m as useScrollPosition};
+//# sourceMappingURL=useScrollPosition.js.map

package/dist/utilities/hooks/useScrollPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollPosition.js","sources":["../../../src/utilities/hooks/useScrollPosition.ts"],"sourcesContent":["import { useEffect, useState, useMemo } from 'react'\nimport { debounce, throttle } from 'throttle-debounce'\n\ntype TUseScrollPositionOptions = {\n  element?: HTMLElement | null\n  delay?: number\n  delayMethod?: 'throttle' | 'debounce'\n}\n\ntype TUseScrollPositionOutput = {\n  left: number\n  top: number\n}\n\nexport const useScrollPosition = ({\n  element,\n  delay = 500,\n  delayMethod = 'throttle'\n}: TUseScrollPositionOptions): TUseScrollPositionOutput => {\n  const [scrollPosition, setScrollPosition] = useState({ left: 0, top: 0 })\n\n  const delayMethodFn = useMemo(() => {\n    if (delayMethod === 'throttle') return throttle\n    if (delayMethod === 'debounce') return debounce\n  }, [delayMethod])\n\n  useEffect(() => {\n    if (!element) return\n\n    const handleScroll = delayMethodFn(delay, () => {\n      setScrollPosition({ left: element.scrollLeft, top: element.scrollTop })\n    })\n\n    element.addEventListener('scroll', handleScroll)\n\n    return () => {\n      element.removeEventListener('scroll', handleScroll)\n    }\n  }, [element, delayMethodFn, delay])\n\n  return scrollPosition\n}\n"],"names":["useScrollPosition","element","delay","delayMethod","scrollPosition","setScrollPosition","useState","delayMethodFn","useMemo","throttle","debounce","useEffect","handleScroll"],"mappings":"wHAcO,MAAMA,EAAoB,CAAC,CAChC,QAAAC,EACA,MAAAC,EAAQ,IACR,YAAAC,EAAc,UAChB,IAA2D,CACzD,KAAM,CAACC,EAAgBC,CAAiB,EAAIC,EAAS,CAAE,KAAM,EAAG,IAAK,CAAE,CAAC,EAElEC,EAAgBC,EAAQ,IAAM,CAClC,GAAIL,IAAgB,WAAY,OAAOM,EACvC,GAAIN,IAAgB,WAAY,OAAOO,CACzC,EAAG,CAACP,CAAW,CAAC,EAEhB,OAAAQ,EAAU,IAAM,CACd,GAAI,CAACV,EAAS,OAEd,MAAMW,EAAeL,EAAcL,EAAO,IAAM,CAC9CG,EAAkB,CAAE,KAAMJ,EAAQ,WAAY,IAAKA,EAAQ,SAAU,CAAC,CACxE,CAAC,EAED,OAAAA,EAAQ,iBAAiB,SAAUW,CAAY,EAExC,IAAM,CACXX,EAAQ,oBAAoB,SAAUW,CAAY,CACpD,CACF,EAAG,CAACX,EAASM,EAAeL,CAAK,CAAC,EAE3BE,CACT"}

package/dist/utilities/hooks/{useWindowSize.d.ts → useSize.d.ts}

@@ -2,7 +2,8 @@ interface Size {
     width: number | undefined;
     height: number | undefined;
 }
-export declare const useWindowSize: ({ delay }?: {
+export declare const useSize: ({ element, delay }: {
+    element?: HTMLElement | null | undefined;
     delay?: number | undefined;
 }) => Size;
 export {};

package/dist/utilities/hooks/useSize.js

@@ -0,0 +1,2 @@
+import{useState as n,useCallback as d,useMemo as r}from"react";import{useResizeObserver as h}from"./useResizeObserver.js";const u=({element:e,delay:t=500})=>{const[o,l]=n({width:void 0,height:void 0}),s=d(()=>{l({width:e==null?void 0:e.clientWidth,height:e==null?void 0:e.clientHeight})},[e]),i=r(()=>[e],[e]);return h({delay:t,elements:i,onResize:s}),o};export{u as useSize};
+//# sourceMappingURL=useSize.js.map

package/dist/utilities/hooks/useSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSize.js","sources":["../../../src/utilities/hooks/useSize.ts"],"sourcesContent":["import { useCallback, useState, useMemo } from 'react'\nimport { useResizeObserver } from './useResizeObserver'\n\ninterface Size {\n  width: number | undefined\n  height: number | undefined\n}\n\nexport const useSize = ({\n  element,\n  delay = 500\n}: {\n  element?: HTMLElement | null\n  delay?: number\n}): Size => {\n  const [size, setSize] = useState<Size>({\n    width: undefined,\n    height: undefined\n  })\n\n  const handleResize = useCallback(() => {\n    setSize({\n      width: element?.clientWidth,\n      height: element?.clientHeight\n    })\n  }, [element])\n\n  const elements = useMemo(() => [element], [element])\n\n  useResizeObserver({\n    delay,\n    elements: elements,\n    onResize: handleResize\n  })\n\n  return size\n}\n"],"names":["useSize","element","delay","size","setSize","useState","handleResize","useCallback","elements","useMemo","useResizeObserver"],"mappings":"0HAQa,MAAAA,EAAU,CAAC,CACtB,QAAAC,EACA,MAAAC,EAAQ,GACV,IAGY,CACV,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAe,CACrC,MAAO,OACP,OAAQ,MACV,CAAC,EAEKC,EAAeC,EAAY,IAAM,CACrCH,EAAQ,CACN,MAAOH,GAAA,KAAA,OAAAA,EAAS,YAChB,OAAQA,GAAA,KAAA,OAAAA,EAAS,YACnB,CAAC,CACH,EAAG,CAACA,CAAO,CAAC,EAENO,EAAWC,EAAQ,IAAM,CAACR,CAAO,EAAG,CAACA,CAAO,CAAC,EAEnD,OAAAS,EAAkB,CAChB,MAAAR,EACA,SAAUM,EACV,SAAUF,CACZ,CAAC,EAEMH,CACT"}

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "2.37.0",
+  "version": "2.38.0",
   "description": "",
   "files": [
     "dist"

package/dist/utilities/hooks/useWindowSize.js

@@ -1,2 +0,0 @@
-import{useState as o,useEffect as r}from"react";import{debounce as d}from"throttle-debounce";const w=({delay:t=500}={})=>{const[i,n]=o({width:void 0,height:void 0});return r(()=>{const e=d(t,()=>{n({width:window.innerWidth,height:window.innerHeight})});return window.addEventListener("resize",e),e(),()=>window.removeEventListener("resize",e)},[t]),i};export{w as useWindowSize};
-//# sourceMappingURL=useWindowSize.js.map

package/dist/utilities/hooks/useWindowSize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useWindowSize.js","sources":["../../../src/utilities/hooks/useWindowSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { debounce } from 'throttle-debounce'\n\ninterface Size {\n  width: number | undefined\n  height: number | undefined\n}\n\nexport const useWindowSize = ({\n  delay = 500\n}: { delay?: number } = {}): Size => {\n  const [windowSize, setWindowSize] = useState<Size>({\n    width: undefined,\n    height: undefined\n  })\n\n  useEffect(() => {\n    const handleResize = debounce(delay, () => {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight\n      })\n    })\n\n    window.addEventListener('resize', handleResize)\n    handleResize()\n\n    return () => window.removeEventListener('resize', handleResize)\n  }, [delay])\n\n  return windowSize\n}\n"],"names":["useWindowSize","delay","windowSize","setWindowSize","useState","useEffect","handleResize","debounce"],"mappings":"mGAQaA,EAAgB,CAAC,CAC5B,MAAAC,EAAQ,GACV,EAAwB,CAAC,IAAY,CACnC,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAe,CACjD,MAAO,OACP,OAAQ,MACV,CAAC,EAED,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAeC,EAASN,EAAO,IAAM,CACzCE,EAAc,CACZ,MAAO,OAAO,WACd,OAAQ,OAAO,WACjB,CAAC,CACH,CAAC,EAED,OAAO,OAAA,iBAAiB,SAAUG,CAAY,EAC9CA,IAEO,IAAM,OAAO,oBAAoB,SAAUA,CAAY,CAChE,EAAG,CAACL,CAAK,CAAC,EAEHC,CACT"}