@mantine/core/esm/components/OverflowList/use-dimensions.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { useEffect, useRef, useState } from "react";
import { flushSync } from "react-dom";
//#region packages/@mantine/core/src/components/OverflowList/use-dimensions.tsx
function useDimensions(elementRef) {
	const resizeObserverRef = useRef(null);
	const [dimensions, setDimensions] = useState(null);
	useEffect(() => {
		if (!elementRef.current) return;
		resizeObserverRef.current = new ResizeObserver((entries) => {
			if (entries[0]) {
				const entry = entries[0];
				const updateDimensions = () => {
					setDimensions({
						width: entry.borderBoxSize[0]?.inlineSize ?? entry.target.clientWidth,
						height: entry.borderBoxSize[0]?.blockSize ?? entry.target.clientHeight,
						contentWidth: entry.contentRect.width,
						contentHeight: entry.contentRect.height
					});
				};
				flushSync(updateDimensions);
			}
		});
		resizeObserverRef.current.observe(elementRef.current);
		return () => {
			if (resizeObserverRef.current) {
				resizeObserverRef.current.disconnect();
				resizeObserverRef.current = null;
			}
		};
	}, [elementRef.current]);
	return dimensions;
}
//#endregion
export { useDimensions };

//# sourceMappingURL=use-dimensions.mjs.map