@protobase/ui 0.43.2 → 0.44.1

package/dist/data-grid/header-menu.js

@@ -1,30 +1,22 @@
 import { text } from "./messages.js";
-import { useEffect, useRef, useState } from "react";
+import { usePopoverMenu } from "../primitives/popover-menu.js";
 import { MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
 //#region src/data-grid/header-menu.tsx
 /** Why a column header does nothing when pressed: a list sorts only on the columns its view makes sortable. */
 const unsortableText = () => text("unsortable");
-/** The "..." in a column header: pinning the column to the left edge, and saying so when the list can't sort by it. */
+/**
+* The "..." in a column header: pinning the column to the left edge, and saying so when the list can't sort by it. The
+* menu is portalled to the body, as the row menu is: the header row clips, so a menu inside it would be cut off at the
+* header's bottom edge, with the rows showing where it should be.
+*/
 const HeaderMenu = ({ header, pinned, sortable, onTogglePin }) => {
-	const [open, setOpen] = useState(false);
-	const root = useRef(null);
-	useEffect(() => {
-		if (!open) return;
-		const close = (event) => {
-			if (event instanceof KeyboardEvent ? event.key === "Escape" : !root.current?.contains(event.target)) setOpen(false);
-		};
-		document.addEventListener("mousedown", close);
-		document.addEventListener("keydown", close);
-		return () => {
-			document.removeEventListener("mousedown", close);
-			document.removeEventListener("keydown", close);
-		};
-	}, [open]);
+	const { open, setOpen, place, button, menu } = usePopoverMenu();
 	return /* @__PURE__ */ jsxs("div", {
-		ref: root,
 		className: "relative ml-auto shrink-0",
 		children: [/* @__PURE__ */ jsx("button", {
+			ref: button,
 			type: "button",
 			"aria-label": text("columnMenu", header),
 			"aria-haspopup": "menu",
@@ -32,9 +24,11 @@ const HeaderMenu = ({ header, pinned, sortable, onTogglePin }) => {
 			onClick: () => setOpen(!open),
 			className: "relative inline-flex size-5 items-center justify-center rounded text-faint-foreground hover:bg-muted hover:text-foreground focus-visible:opacity-100 after:absolute after:-inset-2 after:content-[''] md:opacity-0 md:group-hover/cell:opacity-100 aria-expanded:opacity-100",
 			children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-3.5" })
-		}), open && /* @__PURE__ */ jsxs("ul", {
+		}), open && createPortal(/* @__PURE__ */ jsxs("ul", {
+			ref: menu,
 			role: "menu",
-			className: "absolute right-0 top-full z-30 mt-1 min-w-32 rounded-md border bg-background py-1 text-body font-normal text-foreground shadow-pop",
+			style: place ?? { visibility: "hidden" },
+			className: "fixed z-50 min-w-32 rounded-md border bg-background py-1 text-body font-normal text-foreground shadow-pop",
 			children: [!sortable && /* @__PURE__ */ jsx("li", {
 				role: "none",
 				children: /* @__PURE__ */ jsx("span", {
@@ -56,7 +50,7 @@ const HeaderMenu = ({ header, pinned, sortable, onTogglePin }) => {
 					children: pinned ? text("unpin") : text("pinToLeft")
 				})
 			})]
-		})]
+		}), document.body)]
 	});
 };
 //#endregion

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.43.2";
+var version = "0.44.1";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/popover-menu.js

@@ -1,12 +1,15 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 //#region src/primitives/popover-menu.ts
 const gap = 4;
-/** Below the button, or above it when the viewport has no room underneath; its right edge at the button's. */
-const placeMenu = (button, menuHeight) => {
+/**
+* Below the button, or above it when the viewport has no room underneath; its right edge at the button's, or further
+* right when that would push its left edge off the viewport, as for a button near the left edge.
+*/
+const placeMenu = (button, menu) => {
 	const below = button.bottom + gap;
 	return {
-		top: below + menuHeight > window.innerHeight - gap ? Math.max(gap, button.top - gap - menuHeight) : below,
-		right: window.innerWidth - button.right
+		top: below + menu.height > window.innerHeight - gap ? Math.max(gap, button.top - gap - menu.height) : below,
+		right: Math.max(gap, Math.min(window.innerWidth - button.right, window.innerWidth - gap - menu.width))
 	};
 };
 /**
@@ -24,7 +27,10 @@ const usePopoverMenu = () => {
 			setPlace(void 0);
 			return;
 		}
-		setPlace(placeMenu(button.current.getBoundingClientRect(), menu.current.offsetHeight));
+		setPlace(placeMenu(button.current.getBoundingClientRect(), {
+			width: menu.current.offsetWidth,
+			height: menu.current.offsetHeight
+		}));
 	}, [open]);
 	useEffect(() => {
 		if (!open) return;