@monimesl/dot-renderer-react 0.1.0-alpha.10

package/dist/vendor/@base-ui/react/floating-ui-react/components/FloatingFocusManager.js

@@ -0,0 +1,477 @@
+"use client";
+import { useMergedRefs } from "../../../utils/useMergedRefs.js";
+import { getNodeName, getWindow, isHTMLElement } from "../../../../@floating-ui/utils/dist/floating-ui.utils.dom.js";
+import { useStableCallback } from "../../../utils/useStableCallback.js";
+import { useIsoLayoutEffect } from "../../../utils/useIsoLayoutEffect.js";
+import { ownerDocument } from "../../../utils/owner.js";
+import { focusOut } from "../../internals/reason-parts.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { useTimeout } from "../../../utils/useTimeout.js";
+import { webkit } from "../../../utils/platform/engine.js";
+import { isVirtualClick, isVirtualPointerEvent, stopEvent } from "../utils/event.js";
+import { activeElement, contains, getTarget } from "../../../utils/shadowDom.js";
+import { getFloatingFocusElement, isTypeableCombobox, isTypeableElement } from "../utils/element.js";
+import { addEventListener } from "../../../utils/addEventListener.js";
+import { mergeCleanups } from "../../../utils/mergeCleanups.js";
+import { useValueAsRef } from "../../../utils/useValueAsRef.js";
+import { useAnimationFrame } from "../../../utils/useAnimationFrame.js";
+import { FocusGuard } from "../../utils/FocusGuard.js";
+import { isElementVisible } from "../utils/composite.js";
+import { focusable, getNextTabbable, getPreviousTabbable, isOutsideEvent, isTabbable, tabbable } from "../utils/tabbable.js";
+import { getNodeAncestors, getNodeChildren } from "../utils/nodes.js";
+import { createAttribute } from "../utils/createAttribute.js";
+import { enqueueFocus } from "../utils/enqueueFocus.js";
+import { markOthers } from "../utils/markOthers.js";
+import "../../internals/constants.js";
+import { usePortalContext } from "./FloatingPortal.js";
+import { useFloatingTree } from "./FloatingTree.js";
+import { resolveRef } from "../../utils/resolveRef.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/floating-ui-react/components/FloatingFocusManager.mjs
+function getEventType(event, lastInteractionType) {
+	const win = getWindow(getTarget(event));
+	if (event instanceof win.KeyboardEvent) return "keyboard";
+	if (event instanceof win.FocusEvent) return lastInteractionType || "keyboard";
+	if ("pointerType" in event) return event.pointerType || "keyboard";
+	if ("touches" in event) return "touch";
+	if (event instanceof win.MouseEvent) return lastInteractionType || (event.detail === 0 ? "keyboard" : "mouse");
+	return "";
+}
+const LIST_LIMIT = 20;
+let previouslyFocusedElements = [];
+function clearDisconnectedPreviouslyFocusedElements() {
+	previouslyFocusedElements = previouslyFocusedElements.filter((entry) => {
+		return entry.deref()?.isConnected;
+	});
+}
+function addPreviouslyFocusedElement(element) {
+	clearDisconnectedPreviouslyFocusedElements();
+	if (element && getNodeName(element) !== "body") {
+		previouslyFocusedElements.push(new WeakRef(element));
+		if (previouslyFocusedElements.length > LIST_LIMIT) previouslyFocusedElements = previouslyFocusedElements.slice(-20);
+	}
+}
+function getPreviouslyFocusedElement() {
+	clearDisconnectedPreviouslyFocusedElements();
+	return previouslyFocusedElements[previouslyFocusedElements.length - 1]?.deref();
+}
+function getFirstTabbableElement(container) {
+	if (!container) return null;
+	if (isTabbable(container)) return container;
+	return tabbable(container)[0] || container;
+}
+function handleTabIndex(floatingFocusElement) {
+	if (floatingFocusElement.hasAttribute("tabindex") && !floatingFocusElement.hasAttribute("data-tabindex")) return;
+	if (!floatingFocusElement.getAttribute("role")?.includes("dialog")) return;
+	const tabbableContent = focusable(floatingFocusElement).filter((element) => {
+		const dataTabIndex = element.getAttribute("data-tabindex") || "";
+		return isTabbable(element) || element.hasAttribute("data-tabindex") && !dataTabIndex.startsWith("-");
+	});
+	const tabIndex = floatingFocusElement.getAttribute("tabindex");
+	if (tabbableContent.length === 0) {
+		if (tabIndex !== "0") {
+			floatingFocusElement.setAttribute("tabindex", "0");
+			floatingFocusElement.setAttribute("data-tabindex", "0");
+		}
+	} else if (tabIndex !== "-1" || floatingFocusElement.hasAttribute("data-tabindex") && floatingFocusElement.getAttribute("data-tabindex") !== "-1") {
+		floatingFocusElement.setAttribute("tabindex", "-1");
+		floatingFocusElement.setAttribute("data-tabindex", "-1");
+	}
+}
+/**
+* Provides focus management for the floating element.
+* @see https://floating-ui.com/docs/FloatingFocusManager
+* @internal
+*/
+function FloatingFocusManager(props) {
+	const { context, children, disabled = false, initialFocus = true, returnFocus = true, restoreFocus = false, modal = true, closeOnFocusOut = true, openInteractionType = "", nextFocusableElement, previousFocusableElement, beforeContentFocusGuardRef, externalTree, getInsideElements } = props;
+	const store = "rootStore" in context ? context.rootStore : context;
+	const open = store.useState("open");
+	const domReference = store.useState("domReferenceElement");
+	const floating = store.useState("floatingElement");
+	const { events, dataRef } = store.context;
+	const getNodeId = useStableCallback(() => dataRef.current.floatingContext?.nodeId);
+	const ignoreInitialFocus = initialFocus === false;
+	const isUntrappedTypeableCombobox = isTypeableCombobox(domReference) && ignoreInitialFocus;
+	const initialFocusRef = useValueAsRef(initialFocus);
+	const returnFocusRef = useValueAsRef(returnFocus);
+	const openInteractionTypeRef = useValueAsRef(openInteractionType);
+	const openRef = useValueAsRef(open);
+	const tree = useFloatingTree(externalTree);
+	const portalContext = usePortalContext();
+	const preventReturnFocusRef = React.useRef(false);
+	const isPointerDownRef = React.useRef(false);
+	const pointerDownOutsideRef = React.useRef(false);
+	const lastFocusedTabbableRef = React.useRef(null);
+	const closeTypeRef = React.useRef("");
+	const lastInteractionTypeRef = React.useRef("");
+	const beforeGuardRef = React.useRef(null);
+	const afterGuardRef = React.useRef(null);
+	const mergedBeforeGuardRef = useMergedRefs(beforeGuardRef, beforeContentFocusGuardRef, portalContext?.beforeInsideRef);
+	const mergedAfterGuardRef = useMergedRefs(afterGuardRef, portalContext?.afterInsideRef);
+	const blurTimeout = useTimeout();
+	const pointerDownTimeout = useTimeout();
+	const restoreFocusFrame = useAnimationFrame();
+	const isInsidePortal = portalContext != null;
+	const floatingFocusElement = getFloatingFocusElement(floating);
+	const getTabbableContent = useStableCallback((container = floatingFocusElement) => {
+		return container ? tabbable(container) : [];
+	});
+	const getResolvedInsideElements = useStableCallback(() => getInsideElements?.().filter((element) => element != null) ?? []);
+	React.useEffect(() => {
+		if (disabled || !modal) return;
+		function onKeyDown(event) {
+			if (event.key === "Tab") {
+				if (contains(floatingFocusElement, activeElement(ownerDocument(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) stopEvent(event);
+			}
+		}
+		const doc = ownerDocument(floatingFocusElement);
+		return addEventListener(doc, "keydown", onKeyDown);
+	}, [
+		disabled,
+		floatingFocusElement,
+		modal,
+		isUntrappedTypeableCombobox,
+		getTabbableContent
+	]);
+	React.useEffect(() => {
+		if (disabled || !open) return;
+		const doc = ownerDocument(floatingFocusElement);
+		function clearPointerDownOutside() {
+			pointerDownOutsideRef.current = false;
+		}
+		function onPointerDown(event) {
+			const target = getTarget(event);
+			const insideElements = getResolvedInsideElements();
+			const pointerTargetInside = contains(floating, target) || contains(domReference, target) || contains(portalContext?.portalNode, target) || insideElements.some((element) => element === target || contains(element, target));
+			pointerDownOutsideRef.current = !pointerTargetInside;
+			lastInteractionTypeRef.current = event.pointerType || "keyboard";
+			if (target?.closest(`[data-base-ui-click-trigger]`)) {
+				isPointerDownRef.current = true;
+				pointerDownTimeout.start(0, () => {
+					isPointerDownRef.current = false;
+				});
+			}
+		}
+		function onKeyDown() {
+			lastInteractionTypeRef.current = "keyboard";
+		}
+		return mergeCleanups(addEventListener(doc, "pointerdown", onPointerDown, true), addEventListener(doc, "pointerup", clearPointerDownOutside, true), addEventListener(doc, "pointercancel", clearPointerDownOutside, true), addEventListener(doc, "keydown", onKeyDown, true), clearPointerDownOutside);
+	}, [
+		disabled,
+		floating,
+		domReference,
+		floatingFocusElement,
+		open,
+		portalContext,
+		pointerDownTimeout,
+		getResolvedInsideElements
+	]);
+	React.useEffect(() => {
+		if (disabled || !closeOnFocusOut) return;
+		const doc = ownerDocument(floatingFocusElement);
+		function handlePointerDown() {
+			isPointerDownRef.current = true;
+			pointerDownTimeout.start(0, () => {
+				isPointerDownRef.current = false;
+			});
+		}
+		function handleFocusIn(event) {
+			const target = getTarget(event);
+			if (isTabbable(target)) lastFocusedTabbableRef.current = target;
+		}
+		function handleFocusOutside(event) {
+			const relatedTarget = event.relatedTarget;
+			const currentTarget = event.currentTarget;
+			const target = getTarget(event);
+			if (modal && relatedTarget == null && target != null && contains(floating, target)) addPreviouslyFocusedElement(target);
+			queueMicrotask(() => {
+				const nodeId = getNodeId();
+				const triggers = store.context.triggerElements;
+				const insideElements = getResolvedInsideElements();
+				const isRelatedFocusGuard = relatedTarget?.hasAttribute(createAttribute("focus-guard")) && [
+					beforeGuardRef.current,
+					afterGuardRef.current,
+					portalContext?.beforeInsideRef.current,
+					portalContext?.afterInsideRef.current,
+					portalContext?.beforeOutsideRef.current,
+					portalContext?.afterOutsideRef.current,
+					resolveRef(previousFocusableElement),
+					resolveRef(nextFocusableElement)
+				].includes(relatedTarget);
+				const movedToUnrelatedNode = !(contains(domReference, relatedTarget) || contains(floating, relatedTarget) || contains(relatedTarget, floating) || contains(portalContext?.portalNode, relatedTarget) || insideElements.some((element) => element === relatedTarget || contains(element, relatedTarget)) || triggers.hasMatchingElement((trigger) => contains(trigger, relatedTarget)) || isRelatedFocusGuard || tree && (getNodeChildren(tree.nodesRef.current, nodeId).find((node) => contains(node.context?.elements.floating, relatedTarget) || contains(node.context?.elements.domReference, relatedTarget)) || getNodeAncestors(tree.nodesRef.current, nodeId).find((node) => [node.context?.elements.floating, getFloatingFocusElement(node.context?.elements.floating)].includes(relatedTarget) || node.context?.elements.domReference === relatedTarget)));
+				if (currentTarget === domReference && floatingFocusElement) handleTabIndex(floatingFocusElement);
+				if (restoreFocus && currentTarget !== domReference && !isElementVisible(target) && activeElement(doc) === doc.body) {
+					if (isHTMLElement(floatingFocusElement)) {
+						floatingFocusElement.focus();
+						if (restoreFocus === "popup") {
+							restoreFocusFrame.request(() => {
+								floatingFocusElement.focus();
+							});
+							return;
+						}
+					}
+					const tabbableContent = getTabbableContent();
+					const prevTabbable = lastFocusedTabbableRef.current;
+					const nodeToFocus = (prevTabbable && tabbableContent.includes(prevTabbable) ? prevTabbable : null) || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
+					if (isHTMLElement(nodeToFocus)) nodeToFocus.focus();
+				}
+				if (dataRef.current.insideReactTree) {
+					dataRef.current.insideReactTree = false;
+					return;
+				}
+				if ((isUntrappedTypeableCombobox ? true : !modal) && relatedTarget && movedToUnrelatedNode && !isPointerDownRef.current && (isUntrappedTypeableCombobox || relatedTarget !== getPreviouslyFocusedElement())) {
+					preventReturnFocusRef.current = true;
+					store.setOpen(false, createChangeEventDetails(focusOut, event));
+				}
+			});
+		}
+		function markInsideReactTree() {
+			if (pointerDownOutsideRef.current) return;
+			dataRef.current.insideReactTree = true;
+			blurTimeout.start(0, () => {
+				dataRef.current.insideReactTree = false;
+			});
+		}
+		const domReferenceElement = isHTMLElement(domReference) ? domReference : null;
+		if (!floating && !domReferenceElement) return;
+		return mergeCleanups(domReferenceElement && addEventListener(domReferenceElement, "focusout", handleFocusOutside), domReferenceElement && addEventListener(domReferenceElement, "pointerdown", handlePointerDown), floating && addEventListener(floating, "focusin", handleFocusIn), floating && addEventListener(floating, "focusout", handleFocusOutside), floating && portalContext && addEventListener(floating, "focusout", markInsideReactTree, true));
+	}, [
+		disabled,
+		domReference,
+		floating,
+		floatingFocusElement,
+		modal,
+		tree,
+		portalContext,
+		store,
+		closeOnFocusOut,
+		restoreFocus,
+		getTabbableContent,
+		isUntrappedTypeableCombobox,
+		getNodeId,
+		dataRef,
+		blurTimeout,
+		pointerDownTimeout,
+		restoreFocusFrame,
+		nextFocusableElement,
+		previousFocusableElement,
+		getResolvedInsideElements
+	]);
+	React.useEffect(() => {
+		if (disabled || !floating || !open) return;
+		const portalNodes = Array.from(portalContext?.portalNode?.querySelectorAll(`[${createAttribute("portal")}]`) || []);
+		const rootAncestorComboboxDomReference = (tree ? getNodeAncestors(tree.nodesRef.current, getNodeId()) : []).find((node) => isTypeableCombobox(node.context?.elements.domReference || null))?.context?.elements.domReference;
+		const insideElements = [
+			...[
+				floating,
+				...portalNodes,
+				beforeGuardRef.current,
+				afterGuardRef.current,
+				portalContext?.beforeOutsideRef.current,
+				portalContext?.afterOutsideRef.current,
+				...getResolvedInsideElements()
+			],
+			rootAncestorComboboxDomReference,
+			resolveRef(previousFocusableElement),
+			resolveRef(nextFocusableElement),
+			isUntrappedTypeableCombobox ? domReference : null
+		].filter((x) => x != null);
+		const ariaHiddenCleanup = markOthers(insideElements, {
+			ariaHidden: modal || isUntrappedTypeableCombobox,
+			mark: false
+		});
+		const markerInsideElements = [floating, ...portalNodes].filter((x) => x != null);
+		const markerCleanup = markOthers(markerInsideElements);
+		return () => {
+			markerCleanup();
+			ariaHiddenCleanup();
+		};
+	}, [
+		open,
+		disabled,
+		domReference,
+		floating,
+		modal,
+		portalContext,
+		isUntrappedTypeableCombobox,
+		tree,
+		getNodeId,
+		nextFocusableElement,
+		previousFocusableElement,
+		getResolvedInsideElements
+	]);
+	useIsoLayoutEffect(() => {
+		if (!open || disabled || !isHTMLElement(floatingFocusElement)) return;
+		closeTypeRef.current = "";
+		lastInteractionTypeRef.current = "";
+		const doc = ownerDocument(floatingFocusElement);
+		const previouslyFocusedElement = activeElement(doc);
+		queueMicrotask(() => {
+			const initialFocusValueOrFn = initialFocusRef.current;
+			const resolvedInitialFocus = typeof initialFocusValueOrFn === "function" ? initialFocusValueOrFn(openInteractionTypeRef.current || "") : initialFocusValueOrFn;
+			if (resolvedInitialFocus === void 0 || resolvedInitialFocus === false) return;
+			if (contains(floatingFocusElement, previouslyFocusedElement)) return;
+			let focusableElements = null;
+			const getDefaultFocusElement = () => {
+				if (focusableElements == null) focusableElements = getTabbableContent(floatingFocusElement);
+				return focusableElements[0] || floatingFocusElement;
+			};
+			let elToFocus;
+			if (resolvedInitialFocus === true || resolvedInitialFocus === null) elToFocus = getDefaultFocusElement();
+			else elToFocus = resolveRef(resolvedInitialFocus);
+			elToFocus = elToFocus || getDefaultFocusElement();
+			const hadFocusInside = contains(floatingFocusElement, activeElement(doc));
+			enqueueFocus(elToFocus, {
+				preventScroll: elToFocus === floatingFocusElement,
+				shouldFocus() {
+					if (!openRef.current) return false;
+					if (hadFocusInside) return true;
+					const currentActiveElement = activeElement(doc);
+					return !(currentActiveElement !== elToFocus && contains(floatingFocusElement, currentActiveElement));
+				}
+			});
+		});
+	}, [
+		disabled,
+		open,
+		floatingFocusElement,
+		getTabbableContent,
+		initialFocusRef,
+		openInteractionTypeRef,
+		openRef
+	]);
+	useIsoLayoutEffect(() => {
+		if (disabled || !floatingFocusElement) return;
+		const doc = ownerDocument(floatingFocusElement);
+		const elementFocusedBeforeOpen = activeElement(doc);
+		const preferPreviousFocus = openInteractionTypeRef.current == null;
+		addPreviouslyFocusedElement(elementFocusedBeforeOpen);
+		function onOpenChangeLocal(details) {
+			if (!details.open) closeTypeRef.current = getEventType(details.nativeEvent, lastInteractionTypeRef.current);
+			if (details.reason === "trigger-hover" && details.nativeEvent.type === "mouseleave") preventReturnFocusRef.current = true;
+			if (details.reason !== "outside-press") return;
+			if (details.nested) preventReturnFocusRef.current = false;
+			else if (isVirtualClick(details.nativeEvent) || isVirtualPointerEvent(details.nativeEvent)) preventReturnFocusRef.current = false;
+			else {
+				let isPreventScrollSupported = false;
+				ownerDocument(floatingFocusElement).createElement("div").focus({ get preventScroll() {
+					isPreventScrollSupported = true;
+					return false;
+				} });
+				if (isPreventScrollSupported) preventReturnFocusRef.current = false;
+				else preventReturnFocusRef.current = true;
+			}
+		}
+		events.on("openchange", onOpenChangeLocal);
+		function getReturnElement(closeType) {
+			const returnFocusValueOrFn = returnFocusRef.current;
+			let resolvedReturnFocusValue = typeof returnFocusValueOrFn === "function" ? returnFocusValueOrFn(closeType) : returnFocusValueOrFn;
+			if (resolvedReturnFocusValue === void 0 || resolvedReturnFocusValue === false) return null;
+			if (resolvedReturnFocusValue === null) resolvedReturnFocusValue = true;
+			const referenceReturnElement = domReference?.isConnected ? domReference : null;
+			const previousReturnElement = elementFocusedBeforeOpen?.isConnected && getNodeName(elementFocusedBeforeOpen) !== "body" ? elementFocusedBeforeOpen : null;
+			let defaultReturnElement = preferPreviousFocus ? previousReturnElement || referenceReturnElement : referenceReturnElement || previousReturnElement;
+			if (!defaultReturnElement) defaultReturnElement = getPreviouslyFocusedElement() || null;
+			if (typeof resolvedReturnFocusValue === "boolean") return defaultReturnElement;
+			return resolveRef(resolvedReturnFocusValue) || defaultReturnElement || null;
+		}
+		return () => {
+			events.off("openchange", onOpenChangeLocal);
+			const activeEl = activeElement(doc);
+			const insideElements = getResolvedInsideElements();
+			const isFocusInsideFloatingTree = contains(floating, activeEl) || insideElements.some((element) => element === activeEl || contains(element, activeEl)) || tree && getNodeChildren(tree.nodesRef.current, getNodeId(), false).some((node) => contains(node.context?.elements.floating, activeEl));
+			const returnFocusValueOrFn = returnFocusRef.current;
+			const closeType = closeTypeRef.current;
+			const returnElement = getReturnElement(closeType);
+			queueMicrotask(() => {
+				const tabbableReturnElement = getFirstTabbableElement(returnElement);
+				const hasExplicitReturnFocus = typeof returnFocusValueOrFn !== "boolean";
+				if (returnFocusValueOrFn && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && (!hasExplicitReturnFocus && tabbableReturnElement !== activeEl && activeEl !== doc.body ? isFocusInsideFloatingTree : true)) {
+					const focusOptions = { preventScroll: true };
+					if (closeType === "keyboard") focusOptions.focusVisible = true;
+					tabbableReturnElement.focus(focusOptions);
+				}
+				preventReturnFocusRef.current = false;
+			});
+		};
+	}, [
+		disabled,
+		floating,
+		floatingFocusElement,
+		returnFocusRef,
+		openInteractionTypeRef,
+		events,
+		tree,
+		domReference,
+		getNodeId,
+		getResolvedInsideElements
+	]);
+	useIsoLayoutEffect(() => {
+		if (!webkit || open || !floating) return;
+		const activeEl = activeElement(ownerDocument(floating));
+		if (!isHTMLElement(activeEl) || !isTypeableElement(activeEl)) return;
+		if (contains(floating, activeEl)) activeEl.blur();
+	}, [open, floating]);
+	useIsoLayoutEffect(() => {
+		if (disabled || !portalContext) return;
+		portalContext.setFocusManagerState({
+			modal,
+			closeOnFocusOut,
+			open,
+			onOpenChange: store.setOpen,
+			domReference
+		});
+		return () => {
+			portalContext.setFocusManagerState(null);
+		};
+	}, [
+		disabled,
+		portalContext,
+		modal,
+		open,
+		store,
+		closeOnFocusOut,
+		domReference
+	]);
+	useIsoLayoutEffect(() => {
+		if (disabled || !floatingFocusElement) return;
+		handleTabIndex(floatingFocusElement);
+		return () => {
+			queueMicrotask(clearDisconnectedPreviouslyFocusedElements);
+		};
+	}, [disabled, floatingFocusElement]);
+	const shouldRenderGuards = !disabled && (modal ? !isUntrappedTypeableCombobox : true) && (isInsidePortal || modal);
+	return /*#__PURE__*/ jsxs(React.Fragment, { children: [
+		shouldRenderGuards && /*#__PURE__*/ jsx(FocusGuard, {
+			"data-type": "inside",
+			ref: mergedBeforeGuardRef,
+			onFocus: (event) => {
+				if (modal) {
+					const els = getTabbableContent();
+					enqueueFocus(els[els.length - 1]);
+				} else if (portalContext?.portalNode) {
+					preventReturnFocusRef.current = false;
+					if (isOutsideEvent(event, portalContext.portalNode)) getNextTabbable(domReference)?.focus();
+					else resolveRef(previousFocusableElement ?? portalContext.beforeOutsideRef)?.focus();
+				}
+			}
+		}),
+		children,
+		shouldRenderGuards && /*#__PURE__*/ jsx(FocusGuard, {
+			"data-type": "inside",
+			ref: mergedAfterGuardRef,
+			onFocus: (event) => {
+				if (modal) enqueueFocus(getTabbableContent()[0]);
+				else if (portalContext?.portalNode) {
+					if (closeOnFocusOut) preventReturnFocusRef.current = true;
+					if (isOutsideEvent(event, portalContext.portalNode)) getPreviousTabbable(domReference)?.focus();
+					else resolveRef(nextFocusableElement ?? portalContext.afterOutsideRef)?.focus();
+				}
+			}
+		})
+	] });
+}
+//#endregion
+export { FloatingFocusManager };

package/dist/vendor/@base-ui/react/floating-ui-react/components/FloatingPortal.js

@@ -0,0 +1,165 @@
+"use client";
+import { EMPTY_OBJECT } from "../../../utils/empty.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { isNode } from "../../../../@floating-ui/utils/dist/floating-ui.utils.dom.js";
+import { useStableCallback } from "../../../utils/useStableCallback.js";
+import { useIsoLayoutEffect } from "../../../utils/useIsoLayoutEffect.js";
+import "../../internals/reason-parts.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { useId as useId$1 } from "../../../utils/useId.js";
+import { addEventListener } from "../../../utils/addEventListener.js";
+import { mergeCleanups } from "../../../utils/mergeCleanups.js";
+import { FocusGuard } from "../../utils/FocusGuard.js";
+import { disableFocusInside, enableFocusInside, getNextTabbable, getPreviousTabbable, isOutsideEvent } from "../utils/tabbable.js";
+import { createAttribute } from "../utils/createAttribute.js";
+import { ownerVisuallyHidden } from "../../internals/constants.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ReactDOM from "react-dom";
+//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/floating-ui-react/components/FloatingPortal.mjs
+const PortalContext = /*#__PURE__*/ React.createContext(null);
+if (process.env.NODE_ENV !== "production") PortalContext.displayName = "PortalContext";
+const usePortalContext = () => React.useContext(PortalContext);
+const attr = createAttribute("portal");
+function useFloatingPortalNode(props = {}) {
+	const { ref, container: containerProp, componentProps = EMPTY_OBJECT, elementProps } = props;
+	const uniqueId = useId$1();
+	const parentPortalNode = usePortalContext()?.portalNode;
+	const [containerElement, setContainerElement] = React.useState(null);
+	const [portalNode, setPortalNode] = React.useState(null);
+	const setPortalNodeRef = useStableCallback((node) => {
+		if (node !== null) setPortalNode(node);
+	});
+	const containerRef = React.useRef(null);
+	useIsoLayoutEffect(() => {
+		if (containerProp === null) {
+			if (containerRef.current) {
+				containerRef.current = null;
+				setPortalNode(null);
+				setContainerElement(null);
+			}
+			return;
+		}
+		const resolvedContainer = (containerProp && (isNode(containerProp) ? containerProp : containerProp.current)) ?? parentPortalNode ?? document.body;
+		if (resolvedContainer == null) {
+			if (containerRef.current) {
+				containerRef.current = null;
+				setPortalNode(null);
+				setContainerElement(null);
+			}
+			return;
+		}
+		if (containerRef.current !== resolvedContainer) {
+			containerRef.current = resolvedContainer;
+			setPortalNode(null);
+			setContainerElement(resolvedContainer);
+		}
+	}, [containerProp, parentPortalNode]);
+	const portalElement = useRenderElement("div", componentProps, {
+		ref: [ref, setPortalNodeRef],
+		props: [{
+			id: uniqueId,
+			[attr]: ""
+		}, elementProps]
+	});
+	const portalSubtree = containerElement && portalElement ? /*#__PURE__*/ ReactDOM.createPortal(portalElement, containerElement) : null;
+	return {
+		node: portalNode,
+		nodeId: /*#__PURE__*/ React.isValidElement(portalElement) ? portalElement.props.id : void 0,
+		subtree: portalSubtree
+	};
+}
+/**
+* Portals the floating element into a given container element — by default,
+* outside of the app root and into the body.
+* This is necessary to ensure the floating element can appear outside any
+* potential parent containers that cause clipping (such as `overflow: hidden`),
+* while retaining its location in the React tree.
+* @see https://floating-ui.com/docs/FloatingPortal
+* @internal
+*/
+const FloatingPortal = /*#__PURE__*/ React.forwardRef(function FloatingPortal(componentProps, forwardedRef) {
+	const { render, className, style, children, container, portalOwnerRole, ...elementProps } = componentProps;
+	const { node: portalNode, nodeId: portalNodeId, subtree: portalSubtree } = useFloatingPortalNode({
+		container,
+		ref: forwardedRef,
+		componentProps,
+		elementProps
+	});
+	const beforeOutsideRef = React.useRef(null);
+	const afterOutsideRef = React.useRef(null);
+	const beforeInsideRef = React.useRef(null);
+	const afterInsideRef = React.useRef(null);
+	const [focusManagerState, setFocusManagerState] = React.useState(null);
+	const focusInsideDisabledRef = React.useRef(false);
+	const modal = focusManagerState?.modal;
+	const open = focusManagerState?.open;
+	const shouldRenderGuards = !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
+	React.useEffect(() => {
+		if (!portalNode || modal) return;
+		function onFocus(event) {
+			if (portalNode && event.relatedTarget && isOutsideEvent(event)) {
+				if (event.type === "focusin") {
+					if (focusInsideDisabledRef.current) {
+						enableFocusInside(portalNode);
+						focusInsideDisabledRef.current = false;
+					}
+				} else {
+					disableFocusInside(portalNode);
+					focusInsideDisabledRef.current = true;
+				}
+			}
+		}
+		return mergeCleanups(addEventListener(portalNode, "focusin", onFocus, true), addEventListener(portalNode, "focusout", onFocus, true));
+	}, [portalNode, modal]);
+	useIsoLayoutEffect(() => {
+		if (!portalNode || open !== true || !focusInsideDisabledRef.current) return;
+		enableFocusInside(portalNode);
+		focusInsideDisabledRef.current = false;
+	}, [open, portalNode]);
+	const portalContextValue = React.useMemo(() => ({
+		beforeOutsideRef,
+		afterOutsideRef,
+		beforeInsideRef,
+		afterInsideRef,
+		portalNode,
+		setFocusManagerState
+	}), [portalNode]);
+	return /*#__PURE__*/ jsxs(React.Fragment, { children: [portalSubtree, /*#__PURE__*/ jsxs(PortalContext.Provider, {
+		value: portalContextValue,
+		children: [
+			shouldRenderGuards && portalNode && /*#__PURE__*/ jsx(FocusGuard, {
+				"data-type": "outside",
+				ref: beforeOutsideRef,
+				onFocus: (event) => {
+					if (isOutsideEvent(event, portalNode)) beforeInsideRef.current?.focus();
+					else {
+						const domReference = focusManagerState ? focusManagerState.domReference : null;
+						getPreviousTabbable(domReference)?.focus();
+					}
+				}
+			}),
+			shouldRenderGuards && portalNode && /*#__PURE__*/ jsx("span", {
+				role: portalOwnerRole,
+				"aria-owns": portalNodeId,
+				style: ownerVisuallyHidden
+			}),
+			portalNode && /*#__PURE__*/ ReactDOM.createPortal(children, portalNode),
+			shouldRenderGuards && portalNode && /*#__PURE__*/ jsx(FocusGuard, {
+				"data-type": "outside",
+				ref: afterOutsideRef,
+				onFocus: (event) => {
+					if (isOutsideEvent(event, portalNode)) afterInsideRef.current?.focus();
+					else {
+						const domReference = focusManagerState ? focusManagerState.domReference : null;
+						getNextTabbable(domReference)?.focus();
+						if (focusManagerState?.closeOnFocusOut) focusManagerState?.onOpenChange(false, createChangeEventDetails("focus-out", event.nativeEvent));
+					}
+				}
+			})
+		]
+	})] });
+});
+if (process.env.NODE_ENV !== "production") FloatingPortal.displayName = "FloatingPortal";
+//#endregion
+export { FloatingPortal, useFloatingPortalNode, usePortalContext };