@lobehub/ui/es/Popover/PopoverPortal.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import { LOBE_THEME_APP_ID } from "../ThemeProvider/constants.mjs";
import { useEffect, useState } from "react";

//#region src/Popover/PopoverPortal.tsx
const PORTAL_ATTR = "data-lobe-ui-popover-portal";
const POPOVER_CONTAINER_ATTR = "data-lobe-ui-popover-container";
const containerMap = /* @__PURE__ */ new WeakMap();
const getOrCreateContainer = (root) => {
	const resolvedRoot = (() => {
		if (typeof document === "undefined") return root;
		if (typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot) return root;
		if (!(root === document.body)) return root;
		const themeApp = document.querySelector(`#${LOBE_THEME_APP_ID}`);
		if (themeApp) return themeApp;
		const popoverContainer = document.querySelector(`[${POPOVER_CONTAINER_ATTR}="true"]`);
		if (popoverContainer) return popoverContainer;
		return root;
	})();
	const cached = containerMap.get(resolvedRoot);
	if (cached && cached.isConnected) return cached;
	const el = document.createElement("div");
	el.setAttribute(PORTAL_ATTR, "true");
	resolvedRoot.append(el);
	containerMap.set(resolvedRoot, el);
	return el;
};
const resolveRoot = (root) => {
	if (root) return root;
	return document.body;
};
const usePopoverPortalContainer = (root) => {
	const [container, setContainer] = useState(null);
	useEffect(() => {
		const resolved = resolveRoot(root);
		if (!resolved) return;
		setContainer(getOrCreateContainer(resolved));
	}, [root, container?.isConnected]);
	return container;
};

//#endregion
export { POPOVER_CONTAINER_ATTR, usePopoverPortalContainer };
//# sourceMappingURL=PopoverPortal.mjs.map