@octopusdeploy/design-system-components/dist/src/hooks/useObserveElementSize.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useObserveElementSize = useObserveElementSize;
const react_1 = require("react");
function useObserveElementSize(observedElement, onSizeChange, onCleanup) {
    const onSizeChangeRef = (0, react_1.useRef)(onSizeChange);
    onSizeChangeRef.current = onSizeChange;
    const onCleanupRef = (0, react_1.useRef)(onCleanup);
    onCleanupRef.current = onCleanup;
    const lastSizeRef = (0, react_1.useRef)(null);
    (0, react_1.useLayoutEffect)(() => {
        if (!observedElement)
            return;
        lastSizeRef.current = null;
        const observerCallback = () => {
            const width = observedElement.offsetWidth;
            const height = observedElement.offsetHeight;
            if (lastSizeRef.current?.width === width && lastSizeRef.current.height === height)
                return;
            lastSizeRef.current = { width, height };
            onSizeChangeRef.current({
                width,
                height,
                element: observedElement,
            });
        };
        const resizeObserver = new ResizeObserver(observerCallback);
        resizeObserver.observe(observedElement);
        return () => {
            resizeObserver.disconnect();
            onCleanupRef.current?.();
        };
    }, [observedElement]);
}