@protobase/ui 0.22.9 → 0.22.11

package/dist/app/current-address.d.ts

@@ -23,6 +23,7 @@ export type CurrentAddress = ListAddress | {
   key: string;
   edit?: true;
   open?: readonly string[];
+  tab?: string;
 } | {
   kind: 'create';
   resource: string;

package/dist/app/current-address.js

@@ -35,7 +35,8 @@ const currentAddress = (read, defaults) => {
 		resource: read.resource,
 		key: encodeKey(read.key),
 		...read.edit && { edit: true },
-		...read.open && { open: read.open }
+		...read.open && { open: read.open },
+		...read.tab && { tab: read.tab }
 	};
 	if (read?.kind !== "list") return read;
 	return {

package/dist/app/record-mode/shown-layout.js

@@ -1,25 +1,31 @@
 import { whenShown } from "./record-mode.js";
 import { isRecordCondition } from "@protobase/schema";
 //#region src/app/record-mode/shown-layout.ts
-/** The items with a record condition in `when`, those inside groups too, whose conditions the page evaluates: a group before its items. */
-const conditionalItems = (items) => items.flatMap((item) => item.kind === "group" ? [item, ...item.items] : [item]).filter((item) => isRecordCondition(item.when));
+const innerItems = (item) => item.kind === "group" || item.kind === "tab" ? item.items : [];
+const whenOf = (item) => item.kind === "tab" ? void 0 : item.when;
+/** The items with a record condition in `when`, those inside tabs and groups too, whose conditions the page evaluates: a group before its items. */
+const conditionalItems = (items) => items.flatMap((item) => [item, ...conditionalItems(innerItems(item))]).filter((item) => isRecordCondition(whenOf(item)));
 /**
 * The items that show: those with a record condition only when it holds (`held`, one answer per conditional item in
 * the order `conditionalItems` lists them, `undefined` while loading) and the page is no preview; the others by the
-* form or read view. A group keeps the items inside it that show, and goes when it or all of them do not.
+* form or read view. A tab or group keeps the items inside it that show, and goes when it or all of them do not.
 */
 const shownLayout = (items, held, editing, preview) => {
 	let next = 0;
-	const shown = (item) => isRecordCondition(item.when) ? !preview && held[next++] === true : whenShown(item.when, editing);
-	return items.flatMap((item) => {
-		if (item.kind !== "group") return shown(item) ? [item] : [];
-		const groupShown = shown(item);
-		const inner = item.items.filter(shown);
-		return groupShown && inner.length > 0 ? [{
+	const shown = (item) => {
+		const when = whenOf(item);
+		return isRecordCondition(when) ? !preview && held[next++] === true : whenShown(when, editing);
+	};
+	const keep = (list) => list.flatMap((item) => {
+		const itself = shown(item);
+		if (item.kind !== "group" && item.kind !== "tab") return itself ? [item] : [];
+		const inner = keep(item.items);
+		return itself && inner.length > 0 ? [{
 			...item,
 			items: inner
 		}] : [];
 	});
+	return keep(items);
 };
 //#endregion
-export { conditionalItems, shownLayout };
+export { conditionalItems, shownLayout, whenOf };

package/dist/app/record-mode/use-shown-layout.js

@@ -1,12 +1,12 @@
 import { useConditions } from "../pages/use-conditions.js";
-import { conditionalItems, shownLayout } from "./shown-layout.js";
+import { conditionalItems, shownLayout, whenOf } from "./shown-layout.js";
 //#region src/app/record-mode/use-shown-layout.ts
 /**
 * The layout items to draw: those meant for the form or the read view as the page is, and those with a record
 * condition while it holds for the saved record. Conditional items stay out while their values load and on a preview.
 */
 const useShownLayout = (items, scope, editing, preview) => {
-	const conditions = preview ? [] : conditionalItems(items).map((item) => item.when);
+	const conditions = preview ? [] : conditionalItems(items).map((item) => whenOf(item));
 	const held = useConditions(conditions, scope);
 	return shownLayout(items, held, editing, preview);
 };

package/dist/app/record-page.js

@@ -22,6 +22,7 @@ import { filledFields } from "./filled-fields.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { GroupSection } from "../record-view/group-section.js";
+import { RecordTabs } from "../record-view/record-tabs.js";
 import { SpecTable } from "../record-view/spec-table.js";
 import { KeyFacts } from "../record-view/key-facts.js";
 import { fromDraft, isRequiredOnEdit } from "../live/field-values.js";
@@ -47,6 +48,7 @@ import { CustomSection } from "./custom-section.js";
 import { MapSection } from "./map/map-section.js";
 import { RecordActions } from "./pages/record-actions.js";
 import { groupOpen, toggledOpen } from "./group-open.js";
+import { attentionTab, shownTab, splitTabs } from "./record-tabs.js";
 import { RecordLines, findLinesResource } from "./record-lines.js";
 import { draftStorageKey } from "./draft-storage.js";
 import { useLines } from "./use-lines.js";
@@ -60,7 +62,7 @@ import { useRelatedRecords } from "./use-related-records.js";
 import { IncomingCard } from "./incoming-card.js";
 import { RelatedSection } from "./related-section.js";
 import { relatedValue } from "./related-value.js";
-import { Fragment, useMemo } from "react";
+import { Fragment, useEffect, useMemo } from "react";
 import { Check } from "lucide-react";
 import { isApiError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -155,15 +157,17 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	usePauseFocusRefresh(editor.dirty);
 	const openGroups = address?.kind === "record" ? address.open : void 0;
 	const atEdit = address?.kind === "record" && address.edit === true;
-	const recordAt = (open = [], edit = false) => ({
+	const addressedTab = address?.kind === "record" ? address.tab : void 0;
+	const recordAt = (open = [], edit = false, tab) => ({
 		kind: "record",
 		resource: model.name,
 		key: recordKey,
 		...edit && { edit },
-		...open.length > 0 && { open }
+		...open.length > 0 && { open },
+		...tab && { tab }
 	});
-	const readAddress = recordAt(openGroups);
-	const editAddress = recordAt(openGroups, true);
+	const readAddress = recordAt(openGroups, false, addressedTab);
+	const editAddress = recordAt(openGroups, true, addressedTab);
 	const leavesForm = shown === "form" && view?.recordMode !== void 0 && view.recordMode !== "edit";
 	const canDelete = can(permissions, "delete") && stored.permissions?.delete !== false;
 	const remove = useDeleteFlow({
@@ -204,6 +208,14 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		permissions: stored.permissions
 	};
 	const layout = useShownLayout(layoutFor(model, view, shown === "read"), scope, editing, preview);
+	const { before, tabs, after } = splitTabs(layout);
+	const tab = shownTab(tabs, addressedTab);
+	const needsAttention = (name) => editing && (editor.errors[name] !== void 0 || editor.conflicts[name] !== void 0);
+	useEffect(() => {
+		if (editor.rejections === 0) return;
+		const target = attentionTab(tabs, tab, needsAttention);
+		if (target) go(recordAt(openGroups, atEdit, target === tabs[0] ? void 0 : target.title), { replace: true });
+	}, [editor.rejections]);
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
 	const hasStatus = model.fields.status?.type === "enum";
 	const statusValue = stored.record.status;
@@ -353,8 +365,8 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		if (item.kind === "group") {
 			const children = item.items.flatMap(mainItem);
 			if (children.length === 0) return [];
-			const open = groupOpen(item, openGroups, (name) => editing && (editor.errors[name] !== void 0 || editor.conflicts[name] !== void 0));
-			const toggle = item.collapsed ? recordAt(toggledOpen(openGroups, item.title), atEdit) : void 0;
+			const open = groupOpen(item, openGroups, needsAttention);
+			const toggle = item.collapsed ? recordAt(toggledOpen(openGroups, item.title), atEdit, addressedTab) : void 0;
 			return [/* @__PURE__ */ jsx(GroupSection, {
 				title: item.title,
 				open,
@@ -483,13 +495,26 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 							className: "grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_300px] md:gap-12",
 							children: [/* @__PURE__ */ jsxs("main", {
 								className: "divide-y divide-border",
-								children: [layout.flatMap(mainItem), linesModel && !preview && /* @__PURE__ */ jsx(RecordLines, {
-									lines: linesModel,
-									draft: linesDraft,
-									vatRate: Number(stored.record.vatRate ?? 21) / 100,
-									saving: editor.saving,
-									locked: shown !== "form"
-								})]
+								children: [
+									before.flatMap(mainItem),
+									tab && /* @__PURE__ */ jsx(RecordTabs, { tabs: tabs.map((each, index) => ({
+										title: each.title,
+										to: recordAt(openGroups, atEdit, index === 0 ? void 0 : each.title),
+										current: each === tab
+									})) }),
+									tab && /* @__PURE__ */ jsx("div", {
+										className: "divide-y divide-border",
+										children: tab.items.flatMap(mainItem)
+									}, `tab:${tab.title}`),
+									after.flatMap(mainItem),
+									linesModel && !preview && /* @__PURE__ */ jsx(RecordLines, {
+										lines: linesModel,
+										draft: linesDraft,
+										vatRate: Number(stored.record.vatRate ?? 21) / 100,
+										saving: editor.saving,
+										locked: shown !== "form"
+									})
+								]
 							}), /* @__PURE__ */ jsxs("aside", {
 								className: "space-y-4 md:pt-8",
 								children: [

package/dist/app/record-tabs.js

@@ -0,0 +1,31 @@
+import { layoutItems } from "@protobase/schema/internal";
+//#region src/app/record-tabs.ts
+/** The shown layout around its tabs: the items before them, the tabs, and the items after. A view's tabs stand together. */
+const splitTabs = (layout) => {
+	const first = layout.findIndex((item) => item.kind === "tab");
+	if (first === -1) return {
+		before: layout,
+		tabs: [],
+		after: []
+	};
+	const tabs = [];
+	for (const item of layout.slice(first)) {
+		if (item.kind !== "tab") break;
+		tabs.push(item);
+	}
+	return {
+		before: layout.slice(0, first),
+		tabs,
+		after: layout.slice(first + tabs.length)
+	};
+};
+/** The tab shown: the one the address names, else the first. */
+const shownTab = (tabs, named) => tabs.find((tab) => tab.title === named) ?? tabs[0];
+const tabFields = (tab) => layoutItems(tab.items).flatMap((item) => item.kind === "section" ? item.fields : []);
+/** The tab to show after a turned-down save: the first that holds a field needing attention, unless the shown one does. */
+const attentionTab = (tabs, shown, needsAttention) => {
+	if (!shown || tabFields(shown).some(needsAttention)) return void 0;
+	return tabs.find((tab) => tabFields(tab).some(needsAttention));
+};
+//#endregion
+export { attentionTab, shownTab, splitTabs };

package/dist/app/use-focus-first-invalid.js

@@ -2,14 +2,21 @@ import { useEffect, useRef } from "react";
 //#region src/app/use-focus-first-invalid.ts
 /**
 * Puts focus on the first control marked invalid inside the element the ref is on, each time `rejections` counts
-* another save the server turned down, once the form shows why.
+* another save the server turned down, once the form shows why, such as after the page moves to the tab that holds it.
 */
 const useFocusFirstInvalid = (rejections) => {
 	const ref = useRef(null);
+	const pending = useRef(false);
 	useEffect(() => {
-		if (rejections === 0) return;
-		ref.current?.querySelector("[aria-invalid=\"true\"]")?.focus();
+		if (rejections > 0) pending.current = true;
 	}, [rejections]);
+	useEffect(() => {
+		if (!pending.current) return;
+		const invalid = ref.current?.querySelector("[aria-invalid=\"true\"]");
+		if (!invalid) return;
+		invalid.focus();
+		pending.current = false;
+	});
 	return ref;
 };
 //#endregion

package/dist/package.js

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

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

@@ -0,0 +1,22 @@
+import { cn } from "../lib/cn.js";
+import { segmentedClass } from "../primitives/segmented.js";
+import { AppLink } from "../app/use-app-address.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/record-view/record-tabs.tsx
+/** The record page's tabs, links whose addresses show each; the shown one is the current page. */
+const RecordTabs = ({ tabs }) => /* @__PURE__ */ jsx("nav", {
+	"aria-label": "Tabs",
+	className: "overflow-x-auto py-6",
+	children: /* @__PURE__ */ jsx("span", {
+		className: segmentedClass.group("md"),
+		children: tabs.map((tab) => /* @__PURE__ */ jsx(AppLink, {
+			to: tab.to,
+			replace: true,
+			"aria-current": tab.current ? "page" : void 0,
+			className: cn(segmentedClass.option(tab.current, "md"), "whitespace-nowrap"),
+			children: tab.title
+		}, tab.title))
+	})
+});
+//#endregion
+export { RecordTabs };