@camstack/ui-library 1.2.358 → 1.2.359

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.359] - 2026-10-31
+
+### Changed
+
+- Pickers, dropdown menus and popovers now open on top of a modal dialog instead of behind it
+
 ## [1.2.358] - 2026-10-30
 
 ### Changed

package/dist/index.cjs

@@ -9693,6 +9693,38 @@ function BottomSheet({ open, onClose, title, children, className }) {
 	})] });
 }
 //#endregion
+//#region src/primitives/top-layer-portal.tsx
+/**
+* Where a floating surface (popover, dropdown, listbox) is mounted so it shows
+* above everything. A modal `<dialog>` sits in the browser's top layer, which
+* paints over anything in `document.body` and makes it inert — so a surface
+* portalled to the body opens "under" the dialog and cannot be clicked. The
+* surface is therefore mounted INSIDE the trigger's dialog (still interactive)
+* and itself promoted to the top layer with the native popover API, which also
+* frees it from the dialog's transform and overflow clipping: its `fixed`
+* coordinates stay viewport coordinates. Outside a dialog it goes to the body
+* as before. Where the popover API is missing it degrades to a plain `fixed`
+* element.
+*/
+function TopLayerPortal({ anchor, surfaceRef, className, children, ...props }) {
+	const host = anchor.current?.closest("dialog") ?? document.body;
+	(0, react$1.useLayoutEffect)(() => {
+		const el = surfaceRef?.current;
+		if (!el) return;
+		if (typeof el.showPopover !== "function") return;
+		el.setAttribute("popover", "manual");
+		try {
+			if (!el.matches(":popover-open")) el.showPopover();
+		} catch {}
+	}, [surfaceRef]);
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: surfaceRef,
+		className: cn("inset-auto m-0 text-foreground", className),
+		...props,
+		children
+	}), host);
+}
+//#endregion
 //#region src/primitives/popover.tsx
 var PopoverContext = (0, react$1.createContext)(null);
 function usePopoverContext() {
@@ -9758,6 +9790,7 @@ function PopoverContent({ className, children, align = "start", offset = 4, ...p
 	const { open, setOpen, contentId, triggerId, triggerRef } = usePopoverContext();
 	const isMobile = useIsMobile();
 	const ref = (0, react$1.useRef)(null);
+	const sheetRef = (0, react$1.useRef)(null);
 	const [coords, setCoords] = (0, react$1.useState)(null);
 	const [placement, setPlacement] = (0, react$1.useState)(null);
 	(0, react$1.useLayoutEffect)(() => {
@@ -9814,7 +9847,9 @@ function PopoverContent({ className, children, align = "start", offset = 4, ...p
 			if (el && !el.contains(e.target) && !trigger?.contains(e.target)) setOpen(false);
 		};
 		const escHandler = (e) => {
-			if (e.key === "Escape") setOpen(false);
+			if (e.key !== "Escape") return;
+			e.preventDefault();
+			setOpen(false);
 		};
 		document.addEventListener("mousedown", handler);
 		document.addEventListener("keydown", escHandler);
@@ -9829,14 +9864,20 @@ function PopoverContent({ className, children, align = "start", offset = 4, ...p
 		isMobile
 	]);
 	if (!open) return null;
-	if (isMobile) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BottomSheet, {
-		open,
-		onClose: () => setOpen(false),
-		children
+	if (isMobile) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLayerPortal, {
+		anchor: triggerRef,
+		surfaceRef: sheetRef,
+		className: "pointer-events-none fixed inset-0 h-dvh w-dvw max-w-none overflow-visible border-0 bg-transparent p-0 [&>*]:pointer-events-auto",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BottomSheet, {
+			open,
+			onClose: () => setOpen(false),
+			children
+		})
 	});
 	if (!coords || typeof document === "undefined") return null;
-	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLayerPortal, {
+		anchor: triggerRef,
+		surfaceRef: ref,
 		id: contentId,
 		role: "dialog",
 		"aria-labelledby": triggerId,
@@ -9850,7 +9891,7 @@ function PopoverContent({ className, children, align = "start", offset = 4, ...p
 		className: cn("z-50 overflow-y-auto bg-background-elevated border border-border rounded-lg shadow-lg p-3", className),
 		...props,
 		children
-	}), document.body);
+	});
 }
 //#endregion
 //#region src/composites/icon-picker.tsx
@@ -13243,7 +13284,9 @@ function DropdownContent({ className, children, align = "start", offset = 4, ...
 			if (el && !el.contains(e.target) && !trigger?.contains(e.target)) setOpen(false);
 		};
 		const escHandler = (e) => {
-			if (e.key === "Escape") setOpen(false);
+			if (e.key !== "Escape") return;
+			e.preventDefault();
+			setOpen(false);
 		};
 		document.addEventListener("mousedown", handler);
 		document.addEventListener("keydown", escHandler);
@@ -13257,8 +13300,9 @@ function DropdownContent({ className, children, align = "start", offset = 4, ...
 		triggerRef
 	]);
 	if (!open || !coords || typeof document === "undefined") return null;
-	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref,
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLayerPortal, {
+		anchor: triggerRef,
+		surfaceRef: ref,
 		id: contentId,
 		role: "menu",
 		"aria-labelledby": triggerId,
@@ -13271,7 +13315,7 @@ function DropdownContent({ className, children, align = "start", offset = 4, ...
 		className: cn("z-50 bg-background-elevated border border-border rounded-md shadow-lg py-1 min-w-[160px]", className),
 		...props,
 		children
-	}), document.body);
+	});
 }
 function DropdownItem({ className, icon: Icon, variant = "default", children, onClick, ...props }) {
 	const { setOpen } = useDropdownContext();
@@ -14489,8 +14533,9 @@ function OptionSelect(props) {
 					children: selectedOptions[0]?.label ?? triggerPlaceholder
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-foreground-subtle" })]
 			}),
-			open && !isDisabled && coords !== null && typeof document !== "undefined" && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				ref: listboxRef,
+			open && !isDisabled && coords !== null && typeof document !== "undefined" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TopLayerPortal, {
+				anchor: triggerRef,
+				surfaceRef: listboxRef,
 				id: listboxId,
 				role: "listbox",
 				style: {
@@ -14526,7 +14571,7 @@ function OptionSelect(props) {
 					},
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3.5 w-3.5 shrink-0" }), createLabel]
 				})]
-			}), document.body),
+			}),
 			description !== void 0 && description.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: DESC_CLASS$1,
 				children: description

package/dist/index.js

@@ -9669,6 +9669,38 @@ function BottomSheet({ open, onClose, title, children, className }) {
 	})] });
 }
 //#endregion
+//#region src/primitives/top-layer-portal.tsx
+/**
+* Where a floating surface (popover, dropdown, listbox) is mounted so it shows
+* above everything. A modal `<dialog>` sits in the browser's top layer, which
+* paints over anything in `document.body` and makes it inert — so a surface
+* portalled to the body opens "under" the dialog and cannot be clicked. The
+* surface is therefore mounted INSIDE the trigger's dialog (still interactive)
+* and itself promoted to the top layer with the native popover API, which also
+* frees it from the dialog's transform and overflow clipping: its `fixed`
+* coordinates stay viewport coordinates. Outside a dialog it goes to the body
+* as before. Where the popover API is missing it degrades to a plain `fixed`
+* element.
+*/
+function TopLayerPortal({ anchor, surfaceRef, className, children, ...props }) {
+	const host = anchor.current?.closest("dialog") ?? document.body;
+	useLayoutEffect(() => {
+		const el = surfaceRef?.current;
+		if (!el) return;
+		if (typeof el.showPopover !== "function") return;
+		el.setAttribute("popover", "manual");
+		try {
+			if (!el.matches(":popover-open")) el.showPopover();
+		} catch {}
+	}, [surfaceRef]);
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		ref: surfaceRef,
+		className: cn("inset-auto m-0 text-foreground", className),
+		...props,
+		children
+	}), host);
+}
+//#endregion
 //#region src/primitives/popover.tsx
 var PopoverContext = createContext(null);
 function usePopoverContext() {
@@ -9734,6 +9766,7 @@ function PopoverContent({ className, children, align = "start", offset = 4, ...p
 	const { open, setOpen, contentId, triggerId, triggerRef } = usePopoverContext();
 	const isMobile = useIsMobile();
 	const ref = useRef(null);
+	const sheetRef = useRef(null);
 	const [coords, setCoords] = useState(null);
 	const [placement, setPlacement] = useState(null);
 	useLayoutEffect(() => {
@@ -9790,7 +9823,9 @@ function PopoverContent({ className, children, align = "start", offset = 4, ...p
 			if (el && !el.contains(e.target) && !trigger?.contains(e.target)) setOpen(false);
 		};
 		const escHandler = (e) => {
-			if (e.key === "Escape") setOpen(false);
+			if (e.key !== "Escape") return;
+			e.preventDefault();
+			setOpen(false);
 		};
 		document.addEventListener("mousedown", handler);
 		document.addEventListener("keydown", escHandler);
@@ -9805,14 +9840,20 @@ function PopoverContent({ className, children, align = "start", offset = 4, ...p
 		isMobile
 	]);
 	if (!open) return null;
-	if (isMobile) return /* @__PURE__ */ jsx(BottomSheet, {
-		open,
-		onClose: () => setOpen(false),
-		children
+	if (isMobile) return /* @__PURE__ */ jsx(TopLayerPortal, {
+		anchor: triggerRef,
+		surfaceRef: sheetRef,
+		className: "pointer-events-none fixed inset-0 h-dvh w-dvw max-w-none overflow-visible border-0 bg-transparent p-0 [&>*]:pointer-events-auto",
+		children: /* @__PURE__ */ jsx(BottomSheet, {
+			open,
+			onClose: () => setOpen(false),
+			children
+		})
 	});
 	if (!coords || typeof document === "undefined") return null;
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		ref,
+	return /* @__PURE__ */ jsx(TopLayerPortal, {
+		anchor: triggerRef,
+		surfaceRef: ref,
 		id: contentId,
 		role: "dialog",
 		"aria-labelledby": triggerId,
@@ -9826,7 +9867,7 @@ function PopoverContent({ className, children, align = "start", offset = 4, ...p
 		className: cn("z-50 overflow-y-auto bg-background-elevated border border-border rounded-lg shadow-lg p-3", className),
 		...props,
 		children
-	}), document.body);
+	});
 }
 //#endregion
 //#region src/composites/icon-picker.tsx
@@ -13219,7 +13260,9 @@ function DropdownContent({ className, children, align = "start", offset = 4, ...
 			if (el && !el.contains(e.target) && !trigger?.contains(e.target)) setOpen(false);
 		};
 		const escHandler = (e) => {
-			if (e.key === "Escape") setOpen(false);
+			if (e.key !== "Escape") return;
+			e.preventDefault();
+			setOpen(false);
 		};
 		document.addEventListener("mousedown", handler);
 		document.addEventListener("keydown", escHandler);
@@ -13233,8 +13276,9 @@ function DropdownContent({ className, children, align = "start", offset = 4, ...
 		triggerRef
 	]);
 	if (!open || !coords || typeof document === "undefined") return null;
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		ref,
+	return /* @__PURE__ */ jsx(TopLayerPortal, {
+		anchor: triggerRef,
+		surfaceRef: ref,
 		id: contentId,
 		role: "menu",
 		"aria-labelledby": triggerId,
@@ -13247,7 +13291,7 @@ function DropdownContent({ className, children, align = "start", offset = 4, ...
 		className: cn("z-50 bg-background-elevated border border-border rounded-md shadow-lg py-1 min-w-[160px]", className),
 		...props,
 		children
-	}), document.body);
+	});
 }
 function DropdownItem({ className, icon: Icon, variant = "default", children, onClick, ...props }) {
 	const { setOpen } = useDropdownContext();
@@ -14465,8 +14509,9 @@ function OptionSelect(props) {
 					children: selectedOptions[0]?.label ?? triggerPlaceholder
 				}), /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-foreground-subtle" })]
 			}),
-			open && !isDisabled && coords !== null && typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsxs("div", {
-				ref: listboxRef,
+			open && !isDisabled && coords !== null && typeof document !== "undefined" && /* @__PURE__ */ jsxs(TopLayerPortal, {
+				anchor: triggerRef,
+				surfaceRef: listboxRef,
 				id: listboxId,
 				role: "listbox",
 				style: {
@@ -14502,7 +14547,7 @@ function OptionSelect(props) {
 					},
 					children: [/* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5 shrink-0" }), createLabel]
 				})]
-			}), document.body),
+			}),
 			description !== void 0 && description.length > 0 && /* @__PURE__ */ jsx("p", {
 				className: DESC_CLASS$1,
 				children: description

package/dist/primitives/top-layer-portal.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type JSX, type ReactNode, type RefObject } from "react";
+export interface TopLayerPortalProps extends HTMLAttributes<HTMLDivElement> {
+	/** The trigger the surface belongs to; its enclosing `<dialog>`, if any, hosts the surface. */
+	readonly anchor: RefObject<Element | null>;
+	/** The surface element, for the caller's outside-click and collision logic. */
+	readonly surfaceRef?: RefObject<HTMLDivElement | null>;
+	readonly children?: ReactNode;
+}
+/**
+* Where a floating surface (popover, dropdown, listbox) is mounted so it shows
+* above everything. A modal `<dialog>` sits in the browser's top layer, which
+* paints over anything in `document.body` and makes it inert — so a surface
+* portalled to the body opens "under" the dialog and cannot be clicked. The
+* surface is therefore mounted INSIDE the trigger's dialog (still interactive)
+* and itself promoted to the top layer with the native popover API, which also
+* frees it from the dialog's transform and overflow clipping: its `fixed`
+* coordinates stay viewport coordinates. Outside a dialog it goes to the body
+* as before. Where the popover API is missing it degrades to a plain `fixed`
+* element.
+*/
+export declare function TopLayerPortal({ anchor, surfaceRef, className, children, ...props }: TopLayerPortalProps): JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.358",
+  "version": "1.2.359",
   "repository": {
     "type": "git",
     "url": "https://github.com/camstack/server.git",