@protobase/ui 0.19.15 → 0.20.0

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

@@ -10,12 +10,13 @@ import { GridHeader } from "./grid-header.js";
 import { DataRow, SkeletonRow } from "./grid-row.js";
 import { usePagedRows } from "./use-paged-rows.js";
 import { useVirtualRows } from "./use-virtual-rows.js";
+import { useCellEditing } from "./use-cell-editing.js";
 import { useCallback, useEffect, 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
 const headerHeight = 32;
-const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, fit = false, scroll = "own", className }) => {
+const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0, onScrollIndex, latencyMs = 150, sort: controlledSort, onSortChange, onOpenRow, rowActions, cellEditor, rowPatches, bulkActions, pinKey, defaultPinned, rowNumbers = true, compact = false, selectable = true, fit = false, scroll = "own", className }) => {
 	const rowHeight = compact ? 28 : 36;
 	const [pinned, setPinned] = usePinnedColumns(pinKey, defaultPinned);
 	const columns = useMemo(() => {
@@ -65,15 +66,24 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		total,
 		rowAt: sourceRowAt ? rowAt : void 0,
 		loadRows: source.loadRows,
+		revision: source.revision,
 		latencyMs
 	}, firstIndex, lastIndex);
+	const patchedRow = useCallback((index) => {
+		const row = getRow(index);
+		const patch = row && rowPatches?.get(row.id);
+		return patch ? {
+			...row,
+			...patch
+		} : row;
+	}, [getRow, rowPatches]);
 	const loaded = virtualRows.map(({ index, offset }) => ({
 		index,
 		offset,
-		row: getRow(index)
+		row: patchedRow(index)
 	}));
 	const data = useMemo(() => loaded.flatMap(({ row }) => row ? [row] : []), [
-		getRow,
+		patchedRow,
 		firstIndex,
 		lastIndex
 	]);
@@ -123,6 +133,16 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 		sorted: header.column.getIsSorted(),
 		onSort: (event) => header.column.getToggleSortingHandler()?.(event)
 	})));
+	const gridRef = useRef(null);
+	const columnIds = useMemo(() => columns.map((spec) => spec.id), [columns]);
+	const cellEditing = useCellEditing({
+		editor: cellEditor,
+		columns: columnIds,
+		total,
+		rowAt: patchedRow,
+		onOpenRow,
+		container: gridRef
+	});
 	const minWidth = gridMinWidth(columns, gutter, trailing, minScale);
 	const own = scroll === "own";
 	const header = /* @__PURE__ */ jsx("div", {
@@ -183,17 +203,22 @@ const DataGrid = ({ columns: given, source, naturalSort, initialScrollIndex = 0,
 						row,
 						actions
 					}) : void 0,
-					cells: tableRow.getAllCells().map((cell) => ({
-						spec: columns.find((spec) => spec.id === cell.column.id),
-						content: /* @__PURE__ */ jsx(table.FlexRender, { cell })
-					}))
+					cells: tableRow.getAllCells().map((cell) => {
+						const content = /* @__PURE__ */ jsx(table.FlexRender, { cell });
+						return {
+							spec: columns.find((spec) => spec.id === cell.column.id),
+							...cellEditing && row ? cellEditing.cell(index, row, cell.column.id, content) : { content }
+						};
+					})
 				}, row?.id);
 			})
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
+		ref: gridRef,
 		role: "grid",
 		"aria-rowcount": total,
+		onKeyDown: cellEditing?.onKeyDown,
 		className: cn("flex flex-col rounded-lg border bg-background", own ? "min-h-0 overflow-hidden" : "overflow-clip", className),
 		style: fit && own ? { height: headerHeight + total * rowHeight + 2 } : void 0,
 		children: [/* @__PURE__ */ jsxs("div", {

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

@@ -62,7 +62,7 @@ const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing,
 				})]
 			}, spec.id);
 		}),
-		trailing ? /* @__PURE__ */ jsx("div", {}) : null
+		trailing ? /* @__PURE__ */ jsx("div", { className: "sticky right-0 z-10 h-full bg-inherit" }) : null
 	]
 });
 //#endregion

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

@@ -14,17 +14,20 @@ const frameStyle = (frame) => ({
 /** Pinned cells need a solid background; `bg-inherit` takes the row's, so hover and selection still show. */
 const cellClass = (spec, frame) => cn("flex h-full min-w-0 items-center overflow-hidden whitespace-nowrap px-3", isRightAligned(spec.kind) && "justify-end", spec.highlight && "bg-primary-soft/60", frame.pins && spec.id in frame.pins && "sticky z-10 bg-inherit", frame.scrolled && spec.id === frame.lastPinned && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]");
 const pinStyle = (spec, pins) => pins && spec.id in pins ? { left: pins[spec.id] } : void 0;
-/** The selection column never scrolls away, so rows can be selected from anywhere in a wide grid. */
+/**
+* The selection column never scrolls away, so rows can be selected from anywhere in a wide grid.
+* The whole cell toggles the row instead of opening it; the checkbox's own click bubbles up to it.
+*/
 const Gutter = ({ width, index, selectable, selected, onToggle, edge }) => /* @__PURE__ */ jsxs("div", {
-	className: cn("sticky left-0 z-10 flex h-full items-center gap-2 bg-inherit pl-3", edge && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]"),
+	onClick: selectable ? (event) => {
+		event.stopPropagation();
+		onToggle?.();
+	} : void 0,
+	className: cn("sticky left-0 z-10 flex h-full items-center gap-2 bg-inherit pl-3", selectable && "cursor-default", edge && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]"),
 	style: { width },
-	children: [selectable && /* @__PURE__ */ jsx("span", {
-		onClick: (event) => event.stopPropagation(),
-		children: /* @__PURE__ */ jsx(Checkbox, {
-			checked: Boolean(selected),
-			onChange: onToggle,
-			label: `Select row ${index + 1}`
-		})
+	children: [selectable && /* @__PURE__ */ jsx(Checkbox, {
+		checked: Boolean(selected),
+		label: `Select row ${index + 1}`
 	}), width > 40 && /* @__PURE__ */ jsx("span", {
 		className: "min-w-6 text-right text-[11px] tabular-nums text-faint-foreground",
 		children: formatInt(index + 1)
@@ -44,14 +47,15 @@ const DataRow = ({ cells, selected, onToggle, onOpen, menu, ...frame }) => /* @_
 			onToggle,
 			edge: frame.scrolled && !frame.lastPinned
 		}),
-		cells.map(({ spec, content }) => /* @__PURE__ */ jsx("div", {
-			role: "cell",
-			className: cellClass(spec, frame),
+		cells.map(({ spec, content, props, chosen, editing, editable }) => /* @__PURE__ */ jsx("div", {
+			role: props ? "gridcell" : "cell",
+			...props,
+			className: cn(cellClass(spec, frame), props && "scroll-mb-[calc(var(--pb-sticky-bottom,0px)+3rem)] scroll-mt-[calc(var(--pb-sticky-top,0px)+2rem)] outline-none", editable && !editing && "cursor-default", chosen && "shadow-[inset_0_0_0_2px_var(--primary)]", editing && "z-30 overflow-visible bg-background px-1"),
 			style: pinStyle(spec, frame.pins),
 			children: content
 		}, spec.id)),
 		menu && /* @__PURE__ */ jsx("div", {
-			className: "flex h-full items-center justify-center",
+			className: "sticky right-0 z-10 flex h-full items-center justify-center bg-inherit",
 			children: menu
 		})
 	]

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

@@ -13,6 +13,9 @@ const createPageCache = (pageSize, maxPages) => {
 			if (oldest.done) return;
 			pages.delete(oldest.value);
 		},
+		keepOnly: (kept) => {
+			for (const page of [...pages.keys()]) if (!kept.includes(page)) pages.delete(page);
+		},
 		get size() {
 			return pages.size;
 		}

package/dist/data-grid/use-cell-editing.js

@@ -0,0 +1,113 @@
+import { isMoveKey, movedCell, nextEditable } from "./cell-moves.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/data-grid/use-cell-editing.tsx
+const placeId = (place) => `${place.index}:${place.column}`;
+/**
+* The chosen cell and the one being edited, of a grid with an editor. The arrow keys, and Tab and Shift+Tab within a
+* row, move between cells; Enter opens the editor of an editable cell and the row of any other; Escape lets go of the
+* cell. A cell's mouse and keyboard handlers come from `cell`.
+*/
+const useCellEditing = ({ editor, columns, total, rowAt, onOpenRow, container }) => {
+	const [active, setActive] = useState();
+	const [editing, setEditing] = useState(false);
+	const refocus = useRef(false);
+	const pressedChosen = useRef(false);
+	useEffect(() => {
+		if (!active || editing || !refocus.current) return;
+		refocus.current = false;
+		const cell = container.current?.querySelector(`[data-cell="${placeId(active)}"]`);
+		if (!cell) return;
+		cell.focus({ preventScroll: true });
+		cell.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [
+		active,
+		editing,
+		container
+	]);
+	if (!editor) return void 0;
+	const editableAt = (place) => {
+		const row = rowAt(place.index);
+		return row !== void 0 && editor.editable(row, place.column);
+	};
+	const choose = (place, edit = false) => {
+		refocus.current = true;
+		setActive(place);
+		setEditing(edit && editableAt(place));
+	};
+	const close = (move) => {
+		if (!active) return;
+		const row = rowAt(active.index);
+		const next = move && row ? nextEditable(active.column, columns, (column) => editor.editable(row, column), move) : void 0;
+		const focused = Boolean(container.current?.contains(document.activeElement));
+		choose(next ? {
+			...active,
+			column: next
+		} : active, next !== void 0);
+		refocus.current = focused;
+	};
+	const onKeyDown = (event) => {
+		if (editing || !active || !(event.target instanceof HTMLElement) || event.target.dataset.cell !== placeId(active)) return;
+		const key = event.key === "Tab" ? event.shiftKey ? "ArrowLeft" : "ArrowRight" : event.key;
+		if (isMoveKey(key)) {
+			const next = movedCell(active, key, columns, total);
+			if (!next && event.key === "Tab") return;
+			event.preventDefault();
+			if (next && rowAt(next.index)) choose(next);
+			return;
+		}
+		if (event.key === "Enter" || event.key === "F2") {
+			event.preventDefault();
+			const row = rowAt(active.index);
+			if (editableAt(active)) choose(active, true);
+			else if (event.key === "Enter" && row) onOpenRow?.(row);
+			return;
+		}
+		if (event.key === "Escape") setActive(void 0);
+	};
+	/** What a cell of the grid needs: its content, its handlers, and whether it is chosen or being edited. */
+	const cell = (index, row, column, content) => {
+		const place = {
+			index,
+			column
+		};
+		const chosen = active?.index === index && active.column === column;
+		const editable = editor.editable(row, column);
+		const reachable = chosen || !active && index === 0 && column === columns[0];
+		return {
+			content: chosen && editing ? editor.render(row, column, close) : content,
+			chosen,
+			editing: chosen && editing,
+			editable,
+			props: {
+				"data-cell": placeId(place),
+				tabIndex: reachable ? 0 : -1,
+				"aria-selected": chosen,
+				onMouseDown: () => {
+					pressedChosen.current = chosen;
+				},
+				onFocus: (event) => {
+					if (event.target === event.currentTarget && !chosen) setActive(place);
+				},
+				onClick: (event) => {
+					if (!editable) return;
+					event.stopPropagation();
+					if (pressedChosen.current && !editing) choose(place, true);
+				},
+				onDoubleClick: (event) => {
+					if (!editable) return;
+					event.stopPropagation();
+					if (!(chosen && editing)) choose(place, true);
+				}
+			}
+		};
+	};
+	return {
+		cell,
+		onKeyDown
+	};
+};
+//#endregion
+export { useCellEditing };

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

@@ -1,10 +1,13 @@
 import { createPageCache, pagesForRange } from "./page-cache.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+/** How many rows of `total` the page holds: a whole page, but for the last. */
+const pageLength = (total, page) => Math.max(0, Math.min(40, total - page * 40));
 /**
 * Serves rows by absolute index. Mock sources compute rows (after `latencyMs`, or at once when 0);
-* live sources load pages through `loadRows`. Unloaded rows read as undefined, so fast scrolling shows skeletons.
+* live sources load pages through `loadRows`. Unloaded rows read as undefined, so fast scrolling shows skeletons. A new
+* `revision` loads the pages on screen again, showing the rows they held until the new ones arrive.
 */
-const usePagedRows = ({ total, rowAt, loadRows, latencyMs }, start, end) => {
+const usePagedRows = ({ total, rowAt, loadRows, revision, latencyMs }, start, end) => {
 	const cache = useMemo(() => createPageCache(40, 60), [rowAt, loadRows]);
 	const [version, setVersion] = useState(0);
 	const firstPage = Math.floor(start / 40);
@@ -13,7 +16,7 @@ const usePagedRows = ({ total, rowAt, loadRows, latencyMs }, start, end) => {
 	useEffect(() => {
 		if (synchronous) return;
 		const pages = pagesForRange(firstPage * 40, lastPage * 40, 40).filter((page) => !cache.hasPage(page));
-		const length = (page) => Math.max(0, Math.min(40, total - page * 40));
+		const length = (page) => pageLength(total, page);
 		const store = (page, rows) => {
 			cache.setPage(page, rows);
 			setVersion((current) => current + 1);
@@ -39,6 +42,24 @@ const usePagedRows = ({ total, rowAt, loadRows, latencyMs }, start, end) => {
 		loadRows,
 		synchronous
 	]);
+	const shownRevision = useRef(revision);
+	useEffect(() => {
+		if (!loadRows || revision === shownRevision.current) return;
+		shownRevision.current = revision;
+		const shown = pagesForRange(firstPage * 40, lastPage * 40, 40);
+		cache.keepOnly(shown);
+		for (const page of shown.filter((page) => cache.hasPage(page))) loadRows(page * 40, pageLength(total, page)).then((rows) => {
+			cache.setPage(page, rows);
+			setVersion((current) => current + 1);
+		});
+	}, [
+		cache,
+		revision,
+		loadRows,
+		firstPage,
+		lastPage,
+		total
+	]);
 	return useCallback((index) => synchronous ? rowAt(index) : cache.get(index), [
 		cache,
 		synchronous,

package/dist/index.js

@@ -37,14 +37,14 @@ import { Field } from "./record-view/field.js";
 import { Section } from "./record-view/section.js";
 import { Textarea } from "./primitives/textarea.js";
 import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { useList } from "./data/use-list.js";
 import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
+import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { MenuSelect } from "./primitives/menu-select.js";
 import { Form } from "./app/create/form.js";
-import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
-import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";

package/dist/live/field-values.js

@@ -12,6 +12,8 @@ const textEdited = /* @__PURE__ */ new Set([
 	"country"
 ]);
 const isEditable = (field) => !field.readOnly && field.type !== "json" && field.type !== "uuid" && field.type !== "timestamp" && field.type !== "relation";
+/** A field a record's form cannot leave empty: written through the API, never null and no boolean, which always holds a value. */
+const isRequiredOnEdit = (field) => !field.readOnly && !field.nullable && field.type !== "boolean";
 /** The JSON value to send for an edited field: integers become numbers, empty optional fields become null. */
 const toPatchValue = (field, draft) => {
 	if (field.type === "boolean") return Boolean(draft);
@@ -40,4 +42,4 @@ const differs = (field, draft, stored) => {
 	return a !== b;
 };
 //#endregion
-export { differs, fromDraft, isEditable, toDraft, toFieldDraft, toPatchValue };
+export { differs, fromDraft, isEditable, isRequiredOnEdit, toDraft, toFieldDraft, toPatchValue };

package/dist/live/related-column-rows.js

@@ -1,7 +1,7 @@
 import { listLabels, withLabels } from "./relation-labels.js";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/live/related-column-rows.ts
-const where = createWhere();
+const where$1 = createWhere();
 const and = (...parts) => {
 	const given = parts.filter((part) => Boolean(part));
 	return given.length === 1 ? given[0] : given.map((part) => `(${part})`).join(" AND ");
@@ -29,7 +29,7 @@ const linksOf = async (client, resources, column, owners) => {
 	const key = through.key ?? via?.primaryKey[0];
 	if (!via || key === void 0) throw new Error(`The related column ${column.name} names a join resource the app does not have: ${through.resource}`);
 	return (await client.search(via.name, {
-		filter: and(printFilter(where.in(through.field, owners)), through.filter),
+		filter: and(printFilter(where$1.in(through.field, owners)), through.filter),
 		fields: [through.field, key],
 		pageSize: 500
 	})).items.flatMap((row) => {
@@ -58,7 +58,7 @@ const loadRelatedColumn = async ({ client, resources, views, load, owners }) =>
 	])];
 	const labels = listLabels(resources, views, target, loaded);
 	const page = await client.search(target.name, {
-		filter: and(printFilter(where.in(column.field, values)), column.filter),
+		filter: and(printFilter(where$1.in(column.field, values)), column.filter),
 		...column.sort && { orderBy: column.sort },
 		fields: loaded,
 		pageSize: 500,

package/dist/live/relation-labels.js

@@ -2,7 +2,7 @@ import { keys } from "../data/query-keys.js";
 import { labelFieldOf } from "./model-helpers.js";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/live/relation-labels.ts
-const where = createWhere();
+const where$1 = createWhere();
 /** Names for the given keys of a single-key resource, fetched in one list call and cached. */
 const fetchLabels = async (queryClient, client, target, ids, view) => {
 	const keyField = target.primaryKey[0];
@@ -14,7 +14,7 @@ const fetchLabels = async (queryClient, client, target, ids, view) => {
 		staleTime: 3e5,
 		queryFn: async () => {
 			return (await client.list(target.name, {
-				filter: printFilter(where.in(keyField, unique)),
+				filter: printFilter(where$1.in(keyField, unique)),
 				fields: [keyField, labelField],
 				pageSize: unique.length
 			})).items.map((item) => [String(item[keyField]), String(item[labelField])]);

package/dist/live/use-live-rows.js

@@ -6,7 +6,9 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/live/use-live-rows.ts
 /**
 * A grid row source backed by the API; `total` is the server's estimate from the first page. `page` loads one page of
-* the same rows by number, and `key` names them in the query cache, for list displays that page through them.
+* the same rows by number, and `key` names them in the query cache, for list displays that page through them. Each
+* fetch of the first page, as on a return to the window, makes every page of the list stale and gives the source a new
+* `revision`, so the rows on screen are loaded again.
 */
 const useLiveRows = ({ resources, views, model, columns, filter, orderBy, related }) => {
 	const client = useClient();
@@ -36,13 +38,24 @@ const useLiveRows = ({ resources, views, model, columns, filter, orderBy, relate
 	]);
 	const first = useQuery({
 		queryKey: [...keys.first(model.name, filter, orderBy), columnKey],
-		queryFn: () => loader.page(0)
+		queryFn: async () => {
+			await queryClient.invalidateQueries({
+				queryKey: keys.pages(model.name, filter, orderBy),
+				refetchType: "none"
+			});
+			return loader.page(0);
+		}
 	});
 	return {
 		source: useMemo(() => first.data ? {
 			total: first.data.total,
-			loadRows: loader.loadRows
-		} : void 0, [first.data, loader]),
+			loadRows: loader.loadRows,
+			revision: first.dataUpdatedAt
+		} : void 0, [
+			first.data,
+			first.dataUpdatedAt,
+			loader
+		]),
 		error: first.error,
 		isLoading: first.isLoading,
 		page: loader.page,

package/dist/live/use-reference-search.js

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { keepPreviousData, useQueries } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
 //#region src/live/use-reference-search.ts
-const where = createWhere();
+const where$1 = createWhere();
 /**
 * The search text typed into each facet's combobox and the records of its target resource that match it. A facet
 * without a target, or whose target has no search fields or a composite key, gets nothing: its options are filtered
@@ -29,7 +29,7 @@ const useReferenceSearch = (targets, views) => {
 				const keyField = target.primaryKey[0];
 				const labelField = labelFieldOf(target, views[target.name]);
 				return (await client.list(target.name, {
-					filter: printFilter(where.search(text)),
+					filter: printFilter(where$1.search(text)),
 					fields: [keyField, labelField],
 					pageSize: 20
 				})).items.map((item) => [String(item[keyField]), String(item[labelField])]);

package/dist/package.js

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