@panneau/lists 5.0.0-alpha.17 → 5.0.0-alpha.18

package/dist/inline/InlineCell.js

@@ -2,7 +2,7 @@ import { messages } from "../messages.js";
 import Inline_module_default from "./Inline.module.js";
 import { getProblem } from "@panneau/core";
 import { c } from "react/compiler-runtime";
-import { Button, IconButton, Spinner, usePanneauIntl } from "@panneau/ui";
+import { Button, IconButton, Spinner, usePanneauIntl, useToast } from "@panneau/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pencil } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -32,9 +32,10 @@ function isEqualValue(a, b) {
 * field's portable rules, then saved alone; errors and conflicts show in the cell.
 */
 function InlineCell(t0) {
-	const $ = c(76);
-	const { item, field, itemLabel, children, renderValue, onSave, onItem, formatError } = t0;
+	const $ = c(78);
+	const { item, field, itemLabel, getItemLabel, children, renderValue, onSave, onItem, formatError } = t0;
 	const intl = usePanneauIntl();
+	const toasts = useToast();
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = { mode: "idle" };
@@ -72,10 +73,13 @@ function InlineCell(t0) {
 	let t7;
 	let t8;
 	let t9;
-	if ($[4] !== Entry || $[5] !== bare || $[6] !== children || $[7] !== field || $[8] !== formatError || $[9] !== intl || $[10] !== isBoolean || $[11] !== item || $[12] !== itemLabel || $[13] !== label || $[14] !== onItem || $[15] !== onSave || $[16] !== renderValue || $[17] !== state.current || $[18] !== state.draft || $[19] !== state.errors || $[20] !== state.mode || $[21] !== value) {
+	if ($[4] !== Entry || $[5] !== bare || $[6] !== children || $[7] !== field || $[8] !== formatError || $[9] !== getItemLabel || $[10] !== intl || $[11] !== isBoolean || $[12] !== item || $[13] !== itemLabel || $[14] !== label || $[15] !== onItem || $[16] !== onSave || $[17] !== renderValue || $[18] !== state.current || $[19] !== state.draft || $[20] !== state.errors || $[21] !== state.mode || $[22] !== toasts || $[23] !== value) {
 		t9 = Symbol.for("react.early_return_sentinel");
 		bb0: {
-			save = (base, draft) => {
+			save = (base, draft, t10) => {
+				const { undoing: t11 } = t10 === void 0 ? {} : t10;
+				const undoing = t11 === void 0 ? false : t11;
+				const previous = base[field.name];
 				setState({
 					mode: "saving",
 					draft
@@ -84,6 +88,19 @@ function InlineCell(t0) {
 					onItem(saved);
 					focus.current = isBoolean ? null : "button";
 					setState({ mode: "idle" });
+					const names = {
+						item: getItemLabel?.(saved) ?? itemLabel,
+						field: label
+					};
+					const key = { key: `panneau-inline:${item.id}:${field.name}` };
+					toasts.show(undoing ? { title: intl.formatMessage(messages.inlineUndone, names) } : {
+						title: intl.formatMessage(messages.inlineSaved, names),
+						tone: "success",
+						action: {
+							label: intl.formatMessage(messages.undo),
+							onAction: () => save(saved, previous, { undoing: true })
+						}
+					}, key);
 				}, (error) => {
 					const problem = getProblem(error);
 					if (problem?.status === 412 && problem.current !== void 0) {
@@ -95,8 +112,8 @@ function InlineCell(t0) {
 						});
 						return;
 					}
-					const own = Object.entries(problem?.errors ?? {}).filter((t10) => {
-						const [path] = t10;
+					const own = Object.entries(problem?.errors ?? {}).filter((t12) => {
+						const [path] = t12;
 						return path === field.name || path.startsWith(`${field.name}.`);
 					}).flatMap(_temp);
 					const message = problem?.detail ?? (problem !== null ? problem.title : null) ?? (error instanceof Error && error.message !== "" ? error.message : null) ?? intl.formatMessage(messages.saveValueFailed);
@@ -166,69 +183,69 @@ function InlineCell(t0) {
 				hideLabel: true
 			});
 			if (isBoolean) {
-				let t11;
-				if ($[30] !== state.errors || $[31] !== state.mode) {
-					t11 = state.mode === "editing" ? state.errors : [];
-					$[30] = state.errors;
-					$[31] = state.mode;
-					$[32] = t11;
-				} else t11 = $[32];
-				let t12;
-				if ($[33] !== intl || $[34] !== state.mode) {
-					t12 = state.mode === "saving" ? /* @__PURE__ */ jsx(Spinner, {
+				let t13;
+				if ($[32] !== state.errors || $[33] !== state.mode) {
+					t13 = state.mode === "editing" ? state.errors : [];
+					$[32] = state.errors;
+					$[33] = state.mode;
+					$[34] = t13;
+				} else t13 = $[34];
+				let t14;
+				if ($[35] !== intl || $[36] !== state.mode) {
+					t14 = state.mode === "saving" ? /* @__PURE__ */ jsx(Spinner, {
 						size: "sm",
 						label: intl.formatMessage(messages.savingValue)
 					}) : null;
-					$[33] = intl;
-					$[34] = state.mode;
-					$[35] = t12;
-				} else t12 = $[35];
-				const t13 = /* @__PURE__ */ jsxs("div", {
+					$[35] = intl;
+					$[36] = state.mode;
+					$[37] = t14;
+				} else t14 = $[37];
+				const t15 = /* @__PURE__ */ jsxs("div", {
 					className: Inline_module_default.control,
-					children: [control(state.mode === "idle" ? value : state.draft, t11, state.mode === "saving"), t12]
+					children: [control(state.mode === "idle" ? value : state.draft, t13, state.mode === "saving"), t14]
 				});
-				const t14 = state.mode === "conflict" ? /* @__PURE__ */ jsx(Conflict, {
+				const t16 = state.mode === "conflict" ? /* @__PURE__ */ jsx(Conflict, {
 					current: renderValue(state.current),
 					onKeep: () => setState({ mode: "idle" }),
 					onSave: () => save(state.current, state.draft)
 				}) : null;
-				let t15;
-				if ($[36] !== t13 || $[37] !== t14) {
-					t15 = /* @__PURE__ */ jsxs("div", {
+				let t17;
+				if ($[38] !== t15 || $[39] !== t16) {
+					t17 = /* @__PURE__ */ jsxs("div", {
 						className: Inline_module_default.cell,
-						children: [t13, t14]
+						children: [t15, t16]
 					});
-					$[36] = t13;
-					$[37] = t14;
 					$[38] = t15;
-				} else t15 = $[38];
-				t9 = t15;
+					$[39] = t16;
+					$[40] = t17;
+				} else t17 = $[40];
+				t9 = t17;
 				break bb0;
 			}
 			if (state.mode === "idle") {
-				let t11;
-				if ($[39] !== children) {
-					t11 = /* @__PURE__ */ jsx("span", {
+				let t13;
+				if ($[41] !== children) {
+					t13 = /* @__PURE__ */ jsx("span", {
 						className: Inline_module_default.value,
 						children
 					});
-					$[39] = children;
-					$[40] = t11;
-				} else t11 = $[40];
-				let t12;
-				if ($[41] !== intl || $[42] !== itemLabel || $[43] !== label) {
-					t12 = intl.formatMessage(messages.editValue, {
+					$[41] = children;
+					$[42] = t13;
+				} else t13 = $[42];
+				let t14;
+				if ($[43] !== intl || $[44] !== itemLabel || $[45] !== label) {
+					t14 = intl.formatMessage(messages.editValue, {
 						field: label,
 						item: itemLabel
 					});
-					$[41] = intl;
-					$[42] = itemLabel;
-					$[43] = label;
-					$[44] = t12;
-				} else t12 = $[44];
-				let t13;
-				if ($[45] !== value) {
-					t13 = () => {
+					$[43] = intl;
+					$[44] = itemLabel;
+					$[45] = label;
+					$[46] = t14;
+				} else t14 = $[46];
+				let t15;
+				if ($[47] !== value) {
+					t15 = () => {
 						focus.current = "editor";
 						setState({
 							mode: "editing",
@@ -236,35 +253,35 @@ function InlineCell(t0) {
 							errors: []
 						});
 					};
-					$[45] = value;
-					$[46] = t13;
-				} else t13 = $[46];
-				let t14;
-				if ($[47] !== t12 || $[48] !== t13) {
-					t14 = /* @__PURE__ */ jsx(IconButton, {
+					$[47] = value;
+					$[48] = t15;
+				} else t15 = $[48];
+				let t16;
+				if ($[49] !== t14 || $[50] !== t15) {
+					t16 = /* @__PURE__ */ jsx(IconButton, {
 						icon: Pencil,
 						size: "sm",
-						label: t12,
+						label: t14,
 						showTooltip: false,
 						className: Inline_module_default.edit,
-						onPress: t13
+						onPress: t15
 					});
-					$[47] = t12;
-					$[48] = t13;
 					$[49] = t14;
-				} else t14 = $[49];
-				let t15;
-				if ($[50] !== t11 || $[51] !== t14) {
-					t15 = /* @__PURE__ */ jsxs("div", {
+					$[50] = t15;
+					$[51] = t16;
+				} else t16 = $[51];
+				let t17;
+				if ($[52] !== t13 || $[53] !== t16) {
+					t17 = /* @__PURE__ */ jsxs("div", {
 						ref: root,
 						className: Inline_module_default.cell,
-						children: [t11, t14]
+						children: [t13, t16]
 					});
-					$[50] = t11;
-					$[51] = t14;
-					$[52] = t15;
-				} else t15 = $[52];
-				t9 = t15;
+					$[52] = t13;
+					$[53] = t16;
+					$[54] = t17;
+				} else t17 = $[54];
+				t9 = t17;
 				break bb0;
 			}
 			t5 = root;
@@ -272,75 +289,77 @@ function InlineCell(t0) {
 			t7 = onKeyDown;
 			t8 = onBlur;
 			t3 = Inline_module_default.control;
-			let t11;
-			if ($[53] !== state.errors || $[54] !== state.mode) {
-				t11 = state.mode === "editing" ? state.errors : [];
-				$[53] = state.errors;
-				$[54] = state.mode;
-				$[55] = t11;
-			} else t11 = $[55];
-			t4 = control(state.draft, t11, state.mode === "saving");
+			let t13;
+			if ($[55] !== state.errors || $[56] !== state.mode) {
+				t13 = state.mode === "editing" ? state.errors : [];
+				$[55] = state.errors;
+				$[56] = state.mode;
+				$[57] = t13;
+			} else t13 = $[57];
+			t4 = control(state.draft, t13, state.mode === "saving");
 		}
 		$[4] = Entry;
 		$[5] = bare;
 		$[6] = children;
 		$[7] = field;
 		$[8] = formatError;
-		$[9] = intl;
-		$[10] = isBoolean;
-		$[11] = item;
-		$[12] = itemLabel;
-		$[13] = label;
-		$[14] = onItem;
-		$[15] = onSave;
-		$[16] = renderValue;
-		$[17] = state.current;
-		$[18] = state.draft;
-		$[19] = state.errors;
-		$[20] = state.mode;
-		$[21] = value;
-		$[22] = save;
-		$[23] = t3;
-		$[24] = t4;
-		$[25] = t5;
-		$[26] = t6;
-		$[27] = t7;
-		$[28] = t8;
-		$[29] = t9;
+		$[9] = getItemLabel;
+		$[10] = intl;
+		$[11] = isBoolean;
+		$[12] = item;
+		$[13] = itemLabel;
+		$[14] = label;
+		$[15] = onItem;
+		$[16] = onSave;
+		$[17] = renderValue;
+		$[18] = state.current;
+		$[19] = state.draft;
+		$[20] = state.errors;
+		$[21] = state.mode;
+		$[22] = toasts;
+		$[23] = value;
+		$[24] = save;
+		$[25] = t3;
+		$[26] = t4;
+		$[27] = t5;
+		$[28] = t6;
+		$[29] = t7;
+		$[30] = t8;
+		$[31] = t9;
 	} else {
-		save = $[22];
-		t3 = $[23];
-		t4 = $[24];
-		t5 = $[25];
-		t6 = $[26];
-		t7 = $[27];
-		t8 = $[28];
-		t9 = $[29];
+		save = $[24];
+		t3 = $[25];
+		t4 = $[26];
+		t5 = $[27];
+		t6 = $[28];
+		t7 = $[29];
+		t8 = $[30];
+		t9 = $[31];
 	}
 	if (t9 !== Symbol.for("react.early_return_sentinel")) return t9;
 	let t10;
-	if ($[56] !== intl || $[57] !== state.mode) {
+	if ($[58] !== intl || $[59] !== state.mode) {
 		t10 = state.mode === "saving" ? /* @__PURE__ */ jsx(Spinner, {
 			size: "sm",
 			label: intl.formatMessage(messages.savingValue)
 		}) : null;
-		$[56] = intl;
-		$[57] = state.mode;
-		$[58] = t10;
-	} else t10 = $[58];
+		$[58] = intl;
+		$[59] = state.mode;
+		$[60] = t10;
+	} else t10 = $[60];
 	let t11;
-	if ($[59] !== t10 || $[60] !== t3 || $[61] !== t4) {
+	if ($[61] !== t10 || $[62] !== t3 || $[63] !== t4) {
 		t11 = /* @__PURE__ */ jsxs("div", {
 			className: t3,
 			children: [t4, t10]
 		});
-		$[59] = t10;
-		$[60] = t3;
-		$[61] = t4;
-		$[62] = t11;
-	} else t11 = $[62];
+		$[61] = t10;
+		$[62] = t3;
+		$[63] = t4;
+		$[64] = t11;
+	} else t11 = $[64];
 	let t12;
-	if ($[63] !== renderValue || $[64] !== save || $[65] !== state.current || $[66] !== state.draft || $[67] !== state.mode) {
+	if ($[65] !== renderValue || $[66] !== save || $[67] !== state.current || $[68] !== state.draft || $[69] !== state.mode) {
 		t12 = state.mode === "conflict" ? /* @__PURE__ */ jsx(Conflict, {
 			current: renderValue(state.current),
 			onKeep: () => {
@@ -349,15 +368,15 @@ function InlineCell(t0) {
 			},
 			onSave: () => save(state.current, state.draft)
 		}) : null;
-		$[63] = renderValue;
-		$[64] = save;
-		$[65] = state.current;
-		$[66] = state.draft;
-		$[67] = state.mode;
-		$[68] = t12;
-	} else t12 = $[68];
+		$[65] = renderValue;
+		$[66] = save;
+		$[67] = state.current;
+		$[68] = state.draft;
+		$[69] = state.mode;
+		$[70] = t12;
+	} else t12 = $[70];
 	let t13;
-	if ($[69] !== t11 || $[70] !== t12 || $[71] !== t5 || $[72] !== t6 || $[73] !== t7 || $[74] !== t8) {
+	if ($[71] !== t11 || $[72] !== t12 || $[73] !== t5 || $[74] !== t6 || $[75] !== t7 || $[76] !== t8) {
 		t13 = /* @__PURE__ */ jsxs("div", {
 			ref: t5,
 			className: t6,
@@ -365,14 +384,14 @@ function InlineCell(t0) {
 			onBlur: t8,
 			children: [t11, t12]
 		});
-		$[69] = t11;
-		$[70] = t12;
-		$[71] = t5;
-		$[72] = t6;
-		$[73] = t7;
-		$[74] = t8;
-		$[75] = t13;
-	} else t13 = $[75];
+		$[71] = t11;
+		$[72] = t12;
+		$[73] = t5;
+		$[74] = t6;
+		$[75] = t7;
+		$[76] = t8;
+		$[77] = t13;
+	} else t13 = $[77];
 	return t13;
 }
 /** What someone else saved, with the choice of keeping it or saving over it. */

package/dist/inline/InlineCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineCell.js","names":["Pencil","FocusEvent","KeyboardEvent","ReactNode","useEffect","useRef","useState","getProblem","BooleanFieldEntry","DateFieldEntry","NumberFieldEntry","SelectFieldEntry","TextFieldEntry","Field","RuleFailure","checkValues","Button","IconButton","Spinner","usePanneauIntl","messages","ListItem","styles","ENTRIES","text","number","select","boolean","date","const","PICKED","Set","State","mode","draft","errors","current","InlineCellProps","item","field","itemLabel","children","renderValue","onSave","value","Promise","onItem","formatError","failure","isEqualValue","a","b","JSON","stringify","InlineCell","t0","$","_c","intl","t1","Symbol","for","state","setState","root","focus","label","name","isBoolean","type","Entry","bare","help","_help","t2","querySelector","save","t3","t4","t5","t6","t7","t8","t9","bb0","base","then","saved","error","problem","status","undefined","own","Object","entries","filter","t10","path","startsWith","flatMap","_temp","message","detail","title","Error","formatMessage","saveValueFailed","length","commit","draft_0","failures","partial","values","flat","map","cancel","onKeyDown","event","key","stopPropagation","has","preventDefault","onBlur","event_0","next","relatedTarget","Element","currentTarget","contains","closest","control","draft_1","errors_0","disabled","next_0","t11","t12","savingValue","t13","t14","t15","cell","editValue","edit","list","Conflict","onKeep","valueConflict","keepTheirs","saveMine","conflictActions","conflict","_c","styles"],"sources":["../../src/inline/InlineCell.tsx"],"sourcesContent":["import { Pencil } from 'lucide-react';\nimport {\n    type FocusEvent,\n    type KeyboardEvent,\n    type ReactNode,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\n\nimport { getProblem } from '@panneau/core';\nimport { BooleanFieldEntry } from '@panneau/fields/boolean';\nimport { DateFieldEntry } from '@panneau/fields/date';\nimport { NumberFieldEntry } from '@panneau/fields/number';\nimport { SelectFieldEntry } from '@panneau/fields/select';\nimport { TextFieldEntry } from '@panneau/fields/text';\nimport type { Field, RuleFailure } from '@panneau/protocol';\nimport { checkValues } from '@panneau/protocol/runtime';\nimport { Button, IconButton, Spinner, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListItem } from '../types';\nimport styles from './Inline.module.css';\n\nconst ENTRIES = {\n    text: TextFieldEntry,\n    number: NumberFieldEntry,\n    select: SelectFieldEntry,\n    boolean: BooleanFieldEntry,\n    date: DateFieldEntry,\n} as const;\n\n/** Types that save as soon as a value is picked, rather than on Enter or when leaving the cell. */\nconst PICKED = new Set(['select', 'date']);\n\ntype State =\n    | { mode: 'idle' }\n    | { mode: 'editing'; draft: unknown; errors: readonly string[] }\n    | { mode: 'saving'; draft: unknown }\n    | { mode: 'conflict'; draft: unknown; current: ListItem };\n\nexport interface InlineCellProps {\n    item: ListItem;\n    /** The field the cell edits, of a type of `INLINE_TYPES`. */\n    field: Field;\n    /** The label of the item, for the name of the edit button. */\n    itemLabel: string;\n    /** The content of the cell when it doesn't edit: the value, or the title's link. */\n    children: ReactNode;\n    /** Renders a value of the field, for the current value of a conflict. */\n    renderValue: (item: ListItem) => ReactNode;\n    /** Saves the value on an item (the current one after a conflict), with its version. */\n    onSave: (item: ListItem, value: unknown) => Promise<ListItem>;\n    /** Shows an item the backend gave back: saved, or changed by someone else. */\n    onItem: (item: ListItem) => void;\n    formatError: (failure: RuleFailure) => string;\n}\n\nfunction isEqualValue(a: unknown, b: unknown): boolean {\n    return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);\n}\n\n/**\n * A cell that edits its field in place (decision 0043): a checkbox for a boolean, otherwise the\n * value with a button that turns it into the field's control. Enter or leaving the cell saves,\n * Escape cancels; a select and a date save when one is picked. The value is checked by the\n * field's portable rules, then saved alone; errors and conflicts show in the cell.\n */\nexport function InlineCell({\n    item,\n    field,\n    itemLabel,\n    children,\n    renderValue,\n    onSave,\n    onItem,\n    formatError,\n}: InlineCellProps) {\n    const intl = usePanneauIntl();\n    const [state, setState] = useState<State>({ mode: 'idle' });\n    const root = useRef<HTMLDivElement>(null);\n    // Where focus goes once the cell has drawn its new state.\n    const focus = useRef<'editor' | 'button' | null>(null);\n    const label = field.label ?? field.name;\n    const value = item[field.name];\n    const isBoolean = field.type === 'boolean';\n    const Entry = ENTRIES[field.type as keyof typeof ENTRIES];\n    // The help of the field is for its form: a cell has no room for it.\n    const { help: _help, ...bare } = field;\n\n    useEffect(() => {\n        if (focus.current === 'editor') {\n            root.current?.querySelector<HTMLElement>('input, [role=\"spinbutton\"], button')?.focus();\n        } else if (focus.current === 'button') {\n            root.current?.querySelector<HTMLElement>('button')?.focus();\n        }\n        focus.current = null;\n    });\n\n    const save = (base: ListItem, draft: unknown) => {\n        setState({ mode: 'saving', draft });\n        onSave(base, draft).then(\n            (saved) => {\n                onItem(saved);\n                focus.current = isBoolean ? null : 'button';\n                setState({ mode: 'idle' });\n            },\n            (error: unknown) => {\n                const problem = getProblem(error);\n                if (problem?.status === 412 && problem.current !== undefined) {\n                    onItem(problem.current);\n                    setState({ mode: 'conflict', draft, current: problem.current });\n                    return;\n                }\n                const own = Object.entries(problem?.errors ?? {})\n                    .filter(([path]) => path === field.name || path.startsWith(`${field.name}.`))\n                    .flatMap(([, list]) => list);\n                const message =\n                    problem?.detail ??\n                    (problem !== null ? problem.title : null) ??\n                    (error instanceof Error && error.message !== '' ? error.message : null) ??\n                    intl.formatMessage(messages.saveValueFailed);\n                focus.current = 'editor';\n                setState({ mode: 'editing', draft, errors: own.length > 0 ? own : [message] });\n            },\n        );\n    };\n\n    const commit = (draft: unknown) => {\n        if (isEqualValue(draft, value)) {\n            focus.current = 'button';\n            setState({ mode: 'idle' });\n            return;\n        }\n        const failures = checkValues(\n            [field],\n            { [field.name]: draft },\n            {\n                mode: 'update',\n                partial: true,\n                item,\n            },\n        );\n        const errors = Object.values(failures)\n            .flat()\n            .map((failure) => formatError(failure));\n        if (errors.length > 0) {\n            setState({ mode: 'editing', draft, errors });\n            return;\n        }\n        save(item, draft);\n    };\n\n    const cancel = () => {\n        focus.current = 'button';\n        setState({ mode: 'idle' });\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        if (state.mode !== 'editing') {\n            return;\n        }\n        if (event.key === 'Escape') {\n            event.stopPropagation();\n            cancel();\n        } else if (event.key === 'Enter' && !PICKED.has(field.type)) {\n            event.preventDefault();\n            commit(state.draft);\n        }\n    };\n\n    // Leaving the cell saves; the popover of a select or a date picker is part of it.\n    const onBlur = (event: FocusEvent) => {\n        const next = event.relatedTarget;\n        if (\n            state.mode !== 'editing' ||\n            (next instanceof Element &&\n                (event.currentTarget.contains(next) || next.closest('.panneau-popover') !== null))\n        ) {\n            return;\n        }\n        commit(state.draft);\n    };\n\n    const control = (draft: unknown, errors: readonly string[], disabled: boolean) => (\n        <Entry\n            field={bare}\n            path={field.name}\n            value={draft}\n            onChange={(next) => {\n                if (isBoolean || (PICKED.has(field.type) && next !== null)) {\n                    commit(next);\n                } else {\n                    setState({ mode: 'editing', draft: next, errors: [] });\n                }\n            }}\n            errors={errors}\n            disabled={disabled}\n            hideLabel\n        />\n    );\n\n    if (isBoolean) {\n        return (\n            <div className={styles.cell}>\n                <div className={styles.control}>\n                    {control(\n                        state.mode === 'idle' ? value : state.draft,\n                        state.mode === 'editing' ? state.errors : [],\n                        state.mode === 'saving',\n                    )}\n                    {state.mode === 'saving' ? (\n                        <Spinner size=\"sm\" label={intl.formatMessage(messages.savingValue)} />\n                    ) : null}\n                </div>\n                {state.mode === 'conflict' ? (\n                    <Conflict\n                        current={renderValue(state.current)}\n                        onKeep={() => setState({ mode: 'idle' })}\n                        onSave={() => save(state.current, state.draft)}\n                    />\n                ) : null}\n            </div>\n        );\n    }\n\n    if (state.mode === 'idle') {\n        return (\n            <div ref={root} className={styles.cell}>\n                <span className={styles.value}>{children}</span>\n                <IconButton\n                    icon={Pencil}\n                    size=\"sm\"\n                    label={intl.formatMessage(messages.editValue, {\n                        field: label,\n                        item: itemLabel,\n                    })}\n                    showTooltip={false}\n                    className={styles.edit}\n                    onPress={() => {\n                        focus.current = 'editor';\n                        setState({ mode: 'editing', draft: value, errors: [] });\n                    }}\n                />\n            </div>\n        );\n    }\n\n    return (\n        <div ref={root} className={styles.cell} onKeyDown={onKeyDown} onBlur={onBlur}>\n            <div className={styles.control}>\n                {control(\n                    state.draft,\n                    state.mode === 'editing' ? state.errors : [],\n                    state.mode === 'saving',\n                )}\n                {state.mode === 'saving' ? (\n                    <Spinner size=\"sm\" label={intl.formatMessage(messages.savingValue)} />\n                ) : null}\n            </div>\n            {state.mode === 'conflict' ? (\n                <Conflict\n                    current={renderValue(state.current)}\n                    onKeep={() => {\n                        focus.current = 'button';\n                        setState({ mode: 'idle' });\n                    }}\n                    onSave={() => save(state.current, state.draft)}\n                />\n            ) : null}\n        </div>\n    );\n}\n\n/** What someone else saved, with the choice of keeping it or saving over it. */\nfunction Conflict({\n    current,\n    onKeep,\n    onSave,\n}: {\n    current: ReactNode;\n    onKeep: () => void;\n    onSave: () => void;\n}) {\n    const intl = usePanneauIntl();\n    return (\n        <div className={styles.conflict} role=\"alert\">\n            <span>\n                {intl.formatMessage(messages.valueConflict)} <strong>{current}</strong>\n            </span>\n            <span className={styles.conflictActions}>\n                <Button size=\"sm\" appearance=\"ghost\" onPress={onKeep}>\n                    {intl.formatMessage(messages.keepTheirs)}\n                </Button>\n                <Button size=\"sm\" onPress={onSave}>\n                    {intl.formatMessage(messages.saveMine)}\n                </Button>\n            </span>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"InlineCell.js","names":["Pencil","FocusEvent","KeyboardEvent","ReactNode","useEffect","useRef","useState","getProblem","BooleanFieldEntry","DateFieldEntry","NumberFieldEntry","SelectFieldEntry","TextFieldEntry","Field","RuleFailure","checkValues","Button","IconButton","Spinner","usePanneauIntl","useToast","messages","ListItem","styles","ENTRIES","text","number","select","boolean","date","const","PICKED","Set","State","mode","draft","errors","current","InlineCellProps","item","field","itemLabel","getItemLabel","children","renderValue","onSave","value","Promise","onItem","formatError","failure","isEqualValue","a","b","JSON","stringify","InlineCell","t0","$","_c","intl","toasts","t1","Symbol","for","state","setState","root","focus","label","name","isBoolean","type","Entry","bare","help","_help","t2","querySelector","save","t3","t4","t5","t6","t7","t8","t9","bb0","base","t10","undoing","t11","undefined","previous","then","saved","names","key","id","show","title","formatMessage","inlineUndone","inlineSaved","tone","action","undo","onAction","error","problem","status","own","Object","entries","filter","t12","path","startsWith","flatMap","_temp","message","detail","Error","saveValueFailed","length","commit","draft_0","failures","partial","values","flat","map","cancel","onKeyDown","event","stopPropagation","has","preventDefault","onBlur","event_0","next","relatedTarget","Element","currentTarget","contains","closest","control","draft_1","errors_0","disabled","next_0","t13","t14","savingValue","t15","t16","t17","cell","editValue","edit","list","Conflict","onKeep","valueConflict","keepTheirs","saveMine","conflictActions","conflict","_c","styles"],"sources":["../../src/inline/InlineCell.tsx"],"sourcesContent":["import { Pencil } from 'lucide-react';\nimport {\n    type FocusEvent,\n    type KeyboardEvent,\n    type ReactNode,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\n\nimport { getProblem } from '@panneau/core';\nimport { BooleanFieldEntry } from '@panneau/fields/boolean';\nimport { DateFieldEntry } from '@panneau/fields/date';\nimport { NumberFieldEntry } from '@panneau/fields/number';\nimport { SelectFieldEntry } from '@panneau/fields/select';\nimport { TextFieldEntry } from '@panneau/fields/text';\nimport type { Field, RuleFailure } from '@panneau/protocol';\nimport { checkValues } from '@panneau/protocol/runtime';\nimport { Button, IconButton, Spinner, usePanneauIntl, useToast } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport type { ListItem } from '../types';\nimport styles from './Inline.module.css';\n\nconst ENTRIES = {\n    text: TextFieldEntry,\n    number: NumberFieldEntry,\n    select: SelectFieldEntry,\n    boolean: BooleanFieldEntry,\n    date: DateFieldEntry,\n} as const;\n\n/** Types that save as soon as a value is picked, rather than on Enter or when leaving the cell. */\nconst PICKED = new Set(['select', 'date']);\n\ntype State =\n    | { mode: 'idle' }\n    | { mode: 'editing'; draft: unknown; errors: readonly string[] }\n    | { mode: 'saving'; draft: unknown }\n    | { mode: 'conflict'; draft: unknown; current: ListItem };\n\nexport interface InlineCellProps {\n    item: ListItem;\n    /** The field the cell edits, of a type of `INLINE_TYPES`. */\n    field: Field;\n    /** The label of the item, for the name of the edit button. */\n    itemLabel: string;\n    /** The label of an item the backend gave back, for the toast that says it was saved. */\n    getItemLabel?: (item: ListItem) => string;\n    /** The content of the cell when it doesn't edit: the value, or the title's link. */\n    children: ReactNode;\n    /** Renders a value of the field, for the current value of a conflict. */\n    renderValue: (item: ListItem) => ReactNode;\n    /** Saves the value on an item (the current one after a conflict), with its version. */\n    onSave: (item: ListItem, value: unknown) => Promise<ListItem>;\n    /** Shows an item the backend gave back: saved, or changed by someone else. */\n    onItem: (item: ListItem) => void;\n    formatError: (failure: RuleFailure) => string;\n}\n\nfunction isEqualValue(a: unknown, b: unknown): boolean {\n    return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);\n}\n\n/**\n * A cell that edits its field in place (decision 0043): a checkbox for a boolean, otherwise the\n * value with a button that turns it into the field's control. Enter or leaving the cell saves,\n * Escape cancels; a select and a date save when one is picked. The value is checked by the\n * field's portable rules, then saved alone; errors and conflicts show in the cell.\n */\nexport function InlineCell({\n    item,\n    field,\n    itemLabel,\n    getItemLabel,\n    children,\n    renderValue,\n    onSave,\n    onItem,\n    formatError,\n}: InlineCellProps) {\n    const intl = usePanneauIntl();\n    const toasts = useToast();\n    const [state, setState] = useState<State>({ mode: 'idle' });\n    const root = useRef<HTMLDivElement>(null);\n    // Where focus goes once the cell has drawn its new state.\n    const focus = useRef<'editor' | 'button' | null>(null);\n    const label = field.label ?? field.name;\n    const value = item[field.name];\n    const isBoolean = field.type === 'boolean';\n    const Entry = ENTRIES[field.type as keyof typeof ENTRIES];\n    // The help of the field is for its form: a cell has no room for it.\n    const { help: _help, ...bare } = field;\n\n    useEffect(() => {\n        if (focus.current === 'editor') {\n            root.current?.querySelector<HTMLElement>('input, [role=\"spinbutton\"], button')?.focus();\n        } else if (focus.current === 'button') {\n            root.current?.querySelector<HTMLElement>('button')?.focus();\n        }\n        focus.current = null;\n    });\n\n    /**\n     * Saves a value on an item. The toast that says it has \"Undo\", which saves the previous value\n     * the same way, with the version the save just got (decision 0063): a conflict then shows in\n     * the cell, as for any change. After an undo, a short toast says the value is back.\n     */\n    const save = (base: ListItem, draft: unknown, { undoing = false } = {}) => {\n        const previous = base[field.name];\n        setState({ mode: 'saving', draft });\n        onSave(base, draft).then(\n            (saved) => {\n                onItem(saved);\n                focus.current = isBoolean ? null : 'button';\n                setState({ mode: 'idle' });\n                const names = { item: getItemLabel?.(saved) ?? itemLabel, field: label };\n                const key = { key: `panneau-inline:${item.id}:${field.name}` };\n                toasts.show(\n                    undoing\n                        ? { title: intl.formatMessage(messages.inlineUndone, names) }\n                        : {\n                              title: intl.formatMessage(messages.inlineSaved, names),\n                              tone: 'success',\n                              action: {\n                                  label: intl.formatMessage(messages.undo),\n                                  onAction: () => save(saved, previous, { undoing: true }),\n                              },\n                          },\n                    key,\n                );\n            },\n            (error: unknown) => {\n                const problem = getProblem(error);\n                if (problem?.status === 412 && problem.current !== undefined) {\n                    onItem(problem.current);\n                    setState({ mode: 'conflict', draft, current: problem.current });\n                    return;\n                }\n                const own = Object.entries(problem?.errors ?? {})\n                    .filter(([path]) => path === field.name || path.startsWith(`${field.name}.`))\n                    .flatMap(([, list]) => list);\n                const message =\n                    problem?.detail ??\n                    (problem !== null ? problem.title : null) ??\n                    (error instanceof Error && error.message !== '' ? error.message : null) ??\n                    intl.formatMessage(messages.saveValueFailed);\n                focus.current = 'editor';\n                setState({ mode: 'editing', draft, errors: own.length > 0 ? own : [message] });\n            },\n        );\n    };\n\n    const commit = (draft: unknown) => {\n        if (isEqualValue(draft, value)) {\n            focus.current = 'button';\n            setState({ mode: 'idle' });\n            return;\n        }\n        const failures = checkValues(\n            [field],\n            { [field.name]: draft },\n            {\n                mode: 'update',\n                partial: true,\n                item,\n            },\n        );\n        const errors = Object.values(failures)\n            .flat()\n            .map((failure) => formatError(failure));\n        if (errors.length > 0) {\n            setState({ mode: 'editing', draft, errors });\n            return;\n        }\n        save(item, draft);\n    };\n\n    const cancel = () => {\n        focus.current = 'button';\n        setState({ mode: 'idle' });\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        if (state.mode !== 'editing') {\n            return;\n        }\n        if (event.key === 'Escape') {\n            event.stopPropagation();\n            cancel();\n        } else if (event.key === 'Enter' && !PICKED.has(field.type)) {\n            event.preventDefault();\n            commit(state.draft);\n        }\n    };\n\n    // Leaving the cell saves; the popover of a select or a date picker is part of it.\n    const onBlur = (event: FocusEvent) => {\n        const next = event.relatedTarget;\n        if (\n            state.mode !== 'editing' ||\n            (next instanceof Element &&\n                (event.currentTarget.contains(next) || next.closest('.panneau-popover') !== null))\n        ) {\n            return;\n        }\n        commit(state.draft);\n    };\n\n    const control = (draft: unknown, errors: readonly string[], disabled: boolean) => (\n        <Entry\n            field={bare}\n            path={field.name}\n            value={draft}\n            onChange={(next) => {\n                if (isBoolean || (PICKED.has(field.type) && next !== null)) {\n                    commit(next);\n                } else {\n                    setState({ mode: 'editing', draft: next, errors: [] });\n                }\n            }}\n            errors={errors}\n            disabled={disabled}\n            hideLabel\n        />\n    );\n\n    if (isBoolean) {\n        return (\n            <div className={styles.cell}>\n                <div className={styles.control}>\n                    {control(\n                        state.mode === 'idle' ? value : state.draft,\n                        state.mode === 'editing' ? state.errors : [],\n                        state.mode === 'saving',\n                    )}\n                    {state.mode === 'saving' ? (\n                        <Spinner size=\"sm\" label={intl.formatMessage(messages.savingValue)} />\n                    ) : null}\n                </div>\n                {state.mode === 'conflict' ? (\n                    <Conflict\n                        current={renderValue(state.current)}\n                        onKeep={() => setState({ mode: 'idle' })}\n                        onSave={() => save(state.current, state.draft)}\n                    />\n                ) : null}\n            </div>\n        );\n    }\n\n    if (state.mode === 'idle') {\n        return (\n            <div ref={root} className={styles.cell}>\n                <span className={styles.value}>{children}</span>\n                <IconButton\n                    icon={Pencil}\n                    size=\"sm\"\n                    label={intl.formatMessage(messages.editValue, {\n                        field: label,\n                        item: itemLabel,\n                    })}\n                    showTooltip={false}\n                    className={styles.edit}\n                    onPress={() => {\n                        focus.current = 'editor';\n                        setState({ mode: 'editing', draft: value, errors: [] });\n                    }}\n                />\n            </div>\n        );\n    }\n\n    return (\n        <div ref={root} className={styles.cell} onKeyDown={onKeyDown} onBlur={onBlur}>\n            <div className={styles.control}>\n                {control(\n                    state.draft,\n                    state.mode === 'editing' ? state.errors : [],\n                    state.mode === 'saving',\n                )}\n                {state.mode === 'saving' ? (\n                    <Spinner size=\"sm\" label={intl.formatMessage(messages.savingValue)} />\n                ) : null}\n            </div>\n            {state.mode === 'conflict' ? (\n                <Conflict\n                    current={renderValue(state.current)}\n                    onKeep={() => {\n                        focus.current = 'button';\n                        setState({ mode: 'idle' });\n                    }}\n                    onSave={() => save(state.current, state.draft)}\n                />\n            ) : null}\n        </div>\n    );\n}\n\n/** What someone else saved, with the choice of keeping it or saving over it. */\nfunction Conflict({\n    current,\n    onKeep,\n    onSave,\n}: {\n    current: ReactNode;\n    onKeep: () => void;\n    onSave: () => void;\n}) {\n    const intl = usePanneauIntl();\n    return (\n        <div className={styles.conflict} role=\"alert\">\n            <span>\n                {intl.formatMessage(messages.valueConflict)} <strong>{current}</strong>\n            </span>\n            <span className={styles.conflictActions}>\n                <Button size=\"sm\" appearance=\"ghost\" onPress={onKeep}>\n                    {intl.formatMessage(messages.keepTheirs)}\n                </Button>\n                <Button size=\"sm\" onPress={onSave}>\n                    {intl.formatMessage(messages.saveMine)}\n                </Button>\n            </span>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/layouts/TableLayout.css

@@ -50,6 +50,37 @@
     background-color: var(--panneau-color-hover);
 }
 
+/* The thumbnail of an item, before its title (decision 0061). */
+.panneau-table-layout-with-thumbnail {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-3);
+}
+
+.panneau-table-layout-with-thumbnail > :last-child {
+    min-width: 0;
+}
+
+.panneau-table-layout-thumbnail {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    overflow: hidden;
+    color: var(--panneau-color-text-muted);
+    background-color: var(--panneau-color-surface-sunken);
+    border-radius: var(--panneau-radius-sm);
+}
+
+.panneau-table-layout-thumbnail img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
 .panneau-table-layout-center {
     text-align: center !important;
 }

package/dist/layouts/TableLayout.d.ts

@@ -2,8 +2,9 @@ import type { ListColumn, ListLayoutProps } from '../types.js';
 /** The sort direction of a column, from the first `sort` value. */
 export declare function getSortDirection(sort: readonly string[], column: ListColumn): 'ascending' | 'descending' | null;
 /**
- * Items as a table, with sortable column headers. On narrow lists (phones), each row turns into a
- * block that shows the label of each value.
+ * Items as a table, with sortable column headers. With the image of items (`getItemImage`), each
+ * title starts with a thumbnail. On narrow lists (phones), each row turns into a block that shows
+ * the label of each value.
  */
-export declare function TableLayout({ items, columns, renderValue, getItemLabel, getItemHref, isCurrent, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, renderCell, }: ListLayoutProps): import("react").JSX.Element;
+export declare function TableLayout({ items, columns, renderValue, getItemLabel, getItemHref, getItemImage, isCurrent, selectable, isSelected, onToggle, renderActions, sort, onSort, label, pageSelection, renderCell, }: ListLayoutProps): import("react").JSX.Element;
 //# sourceMappingURL=TableLayout.d.ts.map

package/dist/layouts/TableLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/TableLayout.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI5D,mEAAmE;AACnE,wBAAgB,gBAAgB,CAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,MAAM,EAAE,UAAU,GACnB,WAAW,GAAG,YAAY,GAAG,IAAI,CAMnC;AASD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,UAAU,GACb,EAAE,eAAe,+BAoIjB"}
+{"version":3,"file":"TableLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/TableLayout.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI5D,mEAAmE;AACnE,wBAAgB,gBAAgB,CAC5B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,MAAM,EAAE,UAAU,GACnB,WAAW,GAAG,YAAY,GAAG,IAAI,CAMnC;AAyBD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,UAAU,GACb,EAAE,eAAe,+BA8IjB"}