@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/select/behaviour.jsx

@@ -0,0 +1,445 @@
+// Ported from React Aria (@react-aria/select useSelect, HiddenSelect useHiddenSelect; @react-aria/menu
+// useMenuTrigger with type "listbox"), Apache-2.0, © Adobe.
+//
+// Select behaviour: handler bodies for the trigger button (press / keyboard of useMenuTrigger, typeahead
+// and ArrowLeft / ArrowRight of useSelect on the closed trigger), the label, the listbox in the popover
+// (useListBox + the select's selection rules) and the hidden native <select> (autofill, form value,
+// native validation, form reset). The closed trigger works from the data items (`selectCollection`);
+// the open popover renders the RAC ListBox over the select's list state (`selectListChange`, `selectListBlur`).
+import { untrack } from "@rivetjs/reactivity";
+import { getSearchCollator, ListKeyboardDelegate } from "../_adapters/collections.js";
+import { typeSelectKeyDown } from "../_adapters/type-select.js";
+import { isFocusVisible, noteModality, setInteractionModality } from "../interactions/focus-visible.jsx";
+import { isVirtualClick } from "../platform/index.js";
+import { focusWithoutScrolling } from "../utils/index.js";
+import { pointerTypeOf } from "../selection/dom-utils.js";
+import { commitValidation } from "../state/form-validation.js";
+import { commit, onFormReset, validationChange, validationInvalid } from "../form/behaviour.js";
+import { fieldProps } from "../label/behaviour.js";
+import { closeOverlay } from "../state/overlays.js";
+import { openSelect, selectCollection, selectItems, selectedKeys, selectValue, setSelectValue, toggleSelect, isSelectDisabled, isSelectRequired, } from "../state/select.js";
+/** Part ids (useSelect: trigger = field, value = SelectValue, listbox = the menu). */
+export const triggerId = (state) => state.id + "-trigger";
+export const labelId = (state) => triggerId(state) + "-label";
+export const valueId = (state) => state.id + "-value";
+export const listId = (state) => state.id + "-listbox";
+export const popoverId = (state) => state.id + "-popover";
+export const hiddenId = (state) => state.id + "-hidden";
+/**
+ * `isDisabled` for attribute / context bags (live props P5): the live accessor when the select's `isDisabled` is one
+ * (a returned arrow: resumable), else the creation value.
+ */
+export function selectDisabled(state) {
+    return state.disabled ? liveSelectDisabled(state) : state.isDisabled;
+}
+function liveSelectDisabled(state) {
+    return () => isSelectDisabled(state);
+}
+/** `data-required` for a spread / render bag: an accessor when live (returned arrow), else the value. */
+export function selectRequiredAttr(state) {
+    return state.required ? liveSelectRequiredAttr(state) : state.isRequired ? "true" : undefined;
+}
+function liveSelectRequiredAttr(state) {
+    return () => (isSelectRequired(state) ? "true" : undefined);
+}
+/** `data-disabled` for a spread / render bag: an accessor when live (returned arrow), else the value. */
+export function selectDisabledAttr(state) {
+    return state.disabled ? liveSelectDisabledAttr(state) : state.isDisabled ? "true" : undefined;
+}
+function liveSelectDisabledAttr(state) {
+    return () => (isSelectDisabled(state) ? "true" : undefined);
+}
+/**
+ * react-aria `useSelect` attribute bags (same keys as RA). Ids and ARIA attributes only: the handlers
+ * are the exported free functions (`selectTriggerKeyDown`, `selectListEvent`, …), attached as inline
+ * arrows so they resume. Reactive values are accessors (`triggerProps["aria-expanded"]()`).
+ */
+export function selectProps(props, state) {
+    const ids = fieldProps({
+        id: triggerId(state),
+        label: props.label,
+        description: props.description,
+        labelElementType: "span",
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": props["aria-describedby"],
+    });
+    const fieldLabelledBy = ids.fieldProps["aria-labelledby"];
+    const ariaLabel = ids.fieldProps["aria-label"];
+    const self = ariaLabel && !fieldLabelledBy ? triggerId(state) : null;
+    return {
+        ids,
+        labelProps: { id: ids.labelProps.id ?? labelId(state) },
+        triggerProps: {
+            id: triggerId(state),
+            "aria-haspopup": "listbox",
+            "aria-expanded": () => (state.isOpen() ? "true" : "false"),
+            "aria-controls": () => (state.isOpen() ? listId(state) : undefined),
+            "aria-label": ariaLabel,
+            // useSelect: the trigger is labelled by the value, then the label (or itself with aria-label).
+            "aria-labelledby": [valueId(state), fieldLabelledBy, self].filter(Boolean).join(" "),
+            isDisabled: selectDisabled(state),
+        },
+        valueProps: { id: valueId(state) },
+        menuProps: {
+            id: listId(state),
+            "aria-labelledby": [fieldLabelledBy, self].filter(Boolean).join(" ") || undefined,
+            autoFocus: () => untrack(state.focusStrategy) || true,
+            shouldSelectOnPressUp: true,
+            shouldFocusOnHover: true,
+            disallowEmptySelection: true,
+            linkBehavior: "selection",
+        },
+        descriptionProps: { id: ids.descriptionId },
+        errorMessageProps: { id: ids.errorMessageId },
+        hiddenSelectProps: { isDisabled: selectDisabled(state), name: state.name, form: state.form, state },
+    };
+}
+/** Keys the closed trigger handles (`data-rk`: a cold arrow key does not scroll the page while code loads). */
+export const TRIGGER_KEYS = "Enter Space ArrowDown ArrowUp ArrowLeft ArrowRight";
+const triggerOf = (state, from) => ("ownerDocument" in from && from.ownerDocument ? from.ownerDocument : from).getElementById(triggerId(state));
+// Keyboard presses of the trigger (Enter / Space): their activation click is not a virtual press.
+const keyboardPresses = new WeakSet();
+/** useSelect's keyboard delegate over the data items (no DOM: the menu is closed). */
+function triggerDelegate(state) {
+    // Disabled = `disabledKeys` + the items' own `isDisabled` (RAC parts: `<ListBoxItem isDisabled>`).
+    const disabledKeys = new Set(state.disabledKeys);
+    for (const item of selectItems(state))
+        if (item.disabled)
+            disabledKeys.add(item.key);
+    return new ListKeyboardDelegate({ collection: selectCollection(state), disabledKeys, ref: null, collator: getSearchCollator() });
+}
+/**
+ * The listbox selection is the select value (useSelectState `selectedKeys: convertValue(value)`). The list's
+ * selection state is controlled (the ListBox never writes it): this writes the value's keys into its signal
+ * (a serializable state; a derived signal is not). Run from an effect while the popover content renders (the
+ * menu opened however: trigger, `isOpen`, `openSelect`; a value written outside while open) and after each
+ * listbox selection change. `keys`: pass `selectedKeys(state)` read in the effect to track the value.
+ */
+export function syncListSelection(state, listKeys, keys = untrack(() => selectedKeys(state))) {
+    const current = untrack(listKeys);
+    if (current !== "all" && current.size === keys.length && keys.every((key) => current.has(key)))
+        return;
+    listKeys.set(new Set(keys));
+}
+/** useMenuTrigger `state.open(focusStrategy)` / `state.toggle(focusStrategy)`. */
+export function selectOpen(state, focusStrategy, toggle = false) {
+    if (toggle)
+        toggleSelect(state, focusStrategy);
+    else
+        openSelect(state, focusStrategy);
+}
+/** keydown on the trigger: typeahead (single), Enter / Space / ArrowDown / ArrowUp open, ArrowLeft / ArrowRight select. */
+/** useTypeSelect on the closed trigger (single selection): the manager is the trigger's focused key. */
+function triggerTypeSelect(state, trigger, event, delegate = triggerDelegate(state)) {
+    const manager = {
+        get focusedKey() {
+            return untrack(state.focusedKey);
+        },
+        setFocusedKey(key) {
+            state.focusedKey.set(key);
+        },
+    };
+    if (!typeSelectKeyDown(state, trigger, manager, delegate, event, (key) => setSelectValue(state, key)))
+        return false;
+    if (event.key === " ")
+        keyboardPresses.add(state); // keyup: no native activation either
+    return true;
+}
+/**
+ * useTypeSelect `onKeyDownCapture` of a parts-form trigger (`<Button>`), on the Select root: a Space continuing a
+ * search is consumed before the Button's press sees it (RA: capture handler + stopPropagation on the trigger).
+ */
+export function selectTriggerKeyDownCapture(state, event) {
+    const target = event.target;
+    if (event.key !== " " || isSelectDisabled(state) || state.selectionMode !== "single" || !target || target.id !== triggerId(state))
+        return;
+    triggerTypeSelect(state, target, event);
+}
+export function selectTriggerKeyDown(state, event, callbacks = {}) {
+    noteModality(event);
+    if (isSelectDisabled(state))
+        return;
+    const trigger = event.currentTarget;
+    const single = state.selectionMode === "single";
+    const delegate = triggerDelegate(state);
+    // useTypeSelect (single selection only): onKeyDownCapture: a key typeahead consumes stops propagation, so no
+    // trigger shortcut runs.
+    if (single && triggerTypeSelect(state, trigger, event, delegate))
+        return;
+    // useMenuTrigger (useKeyboard shortcuts). No `defaultPrevented` check, as upstream: the loader holds
+    // a cold Space / Enter (`data-rk`) and the handler still opens.
+    const open = (focusStrategy) => {
+        event.preventDefault();
+        selectOpen(state, focusStrategy, true);
+    };
+    switch (event.key) {
+        case "Enter":
+        case " ":
+            // usePress: a keyboard press never activates natively (keyup / click are ours).
+            keyboardPresses.add(state);
+            open("first");
+            break;
+        case "ArrowDown":
+            open("first");
+            break;
+        case "ArrowUp":
+            open("last");
+            break;
+        // useSelect: ArrowLeft / ArrowRight move the selection while closed (single selection).
+        case "ArrowLeft":
+        case "ArrowRight": {
+            if (!single || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+                break;
+            event.preventDefault();
+            const current = untrack(() => selectedKeys(state))[0] ?? null;
+            const key = current != null ? (event.key === "ArrowLeft" ? delegate.getKeyAbove(current) : delegate.getKeyBelow(current)) : delegate.getFirstKey();
+            if (key != null)
+                setSelectValue(state, key);
+            break;
+        }
+    }
+    callbacks.onKeyDown?.(event);
+}
+/** keyup on the trigger: Space activation is ours (no native click). */
+export function selectTriggerKeyUp(state, event, callbacks = {}) {
+    if ((event.key === " " || event.key === "Enter") && keyboardPresses.has(state)) {
+        event.preventDefault();
+        keyboardPresses.delete(state);
+    }
+    callbacks.onKeyUp?.(event);
+}
+/** pointerdown on the trigger: mouse / pen open on press start (useMenuTrigger `onPressStart`). */
+export function selectTriggerPointerDown(state, event) {
+    noteModality(event);
+    keyboardPresses.delete(state);
+    if (event.button !== 0 || isSelectDisabled(state))
+        return;
+    const type = pointerTypeOf(event);
+    if (type === "touch" || type === "virtual")
+        return;
+    // Ensure the trigger has focus before opening so FocusScope restores it on close.
+    focusWithoutScrolling(event.currentTarget);
+    selectOpen(state, null);
+}
+/**
+ * useMenuTrigger `onPressStart` (RAC parts: the `<Button>` of a Select gets it through `ButtonContext`): mouse / pen
+ * open on press start (focus the trigger first so FocusScope restores it), a virtual press opens on the first item.
+ */
+export function selectTriggerPressStart(state, event) {
+    if (event.pointerType !== "touch" && event.pointerType !== "keyboard" && !isSelectDisabled(state)) {
+        focusWithoutScrolling(event.target);
+        selectOpen(state, event.pointerType === "virtual" ? "first" : null);
+    }
+}
+/** useMenuTrigger `onPress`: touch toggles on press up. */
+export function selectTriggerPress(state, event) {
+    if (event.pointerType === "touch" && !isSelectDisabled(state)) {
+        focusWithoutScrolling(event.target);
+        selectOpen(state, null, true);
+    }
+}
+/** mousedown on the trigger: preventFocusOnPress (the pointerdown handler focused it already). */
+export function selectTriggerMouseDown(event) {
+    if (event.button === 0)
+        event.preventDefault();
+}
+/** click on the trigger: touch toggles (press up), screen reader clicks open on the first item. */
+export function selectTriggerClick(state, event) {
+    if (keyboardPresses.has(state)) {
+        keyboardPresses.delete(state);
+        event.preventDefault();
+        return;
+    }
+    if (isSelectDisabled(state))
+        return;
+    if (isVirtualClick(event)) {
+        focusWithoutScrolling(event.currentTarget);
+        selectOpen(state, "first");
+    }
+    else if (event.pointerType === "touch") {
+        focusWithoutScrolling(event.currentTarget);
+        selectOpen(state, null, true);
+    }
+}
+/** focus on the trigger (useSelect `onFocus`). */
+export function selectTriggerFocus(state, event, callbacks = {}) {
+    if (untrack(state.isFocused))
+        return;
+    callbacks.onFocus?.(event);
+    callbacks.onFocusChange?.(true);
+    state.isFocused.set(true);
+}
+/** blur on the trigger (useSelect `onBlur`): not while the menu is open (focus moved into it). */
+export function selectTriggerBlur(state, event, callbacks = {}) {
+    if (untrack(state.isOpen))
+        return;
+    callbacks.onBlur?.(event);
+    callbacks.onFocusChange?.(false);
+    state.isFocused.set(false);
+}
+/** click on the label: focus the trigger and show its focus ring. */
+export function selectLabelClick(state, event) {
+    if (isSelectDisabled(state))
+        return;
+    triggerOf(state, event.currentTarget)?.focus();
+    setInteractionModality("keyboard");
+}
+/** focusin / focusout on the Select root (useFocusRing `within`). */
+export function selectFocusWithin(state, event) {
+    if (event.type === "focusin")
+        state.isFocusVisible.set(isFocusVisible());
+    else if (!event.currentTarget.contains(event.relatedTarget))
+        state.isFocusVisible.set(false);
+}
+/**
+ * useSelect `menuProps.onBlur` (the ListBox's `onBlur`: focus left the listbox element). Focus moving inside the
+ * popover or back to the select (closing restores focus to the trigger, FocusScope `restoreFocus`) is not the
+ * select losing focus — one focus / blur pair per focus, as upstream where the unmounted menu never blurs. Focus
+ * to nowhere (the listbox removed on close, an option removed, a click on a non-focusable part) is checked once
+ * focus settles.
+ */
+export function selectListBlur(state, event, callbacks = {}) {
+    const root = event.currentTarget;
+    const doc = root.ownerDocument;
+    const related = event.relatedTarget;
+    const within = (node) => {
+        if (node == null)
+            return false;
+        if (root.contains(node) || !!doc.getElementById(popoverId(state))?.contains(node))
+            return true;
+        const trigger = doc.getElementById(triggerId(state));
+        return !!trigger && (trigger === node || !!trigger.parentElement?.contains(node));
+    };
+    const blur = () => {
+        if (!untrack(state.isFocused))
+            return;
+        callbacks.onBlur?.(event);
+        callbacks.onFocusChange?.(false);
+        state.isFocused.set(false);
+    };
+    if (related != null) {
+        if (!within(related))
+            blur();
+        return;
+    }
+    setTimeout(() => {
+        const active = doc.activeElement;
+        if (!within(active) && !untrack(state.isOpen))
+            blur();
+    }, 0);
+}
+/**
+ * useSelectState's listbox `onSelectionChange`: set the value, mirror it into the list selection (controlled),
+ * close when `shouldCloseOnSelect`, and commit validation against the hidden field. `root`: an element of the
+ * select (its document holds the hidden field); without it only the state commits.
+ */
+export function selectListChange(state, listKeys, keys, root) {
+    if (keys === "all")
+        return;
+    if (state.selectionMode === "single")
+        setSelectValue(state, keys.values().next().value ?? null);
+    else
+        setSelectValue(state, [...keys]);
+    syncListSelection(state, listKeys);
+    if (state.shouldCloseOnSelect)
+        closeOverlay(state);
+    if (root)
+        commitSelect(state, root.ownerDocument);
+    else
+        commitValidation(state.validation);
+}
+/** Commit the validation (`validationState.commitValidation()`) against the hidden native field. */
+export function commitSelect(state, doc) {
+    const field = doc.getElementById(hiddenId(state));
+    if (field) {
+        syncHiddenField(state, field);
+        hiddenSelectReset(state, field);
+    }
+    commit(state.validation, field);
+}
+/** Write the value into the hidden field now (its bindings flush later) so native validity is current. */
+export function syncHiddenField(state, field) {
+    const keys = untrack(() => selectedKeys(state)).map(String);
+    if (field.tagName === "SELECT") {
+        const select = field;
+        for (const option of select.options)
+            option.selected = option.value === "" ? keys.length === 0 && !select.multiple : keys.includes(option.value);
+    }
+    else
+        field.value = keys[0] ?? "";
+}
+// --- HiddenSelect (useHiddenSelect) ----------------------------------------------------------
+/** change / input on the hidden <select> (browser autofill): set the value; `change` commits validation. */
+export function hiddenSelectChange(state, event) {
+    const select = event.currentTarget;
+    hiddenSelectReset(state, select);
+    if (select.multiple)
+        setSelectValue(state, Array.from(select.selectedOptions, (option) => option.value));
+    else
+        setSelectValue(state, select.value);
+    if (event.type === "change")
+        validationChange(state.validation, select);
+}
+/** invalid on the hidden field (submit / checkValidity): commit, focus the trigger, no browser bubble. */
+export function hiddenSelectInvalid(state, event) {
+    hiddenSelectReset(state, event.currentTarget);
+    validationInvalid(state.validation, event, () => triggerOf(state, event.currentTarget)?.focus());
+}
+/** useFormReset: a form reset restores the default value. */
+export function hiddenSelectReset(state, field) {
+    onFormReset(state, field, () => setSelectValue(state, state.defaultValue));
+}
+// --- Value helpers (Rivet extras over useSelectState `setValue`, for parts outside the listbox) ----
+/**
+ * Set the value from outside the listbox (a chip's remove button, a clear button) and commit validation.
+ * `event`: the handler's event — its document holds the hidden field, so native validity is synced
+ * before the commit; without it only the state commits (native validity syncs at the next submit).
+ */
+function setFromOutside(state, value, event) {
+    setSelectValue(state, value);
+    const doc = event?.currentTarget?.ownerDocument ?? event?.target?.ownerDocument;
+    if (doc)
+        commitSelect(state, doc);
+    else
+        commitValidation(state.validation);
+}
+/** Removes `keys` from the value (single: clears it when the key matches); `onChange`, commits validation. */
+export function removeSelected(state, keys, event) {
+    const remove = new Set(typeof keys === "object" && keys != null && Symbol.iterator in keys ? keys : [keys]);
+    const current = untrack(() => selectedKeys(state));
+    const next = current.filter((key) => !remove.has(key));
+    if (next.length === current.length)
+        return;
+    setFromOutside(state, state.selectionMode === "single" ? null : next, event);
+}
+/** Clears the value (single: `null`, multiple: `[]`); `onChange`, commits validation. */
+export function clearSelection(state, event) {
+    if (untrack(() => selectedKeys(state)).length === 0)
+        return;
+    setFromOutside(state, state.selectionMode === "single" ? null : [], event);
+}
+/** Toggles `key` (single: selects it, or clears when it is the value); `onChange`, commits validation. */
+export function toggleSelected(state, key, event) {
+    const current = untrack(() => selectedKeys(state));
+    const has = current.includes(key);
+    if (state.selectionMode === "single")
+        setFromOutside(state, has ? null : key, event);
+    else
+        setFromOutside(state, has ? current.filter((k) => k !== key) : [...current, key], event);
+}
+/** Whether `key` is part of the value (binding accessor: hidden options, `selected`). */
+export const isValueKey = (state, key) => {
+    // Per hidden `<option>` binding (≤ 300 per select, all re-run on a selection change): reads the value in place —
+    // no `selectedKeys` copy, one `String(key)` (was a copy + two `String` calls per compared key).
+    const value = selectValue(state);
+    if (value == null)
+        return false;
+    const want = String(key);
+    if (!Array.isArray(value))
+        return String(value) === want;
+    for (let i = 0; i < value.length; i++)
+        if (String(value[i]) === want)
+            return true;
+    return false;
+};

package/select/hidden-select.d.ts

@@ -0,0 +1,44 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type SelectionMode, type SelectState } from "../state/select.js";
+export interface AriaHiddenSelectProps {
+    /** Describes the type of autocomplete functionality the input should provide if any. */
+    autoComplete?: string;
+    /** The text label for the select. */
+    label?: Content;
+    /** HTML form input name. */
+    name?: string;
+    /** The `<form>` element to associate the input with (its id). */
+    form?: string;
+    /** Sets the disabled state of the select and input (an accessor stays live). */
+    isDisabled?: boolean | (() => boolean);
+}
+export interface HiddenSelectProps<M extends SelectionMode = "single"> extends AriaHiddenSelectProps {
+    /** State for the select. */
+    state: SelectState<M>;
+    /**
+     * @internal Rivet: the select carries the `preload="visible"` resume directive (Select parts `render` root: the
+     * directive is JSX-literal and cannot reach the user's root element, so the hidden select's handlers, which reach
+     * the same state, plan the first click's dependency chunks while visible).
+     */
+    preloadVisible?: boolean;
+}
+/** useHiddenSelect `containerProps` style: visually hidden, fixed (prevents page scrolling). */
+export declare const hiddenContainerStyle: {
+    readonly position: "fixed";
+    readonly top: "0";
+    readonly left: "0";
+    readonly border: "0";
+    readonly clip: "rect(0 0 0 0)";
+    readonly clipPath: "inset(50%)";
+    readonly height: "1px";
+    readonly margin: "-1px";
+    readonly overflow: "hidden";
+    readonly padding: "0";
+    readonly width: "1px";
+    readonly whiteSpace: "nowrap";
+};
+/**
+ * Renders a hidden native `<select>` element, which can be used to support browser form autofill,
+ * mobile form navigation, and native form submission.
+ */
+export declare function HiddenSelect<M extends SelectionMode = "single">(props: HiddenSelectProps<M>): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;

package/select/hidden-select.jsx

@@ -0,0 +1,68 @@
+// Ported from React Aria (@react-aria/select HiddenSelect.tsx: HiddenSelect, useHiddenSelect), Apache-2.0, © Adobe.
+//
+// A hidden native <select> (server-rendered, so the form value posts before any JS runs) for browser
+// autofill, mobile form navigation and native form submission / validation. Over 300 items: hidden
+// inputs instead (`<input type="text" hidden>` with native validation, so `required` blocks submit).
+import { For } from "@rivetjs/runtime/dom";
+import { untrack } from "@rivetjs/reactivity";
+import { visuallyHidden } from "../a11y/index.js";
+import { validityError } from "../form/behaviour.js";
+import { isSelectRequired, selectCollection, selectedKeys, selectItems } from "../state/select.js";
+import { hiddenId, hiddenSelectChange, hiddenSelectInvalid, isValueKey, selectDisabled } from "./behaviour.jsx";
+/** useHiddenSelect `containerProps` style: visually hidden, fixed (prevents page scrolling). */
+export const hiddenContainerStyle = { ...visuallyHidden, position: "fixed", top: "0", left: "0" };
+/**
+ * Renders a hidden native `<select>` element, which can be used to support browser form autofill,
+ * mobile form navigation, and native form submission.
+ */
+export function HiddenSelect(props) {
+    const state = props.state;
+    const name = props.name ?? state.name, form = props.form ?? state.form, isDisabled = props.isDisabled ?? selectDisabled(state);
+    const native = state.validation.behavior === "native";
+    const multiple = state.selectionMode === "multiple";
+    // If the collection isn't too big, use a hidden <select> so that browser autofill works.
+    if (untrack(() => selectCollection(state).size) <= 300) {
+        const values = untrack(() => selectedKeys(state));
+        // One option list for both select variants (with / without the preload directive).
+        const options = () => (<>
+        <option value="" label={"\u00A0"} selected={(!multiple && selectedKeys(state).length === 0) || undefined}>
+          {"\u00A0"}
+        </option>
+        <For each={() => selectItems(state)} by={(item) => item.key}>
+          {(item) => {
+                const { key, label, textValue } = item();
+                return (<option value={String(key)} selected={isValueKey(state, key) || undefined}>
+                {textValue ?? label}
+              </option>);
+            }}
+        </For>
+        {/* The collection may be empty during the initial render: options for the current values
+                      give the select its value immediately (FormData reads are consistent). */}
+        {untrack(() => selectCollection(state).size) === 0 && name ? values.map((value) => <option value={String(value ?? "")} selected/>) : null}
+      </>);
+        return (
+        // Hidden from assistive technology; FocusScope never focuses inside (data-react-aria-prevent-focus).
+        // Rivet: a `span` (RAC: `div`) so a Select can sit in phrasing content (`<p>`: a `<div>` start tag closes the paragraph
+        // in the HTML parser); visually hidden + `position: fixed`, so the element type does not change the layout.
+        <span style={hiddenContainerStyle} aria-hidden="true" data-react-aria-prevent-focus="" data-a11y-ignore="aria-hidden-focus" data-testid="hidden-select-container">
+        <label>
+          {props.label}
+          {props.preloadVisible ? (<select preload="visible" id={hiddenId(state)} tabIndex={-1} autoComplete={props.autoComplete} disabled={(typeof isDisabled === "function" ? isDisabled() : isDisabled) || undefined} multiple={multiple || undefined} required={(native && isSelectRequired(state)) || undefined} name={name} form={form} data-rv-error={validityError(state.validation)} onChange={(event) => hiddenSelectChange(state, event)} onInput={(event) => hiddenSelectChange(state, event)} onInvalid={(event) => hiddenSelectInvalid(state, event)}>
+              {options()}
+            </select>) : (<select id={hiddenId(state)} tabIndex={-1} autoComplete={props.autoComplete} disabled={(typeof isDisabled === "function" ? isDisabled() : isDisabled) || undefined} multiple={multiple || undefined} required={(native && isSelectRequired(state)) || undefined} name={name} form={form} data-rv-error={validityError(state.validation)} onChange={(event) => hiddenSelectChange(state, event)} onInput={(event) => hiddenSelectChange(state, event)} onInvalid={(event) => hiddenSelectInvalid(state, event)}>
+              {options()}
+            </select>)}
+        </label>
+      </span>);
+    }
+    if (!name)
+        return null;
+    // Over 300 items: hidden inputs carry the value (at least one, for required submission).
+    const values = () => {
+        const keys = selectedKeys(state);
+        return keys.length ? keys.map(String) : [""];
+    };
+    return (<For each={values} by={(value, index) => index}>
+      {(value, index) => native ? (<input id={index() === 0 ? hiddenId(state) : undefined} type="text" style={{ display: "none" }} autoComplete={props.autoComplete} name={name} form={form} disabled={(typeof isDisabled === "function" ? isDisabled() : isDisabled) || undefined} value={value()} required={(index() === 0 && isSelectRequired(state)) || undefined} data-rv-error={index() === 0 ? validityError(state.validation) : undefined} onInvalid={(event) => hiddenSelectInvalid(state, event)}/>) : (<input id={index() === 0 ? hiddenId(state) : undefined} type="hidden" autoComplete={props.autoComplete} name={name} form={form} disabled={(typeof isDisabled === "function" ? isDisabled() : isDisabled) || undefined} value={value()}/>)}
+    </For>);
+}