@protobase/ui 0.26.7 → 0.26.9

package/dist/app/pages/use-run-action.js

@@ -5,7 +5,9 @@ import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
 import { useProjectUi } from "./project-ui.js";
 import { can } from "../permissions.js";
+import { actionApplies } from "./action-when.js";
 import { actionFor, linkTarget, openLink } from "./action-href.js";
+import { runEach } from "./run-each.js";
 import { useRefreshResource } from "./use-layout-data.js";
 import { useState } from "react";
 import { fillAddress, updateValues } from "@protobase/schema/internal";
@@ -14,9 +16,11 @@ const message = (error) => error instanceof Error ? error.message : text("someth
 /**
 * The named actions of `resource`'s view, ready to run on `scope` (the record they act on): built-in behaviour first
 * (`update`, `delete`, `link`, and `ai`, which the server runs), else the handler the project registered under the
-* action's name. An update whose values the record holds already is left out, and so is a link to a URL the record
-* holds while it holds none. `blocked` says why one cannot run; `afterRun` hears about every action that succeeded.
+* action's name. One whose `when` does not hold for the record is left out, or blocked with its `reason`; an update
+* whose values the record holds already is left out, and so is a link to a URL the record holds while it holds none.
+* `blocked` says why one cannot run; `afterRun` hears about every action that succeeded.
 * `submit` runs one with the answers to its inputs (a handler gets them, an update writes them) and throws its failure, for the dialog to show.
+* `runEach` runs one on each of several records it applies to, as a list's selection does, and says how that went.
 */
 const useActionRunner = (resource, scope, afterRun) => {
 	const { views } = useAdminMeta();
@@ -29,35 +33,41 @@ const useActionRunner = (resource, scope, afterRun) => {
 	const { go } = useAppAddress();
 	const [running, setRunning] = useState();
 	const actions = (views[resource]?.actions ?? []).flatMap((action) => actionFor(action, scope?.record) ?? []);
-	const blocked = (action) => {
+	const blockedOn = (action, on) => {
 		const kind = action.run?.kind;
-		if ((kind === "update" || kind === "delete" || kind === "ai") && !scope) return text("needsRecord");
-		if ((kind === "update" || kind === "ai") && (!can(permissions, "update") || scope?.permissions?.update === false)) return text("cannotChange");
-		if (action.run?.kind === "ai" && scope?.permissions?.fields?.[action.run.writes] === "read") return text("cannotChange");
-		if (kind === "delete" && (!can(permissions, "delete") || scope?.permissions?.delete === false)) return text("cannotDelete");
+		if ((kind === "update" || kind === "delete" || kind === "ai") && !on) return text("needsRecord");
+		if (!actionApplies(action, on?.record)) return action.reason ?? text("doesNotApply");
+		if ((kind === "update" || kind === "ai") && (!can(permissions, "update") || on?.permissions?.update === false)) return text("cannotChange");
+		if (action.run?.kind === "ai" && on?.permissions?.fields?.[action.run.writes] === "read") return text("cannotChange");
+		if (kind === "delete" && (!can(permissions, "delete") || on?.permissions?.delete === false)) return text("cannotDelete");
 		if (!action.run && !handlers?.[action.name]) return text("noHandler", action.name);
 		const custom = action.inputs?.find((input) => input.kind === "custom" && !components?.[input.component ?? ""]);
 		if (custom) return text("noInputComponent", String(custom.component), custom.name);
 	};
-	const perform = async (action, values) => {
+	const blocked = (action) => blockedOn(action, scope);
+	const execute = async (action, on, values) => {
 		const { run } = action;
 		if (run?.kind === "link") {
-			if ("to" in run) go(fillAddress(run.to, scope?.record));
-			else openLink(linkTarget(run.href, scope?.record));
+			if ("to" in run) go(fillAddress(run.to, on?.record));
+			else openLink(linkTarget(run.href, on?.record));
 			return;
 		}
-		if (run?.kind === "update") await client.update(resource, scope.key, updateValues(run.values, values ?? {}), scope.etag ?? "*");
-		else if (run?.kind === "delete") await client.remove(resource, scope.key, { etag: scope.etag });
-		else if (run?.kind === "ai") await client.generate(resource, scope.key, action.name);
+		if (run?.kind === "update") await client.update(resource, on.key, updateValues(run.values, values ?? {}), on.etag ?? "*");
+		else if (run?.kind === "delete") await client.remove(resource, on.key, { etag: on.etag });
+		else if (run?.kind === "ai") await client.generate(resource, on.key, action.name);
 		else await handlers[action.name]({
 			resource,
-			record: scope?.record,
-			recordKey: scope?.key,
-			etag: scope?.etag,
+			record: on?.record,
+			recordKey: on?.key,
+			etag: on?.etag,
 			client: handlerClient,
 			navigate: go,
 			...values && { values }
 		});
+	};
+	const perform = async (action, on, values) => {
+		await execute(action, on, values);
+		if (action.run?.kind === "link") return;
 		await refresh(resource);
 		toast.show({
 			state: "success",
@@ -65,10 +75,10 @@ const useActionRunner = (resource, scope, afterRun) => {
 		});
 		afterRun?.(action);
 	};
-	const run = async (action) => {
-		if (blocked(action)) return;
+	const run = async (action, on = scope) => {
+		if (blockedOn(action, on)) return;
 		setRunning(action.name);
-		await perform(action).catch((error) => toast.show({
+		await perform(action, on).catch((error) => toast.show({
 			state: "error",
 			title: text("failed", action.label),
 			description: message(error)
@@ -78,14 +88,35 @@ const useActionRunner = (resource, scope, afterRun) => {
 	const submit = async (action, values) => {
 		if (blocked(action)) return;
 		setRunning(action.name);
-		await perform(action, values).finally(() => setRunning(void 0));
+		await perform(action, scope, values).finally(() => setRunning(void 0));
+	};
+	/** Whether `action` shows and can run on `on`. */
+	const appliesOn = (action, on) => actionFor(action, on.record) !== void 0 && !blockedOn(action, on);
+	const runOnEach = async (action, records, skipped = 0) => {
+		setRunning(action.name);
+		const outcome = await runEach(records, (on) => appliesOn(action, on), (on) => execute(action, on));
+		setRunning(void 0);
+		await refresh(resource);
+		const title = text("doneOn", action.label, outcome.done, outcome.skipped + skipped, outcome.failed);
+		toast.show(outcome.failed > 0 ? {
+			state: "error",
+			title,
+			description: message(outcome.error)
+		} : {
+			state: "success",
+			title
+		});
+		if (outcome.done > 0) afterRun?.(action);
 	};
 	return {
 		actions,
 		blocked,
+		blockedOn,
+		appliesOn,
 		running,
 		run,
-		submit
+		submit,
+		runEach: runOnEach
 	};
 };
 /** One named action of `resource`'s view, for a button. */

package/dist/app/router.js

@@ -13,14 +13,30 @@ const useRouter = () => {
 };
 const browserUrl = () => `${window.location.pathname}${window.location.search}`;
 const pathOf = (url) => new URL(url, "http://local").pathname;
+const historyState = () => window.history.state ?? {};
 /** Our place in the browser history, so a back or forward press can be told apart and, if needed, undone. */
-const historyIndex = () => window.history.state?.protobaseIndex ?? 0;
+const historyIndex = () => historyState().protobaseIndex ?? 0;
+const newEntry = () => Math.random().toString(36).slice(2);
+/** The id of the current history entry, given one if it has none yet, as an entry pushed before the app started. */
+const historyEntry = () => {
+	const state = historyState();
+	if (state.protobaseEntry) return state.protobaseEntry;
+	const entry = newEntry();
+	window.history.replaceState({
+		...state,
+		protobaseEntry: entry
+	}, "");
+	return entry;
+};
 const Router = ({ basePath = "", initialUrl, children }) => {
 	const memory = initialUrl !== void 0;
-	const [url, setUrl] = useState(initialUrl ?? browserUrl());
+	const [page, setPage] = useState(() => ({
+		url: initialUrl ?? browserUrl(),
+		entry: memory ? newEntry() : historyEntry()
+	}));
 	const guards = useRef(/* @__PURE__ */ new Set());
-	const urlRef = useRef(url);
-	urlRef.current = url;
+	const current = useRef(page);
+	current.current = page;
 	const position = useRef(memory ? 0 : historyIndex());
 	const undoing = useRef(false);
 	const proceeding = useRef(false);
@@ -28,7 +44,10 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 	const [pending, setPending] = useState();
 	useEffect(() => {
 		if (memory) return;
-		window.history.replaceState({ protobaseIndex: position.current }, "");
+		window.history.replaceState({
+			protobaseIndex: position.current,
+			protobaseEntry: current.current.entry
+		}, "");
 		const onPop = () => {
 			const next = historyIndex();
 			if (undoing.current) {
@@ -39,7 +58,7 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 				return;
 			}
 			const delta = next - position.current;
-			const leaving = pathOf(browserUrl()) !== pathOf(urlRef.current);
+			const leaving = pathOf(browserUrl()) !== pathOf(current.current.url);
 			if (!proceeding.current && guards.current.size > 0 && leaving) {
 				undoing.current = true;
 				window.history.go(-delta);
@@ -51,21 +70,31 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 			}
 			proceeding.current = false;
 			position.current = next;
-			setUrl(browserUrl());
+			setPage({
+				url: browserUrl(),
+				entry: historyEntry()
+			});
 		};
 		window.addEventListener("popstate", onPop);
 		return () => window.removeEventListener("popstate", onPop);
 	}, [memory]);
 	const go = useCallback((full, replace) => {
+		const entry = replace ? current.current.entry : newEntry();
 		if (!memory) {
 			position.current += replace ? 0 : 1;
-			window.history[replace ? "replaceState" : "pushState"]({ protobaseIndex: position.current }, "", full);
+			window.history[replace ? "replaceState" : "pushState"]({
+				protobaseIndex: position.current,
+				protobaseEntry: entry
+			}, "", full);
 		}
-		setUrl(full);
+		setPage({
+			url: full,
+			entry
+		});
 	}, [memory]);
 	const navigate = useCallback((to, { replace = false } = {}) => {
 		const full = `${basePath}${to}`;
-		if (pathOf(full) !== pathOf(urlRef.current) && guards.current.size > 0) return setPending({
+		if (pathOf(full) !== pathOf(current.current.url) && guards.current.size > 0) return setPending({
 			kind: "link",
 			full,
 			replace
@@ -86,17 +115,17 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 		else window.history.go(pending.delta);
 	};
 	const value = useMemo(() => {
-		const parsed = new URL(url, "http://local");
+		const parsed = new URL(page.url, "http://local");
 		return {
 			path: parsed.pathname.slice(basePath.length) || "/",
 			params: parsed.searchParams,
 			basePath,
-			entry: position.current,
+			entry: page.entry,
 			navigate,
 			registerGuard
 		};
 	}, [
-		url,
+		page,
 		basePath,
 		navigate,
 		registerGuard

package/dist/data-grid/bulk-actions.js

@@ -0,0 +1,12 @@
+//#region src/data-grid/bulk-actions.ts
+/** The actions offered for `selected`, each with the rows it runs on and how many it skips. */
+const offeredBulkActions = (actions, selected) => actions.flatMap((action) => {
+	const rows = action.available ? selected.filter(action.available) : selected;
+	return rows.length === 0 ? [] : [{
+		action,
+		rows,
+		skipped: selected.length - rows.length
+	}];
+});
+//#endregion
+export { offeredBulkActions };

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

@@ -2,6 +2,7 @@ import { cn } from "../lib/cn.js";
 import { useIsDesktop } from "../lib/use-media-query.js";
 import { RouteLink } from "../primitives/route-link.js";
 import { buildColumns, features } from "./columns.js";
+import { offeredBulkActions } from "./bulk-actions.js";
 import { GridFooter } from "./grid-footer.js";
 import { RowMenu, availableActions } from "./row-menu.js";
 import { desktopMinScale, gridMinWidth, gutterWidthFor } from "./grid-template.js";
@@ -15,7 +16,7 @@ import { usePagedRows } from "./use-paged-rows.js";
 import { useVirtualRows } from "./use-virtual-rows.js";
 import { useCellEditing } from "./use-cell-editing.js";
 import { ReorderRows, SortableRow } from "./row-reorder.js";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTable } from "@tanstack/react-table";
 //#region src/data-grid/data-grid.tsx
@@ -60,15 +61,14 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		total
 	]);
 	const [startIndex] = useState(initialScrollIndex);
-	const { ref, top, geometry, rows: virtualRows, first: firstIndex, last: lastIndex } = useVirtualRows({
+	const { ref, geometry, rows: virtualRows, first: firstIndex, last: lastIndex } = useVirtualRows({
 		total,
 		rowHeight,
 		initialIndex: startIndex,
-		inset: headerHeight
+		inset: headerHeight,
+		onScroll: onScrollIndex && ((offset) => onScrollIndex(offset / rowHeight))
 	});
 	const gutter = narrow || !rowNumbers ? 40 : gutterWidthFor(total);
-	const topIndex = Math.floor(Math.max(0, top) / rowHeight);
-	useEffect(() => onScrollIndex?.(topIndex), [topIndex, onScrollIndex]);
 	const getRow = usePagedRows({
 		total,
 		rowAt: sourceRowAt ? rowAt : void 0,
@@ -260,11 +260,11 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 			total,
 			className: own ? void 0 : "sticky bottom-[var(--pb-sticky-bottom,0px)] z-20",
 			selectedCount,
-			bulkActions: bulkActions?.map((action) => ({
-				label: action.label(selectedCount),
+			bulkActions: offeredBulkActions(bulkActions ?? [], Object.keys(rowSelection).flatMap((id) => selectedRows.current.get(id) ?? [])).map(({ action, rows, skipped }) => ({
+				label: action.label(rows.length),
 				destructive: action.destructive,
 				onRun: () => {
-					action.onRun(Object.keys(rowSelection).flatMap((id) => selectedRows.current.get(id) ?? []));
+					action.onRun(rows, skipped);
 					setRowSelection({});
 					selectedRows.current.clear();
 				}

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

@@ -6,6 +6,7 @@ import { MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/data-grid/row-menu.tsx
+const labelOf = (action, row) => typeof action.label === "string" ? action.label : action.label(row);
 /** The actions that apply to a row; a row with none gets no menu at all. */
 const availableActions = (actions, row) => actions.filter((action) => action.available?.(row) ?? true);
 /**
@@ -33,25 +34,32 @@ const RowMenu = ({ row, actions }) => {
 			onClick: (event) => event.stopPropagation(),
 			style: place ?? { visibility: "hidden" },
 			className: "fixed z-50 min-w-36 rounded-md border bg-background py-1 shadow-pop",
-			children: actions.map((action) => /* @__PURE__ */ jsx("li", {
-				role: "none",
-				children: action.link ? /* @__PURE__ */ jsx(RouteLink, {
-					role: "menuitem",
-					to: action.link(row),
-					onClick: () => setOpen(false),
-					className: cn("block w-full px-3 py-1.5 text-left hover:bg-muted", action.destructive && "text-danger-text"),
-					children: action.label
-				}) : /* @__PURE__ */ jsx("button", {
-					type: "button",
-					role: "menuitem",
-					className: cn("block w-full px-3 py-1.5 text-left hover:bg-muted", action.destructive && "text-danger-text"),
-					onClick: () => {
-						setOpen(false);
-						action.onSelect(row);
-					},
-					children: action.label
-				})
-			}, action.label))
+			children: actions.map((action, index) => {
+				const label = labelOf(action, row);
+				const blocked = action.blocked?.(row);
+				const itemClass = cn("block w-full px-3 py-1.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60 disabled:hover:bg-transparent", action.destructive && "text-danger-text");
+				return /* @__PURE__ */ jsx("li", {
+					role: "none",
+					children: action.link ? /* @__PURE__ */ jsx(RouteLink, {
+						role: "menuitem",
+						to: action.link(row),
+						onClick: () => setOpen(false),
+						className: itemClass,
+						children: label
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "menuitem",
+						disabled: blocked !== void 0,
+						title: blocked,
+						className: itemClass,
+						onClick: () => {
+							setOpen(false);
+							action.onSelect(row);
+						},
+						children: label
+					})
+				}, index);
+			})
 		}), document.body)]
 	});
 };

package/dist/data-grid/use-virtual-rows.js

@@ -20,7 +20,7 @@ const viewRows = (view, total, rowHeight) => {
 * wheel or touch: the list follows the scroll position, and draws again only when other rows come into view.
 * `first` and `last` are the indexes of the drawn rows, overscan included.
 */
-const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, ready = true }) => {
+const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, ready = true, onScroll }) => {
 	const ref = useRef(null);
 	const scroller = useRef(null);
 	const [view, setView] = useState({
@@ -32,14 +32,16 @@ const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, rea
 		rowHeight,
 		initialIndex,
 		inset,
-		ready
+		ready,
+		onScroll
 	});
 	options.current = {
 		total,
 		rowHeight,
 		initialIndex,
 		inset,
-		ready
+		ready,
+		onScroll
 	};
 	const read = useCallback(() => {
 		const content = ref.current;
@@ -51,24 +53,25 @@ const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, rea
 			height: Math.max(0, area.height - hidden)
 		};
 	}, []);
+	const start = useRef({
+		pending: true,
+		laidOut: false
+	});
 	const shown = useRef(view);
 	shown.current = view;
 	const measure = useCallback(() => {
 		const next = read();
 		if (!next) return;
 		const current = shown.current;
-		const { total, rowHeight } = options.current;
+		const { total, rowHeight, onScroll } = options.current;
 		const before = viewRows(current, total, rowHeight);
 		const after = viewRows(next, total, rowHeight);
+		if (!start.current.pending) onScroll?.(Math.max(0, after.top));
 		const sameRows = !after.geometry.scaled && before.first === after.first && before.last === after.last && before.topIndex === after.topIndex;
 		if (current.height === next.height && (current.position === next.position || sameRows)) return;
 		shown.current = next;
 		setView(next);
 	}, [read]);
-	const start = useRef({
-		pending: true,
-		laidOut: false
-	});
 	const begin = useCallback(() => {
 		if (!start.current.pending || !start.current.laidOut || !options.current.ready) return;
 		const view = read();

package/dist/package.js

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