@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Popover.js

@@ -1,8 +1,22 @@
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Popover.tsx
 import { dataAttr, filterDOMProps, useIsHydrated, useRenderProps } from "./utils.js";
-import { o as usePopoverTrigger, r as PopoverTriggerContext, t as DialogTriggerContext } from "./contexts.js";
-import { Portal, addEventListener, className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, style, template, use } from "solid-js/web";
-import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
-import { FocusScope, createOverlayTrigger, createPopover, useLocale, useUNSAFE_PortalContext, visuallyHiddenStyles } from "@proyecto-viviana/solidaria";
+import { n as OverlayTriggerStateContext, o as usePopoverTrigger, r as PopoverTriggerContext, t as DialogTriggerContext } from "./contexts.js";
+import { SelectContext } from "./Select.js";
+import { Portal, addEvent, className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, createTrackedEffect, createUniqueId, useContext } from "solid-js";
+import { FocusScope, FocusableContext, createEnterAnimation, createExitAnimation, createOverlayTrigger, createPopover, createStringFormatter, overlaysIntlStrings, useIsHidden, useLocale, useUNSAFE_PortalContext, visuallyHiddenStyles } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createOverlayTriggerState } from "@proyecto-viviana/solid-stately";
 //#region src/Popover.tsx
 /**
@@ -11,17 +25,39 @@ import { createOverlayTriggerState } from "@proyecto-viviana/solid-stately";
 * A headless popover component that positions relative to a trigger element.
 * Port of react-aria-components Popover.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<button type=button aria-label=Dismiss tabindex=-1>`), _tmpl$2 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<div data-testid=underlay>`), _tmpl$4 = /*#__PURE__*/ template(`<div style=display:contents>`), _tmpl$5 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button tabindex=-1>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div style=display:contents>`);
 const PopoverContext = createContext(null);
 const PopoverGroupContext = createContext(null);
+const OverlayContext = createContext(null);
+function resolveTriggerElement(value) {
+	if (value == null) return null;
+	if (typeof value === "function") return resolveTriggerElement(value());
+	if (value instanceof Element) return value;
+	return null;
+}
+function preferredPlacementAxis(placement) {
+	const axis = (placement ?? "bottom").split(" ")[0];
+	if (axis === "top" || axis === "bottom" || axis === "left" || axis === "right") return axis;
+	return "bottom";
+}
 function PopoverDismissButton(props) {
-	return (() => {
-		var _el$ = getNextElement(_tmpl$);
-		addEventListener(_el$, "click", props.onDismiss, true);
-		effect((_$p) => style(_el$, visuallyHiddenStyles, _$p));
-		runHydrationEvents();
-		return _el$;
-	})();
+	const stringFormatter = createStringFormatter(overlaysIntlStrings, "@react-aria/overlays");
+	var _el$ = getNextElement(_tmpl$);
+	addEvent(_el$, "click", props.onDismiss, true);
+	effect(() => {
+		return {
+			e: stringFormatter().format("dismiss"),
+			t: readShallow(visuallyHiddenStyles)
+		};
+	}, ({ e, t }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$, "aria-label", e);
+		style(_el$, t, _p$?.t);
+	});
+	runHydrationEvents();
+	return _el$;
 }
 /**
 * A PopoverTrigger opens a popover when a trigger element is pressed.
@@ -50,7 +86,10 @@ function PopoverTrigger(props) {
 			isOpen: () => state.isOpen(),
 			open: () => state.open(),
 			close: () => state.close(),
-			toggle: () => state.toggle()
+			toggle: () => state.toggle(),
+			setOpen: (next) => state.setOpen(next),
+			point: () => state.point(),
+			setPoint: (next) => state.setPoint(next)
 		},
 		triggerRef: () => triggerRef,
 		setTriggerRef: (el) => {
@@ -62,7 +101,7 @@ function PopoverTrigger(props) {
 		overlayProps: triggerAria.overlayProps,
 		trigger: "PopoverTrigger"
 	}));
-	return createComponent(PopoverTriggerContext.Provider, {
+	return createComponent(PopoverTriggerContext, {
 		get value() {
 			return contextValue();
 		},
@@ -98,15 +137,19 @@ function Popover(props) {
 		"onOpenChange",
 		"autoFocus",
 		"isEntering",
-		"isExiting"
+		"isExiting",
+		"shouldSkipAnimation"
 	]);
-	const [popoverRef, setPopoverRef] = createSignal(null);
-	const [groupRef, setGroupRef] = createSignal(null);
+	const [popoverRef, setPopoverRef] = createSignal(null, { ownedWrite: true });
+	const [groupRef, setGroupRef] = createSignal(null, { ownedWrite: true });
 	const isHydrated = useIsHydrated();
 	const locale = useLocale();
 	const triggerContext = useContext(PopoverTriggerContext);
 	const dialogTriggerContext = useContext(DialogTriggerContext);
+	const overlayTriggerState = useContext(OverlayTriggerStateContext);
 	const popoverGroupContext = useContext(PopoverGroupContext);
+	const selectContext = useContext(SelectContext);
+	const overlayLabelledBy = () => props["aria-labelledby"] ?? (selectContext?.menuProps)?.["aria-labelledby"] ?? (triggerContext?.overlayProps)?.["aria-labelledby"];
 	const resolvedTrigger = () => local.trigger ?? triggerContext?.trigger ?? (dialogTriggerContext ? "DialogTrigger" : void 0);
 	const isSubPopover = () => resolvedTrigger() === "SubmenuTrigger" && popoverGroupContext != null;
 	const [internalOpen, setInternalOpen] = createSignal(local.defaultOpen ?? false);
@@ -114,6 +157,7 @@ function Popover(props) {
 		if (local.isOpen !== void 0) return local.isOpen;
 		if (triggerContext) return triggerContext.state.isOpen();
 		if (dialogTriggerContext) return dialogTriggerContext.state.isOpen();
+		if (overlayTriggerState) return overlayTriggerState.isOpen;
 		return internalOpen();
 	};
 	const close = () => {
@@ -124,13 +168,16 @@ function Popover(props) {
 		} else if (dialogTriggerContext) {
 			dialogTriggerContext.state.close();
 			local.onOpenChange?.(false);
+		} else if (overlayTriggerState) {
+			overlayTriggerState.close();
+			local.onOpenChange?.(false);
 		} else {
 			setInternalOpen(false);
 			local.onOpenChange?.(false);
 		}
 	};
 	const getTriggerRef = () => {
-		if (local.triggerRef) return local.triggerRef();
+		if (local.triggerRef !== void 0) return resolveTriggerElement(local.triggerRef);
 		if (triggerContext) return triggerContext.triggerRef();
 		if (dialogTriggerContext) return dialogTriggerContext.triggerRef();
 		return null;
@@ -170,7 +217,7 @@ function Popover(props) {
 			return local.scrollRef;
 		},
 		get isNonModal() {
-			return local.isNonModal;
+			return local.isNonModal ?? resolvedTrigger() === "PreviewTrigger";
 		},
 		get isKeyboardDismissDisabled() {
 			return local.isKeyboardDismissDisabled;
@@ -191,6 +238,9 @@ function Popover(props) {
 			} else if (dialogTriggerContext) {
 				dialogTriggerContext.state.open();
 				local.onOpenChange?.(true);
+			} else if (overlayTriggerState) {
+				overlayTriggerState.open();
+				local.onOpenChange?.(true);
 			} else {
 				setInternalOpen(true);
 				local.onOpenChange?.(true);
@@ -202,43 +252,40 @@ function Popover(props) {
 			else if (local.isOpen !== void 0) local.onOpenChange?.(true);
 			else if (triggerContext) triggerContext.state.toggle();
 			else if (dialogTriggerContext) dialogTriggerContext.state.toggle();
+			else if (overlayTriggerState) overlayTriggerState.toggle();
 			else {
 				setInternalOpen(true);
 				local.onOpenChange?.(true);
 			}
-		}
-	});
-	const renderValues = createMemo(() => ({
-		trigger: resolvedTrigger() ?? null,
-		placement: popoverAria.placement(),
-		isEntering: local.isEntering ?? false,
-		isExiting: local.isExiting ?? false
-	}));
-	const renderProps = useRenderProps({
-		get children() {
-			return props.children;
 		},
-		class: local.class,
-		style: local.style,
-		defaultClassName: "solidaria-Popover"
-	}, renderValues);
+		point: () => triggerContext?.state.point?.() ?? dialogTriggerContext?.state.point?.() ?? null
+	});
+	const skipAnimation = () => local.shouldSkipAnimation ?? triggerContext?.shouldSkipAnimation?.() ?? false;
+	const exitAnimation = createExitAnimation(() => popoverRef(), isOpen);
+	const isExiting = () => Boolean(local.isExiting) || !skipAnimation() && exitAnimation();
+	const isHidden = useIsHidden();
 	const [triggerWidth, setTriggerWidth] = createSignal();
 	const hasExplicitTriggerWidth = () => {
-		return renderProps.style()?.["--trigger-width"] != null;
+		return (typeof local.style === "function" ? void 0 : local.style)?.["--trigger-width"] != null;
 	};
 	const updateTriggerWidth = () => {
 		const trigger = getTriggerRef();
 		if (!trigger || hasExplicitTriggerWidth()) return;
-		setTriggerWidth(`${trigger.getBoundingClientRect().width}px`);
+		const width = trigger instanceof HTMLElement ? trigger.offsetWidth : trigger.getBoundingClientRect().width;
+		setTriggerWidth(`${width}px`);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!isOpen()) return;
 		updateTriggerWidth();
 		const trigger = getTriggerRef();
 		if (!trigger || hasExplicitTriggerWidth() || typeof ResizeObserver === "undefined") return;
 		const observer = new ResizeObserver(updateTriggerWidth);
 		observer.observe(trigger);
-		onCleanup(() => observer.disconnect());
+		_s2Cleanups.push(() => observer.disconnect());
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
 	const overlayId = () => {
@@ -248,175 +295,315 @@ function Popover(props) {
 		const { style: _style, ref: _ref, ...remaining } = popoverAria.popoverProps;
 		return remaining;
 	};
-	const mergedStyle = () => {
-		const ariaStyle = popoverAria.popoverProps.style;
-		const renderStyle = renderProps.style() || {};
+	const shouldBeDialogBase = () => !local.isNonModal || resolvedTrigger() === "SubmenuTrigger" || resolvedTrigger() === "PreviewTrigger";
+	const [isDialog, setIsDialog] = createSignal(shouldBeDialogBase());
+	const [overlayContain, setOverlayContain] = createSignal(false);
+	createEffect(() => {
 		return {
-			...ariaStyle,
-			...renderStyle,
-			"--trigger-width": renderStyle["--trigger-width"] ?? triggerWidth()
+			node: popoverRef(),
+			dialogBase: shouldBeDialogBase()
 		};
-	};
-	const shouldBeDialog = () => !local.isNonModal || resolvedTrigger() === "SubmenuTrigger";
+	}, ({ node, dialogBase }) => {
+		if (!node) return;
+		setIsDialog(dialogBase && node.querySelector("[role=dialog]") == null);
+	});
+	const shouldBeDialog = () => isDialog();
 	const shouldContainFocus = () => {
 		if (!shouldBeDialog()) return false;
-		const trigger = resolvedTrigger();
-		return trigger !== "MenuTrigger" && trigger !== "SubmenuTrigger";
+		return resolvedTrigger() !== "PreviewTrigger";
 	};
 	const portalContext = useUNSAFE_PortalContext();
 	const portalContainer = () => {
 		if (isSubPopover()) return popoverGroupContext?.() ?? portalContext.getContainer?.() ?? void 0;
 		return portalContext.getContainer?.() ?? void 0;
 	};
+	const callerDir = () => {
+		const value = rest.dir;
+		if (value === "ltr" || value === "rtl" || value === "auto") return value;
+	};
+	const callerLang = () => rest.lang;
+	const stampOverlayLocale = (el) => {
+		if (!el) return;
+		const loc = locale();
+		const dir = callerDir();
+		const lang = callerLang();
+		if (!dir) el.dir = loc.direction;
+		else el.dir = dir;
+		if (!lang) el.lang = loc.locale;
+		else el.lang = lang;
+	};
+	createEffect(() => {
+		const el = popoverRef();
+		domProps();
+		cleanPopoverProps();
+		triggerContext?.overlayProps;
+		locale();
+		return el;
+	}, (el) => {
+		if (!el) return;
+		stampOverlayLocale(el);
+	});
 	createEffect(() => {
-		if (!isOpen() || !shouldBeDialog()) return;
-		if ((local.autoFocus ?? true) === false) return;
-		if (!popoverRef()) return;
-		if (resolvedTrigger() === "SubmenuTrigger") return;
+		return {
+			open: isOpen(),
+			dialog: shouldBeDialog(),
+			autoFocus: local.autoFocus ?? true,
+			node: popoverRef(),
+			trigger: resolvedTrigger()
+		};
+	}, ({ open, dialog, autoFocus, node, trigger }) => {
+		if (!open || !dialog) return;
+		if (autoFocus === false) return;
+		if (!node) return;
+		if (trigger === "SubmenuTrigger") return;
+		if (trigger === "PreviewTrigger") return;
 		let timeout;
 		let frame;
 		const focusIfNeeded = () => {
 			if (!isOpen() || !shouldBeDialog()) return;
-			const node = popoverRef();
-			if (!node || resolvedTrigger() === "SubmenuTrigger") return;
-			if (document.activeElement === node || node.contains(document.activeElement)) return;
-			node.focus();
+			const current = popoverRef();
+			if (!current || resolvedTrigger() === "SubmenuTrigger") return;
+			if (resolvedTrigger() === "PreviewTrigger") return;
+			if (current.querySelector("[role=dialog]")) return;
+			if (document.activeElement === current || current.contains(document.activeElement)) return;
+			current.focus();
 		};
 		const scheduleFocus = () => {
 			timeout = window.setTimeout(focusIfNeeded, 0);
 		};
 		if (typeof window.requestAnimationFrame === "function") frame = window.requestAnimationFrame(scheduleFocus);
 		else scheduleFocus();
-		onCleanup(() => {
+		return () => {
 			if (frame !== void 0) window.cancelAnimationFrame(frame);
 			if (timeout !== void 0) window.clearTimeout(timeout);
-		});
+		};
 	});
-	createEffect(() => {
-		if (!isOpen()) return;
-		if (local.isKeyboardDismissDisabled) return;
+	createEffect(() => ({
+		open: isOpen(),
+		keyboardDismissDisabled: !!local.isKeyboardDismissDisabled
+	}), ({ open, keyboardDismissDisabled }) => {
+		if (!open) return;
+		if (keyboardDismissDisabled) return;
 		const onKeyDown = (event) => {
 			if (event.key !== "Escape") return;
 			if (event.defaultPrevented) return;
 			close();
 		};
 		document.addEventListener("keydown", onKeyDown);
-		onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+		return () => document.removeEventListener("keydown", onKeyDown);
 	});
-	const overlay = () => createComponent(PopoverContext.Provider, {
-		get value() {
+	const isNonModal = () => local.isNonModal ?? resolvedTrigger() === "PreviewTrigger";
+	function PopoverInner() {
+		const enterAnimation = createEnterAnimation(() => popoverRef(), () => popoverAria.placement() != null);
+		const isEntering = () => Boolean(local.isEntering) || !skipAnimation() && (enterAnimation() || isOpen() && popoverAria.placement() == null);
+		const renderValues = createMemo(() => {
+			const preferred = preferredPlacementAxis(local.placement);
+			const entering = isEntering();
 			return {
-				placement: popoverAria.placement,
-				arrowProps: () => popoverAria.arrowProps
+				trigger: resolvedTrigger() ?? null,
+				placement: popoverAria.placement() ?? preferred,
+				isEntering: entering,
+				isExiting: isExiting()
 			};
-		},
-		get children() {
-			return createComponent(FocusScope, {
-				get contain() {
-					return shouldContainFocus();
-				},
-				restoreFocus: true,
-				get children() {
-					var _el$2 = getNextElement(_tmpl$2), _el$3 = _el$2.firstChild, [_el$4, _co$] = getNextMarker(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$3] = getNextMarker(_el$7.nextSibling);
-					use(setPopoverRef, _el$2);
-					spread(_el$2, mergeProps(domProps, cleanPopoverProps, {
-						get id() {
-							return overlayId();
-						},
-						get role() {
-							return shouldBeDialog() ? "dialog" : void 0;
-						},
-						get tabIndex() {
-							return shouldBeDialog() ? -1 : void 0;
-						},
-						get ["class"]() {
-							return renderProps.class();
-						},
-						get style() {
-							return mergedStyle();
-						},
-						get lang() {
-							return locale().locale;
-						},
-						get dir() {
-							return locale().direction;
-						},
-						get ["data-trigger"]() {
-							return resolvedTrigger();
-						},
-						get ["data-placement"]() {
-							return popoverAria.placement();
-						},
-						get ["data-entering"]() {
-							return dataAttr(local.isEntering);
-						},
-						get ["data-exiting"]() {
-							return dataAttr(local.isExiting);
-						}
-					}), false, true);
-					insert(_el$2, createComponent(Show, {
-						get when() {
-							return !local.isNonModal;
-						},
-						get children() {
-							return createComponent(PopoverDismissButton, { onDismiss: close });
-						}
-					}), _el$4, _co$);
-					insert(_el$2, () => renderProps.renderChildren(), _el$6, _co$2);
-					insert(_el$2, createComponent(PopoverDismissButton, { onDismiss: close }), _el$8, _co$3);
-					runHydrationEvents();
-					return _el$2;
-				}
-			});
-		}
-	});
+		});
+		const renderProps = useRenderProps({
+			get children() {
+				return props.children;
+			},
+			class: local.class,
+			style: local.style,
+			defaultClassName: "solidaria-Popover"
+		}, renderValues);
+		const mergedStyle = () => {
+			const ariaStyle = popoverAria.popoverProps.style;
+			const renderStyle = renderProps.style() || {};
+			return {
+				...ariaStyle,
+				...renderStyle,
+				"--trigger-width": renderStyle["--trigger-width"] ?? triggerWidth()
+			};
+		};
+		return createComponent(PopoverContext, {
+			get value() {
+				return {
+					placement: popoverAria.placement,
+					arrowProps: () => popoverAria.arrowProps
+				};
+			},
+			get children() {
+				return createComponent(OverlayContext, {
+					value: { setContain: setOverlayContain },
+					get children() {
+						var _el$2 = getNextElement(_tmpl$2);
+						var _el$3 = _el$2.firstChild;
+						var [_el$4, _el$5] = getNextMarker(_el$3.nextSibling);
+						var _el$6 = _el$4.nextSibling;
+						var [_el$7, _el$8] = getNextMarker(_el$6.nextSibling);
+						var _el$9 = _el$7.nextSibling;
+						var [_el$10, _el$11] = getNextMarker(_el$9.nextSibling);
+						ref(() => {
+							return (el) => {
+								setPopoverRef(el);
+								triggerContext?.setOverlayRef?.(el);
+								stampOverlayLocale(el);
+							};
+						}, _el$2);
+						spread(_el$2, [
+							domProps,
+							cleanPopoverProps,
+							() => {
+								return triggerContext?.overlayProps ?? {};
+							},
+							{
+								get id() {
+									return overlayId();
+								},
+								get role() {
+									return shouldBeDialog() ? "dialog" : void 0;
+								},
+								get tabindex() {
+									return shouldBeDialog() ? -1 : void 0;
+								},
+								get "aria-labelledby"() {
+									return overlayLabelledBy();
+								},
+								get "class"() {
+									return renderProps.class();
+								},
+								get style() {
+									return mergedStyle();
+								},
+								get lang() {
+									return callerLang() ?? locale().locale;
+								},
+								get dir() {
+									return callerDir() ?? locale().direction;
+								},
+								get "data-trigger"() {
+									return resolvedTrigger();
+								},
+								get "data-placement"() {
+									return renderValues().placement;
+								},
+								get "data-entering"() {
+									return dataAttr(isEntering());
+								},
+								get "data-exiting"() {
+									return dataAttr(isExiting());
+								}
+							}
+						], true);
+						insert(_el$2, createComponent(Show, {
+							get when() {
+								return !isNonModal();
+							},
+							get children() {
+								return createComponent(PopoverDismissButton, { onDismiss: close });
+							}
+						}), _el$4, _el$5);
+						insert(_el$2, scope(() => {
+							return renderProps.renderChildrenStable();
+						}), _el$7, _el$8);
+						insert(_el$2, createComponent(PopoverDismissButton, { onDismiss: close }), _el$10, _el$11);
+						runHydrationEvents();
+						return _el$2;
+					}
+				});
+			}
+		});
+	}
 	const underlay = () => (() => {
-		var _el$9 = getNextElement(_tmpl$3);
-		spread(_el$9, mergeProps(() => popoverAria.underlayProps, { "style": {
-			position: "fixed",
-			inset: 0
-		} }), false, false);
+		var _el$12 = getNextElement(_tmpl$3);
+		spread(_el$12, [
+			{ "data-testid": "underlay" },
+			() => {
+				return popoverAria.underlayProps;
+			},
+			{ style: {
+				position: "fixed",
+				inset: 0
+			} }
+		], false);
 		runHydrationEvents();
-		return _el$9;
+		return _el$12;
 	})();
+	const hiddenChildren = () => {
+		const children = props.children;
+		if (typeof children === "function") return children({
+			trigger: resolvedTrigger() ?? null,
+			placement: "bottom",
+			isEntering: false,
+			isExiting: false
+		});
+		return children;
+	};
 	return createComponent(Show, {
 		get when() {
-			return memo(() => !!isHydrated())() && (isOpen() || local.isExiting);
+			return !isHidden();
+		},
+		get fallback() {
+			return hiddenChildren();
 		},
 		get children() {
-			return createComponent(Portal, {
-				get mount() {
-					return portalContainer();
+			return createComponent(Show, {
+				get when() {
+					return memo(() => {
+						return !!isHydrated();
+					})() ? isOpen() || isExiting() : isHydrated();
 				},
 				get children() {
-					return [createComponent(Show, {
-						get when() {
-							return memo(() => !!(!local.isNonModal && !isSubPopover()))() && isOpen();
+					return createComponent(Portal, {
+						get mount() {
+							return portalContainer();
 						},
 						get children() {
-							return underlay();
+							return createComponent(FocusableContext, {
+								value: null,
+								get children() {
+									return createComponent(FocusScope, {
+										get contain() {
+											return memo(() => {
+												return !!(shouldContainFocus() || overlayContain());
+											})() ? !isExiting() : shouldContainFocus() || overlayContain();
+										},
+										restoreFocus: true,
+										get children() {
+											return [createComponent(Show, {
+												get when() {
+													return memo(() => {
+														return !!(!isNonModal() && !isSubPopover());
+													})() ? isOpen() : !isNonModal() && !isSubPopover();
+												},
+												get children() {
+													return underlay();
+												}
+											}), createComponent(Show, {
+												get when() {
+													return isSubPopover();
+												},
+												get fallback() {
+													var _el$13 = getNextElement(_tmpl$4);
+													ref(() => {
+														return setGroupRef;
+													}, _el$13);
+													insert(_el$13, createComponent(PopoverGroupContext, {
+														value: () => groupRef(),
+														get children() {
+															return createComponent(PopoverInner, {});
+														}
+													}));
+													return _el$13;
+												},
+												get children() {
+													return createComponent(PopoverInner, {});
+												}
+											})];
+										}
+									});
+								}
+							});
 						}
-					}), createComponent(Show, {
-						get when() {
-							return isSubPopover();
-						},
-						get fallback() {
-							return (() => {
-								var _el$0 = getNextElement(_tmpl$4);
-								use(setGroupRef, _el$0);
-								insert(_el$0, createComponent(PopoverGroupContext.Provider, {
-									value: () => groupRef(),
-									get children() {
-										return overlay();
-									}
-								}));
-								return _el$0;
-							})();
-						},
-						get children() {
-							return overlay();
-						}
-					})];
+					});
 				}
 			});
 		}
@@ -444,28 +631,30 @@ function OverlayArrow(props) {
 			...localStyle
 		};
 	};
-	return (() => {
-		var _el$1 = getNextElement(_tmpl$5);
-		insert(_el$1, (() => {
-			var _c$ = memo(() => !!props.render);
-			return () => _c$() ? props.render() : props.children;
-		})());
-		effect((_p$) => {
-			var _v$ = props.class, _v$2 = mergedStyle(), _v$3 = placement();
-			_v$ !== _p$.e && className(_el$1, _p$.e = _v$);
-			_p$.t = style(_el$1, _v$2, _p$.t);
-			_v$3 !== _p$.a && setAttribute(_el$1, "data-placement", _p$.a = _v$3);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
+	var _el$14 = getNextElement(_tmpl$3);
+	insert(_el$14, scope((() => {
+		var _c$ = memo(() => {
+			return !!props.render;
 		});
-		return _el$1;
-	})();
+		return () => {
+			return _c$() ? props.render() : props.children;
+		};
+	})()));
+	effect(() => {
+		return {
+			e: readShallow(props.class),
+			t: readShallow(mergedStyle()),
+			a: placement()
+		};
+	}, ({ e, t, a }, _p$) => {
+		className(_el$14, e, _p$?.e);
+		style(_el$14, t, _p$?.t);
+		a !== _p$?.a && setAttribute(_el$14, "data-placement", a);
+	});
+	return _el$14;
 }
 delegateEvents(["click"]);
 //#endregion
-export { OverlayArrow, Popover, Popover as default, PopoverContext, PopoverTrigger, PopoverTriggerContext, usePopoverTrigger };
+export { OverlayArrow, OverlayContext, Popover, Popover as default, PopoverContext, PopoverTrigger, PopoverTriggerContext, usePopoverTrigger };
 
 //# sourceMappingURL=Popover.js.map