"use client";
import { useCallback, useRef, useState } from "react";
import { useResizeObserver } from "./useResizeObserver.js";
/**
 * A small wrapper around the {@link useResizeObserver} hook to calculate the
 * element's size.
 *
 * @example Simple Example
 * ```tsx
 * import { useElementSize } from "@react-md/core";
 * import { type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   const { height, width, elementRef } = useElementSize();
 *
 *   return (
 *     <div ref={elementRef}>
 *       {`height: ${height}, width: ${width}`}
 *     </div>
 *   );
 * }
 * ```
 *
 * @since 6.0.0
 */ export function useElementSize(options = {}) {
    const { defaultValue } = options;
    const observedOnce = useRef(false);
    const [size, setSize] = useState(()=>{
        if (typeof defaultValue === "function") {
            return defaultValue();
        }
        return defaultValue ?? {
            height: 0,
            width: 0
        };
    });
    const elementRef = useResizeObserver({
        ...options,
        onUpdate: useCallback((entry)=>{
            observedOnce.current = true;
            const size = entry.borderBoxSize[0];
            setSize({
                height: size.blockSize,
                width: size.inlineSize
            });
        }, [])
    });
    return {
        ...size,
        elementRef,
        observedOnce: observedOnce.current
    };
}

//# sourceMappingURL=useElementSize.js.map