@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;
    (0, react_1.useLayoutEffect)(() => {
        if (!observedElement)
            return;
        const observerCallback = () => {
            onSizeChangeRef.current({
                width: observedElement.offsetWidth,
                height: observedElement.offsetHeight,
                element: observedElement,
            });
        };
        const resizeObserver = new ResizeObserver(observerCallback);
        resizeObserver.observe(observedElement);
        return () => {
            resizeObserver.disconnect();
            onCleanupRef.current?.();
        };
    }, [observedElement]);
}