@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/questionnaire.js

@@ -1,57 +1,52 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
-import { Check } from "reicon-react/icons/Check";
-import { cn } from "../internal/classes.js";
-import { buttonVariants, } from "./button.js";
-import { Kbd } from "./kbd.js";
-export const questionnaireItemStatusNames = [
-    "unanswered",
-    "answered",
-    "skipped",
-];
-export const questionnaireShortcutModeNames = ["letters", "numbers"];
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Check } from 'reicon-react/icons/Check';
+import { cn } from '../internal/classes.js';
+import { buttonVariants } from './button.js';
+import { Kbd } from './kbd.js';
+export const questionnaireItemStatusNames = ['unanswered', 'answered', 'skipped'];
+export const questionnaireShortcutModeNames = ['letters', 'numbers'];
 function hasText(value) {
     return Array.isArray(value)
-        ? value.some((part) => String(part).trim().length > 0)
+        ? value.some(part => String(part).trim().length > 0)
         : value != null && String(value).trim().length > 0;
 }
 function shortcutKeys(mode) {
-    if (mode === "letters")
+    if (mode === 'letters')
         return Array.from({ length: 26 }, (_, index) => String.fromCharCode(65 + index));
-    if (mode === "numbers")
+    if (mode === 'numbers')
         return Array.from({ length: 9 }, (_, index) => String(index + 1));
     return [];
 }
 function shortcutFromKey(key, mode) {
-    const normalized = mode === "letters" ? key.toUpperCase() : key;
+    const normalized = mode === 'letters' ? key.toUpperCase() : key;
     return shortcutKeys(mode).includes(normalized) ? normalized : null;
 }
 function keyShortcuts(shortcut, enter) {
-    return ([shortcut, enter ? "Enter" : null].filter(Boolean).join(" ") || undefined);
+    return [shortcut, enter ? 'Enter' : null].filter(Boolean).join(' ') || undefined;
 }
 function isAnswered(control) {
-    return control.type === "choice"
+    return control.type === 'choice'
         ? control.element.checked
-        : control.element.hasAttribute("name") && hasText(control.element.value);
+        : control.element.hasAttribute('name') && hasText(control.element.value);
 }
 function isEmptyTextInput(control) {
-    return (control?.type === "input" &&
-        ["email", "password", "search", "tel", "text", "url"].includes(control.element.type) &&
+    return (control?.type === 'input' &&
+        ['email', 'password', 'search', 'tel', 'text', 'url'].includes(control.element.type) &&
         !hasText(control.element.value));
 }
 function isTextEntry(element) {
-    if (element instanceof HTMLTextAreaElement ||
-        element instanceof HTMLSelectElement)
+    if (element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)
         return true;
     if (element instanceof HTMLInputElement)
-        return !["button", "checkbox", "radio", "reset", "submit"].includes(element.type);
+        return !['button', 'checkbox', 'radio', 'reset', 'submit'].includes(element.type);
     return element instanceof HTMLElement && element.isContentEditable;
 }
 function isRadio(element) {
-    return element instanceof HTMLInputElement && element.type === "radio";
+    return element instanceof HTMLInputElement && element.type === 'radio';
 }
 function byDocumentOrder(a, b) {
     if (a.element === b.element)
@@ -64,7 +59,7 @@ function byDocumentOrder(a, b) {
     return 0;
 }
 function assignRef(ref, value) {
-    if (typeof ref === "function")
+    if (typeof ref === 'function')
         ref(value);
     else if (ref)
         ref.current = value;
@@ -72,12 +67,8 @@ function assignRef(ref, value) {
 function initialItem(definitions, defaultItem) {
     if (!definitions)
         return defaultItem ?? null;
-    const match = defaultItem
-        ? definitions.itemByName.get(defaultItem)
-        : undefined;
-    return match && !match.disabled
-        ? match.name
-        : (definitions.enabledItems[0]?.name ?? null);
+    const match = defaultItem ? definitions.itemByName.get(defaultItem) : undefined;
+    return match && !match.disabled ? match.name : (definitions.enabledItems[0]?.name ?? null);
 }
 function shortcutsForDefinition(definition, mode) {
     const map = new Map();
@@ -120,8 +111,8 @@ export function Questionnaire({ className, defaultItem, item, items, noValidate
         ? null
         : {
             items,
-            enabledItems: items.filter((entry) => !entry.disabled),
-            itemByName: new Map(items.map((entry) => [entry.name, entry])),
+            enabledItems: items.filter(entry => !entry.disabled),
+            itemByName: new Map(items.map(entry => [entry.name, entry])),
         }, [items]);
     const [registered, setRegistered] = useState([]);
     const [internalItem, setInternalItem] = useState(() => initialItem(definitions, defaultItem));
@@ -134,32 +125,24 @@ export function Questionnaire({ className, defaultItem, item, items, noValidate
     const nativeValidation = noValidate === false;
     const shortcutMode = shortcuts ?? null;
     useLayoutEffect(() => {
-        if (!form || typeof MutationObserver === "undefined")
+        if (!form || typeof MutationObserver === 'undefined')
             return;
-        const observer = new MutationObserver(() => setDomVersion((version) => version + 1));
+        const observer = new MutationObserver(() => setDomVersion(version => version + 1));
         observer.observe(form, { childList: true, subtree: true });
         return () => observer.disconnect();
     }, [form]);
-    const enabledRegistered = useMemo(() => registered.filter((entry) => !entry.disabled).sort(byDocumentOrder), 
+    const enabledRegistered = useMemo(() => registered.filter(entry => !entry.disabled).sort(byDocumentOrder), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [registered, domVersion]);
-    const registeredByName = useMemo(() => new Map(enabledRegistered.map((entry) => [entry.name, entry])), [enabledRegistered]);
+    const registeredByName = useMemo(() => new Map(enabledRegistered.map(entry => [entry.name, entry])), [enabledRegistered]);
     const sequence = definitions?.enabledItems ?? enabledRegistered;
-    const index = sequence.findIndex((entry) => entry.name === activeName);
-    const active = index < 0 || !activeName
-        ? null
-        : (registeredByName.get(activeName) ?? null);
-    const activeDefinition = activeName
-        ? definitions?.itemByName.get(activeName)
-        : undefined;
-    const activeRequired = index < 0
-        ? null
-        : activeDefinition
-            ? !!activeDefinition.required
-            : (active?.required ?? false);
-    const activeStatus = index < 0 ? null : (active?.status ?? (activeName ? "unanswered" : null));
+    const index = sequence.findIndex(entry => entry.name === activeName);
+    const active = index < 0 || !activeName ? null : (registeredByName.get(activeName) ?? null);
+    const activeDefinition = activeName ? definitions?.itemByName.get(activeName) : undefined;
+    const activeRequired = index < 0 ? null : activeDefinition ? !!activeDefinition.required : (active?.required ?? false);
+    const activeStatus = index < 0 ? null : (active?.status ?? (activeName ? 'unanswered' : null));
     const ordered = useMemo(() => definitions
-        ? definitions.enabledItems.flatMap((entry) => {
+        ? definitions.enabledItems.flatMap(entry => {
             const match = registeredByName.get(entry.name);
             return match ? [match] : [];
         })
@@ -168,7 +151,7 @@ export function Questionnaire({ className, defaultItem, item, items, noValidate
     const current = index < 0 ? 0 : index + 1;
     const first = total > 0 && index === 0;
     const last = total > 0 && index === total - 1;
-    const go = useCallback((name, target = "item") => {
+    const go = useCallback((name, target = 'item') => {
         if (name === activeName)
             return;
         pending.current = { name, target };
@@ -197,18 +180,18 @@ export function Questionnaire({ className, defaultItem, item, items, noValidate
             }
             return;
         }
-        if (request.target === "invalid")
+        if (request.target === 'invalid')
             active?.focusInvalid();
         else
             active?.focus();
         pending.current = null;
     }, [active, activeName, controlled, index, sequence, go, total]);
     const registerItem = useCallback((entry) => {
-        setRegistered((list) => [
-            ...list.filter((other) => other.element !== entry.element && other.name !== entry.name),
+        setRegistered(list => [
+            ...list.filter(other => other.element !== entry.element && other.name !== entry.name),
             entry,
         ]);
-        return () => setRegistered((list) => list.filter((other) => other !== entry));
+        return () => setRegistered(list => list.filter(other => other !== entry));
     }, []);
     const goPrevious = useCallback(() => {
         if (index <= 0)
@@ -255,16 +238,15 @@ export function Questionnaire({ className, defaultItem, item, items, noValidate
             entry.reset();
         const target = definitions
             ? initialItem(definitions, defaultItem)
-            : (enabledRegistered.find((entry) => entry.name === defaultItem)?.name ??
-                enabledRegistered[0]?.name);
+            : (enabledRegistered.find(entry => entry.name === defaultItem)?.name ?? enabledRegistered[0]?.name);
         if (target)
             go(target);
     }
     function handleSubmit(event) {
-        const invalid = ordered.find((entry) => !entry.validate());
+        const invalid = ordered.find(entry => !entry.validate());
         if (invalid) {
             event.preventDefault();
-            go(invalid.name, "invalid");
+            go(invalid.name, 'invalid');
             if (invalid.name === activeName) {
                 invalid.focusInvalid();
                 pending.current = null;
@@ -281,10 +263,7 @@ export function Questionnaire({ className, defaultItem, item, items, noValidate
             !active ||
             !(target instanceof Element))
             return;
-        if (event.key === "Enter" &&
-            (event.metaKey || event.ctrlKey) &&
-            !event.altKey &&
-            !event.shiftKey) {
+        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey) {
             event.preventDefault();
             if (!event.repeat)
                 advance();
@@ -292,24 +271,22 @@ export function Questionnaire({ className, defaultItem, item, items, noValidate
         }
         if (event.metaKey || event.ctrlKey || event.altKey)
             return;
-        if ((event.key === "ArrowUp" || event.key === "ArrowDown") &&
-            active.moveAnswerFocus(target, event.key === "ArrowDown" ? "next" : "previous")) {
+        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') &&
+            active.moveAnswerFocus(target, event.key === 'ArrowDown' ? 'next' : 'previous')) {
             event.preventDefault();
             return;
         }
-        if ((event.key === "ArrowLeft" || event.key === "ArrowRight") &&
-            !isTextEntry(target) &&
-            !isRadio(target)) {
+        if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && !isTextEntry(target) && !isRadio(target)) {
             event.preventDefault();
             if (event.repeat)
                 return;
-            if (event.key === "ArrowLeft")
+            if (event.key === 'ArrowLeft')
                 goPrevious();
-            else if (active.status !== "unanswered")
+            else if (active.status !== 'unanswered')
                 goNext();
             return;
         }
-        if (event.key === "Enter") {
+        if (event.key === 'Enter') {
             const control = active.getAnswerByElement(target);
             if (!control)
                 return;
@@ -328,7 +305,7 @@ export function Questionnaire({ className, defaultItem, item, items, noValidate
         if (event.repeat)
             return;
         control.element.focus();
-        if (control.type === "choice")
+        if (control.type === 'choice')
             control.element.click();
     }
     const context = useMemo(() => ({
@@ -369,11 +346,11 @@ export function Questionnaire({ className, defaultItem, item, items, noValidate
         assignRef(ref, element);
     }, [ref]);
     const element = useRender({
-        defaultTagName: "form",
+        defaultTagName: 'form',
         props: mergeProps({
-            "data-slot": "questionnaire",
-            "data-shortcuts": shortcutMode ?? undefined,
-            className: cn("sprout-questionnaire", className),
+            'data-slot': 'questionnaire',
+            'data-shortcuts': shortcutMode ?? undefined,
+            className: cn('sprout-questionnaire', className),
             noValidate,
             onKeyDown: handleKeyDown,
             onReset: handleReset,
@@ -386,30 +363,30 @@ export function Questionnaire({ className, defaultItem, item, items, noValidate
 }
 /** "Question 2 of 3", announced politely as the step changes. */
 export function QuestionnaireProgress({ children, className, render, ...props }) {
-    const { current, first, last, total } = useRoot("QuestionnaireProgress");
+    const { current, first, last, total } = useRoot('QuestionnaireProgress');
     const text = total ? `Question ${current} of ${total}` : undefined;
     return useRender({
-        defaultTagName: "div",
+        defaultTagName: 'div',
         render,
         props: mergeProps({
-            "data-slot": "questionnaire-progress",
-            className: cn("sprout-questionnaire-progress", className),
-            role: "progressbar",
-            "aria-label": "Questionnaire progress",
-            "aria-live": "polite",
-            "aria-valuemin": total ? 1 : undefined,
-            "aria-valuemax": total || undefined,
-            "aria-valuenow": total ? current : undefined,
-            "aria-valuetext": text,
+            'data-slot': 'questionnaire-progress',
+            className: cn('sprout-questionnaire-progress', className),
+            role: 'progressbar',
+            'aria-label': 'Questionnaire progress',
+            'aria-live': 'polite',
+            'aria-valuemin': total ? 1 : undefined,
+            'aria-valuemax': total || undefined,
+            'aria-valuenow': total ? current : undefined,
+            'aria-valuetext': text,
             children: children ?? text,
         }, props),
         state: { current, first, last, total },
     });
 }
 /** One question. Only the current item is shown; the rest are hidden and inert. */
-export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-keyshortcuts": ariaKeyShortcuts, children, className, disabled = false, invalid = false, multiple = false, name, onStatusChange, ref, required = false, ...props }) {
-    const root = useRoot("QuestionnaireItem");
-    const { activeItemName, domVersion, first, last, itemDefinitionByName, nativeValidation, registerItem, shortcuts, } = root;
+export function QuestionnaireItem({ 'aria-describedby': ariaDescribedBy, 'aria-keyshortcuts': ariaKeyShortcuts, children, className, disabled = false, invalid = false, multiple = false, name, onStatusChange, ref, required = false, ...props }) {
+    const root = useRoot('QuestionnaireItem');
+    const { activeItemName, domVersion, first, last, itemDefinitionByName, nativeValidation, registerItem, shortcuts } = root;
     const [element, setElement] = useState(null);
     const [controls, setControls] = useState([]);
     const [attempted, setAttempted] = useState(false);
@@ -426,30 +403,22 @@ export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-k
     const sorted = useMemo(() => [...controls].sort(byDocumentOrder), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [controls, domVersion]);
-    const enabled = useMemo(() => sorted.filter((control) => !control.disabled), [sorted]);
-    const answered = enabled.some((control) => selected.includes(control.id));
-    const status = skipped
-        ? "skipped"
-        : answered
-            ? "answered"
-            : "unanswered";
-    const skippedOptional = status === "skipped" && !required;
-    const valid = disabled || skippedOptional || (!invalid && status === "answered");
+    const enabled = useMemo(() => sorted.filter(control => !control.disabled), [sorted]);
+    const answered = enabled.some(control => selected.includes(control.id));
+    const status = skipped ? 'skipped' : answered ? 'answered' : 'unanswered';
+    const skippedOptional = status === 'skipped' && !required;
+    const valid = disabled || skippedOptional || (!invalid && status === 'answered');
     const showInvalid = !disabled && !skippedOptional && (invalid || (attempted && !valid));
-    const hasInputAnswer = enabled.some((control) => control.type === "input");
+    const hasInputAnswer = enabled.some(control => control.type === 'input');
     const lastStatus = useRef(status);
     const definition = itemDefinitionByName?.get(name);
-    const shortcutByChoiceValue = useMemo(() => itemDefinitionByName
-        ? shortcutsForDefinition(definition, shortcuts)
-        : null, [definition, itemDefinitionByName, shortcuts]);
+    const shortcutByChoiceValue = useMemo(() => (itemDefinitionByName ? shortcutsForDefinition(definition, shortcuts) : null), [definition, itemDefinitionByName, shortcuts]);
     const shortcutByAnswerId = useMemo(() => {
         if (shortcutByChoiceValue)
             return new Map();
         const keys = shortcutKeys(shortcuts);
-        const choices = enabled.filter((control) => control.type === "choice");
-        return new Map(choices
-            .slice(0, keys.length)
-            .map((control, position) => [control.id, keys[position]]));
+        const choices = enabled.filter(control => control.type === 'choice');
+        return new Map(choices.slice(0, keys.length).map((control, position) => [control.id, keys[position]]));
     }, [enabled, shortcutByChoiceValue, shortcuts]);
     useLayoutEffect(() => {
         if (lastStatus.current === status)
@@ -458,16 +427,16 @@ export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-k
         onStatusChange?.(status);
     }, [onStatusChange, status]);
     const registerAnswerControl = useCallback((control) => {
-        setControls((list) => [
-            ...list.filter((other) => other.element !== control.element && other.id !== control.id),
+        setControls(list => [
+            ...list.filter(other => other.element !== control.element && other.id !== control.id),
             control,
         ]);
-        return () => setControls((list) => list.filter((other) => other !== control));
+        return () => setControls(list => list.filter(other => other !== control));
     }, []);
     const select = useCallback((id, on) => {
-        setSelected((list) => {
+        setSelected(list => {
             if (!on)
-                return list.filter((other) => other !== id);
+                return list.filter(other => other !== id);
             if (!multiple)
                 return [id];
             return list.includes(id) ? list : [...list, id];
@@ -484,19 +453,16 @@ export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-k
     }, [select]);
     const registerAnswerSelection = useCallback((id, initial) => {
         if (initial) {
-            defaults.current = [
-                ...defaults.current.filter((other) => other !== id),
-                id,
-            ];
-            setSelected((list) => {
+            defaults.current = [...defaults.current.filter(other => other !== id), id];
+            setSelected(list => {
                 if (multipleRef.current)
                     return list.includes(id) ? list : [...list, id];
                 return list.length ? list : [id];
             });
         }
         return () => {
-            defaults.current = defaults.current.filter((other) => other !== id);
-            setSelected((list) => list.filter((other) => other !== id));
+            defaults.current = defaults.current.filter(other => other !== id);
+            setSelected(list => list.filter(other => other !== id));
         };
     }, []);
     const setAnswerDefault = useCallback((id, on) => {
@@ -505,15 +471,15 @@ export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-k
                 defaults.current = [...defaults.current, id];
             return;
         }
-        defaults.current = defaults.current.filter((other) => other !== id);
+        defaults.current = defaults.current.filter(other => other !== id);
     }, []);
     const registerDescription = useCallback((id) => {
-        setDescriptionIds((list) => (list.includes(id) ? list : [...list, id]));
-        return () => setDescriptionIds((list) => list.filter((other) => other !== id));
+        setDescriptionIds(list => (list.includes(id) ? list : [...list, id]));
+        return () => setDescriptionIds(list => list.filter(other => other !== id));
     }, []);
     const registerError = useCallback((id) => {
-        setErrorIds((list) => (list.includes(id) ? list : [...list, id]));
-        return () => setErrorIds((list) => list.filter((other) => other !== id));
+        setErrorIds(list => (list.includes(id) ? list : [...list, id]));
+        return () => setErrorIds(list => list.filter(other => other !== id));
     }, []);
     const validate = useCallback(() => {
         setAttempted(true);
@@ -521,9 +487,7 @@ export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-k
             return false;
         if (!nativeValidation)
             return true;
-        const failing = enabled.find((control) => isAnswered(control) &&
-            control.element.willValidate &&
-            !control.element.validity.valid);
+        const failing = enabled.find(control => isAnswered(control) && control.element.willValidate && !control.element.validity.valid);
         if (!failing)
             return true;
         failing.element.focus();
@@ -532,15 +496,15 @@ export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-k
     }, [enabled, nativeValidation, valid]);
     const focus = useCallback(() => element?.focus(), [element]);
     const focusInvalid = useCallback(() => {
-        const filled = element?.querySelector("input[data-filled][name]:not(:disabled)");
-        const firstField = element?.querySelector("input:not([type=hidden]):not(:disabled), textarea:not(:disabled)");
+        const filled = element?.querySelector('input[data-filled][name]:not(:disabled)');
+        const firstField = element?.querySelector('input:not([type=hidden]):not(:disabled), textarea:not(:disabled)');
         (filled ?? firstField ?? element)?.focus();
     }, [element]);
     const reset = useCallback(() => {
         setAttempted(false);
         setSkipped(false);
         setSelected(multiple ? [...defaults.current] : defaults.current.slice(0, 1));
-        setResetVersion((version) => version + 1);
+        setResetVersion(version => version + 1);
     }, [multiple]);
     const skip = useCallback(() => {
         if (required)
@@ -553,38 +517,34 @@ export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-k
         previousMultiple.current = multiple;
         if (!wasMultiple || multiple)
             return;
-        setSelected((list) => {
-            const keep = enabled.find((control) => list.includes(control.id));
+        setSelected(list => {
+            const keep = enabled.find(control => list.includes(control.id));
             return keep ? [keep.id] : [];
         });
     }, [enabled, multiple]);
-    const getAnswerByElement = useCallback((target) => enabled.find((control) => control.element === target) ?? null, [enabled]);
+    const getAnswerByElement = useCallback((target) => enabled.find(control => control.element === target) ?? null, [enabled]);
     const getAnswerByShortcut = useCallback((shortcut) => {
         if (shortcutByChoiceValue) {
             const value = [...shortcutByChoiceValue.entries()].find(([, key]) => key === shortcut)?.[0];
-            return (enabled.find((control) => control.type === "choice" && control.value === value) ?? null);
+            return enabled.find(control => control.type === 'choice' && control.value === value) ?? null;
         }
         const id = [...shortcutByAnswerId.entries()].find(([, key]) => key === shortcut)?.[0];
-        return enabled.find((control) => control.id === id) ?? null;
+        return enabled.find(control => control.id === id) ?? null;
     }, [enabled, shortcutByAnswerId, shortcutByChoiceValue]);
     const moveAnswerFocus = useCallback((target, direction) => {
-        const position = enabled.findIndex((control) => control.element === target);
+        const position = enabled.findIndex(control => control.element === target);
         const currentControl = position < 0 ? null : (enabled[position] ?? null);
         if (!enabled.length ||
             (isTextEntry(target) && !isEmptyTextInput(currentControl)) ||
             (position < 0 && target !== element))
             return false;
         const next = position < 0
-            ? (enabled.find(isAnswered) ??
-                (direction === "next" ? enabled[0] : enabled[enabled.length - 1]))
-            : enabled[(position + (direction === "next" ? 1 : -1) + enabled.length) %
-                enabled.length];
-        if (!next ||
-            next.element === target ||
-            (position >= 0 && isRadio(target) && isRadio(next.element)))
+            ? (enabled.find(isAnswered) ?? (direction === 'next' ? enabled[0] : enabled[enabled.length - 1]))
+            : enabled[(position + (direction === 'next' ? 1 : -1) + enabled.length) % enabled.length];
+        if (!next || next.element === target || (position >= 0 && isRadio(target) && isRadio(next.element)))
             return false;
         next.element.focus();
-        if (next.type === "choice" && isRadio(next.element))
+        if (next.type === 'choice' && isRadio(next.element))
             next.element.click();
         return true;
     }, [element, enabled]);
@@ -597,9 +557,7 @@ export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-k
             disabled,
             required,
             status,
-            choices: sorted.flatMap((control) => control.type === "choice"
-                ? [{ value: control.value, disabled: control.ownDisabled }]
-                : []),
+            choices: sorted.flatMap(control => control.type === 'choice' ? [{ value: control.value, disabled: control.ownDisabled }] : []),
             focus,
             focusInvalid,
             validate,
@@ -669,18 +627,16 @@ export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-k
         setElement(node);
         assignRef(ref, node);
     }, [ref]);
-    const describedBy = [...descriptionIds, ...(showInvalid ? errorIds : []), ariaDescribedBy]
-        .filter(Boolean)
-        .join(" ") || undefined;
+    const describedBy = [...descriptionIds, ...(showInvalid ? errorIds : []), ariaDescribedBy].filter(Boolean).join(' ') || undefined;
     const itemShortcuts = [
         ariaKeyShortcuts,
-        active ? "Meta+Enter Control+Enter" : undefined,
-        active && enabled.length ? "ArrowUp ArrowDown" : undefined,
-        active && !first ? "ArrowLeft" : undefined,
-        active && !last && status !== "unanswered" ? "ArrowRight" : undefined,
+        active ? 'Meta+Enter Control+Enter' : undefined,
+        active && enabled.length ? 'ArrowUp ArrowDown' : undefined,
+        active && !first ? 'ArrowLeft' : undefined,
+        active && !last && status !== 'unanswered' ? 'ArrowRight' : undefined,
     ]
         .filter(Boolean)
-        .join(" ") || undefined;
+        .join(' ') || undefined;
     const state = {
         active,
         disabled,
@@ -689,46 +645,46 @@ export function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-k
         required,
         status,
     };
-    return (_jsx(ItemContext.Provider, { value: context, children: _jsx("fieldset", { "data-slot": "questionnaire-item", "data-active": active ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-invalid": showInvalid ? "" : undefined, "data-multiple": multiple ? "" : undefined, "data-required": required ? "" : undefined, "data-status": state.status, ...props, ref: handleRef, className: cn("sprout-questionnaire-item", className), "aria-describedby": describedBy, "aria-invalid": showInvalid || undefined, "aria-keyshortcuts": itemShortcuts, disabled: disabled, hidden: !active, inert: !active, tabIndex: -1, children: children }) }));
+    return (_jsx(ItemContext.Provider, { value: context, children: _jsx("fieldset", { "data-slot": "questionnaire-item", "data-active": active ? '' : undefined, "data-disabled": disabled ? '' : undefined, "data-invalid": showInvalid ? '' : undefined, "data-multiple": multiple ? '' : undefined, "data-required": required ? '' : undefined, "data-status": state.status, ...props, ref: handleRef, className: cn('sprout-questionnaire-item', className), "aria-describedby": describedBy, "aria-invalid": showInvalid || undefined, "aria-keyshortcuts": itemShortcuts, disabled: disabled, hidden: !active, inert: !active, tabIndex: -1, children: children }) }));
 }
 /** The question, as the item's `legend`. */
 export function QuestionnaireTitle({ className, render, ...props }) {
-    useItem("QuestionnaireTitle");
+    useItem('QuestionnaireTitle');
     return useRender({
-        defaultTagName: "legend",
+        defaultTagName: 'legend',
         render,
         props: mergeProps({
-            "data-slot": "questionnaire-title",
-            className: cn("sprout-questionnaire-title", className),
+            'data-slot': 'questionnaire-title',
+            className: cn('sprout-questionnaire-title', className),
         }, props),
     });
 }
 /** Help text under the question. The item references it with `aria-describedby`. */
 export function QuestionnaireDescription({ className, id, render, ...props }) {
-    const { registerDescription } = useItem("QuestionnaireDescription");
+    const { registerDescription } = useItem('QuestionnaireDescription');
     const generated = useId();
     const resolved = id ?? generated;
     useLayoutEffect(() => registerDescription(resolved), [resolved, registerDescription]);
     return useRender({
-        defaultTagName: "p",
+        defaultTagName: 'p',
         render,
         props: mergeProps({
-            "data-slot": "questionnaire-description",
+            'data-slot': 'questionnaire-description',
             id: resolved,
-            className: cn("sprout-questionnaire-description", className),
+            className: cn('sprout-questionnaire-description', className),
         }, props),
     });
 }
 /** Stacks the item's choices. */
 export function QuestionnaireChoices({ className, render, ...props }) {
-    useItem("QuestionnaireChoices");
-    const { shortcuts } = useRoot("QuestionnaireChoices");
+    useItem('QuestionnaireChoices');
+    const { shortcuts } = useRoot('QuestionnaireChoices');
     return useRender({
-        defaultTagName: "div",
+        defaultTagName: 'div',
         render,
         props: mergeProps({
-            "data-slot": "questionnaire-choices",
-            className: cn("sprout-questionnaire-choices", className),
+            'data-slot': 'questionnaire-choices',
+            className: cn('sprout-questionnaire-choices', className),
         }, props),
         state: { shortcuts },
     });
@@ -738,19 +694,15 @@ export function QuestionnaireChoices({ className, render, ...props }) {
  * `multiple` items; the whole row is the hit area.
  */
 export function QuestionnaireChoice({ checked, children, className, defaultChecked = false, disabled: ownDisabled = false, onChange, render, value, ...props }) {
-    const item = useItem("QuestionnaireChoice");
+    const item = useItem('QuestionnaireChoice');
     const { disabled: itemDisabled, hasInputAnswer, invalid, multiple, name, registerAnswerControl, registerAnswerSelection, required, resetVersion, selectedAnswerIds, setAnswerDefault, setAnswerSelectionFromInteraction, shortcutByAnswerId, shortcutByChoiceValue, status, syncControlledAnswerSelection, } = item;
     const id = useId();
     const [input, setInput] = useState(null);
     const initialChecked = useRef(defaultChecked);
     const controlled = checked !== undefined;
     const disabled = itemDisabled || ownDisabled;
-    const isChecked = controlled
-        ? status === "skipped"
-            ? false
-            : checked
-        : selectedAnswerIds.includes(id);
-    const type = multiple ? "checkbox" : "radio";
+    const isChecked = controlled ? (status === 'skipped' ? false : checked) : selectedAnswerIds.includes(id);
+    const type = multiple ? 'checkbox' : 'radio';
     const shortcut = shortcutByChoiceValue?.get(value) ?? shortcutByAnswerId.get(id) ?? null;
     useLayoutEffect(() => registerAnswerSelection(id, initialChecked.current), [id, registerAnswerSelection]);
     useLayoutEffect(() => setAnswerDefault(id, defaultChecked), [id, defaultChecked, setAnswerDefault]);
@@ -758,7 +710,7 @@ export function QuestionnaireChoice({ checked, children, className, defaultCheck
         if (!input)
             return;
         return registerAnswerControl({
-            type: "choice",
+            type: 'choice',
             id,
             element: input,
             disabled,
@@ -785,7 +737,7 @@ export function QuestionnaireChoice({ checked, children, className, defaultCheck
             setAnswerSelectionFromInteraction(id, event.target.checked);
             return;
         }
-        if (status === "skipped" && checked === event.target.checked)
+        if (status === 'skipped' && checked === event.target.checked)
             setAnswerSelectionFromInteraction(id, checked);
     }
     const state = {
@@ -796,29 +748,29 @@ export function QuestionnaireChoice({ checked, children, className, defaultCheck
         type,
     };
     return useRender({
-        defaultTagName: "label",
+        defaultTagName: 'label',
         render,
         props: mergeProps({
-            "data-slot": "questionnaire-choice",
-            className: cn("sprout-questionnaire-choice", className),
-            children: (_jsxs(_Fragment, { children: [_jsx("input", { "data-slot": "questionnaire-choice-input", className: "sprout-questionnaire-choice-input", ref: setInput, id: id, type: type, name: status === "skipped" ? undefined : name, value: value, checked: isChecked, disabled: disabled, required: required && !multiple && !hasInputAnswer, "aria-invalid": invalid || undefined, "aria-keyshortcuts": keyShortcuts(shortcut, !disabled && isChecked), "data-checked": isChecked ? "" : undefined, "data-unchecked": isChecked ? undefined : "", onChange: handleChange }), _jsxs("span", { "aria-hidden": "true", "data-slot": "questionnaire-choice-indicator", className: "sprout-questionnaire-choice-indicator", children: [_jsx("span", { className: "sprout-questionnaire-choice-dot" }), _jsx(Check, { className: "sprout-questionnaire-choice-check" })] }), _jsx("span", { "data-slot": "questionnaire-choice-label", className: "sprout-questionnaire-choice-label", children: children }), shortcut !== null && (_jsx(Kbd, { variant: "outline", "aria-hidden": "true", "data-slot": "questionnaire-choice-shortcut", className: "sprout-questionnaire-choice-shortcut", children: shortcut }))] })),
+            'data-slot': 'questionnaire-choice',
+            className: cn('sprout-questionnaire-choice', className),
+            children: (_jsxs(_Fragment, { children: [_jsx("input", { "data-slot": "questionnaire-choice-input", className: "sprout-questionnaire-choice-input", ref: setInput, id: id, type: type, name: status === 'skipped' ? undefined : name, value: value, checked: isChecked, disabled: disabled, required: required && !multiple && !hasInputAnswer, "aria-invalid": invalid || undefined, "aria-keyshortcuts": keyShortcuts(shortcut, !disabled && isChecked), "data-checked": isChecked ? '' : undefined, "data-unchecked": isChecked ? undefined : '', onChange: handleChange }), _jsxs("span", { "aria-hidden": "true", "data-slot": "questionnaire-choice-indicator", className: "sprout-questionnaire-choice-indicator", children: [_jsx("span", { className: "sprout-questionnaire-choice-dot" }), _jsx(Check, { className: "sprout-questionnaire-choice-check" })] }), _jsx("span", { "data-slot": "questionnaire-choice-label", className: "sprout-questionnaire-choice-label", children: children }), shortcut !== null && (_jsx(Kbd, { variant: "outline", "aria-hidden": "true", "data-slot": "questionnaire-choice-shortcut", className: "sprout-questionnaire-choice-shortcut", children: shortcut }))] })),
         }, props),
         state,
         stateAttributesMapping: {
-            checked: (on) => on ? { "data-checked": "" } : { "data-unchecked": "" },
+            checked: (on) => (on ? { 'data-checked': '' } : { 'data-unchecked': '' }),
         },
     });
 }
 /** A muted second line inside a choice. */
 export function QuestionnaireChoiceDescription({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "questionnaire-choice-description", className: cn("sprout-questionnaire-choice-description", className), ...props }));
+    return (_jsx("span", { "data-slot": "questionnaire-choice-description", className: cn('sprout-questionnaire-choice-description', className), ...props }));
 }
 /**
  * A typed answer. It counts as answered once it has text, and is only sent
  * with the form while it does.
  */
-export function QuestionnaireInput({ className, defaultValue, disabled: ownDisabled = false, onChange, ref, render, type = "text", value, ...props }) {
-    const { disabled: itemDisabled, invalid, name, registerAnswerControl, registerAnswerSelection, resetVersion, selectedAnswerIds, setAnswerDefault, setAnswerSelectionFromInteraction, syncControlledAnswerSelection, } = useItem("QuestionnaireInput");
+export function QuestionnaireInput({ className, defaultValue, disabled: ownDisabled = false, onChange, ref, render, type = 'text', value, ...props }) {
+    const { disabled: itemDisabled, invalid, name, registerAnswerControl, registerAnswerSelection, resetVersion, selectedAnswerIds, setAnswerDefault, setAnswerSelectionFromInteraction, syncControlledAnswerSelection, } = useItem('QuestionnaireInput');
     const id = useId();
     const element = useRef(null);
     const initialFilled = useRef(hasText(defaultValue));
@@ -836,7 +788,7 @@ export function QuestionnaireInput({ className, defaultValue, disabled: ownDisab
         if (!node)
             return;
         return registerAnswerControl({
-            type: "input",
+            type: 'input',
             id,
             element: node,
             disabled,
@@ -849,15 +801,7 @@ export function QuestionnaireInput({ className, defaultValue, disabled: ownDisab
         }
         if (resetVersion > 0)
             setFilledState(defaultFilled);
-    }, [
-        controlled,
-        valueFilled,
-        value,
-        defaultFilled,
-        id,
-        resetVersion,
-        syncControlledAnswerSelection,
-    ]);
+    }, [controlled, valueFilled, value, defaultFilled, id, resetVersion, syncControlledAnswerSelection]);
     useLayoutEffect(() => {
         const node = element.current;
         if (node && controlled)
@@ -876,16 +820,16 @@ export function QuestionnaireInput({ className, defaultValue, disabled: ownDisab
         assignRef(ref, node);
     }, [ref]);
     const input = useRender({
-        defaultTagName: "input",
+        defaultTagName: 'input',
         render,
         props: mergeProps({
-            "data-slot": "questionnaire-input",
-            className: cn("sprout-input", "sprout-questionnaire-input", className),
-            "aria-invalid": invalid || undefined,
-            "aria-keyshortcuts": keyShortcuts(null, !disabled && filled && selected),
+            'data-slot': 'questionnaire-input',
+            className: cn('sprout-input', 'sprout-questionnaire-input', className),
+            'aria-invalid': invalid || undefined,
+            'aria-keyshortcuts': keyShortcuts(null, !disabled && filled && selected),
             defaultValue: controlled ? undefined : defaultValue,
             disabled,
-            form: selected ? undefined : "",
+            form: selected ? undefined : '',
             id,
             name: selected ? name : undefined,
             onChange: handleChange,
@@ -895,40 +839,37 @@ export function QuestionnaireInput({ className, defaultValue, disabled: ownDisab
         }, props),
         state: { disabled, filled, invalid },
         stateAttributesMapping: {
-            filled: (on) => on ? { "data-filled": "" } : { "data-empty": "" },
+            filled: (on) => (on ? { 'data-filled': '' } : { 'data-empty': '' }),
         },
     });
     return (_jsx("div", { "data-slot": "questionnaire-input-wrapper", className: "sprout-questionnaire-input-wrapper", children: input }));
 }
 /** Shown after someone tries to move on without a valid answer. */
 export function QuestionnaireError({ children, className, id, render, ...props }) {
-    const { invalid, registerError, required } = useItem("QuestionnaireError");
+    const { invalid, registerError, required } = useItem('QuestionnaireError');
     const generated = useId();
     const resolved = id ?? generated;
     useLayoutEffect(() => registerError(resolved), [resolved, registerError]);
     return useRender({
-        defaultTagName: "p",
+        defaultTagName: 'p',
         render,
         props: mergeProps({
-            "data-slot": "questionnaire-error",
-            className: cn("sprout-questionnaire-error", className),
+            'data-slot': 'questionnaire-error',
+            className: cn('sprout-questionnaire-error', className),
             id: resolved,
             hidden: !invalid,
-            role: invalid ? "alert" : undefined,
-            children: children ??
-                (required
-                    ? "Choose an answer to continue."
-                    : "Choose an answer or skip this question."),
+            role: invalid ? 'alert' : undefined,
+            children: children ?? (required ? 'Choose an answer to continue.' : 'Choose an answer or skip this question.'),
         }, props),
         state: { invalid },
     });
 }
 /** Previous on the start side; Skip and Next or Submit on the end side. */
 export function QuestionnaireActions({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "questionnaire-actions", className: cn("sprout-questionnaire-actions", className), ...props }));
+    return _jsx("div", { "data-slot": "questionnaire-actions", className: cn('sprout-questionnaire-actions', className), ...props });
 }
-function useNavigationButton(slot, { children, className, disabled = false, onClick, render, size = "default", tabIndex, type, variant, ...props }, { label, visible, status, shortcut, action, }) {
-    const resolvedVariant = variant ?? (slot === "next" || slot === "submit" ? "default" : "outline");
+function useNavigationButton(slot, { children, className, disabled = false, onClick, render, size = 'default', tabIndex, type, variant, ...props }, { label, visible, status, shortcut, action, }) {
+    const resolvedVariant = variant ?? (slot === 'next' || slot === 'submit' ? 'default' : 'outline');
     const activeShortcut = visible && !disabled ? (shortcut ?? null) : null;
     function handleClick(event) {
         onClick?.(event);
@@ -936,34 +877,34 @@ function useNavigationButton(slot, { children, className, disabled = false, onCl
             action?.();
     }
     return useRender({
-        defaultTagName: "button",
+        defaultTagName: 'button',
         render,
         props: mergeProps({
-            "data-slot": `questionnaire-${slot}`,
-            "data-size": size,
-            "data-variant": resolvedVariant,
-            className: cn(buttonVariants({ variant: resolvedVariant, size }), "sprout-questionnaire-action", `sprout-questionnaire-${slot}`, className),
-            "aria-hidden": !visible || undefined,
-            "aria-keyshortcuts": activeShortcut ?? undefined,
+            'data-slot': `questionnaire-${slot}`,
+            'data-size': size,
+            'data-variant': resolvedVariant,
+            className: cn(buttonVariants({ variant: resolvedVariant, size }), 'sprout-questionnaire-action', `sprout-questionnaire-${slot}`, className),
+            'aria-hidden': !visible || undefined,
+            'aria-keyshortcuts': activeShortcut ?? undefined,
             children: children ?? label,
             disabled,
             hidden: !visible,
             inert: !visible,
             onClick: action ? handleClick : onClick,
             tabIndex: visible ? tabIndex : -1,
-            type: type ?? (slot === "submit" ? "submit" : "button"),
+            type: type ?? (slot === 'submit' ? 'submit' : 'button'),
         }, props),
         state: { disabled, shortcut: activeShortcut, status, visible },
         stateAttributesMapping: {
-            visible: (on) => on ? { "data-visible": "" } : { "data-hidden": "" },
+            visible: (on) => (on ? { 'data-visible': '' } : { 'data-hidden': '' }),
         },
     });
 }
 /** Goes back one item. Hidden on the first item. */
 export function QuestionnairePrevious(props) {
-    const root = useRoot("QuestionnairePrevious");
-    return useNavigationButton("previous", props, {
-        label: "Previous",
+    const root = useRoot('QuestionnairePrevious');
+    return useNavigationButton('previous', props, {
+        label: 'Previous',
         visible: root.total > 1 && !root.first,
         status: root.activeItemStatus,
         action: root.goPrevious,
@@ -971,9 +912,9 @@ export function QuestionnairePrevious(props) {
 }
 /** Clears the answer and moves on. Shown only on optional items; submits on the last one. */
 export function QuestionnaireSkip(props) {
-    const root = useRoot("QuestionnaireSkip");
-    return useNavigationButton("skip", props, {
-        label: "Skip",
+    const root = useRoot('QuestionnaireSkip');
+    return useNavigationButton('skip', props, {
+        label: 'Skip',
         visible: root.activeItemRequired === false,
         status: root.activeItemStatus,
         action: root.skipCurrent,
@@ -981,22 +922,22 @@ export function QuestionnaireSkip(props) {
 }
 /** Checks the answer and moves on. Hidden on the last item. */
 export function QuestionnaireNext(props) {
-    const root = useRoot("QuestionnaireNext");
-    return useNavigationButton("next", props, {
-        label: "Next",
+    const root = useRoot('QuestionnaireNext');
+    return useNavigationButton('next', props, {
+        label: 'Next',
         visible: root.total > 1 && !root.last,
         status: root.activeItemStatus,
-        shortcut: "Enter",
+        shortcut: 'Enter',
         action: root.goNext,
     });
 }
 /** Submits the form. Shown only on the last item. */
 export function QuestionnaireSubmit(props) {
-    const root = useRoot("QuestionnaireSubmit");
-    return useNavigationButton("submit", props, {
-        label: "Submit",
+    const root = useRoot('QuestionnaireSubmit');
+    return useNavigationButton('submit', props, {
+        label: 'Submit',
         visible: root.total > 0 && root.last,
         status: root.activeItemStatus,
-        shortcut: "Enter",
+        shortcut: 'Enter',
     });
 }