import { useCallback, useEffect, useMemo, useState } from 'react';
export const useElementSize = (ref) => {
    const [size, setSize] = useState(null);
    const observer = useMemo(() => {
        if (typeof ResizeObserver === 'undefined') {
            return;
        }
        return new ResizeObserver((entries) => {
            setSize({
                width: entries[0].contentRect.width,
                height: entries[0].contentRect.height,
            });
        });
    }, []);
    const updateSize = useCallback(() => {
        if (ref === null) {
            return;
        }
        const rect = ref.getClientRects();
        setSize({
            width: rect[0].width,
            height: rect[0].height,
        });
    }, [ref]);
    useEffect(() => {
        updateSize();
        if (!observer) {
            return;
        }
        if (ref) {
            observer.observe(ref);
        }
        return () => {
            if (ref) {
                observer.unobserve(ref);
            }
        };
    }, [observer, ref, updateSize]);
    return size;
};
