import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import styled from "styled-components";
const Inner = styled.div `
  z-index: 10000;
  position: absolute;
`;
const setDefaultPosition = (containerRef, innerRef) => {
    if (!containerRef.current || !innerRef.current)
        return;
    const { left, top, height, width } = containerRef.current.getBoundingClientRect();
    innerRef.current.style.left = `${left}px`;
    innerRef.current.style.top = `${top + height}px`;
    innerRef.current.style.width = `${width}px`;
};
const Portal = ({ children }) => {
    const containerRef = useRef(null);
    const innerRef = useRef(null);
    useEffect(() => {
        if (!children || !innerRef.current || !containerRef.current)
            return;
        setDefaultPosition(containerRef, innerRef);
    }, [children]);
    return (_jsx("div", { className: "portal__container", ref: containerRef, children: createPortal(_jsx(Inner, { className: "portal__inner", ref: innerRef, 
            // propagation from portal breaks click outside
            onClick: (e) => e.stopPropagation(), children: children }), document.body) }));
};
export default Portal;
//# sourceMappingURL=portal.js.map