@formancy/react 0.8.0 → 0.10.0

package/dist/index.d.mts

@@ -109,6 +109,16 @@ export declare function useSubmit(): () => {
   errors: Record<string, string[]>;
 };
 //#endregion
+//#region src/go-to-field.d.ts
+/**
+ * Take the person to a question: to its page first, on a paged form, and to its control once
+ * that page is drawn — into a group's first option, since a fieldset takes no focus, and past a
+ * tab a layout hides it behind (0213). What the error summary's links and the review's Change do,
+ * one function for both and for a host's own list of questions; the Angular binding's
+ * `injectGoToField` is the same. A path no field has throws, as the engine does for one.
+ */
+export declare function useGoToField(): (path: string) => void;
+//#endregion
 //#region src/fields/internals.d.ts
 /**
  * The pieces every control shares: the shell it renders inside, the prop shapes, and the few helpers more than one of them needs.

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/context.tsx","../src/use-field.ts","../src/use-repeater.ts","../src/use-wizard.ts","../src/use-submit.ts","../src/fields/internals.tsx","../src/form.tsx","../src/error-summary.tsx","../src/rich-text.tsx","../src/options-source.ts","../src/scanning.ts","../src/uploads.ts","../src/rich-text-editor.ts","../src/resume-notice.tsx"],"mappings":";;;;;wBAsBgB,mBACd,QACA,OACA;EAEA,QAAQ;;;;;;;EAOR,QAAQ;EACR,WAAW;oBACZ,IAAA;wBAsBe,iBAAiB;;;;;;;;;wBAkBjB,eAAe;;;UCvEd,qBAAqB;EACpC,SAAS;EACT;;EAEA,cAAc;;EAEd;IAAc;IAAY;;;EAE1B;IAAc;;;;;;;;;;;;;wBAaA,SAAS,eAAe,OAAO;;;UCrB9B;EACf;;EAEA;;EAEA;;EAEA;EACA;EACA,UAAU;;EAEV,QAAQ,cAAc;;;;;;;wBAQR,YAAY,eAAe,OAAO;;;UCrBjC;EACf;EACA;;;EAGA;EACA;;EAEA,QAAQ;EACR;;EAEA,KAAK;;;;;;;wBAQS,aAAa;;;;;;;;;;;wBCTb;EAAqB;EAAa,QAAQ;;;;;;;;;;;;;;;;;UCWzC;EACf;EACA;;KAGU,iBAAiB,cAAc;UAE1B;EACf,SAAS,QAAQ,OAAO,WAAW;EACnC,SAAS,eAAe;;UAGT;EACf;EACA,QAAQ;;EAER;;UAGe;;;;;;;EAOf,SAAS;EACT,WAAW;;;;;;;EAOX;EACA;;;;;EAKA;EACA,YAAY,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBCPP,aAAa,OAAO,oCAAiB,IAAA;;;UCpDpC;EACf,SAAS;;;;;;;;;;;wBAYK,eAAe,UAAU,oCAAiB,IAAA;;;;;;;;;;;;;;;;;;;;wBCG1C,WAAW;EAAY;IAAmB;;;;;;;;;;UCZzC;;;;;EAKf;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;;;EASA;;;;;;;;EAQA;;EAEA,QAAQ;;;;;;;;;;;UAYO;;;;;;;;;;;;;EAaf,QAAQ,SAAS,iBAAiB,QAAQ;;EAE1C;;;;;;EAMA;;EAEA;;;;;;;;;;;;;KAcU,iBAAiB,SAAS,eAAe;qBAIxC,wCAAsB,SAAA,SAAA,eAAA;;;;;;;;;wBAUnB,qBAAqB;;;;;;;;;;;;UC9FpB;;EAEf;;EAEA;;;;;;;;;;;;;;;;;;;KAoBU,WAAW,SAAS,gBAAgB;qBAInC,iCAAe,SAAA;;;;;;;;wBASZ,cAAc;;;;;;;;;;;UC/Bb;;;;;EAKf;;EAEA,QAAQ;;EAER,WAAW,cAAc;;;;;;;;;;;;KAaf,YAAY,MAAM,MAAM,SAAS,kBAAkB,QAAQ;qBAI1D,kCAAgB,SAAA;;;;;;;;;wBAUb,eAAe;;;;;;;;;;;;;;;;;;;;;UChCd;;EAEf;;EAEA,WAAW;;;;;;;;;;;;;EAaX,MAAM,SAAS,aAAa;;EAE5B,WAAW,SAAS;EACpB;;UAGe;;WAEN,SAAS;;WAET;;WAEA,WAAW;WACX;;;;;;;;;;WAUA,YAAY,SAAS;;KAGpB,yBAAyB,OAAO,wBAAwB;qBAIvD,wCAAsB,SAAA;;;;;;;;;wBAUnB,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UC9C3B;WACN;WACA,SAAS;aAAyB;aAAuB;;;UAGnD;;WAEN,YAAY;;WAEZ,SAAS,SAAS;;wBAGb,eAAe,WAAW,UAAU,oBAAoB"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/context.tsx","../src/use-field.ts","../src/use-repeater.ts","../src/use-wizard.ts","../src/use-submit.ts","../src/go-to-field.ts","../src/fields/internals.tsx","../src/form.tsx","../src/error-summary.tsx","../src/rich-text.tsx","../src/options-source.ts","../src/scanning.ts","../src/uploads.ts","../src/rich-text-editor.ts","../src/resume-notice.tsx"],"mappings":";;;;;wBAsBgB,mBACd,QACA,OACA;EAEA,QAAQ;;;;;;;EAOR,QAAQ;EACR,WAAW;oBACZ,IAAA;wBAsBe,iBAAiB;;;;;;;;;wBAkBjB,eAAe;;;UCvEd,qBAAqB;EACpC,SAAS;EACT;;EAEA,cAAc;;EAEd;IAAc;IAAY;;;EAE1B;IAAc;;;;;;;;;;;;;wBAaA,SAAS,eAAe,OAAO;;;UCrB9B;EACf;;EAEA;;EAEA;;EAEA;EACA;EACA,UAAU;;EAEV,QAAQ,cAAc;;;;;;;wBAQR,YAAY,eAAe,OAAO;;;UCrBjC;EACf;EACA;;;EAGA;EACA;;EAEA,QAAQ;EACR;;EAEA,KAAK;;;;;;;wBAQS,aAAa;;;;;;;;;;;wBCTb;EAAqB;EAAa,QAAQ;;;;;;;;;;;wBCD1C,iBAAiB;;;;;;;;;;;;;;;;UCYhB;EACf;EACA;;KAGU,iBAAiB,cAAc;UAE1B;EACf,SAAS,QAAQ,OAAO,WAAW;EACnC,SAAS,eAAe;;UAGT;EACf;EACA,QAAQ;;EAER;;UAGe;;;;;;;EAOf,SAAS;EACT,WAAW;;;;;;;EAOX;EACA;;;;;EAKA;EACA,YAAY,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBCNP,aAAa,OAAO,oCAAiB,IAAA;;;UCrDpC;EACf,SAAS;;;;;;;;;;;wBAYK,eAAe,UAAU,oCAAiB,IAAA;;;;;;;;;;;;;;;;;;;;wBCG1C,WAAW;EAAY;IAAmB;;;;;;;;;;UCZzC;;;;;EAKf;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;;;EASA;;;;;;;;EAQA;;EAEA,QAAQ;;;;;;;;;;;UAYO;;;;;;;;;;;;;EAaf,QAAQ,SAAS,iBAAiB,QAAQ;;EAE1C;;;;;;EAMA;;EAEA;;;;;;;;;;;;;KAcU,iBAAiB,SAAS,eAAe;qBAIxC,wCAAsB,SAAA,SAAA,eAAA;;;;;;;;;wBAUnB,qBAAqB;;;;;;;;;;;;UC9FpB;;EAEf;;EAEA;;;;;;;;;;;;;;;;;;;KAoBU,WAAW,SAAS,gBAAgB;qBAInC,iCAAe,SAAA;;;;;;;;wBASZ,cAAc;;;;;;;;;;;UC/Bb;;;;;EAKf;;EAEA,QAAQ;;EAER,WAAW,cAAc;;;;;;;;;;;;KAaf,YAAY,MAAM,MAAM,SAAS,kBAAkB,QAAQ;qBAI1D,kCAAgB,SAAA;;;;;;;;;wBAUb,eAAe;;;;;;;;;;;;;;;;;;;;;UChCd;;EAEf;;EAEA,WAAW;;;;;;;;;;;;;EAaX,MAAM,SAAS,aAAa;;EAE5B,WAAW,SAAS;EACpB;;UAGe;;WAEN,SAAS;;WAET;;WAEA,WAAW;WACX;;;;;;;;;;WAUA,YAAY,SAAS;;KAGpB,yBAAyB,OAAO,wBAAwB;qBAIvD,wCAAsB,SAAA;;;;;;;;;wBAUnB,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UC9C3B;WACN;WACA,SAAS;aAAyB;aAAuB;;;UAGnD;;WAEN,YAAY;;WAEZ,SAAS,SAAS;;wBAGb,eAAe,WAAW,UAAU,oBAAoB"}

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { Fragment, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { cancelUploads, fieldUploads, formatPath, inOptionOrder, parsePath, placedGroup, placedPage, thumbnailSize, ticked } from "@formancy/core";
-import { answersToReview, countSentence, createFormText, errorSentence, optionsStatus } from "@formancy/core/words";
+import { cancelUploads, fieldUploads, formatPath, hasReadOnlyControl, inOptionOrder, parsePath, placedGroup, placedPage, thumbnailSize, ticked } from "@formancy/core";
+import { answerInWords, answersToReview, countSentence, createFormText, errorSentence, optionsStatus } from "@formancy/core/words";
 import { LAYOUT_LEAF_KINDS, acceptRemoteAnswer, answerFromText, applyRichCommand, capRemoteAnswer, datagridColumns, editMasked, formatMasked, isImageSource, layoutChildren, layoutNodeShows, maskIsNumeric, maskPlaceholder, narrowOptionsByLabel, parseRichText, resolveText, resolvedLocale } from "@formancy/spec";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
@@ -143,6 +143,24 @@ function useSubmit() {
 	}, [engine]);
 }
 //#endregion
+//#region src/go-to-field.ts
+function useGoToField() {
+	const engine = useFormEngine();
+	const [focusing, setFocusing] = useState(void 0);
+	useEffect(() => {
+		if (focusing === void 0) return;
+		focusControl(document.getElementById(focusing.id));
+		setFocusing(void 0);
+	}, [focusing]);
+	return useCallback((path) => {
+		const at = parsePath(path);
+		const wizard = engine.wizard();
+		const page = engine.pageOf(at);
+		if (wizard !== void 0 && wizard.page() !== page) wizard.goTo(page);
+		setFocusing({ id: engine.getFieldSnapshot(at).ids.control });
+	}, [engine]);
+}
+//#endregion
 //#region src/layout.tsx
 function LayoutTree({ schema, nodes, locale, renderField, at = [], shows }) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children: nodes.map((node, index) => {
@@ -396,12 +414,7 @@ function useReview(goTo) {
 	const engine = useFormEngine();
 	const submit = useSubmit();
 	const [reviewing, setReviewing] = useState(false);
-	const [focusing, setFocusing] = useState(void 0);
-	useEffect(() => {
-		if (focusing === void 0) return;
-		focusControl(document.getElementById(focusing));
-		setFocusing(void 0);
-	}, [focusing]);
+	const goToField = useGoToField();
 	return {
 		reviewing,
 		check() {
@@ -411,8 +424,7 @@ function useReview(goTo) {
 		},
 		change(answer) {
 			setReviewing(false);
-			goTo?.(answer.page);
-			setFocusing(answer.controlId);
+			goToField(answer.field);
 		}
 	};
 }
@@ -452,7 +464,10 @@ function Review({ onChange, children }) {
 					"data-formancy-part": "review-answer",
 					children: [
 						/* @__PURE__ */ jsx("dt", { children: answer.label }),
-						/* @__PURE__ */ jsx("dd", { children: answer.said }),
+						/* @__PURE__ */ jsx("dd", {
+							...answer.answered ? {} : { "data-formancy-part": "review-unanswered" },
+							children: answer.said
+						}),
 						/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							onClick: () => onChange(answer),
@@ -544,7 +559,8 @@ function useSourcedOptions(field, query, enabled = true) {
 	const debounceMs = source?.debounceMs ?? DEBOUNCE_MS;
 	const minQueryLength = source?.minQueryLength ?? MIN_QUERY;
 	const maxRows = source?.maxRows ?? MAX_ROWS;
-	const stored = typeof field.value === "string" && field.value !== "" ? field.value : void 0;
+	const stored = storedValues(field.value);
+	const storedKey = stored.join("\0");
 	const path = field.path;
 	const disabled = field.disabled;
 	const asked = useRef(0);
@@ -616,18 +632,19 @@ function useSourcedOptions(field, query, enabled = true) {
 	]);
 	const askedFor = useRef(/* @__PURE__ */ new Set());
 	useEffect(() => {
-		if (!enabled || source === void 0 || stored === void 0) return;
-		if (named.has(stored) || askedFor.current.has(stored)) return;
-		askedFor.current.add(stored);
+		if (!enabled || source === void 0 || storedKey === "") return;
+		const unnamed = storedKey.split("\0").filter((value) => !named.has(value) && !askedFor.current.has(value));
+		if (unnamed.length === 0) return;
+		for (const value of unnamed) askedFor.current.add(value);
 		const controller = new AbortController();
 		source.resolve({
 			kind: "labels",
 			source: name ?? "",
 			path,
 			query: "",
-			values: [stored],
+			values: unnamed,
 			locale: engine.locale(),
-			limit: 1,
+			limit: unnamed.length,
 			signal: controller.signal
 		}).then((answer) => {
 			const accepted = acceptRemoteAnswer(answer);
@@ -644,7 +661,7 @@ function useSourcedOptions(field, query, enabled = true) {
 		source,
 		name,
 		path,
-		stored,
+		storedKey,
 		named,
 		engine
 	]);
@@ -655,13 +672,11 @@ function useSourcedOptions(field, query, enabled = true) {
 		})),
 		remote: null
 	};
-	const offered = [...rows];
-	if (stored !== void 0 && !offered.some((row) => row.value === stored)) offered.unshift({
-		value: stored,
-		label: named.get(stored) ?? stored
-	});
 	return {
-		options: offered,
+		options: [...stored.filter((value) => !rows.some((row) => row.value === value)).map((value) => ({
+			value,
+			label: named.get(value) ?? value
+		})), ...rows],
 		remote: {
 			unavailable: source === void 0,
 			busy,
@@ -672,6 +687,11 @@ function useSourcedOptions(field, query, enabled = true) {
 		}
 	};
 }
+function storedValues(value) {
+	if (typeof value === "string") return value === "" ? [] : [value];
+	if (!Array.isArray(value)) return [];
+	return value.filter((item) => typeof item === "string" && item !== "");
+}
 //#endregion
 //#region src/uploads.ts
 const UploaderContext = createContext(void 0);
@@ -1008,6 +1028,7 @@ function RadioGroupField({ path, label }) {
 						name: field.controlProps.name,
 						value: option.value,
 						checked: field.value === option.value,
+						disabled: field.disabled,
 						onChange: () => field.setValue(option.value),
 						onBlur: () => field.touch()
 					}), /* @__PURE__ */ jsxs("label", {
@@ -1021,6 +1042,24 @@ function RadioGroupField({ path, label }) {
 	});
 }
 //#endregion
+//#region src/fields/computed-answer.tsx
+function ComputedAnswerField({ path, label }) {
+	const field = useField(path);
+	const engine = useFormEngine();
+	const text = useFormText();
+	return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsx("input", {
+			type: "text",
+			readOnly: true,
+			...field.controlProps,
+			value: answerInWords(engine.schema(), field.def, field.value, text, engine.locale())
+		})
+	});
+}
+//#endregion
 //#region src/fields/file-field.tsx
 function FileField({ path, label }) {
 	const field = useField(path);
@@ -1461,14 +1500,30 @@ function SelectBoxesSwitch(props) {
 function TagPickerField({ path, label }) {
 	const field = useField(path);
 	const text = useFormText();
-	const options = useResolvedOptions(field);
 	const chosen = Array.isArray(field.value) ? field.value.map(String) : [];
 	const [query, setQuery] = useState("");
 	const [open, setOpen] = useState(false);
 	const listboxId = `${field.ids.control}:listbox`;
+	const written = useResolvedOptions(field);
+	const sourced = useSourcedOptions({
+		...field,
+		path
+	}, query);
+	const remote = sourced.remote;
+	const options = remote === null ? written : sourced.options;
 	const remaining = options.filter((option) => !chosen.includes(option.value));
-	const matches = narrowOptionsByLabel(remaining, query);
+	const matches = remote === null ? narrowOptionsByLabel(remaining, query) : remaining;
 	const expanded = open && !field.disabled && matches.length > 0;
+	const said = remote === null ? "" : optionsStatus(text, {
+		control: "typeahead",
+		open: open && !field.disabled,
+		disabled: field.disabled,
+		failed: remote.failed,
+		busy: remote.busy,
+		needs: remote.needs,
+		query,
+		completeness: remote.completeness
+	});
 	const add = (value) => {
 		field.setValue(ticked(field.def, chosen, value, true));
 		setQuery("");
@@ -1478,92 +1533,139 @@ function TagPickerField({ path, label }) {
 		field.setValue(chosen.filter((candidate) => candidate !== value));
 	};
 	const labelFor = (value) => options.find((option) => option.value === value)?.label ?? value;
+	if (remote?.unavailable === true) return /* @__PURE__ */ jsx(FieldShell, {
+		path,
+		field,
+		label,
+		children: /* @__PURE__ */ jsx("p", {
+			"data-formancy-part": "options-unavailable",
+			children: text("options.unavailable", { source: field.def.optionsSource ?? "" })
+		})
+	});
 	return /* @__PURE__ */ jsx(FieldShell, {
 		path,
 		field,
 		label,
 		children: /* @__PURE__ */ jsxs("div", {
 			"data-formancy-part": "tagpicker",
-			children: [chosen.length === 0 ? null : /* @__PURE__ */ jsx("ul", {
-				"data-formancy-part": "tagpicker-chips",
-				"aria-label": text("tagpicker.chosen", { label }),
-				children: chosen.map((value) => /* @__PURE__ */ jsxs("li", {
-					"data-formancy-part": "tagpicker-chip",
-					children: [labelFor(value), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"data-formancy-part": "tagpicker-remove",
-						"aria-label": text("tagpicker.remove", { option: labelFor(value) }),
-						disabled: field.disabled,
-						onClick: () => remove(value),
-						children: "×"
-					})]
-				}, value))
-			}), /* @__PURE__ */ jsxs("div", {
-				"data-formancy-part": "tagpicker-anchor",
-				children: [/* @__PURE__ */ jsx("input", {
-					type: "text",
-					role: "combobox",
-					...field.controlProps,
-					"data-formancy-part": "tagpicker-input",
-					autoComplete: "off",
-					"aria-expanded": expanded,
-					"aria-controls": listboxId,
-					"aria-autocomplete": "list",
-					value: query,
-					onChange: (event) => {
-						setQuery(event.target.value);
-						setOpen(true);
-					},
-					onClick: () => setOpen(true),
-					onKeyDown: (event) => {
-						if (event.key === "Escape") {
+			children: [
+				chosen.length === 0 ? null : /* @__PURE__ */ jsx("ul", {
+					"data-formancy-part": "tagpicker-chips",
+					"aria-label": text("tagpicker.chosen", { label }),
+					children: chosen.map((value) => /* @__PURE__ */ jsxs("li", {
+						"data-formancy-part": "tagpicker-chip",
+						children: [labelFor(value), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"data-formancy-part": "tagpicker-remove",
+							"aria-label": text("tagpicker.remove", { option: labelFor(value) }),
+							disabled: field.disabled,
+							onClick: () => remove(value),
+							children: "×"
+						})]
+					}, value))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-formancy-part": "tagpicker-anchor",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "text",
+						role: "combobox",
+						...field.controlProps,
+						"data-formancy-part": "tagpicker-input",
+						autoComplete: "off",
+						"aria-expanded": expanded,
+						"aria-controls": listboxId,
+						"aria-autocomplete": "list",
+						"aria-busy": remote?.busy === true ? true : void 0,
+						value: query,
+						onChange: (event) => {
+							setQuery(event.target.value);
+							setOpen(true);
+						},
+						onClick: () => setOpen(true),
+						onKeyDown: (event) => {
+							if (event.key === "Escape") {
+								setOpen(false);
+								return;
+							}
+							if (event.key === "Enter" && expanded && matches[0] !== void 0) {
+								event.preventDefault();
+								add(matches[0].value);
+								return;
+							}
+							if (event.key === "Backspace" && query === "" && chosen.length > 0) remove(chosen[chosen.length - 1]);
+						},
+						onBlur: () => {
 							setOpen(false);
-							return;
-						}
-						if (event.key === "Enter" && expanded && matches[0] !== void 0) {
-							event.preventDefault();
-							add(matches[0].value);
-							return;
+							field.touch();
 						}
-						if (event.key === "Backspace" && query === "" && chosen.length > 0) remove(chosen[chosen.length - 1]);
-					},
-					onBlur: () => {
-						setOpen(false);
-						field.touch();
-					}
-				}), /* @__PURE__ */ jsx("ul", {
-					id: listboxId,
-					role: "listbox",
-					"aria-label": text("options.suggestions", { label }),
-					"data-formancy-part": "tagpicker-listbox",
-					hidden: !expanded,
-					children: matches.map((option) => /* @__PURE__ */ jsx("li", {
-						role: "option",
-						"data-formancy-part": "tagpicker-option",
-						"aria-selected": false,
-						onMouseDown: (event) => event.preventDefault(),
-						onClick: () => add(option.value),
-						children: option.label
-					}, option.value))
-				})]
-			})]
+					}), /* @__PURE__ */ jsx("ul", {
+						id: listboxId,
+						role: "listbox",
+						"aria-label": text("options.suggestions", { label }),
+						"data-formancy-part": "tagpicker-listbox",
+						hidden: !expanded,
+						children: matches.map((option) => /* @__PURE__ */ jsx("li", {
+							role: "option",
+							"data-formancy-part": "tagpicker-option",
+							"aria-selected": false,
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => add(option.value),
+							children: option.label
+						}, option.value))
+					})]
+				}),
+				remote === null ? null : /* @__PURE__ */ jsx("p", {
+					role: "status",
+					"data-formancy-part": "tagpicker-status",
+					"data-state": remote.failed ? "failed" : void 0,
+					children: said
+				})
+			]
 		})
 	});
 }
 function SelectBoxesField({ path, label }) {
 	const field = useField(path);
-	const options = useResolvedOptions(field);
+	const text = useFormText();
+	const written = useResolvedOptions(field);
+	const sourced = useSourcedOptions({
+		...field,
+		path
+	}, "");
+	const remote = sourced.remote;
+	const options = remote === null ? written : sourced.options;
 	const showError = field.touched && field.errors.length > 0;
 	const chosen = Array.isArray(field.value) ? field.value : [];
+	const group = useRef(null);
+	const again = useRef(null);
+	const [retrying, setRetrying] = useState(false);
+	const settled = remote !== null && !remote.busy && !remote.failed;
+	useEffect(() => {
+		if (!retrying || !settled) return;
+		setRetrying(false);
+		if (document.activeElement === again.current) group.current?.querySelector("input[type=\"checkbox\"]")?.focus();
+	}, [retrying, settled]);
+	const said = remote === null ? "" : optionsStatus(text, {
+		control: "ticks",
+		open: true,
+		disabled: field.disabled,
+		failed: remote.failed,
+		busy: remote.busy,
+		needs: remote.needs,
+		query: "",
+		completeness: remote.completeness
+	});
 	const toggle = (value, on) => {
 		field.setValue(ticked(field.def, chosen, value, on));
 	};
 	return /* @__PURE__ */ jsxs("fieldset", {
+		ref: group,
 		id: field.ids.control,
 		"data-formancy-part": "field",
 		"data-formancy-field-path": path,
 		"data-state": showError ? "invalid" : "valid",
 		"aria-describedby": field.controlProps["aria-describedby"],
+		"aria-busy": remote?.busy === true ? true : void 0,
 		children: [
 			/* @__PURE__ */ jsx("legend", {
 				"data-formancy-part": "label",
@@ -1571,6 +1673,10 @@ function SelectBoxesField({ path, label }) {
 			}),
 			/* @__PURE__ */ jsx(RequiredHint, { field }),
 			/* @__PURE__ */ jsx(Description, { field }),
+			remote?.unavailable === true ? /* @__PURE__ */ jsx("p", {
+				"data-formancy-part": "options-unavailable",
+				children: text("options.unavailable", { source: field.def.optionsSource ?? "" })
+			}) : null,
 			options.map((option) => {
 				const optionId = `${field.ids.control}:${option.value}`;
 				return /* @__PURE__ */ jsxs("span", {
@@ -1590,6 +1696,22 @@ function SelectBoxesField({ path, label }) {
 					})]
 				}, option.value);
 			}),
+			remote === null || remote.unavailable ? null : /* @__PURE__ */ jsx("p", {
+				role: "status",
+				"data-formancy-part": "checkbox-status",
+				"data-state": remote.failed ? "failed" : void 0,
+				children: said
+			}),
+			remote !== null && (remote.failed || retrying) && !field.disabled ? /* @__PURE__ */ jsx("button", {
+				ref: again,
+				type: "button",
+				"data-formancy-part": "checkbox-retry",
+				onClick: () => {
+					setRetrying(true);
+					remote.retry();
+				},
+				children: text("options.retry")
+			}) : null,
 			showError ? /* @__PURE__ */ jsx(ErrorText, { field }) : null
 		]
 	});
@@ -1817,6 +1939,7 @@ function RatingField({ path, label }) {
 					name: controlProps.id,
 					value,
 					checked: value === chosen,
+					disabled: field.disabled,
 					onChange: () => field.setValue(value),
 					onBlur: () => field.touch()
 				}), /* @__PURE__ */ jsx("span", {
@@ -1915,12 +2038,13 @@ function SignatureField({ path, label }) {
 		};
 	}, []);
 	const onPointerDown = (event) => {
+		if (field.disabled) return;
 		before.current = drawn;
 		stroke.current = [pointFrom(event)];
 		surface.current?.setPointerCapture?.(event.pointerId);
 	};
 	const onPointerMove = (event) => {
-		if (stroke.current === null) return;
+		if (stroke.current === null || field.disabled) return;
 		stroke.current = [...stroke.current, pointFrom(event)];
 		commit([...before.current, stroke.current]);
 	};
@@ -1944,6 +2068,7 @@ function SignatureField({ path, label }) {
 					viewBox: `0 0 ${String(width)} ${String(height)}`,
 					role: "img",
 					"aria-label": label,
+					"aria-disabled": field.disabled ? true : void 0,
 					onPointerDown,
 					onPointerMove,
 					onPointerUp,
@@ -1955,11 +2080,11 @@ function SignatureField({ path, label }) {
 					}, at))
 				}),
 				/* @__PURE__ */ jsx("input", {
-					id: field.ids.control,
+					...field.controlProps,
 					"data-formancy-part": "signature-typed",
 					type: "text",
 					value: answer.typed ?? "",
-					"aria-label": text("signature.typed"),
+					"aria-label": text("signature.typed", { label }),
 					onChange: (event) => {
 						const typed = event.target.value;
 						field.setValue(typed === "" ? null : { typed });
@@ -1969,6 +2094,7 @@ function SignatureField({ path, label }) {
 				/* @__PURE__ */ jsx("button", {
 					"data-formancy-part": "signature-clear",
 					type: "button",
+					disabled: field.disabled,
 					onClick: () => {
 						stroke.current = null;
 						before.current = [];
@@ -2307,7 +2433,7 @@ function FieldList({ labels, registry, page, layout }) {
 function FieldSlot({ path, fallbackLabel, registry }) {
 	const field = useField(path);
 	if (!field.visible) return null;
-	const Component = registry?.byPath?.[path] ?? registry?.byType?.[field.type] ?? DEFAULT_COMPONENTS[field.type];
+	const Component = registry?.byPath?.[path] ?? (field.readOnly && !hasReadOnlyControl(field.def) ? ComputedAnswerField : void 0) ?? registry?.byType?.[field.type] ?? DEFAULT_COMPONENTS[field.type];
 	if (Component === null) return null;
 	const label = field.label ?? fallbackLabel ?? path;
 	return /* @__PURE__ */ jsx(Component, {
@@ -2508,12 +2634,7 @@ function ErrorSummary({ labels }) {
 	const errors = useSyncExternalStore(subscribe, getErrors, getErrors);
 	const region = useRef(null);
 	const previousCount = useRef(0);
-	const [focusing, setFocusing] = useState(void 0);
-	useEffect(() => {
-		if (focusing === void 0) return;
-		focusControl(document.getElementById(focusing));
-		setFocusing(void 0);
-	}, [focusing]);
+	const goToField = useGoToField();
 	useEffect(() => {
 		if (errors.length > 0 && previousCount.current === 0) region.current?.focus();
 		previousCount.current = errors.length;
@@ -2534,10 +2655,7 @@ function ErrorSummary({ labels }) {
 				href: `#${controlId}`,
 				onClick: (event) => {
 					event.preventDefault();
-					const wizard = engine.wizard();
-					const page = engine.pageOf(parsePath(path));
-					if (wizard !== void 0 && wizard.page() !== page) wizard.goTo(page);
-					setFocusing(controlId);
+					goToField(path);
 				},
 				children: text("errors.entry", {
 					label: labelFor(path),
@@ -2581,6 +2699,6 @@ function ResumeNotice({ migration, labels }) {
 	});
 }
 //#endregion
-export { ErrorSummary, FormancyForm, FormancyProvider, OptionsSourcesProvider, ResumeNotice, RichText, RichTextEditorProvider, ScannerProvider, UploaderProvider, useField, useFormEngine, useFormText, useOptionsSources, useRepeater, useRichTextEditorFactory, useScanner, useSubmit, useUploader, useWizard };
+export { ErrorSummary, FormancyForm, FormancyProvider, OptionsSourcesProvider, ResumeNotice, RichText, RichTextEditorProvider, ScannerProvider, UploaderProvider, useField, useFormEngine, useFormText, useGoToField, useOptionsSources, useRepeater, useRichTextEditorFactory, useScanner, useSubmit, useUploader, useWizard };
 
 //# sourceMappingURL=index.mjs.map