@protobase/ui 0.53.2 → 0.53.4

package/dist/app/change-confirm/asks-to-confirm.js

@@ -0,0 +1,10 @@
+import { differs } from "../../live/field-values.js";
+//#region src/app/change-confirm/asks-to-confirm.ts
+const draftOf = (next) => typeof next === "object" && next !== null && "key" in next ? next.key : next;
+/**
+* Whether a change to a field with `.confirm()` asks first: when it moves the value away from the stored one while the
+* value on screen is still that one, so a text asks at its first key and not at every one after.
+*/
+const asksToConfirm = (field, hints, value, stored, next) => hints?.confirm !== void 0 && !differs(field, value, stored) && differs(field, draftOf(next), stored);
+//#endregion
+export { asksToConfirm };

package/dist/app/change-confirm/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/change-confirm/messages.ts
+const text = defineMessages({
+	en: {
+		title: (label) => `Change ${label}?`,
+		change: "Change",
+		cancel: "Cancel"
+	},
+	nl: {
+		title: (label) => `${label} wijzigen?`,
+		change: "Wijzigen",
+		cancel: "Annuleren"
+	}
+});
+//#endregion
+export { text };

package/dist/app/change-confirm/use-change-confirm.js

@@ -0,0 +1,51 @@
+import { Button } from "../../primitives/button.js";
+import { Dialog } from "../../primitives/dialog.js";
+import { humanize } from "../../live/naming.js";
+import { asksToConfirm } from "./asks-to-confirm.js";
+import { text } from "./messages.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/app/change-confirm/use-change-confirm.tsx
+/**
+* Whether `node` sits in the question a change asks. The dialog is portalled to the body, so a list cell does not clip
+* it, while its events still bubble through the editor that asked it.
+*/
+const inChangeConfirm = (node) => node instanceof Element && node.closest("[data-change-confirm]") !== null;
+/**
+* The field's `onChange`, asking the view's `.confirm()` question before it hands on a change that `asksToConfirm`
+* picks out, and the dialog that asks it. Cancelling drops the change, so the field keeps its value.
+*/
+const useChangeConfirm = ({ field, hints, value, stored, onChange }) => {
+	const [pending, setPending] = useState();
+	const change = (next) => {
+		if (asksToConfirm(field, hints, value, stored, next)) setPending({ next });
+		else onChange(next);
+	};
+	const cancel = () => setPending(void 0);
+	const confirm = () => {
+		setPending(void 0);
+		onChange(pending.next);
+	};
+	return {
+		onChange: change,
+		dialog: pending && createPortal(/* @__PURE__ */ jsx("div", {
+			"data-change-confirm": "",
+			children: /* @__PURE__ */ jsx(Dialog, {
+				title: text("title", hints?.label ?? humanize(field.name)),
+				description: hints?.confirm,
+				onClose: cancel,
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: cancel,
+					children: text("cancel")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onClick: confirm,
+					children: text("change")
+				})] })
+			})
+		}), document.body)
+	};
+};
+//#endregion
+export { inChangeConfirm, useChangeConfirm };

package/dist/app/field-editor.js

@@ -20,8 +20,9 @@ import { Markdown } from "../markdown/markdown.js";
 import { MarkdownEditor } from "../markdown/markdown-editor.js";
 import { numeric, numericInputProps } from "./numeric-input.js";
 import { ContactLink } from "../live/contact-link.js";
+import { useChangeConfirm } from "./change-confirm/use-change-confirm.js";
 import { ArrowUpRight } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx
 const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo, relationPicker, invalid, locked, placeholder, reveal, resource, onChange }) => {
@@ -150,11 +151,7 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		onChange: (event) => onChange(event.target.value)
 	});
 };
-/**
-* A field on a form: its field type's editor when the view chooses one that has an editor and the field may change,
-* its display when it may not, and the built-in input or value otherwise, and when the field type throws.
-*/
-const FieldEditor = (props) => {
+const ChosenEditor = (props) => {
 	const { field, hints, value, stored, invalid, locked, onChange } = props;
 	const shown = useShownWidget(field, hints);
 	const builtIn = /* @__PURE__ */ jsx(BuiltInEditor, { ...props });
@@ -177,5 +174,17 @@ const FieldEditor = (props) => {
 		fallback: builtIn
 	});
 };
+/**
+* A field on a form: its field type's editor when the view chooses one that has an editor and the field may change,
+* its display when it may not, and the built-in input or value otherwise, and when the field type throws. A field with
+* `.confirm()` asks its question before its value first changes.
+*/
+const FieldEditor = (props) => {
+	const confirm = useChangeConfirm(props);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChosenEditor, {
+		...props,
+		onChange: confirm.onChange
+	}), confirm.dialog] });
+};
 //#endregion
 export { FieldEditor };

package/dist/app/list-edit/cell-field-editor.js

@@ -1,4 +1,5 @@
 import { differs, toFieldDraft, toPatchValue } from "../../live/field-values.js";
+import { inChangeConfirm } from "../change-confirm/use-change-confirm.js";
 import { FieldEditor } from "../field-editor.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -23,6 +24,7 @@ const CellFieldEditor = ({ field, hints, resource, stored, onSave, close }) => {
 		close(move);
 	};
 	const onKeyDown = (event) => {
+		if (inChangeConfirm(event.target)) return;
 		if (event.key === "Enter") {
 			event.preventDefault();
 			finish(true);
@@ -36,7 +38,7 @@ const CellFieldEditor = ({ field, hints, resource, stored, onSave, close }) => {
 		}
 	};
 	const onBlur = (event) => {
-		if (!ref.current?.contains(event.relatedTarget)) finish(true);
+		if (!ref.current?.contains(event.relatedTarget) && !inChangeConfirm(event.relatedTarget)) finish(true);
 	};
 	const onChange = (next) => {
 		setDraft(next);

package/dist/app/list-page.js

@@ -492,6 +492,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			/* @__PURE__ */ jsx(PageHeader, {
 				title: heading?.title ?? plural,
 				subtitle: heading ? heading.subtitle : view?.help,
+				subtitleBelow: true,
 				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					displaySwitch(!desktop),
 					sortButton,

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

@@ -1,19 +1,43 @@
 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-col gap-x-4 gap-y-2 md:flex-row md:items-end md:justify-between",
+const PageHeader = ({ title, subtitle, actions, subtitleBelow }) => {
+	if (subtitleBelow) return /* @__PURE__ */ jsx(StackedPageHeader, {
+		title,
+		subtitle,
+		actions
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-x-4 gap-y-2 md:flex-row md:items-end md:justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 break-words md:flex-1",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-xl font-semibold tracking-tight",
+				children: title
+			}), subtitle && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: subtitle
+			})]
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-2 md:justify-end",
+			children: actions
+		})]
+	});
+};
+/** The title and actions in one row, which wraps the actions below the title when it runs out of room, then the subtitle. */
+const StackedPageHeader = ({ title, subtitle, actions }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col gap-2",
 	children: [/* @__PURE__ */ jsxs("div", {
-		className: "min-w-0 break-words md:flex-1",
+		className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2 md:flex-nowrap",
 		children: [/* @__PURE__ */ jsx("h1", {
-			className: "text-xl font-semibold tracking-tight",
+			className: "min-w-0 break-words text-xl font-semibold tracking-tight md:flex-1",
 			children: title
-		}), subtitle && /* @__PURE__ */ jsx("p", {
-			className: "text-muted-foreground",
-			children: subtitle
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-2 md:justify-end",
+			children: actions
 		})]
-	}), actions && /* @__PURE__ */ jsx("div", {
-		className: "flex flex-wrap items-center gap-2 md:justify-end",
-		children: actions
+	}), subtitle && /* @__PURE__ */ jsx("p", {
+		className: "break-words text-muted-foreground",
+		children: subtitle
 	})]
 });
 //#endregion

package/dist/package.js

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