one/dist/cjs/platform/ui/Portal.cjs

One is a React framework for web, iOS, and Android apps.

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
	for (var name in all) __defProp(target, name, {
		get: all[name],
		enumerable: true
	});
};
var __copyProps = (to, from, except, desc) => {
	if (from && typeof from === "object" || typeof from === "function") {
		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
			get: () => from[key],
			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
		});
	}
	return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Portal_exports = {};
__export(Portal_exports, {
	Portal: () => Portal,
	PortalHost: () => PortalHost
});
module.exports = __toCommonJS(Portal_exports);
var import_react = require("react");
var import_react_dom = require("react-dom");
var import_DomView = require("../web/DomView.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
const hosts = /* @__PURE__ */ new Map();
const portals = [];
function refresh() {
	for (let i = 0; i < portals.length; i++) {
		const portal = portals[i];
		const replaced = portal.name != null && portals.slice(i + 1).some((other) => other.name === portal.name);
		if (replaced) {
			portal.content.remove();
			continue;
		}
		const host = portal.hostName == null ? null : hosts.get(portal.hostName);
		const target = host ?? portal.source;
		portal.content.removeAttribute("style");
		Object.assign(portal.content.style, host ? {
			...import_DomView.VIEW_BASE,
			...portal.style,
			position: "absolute",
			inset: "0",
			width: "100%",
			height: "100%",
			pointerEvents: "none"
		} : { display: "contents" });
		portal.source.style.position = host ? "absolute" : portal.style.position ?? "relative";
		target.appendChild(portal.content);
	}
}
function Portal({ hostName, name, children, style, testID, nativeID, accessibilityLabel }) {
	const source = (0, import_react.useRef)(null);
	const entry = (0, import_react.useRef)(null);
	const [content, setContent] = (0, import_react.useState)(null);
	(0, import_react.useEffect)(() => {
		if (!source.current) return;
		const node = document.createElement("div");
		const value = {
			hostName: hostName || void 0,
			name: name || void 0,
			source: source.current,
			content: node,
			style: (0, import_DomView.domStyle)(style)
		};
		entry.current = value;
		portals.push(value);
		setContent(node);
		refresh();
		return () => {
			portals.splice(portals.indexOf(value), 1);
			node.remove();
			entry.current = null;
			refresh();
		};
	}, []);
	(0, import_react.useEffect)(() => {
		const value = entry.current;
		if (!value) return;
		value.hostName = hostName || void 0;
		value.name = name || void 0;
		value.style = (0, import_DomView.domStyle)(style);
		refresh();
	}, [
		hostName,
		name,
		style
	]);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
		ref: source,
		"data-testid": testID,
		id: nativeID,
		"aria-label": accessibilityLabel,
		style: {
			...import_DomView.VIEW_BASE,
			...(0, import_DomView.domStyle)(style)
		},
		children: content ? (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			style: {
				display: "contents",
				pointerEvents: "auto"
			},
			children
		}), content) : null
	});
}
function PortalHost({ name, children, style, testID, nativeID, accessibilityLabel }) {
	const ref = (0, import_react.useRef)(null);
	(0, import_react.useEffect)(() => {
		const node = ref.current;
		if (!node) return;
		hosts.set(name, node);
		refresh();
		return () => {
			if (hosts.get(name) === node) hosts.delete(name);
			refresh();
		};
	}, [name]);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
		ref,
		"data-testid": testID,
		id: nativeID,
		"aria-label": accessibilityLabel,
		style: {
			...import_DomView.VIEW_BASE,
			...(0, import_DomView.domStyle)(style),
			pointerEvents: "none"
		},
		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			style: {
				display: "contents",
				pointerEvents: "auto"
			},
			children
		})
	});
}