@atom-learning/components 8.0.1 → 8.0.3

package/dist/utilities/hooks/useCallbackRef.js

@@ -8,8 +8,12 @@ var useCallbackRef = () => {
 };
 var useCallbackRefState = () => {
 	const [elRef, setElRef] = React$1.useState(null);
+	const hasElement = React$1.useRef(false);
 	return [elRef, React$1.useCallback((el) => {
-		if (el) setElRef(el);
+		if (el && !hasElement.current) {
+			hasElement.current = true;
+			setElRef(el);
+		}
 	}, [])];
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"useCallbackRef.js","names":[],"sources":["../../../src/utilities/hooks/useCallbackRef.ts"],"sourcesContent":["import * as React from 'react'\n\nexport const useCallbackRef: () => [\n  React.MutableRefObject<HTMLElement | null>,\n  (HTMLElement) => void\n] = () => {\n  const elRef = React.useRef<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) elRef.current = el\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n\nexport const useCallbackRefState: () => [\n  HTMLElement | null,\n  (HTMLElement) => void\n] = () => {\n  const [elRef, setElRef] = React.useState<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) setElRef(el)\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n"],"mappings":";;AAEA,IAAa,uBAGH;CACR,MAAM,QAAQ,QAAM,OAA2B,KAAK;AAMpD,QAAO,CAAC,OAJiB,QAAM,aAAa,OAAO;AACjD,MAAI,GAAI,OAAM,UAAU;IACvB,EAAE,CAAC,CAE0B;;AAGlC,IAAa,4BAGH;CACR,MAAM,CAAC,OAAO,YAAY,QAAM,SAA6B,KAAK;AAMlE,QAAO,CAAC,OAJiB,QAAM,aAAa,OAAO;AACjD,MAAI,GAAI,UAAS,GAAG;IACnB,EAAE,CAAC,CAE0B"}
+{"version":3,"file":"useCallbackRef.js","names":[],"sources":["../../../src/utilities/hooks/useCallbackRef.ts"],"sourcesContent":["import * as React from 'react'\n\nexport const useCallbackRef: () => [\n  React.MutableRefObject<HTMLElement | null>,\n  (HTMLElement) => void\n] = () => {\n  const elRef = React.useRef<HTMLElement | null>(null)\n\n  const setElRefCallback = React.useCallback((el) => {\n    if (el) elRef.current = el\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n\nexport const useCallbackRefState: () => [\n  HTMLElement | null,\n  (HTMLElement) => void\n] = () => {\n  const [elRef, setElRef] = React.useState<HTMLElement | null>(null)\n  const hasElement = React.useRef(false)\n\n  const setElRefCallback = React.useCallback((el) => {\n    // Commit the attached node to state exactly once — the first time one\n    // becomes available — and never again. Under React 19 concurrent rendering\n    // with heavy CPU contention, renders get interrupted and re-run, so the DOM\n    // node attached via the callback ref churns: React commits and replaces the\n    // node, firing this callback with a fresh identity each time. The previous\n    // `prev === el ? prev : el` guard couldn't catch that — a new identity is\n    // never `=== prev` — so every churn scheduled another render, which churned\n    // the node again: an unbounded \"Maximum update depth exceeded\" loop.\n    //\n    // A one-shot setState makes the returned element reference stable and the\n    // loop structurally impossible (later invocations are no-ops). All consumers\n    // attach this to a single, always-mounted element, so the first node is the\n    // node — there is no element swap to miss.\n    if (el && !hasElement.current) {\n      hasElement.current = true\n      setElRef(el)\n    }\n  }, [])\n\n  return [elRef, setElRefCallback]\n}\n"],"mappings":";;AAEA,IAAa,uBAGH;CACR,MAAM,QAAQ,QAAM,OAA2B,KAAK;AAMpD,QAAO,CAAC,OAJiB,QAAM,aAAa,OAAO;AACjD,MAAI,GAAI,OAAM,UAAU;IACvB,EAAE,CAAC,CAE0B;;AAGlC,IAAa,4BAGH;CACR,MAAM,CAAC,OAAO,YAAY,QAAM,SAA6B,KAAK;CAClE,MAAM,aAAa,QAAM,OAAO,MAAM;AAsBtC,QAAO,CAAC,OApBiB,QAAM,aAAa,OAAO;AAcjD,MAAI,MAAM,CAAC,WAAW,SAAS;AAC7B,cAAW,UAAU;AACrB,YAAS,GAAG;;IAEb,EAAE,CAAC,CAE0B"}

package/dist/utilities/hooks/useResizeObserver.js

@@ -9,7 +9,11 @@ var createResizeObserver = (callback) => {
 	}
 };
 var useResizeObserver = ({ delay = 500, elements, onResize }) => {
-	const observer = React$1.useMemo(() => createResizeObserver(debounce(delay, onResize)), [delay, onResize]);
+	const onResizeRef = React$1.useRef(onResize);
+	React$1.useLayoutEffect(() => {
+		onResizeRef.current = onResize;
+	});
+	const observer = React$1.useMemo(() => createResizeObserver(debounce(delay, (entries) => onResizeRef.current(entries))), [delay]);
 	React$1.useEffect(() => {
 		elements.forEach((element) => {
 			if (element) observer?.observe(element);

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

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","names":[],"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 = (\n  callback: (entries: ResizeObserverEntry[]) => void\n) => {\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"],"mappings":";;;AAWA,IAAM,wBACJ,aACG;AACH,KAAI;AACF,SAAO,IAAI,eAAe,SAAS;SAC7B;AACN,SAAO;;;AAIX,IAAa,qBAAqB,EAChC,QAAQ,KACR,UACA,eACyD;CACzD,MAAM,WAAW,QAAM,cACf,qBAAqB,SAAS,OAAO,SAAS,CAAC,EACrD,CAAC,OAAO,SAAS,CAClB;AAED,SAAM,gBAAgB;AACpB,WAAS,SAAS,YAAY;AAC5B,OAAI,QACF,WAAU,QAAQ,QAAQ;IAE5B;AAEF,eAAa;AACX,YAAS,SAAS,YAAY,WAAW,UAAU,UAAU,QAAQ,CAAC;;IAEvE,CAAC,UAAU,SAAS,CAAC;AAExB,QAAO"}
+{"version":3,"file":"useResizeObserver.js","names":[],"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 = (\n  callback: (entries: ResizeObserverEntry[]) => void\n) => {\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  // Keep the latest `onResize` in a ref so the observer is only recreated when\n  // `delay` changes. Otherwise a callback whose identity changes on render (e.g.\n  // `useSize`'s `handleResize`, which depends on `element`) would recreate and\n  // re-subscribe the observer, and `ResizeObserver` fires its initial callback\n  // on every `observe()` — a measure → setState → re-render → re-subscribe loop\n  // that surfaces as \"Maximum update depth exceeded\".\n  const onResizeRef = React.useRef(onResize)\n  React.useLayoutEffect(() => {\n    onResizeRef.current = onResize\n  })\n\n  const observer = React.useMemo(\n    () =>\n      createResizeObserver(\n        debounce(delay, (entries: ResizeObserverEntry[]) =>\n          onResizeRef.current(entries)\n        )\n      ),\n    [delay]\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"],"mappings":";;;AAWA,IAAM,wBACJ,aACG;AACH,KAAI;AACF,SAAO,IAAI,eAAe,SAAS;SAC7B;AACN,SAAO;;;AAIX,IAAa,qBAAqB,EAChC,QAAQ,KACR,UACA,eACyD;CAOzD,MAAM,cAAc,QAAM,OAAO,SAAS;AAC1C,SAAM,sBAAsB;AAC1B,cAAY,UAAU;GACtB;CAEF,MAAM,WAAW,QAAM,cAEnB,qBACE,SAAS,QAAQ,YACf,YAAY,QAAQ,QAAQ,CAC7B,CACF,EACH,CAAC,MAAM,CACR;AAED,SAAM,gBAAgB;AACpB,WAAS,SAAS,YAAY;AAC5B,OAAI,QACF,WAAU,QAAQ,QAAQ;IAE5B;AAEF,eAAa;AACX,YAAS,SAAS,YAAY,WAAW,UAAU,UAAU,QAAQ,CAAC;;IAEvE,CAAC,UAAU,SAAS,CAAC;AAExB,QAAO"}

package/dist/utilities/hooks/useScrollPosition.js

@@ -10,7 +10,7 @@ var useScrollPosition = ({ element, delay = 500, delayMethod = "throttle" }) =>
 	useEffect(() => {
 		if (!element) return;
 		const handleScroll = delayMethodFn(delay, () => {
-			setScrollPosition({
+			setScrollPosition((prev) => prev.left === element.scrollLeft && prev.top === element.scrollTop ? prev : {
 				left: element.scrollLeft,
 				top: element.scrollTop
 			});

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

@@ -1 +1 @@
-{"version":3,"file":"useScrollPosition.js","names":[],"sources":["../../../src/utilities/hooks/useScrollPosition.ts"],"sourcesContent":["import { useEffect, useMemo, useState } 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    () => (delayMethod === 'debounce' ? debounce : throttle),\n    [delayMethod]\n  )\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"],"mappings":";;;AAcA,IAAa,qBAAqB,EAChC,SACA,QAAQ,KACR,cAAc,iBAC2C;CACzD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS;EAAE,MAAM;EAAG,KAAK;EAAG,CAAC;CAEzE,MAAM,gBAAgB,cACb,gBAAgB,aAAa,WAAW,UAC/C,CAAC,YAAY,CACd;AAED,iBAAgB;AACd,MAAI,CAAC,QAAS;EAEd,MAAM,eAAe,cAAc,aAAa;AAC9C,qBAAkB;IAAE,MAAM,QAAQ;IAAY,KAAK,QAAQ;IAAW,CAAC;IACvE;AAEF,UAAQ,iBAAiB,UAAU,aAAa;AAEhD,eAAa;AACX,WAAQ,oBAAoB,UAAU,aAAa;;IAEpD;EAAC;EAAS;EAAe;EAAM,CAAC;AAEnC,QAAO"}
+{"version":3,"file":"useScrollPosition.js","names":[],"sources":["../../../src/utilities/hooks/useScrollPosition.ts"],"sourcesContent":["import { useEffect, useMemo, useState } 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    () => (delayMethod === 'debounce' ? debounce : throttle),\n    [delayMethod]\n  )\n\n  useEffect(() => {\n    if (!element) return\n\n    const handleScroll = delayMethodFn(delay, () => {\n      setScrollPosition((prev) =>\n        prev.left === element.scrollLeft && prev.top === element.scrollTop\n          ? prev\n          : { left: element.scrollLeft, top: element.scrollTop }\n      )\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"],"mappings":";;;AAcA,IAAa,qBAAqB,EAChC,SACA,QAAQ,KACR,cAAc,iBAC2C;CACzD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS;EAAE,MAAM;EAAG,KAAK;EAAG,CAAC;CAEzE,MAAM,gBAAgB,cACb,gBAAgB,aAAa,WAAW,UAC/C,CAAC,YAAY,CACd;AAED,iBAAgB;AACd,MAAI,CAAC,QAAS;EAEd,MAAM,eAAe,cAAc,aAAa;AAC9C,sBAAmB,SACjB,KAAK,SAAS,QAAQ,cAAc,KAAK,QAAQ,QAAQ,YACrD,OACA;IAAE,MAAM,QAAQ;IAAY,KAAK,QAAQ;IAAW,CACzD;IACD;AAEF,UAAQ,iBAAiB,UAAU,aAAa;AAEhD,eAAa;AACX,WAAQ,oBAAoB,UAAU,aAAa;;IAEpD;EAAC;EAAS;EAAe;EAAM,CAAC;AAEnC,QAAO"}

package/dist/utilities/hooks/useSize.js

@@ -7,9 +7,11 @@ var useSize = ({ element, delay = 500 }) => {
 		height: void 0
 	});
 	const handleResize = useCallback(() => {
-		setSize({
-			width: element?.clientWidth,
-			height: element?.clientHeight
+		const width = element?.clientWidth;
+		const height = element?.clientHeight;
+		setSize((prev) => prev.width === width && prev.height === height ? prev : {
+			width,
+			height
 		});
 	}, [element]);
 	useResizeObserver({

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

@@ -1 +1 @@
-{"version":3,"file":"useSize.js","names":[],"sources":["../../../src/utilities/hooks/useSize.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\n\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"],"mappings":";;;AASA,IAAa,WAAW,EACtB,SACA,QAAQ,UAIE;CACV,MAAM,CAAC,MAAM,WAAW,SAAe;EACrC,OAAO,KAAA;EACP,QAAQ,KAAA;EACT,CAAC;CAEF,MAAM,eAAe,kBAAkB;AACrC,UAAQ;GACN,OAAO,SAAS;GAChB,QAAQ,SAAS;GAClB,CAAC;IACD,CAAC,QAAQ,CAAC;AAIb,mBAAkB;EAChB;EACU,UAJK,cAAc,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC;EAKlD,UAAU;EACX,CAAC;AAEF,QAAO"}
+{"version":3,"file":"useSize.js","names":[],"sources":["../../../src/utilities/hooks/useSize.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\n\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    const width = element?.clientWidth\n    const height = element?.clientHeight\n    setSize((prev) =>\n      prev.width === width && prev.height === height ? prev : { width, height }\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"],"mappings":";;;AASA,IAAa,WAAW,EACtB,SACA,QAAQ,UAIE;CACV,MAAM,CAAC,MAAM,WAAW,SAAe;EACrC,OAAO,KAAA;EACP,QAAQ,KAAA;EACT,CAAC;CAEF,MAAM,eAAe,kBAAkB;EACrC,MAAM,QAAQ,SAAS;EACvB,MAAM,SAAS,SAAS;AACxB,WAAS,SACP,KAAK,UAAU,SAAS,KAAK,WAAW,SAAS,OAAO;GAAE;GAAO;GAAQ,CAC1E;IACA,CAAC,QAAQ,CAAC;AAIb,mBAAkB;EAChB;EACU,UAJK,cAAc,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC;EAKlD,UAAU;EACX,CAAC;AAEF,QAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atom-learning/components",
-  "version": "8.0.1",
+  "version": "8.0.3",
   "description": "",
   "homepage": "https://github.com/Atom-Learning/components#readme",
   "bugs": {