import { jsx } from "react/jsx-runtime";
import { useRef, useEffect } from "react";
import Dropdown from "../Dropdown.js";
function useOutsideClickHandler(ref, handler) {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        handler();
      }
    }
    document.addEventListener("mouseup", handleClickOutside);
    return () => {
      document.removeEventListener("mouseup", handleClickOutside);
    };
  }, [ref, handler]);
}
const HeaderMenu = ({ bounds, open, handleClose, items }) => {
  const divRef = useRef(null);
  useOutsideClickHandler(divRef, handleClose);
  return /* @__PURE__ */ jsx(Dropdown, { autoWidthOverlay: true, menu: items, open, placement: "bottomLeft", children: /* @__PURE__ */ jsx(
    "div",
    {
      ref: divRef,
      style: open ? {
        height: bounds.height,
        left: bounds.x,
        position: "fixed",
        top: bounds.y,
        width: bounds.width
      } : {
        display: "none"
      },
      onClick: handleClose
    }
  ) });
};
export {
  HeaderMenu
};
