@nizivo/react 0.1.0 → 0.2.0

package/THIRD_PARTY_NOTICES

@@ -7,13 +7,20 @@ The internal glyphs in dist/_internal/glyphs.js reuse the SVG path data of these
 Lucide icons:
 
   loader-circle      (the Button and IconButton pending spinner)
+  chevron-right      (the Breadcrumb separator and the Pagination previous/next marks)
   chevrons-up-down   (the Select trigger indicator)
-  circle-x           (the Field, Fieldset and InlineError error mark)
+  circle-x           (the Field, Fieldset and InlineError error mark, the critical Toast mark)
+  circle-check       (the success Toast mark)
+  info               (the neutral Toast mark)
   x                  (the AlertDismiss close mark)
   check              (the Checkbox checked mark)
   minus              (the Checkbox indeterminate dash)
+  eye                (the PasswordInput toggle while the password is hidden)
+  eye-off            (the PasswordInput toggle while the password is shown)
+  search             (the SearchField magnifier)
+  ellipsis           (the MobileTabBar More mark)
 
-Lucide's licence covers all six:
+Lucide's licence covers all thirteen:
 
 ISC License
 
@@ -34,9 +41,9 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 --------------------------------------------------------------------------------
 Feather (https://feathericons.com)
 
-circle-x (Feather's x-circle), x, check and minus are on Lucide's list of icons
-derived from the Feather project, so their path data is also under Feather's
-licence:
+chevron-right, circle-x (Feather's x-circle), info, x, check, minus, search and
+ellipsis (Feather's more-horizontal) are on Lucide's list of icons derived from the
+Feather project, so their path data is also under Feather's licence:
 
 The MIT License (MIT)
 

package/dist/_engines/react-aria/dialog.client.js

@@ -1,25 +1,26 @@
 "use client";
 import { mergeProps } from "../../contracts/merge-props.js";
-import { details } from "../../contracts/details.js";
 import { stateAttrs } from "../../contracts/state.js";
 import { defined, engineDom } from "./dom.js";
 import { EngineLocale } from "./locale.client.js";
 import { OverlayScope, TOP_LAYER } from "./overlay.client.js";
-import { ReturnFocus, useTriggerRef } from "./popup.client.js";
-import { createElement, use, useEffect, useRef } from "react";
+import { useOpenState } from "./open-state.client.js";
+import { InitialFocus, ReturnFocus, useTriggerRef } from "./popup.client.js";
+import { OutsidePress } from "./outside-press.client.js";
+import { createElement, use, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay, OverlayTriggerStateContext, Text } from "react-aria-components";
 //#region src/_engines/react-aria/dialog.client.tsx
 /** A box-less wrapper: popups portaled into it position against the positioner. */
 const NESTED_STYLE = { display: "contents" };
-const Root = ({ open, defaultOpen, onOpenChange, children }) => /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsx(DialogTrigger, {
-	...defined({
-		isOpen: open,
-		defaultOpen
-	}),
-	onOpenChange: (isOpen) => onOpenChange?.(isOpen, details("unknown")),
-	children
-}) });
+const Root = ({ open, defaultOpen, onOpenChange, children }) => {
+	const [isOpen, setOpen, key] = useOpenState(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsx(DialogTrigger, {
+		isOpen,
+		onOpenChange: setOpen,
+		children
+	}, key) });
+};
 const Trigger = ({ render, children, ...dom }) => {
 	const open = use(OverlayTriggerStateContext)?.isOpen ?? false;
 	return /* @__PURE__ */ jsx(Button, {
@@ -35,19 +36,6 @@ const Trigger = ({ render, children, ...dom }) => {
 		children
 	});
 };
-/**
-* Moves focus to the leaf's initial-focus element. A child of the content element, so its effect runs
-* before React Aria's own focus-the-dialog effect (a parent's), which then sees focus inside and
-* leaves it; and after FocusScope recorded the trigger to return focus to.
-*/
-function InitialFocus({ content, resolve }) {
-	useEffect(() => {
-		const element = content.current;
-		if (element === null || element.contains(element.ownerDocument.activeElement)) return;
-		resolve(element)?.focus();
-	}, [content, resolve]);
-	return null;
-}
 const Popup = ({ role, backdrop, container, positioner, backdropProps, contentProps, initialFocus, returnFocus, "aria-label": label, "aria-labelledby": labelledBy, "aria-describedby": describedBy, render, children, ...dom }) => {
 	const nestedRef = useRef(null);
 	const contentRef = useRef(null);
@@ -99,6 +87,10 @@ const Popup = ({ role, backdrop, container, positioner, backdropProps, contentPr
 							popup: contentRef,
 							target: returnFocus
 						}),
+						/* @__PURE__ */ jsx(OutsidePress, {
+							popup: contentRef,
+							dismissable: role !== "alertdialog"
+						}),
 						children
 					]
 				})

package/dist/_engines/react-aria/drawer.client.js

@@ -0,0 +1,8 @@
+"use client";
+import "./dialog.client.js";
+import { useLocale } from "react-aria-components";
+//#region src/_engines/react-aria/drawer.client.tsx
+/** The engine's writing direction, from the locale every engine root provides (§9.3 rule 5). */
+const useDirection = () => useLocale().direction;
+//#endregion
+export { useDirection };

package/dist/_engines/react-aria/file-upload.client.js

@@ -0,0 +1,50 @@
+"use client";
+import { useRef, useState } from "react";
+//#region src/_engines/react-aria/file-upload.client.tsx
+const carriesFiles = (event) => event.dataTransfer?.types.includes("Files") ?? false;
+function useDropTarget(options, _ref) {
+	const [over, setOver] = useState(false);
+	const depth = useRef(0);
+	if (options.disabled) return {
+		dropProps: {
+			onDragOver: refuse,
+			onDrop: refuse
+		},
+		isDropTarget: false
+	};
+	return {
+		dropProps: {
+			onDragEnter(event) {
+				if (!carriesFiles(event)) return;
+				event.preventDefault();
+				depth.current += 1;
+				setOver(true);
+			},
+			onDragOver(event) {
+				if (!carriesFiles(event)) return;
+				event.preventDefault();
+				if (event.dataTransfer !== null) event.dataTransfer.dropEffect = "copy";
+			},
+			onDragLeave(event) {
+				if (!carriesFiles(event)) return;
+				depth.current = Math.max(0, depth.current - 1);
+				if (depth.current === 0) setOver(false);
+			},
+			onDrop(event) {
+				if (!carriesFiles(event)) return;
+				event.preventDefault();
+				depth.current = 0;
+				setOver(false);
+				const files = [...event.dataTransfer?.files ?? []];
+				if (files.length > 0) options.onDrop(files, event.currentTarget);
+			}
+		},
+		isDropTarget: over
+	};
+}
+function refuse(event) {
+	event.preventDefault();
+	if (event.dataTransfer !== null) event.dataTransfer.dropEffect = "none";
+}
+//#endregion
+export { useDropTarget };

package/dist/_engines/react-aria/menu.client.js

@@ -5,7 +5,9 @@ import { stateAttrs } from "../../contracts/state.js";
 import { defined, engineDom } from "./dom.js";
 import { EngineLocale } from "./locale.client.js";
 import { popupStyle, resolveSide, toPlacement } from "./overlay.client.js";
+import { useOpenState } from "./open-state.client.js";
 import { ReturnFocus, useTabOut, useTriggerRef } from "./popup.client.js";
+import { OutsidePress } from "./outside-press.client.js";
 import { Children, createContext, createElement, isValidElement, use, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Header, Menu, MenuItem, MenuSection, MenuTrigger, Popover, RootMenuTriggerStateContext, Separator, useLocale } from "react-aria-components";
@@ -40,16 +42,14 @@ function itemValues(children, out = []) {
 }
 const Root = ({ open, defaultOpen, onOpenChange, children }) => {
 	const [store] = useState(() => /* @__PURE__ */ new Map());
+	const [isOpen, setOpen, key] = useOpenState(open, defaultOpen, onOpenChange);
 	return /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsx(Kept, {
 		value: store,
 		children: /* @__PURE__ */ jsx(MenuTrigger, {
-			...defined({
-				isOpen: open,
-				defaultOpen
-			}),
-			onOpenChange: (isOpen) => onOpenChange?.(isOpen, details("unknown")),
+			isOpen,
+			onOpenChange: setOpen,
 			children
-		})
+		}, key)
 	}) });
 };
 const Trigger = ({ render, children, ...dom }) => {
@@ -102,13 +102,17 @@ const Popup = ({ side, align, sideOffset, container, list, render, children, ...
 			});
 			return render(mergeProps(engine, dom, attrs, { ref: popup }), s);
 		},
-		children: [/* @__PURE__ */ jsx(ReturnFocus, {
-			trigger,
-			popup
-		}), /* @__PURE__ */ jsx(Menu, {
-			render: (p) => createElement("div", mergeProps(listDom(p, list), list, { onKeyDown: tabOut })),
-			children
-		})]
+		children: [
+			/* @__PURE__ */ jsx(ReturnFocus, {
+				trigger,
+				popup
+			}),
+			/* @__PURE__ */ jsx(OutsidePress, { popup }),
+			/* @__PURE__ */ jsx(Menu, {
+				render: (p) => createElement("div", mergeProps(listDom(p, list), list, { onKeyDown: tabOut })),
+				children
+			})
+		]
 	});
 };
 const Item = ({ textValue, disabled, onAction, closeOnSelect, href, target, rel, download, hrefLang, ping, referrerPolicy, render, children, ...dom }) => /* @__PURE__ */ jsx(MenuItem, {

package/dist/_engines/react-aria/open-state.client.js

@@ -0,0 +1,53 @@
+"use client";
+import { details } from "../../contracts/details.js";
+import { createContext, useLayoutEffect, useRef, useState } from "react";
+//#region src/_engines/react-aria/open-state.client.tsx
+/**
+* The key, for a popup part whose Root keeps other state in the engine (Select's value): that part
+* remounts its popup instead.
+*/
+const PopupKey = createContext(0);
+/**
+* `[isOpen, setOpen, key]` for the engine: the consumer's `open`, else the Root's own state, and the
+* key to render the engine's root with.
+*/
+function useOpenState(open, defaultOpen, onOpenChange) {
+	const [own, setOwn] = useState(defaultOpen ?? false);
+	const [key, setKey] = useState(0);
+	const controlled = open !== void 0;
+	const isOpen = controlled ? open : own;
+	const latest = useRef({
+		controlled,
+		onOpenChange
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			controlled,
+			onOpenChange
+		};
+	});
+	const seenClosed = useRef(false);
+	const armed = useRef(false);
+	useLayoutEffect(() => {
+		if (!isOpen) seenClosed.current = true;
+		armed.current = isOpen && seenClosed.current;
+	}, [isOpen]);
+	useLayoutEffect(() => () => {
+		if (!armed.current) return;
+		armed.current = false;
+		if (!latest.current.controlled) setOwn(false);
+		setKey((k) => k + 1);
+		latest.current.onOpenChange?.(false, details("hidden"));
+	}, []);
+	const setOpen = (next) => {
+		if (!controlled) setOwn(next);
+		onOpenChange?.(next, details("unknown"));
+	};
+	return [
+		isOpen,
+		setOpen,
+		key
+	];
+}
+//#endregion
+export { PopupKey, useOpenState };

package/dist/_engines/react-aria/outside-press.client.js

@@ -0,0 +1,61 @@
+"use client";
+import { returnAfterClose } from "./popup.client.js";
+import { use, useEffect, useLayoutEffect, useRef } from "react";
+import { OverlayTriggerStateContext } from "react-aria-components";
+//#region src/_engines/react-aria/outside-press.client.tsx
+/**
+* The family's open popups, in open order. Its own list, not popup.client's registry: a Select's
+* hidden collection pass registers and unregisters there under the same ref. Only entries on the
+* page count.
+*/
+const STACK = [];
+const onPage = (popup) => popup.current?.isConnected === true;
+/**
+* Outside press for a popup opened inside another overlay (§12.2 Dismiss stack). React Aria's
+* useInteractOutside ignores every press inside an element marked top-layer, and the family's
+* nested-portal containers carry that mark (§12.1 L2), so a press on a nested popup's underlay, or
+* anywhere else in its parent's container, never reached the engine's dismiss logic: a Select or
+* Menu inside a Dialog stayed open (weeks 4 to 12; found in week 13). The family completes it: a
+* press that starts and ends outside `popup`, inside a top-layer element that is not Nizivo's own
+* top layer (the toast region and announcer, `data-nz-top-layer`, dismiss nothing) and not on a
+* tooltip, closes `popup` when it is the topmost. Every other press stays with the engine. The
+* element is read at the press: a Select's popup is attached after this component's first effect.
+*/
+function OutsidePress({ popup, dismissable = true }) {
+	const context = use(OverlayTriggerStateContext);
+	const state = useRef(context);
+	useLayoutEffect(() => {
+		state.current = context;
+	});
+	useEffect(() => {
+		STACK.push(popup);
+		const ours = (event) => {
+			const element = popup.current;
+			const { target } = event;
+			if (!dismissable || event.button > 0 || element === null || !(target instanceof Element) || element.contains(target)) return false;
+			const host = target.closest("[data-react-aria-top-layer]");
+			return host !== null && host.closest("[data-nz-top-layer]") === null && target.closest("[role=\"tooltip\"]") === null && STACK.findLast(onPage) === popup;
+		};
+		let started = false;
+		const down = (event) => {
+			started = ours(event);
+		};
+		const up = (event) => {
+			if (started && ours(event)) {
+				returnAfterClose(popup);
+				state.current?.close();
+			}
+			started = false;
+		};
+		document.addEventListener("pointerdown", down, true);
+		document.addEventListener("pointerup", up, true);
+		return () => {
+			STACK.splice(STACK.lastIndexOf(popup), 1);
+			document.removeEventListener("pointerdown", down, true);
+			document.removeEventListener("pointerup", up, true);
+		};
+	}, [popup, dismissable]);
+	return null;
+}
+//#endregion
+export { OutsidePress };

package/dist/_engines/react-aria/overlay.client.js

@@ -11,6 +11,11 @@ function OverlayScope({ container, children }) {
 }
 /** React Aria's inert exemption, as props for an element the adapter renders itself. */
 const TOP_LAYER = { "data-react-aria-top-layer": "" };
+/** Maps Nizivo's `data-nz-top-layer` to React Aria's inert exemption. */
+function markTopLayer(element) {
+	element.setAttribute("data-react-aria-top-layer", "");
+	return () => element.removeAttribute("data-react-aria-top-layer");
+}
 /** Logical side + alignment → a React Aria placement. */
 function toPlacement(side, align) {
 	if (align === "center") return side;
@@ -38,4 +43,4 @@ function popupStyle(style) {
 	return out;
 }
 //#endregion
-export { OverlayScope, TOP_LAYER, popupStyle, resolveSide, toPlacement };
+export { OverlayScope, TOP_LAYER, markTopLayer, popupStyle, resolveSide, toPlacement };

package/dist/_engines/react-aria/popover.client.js

@@ -0,0 +1,148 @@
+"use client";
+import { mergeProps } from "../../contracts/merge-props.js";
+import { stateAttrs } from "../../contracts/state.js";
+import { defined, engineDom } from "./dom.js";
+import { EngineLocale } from "./locale.client.js";
+import { OverlayScope, markTopLayer, popupStyle, resolveSide, toPlacement } from "./overlay.client.js";
+import { useOpenState } from "./open-state.client.js";
+import { InitialFocus, ReturnFocus, useTriggerRef } from "./popup.client.js";
+import { OutsidePress } from "./outside-press.client.js";
+import { createElement, use, useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogTrigger, Heading, OverlayTriggerStateContext, Popover, Text, useLocale } from "react-aria-components";
+//#region src/_engines/react-aria/popover.client.tsx
+const Root = ({ open, defaultOpen, onOpenChange, children }) => {
+	const [isOpen, setOpen, key] = useOpenState(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsx(DialogTrigger, {
+		isOpen,
+		onOpenChange: setOpen,
+		children
+	}, key) });
+};
+const Trigger = ({ render, children, ...dom }) => {
+	const open = use(OverlayTriggerStateContext)?.isOpen ?? false;
+	return /* @__PURE__ */ jsx(Button, {
+		render: (p, rp) => {
+			const s = {
+				open,
+				pressed: rp.isPressed && !open,
+				focusVisible: rp.isFocusVisible,
+				disabled: rp.isDisabled
+			};
+			return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+		},
+		children
+	});
+};
+/**
+* The nested-portal container (§12.1 L2): a box-less element right after the popup, in the
+* container the popup portaled into, so overlays opened inside the popover paint above it. It is not
+* inside the popup, which scrolls (a clip) and scales while it enters. The engine hides everything
+* outside a modal popover, so it carries the family's top-layer exemption, as the Dialog's does: a
+* tooltip portaled there stays hoverable (WCAG 1.4.13). Created here, not by React, because the
+* engine owns the popup's portal and nothing can render a sibling into it. A hidden anchor inside
+* the popup makes it with a stable callback ref: in the commit that inserts the popup, so a tooltip
+* shown by the initial focus (a passive effect) already finds it; a ref merged into the popup's own
+* props would be a new function, detached and attached again, on every render.
+*/
+function useNestedContainer() {
+	const container = useRef(null);
+	return {
+		container,
+		anchor: useCallback((element) => {
+			const popup = element?.parentElement;
+			if (popup == null) return void 0;
+			const nested = popup.ownerDocument.createElement("div");
+			nested.style.display = "contents";
+			const undo = markTopLayer(nested);
+			popup.after(nested);
+			container.current = nested;
+			return () => {
+				undo();
+				nested.remove();
+				if (container.current === nested) container.current = null;
+			};
+		}, [])
+	};
+}
+const Popup = ({ side, align, sideOffset, container, contentProps, initialFocus, "aria-label": label, "aria-labelledby": labelledBy, "aria-describedby": describedBy, render, children, ...dom }) => {
+	const { direction } = useLocale();
+	const popup = useRef(null);
+	const content = useRef(null);
+	const { container: nested, anchor } = useNestedContainer();
+	const trigger = useTriggerRef();
+	return /* @__PURE__ */ jsxs(Popover, {
+		placement: toPlacement(side, align),
+		offset: sideOffset,
+		...defined({ UNSTABLE_portalContainer: container ?? void 0 }),
+		render: (p, rp) => {
+			const s = {
+				entering: rp.isEntering,
+				exiting: rp.isExiting,
+				side: resolveSide(rp.placement, side, direction)
+			};
+			const engine = {
+				...engineDom(p),
+				style: popupStyle(p.style)
+			};
+			const attrs = stateAttrs({
+				open: !rp.isExiting,
+				...s,
+				align
+			});
+			return render(mergeProps(engine, dom, attrs, { ref: popup }), s);
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			hidden: true,
+			ref: anchor
+		}), /* @__PURE__ */ jsxs(Dialog, {
+			...defined({
+				"aria-label": label,
+				"aria-labelledby": labelledBy,
+				"aria-describedby": describedBy
+			}),
+			render: (p) => createElement("section", mergeProps(engineDom(p), contentProps, { ref: content })),
+			children: [
+				/* @__PURE__ */ jsx(InitialFocus, {
+					content,
+					resolve: initialFocus
+				}),
+				/* @__PURE__ */ jsx(ReturnFocus, {
+					trigger,
+					popup
+				}),
+				/* @__PURE__ */ jsx(OutsidePress, { popup }),
+				/* @__PURE__ */ jsx(OverlayScope, {
+					container: nested,
+					children
+				})
+			]
+		})]
+	});
+};
+const Title = ({ level, render, children, ...dom }) => /* @__PURE__ */ jsx(Heading, {
+	slot: "title",
+	level,
+	render: (p) => render(mergeProps(engineDom(p), dom), {}),
+	children
+});
+const Description = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(Text, {
+	slot: "description",
+	elementType: "p",
+	render: (p) => render(mergeProps(engineDom(p), dom), {}),
+	children
+});
+const Close = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(Button, {
+	slot: "close",
+	render: (p, rp) => {
+		const s = {
+			pressed: rp.isPressed,
+			focusVisible: rp.isFocusVisible,
+			disabled: rp.isDisabled
+		};
+		return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+	},
+	children
+});
+//#endregion
+export { Close, Description, Popup, Root, Title, Trigger };

package/dist/_engines/react-aria/popup.client.js

@@ -43,6 +43,17 @@ function useTriggerRef() {
 	const ref = typeof context === "object" && context !== null && "triggerRef" in context ? context.triggerRef : void 0;
 	return isElementRef(ref) ? ref : void 0;
 }
+/**
+* Popups the family closed itself on an outside press (outside-press.client.tsx). The press lands on
+* the popup's underlay, so no control took focus, but a modal parent's FocusScope moves focus to its
+* first control as the popup's content leaves (React Aria's containment fallback), before any
+* restore: the chain runs for these even though focus is no longer on <body> (O-12).
+*/
+const CLOSED_OUTSIDE = /* @__PURE__ */ new WeakSet();
+/** Marks `popup` as closed by the family's outside press, for ReturnFocus. */
+function returnAfterClose(popup) {
+	CLOSED_OUTSIDE.add(popup);
+}
 /** The family's open popups and their triggers: the parent-overlay step below. */
 const OPEN = /* @__PURE__ */ new Map();
 /**
@@ -96,17 +107,18 @@ function ReturnFocus({ trigger, popup, target = true }) {
 			let handled = false;
 			const onRestore = (event) => {
 				const own = latest.current;
-				const to = named(own);
-				if (event.defaultPrevented || mounted(popup) || own !== false && !usable(to)) return;
+				const to = own === false ? void 0 : [named(own), element].find(usable);
+				if (event.defaultPrevented || mounted(popup) || own !== false && to === void 0) return;
 				event.preventDefault();
 				handled = true;
-				if (usable(to)) to.focus();
+				to?.focus();
 			};
 			doc.addEventListener(ENGINE_RESTORE, onRestore, true);
 			requestAnimationFrame(() => {
 				doc.removeEventListener(ENGINE_RESTORE, onRestore, true);
 				const own = latest.current;
-				if (handled || !shown.current || own === false || mounted(popup) || (doc.activeElement ?? doc.body) !== doc.body) return;
+				const outside = CLOSED_OUTSIDE.delete(popup);
+				if (handled || !shown.current || own === false || mounted(popup) || (doc.activeElement ?? doc.body) !== doc.body && !outside) return;
 				const next = [
 					named(own),
 					element,
@@ -123,5 +135,19 @@ function ReturnFocus({ trigger, popup, target = true }) {
 	]);
 	return null;
 }
+/**
+* Moves focus to the leaf's initial-focus element (§12.2 Focus on open; Dialog, Drawer, Popover). A
+* child of the content element, so its effect runs before React Aria's own focus-the-dialog effect (a
+* parent's), which then sees focus inside and leaves it; and after FocusScope recorded the trigger to
+* return focus to.
+*/
+function InitialFocus({ content, resolve }) {
+	useEffect(() => {
+		const element = content.current;
+		if (element === null || element.contains(element.ownerDocument.activeElement)) return;
+		resolve(element)?.focus();
+	}, [content, resolve]);
+	return null;
+}
 //#endregion
-export { ReturnFocus, useTabOut, useTriggerRef };
+export { InitialFocus, ReturnFocus, returnAfterClose, useTabOut, useTriggerRef };

package/dist/_engines/react-aria/select.client.js

@@ -5,7 +5,9 @@ import { stateAttrs } from "../../contracts/state.js";
 import { defined, engineDom } from "./dom.js";
 import { EngineLocale } from "./locale.client.js";
 import { popupStyle, resolveSide, toPlacement } from "./overlay.client.js";
+import { PopupKey, useOpenState } from "./open-state.client.js";
 import { ReturnFocus, useTabOut, useTriggerRef } from "./popup.client.js";
+import { OutsidePress } from "./outside-press.client.js";
 import { createElement, use, useEffect, useLayoutEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Header, ListBox, ListBoxItem, ListBoxSection, Popover, Select, SelectStateContext, SelectValue, Separator, useLocale } from "react-aria-components";
@@ -37,12 +39,11 @@ function FormReset({ root }) {
 }
 const Root = ({ value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, name, required, disabled, invalid, placeholder, "aria-label": label, "aria-labelledby": labelledBy, render, children, ...dom }) => {
 	const root = useRef(null);
+	const [isOpen, setOpen, popupKey] = useOpenState(open, defaultOpen, onOpenChange);
 	return /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsxs(Select, {
 		...defined({
 			value,
 			defaultValue,
-			isOpen: open,
-			defaultOpen,
 			name,
 			isRequired: required,
 			isDisabled: disabled,
@@ -51,8 +52,9 @@ const Root = ({ value, defaultValue, onValueChange, open, defaultOpen, onOpenCha
 			"aria-label": label,
 			"aria-labelledby": labelledBy
 		}),
+		isOpen,
+		onOpenChange: setOpen,
 		onChange: (key) => onValueChange?.(key == null ? null : String(key), details("unknown")),
-		onOpenChange: (isOpen) => onOpenChange?.(isOpen, details("unknown")),
 		validationBehavior: "native",
 		render: (p, rp) => {
 			const s = {
@@ -66,7 +68,10 @@ const Root = ({ value, defaultValue, onValueChange, open, defaultOpen, onOpenCha
 			});
 			return render(mergeProps(engineDom(p), dom, attrs, { ref: root }), s);
 		},
-		children: [children, /* @__PURE__ */ jsx(FormReset, { root })]
+		children: [/* @__PURE__ */ jsx(PopupKey, {
+			value: popupKey,
+			children
+		}), /* @__PURE__ */ jsx(FormReset, { root })]
 	}) });
 };
 const Trigger = ({ id, "aria-label": label, "aria-describedby": describedBy, render, children, ...dom }) => {
@@ -101,6 +106,7 @@ const Popup = ({ side, align, sideOffset, container, list, render, children, ...
 	const popup = useRef(null);
 	const tabOut = useTabOut(popup);
 	const trigger = useTriggerRef();
+	const key = use(PopupKey);
 	return /* @__PURE__ */ jsxs(Popover, {
 		placement: toPlacement(side, align),
 		offset: sideOffset,
@@ -122,14 +128,18 @@ const Popup = ({ side, align, sideOffset, container, list, render, children, ...
 			});
 			return render(mergeProps(engine, dom, attrs, { ref: popup }), s);
 		},
-		children: [/* @__PURE__ */ jsx(ReturnFocus, {
-			trigger,
-			popup
-		}), /* @__PURE__ */ jsx(ListBox, {
-			render: (p) => createElement("div", mergeProps(engineDom(p), list, { onKeyDown: tabOut })),
-			children
-		})]
-	});
+		children: [
+			/* @__PURE__ */ jsx(ReturnFocus, {
+				trigger,
+				popup
+			}),
+			/* @__PURE__ */ jsx(OutsidePress, { popup }),
+			/* @__PURE__ */ jsx(ListBox, {
+				render: (p) => createElement("div", mergeProps(engineDom(p), list, { onKeyDown: tabOut })),
+				children
+			})
+		]
+	}, key);
 };
 const Item = ({ value, textValue, disabled, render, children, ...dom }) => /* @__PURE__ */ jsx(ListBoxItem, {
 	id: value,