@atom-learning/components 8.0.1 → 8.0.2

package/dist/index.cjs.js

@@ -1370,7 +1370,7 @@ var useCallbackRef = () => {
 var useCallbackRefState = () => {
 	const [elRef, setElRef] = react.useState(null);
 	return [elRef, react.useCallback((el) => {
-		if (el) setElRef(el);
+		if (el) setElRef((prev) => prev === el ? prev : el);
 	}, [])];
 };
 //#endregion
@@ -1506,7 +1506,11 @@ var createResizeObserver = (callback) => {
 	}
 };
 var useResizeObserver = ({ delay = 500, elements, onResize }) => {
-	const observer = react.useMemo(() => createResizeObserver((0, throttle_debounce.debounce)(delay, onResize)), [delay, onResize]);
+	const onResizeRef = react.useRef(onResize);
+	react.useLayoutEffect(() => {
+		onResizeRef.current = onResize;
+	});
+	const observer = react.useMemo(() => createResizeObserver((0, throttle_debounce.debounce)(delay, (entries) => onResizeRef.current(entries))), [delay]);
 	react.useEffect(() => {
 		elements.forEach((element) => {
 			if (element) observer?.observe(element);
@@ -9702,7 +9706,7 @@ var useScrollPosition = ({ element, delay = 500, delayMethod = "throttle" }) =>
 	(0, react.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
 			});
@@ -9726,9 +9730,11 @@ var useSize = ({ element, delay = 500 }) => {
 		height: void 0
 	});
 	const handleResize = (0, react.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({