@protobase/ui 0.21.8 → 0.21.10

package/dist/primitives/popover-menu.js

@@ -0,0 +1,56 @@
+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) => {
+	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
+	};
+};
+/**
+* A menu opened by a button and drawn fixed, portalled to the body, under or over the button: it closes on a click
+* outside, Escape, and a scroll or resize, which would move the button away from it. `place` is undefined until the
+* menu is measured, so it is drawn hidden for that first frame.
+*/
+const usePopoverMenu = () => {
+	const [open, setOpen] = useState(false);
+	const [place, setPlace] = useState();
+	const button = useRef(null);
+	const menu = useRef(null);
+	useLayoutEffect(() => {
+		if (!open || !button.current || !menu.current) {
+			setPlace(void 0);
+			return;
+		}
+		setPlace(placeMenu(button.current.getBoundingClientRect(), menu.current.offsetHeight));
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const inside = (target) => button.current?.contains(target) || menu.current?.contains(target);
+		const close = (event) => {
+			if (event instanceof KeyboardEvent ? event.key === "Escape" : !inside(event.target)) setOpen(false);
+		};
+		const dismiss = () => setOpen(false);
+		document.addEventListener("mousedown", close);
+		document.addEventListener("keydown", close);
+		document.addEventListener("scroll", dismiss, true);
+		window.addEventListener("resize", dismiss);
+		return () => {
+			document.removeEventListener("mousedown", close);
+			document.removeEventListener("keydown", close);
+			document.removeEventListener("scroll", dismiss, true);
+			window.removeEventListener("resize", dismiss);
+		};
+	}, [open]);
+	return {
+		open,
+		setOpen,
+		place,
+		button,
+		menu
+	};
+};
+//#endregion
+export { usePopoverMenu };

package/dist/record-view/action-menu.js

@@ -0,0 +1,59 @@
+import { cn } from "../lib/cn.js";
+import { usePopoverMenu } from "../primitives/popover-menu.js";
+import { MoreVertical } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/record-view/action-menu.tsx
+const itemClass = "flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60";
+/**
+* The actions of an action rail as a menu behind a "..." button, as a mobile screen's top bar holds them: each item the
+* rail's, a link where the rail draws one, disabled with its reason when it cannot run. `className` styles the button.
+*/
+const ActionMenu = ({ actions, label = "Actions", className }) => {
+	const { open, setOpen, place, button, menu } = usePopoverMenu();
+	if (actions.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		ref: button,
+		type: "button",
+		"aria-label": label,
+		"aria-haspopup": "menu",
+		"aria-expanded": open,
+		onClick: () => setOpen(!open),
+		className,
+		children: /* @__PURE__ */ jsx(MoreVertical, { className: "size-5" })
+	}), open && createPortal(/* @__PURE__ */ jsx("ul", {
+		ref: menu,
+		role: "menu",
+		"aria-label": label,
+		style: place ?? { visibility: "hidden" },
+		className: "fixed z-50 min-w-48 rounded-md border bg-background py-1 shadow-pop",
+		children: actions.map(({ name, icon: Icon, onRun, blocked, running, tone, render }) => {
+			const children = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+				className: cn("size-4 shrink-0", tone === "danger" ? "text-danger-text" : "text-muted-foreground"),
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("font-medium", tone === "danger" && "text-danger-text"),
+				children: name
+			})] });
+			return /* @__PURE__ */ jsx("li", {
+				role: "none",
+				onClick: () => setOpen(false),
+				children: render ? render({
+					className: itemClass,
+					children,
+					role: "menuitem"
+				}) : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "menuitem",
+					onClick: onRun,
+					disabled: Boolean(blocked) || running,
+					title: blocked,
+					className: itemClass,
+					children
+				})
+			}, name);
+		})
+	}), document.body)] });
+};
+//#endregion
+export { ActionMenu };

package/dist/record-view/record-header.js

@@ -2,11 +2,7 @@ import { AvatarStack } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/record-header.tsx
-const RecordHeader = ({ collection, title, titleHidden, status, lastEditedBy, presence = [], actions }) => {
-	if (titleHidden && !collection && !status && !lastEditedBy && presence.length === 0 && !actions) return /* @__PURE__ */ jsx("h1", {
-		className: "sr-only",
-		children: title
-	});
+const RecordHeader = ({ collection, title, status, lastEditedBy, presence = [], actions }) => {
 	return /* @__PURE__ */ jsxs("header", {
 		className: "flex flex-col gap-4 border-b border-border pb-6 md:flex-row md:items-end md:justify-between md:gap-6",
 		children: [/* @__PURE__ */ jsxs("div", { children: [
@@ -17,7 +13,7 @@ const RecordHeader = ({ collection, title, titleHidden, status, lastEditedBy, pr
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-x-3 gap-y-1",
 				children: [/* @__PURE__ */ jsx("h1", {
-					className: titleHidden ? "sr-only" : "text-xl font-semibold tracking-tight text-foreground md:text-2xl",
+					className: "text-xl font-semibold tracking-tight text-foreground md:text-2xl",
 					children: title
 				}), status && /* @__PURE__ */ jsx(Badge, {
 					tone: status.tone,

package/dist/record-view/record-sidebar.js

@@ -1,4 +1,4 @@
-import { ChevronRight } from "lucide-react";
+import "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/record-sidebar.tsx
 const MetadataList = ({ rows }) => /* @__PURE__ */ jsx("dl", {
@@ -14,34 +14,6 @@ const MetadataList = ({ rows }) => /* @__PURE__ */ jsx("dl", {
 		})]
 	}, row.label))
 });
-const RelatedRecords = ({ records, onNavigate }) => /* @__PURE__ */ jsx("ul", {
-	className: "-mx-2",
-	children: records.map((record) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
-		href: record.href ?? "#",
-		onClick: (event) => {
-			event.preventDefault();
-			if (record.href) onNavigate?.(record.href);
-		},
-		className: "group flex items-center justify-between gap-3 rounded-md px-2 py-2 hover:bg-muted",
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: "min-w-0",
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: "block text-[11px] uppercase tracking-wide text-faint-foreground",
-					children: record.kind
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "block truncate font-medium text-primary-text",
-					children: record.label
-				}),
-				record.meta && /* @__PURE__ */ jsx("span", {
-					className: "block text-xs text-muted-foreground",
-					children: record.meta
-				})
-			]
-		}), /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-faint-foreground group-hover:text-foreground" })]
-	}) }, record.label))
-});
 const SidebarCard = ({ title, children }) => /* @__PURE__ */ jsxs("div", {
 	className: "rounded-lg border border-border bg-background p-4",
 	children: [/* @__PURE__ */ jsx("h3", {
@@ -55,4 +27,4 @@ const MetadataCard = ({ title, rows }) => rows.length === 0 ? null : /* @__PURE_
 	children: /* @__PURE__ */ jsx(MetadataList, { rows })
 });
 //#endregion
-export { MetadataCard, MetadataList, RelatedRecords, SidebarCard };
+export { MetadataCard, MetadataList, SidebarCard };