@protobase/ui 0.12.12 → 0.12.14

package/dist/primitives/menu-select.js

@@ -0,0 +1,88 @@
+import { cn } from "../lib/cn.js";
+import { menuKeyTarget } from "./menu-keys.js";
+import { useEffect, useRef, useState } from "react";
+import { Check, ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/menu-select.tsx
+/**
+* The choices of a Segmented switch in a menu, for a row without room for every option: a button with the chosen
+* option's icon and label, opening the options under its right edge.
+*/
+const MenuSelect = ({ value, options, onChange, label }) => {
+	const [open, setOpen] = useState(false);
+	const root = useRef(null);
+	const trigger = useRef(null);
+	const items = useRef([]);
+	const chosen = options.findIndex((option) => option.value === value);
+	const current = options[chosen];
+	useEffect(() => {
+		if (!open) return;
+		items.current[Math.max(chosen, 0)]?.focus();
+		const close = (event) => {
+			if (event.target instanceof Node && !root.current?.contains(event.target)) setOpen(false);
+		};
+		document.addEventListener("pointerdown", close);
+		return () => document.removeEventListener("pointerdown", close);
+	}, [open]);
+	const closeToTrigger = () => {
+		setOpen(false);
+		trigger.current?.focus();
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") return closeToTrigger();
+		if (event.key === "Tab") return setOpen(false);
+		const target = menuKeyTarget(event.key, items.current.indexOf(document.activeElement), options.length);
+		if (target === void 0) return;
+		event.preventDefault();
+		items.current[target]?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: "relative shrink-0",
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: trigger,
+			type: "button",
+			"aria-label": current ? `${label}: ${current.label}` : label,
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			onClick: () => setOpen(!open),
+			className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border-strong bg-background px-2.5 text-[13px] font-medium shadow-sm transition-colors hover:bg-muted pointer-coarse:h-11",
+			children: [
+				current?.icon && /* @__PURE__ */ jsx(current.icon, { className: "size-3.5" }),
+				current?.label ?? label,
+				/* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-muted-foreground" })
+			]
+		}), open && /* @__PURE__ */ jsx("ul", {
+			role: "menu",
+			"aria-label": label,
+			onKeyDown,
+			className: "absolute right-0 top-full z-30 mt-1 min-w-40 rounded-md border bg-background py-1 text-[13px] shadow-pop",
+			children: options.map((option, index) => /* @__PURE__ */ jsx("li", {
+				role: "none",
+				children: /* @__PURE__ */ jsxs("button", {
+					ref: (element) => {
+						items.current[index] = element;
+					},
+					type: "button",
+					role: "menuitemradio",
+					"aria-checked": option.value === value,
+					onClick: () => {
+						closeToTrigger();
+						if (option.value !== value) onChange(option.value);
+					},
+					className: cn("flex min-h-9 w-full items-center gap-2 whitespace-nowrap px-3 py-1.5 text-left hover:bg-muted focus:bg-muted focus:outline-none pointer-coarse:min-h-11", option.value === value && "font-medium"),
+					children: [
+						option.icon ? /* @__PURE__ */ jsx(option.icon, { className: "size-3.5" }) : /* @__PURE__ */ jsx("span", { className: "size-3.5" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1",
+							children: option.label
+						}),
+						option.value === value && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary-text" })
+					]
+				})
+			}, option.value))
+		})]
+	});
+};
+//#endregion
+export { MenuSelect };