@protobase/ui 0.12.12 → 0.12.13

package/dist/app/displays/display-controls.js

@@ -1,6 +1,8 @@
+import { cn } from "../../lib/cn.js";
 import { humanize } from "../../live/naming.js";
 import { displayChoices, sortFields } from "./list-displays.js";
 import { parseSort } from "../list-order.js";
+import { MenuSelect } from "../../primitives/menu-select.js";
 import { Segmented } from "../../primitives/segmented.js";
 import { Calendar, Columns3, LayoutGrid, List, SquareKanban, Table2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,25 +16,35 @@ const icons = {
 	list: List,
 	calendar: Calendar
 };
-/** The list page's switch between the table and the view's displays; nothing for a list with only its table. */
-const DisplaySwitch = ({ view, value, onChange }) => {
+/**
+* The list page's switch between the table and the view's displays, as buttons or, on a phone, as a menu; nothing for a
+* list with only its table.
+*/
+const DisplaySwitch = ({ view, value, onChange, menu = false }) => {
 	const choices = displayChoices(view);
 	if (choices.length < 2) return null;
+	const options = choices.map((choice) => ({
+		value: choice.name,
+		label: choice.label,
+		icon: choice.icon === void 0 ? void 0 : icons[choice.icon]
+	}));
+	if (menu) return /* @__PURE__ */ jsx(MenuSelect, {
+		label: "Display",
+		value,
+		onChange,
+		options
+	});
 	return /* @__PURE__ */ jsx(Segmented, {
 		label: "Display",
 		size: "md",
 		value,
 		onChange,
-		options: choices.map((choice) => ({
-			value: choice.name,
-			label: choice.label,
-			icon: choice.icon === void 0 ? void 0 : icons[choice.icon]
-		}))
+		options
 	});
 };
 const directions = [["asc", "ascending"], ["desc", "descending"]];
 /** The order of a display without column headers, over the sortable fields it shows and the order the list has now. */
-const SortMenu = ({ model, view, display, orderBy, onChange }) => {
+const SortMenu = ({ model, view, display, orderBy, onChange, className }) => {
 	const current = parseSort(orderBy);
 	const fields = sortFields(model, view, display);
 	const names = fields.includes(current.columnId) ? fields : [current.columnId, ...fields];
@@ -41,7 +53,7 @@ const SortMenu = ({ model, view, display, orderBy, onChange }) => {
 		"aria-label": "Sort",
 		value: `${current.columnId} ${current.direction}`,
 		onChange: (event) => onChange(event.target.value),
-		className: "h-8 rounded-md border border-border-strong bg-background px-2.5 text-[13px] shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
+		className: cn("h-8 rounded-md border border-border-strong bg-background px-2.5 text-[13px] shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20", className),
 		children: names.flatMap((name) => directions.map(([direction, word]) => /* @__PURE__ */ jsxs("option", {
 			value: `${name} ${direction}`,
 			children: [

package/dist/app/list-page.js

@@ -15,6 +15,7 @@ import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
 import { ActiveFilterChips } from "../filter-panel/active-filter-chips.js";
 import { activeChips, emptyFilterState, removeChip } from "../filter-panel/filter-state.js";
+import { FilterSection } from "../filter-panel/filter-section.js";
 import { ToolbarRow } from "../filter-panel/toolbar-row.js";
 import { FilterPanel } from "../filter-panel/filter-panel.js";
 import { columnsFromModel } from "../live/columns-from-model.js";
@@ -135,14 +136,15 @@ const LoadedList = ({ model, address }) => {
 	const searchBox = model.search?.length ? /* @__PURE__ */ jsx(ListSearch, {
 		value: search?.kind === "search" ? search.text : "",
 		onCommit: commitSearch,
-		placeholder: `Search ${plural.toLowerCase()}`
+		placeholder: `Search ${plural.toLowerCase()}`,
+		className: desktop ? void 0 : "min-h-11"
 	}) : null;
 	const panel = /* @__PURE__ */ jsx(FilterPanel, {
 		layout,
 		config,
 		value: state,
 		onChange: setFilter,
-		leading: sortMenu,
+		leading: layout === "bar" ? sortMenu : void 0,
 		trailing: searchBox
 	});
 	const desktopToolbar = layout === "bar" ? panel : /* @__PURE__ */ jsx(ToolbarRow, {
@@ -150,40 +152,75 @@ const LoadedList = ({ model, address }) => {
 		trailing: searchBox
 	});
 	const chips = activeChips(config, state);
+	const chipsRow = /* @__PURE__ */ jsx(ActiveFilterChips, {
+		scroll: true,
+		chips,
+		onRemove: (key) => setFilter(removeChip(state, key)),
+		onClear: () => setFilter(emptyFilterState)
+	});
+	const phoneSort = display && /* @__PURE__ */ jsx(FilterSection, {
+		title: "Sort",
+		children: /* @__PURE__ */ jsx(SortMenu, {
+			model,
+			view,
+			display,
+			orderBy,
+			onChange: (next) => set({ orderBy: next }),
+			className: "min-h-11 w-full"
+		})
+	});
 	const phoneFilters = /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsxs(Button, {
-				className: "min-h-11",
-				onClick: () => setSheetOpen(true),
-				"aria-haspopup": "dialog",
-				children: [
-					/* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5" }),
-					"Filters",
-					chips.length > 0 && ` (${chips.length})`
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "min-w-0 flex-1",
-				children: /* @__PURE__ */ jsx(ActiveFilterChips, {
-					scroll: true,
-					chips,
-					onRemove: (key) => setFilter(removeChip(state, key)),
-					onClear: () => setFilter(emptyFilterState)
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					className: "min-h-11",
+					onClick: () => setSheetOpen(true),
+					"aria-haspopup": "dialog",
+					children: [
+						/* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5" }),
+						"Filters",
+						chips.length > 0 && ` (${chips.length})`
+					]
+				}), searchBox ?? /* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: chipsRow
+				})]
+			}),
+			searchBox && chipsRow,
+			/* @__PURE__ */ jsx(Sheet, {
+				title: "Filters",
+				open: sheetOpen,
+				onClose: () => setSheetOpen(false),
+				children: /* @__PURE__ */ jsx(FilterPanel, {
+					layout: "panel",
+					fullWidth: true,
+					config,
+					value: state,
+					onChange: setFilter,
+					leading: phoneSort
 				})
-			})]
-		}), /* @__PURE__ */ jsx(Sheet, {
-			title: "Filters",
-			open: sheetOpen,
-			onClose: () => setSheetOpen(false),
-			children: /* @__PURE__ */ jsx(FilterPanel, {
-				layout: "panel",
-				fullWidth: true,
-				config,
-				value: state,
-				onChange: setFilter
 			})
-		})]
+		]
+	});
+	const createButton = can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
+		variant: "primary",
+		onClick: () => go({
+			kind: "create",
+			resource
+		}),
+		children: [
+			/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+			"New ",
+			singular.toLowerCase()
+		]
+	});
+	const displaySwitch = (menu) => /* @__PURE__ */ jsx(DisplaySwitch, {
+		view,
+		value: display?.name ?? tableDisplay,
+		onChange: (name) => set({ display: name }),
+		menu
 	});
 	const openRecord = (row) => go({
 		kind: "record",
@@ -230,27 +267,8 @@ const LoadedList = ({ model, address }) => {
 			/* @__PURE__ */ jsx(PageHeader, {
 				title: plural,
 				subtitle: view?.help,
-				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(DisplaySwitch, {
-						view,
-						value: display?.name ?? tableDisplay,
-						onChange: (name) => set({ display: name })
-					}),
-					!desktop && sortMenu,
-					!desktop && searchBox,
-					can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
-						variant: "primary",
-						onClick: () => go({
-							kind: "create",
-							resource
-						}),
-						children: [
-							/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-							"New ",
-							singular.toLowerCase()
-						]
-					})
-				] })
+				aside: !desktop && displaySwitch(true),
+				actions: desktop ? /* @__PURE__ */ jsxs(Fragment$1, { children: [displaySwitch(false), createButton] }) : createButton
 			}),
 			!parsed.ok && /* @__PURE__ */ jsx(ErrorBanner, {
 				title: "The filter in the address could not be read",

package/dist/app/list-search.js

@@ -1,10 +1,11 @@
+import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
 import { useEffect, useState } from "react";
 import { Search } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/list-search.tsx
-/** A search box that commits after a short pause or on Enter. */
-const ListSearch = ({ value, onCommit, placeholder }) => {
+/** A search box that commits after a short pause or on Enter; `className` goes on its frame. */
+const ListSearch = ({ value, onCommit, placeholder, className }) => {
 	const [text, setText] = useState(value);
 	useEffect(() => setText(value), [value]);
 	useEffect(() => {
@@ -17,7 +18,7 @@ const ListSearch = ({ value, onCommit, placeholder }) => {
 		onCommit
 	]);
 	return /* @__PURE__ */ jsx(Input, {
-		wrapperClassName: "min-w-0 flex-1 sm:w-72 sm:flex-initial",
+		wrapperClassName: cn("min-w-0 flex-1 sm:w-72 sm:flex-initial", className),
 		leading: /* @__PURE__ */ jsx(Search, { className: "size-4" }),
 		placeholder,
 		"aria-label": "Search",

package/dist/app-shell/page-header.js

@@ -1,17 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/page-header.tsx
-const PageHeader = ({ title, subtitle, actions }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex flex-wrap items-end justify-between gap-x-4 gap-y-2",
-	children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+const PageHeader = ({ title, subtitle, aside, actions }) => {
+	const heading = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
 		className: "text-xl font-semibold tracking-tight",
 		children: title
 	}), subtitle && /* @__PURE__ */ jsx("p", {
 		className: "text-[13px] text-muted-foreground",
 		children: subtitle
-	})] }), /* @__PURE__ */ jsx("div", {
-		className: "flex w-full flex-wrap items-center gap-2 sm:w-auto",
-		children: actions
-	})]
-});
+	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-end justify-between gap-x-4 gap-y-2",
+		children: [aside ? /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 items-center justify-between gap-3",
+			children: [heading, aside]
+		}) : heading, actions && /* @__PURE__ */ jsx("div", {
+			className: "flex w-full flex-wrap items-center gap-2 sm:w-auto",
+			children: actions
+		})]
+	});
+};
 //#endregion
 export { PageHeader };

package/dist/filter-panel/filter-panel.js

@@ -68,6 +68,7 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 				className: "border-b pb-3",
 				children: chipsView
 			}),
+			leading,
 			config.facets.map((group) => /* @__PURE__ */ jsx(FilterSection, {
 				title: group.label,
 				children: facetView(group)

package/dist/package.js

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

package/dist/primitives/menu-keys.js

@@ -0,0 +1,14 @@
+//#region src/primitives/menu-keys.ts
+/**
+* The item of an open menu a key moves the focus to, from the item at `index` (-1 for none) of `count`: the arrows step
+* and wrap, Home and End jump to the ends. `undefined` for a key that does not move it.
+*/
+const menuKeyTarget = (key, index, count) => {
+	if (count === 0) return void 0;
+	if (key === "Home") return 0;
+	if (key === "End") return count - 1;
+	if (key === "ArrowDown") return index < 0 ? 0 : (index + 1) % count;
+	if (key === "ArrowUp") return index < 0 ? count - 1 : (index - 1 + count) % count;
+};
+//#endregion
+export { menuKeyTarget };

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 };