import * as React from "react";
import { isBrowser, supportsResizeObserver } from "../utils/globals.js";
import { useContentMemo } from "./useContentMemo.js";
import { useSSRLayoutEffect } from "./useSSRLayoutEffect.js";
function useResizeObserver(callback, optionsInput, ref) {
  const observer = React.useRef();
  const options = useContentMemo(optionsInput);
  const observe = React.useCallback((element) => {
    observer.current = new ResizeObserver(callback);
    observer.current.observe(element, options);
  }, [callback, options]);
  const unobserve = React.useCallback((element) => {
    if (observer.current) {
      observer.current.unobserve(element);
    }
  }, []);
  const disconnect = React.useCallback(() => {
    var _a;
    (_a = observer.current) == null ? void 0 : _a.disconnect();
  }, []);
  useSSRLayoutEffect(() => {
    if (!!(ref == null ? void 0 : ref.current) && isBrowser && supportsResizeObserver) {
      observe(ref.current);
      return () => {
        if (ref.current) {
          unobserve(ref.current);
        }
      };
    }
    return void 0;
  }, [observe, unobserve, ref]);
  React.useEffect(() => disconnect, [disconnect]);
  return {
    observer,
    unobserve,
    disconnect
  };
}
export {
  useResizeObserver
};
//# sourceMappingURL=useResizeObserver.js.map
