themelia-react-ui 2.0.5 → 3.0.0

package/dist/features/questionnaire.js

@@ -1,97 +1,97 @@
 "use client";
-import { S as e, d as t } from "../ui-provider-C-74NVLc.js";
+import { C as e, f as t } from "../ui-provider-Bu1S-o96.js";
 import { useStrings as n } from "../lib/strings.js";
-import { t as r } from "../utils-B6kKb8jB.js";
-import { n as i } from "../buttons-BedGfygC.js";
-import { a, c as o, s } from "../typography-BQnine1k.js";
-import { t as c } from "../structure-DuxKl954.js";
-import { t as l } from "../progress-BJhQP9WX.js";
-import { h as u } from "../form-sizing-Bs2qFUeE.js";
-import { t as d } from "../input-CvyDQlY7.js";
-import { t as f } from "../form-field-BriWAXyg.js";
-import { d as p } from "../text-inputs-B1culiSK.js";
-import { l as m, r as h, s as g } from "../choice-inputs-zUgBZfE4.js";
-import { t as _ } from "../checkbox-fflqmODR.js";
-import { forwardRef as v, useEffect as y, useId as b, useRef as x, useState as S } from "react";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { t as r } from "../utils-BVbAG2J6.js";
+import { a as i, c as a, s as o } from "../typography-C0dELqYV.js";
+import { n as s } from "../buttons-pZVgPTZn.js";
+import { t as c } from "../structure-DElaQwwN.js";
+import { t as l } from "../progress-RARK8AjB.js";
+import { h as u } from "../form-sizing-DE_dZw32.js";
+import { t as d } from "../input-DfJyrjoR.js";
+import { t as f } from "../form-field-BdfCwSoQ.js";
+import { d as p } from "../text-inputs-ljyBYaCd.js";
+import { l as ee, r as m, s as h } from "../choice-inputs-oJEsrb5Y.js";
+import { t as g } from "../checkbox-Dy5_XBMZ.js";
+import { forwardRef as _, useEffect as v, useId as y, useRef as b, useState as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/features/questionnaire/questionnaire-control.tsx
-function ee({ question: n, answer: i, disabled: s, error: l, labelId: f, descriptionId: v, onAnswerChange: y, ...b }) {
-	let { defaultScale: x } = t(), S = r("questionnaire--check", g, u[e(void 0, x)]), C = {
+function te({ question: n, answer: o, disabled: s, error: l, labelId: f, descriptionId: _, onAnswerChange: v, ...y }) {
+	let { defaultScale: b } = t(), x = r("questionnaire--check", h, u[e(void 0, b)]), S = {
 		disabled: s,
 		invalid: !!l,
 		"aria-labelledby": f,
-		"aria-describedby": v,
+		"aria-describedby": _,
 		required: n.required
 	};
 	return n.type === "custom" ? n.render({
-		...b,
+		...y,
 		question: n,
-		answer: i,
+		answer: o,
 		disabled: s,
 		error: l,
 		labelId: f,
-		descriptionId: v,
-		onAnswerChange: y
-	}) : n.type === "text" ? /* @__PURE__ */ w(d, {
-		...C,
+		descriptionId: _,
+		onAnswerChange: v
+	}) : n.type === "text" ? /* @__PURE__ */ C(d, {
+		...S,
 		type: n.inputType ?? "text",
 		maxLength: n.maxLength,
 		placeholder: n.placeholder,
-		value: typeof i == "string" ? i : "",
-		onChange: (e) => y(e.target.value)
-	}) : n.type === "textarea" ? /* @__PURE__ */ w(p, {
-		...C,
+		value: typeof o == "string" ? o : "",
+		onChange: (e) => v(e.target.value)
+	}) : n.type === "textarea" ? /* @__PURE__ */ C(p, {
+		...S,
 		rows: n.rows ?? 4,
 		maxLength: n.maxLength,
 		placeholder: n.placeholder,
-		value: typeof i == "string" ? i : "",
-		onChange: (e) => y(e.target.value)
-	}) : n.type === "select" ? /* @__PURE__ */ w(m, {
-		...C,
+		value: typeof o == "string" ? o : "",
+		onChange: (e) => v(e.target.value)
+	}) : n.type === "select" ? /* @__PURE__ */ C(ee, {
+		...S,
 		options: n.options,
-		value: typeof i == "string" ? i : null,
-		onValueChange: y
-	}) : n.type === "single" ? /* @__PURE__ */ w("fieldset", {
+		value: typeof o == "string" ? o : null,
+		onValueChange: v
+	}) : n.type === "single" ? /* @__PURE__ */ C("fieldset", {
 		"aria-labelledby": f,
-		"aria-describedby": v,
+		"aria-describedby": _,
 		className: "questionnaire--choices m-0 min-w-0 border-0 p-0",
-		children: /* @__PURE__ */ w(h, {
+		children: /* @__PURE__ */ C(m, {
 			options: n.options,
-			value: typeof i == "string" ? i : "",
+			value: typeof o == "string" ? o : "",
 			disabled: s,
 			invalid: !!l,
-			onValueChange: y,
+			onValueChange: v,
 			columns: 1
 		})
-	}) : n.type === "multiple" ? /* @__PURE__ */ w("fieldset", {
+	}) : n.type === "multiple" ? /* @__PURE__ */ C("fieldset", {
 		"aria-labelledby": f,
-		"aria-describedby": v,
+		"aria-describedby": _,
 		className: "questionnaire--choices m-0 min-w-0 border-0 p-0",
-		children: /* @__PURE__ */ w(c, {
+		children: /* @__PURE__ */ C(c, {
 			gap: "sm",
 			children: n.options.map((e, t) => {
-				let n = Array.isArray(i) ? i : [], r = `${f}-option-${t}`;
-				return /* @__PURE__ */ T(c, {
+				let n = Array.isArray(o) ? o : [], r = `${f}-option-${t}`;
+				return /* @__PURE__ */ w(c, {
 					direction: "horizontal",
 					align: "start",
 					gap: "sm",
-					children: [/* @__PURE__ */ w("span", {
-						className: S,
-						children: /* @__PURE__ */ w(_, {
+					children: [/* @__PURE__ */ C("span", {
+						className: x,
+						children: /* @__PURE__ */ C(g, {
 							id: r,
 							disabled: s || e.disabled,
 							"aria-invalid": !!l || void 0,
-							"aria-describedby": [v, e.description ? `${r}-description` : void 0].filter(Boolean).join(" ") || void 0,
+							"aria-describedby": [_, e.description ? `${r}-description` : void 0].filter(Boolean).join(" ") || void 0,
 							checked: n.includes(e.value),
-							onCheckedChange: (t) => y(t ? [...n, e.value] : n.filter((t) => t !== e.value))
+							onCheckedChange: (t) => v(t ? [...n, e.value] : n.filter((t) => t !== e.value))
 						})
-					}), /* @__PURE__ */ T(c, {
+					}), /* @__PURE__ */ w(c, {
 						gap: "dense",
-						children: [/* @__PURE__ */ w(a, {
+						children: [/* @__PURE__ */ C(i, {
 							htmlFor: r,
 							className: "text-inherit",
 							children: e.label
-						}), e.description && /* @__PURE__ */ w(o, {
+						}), e.description && /* @__PURE__ */ C(a, {
 							id: `${r}-description`,
 							size: "xs",
 							type: "secondary",
@@ -101,20 +101,20 @@ function ee({ question: n, answer: i, disabled: s, error: l, labelId: f, descrip
 				}, e.value);
 			})
 		})
-	}) : n.type === "boolean" ? /* @__PURE__ */ T(c, {
+	}) : n.type === "boolean" ? /* @__PURE__ */ w(c, {
 		direction: "horizontal",
 		align: "start",
 		gap: "sm",
-		children: [/* @__PURE__ */ w("span", {
-			className: S,
-			children: /* @__PURE__ */ w(_, {
-				...C,
+		children: [/* @__PURE__ */ C("span", {
+			className: x,
+			children: /* @__PURE__ */ C(g, {
+				...S,
 				"aria-labelledby": void 0,
 				id: `${f}-checkbox`,
-				checked: i === !0,
-				onCheckedChange: (e) => y(e)
+				checked: o === !0,
+				onCheckedChange: (e) => v(e)
 			})
-		}), /* @__PURE__ */ w(a, {
+		}), /* @__PURE__ */ C(i, {
 			htmlFor: `${f}-checkbox`,
 			className: "text-inherit",
 			children: n.label ?? n.title
@@ -123,7 +123,7 @@ function ee({ question: n, answer: i, disabled: s, error: l, labelId: f, descrip
 }
 //#endregion
 //#region src/components/features/questionnaire/questionnaire.types.ts
-var te = {
+var ne = {
 	previous: "Previous",
 	next: "Next",
 	submit: "Submit answers",
@@ -142,15 +142,15 @@ var te = {
 };
 //#endregion
 //#region src/components/features/questionnaire/questionnaire.utils.ts
-function E(e, t) {
+function T(e, t) {
 	return e.filter((e) => !e.when || e.when(t));
 }
-function D(e, t) {
+function E(e, t) {
 	return Object.hasOwn(e, t) ? e[t] : void 0;
 }
-function ne(e, t, n) {
+function re(e, t, n) {
 	if (e.disabled) return;
-	let r = D(t, e.id), i = r === void 0 || typeof r == "string" && !r.trim() || Array.isArray(r) && r.length === 0;
+	let r = E(t, e.id), i = r === void 0 || typeof r == "string" && !r.trim() || Array.isArray(r) && r.length === 0;
 	if (e.required && (i || e.type === "boolean" && r !== !0)) return n.required;
 	if (r !== void 0) {
 		if ((e.type === "text" || e.type === "textarea") && typeof r != "string" || e.type === "boolean" && typeof r != "boolean") return n.invalidFormat;
@@ -173,201 +173,221 @@ function ne(e, t, n) {
 	let a = e.validate?.(r, t);
 	return typeof a == "string" && a.length > 0 ? a : void 0;
 }
-function re(e, t) {
-	return Object.fromEntries(E(e, t).filter((e) => !e.disabled).map((e) => {
-		let n = D(t, e.id);
+function ie(e, t) {
+	return Object.fromEntries(T(e, t).filter((e) => !e.disabled).map((e) => {
+		let n = E(t, e.id);
 		return [e.id, Array.isArray(n) ? [...n] : n];
 	}));
 }
 //#endregion
 //#region src/components/features/questionnaire/questionnaire.tsx
-var ie = {}, ae = v(function(e, t) {
-	let { questions: a, value: u, defaultValue: d = {}, onValueChange: p, questionId: m, defaultQuestionId: h, onQuestionChange: g, disabled: _ = !1, onSubmit: v, onComplete: ae, onError: oe, formatSubmitError: se, headerSlot: ce, emptySlot: le, completionSlot: ue, strings: de, className: fe, onReset: pe, ...me } = e, O = Object.prototype.hasOwnProperty.call(e, "value"), k = Object.prototype.hasOwnProperty.call(e, "questionId"), [he, A] = S(d), j = O ? u ?? ie : he, M = x(j);
-	M.current = j;
-	let N = E(a, j), [ge, P] = S(h ?? N[0]?.id), _e = k ? m : ge, F = N.find((e) => e.id === _e) ?? N[0], I = F ? N.indexOf(F) : 0, [ve, L] = S({}), [R, z] = S(), [B, V] = S(!1), [ye, H] = S(!1), U = x(null), W = x(void 0), G = x(!0), K = x(null), q = n(te, de), be = b(), J = `${be}-title`, xe = `${be}-description`, Y = B || _, X = () => {
+var ae = {}, oe = _(function(e, t) {
+	let { questions: i, value: u, defaultValue: d = {}, onValueChange: p, questionId: ee, defaultQuestionId: m, onQuestionIdChange: h, disabled: g = !1, onSubmit: _, onComplete: oe, onError: se, formatSubmitError: ce, headerSlot: le, emptySlot: ue, completionSlot: de, strings: fe, className: pe, onReset: me, ...he } = e, D = Object.prototype.hasOwnProperty.call(e, "value"), O = Object.prototype.hasOwnProperty.call(e, "questionId"), [ge, k] = x(d), A = D ? u ?? ae : ge, j = b(A);
+	j.current = A;
+	let M = T(i, A), [_e, ve] = x(m ?? M[0]?.id), ye = O ? ee : _e, N = M.find((e) => e.id === ye) ?? M[0], P = N ? M.indexOf(N) : 0, [be, F] = x({}), [I, L] = x(), [R, z] = x(!1), [B, V] = x(!1), H = N?.id, xe = b({
+		questionId: H,
+		completed: B
+	}), U = b(null), W = b(void 0), G = b(!0), K = b(null), q = n(ne, fe), Se = y(), J = `${Se}-title`, Ce = `${Se}-description`, Y = R || g, X = () => {
 		clearTimeout(W.current), W.current = void 0;
 	}, Z = () => {
-		U.current?.abort(), U.current = null, V(!1);
+		U.current?.abort(), U.current = null, z(!1);
 	}, Q = (e) => {
-		k || P(e), g?.(e);
-	}, Se = (e) => {
-		if (!F || F.disabled || Y) return;
+		O || ve(e), h?.(e);
+	}, we = (e) => {
+		if (!N || N.disabled || Y) return;
 		let t = {
-			...M.current,
-			[F.id]: e
+			...j.current,
+			[N.id]: e
 		};
-		O || (M.current = t, A(t)), p?.(t), L((e) => ({
+		D || (j.current = t, k(t)), p?.(t), F((e) => ({
 			...e,
-			[F.id]: void 0
-		})), z(void 0), H(!1);
+			[N.id]: void 0
+		})), L(void 0), V(!1);
 	};
-	y(() => {
-		K.current?.focus();
-	}, [F?.id, ye]), y(() => {
-		X(), Z(), L({}), z(void 0), H(!1);
+	v(() => {
+		let e = xe.current;
+		if (xe.current = {
+			questionId: H,
+			completed: B
+		}, e.questionId === void 0 || e.questionId === H && e.completed === B) return;
+		let t = K.current;
+		if (t) {
+			if (B) {
+				let e = document.activeElement;
+				if (e && e !== document.body && !t.closest("form")?.contains(e)) return;
+			}
+			t.focus();
+		}
+	}, [H, B]), v(() => {
+		X(), Z(), F({}), L(void 0), V(!1);
 	}, [
-		j,
-		a,
-		_
-	]), y(() => (G.current = !0, () => {
+		A,
+		i,
+		g
+	]), v(() => (G.current = !0, () => {
 		G.current = !1, X(), U.current?.abort(), U.current = null;
 	}), []);
-	let Ce = () => {
-		if (!F || Y) return;
-		let e = ne(F, M.current, q);
-		if (L((t) => ({
+	let Te = () => {
+		if (!N || Y) return;
+		let e = re(N, j.current, q);
+		if (F((t) => ({
 			...t,
-			[F.id]: e
+			[N.id]: e
 		})), e) {
 			K.current?.focus();
 			return;
 		}
-		N[I + 1] && Q(N[I + 1].id);
-	}, we = async () => {
-		if (U.current || _ || !N.length) return;
-		let e = Object.fromEntries(N.map((e) => [e.id, ne(e, M.current, q)]));
-		L(e);
-		let t = N.find((t) => e[t.id]);
+		M[P + 1] && Q(M[P + 1].id);
+	}, Ee = async () => {
+		if (U.current || g || !M.length) return;
+		let e = Object.fromEntries(M.map((e) => [e.id, re(e, j.current, q)]));
+		F(e);
+		let t = M.find((t) => e[t.id]);
 		if (t) {
 			Q(t.id), K.current?.focus();
 			return;
 		}
 		let n = new AbortController();
-		U.current = n, z(void 0), V(!0);
-		let r = re(a, M.current);
+		U.current = n, L(void 0), z(!0);
+		let r = ie(i, j.current);
 		try {
-			if (await v?.(r, { signal: n.signal }), U.current !== n || n.signal.aborted) return;
-			H(!0), ae?.(r);
+			if (await _?.(r, { signal: n.signal }), U.current !== n || n.signal.aborted) return;
+			V(!0), oe?.(r);
 		} catch (e) {
 			if (U.current !== n || n.signal.aborted) return;
-			z(se?.(e) ?? q.submitError), oe?.(e);
+			L(ce?.(e) ?? q.submitError), se?.(e);
 		} finally {
-			U.current === n && (U.current = null, V(!1));
+			U.current === n && (U.current = null, z(!1));
 		}
-	}, $ = F && Object.hasOwn(ve, F.id) ? ve[F.id] : void 0, Te = F && ($ || F.description);
-	return /* @__PURE__ */ w("form", {
-		...me,
+	}, $ = N && Object.hasOwn(be, N.id) ? be[N.id] : void 0, De = N && ($ || N.description);
+	return /* @__PURE__ */ C("form", {
+		...he,
 		ref: t,
 		noValidate: !0,
-		"aria-busy": B || void 0,
-		className: r("questionnaire--component min-w-0", fe),
+		"aria-busy": R || void 0,
+		className: r("questionnaire--component min-w-0", pe),
 		onSubmit: (e) => {
-			e.preventDefault(), I < N.length - 1 ? Ce() : we();
+			e.preventDefault(), P < M.length - 1 ? Te() : Ee();
 		},
 		onReset: (e) => {
-			pe?.(e);
+			me?.(e);
 			let t = e.nativeEvent;
 			X(), W.current = setTimeout(() => {
-				if (W.current = void 0, !G.current || t.defaultPrevented || _) return;
-				Z(), O || (M.current = d, A(d)), p?.(d), L({}), z(void 0), H(!1);
-				let e = E(a, d), n = e.find((e) => e.id === h) ?? e[0];
-				n ? Q(n.id) : k || P(void 0);
+				if (W.current = void 0, !G.current || t.defaultPrevented || g) return;
+				Z(), D || (j.current = d, k(d)), p?.(d), F({}), L(void 0), V(!1);
+				let e = T(i, d), n = e.find((e) => e.id === m) ?? e[0];
+				n ? Q(n.id) : O || ve(void 0);
 			}, 0);
 		},
-		children: /* @__PURE__ */ T(c, {
+		children: /* @__PURE__ */ w(c, {
 			gap: "lg",
-			children: [ce, F ? ye ? ue ?? /* @__PURE__ */ T(c, {
-				gap: "sm",
-				children: [/* @__PURE__ */ w(o, {
-					type: "inherit",
-					role: "status",
-					children: q.submitted
-				}), /* @__PURE__ */ w(i, {
-					disabled: _,
-					type: "button",
-					buttonStyle: "outline",
-					onClick: () => {
-						H(!1), N[0] && Q(N[0].id);
-					},
-					children: q.editAnswers
-				})]
-			}) : /* @__PURE__ */ T(C, { children: [
-				/* @__PURE__ */ w(l, {
-					value: I + 1,
-					max: N.length,
+			children: [le, N ? B ? /* @__PURE__ */ C("div", {
+				ref: K,
+				tabIndex: -1,
+				className: "questionnaire--completion outline-none",
+				children: de ?? /* @__PURE__ */ w(c, {
+					gap: "sm",
+					children: [/* @__PURE__ */ C(a, {
+						type: "inherit",
+						role: "status",
+						children: q.submitted
+					}), /* @__PURE__ */ C(s, {
+						disabled: g,
+						type: "button",
+						buttonStyle: "outline",
+						onClick: () => {
+							V(!1), M[0] && Q(M[0].id);
+						},
+						children: q.editAnswers
+					})]
+				})
+			}) : /* @__PURE__ */ w(S, { children: [
+				/* @__PURE__ */ C(l, {
+					value: P + 1,
+					max: M.length,
 					label: q.progress,
-					valueSlot: /* @__PURE__ */ w(o, {
+					valueSlot: /* @__PURE__ */ C(a, {
 						size: "xs",
 						type: "secondary",
 						"aria-live": "polite",
-						children: q.step(I + 1, N.length)
+						children: q.step(P + 1, M.length)
 					})
 				}),
-				/* @__PURE__ */ T(c, {
+				/* @__PURE__ */ w(c, {
 					ref: K,
 					gap: "normal",
 					tabIndex: -1,
 					role: "group",
 					"aria-labelledby": J,
 					className: "questionnaire--question outline-none",
-					children: [/* @__PURE__ */ w(s, {
+					children: [/* @__PURE__ */ C(o, {
 						className: "text-inherit",
 						id: J,
 						tag: "h3",
-						children: F.title
-					}), /* @__PURE__ */ w(f, {
-						required: F.required,
+						children: N.title
+					}), /* @__PURE__ */ C(f, {
+						required: N.required,
 						error: $,
-						hint: F.description,
-						supportingTextId: xe,
-						children: /* @__PURE__ */ w(ee, {
-							question: F,
-							answer: D(j, F.id),
-							answers: j,
-							disabled: Y || !!F.disabled,
+						hint: N.description,
+						supportingTextId: Ce,
+						children: /* @__PURE__ */ C(te, {
+							question: N,
+							answer: E(A, N.id),
+							answers: A,
+							disabled: Y || !!N.disabled,
 							error: $,
 							labelId: J,
-							descriptionId: Te ? xe : void 0,
-							onAnswerChange: Se
-						}, F.id)
+							descriptionId: De ? Ce : void 0,
+							onAnswerChange: we
+						}, N.id)
 					})]
 				}),
-				R && /* @__PURE__ */ w(o, {
+				I && /* @__PURE__ */ C(a, {
 					role: "alert",
 					type: "error",
-					children: R
+					children: I
 				}),
-				B && /* @__PURE__ */ w(o, {
+				R && /* @__PURE__ */ C(a, {
 					role: "status",
 					type: "secondary",
 					children: q.submitting
 				}),
-				/* @__PURE__ */ T(c, {
+				/* @__PURE__ */ w(c, {
 					direction: "horizontal",
 					gap: "sm",
 					wrap: !0,
 					children: [
-						/* @__PURE__ */ w(i, {
+						/* @__PURE__ */ C(s, {
 							type: "button",
 							buttonStyle: "outline",
-							disabled: Y || I === 0,
+							disabled: Y || P === 0,
 							onClick: () => {
-								z(void 0), Q(N[I - 1].id);
+								L(void 0), Q(M[P - 1].id);
 							},
 							children: q.previous
 						}),
-						I < N.length - 1 ? /* @__PURE__ */ w(i, {
+						P < M.length - 1 ? /* @__PURE__ */ C(s, {
 							tone: "primary",
 							type: "button",
 							disabled: Y,
-							onClick: Ce,
+							onClick: Te,
 							children: q.next
-						}) : /* @__PURE__ */ w(i, {
+						}) : /* @__PURE__ */ C(s, {
 							tone: "primary",
 							type: "submit",
 							disabled: Y,
-							children: R ? q.retry : q.submit
+							children: I ? q.retry : q.submit
 						}),
-						B && /* @__PURE__ */ w(i, {
+						R && /* @__PURE__ */ C(s, {
 							type: "button",
 							buttonStyle: "outline",
-							disabled: _,
+							disabled: g,
 							onClick: Z,
 							children: q.cancel
 						})
 					]
 				})
-			] }) : le ?? /* @__PURE__ */ w(o, {
+			] }) : ue ?? /* @__PURE__ */ C(a, {
 				type: "secondary",
 				children: q.empty
 			})]
@@ -375,6 +395,6 @@ var ie = {}, ae = v(function(e, t) {
 	});
 });
 //#endregion
-export { ae as Questionnaire, te as defaultQuestionnaireStrings };
+export { oe as Questionnaire, ne as defaultQuestionnaireStrings };
 
 //# sourceMappingURL=questionnaire.js.map