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

package/grid-list/index.jsx

@@ -0,0 +1,685 @@
+// Ported from react-aria-components (src/GridList.tsx), Apache-2.0, © Adobe.
+//
+// GridList, GridListItem, GridListSection, GridListHeader, GridListLoadMoreItem + contexts: a list of
+// interactive rows (role grid) with keyboard navigation (stack / grid layout, vertical / horizontal,
+// RTL), selection, row actions, links, sections, empty state and infinite loading, on THE
+// @react-aria/gridlist port (`./behaviour.ts`).
+//
+// Rivet:
+// - B5 LIVE collection mode: the rows render in place (`data-key` on the row); the handlers read the
+//   collection back from the grid's DOM per event (`listStateView(state, shared)` →
+//   `listCollection(state)` → `domCollection`). Resumed pages need no item model; the grid and its
+//   rows resume from serializable state only (`createListState` signals + keys + plain item props).
+// - Row attributes are computed per row from a one-node collection of the row's own props
+//   (`rowCollection(spec)`) inside a `computed` (selection / focus / disabled reads are reactive);
+//   handlers rebuild the row node from the DOM collection per event (`eventNode`).
+// - Render props are accessors (`class={({ isSelected }) => (isSelected() ? "on" : "")}`). Hover /
+//   focus-visible states are written on the element by the handlers (`data-hovered`,
+//   `data-focus-visible`, `data-focus-visible-within`, `data-pressed`); signals back them only when a
+//   `class` / `style` / `children` function asks for render props.
+// - `className` → `class` (default `rv-GridList`, `rv-GridListItem`, `rv-GridListSection`,
+//   `rv-GridListHeader`, `rv-GridListLoadingIndicator`).
+// Deviation: `isEmpty` is known for `items` collections and, when `renderEmptyState` is set, for static
+//   children (built with `collectionOf`); static children without `renderEmptyState` count as non-empty.
+// Deviation: react-aria `useHasTabbableChild` (empty state with a tabbable child) is not tracked: an
+//   empty grid is always tabbable.
+// Deviation: the description / section heading ids (react-aria `useSlotId`) are always set on the
+//   server (like React SSR); in the browser they follow whether the part rendered.
+// `render` (RAC DOMRenderProps) on GridList / GridListItem / GridListSection / GridListHeader: given, the attributes object goes to `render(attrs, renderProps)` instead of the default element. Deviation: no `FocusScope`. The SharedElementTransition scope is a `SharedElementContext` provider entry.
+// Integration points: drag and drop (`dragAndDropHooks`, drop indicators, drag preview, `slot="drag"`
+//   button) — C8; `SelectableCollectionContext` filtering (Autocomplete) — C2b; `ListStateContext` — B5
+//   ListBox.
+import { computed, createContext, onCleanup, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { buildCollection, HeaderNode, ItemNode, LoaderNode, SectionNode } from "../collections/base.js";
+import { Collection, CollectionRendererContext, DefaultCollectionRenderer, collectionOf, createBranchComponent, createLeafComponent, } from "../collections/components.jsx";
+import { createListState, listSelectionManager } from "../collections/list-state.js";
+import { ListKeyboardDelegate, searchCollator } from "../selection/list-keyboard-delegate.js";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { dataBool, focusStateBlur, focusStateFocus, hoverStateEnter, hoverStateLeave, setDataAttr, } from "../utils/data-attrs.jsx";
+import { focusRingBlur, focusRingFocus } from "../focus/focus-ring.jsx";
+import { useRouter } from "../utils/links.jsx";
+import { useLocale } from "../i18n/index.js";
+import { read } from "../interactions/utils.js";
+import { Provider, DEFAULT_SLOT, contextProps, createSlotId, mergeRefValues, isSlotId, renderProps as resolveRenderProps, resumableContext, } from "../slots/index.jsx";
+import { ButtonContext } from "../button/index.jsx";
+import { CheckboxContext, CheckboxFieldContext } from "../checkbox/index.jsx";
+import { createId } from "../utils/id.js";
+import { TextContext } from "../text/index.jsx";
+import { SelectionIndicatorContext } from "../selection-indicator/context.js";
+import { SharedElementContext } from "../shared-element-transition/transition.jsx";
+import { loadMoreSentinel } from "../utils/load-more-sentinel.jsx";
+import { SelectableCollectionContext } from "../autocomplete/contexts.js";
+import { eventNode, isFn, ringOf, rowCollection, rowSpec, slotRef, withDisabled } from "./row.js";
+import { gridListBlur, gridListAutoFocus, gridListFocus, gridListHighlightDescription, gridListItemClick, gridListItemDoubleClick, gridListItemDragStart, gridListItemFocus, gridListItemKeyDown, gridListItemKeyDownCapture, gridListItemKeyUp, gridListItemPointerCancel, gridListItemPointerDown, gridListItemPointerUp, gridListItemProps, gridListKeyDown, gridListKeyDownCapture, gridListMouseDown, gridListProps, gridListSectionProps, gridListSelectionCheckboxChange, gridListSelectionCheckboxProps, listStateView, } from "./behaviour.js";
+import { hasLive, isLive, liveKeys, liveView } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+/** RAC `GridListContext`. */
+export const GridListContext = resumableContext(createContext(null, { id: "rv-gridlist" }));
+/** The GridList a part renders in (null outside a GridList, and inside a row's content). */
+export const GridListInternalContext = resumableContext(createContext(null, { id: "rv-gridlist-internal" }));
+const GRID_OWNED = ["onMouseDown", "onScroll", "style"];
+/** A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions (RAC `GridList`). */
+export function GridList(inProps) {
+    const [ownProps, ownRef] = contextProps(inProps, inProps.ref, GridListContext);
+    // RAC GridListInner: an Autocomplete passes its collection props (filter, typeahead, autoFocus, focusin).
+    const [props, ref] = contextProps(ownProps, ownRef, SelectableCollectionContext);
+    // Resumable closures / bags read locals only: a `props.x` read would capture the whole props object.
+    const { items, children, idScope, renderEmptyState, onMouseDown, onScroll, onAction, shouldSelectOnPressUp, escapeKeyBehavior } = props;
+    const { keyboardDelegate, shouldFocusWrap, UNSTABLE_focusOnEntry, autoFocus, disallowTypeAhead, filter } = props;
+    const onFocusInCtx = props.onFocusIn;
+    const ariaLabel = props["aria-label"], ariaLabelledby = props["aria-labelledby"], ariaDescribedby = props["aria-describedby"], ariaDetails = props["aria-details"];
+    const layout = props.layout ?? "stack", orientation = props.orientation ?? "vertical";
+    const keyboardNavigationBehavior = layout === "grid" ? "tab" : (props.keyboardNavigationBehavior ?? "arrow");
+    const renderer = useContext(CollectionRendererContext);
+    // Resumable: the lazy collection slot captures `customRenderer` (undefined for the default renderer,
+    // whose functions are not serializable; the default is a module import in the symbol).
+    const customRenderer = renderer === DefaultCollectionRenderer ? undefined : renderer;
+    const sharedElements = {};
+    const isVirtualized = !!renderer.isVirtualized, layoutDelegate = renderer.layoutDelegate;
+    const { locale, direction } = useLocale();
+    const state = createListState({
+        id: props.id,
+        selectionMode: props.selectionMode,
+        selectionBehavior: props.selectionBehavior,
+        // Live props: a controlled `selectedKeys={keys()}` stays live (accessor; never written).
+        selectedKeys: liveKeys(props, "selectedKeys"),
+        defaultSelectedKeys: props.defaultSelectedKeys,
+        onSelectionChange: props.onSelectionChange,
+        disabledKeys: props.disabledKeys,
+        disabledBehavior: props.disabledBehavior,
+        disallowEmptySelection: props.disallowEmptySelection,
+        allowDuplicateSelectionEvents: props.allowDuplicateSelectionEvents,
+        layoutDelegate,
+    });
+    const shared = {
+        id: state.id,
+        onAction,
+        linkBehavior: "action",
+        keyboardNavigationBehavior,
+        shouldSelectOnPressUp,
+    };
+    const descriptionId = state.id + "-description";
+    const options = {
+        id: state.id,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        "aria-details": ariaDetails,
+        autoFocus: read(autoFocus),
+        onAction,
+        shouldSelectOnPressUp,
+        keyboardNavigationBehavior,
+        escapeKeyBehavior,
+        isVirtualized,
+        disallowTypeAhead: read(disallowTypeAhead),
+        keyboardDelegate,
+        layoutDelegate,
+        shouldFocusWrap,
+        UNSTABLE_focusOnEntry,
+        direction,
+        locale,
+        orientation,
+        descriptionId,
+    };
+    // Per event: the DOM collection + a ListKeyboardDelegate for the layout (RAC GridListInner).
+    const view = () => listStateView(state, shared);
+    const eventOptions = (v, el) => ({
+        ...options,
+        autoFocus: read(autoFocus),
+        disallowTypeAhead: read(disallowTypeAhead),
+        keyboardDelegate: options.keyboardDelegate ??
+            new ListKeyboardDelegate({
+                collection: v.collection,
+                collator: searchCollator(locale),
+                ref: el,
+                disabledKeys: v.disabledKeys,
+                disabledBehavior: v.selectionManager.disabledBehavior,
+                layoutDelegate: options.layoutDelegate,
+                layout,
+                orientation,
+                direction,
+            }),
+    });
+    const content = () => (<Collection items={items} idScope={idScope}>
+      {children}
+    </Collection>);
+    const itemsOf = items;
+    const isEmpty = itemsOf != null
+        ? () => {
+            const list = typeof itemsOf === "function" ? itemsOf() : itemsOf;
+            for (const _ of list)
+                return false;
+            return true;
+        }
+        : renderEmptyState
+            ? (() => {
+                const built = collectionOf(content);
+                return () => built().size === 0;
+            })()
+            : () => false;
+    const version = itemsOf != null ? (typeof itemsOf === "function" ? itemsOf : () => itemsOf) : () => null;
+    const wantsStates = isFn(props.class) || isFn(props.style) || !!renderEmptyState;
+    const focused = wantsStates ? signal(false) : undefined;
+    const focusVisible = wantsStates ? signal(false) : undefined;
+    const ring = { states: wantsStates ? { isFocused: focused, isFocusVisible: focusVisible } : undefined };
+    const values = {
+        isEmpty,
+        isFocused: () => !!focused?.(),
+        isFocusVisible: () => !!focusVisible?.(),
+        isDropTarget: () => false,
+        layout,
+        orientation,
+        state,
+    };
+    const rp = untrack(() => resolveRenderProps({ class: props.class, style: props.style, values, defaultClassName: "rv-GridList" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    // Grid attributes (reactive): the render view only needs the size and the focused key.
+    const gridAttrs = computed(() => {
+        const empty = isEmpty();
+        const collection = buildCollection([]);
+        const v = {
+            collection: { ...collection, size: empty ? 0 : 1 },
+            selectionManager: listSelectionManager(state, collection),
+            disabledKeys: state.disabledKeys,
+            list: shared,
+        };
+        return gridListProps(options, v).gridProps;
+    });
+    const highlight = () => {
+        const collection = buildCollection([]);
+        return gridListHighlightDescription(options, {
+            collection,
+            selectionManager: listSelectionManager(state, collection),
+            disabledKeys: state.disabledKeys,
+            list: shared,
+        });
+    };
+    const internal = { state, shared, locale, direction, keyboardNavigationBehavior, isVirtualized, version, filter };
+    const dom = globalDOMProps(props, GRID_OWNED);
+    const slot = props.slot || undefined;
+    const gridEl = createRef();
+    const rootRef = mergeRefValues(ref, gridEl);
+    // react-aria useSelectableCollection autoFocus mount effect (retried until the grid has items).
+    if (autoFocus !== undefined)
+        clientEffect(() => {
+            const el = gridEl();
+            version();
+            if (!el || !read(autoFocus))
+                return;
+            untrack(() => {
+                const v = view();
+                gridListAutoFocus({ ...eventOptions(v, el), ref: el }, v);
+            });
+        });
+    const gridDescription = (<Show when={() => highlight() != null}>
+      {() => (<div id={descriptionId} hidden>
+          {highlight()}
+        </div>)}
+    </Show>);
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref: rootRef,
+            id: state.id,
+            role: "grid",
+            slot,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "aria-label": () => gridAttrs()["aria-label"],
+            "aria-labelledby": () => gridAttrs()["aria-labelledby"],
+            "aria-describedby": () => gridAttrs()["aria-describedby"],
+            "aria-details": () => gridAttrs()["aria-details"],
+            "aria-multiselectable": () => gridAttrs()["aria-multiselectable"],
+            "aria-rowcount": () => gridAttrs()["aria-rowcount"],
+            "aria-colcount": () => gridAttrs()["aria-colcount"],
+            tabindex: () => gridAttrs().tabIndex,
+            "data-empty": () => dataBool(isEmpty()),
+            "data-layout": layout,
+            "data-orientation": orientation,
+            onKeyDownCapture: (e) => {
+                const v = view();
+                gridListKeyDownCapture(e, eventOptions(v, e.currentTarget), v);
+            },
+            onKeyDown: (e) => {
+                const v = view();
+                gridListKeyDown(e, eventOptions(v, e.currentTarget), v);
+            },
+            onFocusIn: (e) => {
+                const v = view();
+                gridListFocus(e, eventOptions(v, e.currentTarget), v);
+                onFocusInCtx?.(e);
+            },
+            onFocusOut: (e) => {
+                const v = view();
+                gridListBlur(e, eventOptions(v, e.currentTarget), v);
+            },
+            onMouseDown: (e) => {
+                const v = view();
+                gridListMouseDown(e, eventOptions(v, e.currentTarget), v);
+                onMouseDown?.(e);
+            },
+            onFocus: (e) => focusStateFocus(ring, e),
+            onBlur: (e) => focusStateBlur(ring, e),
+            onScroll: (e) => onScroll?.(e),
+            children: () => [
+                <Provider values={[
+                        [GridListInternalContext, internal],
+                        [SharedElementContext, sharedElements],
+                    ]}>
+          {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: null, content, idScope })}
+        </Provider>,
+                <Show when={isEmpty}>
+          {() => renderEmptyState ? (<div role="row" aria-rowindex={1} style={{ display: "contents" }}>
+                <div role="gridcell" style={{ display: "contents" }}>
+                  {renderEmptyState(values)}
+                </div>
+              </div>) : null}
+        </Show>,
+            ],
+        };
+        return (<>
+        {props.render(attrs, values)}
+        {gridDescription}
+      </>);
+    }
+    return (<>
+      <div {...dom} ref={rootRef} id={state.id} role="grid" slot={slot} class={rp.class()} style={rp.style()} aria-label={gridAttrs()["aria-label"]} aria-labelledby={gridAttrs()["aria-labelledby"]} aria-describedby={gridAttrs()["aria-describedby"]} aria-details={gridAttrs()["aria-details"]} aria-multiselectable={gridAttrs()["aria-multiselectable"]} aria-rowcount={gridAttrs()["aria-rowcount"]} aria-colcount={gridAttrs()["aria-colcount"]} tabIndex={gridAttrs().tabIndex} data-empty={dataBool(isEmpty())} data-layout={layout} data-orientation={orientation} onKeyDownCapture={(e) => {
+            const v = view();
+            gridListKeyDownCapture(e, eventOptions(v, e.currentTarget), v);
+        }} onKeyDown={(e) => {
+            const v = view();
+            gridListKeyDown(e, eventOptions(v, e.currentTarget), v);
+        }} onFocusIn={(e) => {
+            const v = view();
+            gridListFocus(e, eventOptions(v, e.currentTarget), v);
+            onFocusInCtx?.(e);
+        }} onFocusOut={(e) => {
+            const v = view();
+            gridListBlur(e, eventOptions(v, e.currentTarget), v);
+        }} onMouseDown={(e) => {
+            const v = view();
+            gridListMouseDown(e, eventOptions(v, e.currentTarget), v);
+            onMouseDown?.(e);
+        }} onFocus={(e) => focusStateFocus(ring, e)} onBlur={(e) => focusStateBlur(ring, e)} onScroll={onScroll ? (e) => onScroll(e) : undefined}>
+        <Provider values={[
+            [GridListInternalContext, internal],
+            // RAC: the items share one SharedElementTransition scope (a SelectionIndicator animates between them).
+            [SharedElementContext, sharedElements],
+        ]}>
+          {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: null, content, idScope })}
+        </Provider>
+        <Show when={isEmpty}>
+          {() => renderEmptyState ? (<div role="row" aria-rowindex={1} style={{ display: "contents" }}>
+                <div role="gridcell" style={{ display: "contents" }}>
+                  {renderEmptyState(values)}
+                </div>
+              </div>) : null}
+        </Show>
+      </div>
+      <Show when={() => highlight() != null}>
+        {() => (<div id={descriptionId} hidden>
+            {highlight()}
+          </div>)}
+      </Show>
+    </>);
+}
+const ROW_OWNED = ["onPointerDown", "onPointerUp", "onPointerCancel", "onClick", "onDblClick", "onPointerEnter", "onPointerLeave", "style", "id"];
+/** A GridListItem represents an individual item in a GridList (RAC `GridListItem`). */
+export const GridListItem = /*#__PURE__*/ createLeafComponent(ItemNode, function GridListItem(props, forwardedRef, item) {
+    const ctx = useContext(GridListInternalContext);
+    if (!ctx)
+        throw new Error("GridListItem must be rendered inside a GridList.");
+    const { state, shared, locale, direction, keyboardNavigationBehavior, isVirtualized } = ctx;
+    const key = item.key;
+    const spec = rowSpec(key, item, props);
+    // Live `isDisabled` (LIVE-SWEEP round 2): the row's spec with the current value (read in the computed / at event time).
+    const disabledView = isLive(props, "isDisabled") ? liveView(props, ["isDisabled"]) : undefined;
+    const specNow = () => (disabledView ? withDisabled(spec, !!read(disabledView.isDisabled)) : spec);
+    const descriptionSlot = createSlotId();
+    const checkboxId = createId();
+    const router = useRouter();
+    // Resumable closures / bags read locals only (a `props.x` read captures the whole props object).
+    const { focusMode, allowsArrowNavigation, onHoverStart, onHoverEnd, onHoverChange } = props;
+    const itemOptions = (node) => ({
+        node,
+        isVirtualized,
+        focusMode,
+        allowsArrowNavigation,
+        descriptionId: slotRef(descriptionSlot),
+        router,
+        locale,
+        direction,
+    });
+    const aria = computed(() => {
+        const collection = rowCollection(specNow());
+        const node = collection.getItem(key);
+        const v = {
+            collection,
+            selectionManager: listSelectionManager(state, collection),
+            disabledKeys: state.disabledKeys,
+            list: shared,
+        };
+        const result = gridListItemProps(itemOptions(node), v);
+        const checkbox = gridListSelectionCheckboxProps({ key, locale, id: checkboxId }, v).checkboxProps;
+        return {
+            ...result,
+            checkbox,
+            selectionMode: v.selectionManager.selectionMode,
+            selectionBehavior: v.selectionManager.selectionBehavior,
+            disabledBehavior: v.selectionManager.disabledBehavior,
+        };
+    });
+    const view = () => listStateView(state, shared);
+    // Resumable: a local const arrow called from the inline JSX handlers (no factory-made closures).
+    const fire = (handler, e) => {
+        const v = view();
+        handler(e, itemOptions(eventNode(v, specNow())), v);
+    };
+    const wantsStates = isFn(props.class) || isFn(props.style) || isFn(props.children);
+    const hovered = wantsStates ? signal(false) : undefined;
+    const pressed = wantsStates ? signal(false) : undefined;
+    const focusVisible = wantsStates ? signal(false) : undefined;
+    const focusVisibleWithin = wantsStates ? signal(false) : undefined;
+    const hover = {
+        // WebKit bug 214609: hover only when the row is selectable / actionable (or draggable).
+        isDisabled: () => !aria().allowsSelection && !aria().hasAction,
+        onHoverStart,
+        onHoverEnd,
+        onHoverChange,
+        states: wantsStates ? { isHovered: hovered } : undefined,
+    };
+    // RA usePress state (not reactive in selectable-item): mirror it on the row after press events.
+    const syncPressed = (e) => {
+        const el = e.currentTarget;
+        const v = view();
+        const isPressed = gridListItemProps({ ...itemOptions(eventNode(v, specNow())), ref: el }, v).isPressed;
+        setDataAttr(el, "data-pressed", isPressed);
+        pressed?.set(isPressed);
+    };
+    const values = {
+        id: key,
+        isHovered: () => !!hovered?.(),
+        isPressed: () => !!pressed?.(),
+        isSelected: () => aria().isSelected,
+        isFocused: () => aria().isFocused,
+        isFocusVisible: () => !!focusVisible?.(),
+        isFocusVisibleWithin: () => !!focusVisibleWithin?.(),
+        isDisabled: () => aria().isDisabled,
+        selectionMode: untrack(() => aria().selectionMode),
+        selectionBehavior: () => aria().selectionBehavior,
+        allowsDragging: false,
+        isDragging: () => false,
+        isDropTarget: () => false,
+        state,
+    };
+    const rp = untrack(() => resolveRenderProps({ class: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-GridListItem" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const row = (name) => aria().rowProps[name];
+    const dom = globalDOMProps(props, ROW_OWNED);
+    const { onPointerDown, onPointerUp, onPointerCancel, onDblClick, onPointerEnter, onPointerLeave } = props;
+    const arrowCapture = keyboardNavigationBehavior === "arrow" || !!allowsArrowNavigation;
+    // RA useGridListSelectionCheckbox: the "selection" slot of CheckboxContext / CheckboxFieldContext.
+    const checkboxProps = {
+        id: checkboxId,
+        "aria-label": untrack(() => aria().checkbox["aria-label"]),
+        "aria-labelledby": untrack(() => aria().checkbox["aria-labelledby"]),
+        isSelected: () => aria().isSelected,
+        isDisabled: () => aria().checkbox.isDisabled,
+        onChange: (isSelected) => gridListSelectionCheckboxChange(isSelected, { key, locale }, view()),
+    };
+    // RAC `{isDisabled: true}` when disabledBehavior "all" + disabled row, as an accessor: a tracked read in the Provider
+    // values would re-create the row content (and replace a pressed Button) on every focus / selection change.
+    const buttonProps = { isDisabled: () => aria().disabledBehavior === "all" && aria().isDisabled };
+    const renderRow = () => {
+        if (props.render) {
+            const attrs = {
+                ...dom,
+                ref: forwardedRef,
+                id: () => row("id"),
+                role: "row",
+                class: () => rp.class(),
+                style: () => rp.style(),
+                "data-key": () => row("data-key"),
+                "data-key-type": () => row("data-key-type"),
+                "data-collection": state.id,
+                "data-text-value": item.textValue || undefined,
+                tabindex: () => row("tabIndex"),
+                "aria-label": () => row("aria-label"),
+                "aria-labelledby": () => row("aria-labelledby"),
+                "aria-selected": () => (row("aria-selected") === undefined ? undefined : String(row("aria-selected"))),
+                "aria-disabled": () => (row("aria-disabled") ? "true" : undefined),
+                "aria-rowindex": () => row("aria-rowindex"),
+                "data-href": () => row("data-href"),
+                "data-target": () => row("data-target"),
+                "data-rel": () => row("data-rel"),
+                "data-download": () => row("data-download"),
+                "data-ping": () => row("data-ping"),
+                "data-referrer-policy": () => row("data-referrer-policy"),
+                "data-selected": () => dataBool(aria().isSelected),
+                "data-disabled": () => dataBool(aria().isDisabled),
+                "data-focused": () => dataBool(aria().isFocused),
+                "data-selection-mode": () => (aria().selectionMode === "none" ? undefined : aria().selectionMode),
+                onKeyDownCapture: (e) => {
+                    if (arrowCapture)
+                        fire(gridListItemKeyDownCapture, e);
+                },
+                onKeyDown: (e) => {
+                    fire(gridListItemKeyDown, e);
+                    syncPressed(e);
+                },
+                onKeyUp: (e) => {
+                    fire(gridListItemKeyUp, e);
+                    syncPressed(e);
+                },
+                onFocusIn: (e) => {
+                    fire(gridListItemFocus, e);
+                    const el = e.currentTarget;
+                    focusRingFocus(ringOf(el, true, "data-focus-visible-within", focusVisibleWithin), e);
+                },
+                onFocusOut: (e) => focusRingBlur(ringOf(e.currentTarget, true, "data-focus-visible-within", focusVisibleWithin), e),
+                onFocus: (e) => focusRingFocus(ringOf(e.currentTarget, false, "data-focus-visible", focusVisible), e),
+                onBlur: (e) => focusRingBlur(ringOf(e.currentTarget, false, "data-focus-visible", focusVisible), e),
+                onPointerDown: (e) => {
+                    fire(gridListItemPointerDown, e);
+                    syncPressed(e);
+                    onPointerDown?.(e);
+                },
+                onPointerUp: (e) => {
+                    fire(gridListItemPointerUp, e);
+                    syncPressed(e);
+                    onPointerUp?.(e);
+                },
+                onPointerCancel: (e) => {
+                    fire(gridListItemPointerCancel, e);
+                    syncPressed(e);
+                    onPointerCancel?.(e);
+                },
+                onClick: (e) => {
+                    fire(gridListItemClick, e);
+                    syncPressed(e);
+                },
+                onDblClick: (e) => {
+                    fire(gridListItemDoubleClick, e);
+                    onDblClick?.(e);
+                },
+                onDragStart: (e) => fire(gridListItemDragStart, e),
+                onPointerEnter: (e) => {
+                    hoverStateEnter(hover, e);
+                    onPointerEnter?.(e);
+                },
+                onPointerLeave: (e) => {
+                    hoverStateLeave(hover, e);
+                    onPointerLeave?.(e);
+                },
+                children: () => (<div role="gridcell" aria-colindex={1} style={{ display: "contents" }}>
+              <Provider values={[
+                        [CheckboxContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
+                        [CheckboxFieldContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
+                        [ButtonContext, { slots: { [DEFAULT_SLOT]: buttonProps } }],
+                        [TextContext, { slots: { [DEFAULT_SLOT]: {}, description: { id: descriptionSlot } } }],
+                        [CollectionRendererContext, DefaultCollectionRenderer],
+                        [GridListInternalContext, null],
+                        [SelectionIndicatorContext, { isSelected: () => aria().isSelected }],
+                    ]}>
+                {rp.children()}
+              </Provider>
+            </div>),
+            };
+            return props.render(attrs, values);
+        }
+        return (<div {...dom} ref={forwardedRef} id={row("id")} role="row" class={rp.class()} style={rp.style()} data-key={row("data-key")} data-key-type={row("data-key-type")} data-collection={state.id} data-text-value={item.textValue || undefined} tabIndex={row("tabIndex")} aria-label={row("aria-label")} aria-labelledby={row("aria-labelledby")} aria-selected={row("aria-selected") === undefined ? undefined : String(row("aria-selected"))} aria-disabled={row("aria-disabled") ? "true" : undefined} aria-rowindex={row("aria-rowindex")} data-href={row("data-href")} data-target={row("data-target")} data-rel={row("data-rel")} data-download={row("data-download")} data-ping={row("data-ping")} data-referrer-policy={row("data-referrer-policy")} data-selected={dataBool(aria().isSelected)} data-disabled={dataBool(aria().isDisabled)} data-focused={dataBool(aria().isFocused)} data-selection-mode={aria().selectionMode === "none" ? undefined : aria().selectionMode} onKeyDownCapture={arrowCapture ? (e) => fire(gridListItemKeyDownCapture, e) : undefined} onKeyDown={(e) => {
+                fire(gridListItemKeyDown, e);
+                syncPressed(e);
+            }} onKeyUp={(e) => {
+                fire(gridListItemKeyUp, e);
+                syncPressed(e);
+            }} onFocusIn={(e) => {
+                fire(gridListItemFocus, e);
+                const el = e.currentTarget;
+                focusRingFocus(ringOf(el, true, "data-focus-visible-within", focusVisibleWithin), e);
+            }} onFocusOut={(e) => focusRingBlur(ringOf(e.currentTarget, true, "data-focus-visible-within", focusVisibleWithin), e)} onFocus={(e) => focusRingFocus(ringOf(e.currentTarget, false, "data-focus-visible", focusVisible), e)} onBlur={(e) => focusRingBlur(ringOf(e.currentTarget, false, "data-focus-visible", focusVisible), e)} onPointerDown={(e) => {
+                fire(gridListItemPointerDown, e);
+                syncPressed(e);
+                onPointerDown?.(e);
+            }} onPointerUp={(e) => {
+                fire(gridListItemPointerUp, e);
+                syncPressed(e);
+                onPointerUp?.(e);
+            }} onPointerCancel={(e) => {
+                fire(gridListItemPointerCancel, e);
+                syncPressed(e);
+                onPointerCancel?.(e);
+            }} onClick={(e) => {
+                fire(gridListItemClick, e);
+                syncPressed(e);
+            }} onDblClick={(e) => {
+                fire(gridListItemDoubleClick, e);
+                onDblClick?.(e);
+            }} onDragStart={(e) => fire(gridListItemDragStart, e)} onPointerEnter={(e) => {
+                hoverStateEnter(hover, e);
+                onPointerEnter?.(e);
+            }} onPointerLeave={(e) => {
+                hoverStateLeave(hover, e);
+                onPointerLeave?.(e);
+            }}>
+          <div role="gridcell" aria-colindex={1} style={{ display: "contents" }}>
+            <Provider values={[
+                [CheckboxContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
+                [CheckboxFieldContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
+                [ButtonContext, { slots: { [DEFAULT_SLOT]: buttonProps } }],
+                [TextContext, { slots: { [DEFAULT_SLOT]: {}, description: { id: descriptionSlot } } }],
+                [CollectionRendererContext, DefaultCollectionRenderer],
+                [GridListInternalContext, null],
+                [SelectionIndicatorContext, { isSelected: () => aria().isSelected }],
+            ]}>
+              {rp.children()}
+            </Provider>
+          </div>
+        </div>);
+    };
+    const filter = ctx.filter;
+    if (!filter)
+        return renderRow();
+    // Autocomplete filtering (live mode: per row; RAC UNSTABLE_useFilteredListState).
+    const visible = () => filter(spec.textValue ?? "", rowCollection(spec).getItem(key));
+    // Server: render right away, inside the collection row's resume region (runtime gap: a function child renders after it closed).
+    return <Show when={visible}>{typeof document === "undefined" ? (visible() ? renderRow() : null) : renderRow}</Show>;
+});
+/** A row shown while more items load + the sentinel that calls `onLoadMore` (RAC `GridListLoadMoreItem`). */
+export const GridListLoadMoreItem = /*#__PURE__*/ createLeafComponent(LoaderNode, function GridListLoadingIndicator(props) {
+    const ctx = useContext(GridListInternalContext);
+    const { isLoading, onLoadMore, scrollOffset, children } = props;
+    const sentinel = createRef();
+    loadMoreSentinel({ collection: (ctx?.version ?? (() => null)), onLoadMore, scrollOffset }, sentinel);
+    const className = props.class ?? "rv-GridListLoadingIndicator";
+    const style = props.style;
+    const dom = globalDOMProps(props, ["style"]);
+    const isVirtualized = !!ctx?.isVirtualized;
+    return (<>
+      {/* Always render the sentinel. The onus is on the user for styling with flex + gap. */}
+      <div style={{ position: "relative", width: 0, height: 0 }} inert>
+        <div data-testid="loadMoreSentinel" ref={sentinel} style={{ position: "absolute", height: "1px", width: "1px" }}/>
+      </div>
+      <Show when={() => !!read(isLoading) && children != null}>
+        {() => (<div {...dom} role="row" class={className} style={style}>
+            <div aria-colindex={isVirtualized ? 1 : undefined} role="gridcell">
+              {children}
+            </div>
+          </div>)}
+      </Show>
+    </>);
+});
+/** RAC `GridListHeaderContext`: the header row's props (role row) provided by the section. */
+export const GridListHeaderContext = resumableContext(createContext({}, { id: "rv-gridlist-header" }));
+/** RAC `GridListHeaderInnerContext`: the row header cell's props (`id`, role rowheader). */
+export const GridListHeaderInnerContext = resumableContext(createContext(null, { id: "rv-gridlist-header-inner" }));
+/** A GridListSection represents a section within a GridList (RAC `GridListSection`). */
+export const GridListSection = /*#__PURE__*/ createBranchComponent(SectionNode, function GridListSection(props, forwardedRef, item) {
+    const { CollectionBranch } = useContext(CollectionRendererContext);
+    const heading = createSlotId();
+    const ariaLabel = props["aria-label"];
+    const aria = gridListSectionProps({ "aria-label": ariaLabel, headingId: heading.id });
+    const labelledBy = () => (ariaLabel ? undefined : slotRef(heading));
+    const dom = globalDOMProps(props, ["style", "id"]);
+    const className = props.class ?? "rv-GridListSection";
+    const style = props.style;
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref: forwardedRef,
+            role: aria.rowGroupProps.role,
+            class: className,
+            style,
+            "data-type": "section",
+            "data-key": String(item.key),
+            "data-key-type": typeof item.key === "number" ? "number" : undefined,
+            "aria-label": ariaLabel,
+            "aria-labelledby": () => labelledBy(),
+            children: () => (<Provider values={[
+                    [GridListHeaderContext, { ...aria.rowProps }],
+                    [GridListHeaderInnerContext, { ...aria.rowHeaderProps, id: heading }],
+                ]}>
+            {CollectionBranch({ collection: null, parent: item })}
+          </Provider>),
+        };
+        return props.render(attrs, undefined);
+    }
+    return (<div {...dom} ref={forwardedRef} role={aria.rowGroupProps.role} class={className} style={style} data-type="section" data-key={String(item.key)} data-key-type={typeof item.key === "number" ? "number" : undefined} aria-label={ariaLabel} aria-labelledby={labelledBy()}>
+        <Provider values={[
+            [GridListHeaderContext, { ...aria.rowProps }],
+            [GridListHeaderInnerContext, { ...aria.rowHeaderProps, id: heading }],
+        ]}>
+          {CollectionBranch({ collection: null, parent: item })}
+        </Provider>
+      </div>);
+});
+/** The header of a GridListSection (RAC `GridListHeader`). */
+export const GridListHeader = /*#__PURE__*/ createLeafComponent(HeaderNode, function Header(inProps, forwardedRef) {
+    const [props, ref] = contextProps(inProps, forwardedRef, GridListHeaderContext);
+    const inner = useContext(GridListHeaderInnerContext);
+    const innerId = inner?.id;
+    if (isSlotId(innerId)) {
+        innerId.rendered.set(true);
+        onCleanup(() => innerId.rendered.set(false));
+    }
+    const { children, class: className, style, role, ...rest } = props;
+    const dom = globalDOMProps(rest, ["style"]);
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref: ref,
+            id: rest.id,
+            role: role,
+            class: className ?? "rv-GridListHeader",
+            style: style,
+            "data-type": "header",
+            children: () => (<div id={isSlotId(innerId) ? innerId.id : innerId} role={inner?.role} style={{ display: "contents" }}>
+            {children}
+          </div>),
+        }, undefined);
+    return (<div {...dom} ref={ref} id={rest.id} role={role} class={className ?? "rv-GridListHeader"} style={style} data-type="header">
+      <div id={isSlotId(innerId) ? innerId.id : innerId} role={inner?.role} style={{ display: "contents" }}>
+        {children}
+      </div>
+    </div>);
+});