themelia-react-ui 2.0.5 → 2.0.6

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 { 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-DhuoqFy4.js";
+import { n as i } from "../buttons-DeW0bQeK.js";
+import { a, c as o, s } from "../typography-C7-YMW1S.js";
+import { t as c } from "../structure-DZJ2wbAU.js";
+import { t as l } from "../progress-DZFXXzPs.js";
+import { h as ee } from "../form-sizing-CgcrUbLU.js";
+import { t as u } from "../input-7KAc7XQL.js";
+import { t as d } from "../form-field-CAPdwdnZ.js";
+import { d as f } from "../text-inputs-jdkS3ReG.js";
+import { l as p, r as m, s as h } from "../choice-inputs-DHGtx0QV.js";
+import { t as g } from "../checkbox-MoyHIAPs.js";
+import { forwardRef as _, useEffect as v, useId as te, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } 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 ne({ question: n, answer: i, disabled: s, error: l, labelId: d, descriptionId: _, onAnswerChange: v, ...te }) {
+	let { defaultScale: y } = t(), b = r("questionnaire--check", h, ee[e(void 0, y)]), x = {
 		disabled: s,
 		invalid: !!l,
-		"aria-labelledby": f,
-		"aria-describedby": v,
+		"aria-labelledby": d,
+		"aria-describedby": _,
 		required: n.required
 	};
 	return n.type === "custom" ? n.render({
-		...b,
+		...te,
 		question: n,
 		answer: i,
 		disabled: s,
 		error: l,
-		labelId: f,
-		descriptionId: v,
-		onAnswerChange: y
-	}) : n.type === "text" ? /* @__PURE__ */ w(d, {
-		...C,
+		labelId: d,
+		descriptionId: _,
+		onAnswerChange: v
+	}) : n.type === "text" ? /* @__PURE__ */ S(u, {
+		...x,
 		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,
+		onChange: (e) => v(e.target.value)
+	}) : n.type === "textarea" ? /* @__PURE__ */ S(f, {
+		...x,
 		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,
+		onChange: (e) => v(e.target.value)
+	}) : n.type === "select" ? /* @__PURE__ */ S(p, {
+		...x,
 		options: n.options,
 		value: typeof i == "string" ? i : null,
-		onValueChange: y
-	}) : n.type === "single" ? /* @__PURE__ */ w("fieldset", {
-		"aria-labelledby": f,
-		"aria-describedby": v,
+		onValueChange: v
+	}) : n.type === "single" ? /* @__PURE__ */ S("fieldset", {
+		"aria-labelledby": d,
+		"aria-describedby": _,
 		className: "questionnaire--choices m-0 min-w-0 border-0 p-0",
-		children: /* @__PURE__ */ w(h, {
+		children: /* @__PURE__ */ S(m, {
 			options: n.options,
 			value: typeof i == "string" ? i : "",
 			disabled: s,
 			invalid: !!l,
-			onValueChange: y,
+			onValueChange: v,
 			columns: 1
 		})
-	}) : n.type === "multiple" ? /* @__PURE__ */ w("fieldset", {
-		"aria-labelledby": f,
-		"aria-describedby": v,
+	}) : n.type === "multiple" ? /* @__PURE__ */ S("fieldset", {
+		"aria-labelledby": d,
+		"aria-describedby": _,
 		className: "questionnaire--choices m-0 min-w-0 border-0 p-0",
-		children: /* @__PURE__ */ w(c, {
+		children: /* @__PURE__ */ S(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(i) ? i : [], r = `${d}-option-${t}`;
+				return /* @__PURE__ */ C(c, {
 					direction: "horizontal",
 					align: "start",
 					gap: "sm",
-					children: [/* @__PURE__ */ w("span", {
-						className: S,
-						children: /* @__PURE__ */ w(_, {
+					children: [/* @__PURE__ */ S("span", {
+						className: b,
+						children: /* @__PURE__ */ S(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__ */ C(c, {
 						gap: "dense",
-						children: [/* @__PURE__ */ w(a, {
+						children: [/* @__PURE__ */ S(a, {
 							htmlFor: r,
 							className: "text-inherit",
 							children: e.label
-						}), e.description && /* @__PURE__ */ w(o, {
+						}), e.description && /* @__PURE__ */ S(o, {
 							id: `${r}-description`,
 							size: "xs",
 							type: "secondary",
@@ -101,21 +101,21 @@ 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__ */ C(c, {
 		direction: "horizontal",
 		align: "start",
 		gap: "sm",
-		children: [/* @__PURE__ */ w("span", {
-			className: S,
-			children: /* @__PURE__ */ w(_, {
-				...C,
+		children: [/* @__PURE__ */ S("span", {
+			className: b,
+			children: /* @__PURE__ */ S(g, {
+				...x,
 				"aria-labelledby": void 0,
-				id: `${f}-checkbox`,
+				id: `${d}-checkbox`,
 				checked: i === !0,
-				onCheckedChange: (e) => y(e)
+				onCheckedChange: (e) => v(e)
 			})
-		}), /* @__PURE__ */ w(a, {
-			htmlFor: `${f}-checkbox`,
+		}), /* @__PURE__ */ S(a, {
+			htmlFor: `${d}-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 re = {
 	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 w(e, t) {
 	return e.filter((e) => !e.when || e.when(t));
 }
-function D(e, t) {
+function T(e, t) {
 	return Object.hasOwn(e, t) ? e[t] : void 0;
 }
-function ne(e, t, n) {
+function ie(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 = T(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,192 +173,199 @@ 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 ae(e, t) {
+	return Object.fromEntries(w(e, t).filter((e) => !e.disabled).map((e) => {
+		let n = T(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 oe = {}, se = _(function(e, t) {
+	let { questions: a, value: ee, defaultValue: u = {}, onValueChange: f, questionId: p, defaultQuestionId: m, onQuestionIdChange: h, onQuestionChange: g, disabled: _ = !1, onSubmit: se, onComplete: ce, onError: le, formatSubmitError: ue, headerSlot: de, emptySlot: fe, completionSlot: pe, strings: me, className: he, onReset: ge, ..._e } = e, E = Object.prototype.hasOwnProperty.call(e, "value"), D = Object.prototype.hasOwnProperty.call(e, "questionId"), [ve, ye] = b(u), O = E ? ee ?? oe : ve, k = y(O);
+	k.current = O;
+	let A = w(a, O), [be, j] = b(m ?? A[0]?.id), xe = D ? p : be, M = A.find((e) => e.id === xe) ?? A[0], N = M ? A.indexOf(M) : 0, [P, F] = b({}), [I, L] = b(), [R, z] = b(!1), [B, V] = b(!1), H = M?.id, Se = y({
+		questionId: H,
+		completed: B
+	}), U = y(null), W = y(void 0), G = y(!0), K = y(null), q = n(re, me), Ce = te(), J = `${Ce}-title`, we = `${Ce}-description`, Y = R || _, 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;
+		D || j(e), (h ?? g)?.(e);
+	}, Te = (e) => {
+		if (!M || M.disabled || Y) return;
 		let t = {
-			...M.current,
-			[F.id]: e
+			...k.current,
+			[M.id]: e
 		};
-		O || (M.current = t, A(t)), p?.(t), L((e) => ({
+		E || (k.current = t, ye(t)), f?.(t), F((e) => ({
 			...e,
-			[F.id]: void 0
-		})), z(void 0), H(!1);
+			[M.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 = Se.current;
+		Se.current = {
+			questionId: H,
+			completed: B
+		}, !(e.questionId === void 0 || e.questionId === H && e.completed === B) && K.current?.focus();
+	}, [H, B]), v(() => {
+		X(), Z(), F({}), L(void 0), V(!1);
 	}, [
-		j,
+		O,
 		a,
 		_
-	]), y(() => (G.current = !0, () => {
+	]), 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 Ee = () => {
+		if (!M || Y) return;
+		let e = ie(M, k.current, q);
+		if (F((t) => ({
 			...t,
-			[F.id]: e
+			[M.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]);
+		A[N + 1] && Q(A[N + 1].id);
+	}, De = async () => {
+		if (U.current || _ || !A.length) return;
+		let e = Object.fromEntries(A.map((e) => [e.id, ie(e, k.current, q)]));
+		F(e);
+		let t = A.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 = ae(a, k.current);
 		try {
-			if (await v?.(r, { signal: n.signal }), U.current !== n || n.signal.aborted) return;
-			H(!0), ae?.(r);
+			if (await se?.(r, { signal: n.signal }), U.current !== n || n.signal.aborted) return;
+			V(!0), ce?.(r);
 		} catch (e) {
 			if (U.current !== n || n.signal.aborted) return;
-			z(se?.(e) ?? q.submitError), oe?.(e);
+			L(ue?.(e) ?? q.submitError), le?.(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,
+	}, $ = M && Object.hasOwn(P, M.id) ? P[M.id] : void 0, Oe = M && ($ || M.description);
+	return /* @__PURE__ */ S("form", {
+		..._e,
 		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", he),
 		onSubmit: (e) => {
-			e.preventDefault(), I < N.length - 1 ? Ce() : we();
+			e.preventDefault(), N < A.length - 1 ? Ee() : De();
 		},
 		onReset: (e) => {
-			pe?.(e);
+			ge?.(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);
+				Z(), E || (k.current = u, ye(u)), f?.(u), F({}), L(void 0), V(!1);
+				let e = w(a, u), n = e.find((e) => e.id === m) ?? e[0];
+				n ? Q(n.id) : D || j(void 0);
 			}, 0);
 		},
-		children: /* @__PURE__ */ T(c, {
+		children: /* @__PURE__ */ C(c, {
 			gap: "lg",
-			children: [ce, F ? ye ? ue ?? /* @__PURE__ */ T(c, {
+			children: [de, M ? B ? pe ?? /* @__PURE__ */ C(c, {
 				gap: "sm",
-				children: [/* @__PURE__ */ w(o, {
+				children: [/* @__PURE__ */ S(o, {
 					type: "inherit",
 					role: "status",
 					children: q.submitted
-				}), /* @__PURE__ */ w(i, {
+				}), /* @__PURE__ */ S(i, {
 					disabled: _,
 					type: "button",
 					buttonStyle: "outline",
 					onClick: () => {
-						H(!1), N[0] && Q(N[0].id);
+						V(!1), A[0] && Q(A[0].id);
 					},
 					children: q.editAnswers
 				})]
-			}) : /* @__PURE__ */ T(C, { children: [
-				/* @__PURE__ */ w(l, {
-					value: I + 1,
-					max: N.length,
+			}) : /* @__PURE__ */ C(x, { children: [
+				/* @__PURE__ */ S(l, {
+					value: N + 1,
+					max: A.length,
 					label: q.progress,
-					valueSlot: /* @__PURE__ */ w(o, {
+					valueSlot: /* @__PURE__ */ S(o, {
 						size: "xs",
 						type: "secondary",
 						"aria-live": "polite",
-						children: q.step(I + 1, N.length)
+						children: q.step(N + 1, A.length)
 					})
 				}),
-				/* @__PURE__ */ T(c, {
+				/* @__PURE__ */ C(c, {
 					ref: K,
 					gap: "normal",
 					tabIndex: -1,
 					role: "group",
 					"aria-labelledby": J,
 					className: "questionnaire--question outline-none",
-					children: [/* @__PURE__ */ w(s, {
+					children: [/* @__PURE__ */ S(s, {
 						className: "text-inherit",
 						id: J,
 						tag: "h3",
-						children: F.title
-					}), /* @__PURE__ */ w(f, {
-						required: F.required,
+						children: M.title
+					}), /* @__PURE__ */ S(d, {
+						required: M.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: M.description,
+						supportingTextId: we,
+						children: /* @__PURE__ */ S(ne, {
+							question: M,
+							answer: T(O, M.id),
+							answers: O,
+							disabled: Y || !!M.disabled,
 							error: $,
 							labelId: J,
-							descriptionId: Te ? xe : void 0,
-							onAnswerChange: Se
-						}, F.id)
+							descriptionId: Oe ? we : void 0,
+							onAnswerChange: Te
+						}, M.id)
 					})]
 				}),
-				R && /* @__PURE__ */ w(o, {
+				I && /* @__PURE__ */ S(o, {
 					role: "alert",
 					type: "error",
-					children: R
+					children: I
 				}),
-				B && /* @__PURE__ */ w(o, {
+				R && /* @__PURE__ */ S(o, {
 					role: "status",
 					type: "secondary",
 					children: q.submitting
 				}),
-				/* @__PURE__ */ T(c, {
+				/* @__PURE__ */ C(c, {
 					direction: "horizontal",
 					gap: "sm",
 					wrap: !0,
 					children: [
-						/* @__PURE__ */ w(i, {
+						/* @__PURE__ */ S(i, {
 							type: "button",
 							buttonStyle: "outline",
-							disabled: Y || I === 0,
+							disabled: Y || N === 0,
 							onClick: () => {
-								z(void 0), Q(N[I - 1].id);
+								L(void 0), Q(A[N - 1].id);
 							},
 							children: q.previous
 						}),
-						I < N.length - 1 ? /* @__PURE__ */ w(i, {
+						N < A.length - 1 ? /* @__PURE__ */ S(i, {
 							tone: "primary",
 							type: "button",
 							disabled: Y,
-							onClick: Ce,
+							onClick: Ee,
 							children: q.next
-						}) : /* @__PURE__ */ w(i, {
+						}) : /* @__PURE__ */ S(i, {
 							tone: "primary",
 							type: "submit",
 							disabled: Y,
-							children: R ? q.retry : q.submit
+							children: I ? q.retry : q.submit
 						}),
-						B && /* @__PURE__ */ w(i, {
+						R && /* @__PURE__ */ S(i, {
 							type: "button",
 							buttonStyle: "outline",
 							disabled: _,
@@ -367,7 +374,7 @@ var ie = {}, ae = v(function(e, t) {
 						})
 					]
 				})
-			] }) : le ?? /* @__PURE__ */ w(o, {
+			] }) : fe ?? /* @__PURE__ */ S(o, {
 				type: "secondary",
 				children: q.empty
 			})]
@@ -375,6 +382,6 @@ var ie = {}, ae = v(function(e, t) {
 	});
 });
 //#endregion
-export { ae as Questionnaire, te as defaultQuestionnaireStrings };
+export { se as Questionnaire, re as defaultQuestionnaireStrings };
 
 //# sourceMappingURL=questionnaire.js.map