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

package/listbox/behaviour.jsx

@@ -0,0 +1,492 @@
+// Ported from react-aria listbox (packages/react-aria/src/listbox/useListBox.ts, useOption.ts,
+// useListBoxSection.ts, utils.ts), Apache-2.0, © Adobe.
+// Rivet:
+// - Names (no `use*` exports): useListBox → `listBoxProps(props, state)`, useOption → `optionProps(props, state, data)`,
+//   useListBoxSection → `listBoxSectionProps(props)`; the hooks' handlers are free functions
+//   `listBox<Event>(event, props, state)` wired on the listbox element (one delegated handler set for all options:
+//   `closestItem` finds the option and its key; the per-option `useSelectableItem` / `useHover` handlers run from
+//   there). `.tsx`: closures created here may be captured by resumed bindings.
+// - `listData` (a WeakMap keyed by state upstream) is a plain serializable `ListData` object that ListBox provides
+//   through `ListBoxDataContext`; it also carries the signals the delegated handlers write (hovered / pressed key,
+//   focus-visible, root focus) so render props and `data-*` bindings stay reactive without per-option handlers.
+// - The collection a handler acts on is rebuilt per event: `props.collection()` (a built collection: Select,
+//   ComboBox, virtualizers) or the rendered options (`listCollection(state, root)`: DOM-as-collection).
+// - `useFocusWithin` → the `focusin` / `focusout` branches; `useLabel` → `labelProps` + `aria-labelledby`.
+// - Option actions: the item's own `onAction` is dispatched to the option element as `rv-item-action` (non-bubbling;
+//   ListBoxItem listens with `on:rv-item-action` only when it has one, and marks itself `data-rv-action`), then the
+//   list's `onAction(key)`, then the bubbling `react-aria-item-action` (useSelectableItem).
+// - Option hover callbacks: `rv-hover-start` / `rv-hover-end` events on the option element (same scheme).
+// - Items marked `data-rv-long-press` (a long press interaction, `@rivetjs/cdk/morph/item`) select on press up.
+// Deviation: no drag and drop (C8), no `isVirtualized` posinset/setsize (Virtualizer lane).
+import { signal, untrack } from "@rivetjs/reactivity";
+import { listCollection, listSelectionManager } from "../collections/list-state.js";
+import { SelectionManager } from "../selection/manager.js";
+import { isFocusedKey } from "../selection/keyed.js";
+import { selectableCollectionAutoFocus, selectableCollectionBlur, selectableCollectionClearVirtualFocus, selectableCollectionFocus, selectableCollectionKeyDown, selectableCollectionKeyDownCapture, selectableCollectionMouseDown, selectableCollectionVirtualFocus, } from "../selection/selectable-collection.js";
+import { selectableListOptions } from "../selection/selectable-list.js";
+import { closestItem, selectableItemClick, selectableItemDoubleClick, selectableItemDragStart, selectableItemFocus, selectableItemKeyDown, selectableItemKeyUp, selectableItemPointerCancel, selectableItemPointerDown, selectableItemPointerUp, selectableItemStates, } from "../selection/selectable-item.js";
+import { ListKeyboardDelegate, searchCollator } from "../selection/list-keyboard-delegate.js";
+import { isFocusVisible } from "../interactions/focus-visible.jsx";
+import { read } from "../interactions/utils.js";
+import { setDataAttr } from "../utils/data-attrs.jsx";
+import { direction as elementDirection } from "../bidi/index.js";
+/** react-aria `getItemId`: the option element id. */
+export function getItemId(listId, itemKey) {
+    return `${listId}-option-${typeof itemKey === "string" ? itemKey.replace(/\s*/g, "") : "" + itemKey}`;
+}
+/** react-aria useListBox's `linkBehavior` default: "action" with replace, "override" otherwise (toggle cannot be "action"). */
+export function listBoxLinkBehavior(selectionBehavior, linkBehavior) {
+    const behavior = selectionBehavior || "toggle";
+    let link = linkBehavior || (behavior === "replace" ? "action" : "override");
+    if (behavior === "toggle" && link === "action")
+        link = "override";
+    return link;
+}
+/** Creates the shared list data (react-aria `listData.set(state, …)`). */
+export function createListData(props, id, filter, router) {
+    return {
+        router,
+        id,
+        shouldSelectOnPressUp: props.shouldSelectOnPressUp,
+        shouldFocusOnHover: props.shouldFocusOnHover,
+        shouldUseVirtualFocus: props.shouldUseVirtualFocus,
+        isVirtualized: props.isVirtualized,
+        onAction: props.onAction,
+        linkBehavior: listBoxLinkBehavior(props.selectionBehavior, props.linkBehavior),
+        UNSTABLE_itemBehavior: props.UNSTABLE_itemBehavior,
+        hoveredKey: signal(null),
+        pressedKey: signal(null),
+        focusVisible: signal(false),
+        isFocused: signal(false),
+        filter,
+    };
+}
+/**
+ * react-aria `useListBox` attributes (`listBoxProps` without handlers: wire `listBox<Event>` on the element) and
+ * `labelProps` (for a visible label element: `<span id>`). `tabIndex` and `aria-multiselectable` are accessors.
+ */
+export function listBoxProps(props, state, data) {
+    const id = data.id;
+    // Closures below capture only these (a resumed binding must not capture the props object).
+    const virtualFocus = props.shouldUseVirtualFocus;
+    const selectionState = state.selectionState;
+    const labelId = props.label != null ? id + "-label" : undefined;
+    const labelledBy = [props["aria-labelledby"], labelId].filter(Boolean).join(" ") || undefined;
+    return {
+        labelProps: labelId ? { id: labelId } : {},
+        listBoxProps: {
+            id,
+            role: "listbox",
+            "data-collection": id,
+            "aria-label": props["aria-label"],
+            "aria-labelledby": labelledBy,
+            "aria-describedby": props["aria-describedby"],
+            "aria-details": props["aria-details"],
+            "aria-orientation": props.orientation || "vertical",
+            "aria-multiselectable": selectionState.selectionMode === "multiple" ? "true" : undefined,
+            tabIndex: () => (read(virtualFocus) ? undefined : selectionState.focusedKey() == null ? 0 : -1),
+        },
+    };
+}
+/** react-aria `useListBoxSection`: props for the section's `<section>` (groupProps) and its heading. */
+export function listBoxSectionProps(props) {
+    const heading = props.heading;
+    return {
+        itemProps: { role: "presentation" },
+        headingProps: heading
+            ? {
+                // Technically, listbox cannot contain headings according to ARIA. We hide the heading from assistive
+                // technology, using role="presentation", and only use it as a visual label for the nested group.
+                id: heading,
+                role: "presentation",
+                // Prevent DOM focus from moving on mouse down when using virtual focus.
+                onMouseDown: (e) => e.preventDefault(),
+            }
+            : {},
+        groupProps: { role: "group", "aria-label": props["aria-label"], "aria-labelledby": heading || undefined },
+    };
+}
+// One manager per (selection state, key, disabled): option bindings read it several times per run (F5 step a).
+// Module-level (never captured by a resumable closure); the state object (and its maps) is dropped with the list.
+const nodeManagers = new WeakMap();
+/**
+ * A selection manager reading only one option (option bindings: no collection walk per binding). Takes plain data
+ * (a resumable binding must not capture the node instance). Memoized per selection state, key and `isDisabled`.
+ */
+export function nodeSelectionManager(state, key, isDisabled) {
+    const selectionState = state.selectionState;
+    let maps = nodeManagers.get(selectionState);
+    if (maps === undefined)
+        nodeManagers.set(selectionState, (maps = [new Map(), new Map()]));
+    const byKey = maps[isDisabled ? 1 : 0];
+    let manager = byKey.get(key);
+    if (manager === undefined)
+        byKey.set(key, (manager = new SelectionManager(new OneNodeCollection(key, !!isDisabled), selectionState)));
+    return manager;
+}
+/** The one-option collection of `nodeSelectionManager` (prototype methods: no closures per option). */
+class OneNodeCollection {
+    node;
+    size = 1;
+    constructor(key, isDisabled) {
+        this.node = { key, type: "item", props: isDisabled ? { isDisabled } : {}, childNodes: [] };
+    }
+    getItem(key) {
+        return key === this.node.key ? this.node : null;
+    }
+    getKeys() {
+        return [this.node.key];
+    }
+    getFirstKey() {
+        return this.node.key;
+    }
+    getLastKey() {
+        return this.node.key;
+    }
+    getKeyBefore() {
+        return null;
+    }
+    getKeyAfter() {
+        return null;
+    }
+    at() {
+        return this.node;
+    }
+    getChildren() {
+        return [];
+    }
+    *[Symbol.iterator]() {
+        yield this.node;
+    }
+}
+const noAction = () => { };
+/** react-aria `useOption` attributes and states (accessors: read inside bindings). */
+export function optionProps(props, state, data) {
+    // `isDisabled`: useOption's own option (overrides the manager); `itemIsDisabled`: the item node's `isDisabled`
+    // prop (RAC ListBoxItem), read by SelectionManager.isDisabled so `disabledBehavior="selection"` applies.
+    const { key, isDisabled, itemIsDisabled } = props;
+    const hasOwnAction = !!props.hasAction;
+    const options = () => ({
+        selectionManager: nodeSelectionManager(state, key, read(itemIsDisabled)),
+        key,
+        isDisabled,
+        shouldUseVirtualFocus: read(data.shouldUseVirtualFocus),
+        shouldSelectOnPressUp: data.shouldSelectOnPressUp,
+        linkBehavior: data.linkBehavior,
+        UNSTABLE_itemBehavior: data.UNSTABLE_itemBehavior,
+        onAction: data.onAction || hasOwnAction ? noAction : undefined,
+    });
+    const states = () => selectableItemStates(options());
+    const isFocused = () => states().isFocused;
+    const id = getItemId(data.id, key);
+    return {
+        optionProps: {
+            id,
+            role: "option",
+            "data-key": String(key),
+            "data-key-type": typeof key === "number" ? "number" : undefined,
+            "data-collection": data.id,
+            "aria-label": props["aria-label"],
+            "aria-labelledby": props.labelId,
+            "aria-describedby": props.descriptionId,
+            "aria-disabled": () => (states().isDisabled ? "true" : undefined),
+            "aria-selected": () => (state.selectionState.selectionMode === "none" ? undefined : states().isSelected ? "true" : "false"),
+            tabIndex: () => (read(data.shouldUseVirtualFocus) || states().isDisabled ? undefined : isFocusedKey(state.selectionState, key) ? 0 : -1),
+        },
+        isSelected: () => states().isSelected,
+        isDisabled: () => states().isDisabled,
+        isFocused,
+        isFocusVisible: () => isFocused() && data.focusVisible(),
+        isPressed: () => data.pressedKey() === key,
+        isHovered: () => data.hoveredKey() === key,
+        allowsSelection: () => states().allowsSelection,
+        hasAction: () => states().hasAction,
+    };
+}
+function rootOf(e) {
+    return e.currentTarget;
+}
+function collectionFor(props, state, root) {
+    return (props.collection ? props.collection() : listCollection(state, root));
+}
+/** react-aria useSelectableList options for this listbox (per event: manager + keyboard delegate over the current collection). */
+export function listBoxCollectionOptions(props, state, root) {
+    const collection = collectionFor(props, state, root);
+    const selectionManager = listSelectionManager(state, collection);
+    const keyboardDelegate = props.keyboardDelegate ||
+        new ListKeyboardDelegate({
+            collection,
+            ref: root,
+            collator: searchCollator(),
+            disabledKeys: selectionManager.disabledKeys,
+            disabledBehavior: selectionManager.disabledBehavior,
+            layout: props.layout || "stack",
+            orientation: props.orientation || "vertical",
+            direction: elementDirection(root),
+            layoutDelegate: state.layoutDelegate,
+        });
+    return selectableListOptions({
+        selectionManager,
+        collection,
+        disabledKeys: selectionManager.disabledKeys,
+        keyboardDelegate,
+        ref: root,
+        autoFocus: untrack(() => read(props.autoFocus)),
+        shouldFocusWrap: props.shouldFocusWrap,
+        escapeKeyBehavior: props.escapeKeyBehavior,
+        disallowTypeAhead: untrack(() => read(props.disallowTypeAhead)),
+        shouldUseVirtualFocus: untrack(() => read(props.shouldUseVirtualFocus)),
+        isVirtualized: props.isVirtualized,
+        linkBehavior: props.data.linkBehavior,
+        orientation: props.orientation,
+    });
+}
+function itemOptions(props, collection, element, key) {
+    const { data } = props;
+    const hasOwnAction = element.hasAttribute("data-rv-action");
+    const listAction = data.onAction;
+    const node = collection.selectionManager.collection.getItem(key);
+    // The option's press callbacks / onClick (react-aria collectionItemProps): ListBoxItem listens for
+    // `rv-item-press` when it has any (`data-rv-press`).
+    const press = element.hasAttribute("data-rv-press");
+    const fire = (detail) => element.dispatchEvent(new CustomEvent("rv-item-press", { detail }));
+    const nodeProps = (node?.props ?? {});
+    const itemProps = {
+        href: element.getAttribute("href") ?? nodeProps.href,
+        routerOptions: nodeProps.routerOptions,
+        ...(press
+            ? {
+                onPressStart: (ev) => fire(ev),
+                onPressUp: (ev) => fire(ev),
+                onPressEnd: (ev) => fire(ev),
+                onPress: (ev) => fire(ev),
+                onClick: (ev) => fire({ type: "click", event: ev }),
+            }
+            : {}),
+    };
+    return {
+        router: data.router,
+        itemProps,
+        selectionManager: collection.selectionManager,
+        key,
+        ref: element,
+        id: getItemId(data.id, key),
+        // Rivet: an item with a long press interaction (`data-rv-long-press`, cdk `itemMorphProps`) selects on press up, so
+        // the long press can cancel the press before it selects (mouse presses select on press down otherwise).
+        shouldSelectOnPressUp: data.shouldSelectOnPressUp || element.hasAttribute("data-rv-long-press"),
+        allowsDifferentPressOrigin: data.shouldSelectOnPressUp && data.shouldFocusOnHover,
+        isVirtualized: data.isVirtualized,
+        shouldUseVirtualFocus: untrack(() => read(data.shouldUseVirtualFocus)),
+        isDisabled: !!node?.props?.isDisabled || undefined,
+        // useOption: chain(item.props.onAction, listOnAction(key)).
+        onAction: hasOwnAction || listAction
+            ? () => {
+                if (hasOwnAction)
+                    element.dispatchEvent(new CustomEvent("rv-item-action"));
+                listAction?.(key);
+            }
+            : undefined,
+        linkBehavior: data.linkBehavior,
+        UNSTABLE_itemBehavior: data.UNSTABLE_itemBehavior,
+    };
+}
+function item(e) {
+    const root = rootOf(e);
+    const found = closestItem(root, e.target, '[role="option"][data-key]');
+    return found && found.element.getAttribute("data-collection") === root.getAttribute("data-collection") ? found : null;
+}
+function setPressed(props, root, element, key) {
+    const { data } = props;
+    const prev = untrack(data.pressedKey);
+    if (prev === key)
+        return;
+    data.pressedKey.set(key);
+    if (prev != null) {
+        const old = root.querySelector(`[data-pressed][data-collection="${data.id}"]`);
+        if (old)
+            setDataAttr(old, "data-pressed", false);
+    }
+    if (element && key != null)
+        setDataAttr(element, "data-pressed", true);
+}
+/** keydown (capture) on the listbox element: typeahead Space (useTypeSelect). */
+export function listBoxKeyDownCapture(e, props, state) {
+    selectableCollectionKeyDownCapture(listBoxCollectionOptions(props, state, rootOf(e)), e);
+}
+/** keydown on the listbox element: option Space / Enter press (useSelectableItem), then navigation (useSelectableCollection). */
+export function listBoxKeyDown(e, props, state) {
+    const root = rootOf(e);
+    const options = listBoxCollectionOptions(props, state, root);
+    props.data.focusVisible.set(true);
+    const found = item(e);
+    if (found && !e.defaultPrevented) {
+        const before = untrack(() => props.data.pressedKey());
+        selectableItemKeyDown(itemOptions(props, options, found.element, found.key), e);
+        if ((e.key === " " || e.key === "Enter") && before == null && !e.repeat && e.defaultPrevented)
+            setPressed(props, rootOf(e), found.element, found.key);
+    }
+    selectableCollectionKeyDown(options, e);
+}
+/** keyup on the listbox element: option keyboard press end. */
+export function listBoxKeyUp(e, props, state) {
+    const found = item(e);
+    if (!found)
+        return;
+    if (e.key === " " || e.key === "Enter")
+        setPressed(props, rootOf(e), null, null);
+    selectableItemKeyUp(itemOptions(props, listBoxCollectionOptions(props, state, rootOf(e)), found.element, found.key), e);
+}
+/** pointerdown on the listbox element: option press start. */
+export function listBoxPointerDown(e, props, state) {
+    props.data.focusVisible.set(false);
+    const found = item(e);
+    if (!found)
+        return;
+    const options = itemOptions(props, listBoxCollectionOptions(props, state, rootOf(e)), found.element, found.key);
+    selectableItemPointerDown(options, e);
+    const states = selectableItemStates(options);
+    if (!states.isDisabled && (states.allowsSelection || states.hasAction) && (e.button === 0 || e.pointerType !== "mouse"))
+        setPressed(props, rootOf(e), found.element, found.key);
+}
+/** pointerup on the listbox element: option press up. */
+export function listBoxPointerUp(e, props, state) {
+    setPressed(props, rootOf(e), null, null);
+    const found = item(e);
+    if (!found)
+        return;
+    selectableItemPointerUp(itemOptions(props, listBoxCollectionOptions(props, state, rootOf(e)), found.element, found.key), e);
+}
+/** pointercancel on the listbox element. */
+export function listBoxPointerCancel(e, props, state) {
+    setPressed(props, rootOf(e), null, null);
+    const found = item(e);
+    if (found)
+        selectableItemPointerCancel(itemOptions(props, listBoxCollectionOptions(props, state, rootOf(e)), found.element, found.key), e);
+}
+/** click on the listbox element: the option press (pointer and virtual clicks). */
+export function listBoxClick(e, props, state) {
+    const found = item(e);
+    setPressed(props, rootOf(e), null, null);
+    if (found)
+        selectableItemClick(itemOptions(props, listBoxCollectionOptions(props, state, rootOf(e)), found.element, found.key), e);
+}
+/** dblclick on the listbox element: secondary action with `selectionBehavior="replace"`. */
+export function listBoxDoubleClick(e, props, state) {
+    const found = item(e);
+    if (found)
+        selectableItemDoubleClick(itemOptions(props, listBoxCollectionOptions(props, state, rootOf(e)), found.element, found.key), e);
+}
+/** dragstart on the listbox element. */
+export function listBoxDragStart(e, props, state) {
+    const found = item(e);
+    if (found)
+        selectableItemDragStart(itemOptions(props, listBoxCollectionOptions(props, state, rootOf(e)), found.element, found.key), e);
+}
+/** mousedown on the listbox element (scrollbar clicks do not focus). */
+export function listBoxMouseDown(e, props, state) {
+    selectableCollectionMouseDown(listBoxCollectionOptions(props, state, rootOf(e)), e);
+}
+/** focusin on the listbox element: option focus (useSelectableItem), collection focus, focus-within, root focus ring. */
+export function listBoxFocusIn(e, props, state) {
+    const root = rootOf(e);
+    const options = listBoxCollectionOptions(props, state, root);
+    const wasFocused = untrack(() => state.selectionState.isFocused());
+    props.data.focusVisible.set(isFocusVisible());
+    const found = item(e);
+    if (found && e.target === found.element)
+        selectableItemFocus(itemOptions(props, options, found.element, found.key), e);
+    selectableCollectionFocus(options, e);
+    if (e.target === root) {
+        props.data.isFocused.set(true);
+    }
+    // useFocusWithin: only when focus enters from outside.
+    const from = e.relatedTarget;
+    if (!wasFocused || !from || !root.contains(from)) {
+        if (!from || !root.contains(from)) {
+            props.onFocus?.(e);
+            props.onFocusChange?.(true);
+        }
+    }
+}
+/** focusout on the listbox element. */
+export function listBoxFocusOut(e, props, state) {
+    const root = rootOf(e);
+    selectableCollectionBlur(listBoxCollectionOptions(props, state, root), e);
+    if (e.target === root) {
+        props.data.isFocused.set(false);
+    }
+    const to = e.relatedTarget;
+    if (!to || !root.contains(to)) {
+        props.onBlur?.(e);
+        props.onFocusChange?.(false);
+    }
+}
+/** `react-aria-focus` (virtual focus from an Autocomplete input). */
+export function listBoxVirtualFocus(e, props, state) {
+    selectableCollectionVirtualFocus(listBoxCollectionOptions(props, state, rootOf(e)), e);
+}
+/** `react-aria-clear-focus` (virtual focus cleared by an Autocomplete input). */
+export function listBoxClearVirtualFocus(e, props, state) {
+    selectableCollectionClearVirtualFocus(listBoxCollectionOptions(props, state, rootOf(e)), e);
+}
+function hoverable(props, state, root, element, key) {
+    const states = selectableItemStates(itemOptions(props, listBoxCollectionOptions(props, state, root), element, key));
+    // RAC ListBoxItem useHover: disabled when the option neither selects nor acts (drag and drop: C8).
+    return states.allowsSelection || states.hasAction;
+}
+function hoverEnd(props, root) {
+    const { data } = props;
+    const prev = untrack(data.hoveredKey);
+    if (prev == null)
+        return;
+    data.hoveredKey.set(null);
+    const el = root.querySelector(`[data-hovered][data-collection="${data.id}"]`);
+    if (el) {
+        setDataAttr(el, "data-hovered", false);
+        el.dispatchEvent(new CustomEvent("rv-hover-end", { detail: { pointerType: "mouse" } }));
+    }
+}
+/** pointerover on the listbox element: option hover start (useHover; `shouldFocusOnHover` focuses it). */
+export function listBoxPointerOver(e, props, state) {
+    if (e.pointerType === "touch")
+        return;
+    const root = rootOf(e);
+    const found = item(e);
+    const { data } = props;
+    if (found && untrack(data.hoveredKey) === found.key)
+        return;
+    hoverEnd(props, root);
+    if (!found)
+        return;
+    if (hoverable(props, state, root, found.element, found.key)) {
+        data.hoveredKey.set(found.key);
+        setDataAttr(found.element, "data-hovered", true);
+        found.element.dispatchEvent(new CustomEvent("rv-hover-start", { detail: { pointerType: e.pointerType } }));
+    }
+    // useOption: focus the option on hover (unless keyboard focus is visible).
+    if (data.shouldFocusOnHover && !isFocusVisible()) {
+        const manager = listSelectionManager(state, collectionFor(props, state, root));
+        if (!manager.isDisabled(found.key)) {
+            manager.setFocused(true);
+            manager.setFocusedKey(found.key);
+            if (!untrack(() => read(data.shouldUseVirtualFocus)) && found.element.ownerDocument.activeElement !== found.element)
+                found.element.focus({ preventScroll: true });
+        }
+    }
+}
+/** pointerout on the listbox element: option hover end when the pointer leaves it. */
+export function listBoxPointerOut(e, props, _state) {
+    const root = rootOf(e);
+    const to = e.relatedTarget;
+    const hovered = untrack(props.data.hoveredKey);
+    if (hovered == null)
+        return;
+    const el = root.querySelector(`[data-hovered][data-collection="${props.data.id}"]`);
+    if (el && to && el.contains(to))
+        return;
+    hoverEnd(props, root);
+}
+/** Auto focus once the listbox element is connected (react-aria useSelectableCollection's mount effect). */
+export function listBoxAutoFocus(root, props, state) {
+    selectableCollectionAutoFocus(listBoxCollectionOptions(props, state, root));
+}

package/listbox/index.d.ts

@@ -0,0 +1,129 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type SectionProps } from "../collections/components.jsx";
+import { type ListProps, type ListState } from "../collections/list-state.js";
+import type { Key, Orientation, SelectionBehavior, SelectionMode } from "../collections/types.js";
+import type { ContextValue, RefValue, RenderProps, SlotProps, StyleObject, StyleRenderProps } from "../slots/index.jsx";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type LoadMoreSentinelProps } from "../utils/load-more-sentinel.jsx";
+import { type MaybeAccessor } from "../interactions/utils.js";
+import type { HoverEvents, PressEvents } from "../utils/types.js";
+import { type KeyboardEvents } from "../interactions/keyboard.jsx";
+import { type AriaListBoxOptions, type ListData } from "./behaviour.jsx";
+export type { Key, Selection, SelectionMode, SelectionBehavior } from "../collections/types.js";
+export type { ListState } from "../collections/list-state.js";
+export { getItemId, type ListData } from "./behaviour.jsx";
+/** Render props of `ListBox` (accessors; `@selector` = the matching attribute). */
+export interface ListBoxRenderProps {
+    /** Whether the listbox has no items and should display its empty state. @selector [data-empty] */
+    isEmpty: () => boolean;
+    /** Whether the listbox is currently focused. @selector [data-focused] */
+    isFocused: () => boolean;
+    /** Whether the listbox is currently keyboard focused. @selector [data-focus-visible] */
+    isFocusVisible: () => boolean;
+    /** Whether the listbox is currently the active drop target (always false: drag and drop is C8). @selector [data-drop-target] */
+    isDropTarget: () => boolean;
+    /** The layout of the listbox. @selector [data-layout="stack | grid"] */
+    layout: "stack" | "grid";
+    /** The primary orientation of the items. @selector [data-orientation="vertical | horizontal"] */
+    orientation: Orientation;
+    /** State of the listbox. */
+    state: ListState;
+}
+export interface ListBoxProps<T = object> extends Omit<AriaListBoxOptions, "id" | "keyboardDelegate" | "isVirtualized" | "shouldUseVirtualFocus">, Omit<ListProps<T>, "items" | "children" | "collection" | "filter" | "suppressTextValueWarning" | "layoutDelegate" | "id">, StyleRenderProps<ListBoxRenderProps>, DOMRenderProps<"div", ListBoxRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "onFocus" | "onBlur"> {
+    /** Item objects in the collection (array or accessor). */
+    items?: Iterable<T> | (() => Iterable<T>) | undefined;
+    /** Static `ListBoxItem` / `ListBoxSection` children, or a renderer for `items`. Without children, `items` render as `ListBoxItem`s (Rivet `items` preset). */
+    children?: unknown;
+    /** RAC parity; ignored. */
+    dependencies?: readonly unknown[] | undefined;
+    /** Provides content to display when there are no items in the list. */
+    renderEmptyState?: ((props: ListBoxRenderProps) => Content) | undefined;
+    /** The element's id (also the option id prefix). */
+    id?: string | undefined;
+    ref?: RefValue<HTMLDivElement> | undefined;
+    /** The CSS class of the element (a function of the render props). @default "rv-ListBox" */
+    class?: StyleRenderProps<ListBoxRenderProps>["class"];
+    style?: StyleRenderProps<ListBoxRenderProps>["style"];
+}
+/** RAC `ListBoxContext`: props for the ListBox inside a component (Select, ComboBox, Autocomplete…), optionally per slot. */
+export declare const ListBoxContext: import("@rivetjs/reactivity").Context<ContextValue<ListBoxProps<any>, HTMLDivElement>>;
+/** RAC `ListStateContext`: a parent's list state (Select, ComboBox); ListBox renders it instead of creating one. */
+export declare const ListStateContext: import("@rivetjs/reactivity").Context<ListState<any> | null>;
+/** Rivet: the listbox's shared option data (react-aria `listData`). */
+export declare const ListBoxDataContext: import("@rivetjs/reactivity").Context<ListData | null>;
+/** A listbox displays a list of options and allows a user to select one or more of them (RAC `ListBox`). */
+export declare function ListBox<T = object>(inProps: ListBoxProps<T>): unknown;
+export interface ListBoxSectionProps<T = object> extends Omit<SectionProps<T>, `data-${string}`>, DOMRenderProps<"section", undefined>, GlobalDOMAttributes<HTMLElement> {
+    /** @default "rv-ListBoxSection" */
+    class?: string | undefined;
+    style?: StyleObject | undefined;
+    ref?: RefValue<HTMLElement> | undefined;
+}
+/** A ListBoxSection represents a section within a ListBox (RAC `ListBoxSection`). */
+export declare const ListBoxSection: <T = object>(props: ListBoxSectionProps<T>) => unknown;
+/** Render props of `ListBoxItem` (RAC `ItemRenderProps`, accessors). */
+export interface ListBoxItemRenderProps {
+    /** @selector [data-hovered] */
+    isHovered: () => boolean;
+    /** @selector [data-pressed] */
+    isPressed: () => boolean;
+    /** @selector [data-selected] */
+    isSelected: () => boolean;
+    /** @selector [data-focused] */
+    isFocused: () => boolean;
+    /** @selector [data-focus-visible] */
+    isFocusVisible: () => boolean;
+    /** @selector [data-disabled] */
+    isDisabled: () => boolean;
+    /** @selector [data-selection-mode="single | multiple"] */
+    selectionMode: SelectionMode;
+    /** The selection behavior for the collection. */
+    selectionBehavior: () => SelectionBehavior;
+    /** Drag and drop (C8): always false. @selector [data-allows-dragging] */
+    allowsDragging: boolean;
+    /** @selector [data-dragging] */
+    isDragging: () => boolean;
+    /** @selector [data-drop-target] */
+    isDropTarget: () => boolean;
+}
+export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, DOMRenderProps<"div", ListBoxItemRenderProps>, HoverEvents, PressEvents, KeyboardEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, "onClick"> {
+    /** Click handler (RAC: chained into the option's press handling). */
+    onClick?: ((e: MouseEvent) => void) | undefined;
+    /** The unique id of the item. */
+    id?: Key | undefined;
+    /** The object value that this item represents (set automatically in dynamic collections). */
+    value?: T | undefined;
+    /** A string representation of the item's contents, used for features like typeahead. */
+    textValue?: string | undefined;
+    /** An accessibility label for this item. */
+    "aria-label"?: string | undefined;
+    /** Whether the item is disabled. */
+    isDisabled?: boolean | undefined;
+    /** Handler that is called when a user performs an action on the item. */
+    onAction?: (() => void) | undefined;
+    /** A URL to link to (renders an `<a>`). */
+    href?: string | undefined;
+    hrefLang?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    download?: boolean | string | undefined;
+    ping?: string | undefined;
+    referrerPolicy?: string | undefined;
+    routerOptions?: Record<string, unknown> | undefined;
+    ref?: RefValue<HTMLElement> | undefined;
+}
+/** A ListBoxItem represents an individual option in a ListBox (RAC `ListBoxItem`). */
+export declare const ListBoxItem: <T = object>(props: ListBoxItemProps<T>) => unknown;
+export interface ListBoxLoadMoreItemProps extends Omit<LoadMoreSentinelProps, "collection" | "direction">, GlobalDOMAttributes<HTMLDivElement> {
+    /** @default "rv-ListBoxLoadingIndicator" */
+    class?: string | undefined;
+    style?: StyleObject | undefined;
+    /** The load more spinner to render when loading additional items. */
+    children?: Content;
+    /** Whether or not the loading spinner should be rendered or not (may be an accessor). */
+    isLoading?: MaybeAccessor<boolean | undefined>;
+    ref?: RefValue<HTMLDivElement> | undefined;
+}
+/** A sentinel that loads more items when scrolled into view, with an optional loading row (RAC `ListBoxLoadMoreItem`). */
+export declare const ListBoxLoadMoreItem: (props: ListBoxLoadMoreItemProps) => unknown;