"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useFloatingPanelRoot = useFloatingPanelRoot;
var _react = require("react");
var _debounce = _interopRequireDefault(require("lodash-es/debounce"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function useFloatingPanelRoot({
  containerElement,
  pageContentElement
}) {
  (0, _react.useEffect)(() => {
    // this is not an exceptional case: when there is no header this could be omitted
    if (!containerElement || !pageContentElement) {
      return;
    }
    const onResize = (0, _debounce.default)(() => {
      const contentRect = pageContentElement.getBoundingClientRect();
      containerElement.style.top = `${contentRect.top}px`;
    }, 100);
    onResize();
    const resizeObserver = new ResizeObserver(onResize);
    resizeObserver.observe(pageContentElement);
    return () => {
      onResize.cancel();
      resizeObserver.disconnect();
    };
  }, [containerElement, pageContentElement]);
}