themelia-react-ui 2.0.6 → 3.0.0

package/dist/features/questionnaire.js

@@ -1,83 +1,83 @@
 "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-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";
+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 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 = {
+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": d,
+		"aria-labelledby": f,
 		"aria-describedby": _,
 		required: n.required
 	};
 	return n.type === "custom" ? n.render({
-		...te,
+		...y,
 		question: n,
-		answer: i,
+		answer: o,
 		disabled: s,
 		error: l,
-		labelId: d,
+		labelId: f,
 		descriptionId: _,
 		onAnswerChange: v
-	}) : n.type === "text" ? /* @__PURE__ */ S(u, {
-		...x,
+	}) : n.type === "text" ? /* @__PURE__ */ C(d, {
+		...S,
 		type: n.inputType ?? "text",
 		maxLength: n.maxLength,
 		placeholder: n.placeholder,
-		value: typeof i == "string" ? i : "",
+		value: typeof o == "string" ? o : "",
 		onChange: (e) => v(e.target.value)
-	}) : n.type === "textarea" ? /* @__PURE__ */ S(f, {
-		...x,
+	}) : n.type === "textarea" ? /* @__PURE__ */ C(p, {
+		...S,
 		rows: n.rows ?? 4,
 		maxLength: n.maxLength,
 		placeholder: n.placeholder,
-		value: typeof i == "string" ? i : "",
+		value: typeof o == "string" ? o : "",
 		onChange: (e) => v(e.target.value)
-	}) : n.type === "select" ? /* @__PURE__ */ S(p, {
-		...x,
+	}) : n.type === "select" ? /* @__PURE__ */ C(ee, {
+		...S,
 		options: n.options,
-		value: typeof i == "string" ? i : null,
+		value: typeof o == "string" ? o : null,
 		onValueChange: v
-	}) : n.type === "single" ? /* @__PURE__ */ S("fieldset", {
-		"aria-labelledby": d,
+	}) : n.type === "single" ? /* @__PURE__ */ C("fieldset", {
+		"aria-labelledby": f,
 		"aria-describedby": _,
 		className: "questionnaire--choices m-0 min-w-0 border-0 p-0",
-		children: /* @__PURE__ */ S(m, {
+		children: /* @__PURE__ */ C(m, {
 			options: n.options,
-			value: typeof i == "string" ? i : "",
+			value: typeof o == "string" ? o : "",
 			disabled: s,
 			invalid: !!l,
 			onValueChange: v,
 			columns: 1
 		})
-	}) : n.type === "multiple" ? /* @__PURE__ */ S("fieldset", {
-		"aria-labelledby": d,
+	}) : n.type === "multiple" ? /* @__PURE__ */ C("fieldset", {
+		"aria-labelledby": f,
 		"aria-describedby": _,
 		className: "questionnaire--choices m-0 min-w-0 border-0 p-0",
-		children: /* @__PURE__ */ S(c, {
+		children: /* @__PURE__ */ C(c, {
 			gap: "sm",
 			children: n.options.map((e, t) => {
-				let n = Array.isArray(i) ? i : [], r = `${d}-option-${t}`;
-				return /* @__PURE__ */ C(c, {
+				let n = Array.isArray(o) ? o : [], r = `${f}-option-${t}`;
+				return /* @__PURE__ */ w(c, {
 					direction: "horizontal",
 					align: "start",
 					gap: "sm",
-					children: [/* @__PURE__ */ S("span", {
-						className: b,
-						children: /* @__PURE__ */ S(g, {
+					children: [/* @__PURE__ */ C("span", {
+						className: x,
+						children: /* @__PURE__ */ C(g, {
 							id: r,
 							disabled: s || e.disabled,
 							"aria-invalid": !!l || void 0,
@@ -85,13 +85,13 @@ function ne({ question: n, answer: i, disabled: s, error: l, labelId: d, descrip
 							checked: n.includes(e.value),
 							onCheckedChange: (t) => v(t ? [...n, e.value] : n.filter((t) => t !== e.value))
 						})
-					}), /* @__PURE__ */ C(c, {
+					}), /* @__PURE__ */ w(c, {
 						gap: "dense",
-						children: [/* @__PURE__ */ S(a, {
+						children: [/* @__PURE__ */ C(i, {
 							htmlFor: r,
 							className: "text-inherit",
 							children: e.label
-						}), e.description && /* @__PURE__ */ S(o, {
+						}), e.description && /* @__PURE__ */ C(a, {
 							id: `${r}-description`,
 							size: "xs",
 							type: "secondary",
@@ -101,21 +101,21 @@ function ne({ question: n, answer: i, disabled: s, error: l, labelId: d, descrip
 				}, e.value);
 			})
 		})
-	}) : n.type === "boolean" ? /* @__PURE__ */ C(c, {
+	}) : n.type === "boolean" ? /* @__PURE__ */ w(c, {
 		direction: "horizontal",
 		align: "start",
 		gap: "sm",
-		children: [/* @__PURE__ */ S("span", {
-			className: b,
-			children: /* @__PURE__ */ S(g, {
-				...x,
+		children: [/* @__PURE__ */ C("span", {
+			className: x,
+			children: /* @__PURE__ */ C(g, {
+				...S,
 				"aria-labelledby": void 0,
-				id: `${d}-checkbox`,
-				checked: i === !0,
+				id: `${f}-checkbox`,
+				checked: o === !0,
 				onCheckedChange: (e) => v(e)
 			})
-		}), /* @__PURE__ */ S(a, {
-			htmlFor: `${d}-checkbox`,
+		}), /* @__PURE__ */ C(i, {
+			htmlFor: `${f}-checkbox`,
 			className: "text-inherit",
 			children: n.label ?? n.title
 		})]
@@ -123,7 +123,7 @@ function ne({ question: n, answer: i, disabled: s, error: l, labelId: d, descrip
 }
 //#endregion
 //#region src/components/features/questionnaire/questionnaire.types.ts
-var re = {
+var ne = {
 	previous: "Previous",
 	next: "Next",
 	submit: "Submit answers",
@@ -142,15 +142,15 @@ var re = {
 };
 //#endregion
 //#region src/components/features/questionnaire/questionnaire.utils.ts
-function w(e, t) {
+function T(e, t) {
 	return e.filter((e) => !e.when || e.when(t));
 }
-function T(e, t) {
+function E(e, t) {
 	return Object.hasOwn(e, t) ? e[t] : void 0;
 }
-function ie(e, t, n) {
+function re(e, t, n) {
 	if (e.disabled) return;
-	let r = T(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,208 +173,221 @@ function ie(e, t, n) {
 	let a = e.validate?.(r, t);
 	return typeof a == "string" && a.length > 0 ? a : void 0;
 }
-function ae(e, t) {
-	return Object.fromEntries(w(e, t).filter((e) => !e.disabled).map((e) => {
-		let n = T(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 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({
+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 = 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 = () => {
+	}), 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, z(!1);
 	}, Q = (e) => {
-		D || j(e), (h ?? g)?.(e);
-	}, Te = (e) => {
-		if (!M || M.disabled || Y) return;
+		O || ve(e), h?.(e);
+	}, we = (e) => {
+		if (!N || N.disabled || Y) return;
 		let t = {
-			...k.current,
-			[M.id]: e
+			...j.current,
+			[N.id]: e
 		};
-		E || (k.current = t, ye(t)), f?.(t), F((e) => ({
+		D || (j.current = t, k(t)), p?.(t), F((e) => ({
 			...e,
-			[M.id]: void 0
+			[N.id]: void 0
 		})), L(void 0), V(!1);
 	};
 	v(() => {
-		let e = Se.current;
-		Se.current = {
+		let e = xe.current;
+		if (xe.current = {
 			questionId: H,
 			completed: B
-		}, !(e.questionId === void 0 || e.questionId === H && e.completed === B) && K.current?.focus();
+		}, 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);
 	}, [
-		O,
-		a,
-		_
+		A,
+		i,
+		g
 	]), v(() => (G.current = !0, () => {
 		G.current = !1, X(), U.current?.abort(), U.current = null;
 	}), []);
-	let Ee = () => {
-		if (!M || Y) return;
-		let e = ie(M, k.current, q);
+	let Te = () => {
+		if (!N || Y) return;
+		let e = re(N, j.current, q);
 		if (F((t) => ({
 			...t,
-			[M.id]: e
+			[N.id]: e
 		})), e) {
 			K.current?.focus();
 			return;
 		}
-		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)]));
+		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 = A.find((t) => e[t.id]);
+		let t = M.find((t) => e[t.id]);
 		if (t) {
 			Q(t.id), K.current?.focus();
 			return;
 		}
 		let n = new AbortController();
 		U.current = n, L(void 0), z(!0);
-		let r = ae(a, k.current);
+		let r = ie(i, j.current);
 		try {
-			if (await se?.(r, { signal: n.signal }), U.current !== n || n.signal.aborted) return;
-			V(!0), ce?.(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;
-			L(ue?.(e) ?? q.submitError), le?.(e);
+			L(ce?.(e) ?? q.submitError), se?.(e);
 		} finally {
 			U.current === n && (U.current = null, z(!1));
 		}
-	}, $ = M && Object.hasOwn(P, M.id) ? P[M.id] : void 0, Oe = M && ($ || M.description);
-	return /* @__PURE__ */ S("form", {
-		..._e,
+	}, $ = 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": R || void 0,
-		className: r("questionnaire--component min-w-0", he),
+		className: r("questionnaire--component min-w-0", pe),
 		onSubmit: (e) => {
-			e.preventDefault(), N < A.length - 1 ? Ee() : De();
+			e.preventDefault(), P < M.length - 1 ? Te() : Ee();
 		},
 		onReset: (e) => {
-			ge?.(e);
+			me?.(e);
 			let t = e.nativeEvent;
 			X(), W.current = setTimeout(() => {
-				if (W.current = void 0, !G.current || t.defaultPrevented || _) return;
-				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);
+				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__ */ C(c, {
+		children: /* @__PURE__ */ w(c, {
 			gap: "lg",
-			children: [de, M ? B ? pe ?? /* @__PURE__ */ C(c, {
-				gap: "sm",
-				children: [/* @__PURE__ */ S(o, {
-					type: "inherit",
-					role: "status",
-					children: q.submitted
-				}), /* @__PURE__ */ S(i, {
-					disabled: _,
-					type: "button",
-					buttonStyle: "outline",
-					onClick: () => {
-						V(!1), A[0] && Q(A[0].id);
-					},
-					children: q.editAnswers
-				})]
-			}) : /* @__PURE__ */ C(x, { children: [
-				/* @__PURE__ */ S(l, {
-					value: N + 1,
-					max: A.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__ */ S(o, {
+					valueSlot: /* @__PURE__ */ C(a, {
 						size: "xs",
 						type: "secondary",
 						"aria-live": "polite",
-						children: q.step(N + 1, A.length)
+						children: q.step(P + 1, M.length)
 					})
 				}),
-				/* @__PURE__ */ C(c, {
+				/* @__PURE__ */ w(c, {
 					ref: K,
 					gap: "normal",
 					tabIndex: -1,
 					role: "group",
 					"aria-labelledby": J,
 					className: "questionnaire--question outline-none",
-					children: [/* @__PURE__ */ S(s, {
+					children: [/* @__PURE__ */ C(o, {
 						className: "text-inherit",
 						id: J,
 						tag: "h3",
-						children: M.title
-					}), /* @__PURE__ */ S(d, {
-						required: M.required,
+						children: N.title
+					}), /* @__PURE__ */ C(f, {
+						required: N.required,
 						error: $,
-						hint: M.description,
-						supportingTextId: we,
-						children: /* @__PURE__ */ S(ne, {
-							question: M,
-							answer: T(O, M.id),
-							answers: O,
-							disabled: Y || !!M.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: Oe ? we : void 0,
-							onAnswerChange: Te
-						}, M.id)
+							descriptionId: De ? Ce : void 0,
+							onAnswerChange: we
+						}, N.id)
 					})]
 				}),
-				I && /* @__PURE__ */ S(o, {
+				I && /* @__PURE__ */ C(a, {
 					role: "alert",
 					type: "error",
 					children: I
 				}),
-				R && /* @__PURE__ */ S(o, {
+				R && /* @__PURE__ */ C(a, {
 					role: "status",
 					type: "secondary",
 					children: q.submitting
 				}),
-				/* @__PURE__ */ C(c, {
+				/* @__PURE__ */ w(c, {
 					direction: "horizontal",
 					gap: "sm",
 					wrap: !0,
 					children: [
-						/* @__PURE__ */ S(i, {
+						/* @__PURE__ */ C(s, {
 							type: "button",
 							buttonStyle: "outline",
-							disabled: Y || N === 0,
+							disabled: Y || P === 0,
 							onClick: () => {
-								L(void 0), Q(A[N - 1].id);
+								L(void 0), Q(M[P - 1].id);
 							},
 							children: q.previous
 						}),
-						N < A.length - 1 ? /* @__PURE__ */ S(i, {
+						P < M.length - 1 ? /* @__PURE__ */ C(s, {
 							tone: "primary",
 							type: "button",
 							disabled: Y,
-							onClick: Ee,
+							onClick: Te,
 							children: q.next
-						}) : /* @__PURE__ */ S(i, {
+						}) : /* @__PURE__ */ C(s, {
 							tone: "primary",
 							type: "submit",
 							disabled: Y,
 							children: I ? q.retry : q.submit
 						}),
-						R && /* @__PURE__ */ S(i, {
+						R && /* @__PURE__ */ C(s, {
 							type: "button",
 							buttonStyle: "outline",
-							disabled: _,
+							disabled: g,
 							onClick: Z,
 							children: q.cancel
 						})
 					]
 				})
-			] }) : fe ?? /* @__PURE__ */ S(o, {
+			] }) : ue ?? /* @__PURE__ */ C(a, {
 				type: "secondary",
 				children: q.empty
 			})]
@@ -382,6 +395,6 @@ var oe = {}, se = _(function(e, t) {
 	});
 });
 //#endregion
-export { se as Questionnaire, re as defaultQuestionnaireStrings };
+export { oe as Questionnaire, ne as defaultQuestionnaireStrings };
 
 //# sourceMappingURL=questionnaire.js.map