import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
const PORTAL_ID = '--tailwind-portal';
export function Portal({ children }) {
    const tempNode = useRef(null);
    const [portalEl, setPortalEl] = useState(null);
    // hack to have the Portal not generating hydration errors (content mismatch) on SSR / CSR
    useEffect(() => {
        if (tempNode.current) { // we are on the browser -> we an use the portal
            const doc = tempNode.current.ownerDocument;
            let portalEl = doc.getElementById(PORTAL_ID);
            if (!portalEl) {
                portalEl = doc.createElement('DIV');
                portalEl.id = PORTAL_ID;
                doc.body.appendChild(portalEl);
            }
            setPortalEl(portalEl);
        }
    }, [tempNode.current]);
    if (portalEl) {
        return createPortal(children, portalEl);
    }
    else {
        return _jsx("span", { ref: tempNode });
    }
}
//# sourceMappingURL=Portal.js.map