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

package/select/index.d.ts

@@ -0,0 +1,123 @@
+import type { Content, Slot } from "@rivetjs/runtime/jsx-runtime";
+import type { TransitionClasses } from "@rivetjs/kit/transition";
+import { type GlobalDOMAttributes } from "@rivetjs/cdk/dom-props";
+import type { Placement } from "../overlay/position.js";
+import { type MaybeAccessor, type ValidationBehavior, type ValidationFunction } from "../state/form-validation.js";
+import { type ErrorMessage } from "../text-field/fields.js";
+import { type CollectionEntry, type Item, type Key, type Selection } from "../state/list.js";
+import { createSelectState, openSelect, selectedItems, selectedItemsOf, selectedKeys, selectValue, setSelectValue, toggleSelect, type ChangeValueType, type SelectionMode, type SelectState, type SelectStateProps, type ValueType } from "../state/select.js";
+import { type SelectPartsProps } from "./select-parts.jsx";
+import { HiddenSelect } from "./hidden-select.jsx";
+import { SelectContext, SelectStateContext, SelectValue, SelectValueContext, selectedText, type ItemRenderProps, type SelectContextValue, type SelectValueProps, type SelectValueRenderProps } from "./select-value.jsx";
+import { type SelectCallbacks } from "./behaviour.jsx";
+export type { Item, Key, Selection, CollectionEntry, SelectionMode, SelectState, ValueType, ChangeValueType, ItemRenderProps };
+export type { HiddenSelectProps, AriaHiddenSelectProps } from "./hidden-select.jsx";
+export { SelectValue, SelectContext, SelectStateContext, SelectValueContext, selectedText };
+export type { SelectValueProps, SelectValueRenderProps, SelectContextValue };
+export { createSelectState, setSelectValue, selectValue, selectedKeys, selectedItems, selectedItemsOf, openSelect, toggleSelect, HiddenSelect };
+export { removeSelected, clearSelection, toggleSelected } from "./behaviour.jsx";
+export type { SelectPartsProps, SelectPartsRenderProps } from "./select-parts.jsx";
+/** RAC `SelectRenderProps` (the slot re-renders when they change). */
+export interface SelectRenderProps {
+    /** Whether the select is focused, either via a mouse or keyboard. */
+    isFocused: boolean;
+    /** Whether the select is keyboard focused. */
+    isFocusVisible: boolean;
+    /** Whether the select is disabled. */
+    isDisabled: boolean;
+    /** Whether the select is currently open. */
+    isOpen: boolean;
+    /** Whether the select is invalid. */
+    isInvalid: boolean;
+    /** Whether the select is required. */
+    isRequired: boolean;
+}
+/**
+ * @deprecated Snapshot render props of the `renderValue` preset prop (removed with the parts rewrite: use
+ * `<SelectValue>{(renderProps) => …}</SelectValue>`, whose `SelectValueRenderProps` are accessors).
+ */
+export interface SelectValueSnapshot {
+    /** Whether the value is a placeholder. */
+    isPlaceholder: boolean;
+    /** @deprecated The item of the first selected key. */
+    selectedItem: Item | null;
+    /** The items of the currently selected keys. */
+    selectedItems: Item[];
+    /** The textValue of the currently selected items. */
+    selectedText: string;
+    /** The state of the select. */
+    state: SelectState<SelectionMode>;
+}
+/**
+ * Global DOM events and attributes (RAC GlobalDOMAttributes) go to the root element (RAC `Select`);
+ * the parts RAC composes take theirs through `triggerProps` (the `<Button>`), `valueProps`
+ * (`<SelectValue>`), `popoverProps` (`<Popover>`) and `listBoxProps` (`<ListBox>`).
+ */
+export interface SelectProps<M extends SelectionMode = "single"> extends Omit<SelectStateProps<M>, "validationErrors" | "id">, SelectCallbacks, TransitionClasses, GlobalDOMAttributes<HTMLDivElement> {
+    /** Visible label (omit and pass `aria-label` / `aria-labelledby` instead). */
+    label?: Content;
+    description?: Content;
+    /** Error message (or a function of the validation); default: the validation errors. */
+    errorMessage?: ErrorMessage<Content>;
+    /** Temporary text that occupies the select when it is empty. @default 'Select an item' (localized) */
+    placeholder?: string;
+    /** @default "native" (or the enclosing `<Form>`'s) */
+    validationBehavior?: ValidationBehavior;
+    isInvalid?: MaybeAccessor<boolean | undefined>;
+    validate?: ValidationFunction<M extends "single" ? Key : Key[]>;
+    /** Describes the type of autocomplete functionality the hidden select should provide. */
+    autoComplete?: string;
+    autoFocus?: boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Base id: root `<id>`, trigger `<id>-trigger`, value `<id>-value`, listbox `<id>-listbox`; generated when omitted. */
+    id?: string;
+    /** Shared state (e.g. a clear button calling `setSelectValue(state, null)`); else one is created from the props. */
+    state?: SelectState<M>;
+    /** The placement of the popover with respect to the trigger. @default 'bottom start' */
+    placement?: Placement;
+    /** The additional offset applied along the main axis between the popover and the trigger. @default 8 */
+    offset?: number;
+    crossOffset?: number;
+    shouldFlip?: boolean;
+    maxHeight?: number;
+    /** Root class. @default 'rv-Select' */
+    class?: string;
+    /** @default 'rv-Select-trigger' */
+    triggerClass?: string;
+    /** @default 'rv-SelectValue' */
+    valueClass?: string;
+    /** @default 'rv-Label' */
+    labelClass?: string;
+    descriptionClass?: string;
+    errorClass?: string;
+    /** Class of the popover around the listbox. @default 'rv-Select-popover' */
+    popoverClass?: string;
+    /** @default 'rv-ListBox' */
+    listClass?: string;
+    /** `ListBoxItem` class. @default 'rv-ListBoxItem' */
+    optionClass?: string;
+    /** `ListBoxSection` class. @default 'rv-ListBoxSection' */
+    sectionClass?: string;
+    /** Section `Header` class. @default 'rv-Header' */
+    headerClass?: string;
+    /** Option content (default: the label, and the description when set). SelectValue renders it too (states off). */
+    children?: Slot<[item: () => Item, states: ItemRenderProps]>;
+    /** Custom SelectValue content (RAC `<SelectValue>{renderProps => …}</SelectValue>`). */
+    renderValue?: Slot<[props: SelectValueSnapshot]>;
+    /** Extra trigger content after the value (an arrow icon, say), or a function of the render props. */
+    indicator?: Content | Slot<[props: SelectRenderProps]>;
+    /** Content shown in the listbox when there are no items (with `allowsEmptyCollection`). */
+    renderEmptyState?: Content;
+    /** Global DOM events and attributes of the trigger button. */
+    triggerProps?: GlobalDOMAttributes<HTMLButtonElement>;
+    /** Global DOM events and attributes of the SelectValue element. */
+    valueProps?: GlobalDOMAttributes<HTMLSpanElement>;
+    /** Global DOM events and attributes of the popover element. */
+    popoverProps?: GlobalDOMAttributes<HTMLDivElement>;
+    /** Global DOM events and attributes of the `ListBox` element (its own handlers run first). */
+    listBoxProps?: GlobalDOMAttributes<HTMLDivElement>;
+}
+/** A select displays a collapsible list of options and allows a user to select one or more of them. */
+export declare function Select<M extends SelectionMode = "single">(props: SelectProps<M> | SelectPartsProps<M>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/select/index.jsx

@@ -0,0 +1,255 @@
+// Ported from React Aria Components (Select.tsx: Select, SelectValue; with the Button, Popover and
+// ListBox it composes) and React Aria (@react-aria/select useSelect), Apache-2.0, © Adobe.
+//
+// Select: a label, a trigger button showing the value (SelectValue) or a placeholder, description,
+// field error, the RAC ListBox in a popover of the div overlay layer (`PopoverOverlay`, placement
+// "bottom start", `data-trigger="Select"`, width from `--trigger-width` in theme.css) and a hidden
+// native <select> carrying the form value (server-rendered: forms post before JS). Data-driven items
+// (RAC dynamic collections: `items` + an option slot), built into a collection (`collectionOf`: a
+// `<ListBox items>` of `ListBoxItem` / `ListBoxSection` + `Header`) that the popover's ListBox renders
+// through `ListStateContext` / `ListBoxContext` (useSelect `menuProps`). Single or multiple selection.
+// Render state as data attributes on the root: data-focused, data-focus-visible, data-open,
+// data-disabled, data-invalid, data-required. Closed, the popover renders nothing; the trigger
+// handles typeahead and ArrowLeft / ArrowRight from the data items.
+import { ref as createRef } from "@rivetjs/runtime/dom";
+import { effect, provide, signal, untrack } from "@rivetjs/reactivity";
+import { globalDOMProps } from "@rivetjs/cdk/dom-props";
+import { resolveLocale } from "../i18n/index.js";
+import { formatMessage } from "../_adapters/intl.js";
+import { PopoverOverlay } from "../popover/index.jsx";
+import { ListBox, ListBoxContext, ListBoxItem, ListBoxSection, ListStateContext, } from "../listbox/index.jsx";
+import { Collection, collectionOf } from "../collections/components.jsx";
+import { createMultipleSelectionState } from "../selection/state.js";
+import { Header } from "../header/index.jsx";
+import { Text } from "../text/index.jsx";
+import { FieldError, FieldErrorContext } from "../form/field-error.jsx";
+import { dataBool } from "../utils/data-attrs.jsx";
+import { liveOptions } from "../utils/live.jsx";
+import { useValidationBehavior, useValidationErrors } from "../form/index.jsx";
+import { displayValidation } from "../state/form-validation.js";
+import { errorText, fieldDescribedBy } from "../text-field/fields.js";
+import { isSection } from "../state/list.js";
+import { createSelectState, openSelect, selectedItems, selectedItemsOf, selectedKeys, selectValue, setSelectValue, toggleSelect, isSelectDisabled, isSelectRequired, } from "../state/select.js";
+import { strings } from "./intl.js";
+import { SelectParts } from "./select-parts.jsx";
+import { HiddenSelect } from "./hidden-select.jsx";
+import { Provider } from "../slots/index.jsx";
+import { SelectContext, SelectStateContext, SelectValue, SelectValueContext, selectedText, } from "./select-value.jsx";
+import { listId, popoverId, selectFocusWithin, selectLabelClick, selectListBlur, selectListChange, selectProps, selectTriggerBlur, selectTriggerClick, selectTriggerFocus, selectTriggerKeyDown, selectTriggerKeyUp, selectTriggerMouseDown, selectTriggerPointerDown, syncListSelection, triggerId, TRIGGER_KEYS, valueId, } from "./behaviour.jsx";
+export { SelectValue, SelectContext, SelectStateContext, SelectValueContext, selectedText };
+export { createSelectState, setSelectValue, selectValue, selectedKeys, selectedItems, selectedItemsOf, openSelect, toggleSelect, HiddenSelect };
+export { removeSelected, clearSelection, toggleSelected } from "./behaviour.jsx";
+/** Global DOM events the trigger button handles itself; the user's handlers run from its own. */
+const TRIGGER_OWNED = ["onPointerDown", "onMouseDown", "onClick"];
+/** A select displays a collapsible list of options and allows a user to select one or more of them. */
+export function Select(props) {
+    // RAC parts form (no `items`, no shared `state`): Label / Button / SelectValue / Popover / ListBox children.
+    if (untrack(() => props.items === undefined && props.state === undefined))
+        return <SelectParts props={props}/>;
+    return <SelectPreset props={props}/>;
+}
+function SelectPreset(input) {
+    // Live props (P5, LIVE-SWEEP): `isDisabled` / `isInvalid` / `isRequired` / `placeholder` / `aria-describedby` /
+    // controlled `value` / `selectedKey` live; body reads read once.
+    const props = liveOptions(input.props, ["isDisabled", "isInvalid", "isRequired", "placeholder", "aria-describedby"], ["value", "selectedKey"]);
+    return untrack(() => selectPreset(props));
+}
+function selectPreset(props) {
+    const validationBehavior = useValidationBehavior(props.validationBehavior);
+    const state = (props.state ??
+        createSelectState({ ...props, validationBehavior, validationErrors: useValidationErrors() }));
+    const single = state.selectionMode === "single";
+    // The listbox's selection state (useListState of useSelectState): controlled by the value (`syncListSelection`);
+    // a pick reports through `selectListChange`. useSelect menuProps `disallowEmptySelection: true` only stops Escape
+    // clearing the listbox selection (`escapeKeyBehavior: "none"` below; a multiple select may still be emptied by
+    // toggling); single keeps its key on re-press, and duplicate events close the menu.
+    const rootRef = createRef();
+    // The selection signal is its own const: a resumable closure must not reference the object it is created in.
+    const initialKeys = untrack(() => selectedKeys(state));
+    const listKeys = signal(new Set(initialKeys));
+    const selection = {
+        ...createMultipleSelectionState({
+            selectionMode: state.selectionMode,
+            disallowEmptySelection: single,
+            allowDuplicateSelectionEvents: true,
+            selectedKeys: listKeys,
+            disabledKeys: state.disabledKeys,
+            onSelectionChange: (keys) => selectListChange(state, listKeys, keys, rootRef()),
+        }),
+        controlled: true,
+    };
+    const aria = selectProps(props, state);
+    const ids = aria.ids;
+    const ariaLabel = aria.triggerProps["aria-label"];
+    const triggerLabelledBy = aria.triggerProps["aria-labelledby"];
+    const menuLabelledBy = aria.menuProps["aria-labelledby"];
+    const labelElementId = aria.labelProps.id;
+    const locale = resolveLocale();
+    const placeholder = props.placeholder ?? formatMessage(strings, locale, "selectPlaceholder");
+    const { errorMessage, children: render, renderValue, indicator, onFocus, onBlur, onFocusChange, onKeyDown, onKeyUp } = props;
+    const callbacks = { onFocus, onBlur, onFocusChange, onKeyDown, onKeyUp };
+    const validation = state.validation;
+    // RAC FieldError children: the preset's `errorMessage` (content, or a function of the validation
+    // snapshot); undefined → the validation errors. Passed as a prop (a JSX child would always be a slot).
+    const errorChildren = typeof errorMessage === "function"
+        ? (renderProps) => errorMessage({
+            isInvalid: renderProps.isInvalid(),
+            validationErrors: renderProps.validationErrors(),
+            validationDetails: renderProps.validationDetails(),
+        })
+        : errorMessage;
+    const errorClass = props.errorClass;
+    // A const arrow (resumable closure): the FieldErrorContext value.
+    const fieldValidation = () => displayValidation(validation);
+    const isInvalid = () => displayValidation(validation).isInvalid;
+    // Destructured first: a bag literal reading `props.x` would capture the whole props object (not serializable).
+    const { enter, enterFrom, enterTo, entered, leave, leaveFrom, leaveTo, listClass = "rv-ListBox" } = props;
+    const transition = { enter, enterFrom, enterTo, entered, leave, leaveFrom, leaveTo };
+    const empty = props.renderEmptyState;
+    // The popover sits in its own (reactive) binding site, the overlay anchor: read its props here so
+    // that binding does not capture the whole props object (JSX label / description included).
+    const placement = props.placement ?? "bottom start", offset = props.offset, crossOffset = props.crossOffset, shouldFlip = props.shouldFlip, maxHeight = props.maxHeight, popoverClass = props.popoverClass ?? "rv-Select-popover";
+    const { optionClass, sectionClass, headerClass } = props;
+    // Read up front: an element with a spread is one binding, and it must not capture `props` (rendered content).
+    const { triggerProps, listBoxProps } = props;
+    const domProps = globalDOMProps(props), triggerDOMProps = globalDOMProps(triggerProps ?? {}, TRIGGER_OWNED), valueDOMProps = globalDOMProps(props.valueProps ?? {}), popoverDOMProps = globalDOMProps(props.popoverProps ?? {}), listDOMProps = globalDOMProps(listBoxProps ?? {});
+    const triggerPointerDown = triggerProps?.onPointerDown, triggerMouseDown = triggerProps?.onMouseDown, triggerClick = triggerProps?.onClick;
+    // RAC Select's collection (CollectionBuilder): a ListBox of the items, built in a pass (closed popover included).
+    const items = props.items;
+    const option = (item) => selectOption(item, render, optionClass, sectionClass, headerClass);
+    // The ListBox's list state (RAC ListStateContext): the built collection + the value-controlled selection.
+    const listState = {
+        id: listId(state),
+        selectionState: selection,
+        disabledKeys: selection.disabledKeys,
+        items: undefined,
+        children: undefined,
+        // Built on use, cached per instance (`listKeys`): a computed holding the JSX content does not serialize.
+        collection: () => selectListCollection(listKeys, items, option),
+        filter: undefined,
+        suppressTextValueWarning: false,
+        layoutDelegate: undefined,
+    };
+    // useSelect `menuProps` (ListBoxContext); the user's `listBoxProps` handlers run after the ListBox's own.
+    const listBoxContext = {
+        ...listDOMProps,
+        id: listId(state),
+        class: listClass,
+        "aria-labelledby": menuLabelledBy,
+        autoFocus: () => untrack(state.focusStrategy) || true,
+        shouldSelectOnPressUp: true,
+        shouldFocusOnHover: true,
+        linkBehavior: "selection",
+        escapeKeyBehavior: "none",
+        onBlur: (event) => selectListBlur(state, event, callbacks),
+        ...(empty != null ? { renderEmptyState: (values) => selectEmptyState(values, empty) } : {}),
+    };
+    const rootClass = props.class ?? "rv-Select", rootId = props.id, triggerClass = props.triggerClass ?? "rv-Select-trigger", autoFocus = props.autoFocus, autoComplete = props.autoComplete, label = props.label, description = props.description, labelClass = props.labelClass ?? "rv-Label", descriptionClass = props.descriptionClass ?? "rv-Text", valueClass = props.valueClass ?? "rv-SelectValue";
+    return (<div {...domProps} ref={rootRef} class={rootClass} id={rootId} data-focused={dataBool(state.isFocused())} data-focus-visible={dataBool(state.isFocused() && state.isFocusVisible())} data-open={dataBool(state.isOpen())} data-disabled={dataBool(isSelectDisabled(state))} data-invalid={dataBool(isInvalid())} data-required={dataBool(isSelectRequired(state))} onFocusIn={(event) => selectFocusWithin(state, event)} onFocusOut={(event) => selectFocusWithin(state, event)}>
+      {label != null ? (<span id={labelElementId} class={labelClass} data-slot="label" onClick={(event) => selectLabelClick(state, event)}>
+          {label}
+        </span>) : null}
+      <button {...triggerDOMProps} type="button" id={triggerId(state)} class={triggerClass} aria-haspopup="listbox" aria-expanded={state.isOpen() ? "true" : "false"} aria-controls={state.isOpen() ? listId(state) : undefined} aria-label={ariaLabel} aria-labelledby={triggerLabelledBy} aria-describedby={fieldDescribedBy(state, ids, errorMessage)} disabled={isSelectDisabled(state) || undefined} autoFocus={autoFocus} data-pressed={state.isOpen() ? "true" : undefined} data-rk={TRIGGER_KEYS} onKeyDown={(event) => selectTriggerKeyDown(state, event, callbacks)} onKeyUp={(event) => selectTriggerKeyUp(state, event, callbacks)} onPointerDown={triggerPointerDown
+            ? (event) => {
+                selectTriggerPointerDown(state, event);
+                triggerPointerDown(event);
+            }
+            : (event) => selectTriggerPointerDown(state, event)} onMouseDown={triggerMouseDown
+            ? (event) => {
+                selectTriggerMouseDown(event);
+                triggerMouseDown(event);
+            }
+            : selectTriggerMouseDown} onClick={triggerClick
+            ? (event) => {
+                selectTriggerClick(state, event);
+                triggerClick(event);
+            }
+            : (event) => selectTriggerClick(state, event)} onFocus={(event) => selectTriggerFocus(state, event, callbacks)} onBlur={(event) => selectTriggerBlur(state, event, callbacks)}>
+        <Provider values={[
+            [SelectStateContext, state],
+            [SelectContext, { placeholder, renderItem: render }],
+            [SelectValueContext, { ...valueDOMProps, id: valueId(state), class: valueClass }],
+        ]}>
+          {renderValue ? <SelectValue>{(values) => renderValue(valueSnapshot(values))}</SelectValue> : <SelectValue />}
+        </Provider>
+        {typeof indicator === "function" ? indicator(selectRenderProps(state)) : indicator}
+      </button>
+      {description != null ? (<span id={ids.descriptionId} class={descriptionClass} data-slot="description">
+          {description}
+        </span>) : null}
+      <Provider values={[[FieldErrorContext, fieldValidation]]}>
+        <FieldError id={ids.errorMessageId} class={errorClass} children={errorChildren}/>
+      </Provider>
+      {/* Own binding site (the anchor): on a resumed page the first open re-creates only the popover. */}
+      <span data-rv-overlay-anchor="" style={{ display: "contents" }}>
+        <PopoverOverlay {...popoverDOMProps} id={popoverId(state)} triggerId={triggerId(state)} state={state} placement={placement} offset={offset} crossOffset={crossOffset} shouldFlip={shouldFlip} maxHeight={maxHeight} role={null} class={popoverClass} attributes={{ "data-trigger": "Select" }} {...transition}>
+          {() => {
+            // The listbox shows the current value however the menu opened, and follows it while open.
+            effect(() => syncListSelection(state, listKeys, selectedKeys(state)));
+            // Synchronous provide (a JSX Provider child is a lazy slot that may render outside the scope).
+            return provide(ListStateContext, listState, () => provide(ListBoxContext, listBoxContext, () => ListBox({})));
+        }}
+        </PopoverOverlay>
+      </span>
+      <HiddenSelect state={state} autoComplete={autoComplete}/>
+    </div>);
+}
+/** ListBox `renderEmptyState` of the preset (`renderEmptyState` content). */
+function selectEmptyState(_values, empty) {
+    return empty;
+}
+const builtCollections = new WeakMap();
+/** The select's collection (RAC CollectionBuilder): a `<ListBox items>` of `selectOption`s, built once per instance. */
+function selectListCollection(instance, items, option) {
+    let built = builtCollections.get(instance);
+    if (!built) {
+        // Built where the popover reads it (inside its ListStateContext): the build pass must not see that state.
+        built = collectionOf(() => provide(ListStateContext, null, () => provide(ListBoxContext, null, () => ListBox({ items: items, children: option }))));
+        builtCollections.set(instance, built);
+    }
+    return built();
+}
+/**
+ * A data entry → RAC collection element: an item → `ListBoxItem` (content: the `children` slot with the option
+ * render props, else the label, plus a description `Text` slot); a section → `ListBoxSection` + `Header`.
+ */
+function selectOption(entry, render, optionClass, sectionClass, headerClass) {
+    if (isSection(entry)) {
+        const section = entry;
+        const child = (item) => selectOption(item, render, optionClass, sectionClass, headerClass);
+        return (<ListBoxSection {...globalDOMProps(section)} id={section.key} class={sectionClass} aria-label={section["aria-label"]} items={section.children}>
+        {section.title ? <Header class={headerClass}>{section.title}</Header> : null}
+        <Collection items={section.children} children={child}/>
+      </ListBoxSection>);
+    }
+    const item = entry;
+    const children = render
+        ? (values) => render(() => item, {
+            isSelected: values.isSelected,
+            isFocused: values.isFocused,
+            isDisabled: untrack(values.isDisabled),
+            selectionMode: values.selectionMode,
+            selectionBehavior: values.selectionBehavior,
+        })
+        : item.description != null
+            ? // A render function: JSX made in the collection build pass is a hidden part there (renders nothing).
+                () => [<Text slot="label">{item.label}</Text>, <Text slot="description">{item.description}</Text>]
+            : item.label;
+    return (<ListBoxItem {...globalDOMProps(item)} id={item.key} class={optionClass} textValue={item.textValue ?? item.label} aria-label={item["aria-label"]} isDisabled={item.disabled} href={item.href} children={children}/>);
+}
+/** Render props of the Select (reads the state: call inside a binding). */
+function selectRenderProps(state) {
+    return {
+        isFocused: state.isFocused(),
+        isFocusVisible: state.isFocused() && state.isFocusVisible(),
+        isDisabled: isSelectDisabled(state),
+        isOpen: state.isOpen(),
+        isInvalid: displayValidation(state.validation).isInvalid,
+        isRequired: isSelectRequired(state),
+    };
+}
+/** `renderValue` snapshot of the SelectValue render props (reads the state: called inside its region). */
+function valueSnapshot(values) {
+    const items = values.selectedItems();
+    return { isPlaceholder: items.length === 0, selectedItem: items[0] ?? null, selectedItems: items, selectedText: values.selectedText(), state: values.state };
+}

package/select/intl.d.ts

@@ -0,0 +1,2 @@
+import type { LocalizedStrings } from "../_adapters/intl.js";
+export declare const strings: LocalizedStrings;

package/select/intl.js

@@ -0,0 +1,36 @@
+export const strings = {
+    "ar-AE": { selectPlaceholder: "حدد عنصرًا" },
+    "bg-BG": { selectPlaceholder: "Изберете предмет" },
+    "cs-CZ": { selectPlaceholder: "Vyberte položku" },
+    "da-DK": { selectPlaceholder: "Vælg et element" },
+    "de-DE": { selectPlaceholder: "Element wählen" },
+    "el-GR": { selectPlaceholder: "Επιλέξτε ένα αντικείμενο" },
+    "en-US": { selectPlaceholder: "Select an item" },
+    "es-ES": { selectPlaceholder: "Seleccionar un artículo" },
+    "et-EE": { selectPlaceholder: "Valige üksus" },
+    "fi-FI": { selectPlaceholder: "Valitse kohde" },
+    "fr-FR": { selectPlaceholder: "Sélectionner un élément" },
+    "he-IL": { selectPlaceholder: "בחר פריט" },
+    "hr-HR": { selectPlaceholder: "Odaberite stavku" },
+    "hu-HU": { selectPlaceholder: "Válasszon ki egy elemet" },
+    "it-IT": { selectPlaceholder: "Seleziona un elemento" },
+    "ja-JP": { selectPlaceholder: "項目を選択" },
+    "ko-KR": { selectPlaceholder: "항목 선택" },
+    "lt-LT": { selectPlaceholder: "Pasirinkite elementą" },
+    "lv-LV": { selectPlaceholder: "Izvēlēties vienumu" },
+    "nb-NO": { selectPlaceholder: "Velg et element" },
+    "nl-NL": { selectPlaceholder: "Selecteer een item" },
+    "pl-PL": { selectPlaceholder: "Wybierz element" },
+    "pt-BR": { selectPlaceholder: "Selecione um item" },
+    "pt-PT": { selectPlaceholder: "Selecione um item" },
+    "ro-RO": { selectPlaceholder: "Selectați un element" },
+    "ru-RU": { selectPlaceholder: "Выберите элемент" },
+    "sk-SK": { selectPlaceholder: "Vyberte položku" },
+    "sl-SI": { selectPlaceholder: "Izberite element" },
+    "sr-SP": { selectPlaceholder: "Izaberite stavku" },
+    "sv-SE": { selectPlaceholder: "Välj en artikel" },
+    "tr-TR": { selectPlaceholder: "Bir öğe seçin" },
+    "uk-UA": { selectPlaceholder: "Виберіть елемент" },
+    "zh-CN": { selectPlaceholder: "选择一个项目" },
+    "zh-TW": { selectPlaceholder: "選取項目" },
+};

package/select/parts.d.ts

@@ -0,0 +1,11 @@
+import { type SelectPartsProps } from "./select-parts.jsx";
+import type { SelectionMode } from "../state/select.js";
+export { SelectValue, SelectContext, SelectStateContext, SelectValueContext, selectedText } from "./select-value.jsx";
+export type { SelectValueProps, SelectValueRenderProps, SelectContextValue, ItemRenderProps } from "./select-value.jsx";
+export type { SelectPartsProps, SelectPartsRenderProps } from "./select-parts.jsx";
+export { createSelectState, setSelectValue, selectValue, selectedKeys, selectedItems, selectedItemsOf, openSelect, toggleSelect } from "../state/select.js";
+export type { SelectionMode, SelectState, ValueType, ChangeValueType } from "../state/select.js";
+export type { Key, Selection } from "../state/list.js";
+export { removeSelected, clearSelection, toggleSelected } from "./behaviour.jsx";
+/** RAC Select (parts form): builds the collection from the ListBox in its children. */
+export declare function Select<M extends SelectionMode = "single">(props: SelectPartsProps<M>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/select/parts.jsx

@@ -0,0 +1,12 @@
+// RAC Select, parts form only (react-aria-components Select.tsx), Apache-2.0, © Adobe: `@rivetjs/cdk/select/parts`.
+// Same component as `@rivetjs/cdk/select`'s `Select` given Label / Button / SelectValue / Popover / ListBox children
+// (no `items` / shared `state`), without the preset's popover overlay, header and field helpers in the module graph,
+// so a page that only uses the parts form (`@rivetjs/ui` Select / CellSelect / InlineSelect) does not prefetch them.
+import { SelectParts } from "./select-parts.jsx";
+export { SelectValue, SelectContext, SelectStateContext, SelectValueContext, selectedText } from "./select-value.jsx";
+export { createSelectState, setSelectValue, selectValue, selectedKeys, selectedItems, selectedItemsOf, openSelect, toggleSelect } from "../state/select.js";
+export { removeSelected, clearSelection, toggleSelected } from "./behaviour.jsx";
+/** RAC Select (parts form): builds the collection from the ListBox in its children. */
+export function Select(props) {
+    return <SelectParts props={props}/>;
+}

package/select/select-parts.d.ts

@@ -0,0 +1,73 @@
+import { type MaybeAccessor, type ValidationBehavior, type ValidationFunction } from "../state/form-validation.js";
+import type { Key } from "../state/list.js";
+import { type SelectionMode, type SelectStateProps } from "../state/select.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import type { DOMRenderProps } from "../utils/render.js";
+import { type ClassNameOrFunction, type ContextValue, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import { type SelectCallbacks } from "./behaviour.jsx";
+/** RAC `SelectRenderProps` of the parts form (accessors: read them inside bindings). */
+export interface SelectPartsRenderProps {
+    /**
+     * Whether the select is focused, either via a mouse or keyboard.
+     * @selector [data-focused]
+     */
+    isFocused: () => boolean;
+    /**
+     * Whether the select is keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: () => boolean;
+    /**
+     * Whether the select is disabled.
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /**
+     * Whether the select is currently open.
+     * @selector [data-open]
+     */
+    isOpen: () => boolean;
+    /**
+     * Whether the select is invalid.
+     * @selector [data-invalid]
+     */
+    isInvalid: () => boolean;
+    /**
+     * Whether the select is required.
+     * @selector [data-required]
+     */
+    isRequired: () => boolean;
+}
+/** RAC `SelectProps` (parts form: the children are the Select's parts). */
+export interface SelectPartsProps<M extends SelectionMode = "single"> extends Omit<SelectStateProps<M>, "items" | "collection" | "validationErrors" | "id" | "validationBehavior" | "isInvalid" | "validate">, SelectCallbacks, RenderProps<SelectPartsRenderProps>, DOMRenderProps<"div", SelectPartsRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     * @default 'rv-Select'
+     */
+    class?: ClassNameOrFunction<SelectPartsRenderProps>;
+    /** Temporary text that occupies the select when it is empty. @default 'Select an item' (localized) */
+    placeholder?: string;
+    /** @default "native" (or the enclosing `<Form>`'s) */
+    validationBehavior?: ValidationBehavior;
+    /** Whether the value is invalid (a value, or an accessor that stays live). */
+    isInvalid?: MaybeAccessor<boolean | undefined>;
+    validate?: ValidationFunction<M extends "single" ? Key : Key[]>;
+    /** Describes the type of autocomplete functionality the hidden select should provide. Read once at mount. */
+    autoComplete?: string;
+    /** Whether the trigger takes focus when the select mounts. Read once at mount (acts at mount only). */
+    autoFocus?: boolean;
+    /** Read once at mount (combined with the label's id into the trigger's labelling ids). */
+    "aria-label"?: string;
+    /** Read once at mount (combined with the label's id into the trigger's labelling ids). */
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Base id of the parts (`<id>-trigger`, `<id>-value`, `<id>-listbox`, …); generated when omitted. Read once at mount. */
+    id?: string;
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC Select, parts form: builds the collection from the children, then renders `SelectPartsInner`. */
+export declare function SelectParts<M extends SelectionMode = "single">(input: {
+    props: SelectPartsProps<M>;
+}): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;
+/** RAC `SelectContext` value type of the parts form (re-exported for typing slots). */
+export type SelectPartsContextValue = ContextValue<SelectPartsProps<SelectionMode>, HTMLDivElement>;