@protobase/ui 0.22.8 → 0.22.10

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/related-section.js

@@ -7,10 +7,10 @@ import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { ErrorBanner } from "./error-banner.js";
 import { countQuery } from "./pages/use-layout-data.js";
 import { searchAll } from "../live/search-all.js";
+import { relatedHandOrder } from "./hand-order/hand-order.js";
 import { relatedOpens } from "./related-opens.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
-import { relatedHandOrder } from "./hand-order/hand-order.js";
 import { HandSortedList } from "./hand-order/hand-sorted-list.js";
 import { SortButton } from "./hand-order/sort-button.js";
 import { useState } from "react";

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.8";
+var version = "0.22.10";
 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 };