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

package/grid-list/behaviour.js

@@ -0,0 +1,598 @@
+// Ported from @react-aria/gridlist (useGridList.ts, useGridListItem.ts, useGridListSection.ts,
+// useGridListSelectionCheckbox.ts, utils.ts), Apache-2.0, © Adobe.
+//
+// Rivet:
+// - react-aria returns props bags with closures; here every hook is split into an attribute
+//   function (reads state: bind its values as accessors) and handler bodies `(props, state, event)`
+//   wired as explicit `onKeyDown` / `onFocusIn` / … attributes so they resume. Naming (wave-2
+//   convention): `useGridList` → `gridListProps`, `useGridListItem` → `gridListItemProps`,
+//   `useGridListSection` → `gridListSectionProps`, `useGridListSelectionCheckbox` →
+//   `gridListSelectionCheckboxProps`; handlers `gridList<Event>` / `gridListItem<Event>(event, props, state)`.
+// - `state` is a react-stately-shaped VIEW (`GridListStateLike`: collection + SelectionManager +
+//   disabledKeys, plus expandedKeys / toggleKey for trees) rebuilt per event from serializable state
+//   with `listStateView(listState)` / `treeStateView(treeState)`. Never capture a view in a resumable
+//   closure: capture the serializable state and rebuild.
+// - react-aria shares `id` / `onAction` / `linkBehavior` / … between useGridList and its items
+//   through a WeakMap keyed by the state object (`listMap`). Views are rebuilt per event, so the
+//   shared data rides on the view (`state.list`, produced by `gridListShared(props)`); `listMap` is
+//   kept as the fallback for long-lived state objects.
+// - React's post-render focus effects run synchronously at the end of the selectable-collection
+//   handlers (`../selection/selectable-collection.ts` `syncFocus`); focusMode "child" moves focus from
+//   the row to its first tabbable child in the row's focus handler (react-aria: same, after a frame).
+// - useHighlightSelectionDescription / useGridSelectionAnnouncement / useGridSelectionCheckbox come
+//   from the @react-aria/grid port (`../grid/behaviour.ts`): the grid's `aria-describedby` points at
+//   `descriptionId` (render the hidden description element: `gridListHighlightDescription`), and the
+//   selection announcement runs at the end of every handler that may change the selection.
+import { untrack } from "@rivetjs/reactivity";
+import { listCollection, listSelectionManager, resetFocusedKey } from "../collections/list-state.js";
+import { toggleTreeKey, treeCollection, treeSelectionManager } from "../collections/tree-state.js";
+import { selectableListBlur, selectableListFocus, selectableListKeyDown, selectableListKeyDownCapture, selectableListMouseDown, selectableListOptions, } from "../selection/selectable-list.js";
+import { collectionTabIndex, selectableCollectionAutoFocus } from "../selection/selectable-collection.js";
+import { selectableItemAttrs, selectableItemClick, selectableItemDoubleClick, selectableItemDragStart, selectableItemFocus, selectableItemKeyDown, selectableItemKeyUp, selectableItemPointerCancel, selectableItemPointerDown, selectableItemPointerUp, selectableItemStates, } from "../selection/selectable-item.js";
+import { refElement } from "../selection/utils.js";
+import { focusSafely, getFocusableTreeWalker } from "../focus/index.js";
+import { getItemElement } from "../_adapters/dom-collection.js";
+import { isFocusVisible } from "../interactions/focus-visible.jsx";
+import { getActiveElement, getEventTarget, getOwnerDocument, getScrollParent, isFocusWithin, nodeContains, scrollIntoViewport, cssEscape, } from "../utils/dom.js";
+import { syntheticLinkAttrs } from "../utils/links.jsx";
+import { direction as elementDirection } from "../bidi/index.js";
+import { useId } from "../utils/id.js";
+import { gridSelectionAnnouncement, gridSelectionCheckboxChange, gridSelectionCheckboxProps, highlightSelectionDescription, highlightSelectionDescriptionProps, } from "../grid/behaviour.js";
+/** react-aria `listMap`: shared gridlist data per (long-lived) state object. */
+export const listMap = new WeakMap();
+function sharedOf(state) {
+    const shared = state.list ?? listMap.get(state);
+    if (!shared)
+        throw new Error("Unknown list");
+    return shared;
+}
+/** The row id of `key` (`<list id>-<normalized key>`). */
+export function getRowId(state, key) {
+    const { id } = state.list ?? listMap.get(state) ?? {};
+    if (!id)
+        throw new Error("Unknown list");
+    return `${id}-${normalizeKey(key)}`;
+}
+/** Strips whitespace from string keys (ids must not contain spaces). */
+export function normalizeKey(key) {
+    if (typeof key === "string")
+        return key.replace(/\s*/g, "");
+    return "" + key;
+}
+/**
+ * A gridlist view over a serializable `@rivetjs/cdk/collections/list-state` state (reads state).
+ * `root`: the grid element of a live collection (default: the element with id `state.id`).
+ */
+export function listStateView(state, list, root) {
+    const collection = listCollection(state, root);
+    return { collection, selectionManager: listSelectionManager(state, collection), disabledKeys: state.disabledKeys, list };
+}
+/** A gridlist view over a serializable `@rivetjs/cdk/collections/tree-state` state (reads state). */
+export function treeStateView(state, list) {
+    const collection = treeCollection(state);
+    return {
+        collection,
+        selectionManager: treeSelectionManager(state, collection),
+        disabledKeys: state.disabledKeys,
+        expandedKeys: state.expandedKeys(),
+        toggleKey: (key) => toggleTreeKey(state, key),
+        list,
+    };
+}
+/** The data `useGridList` shares with its items. Call once per list (component body); pass to the views. */
+export function gridListShared(props) {
+    return {
+        id: useId(props.id),
+        onAction: props.onAction,
+        linkBehavior: props.linkBehavior ?? "action",
+        keyboardNavigationBehavior: props.keyboardNavigationBehavior ?? "arrow",
+        shouldSelectOnPressUp: props.shouldSelectOnPressUp,
+    };
+}
+function selectableOptions(props, state) {
+    return {
+        selectionManager: state.selectionManager,
+        collection: state.collection,
+        disabledKeys: state.disabledKeys,
+        ref: props.ref,
+        keyboardDelegate: props.keyboardDelegate,
+        layoutDelegate: props.layoutDelegate,
+        isVirtualized: props.isVirtualized,
+        selectOnFocus: state.selectionManager.selectionBehavior === "replace",
+        shouldFocusWrap: props.shouldFocusWrap,
+        linkBehavior: props.linkBehavior ?? "action",
+        disallowTypeAhead: props.disallowTypeAhead,
+        autoFocus: props.autoFocus,
+        escapeKeyBehavior: props.escapeKeyBehavior ?? "clearSelection",
+        UNSTABLE_focusOnEntry: props.UNSTABLE_focusOnEntry,
+        direction: props.direction,
+        locale: props.locale,
+        orientation: props.orientation,
+    };
+}
+/**
+ * Attributes of the grid element: role, id, aria-multiselectable, labelling, tabIndex (roving; an
+ * empty grid is tabbable unless it holds a tabbable child), virtualized row / col counts. Reads
+ * state: bind values as accessors. `hasTabbableChild` = react-aria `useHasTabbableChild` (empty state).
+ */
+function gridListAttrs(props, state, hasTabbableChild = false) {
+    const shared = sharedOf(state);
+    const manager = state.selectionManager;
+    const attrs = {
+        role: "grid",
+        id: shared.id,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": props["aria-describedby"],
+        "aria-details": props["aria-details"],
+        "aria-multiselectable": manager.selectionMode === "multiple" ? "true" : undefined,
+        // If the collection is empty, make sure the grid is tabbable unless there is a child tabbable element.
+        tabIndex: state.collection.size === 0 ? (hasTabbableChild ? -1 : 0) : collectionTabIndex(manager),
+    };
+    const description = highlightSelectionDescriptionProps({
+        selectionManager: manager,
+        hasItemActions: !!shared.onAction,
+        locale: props.locale,
+        descriptionId: props.descriptionId,
+    })["aria-describedby"];
+    if (description)
+        attrs["aria-describedby"] = [props["aria-describedby"], description].filter(Boolean).join(" ");
+    if (props.isVirtualized) {
+        attrs["aria-rowcount"] = state.collection.size;
+        attrs["aria-colcount"] = 1;
+    }
+    return attrs;
+}
+/** Runs a handler body, then announces the selection change (react-aria `useGridSelectionAnnouncement` effect). */
+function announced(state, props, body) {
+    const manager = state.selectionManager;
+    const last = untrack(() => manager.rawSelection);
+    const result = body();
+    gridSelectionAnnouncement({ locale: props.locale, getRowText: props.getRowText }, { collection: state.collection, selectionManager: manager }, last);
+    return result;
+}
+/**
+ * Text of the hidden highlight-selection description element (react-aria
+ * `useHighlightSelectionDescription`; render `<div id={descriptionId} hidden>{text}</div>` when set).
+ */
+export function gridListHighlightDescription(props, state) {
+    return highlightSelectionDescription({ selectionManager: state.selectionManager, hasItemActions: !!sharedOf(state).onAction, locale: props.locale });
+}
+/** keydown (capture) on the grid element. */
+export const gridListKeyDownCapture = (e, props, state) => state.collection.size === 0 ? false : selectableListKeyDownCapture(selectableOptions(props, state), e);
+/** keydown on the grid element (row navigation, typeahead, select all, Escape, Tab out). */
+export const gridListKeyDown = (e, props, state) => state.collection.size === 0 ? false : announced(state, props, () => selectableListKeyDown(selectableOptions(props, state), e));
+/** focusin on the grid element. */
+export const gridListFocus = (e, props, state) => {
+    if (state.collection.size !== 0)
+        selectableListFocus(selectableOptions(props, state), e);
+};
+/** focusout on the grid element. */
+export const gridListBlur = (e, props, state) => {
+    if (state.collection.size !== 0)
+        selectableListBlur(selectableOptions(props, state), e);
+};
+/** mousedown on the grid element. */
+export const gridListMouseDown = (e, props, state) => {
+    if (state.collection.size !== 0)
+        selectableListMouseDown(selectableOptions(props, state), e);
+};
+/**
+ * react-aria's `autoFocus` mount effect (useSelectableCollection): call once the grid element
+ * (`props.ref`) is connected, e.g. from a `clientEffect`; returns false while it still waits for items.
+ */
+export function gridListAutoFocus(props, state) {
+    return selectableCollectionAutoFocus(selectableListOptions(selectableOptions(props, state))) && state.collection.size > 0;
+}
+/**
+ * Provides the behavior and accessibility implementation for a list component with interactive
+ * children (react-aria `useGridList` → `gridListProps`). Returns the grid element's attributes
+ * (bind values as accessors); wire the `gridList<Event>(event, props, state)` handlers on the same
+ * element. `state.list` (or `listMap`) must carry the `gridListShared(props)` data.
+ */
+export function gridListProps(props, state, hasTabbableChild = false) {
+    return { gridProps: gridListAttrs(props, state, hasTabbableChild) };
+}
+const EXPANSION_KEYS = { expand: { ltr: "ArrowRight", rtl: "ArrowLeft" }, collapse: { ltr: "ArrowLeft", rtl: "ArrowRight" } };
+const rowOf = (props, e) => refElement(props.ref) ?? (e?.currentTarget || null);
+const dirOf = (props, row) => props.direction ?? (row ? elementDirection(row) : "ltr");
+function getDirectChildren(parent, collection) {
+    // A tree built from hooks may lack firstChildKey: start at the first child and walk siblings.
+    const children = collection.getChildren?.(parent.key);
+    const childArray = children ? Array.from(children) : [];
+    let node = childArray.length > 0 ? childArray[0] : null;
+    const siblings = [];
+    while (node) {
+        siblings.push(node);
+        node = node.nextKey != null ? collection.getItem(node.nextKey) : null;
+    }
+    return siblings;
+}
+// Rivet: tree set sizes per committed collection (upstream recounts the siblings for every row: O(n²) per
+// tree mount, O(n) per row re-run). Entry = [item count, first child is an item]; key TOP = top level.
+// An uncommitted BaseCollection (`isFrozen === false`) may still change: not cached.
+const TOP = Symbol();
+const setSizes = new WeakMap();
+function setSizesOf(collection) {
+    if (collection.isFrozen === false)
+        return undefined;
+    let sizes = setSizes.get(collection);
+    if (sizes === undefined)
+        setSizes.set(collection, (sizes = new Map()));
+    return sizes;
+}
+function deriveItem(props, state) {
+    const { node } = props;
+    const shared = sharedOf(state);
+    let onAction = shared.onAction;
+    let hasChildRows = props.hasChildItems;
+    const hasLink = state.selectionManager.isLink(node.key);
+    let treeAttrs = {};
+    let toggle;
+    if (node != null && state.expandedKeys) {
+        // TODO (upstream): node.hasChildNodes is always true because of the row's content node.
+        const children = state.collection.getChildren?.(node.key);
+        hasChildRows = hasChildRows || [...(children ?? [])].length > 1;
+        if (onAction == null && !hasLink && state.selectionManager.selectionMode === "none" && hasChildRows)
+            toggle = () => state.toggleKey?.(node.key);
+        const isExpanded = hasChildRows ? state.expandedKeys.has(node.key) : undefined;
+        let setSize = 1;
+        let index = node.index;
+        const sizes = setSizesOf(state.collection);
+        if (node.level >= 0 && node.parentKey != null) {
+            const parent = state.collection.getItem(node.parentKey);
+            if (parent) {
+                let entry = sizes?.get(parent.key);
+                if (entry === undefined) {
+                    const siblings = getDirectChildren(parent, state.collection);
+                    entry = [siblings.filter((row) => row.type === "item").length, siblings[0]?.type === "item"];
+                    sizes?.set(parent.key, entry);
+                }
+                setSize = entry[0];
+                if (index > 0 && !entry[1])
+                    index -= 1; // the parent item's content node
+            }
+        }
+        else {
+            let entry = sizes?.get(TOP);
+            if (entry === undefined) {
+                entry = [[...state.collection].filter((row) => row.level === 0 && row.type === "item").length, true];
+                sizes?.set(TOP, entry);
+            }
+            setSize = entry[0];
+        }
+        treeAttrs = { "aria-expanded": isExpanded, "aria-level": node.level + 1, "aria-posinset": index + 1, "aria-setsize": setSize };
+    }
+    const nodeAction = node.props?.onAction;
+    const listAction = onAction ? () => onAction(node.key) : toggle;
+    const action = nodeAction || listAction ? () => (nodeAction?.(), listAction?.()) : undefined;
+    return { shared, hasChildRows, onAction: action, treeAttrs };
+}
+function itemOptions(props, state, d, e) {
+    const row = rowOf(props, e);
+    return {
+        selectionManager: state.selectionManager,
+        key: props.node.key,
+        ref: row,
+        isVirtualized: props.isVirtualized,
+        shouldSelectOnPressUp: props.shouldSelectOnPressUp || d.shared.shouldSelectOnPressUp,
+        onAction: d.onAction,
+        focus: () => focusRow(props, row),
+        linkBehavior: d.shared.linkBehavior,
+        router: props.router,
+        // RA collectionItemProps: the item's own onPress* / onClick / link props (the node's props).
+        itemProps: props.node.props,
+    };
+}
+// The key of the item at the time its row was last focused (a virtualizer reuses DOM nodes).
+const keyWhenFocused = new WeakMap();
+/** Focus the row (focusMode "child": its first tabbable child) — react-aria's item `focus()`. */
+export function focusRow(props, row) {
+    if (row === null)
+        return;
+    if (props.focusMode === "child") {
+        // Focus already on a focusable child within the row: don't shift it.
+        if (isFocusWithin(row) && row !== getActiveElement(getOwnerDocument(row)))
+            return;
+        const walker = getFocusableTreeWalker(row, { tabbable: true });
+        const focusable = walker.firstChild();
+        if (focusable) {
+            focusSafely(focusable);
+            scrollIntoViewport(focusable, { containingElement: getScrollParent(focusable) });
+            return;
+        }
+    }
+    // Don't shift focus to the row if the active element is within the row already (a row button).
+    const last = keyWhenFocused.get(row);
+    if ((last != null && props.node.key !== last) || !isFocusWithin(row))
+        focusSafely(row);
+}
+/** Item state flags (react-aria `useGridListItem` states). Reads state: use in bindings. */
+function gridListItemStates(props, state) {
+    return selectableItemStates(itemOptions(props, state, deriveItem(props, state)));
+}
+/**
+ * Attributes of the row element: role row, id, aria-selected / -disabled / -label / -labelledby,
+ * roving tabIndex, data-key, synthetic link `data-href…` when the row has an action, tree
+ * aria-expanded / -level / -posinset / -setsize, virtualized aria-rowindex. Reads state.
+ */
+function gridListItemAttrs(props, state) {
+    const { node } = props;
+    const d = deriveItem(props, state);
+    const manager = state.selectionManager;
+    const options = itemOptions(props, state, d);
+    const states = selectableItemStates(options);
+    const rowId = getRowId(state, node.key);
+    const label = node["aria-label"] || node.textValue || undefined;
+    const attrs = {
+        ...selectableItemAttrs(options),
+        ...(states.hasAction ? syntheticLinkAttrs((node.props ?? {}), props.router) : {}),
+        role: "row",
+        "aria-label": label,
+        "aria-selected": manager.canSelectItem(node.key) ? manager.isSelected(node.key) : undefined,
+        "aria-disabled": manager.isDisabled(node.key) || undefined,
+        "aria-labelledby": props.descriptionId && label ? `${rowId} ${props.descriptionId}` : undefined,
+        id: rowId,
+    };
+    if (props.focusMode === "child" && props.allowsArrowNavigation && d.shared.keyboardNavigationBehavior === "tab")
+        attrs.tabIndex = -1;
+    if (props.isVirtualized) {
+        const { collection } = state;
+        const nodes = [...collection];
+        attrs["aria-rowindex"] = nodes.find((n) => n.type === "section")
+            ? [...collection.getKeys()].filter((key) => collection.getItem(key)?.type !== "section").findIndex((key) => key === node.key) + 1
+            : node.index + 1;
+    }
+    return { ...attrs, ...d.treeAttrs };
+}
+/** Attributes of the grid cell inside the row. */
+const gridListCellAttrs = () => ({ role: "gridcell", "aria-colindex": 1 });
+function handleTreeExpansionKeys(e, state, node, hasChildRows, direction, activeElement, row, allowsArrowNavigation) {
+    if (!state.expandedKeys || (!allowsArrowNavigation && activeElement !== row))
+        return false;
+    const manager = state.selectionManager;
+    const focusedKey = untrack(() => manager.focusedKey);
+    if (e.key === EXPANSION_KEYS.expand[direction] && focusedKey === node.key && hasChildRows && !state.expandedKeys.has(node.key)) {
+        state.toggleKey?.(node.key);
+        e.stopPropagation();
+        return true;
+    }
+    else if (e.key === EXPANSION_KEYS.collapse[direction] && focusedKey === node.key) {
+        // If the item is collapsible, collapse it; else move to the parent.
+        if (hasChildRows && state.expandedKeys.has(node.key)) {
+            state.toggleKey?.(node.key);
+            e.stopPropagation();
+            return true;
+        }
+        else if (!state.expandedKeys.has(node.key) && node.parentKey != null && state.collection.getItem(node.parentKey)?.type === "item") {
+            manager.setFocusedKey(node.parentKey);
+            // RA useSelectableItem focuses the row when focusedKey changes; here the grid handlers never see this
+            // (propagation stopped), so move DOM focus to the parent row directly.
+            const grid = row?.closest('[role="treegrid"],[role="grid"]');
+            const collectionId = row?.getAttribute("data-collection");
+            const parentRow = collectionId
+                ? grid?.querySelector(`[data-collection="${cssEscape(collectionId)}"][data-key="${cssEscape(String(node.parentKey))}"]`)
+                : getItemElement(grid, node.parentKey);
+            if (parentRow)
+                focusSafely(parentRow);
+            e.stopPropagation();
+            return true;
+        }
+    }
+    return false;
+}
+function lastOf(walker) {
+    let next = null;
+    let last;
+    do {
+        last = walker.lastChild();
+        if (last)
+            next = last;
+    } while (last);
+    return next;
+}
+/**
+ * keydown (capture) on the row: Left / Right move between focusable children (arrow
+ * keyboardNavigationBehavior, RTL aware) and back to the row; tree expand / collapse; Up / Down
+ * from a child are re-dispatched from the row's parent so row navigation handles them. Wire it
+ * when `keyboardNavigationBehavior === "arrow"` or `allowsArrowNavigation`.
+ */
+export function gridListItemKeyDownCapture(e, props, state) {
+    const row = rowOf(props, e);
+    const activeElement = row ? getActiveElement(getOwnerDocument(row)) : null;
+    if (!nodeContains(e.currentTarget, getEventTarget(e)) || !row || !activeElement)
+        return;
+    const d = deriveItem(props, state);
+    const direction = dirOf(props, row);
+    const walker = getFocusableTreeWalker(row);
+    walker.currentNode = activeElement;
+    if (handleTreeExpansionKeys(e, state, props.node, d.hasChildRows, direction, activeElement, row, props.allowsArrowNavigation))
+        return;
+    const arrow = d.shared.keyboardNavigationBehavior === "arrow";
+    const moveWithin = (forwardInRtl, backToRowDir) => {
+        const focusable = (forwardInRtl ? walker.nextNode() : walker.previousNode());
+        e.preventDefault();
+        e.stopPropagation();
+        if (focusable) {
+            focusSafely(focusable);
+            scrollIntoViewport(focusable, { containingElement: getScrollParent(row) });
+        }
+        else if (direction === backToRowDir) {
+            // No next focusable child: return focus to the row.
+            focusSafely(row);
+            scrollIntoViewport(row, { containingElement: getScrollParent(row) });
+        }
+        else {
+            walker.currentNode = row;
+            const lastElement = lastOf(walker);
+            if (lastElement) {
+                focusSafely(lastElement);
+                scrollIntoViewport(lastElement, { containingElement: getScrollParent(row) });
+            }
+        }
+    };
+    switch (e.key) {
+        case "ArrowLeft":
+            if (arrow)
+                moveWithin(direction === "rtl", "rtl");
+            break;
+        case "ArrowRight":
+            if (arrow)
+                moveWithin(direction !== "rtl", "ltr");
+            break;
+        case "ArrowUp":
+        case "ArrowDown":
+            // Keep arrow keys from row children (menu buttons): re-dispatch from a higher parent so the
+            // event still bubbles to the selectable collection.
+            if (!e.altKey && nodeContains(row, getEventTarget(e))) {
+                e.stopPropagation();
+                e.preventDefault();
+                row.parentElement?.dispatchEvent(new KeyboardEvent(e.type, e));
+            }
+            break;
+    }
+}
+/**
+ * keydown on the row: Tab navigation between children ("tab" behavior), tree expansion keys, then
+ * the selectable item's Space / Enter press unless propagation was stopped.
+ */
+export function gridListItemKeyDown(e, props, state) {
+    const row = rowOf(props, e);
+    const activeElement = row ? getActiveElement(getOwnerDocument(row)) : null;
+    const d = deriveItem(props, state);
+    let stopped = false;
+    const stop = () => {
+        stopped = true;
+        e.stopPropagation();
+    };
+    if (nodeContains(e.currentTarget, getEventTarget(e)) && row && activeElement) {
+        if (d.shared.keyboardNavigationBehavior === "tab") {
+            // Events from the item's children never reach grid-level interactions (row navigation,
+            // typeahead); Tab still propagates so the collection can tab out of the gridlist.
+            if (getEventTarget(e) !== row && e.key !== "Tab")
+                return void stop();
+            const direction = dirOf(props, row);
+            const before = e.cancelBubble;
+            if (handleTreeExpansionKeys(e, state, props.node, d.hasChildRows, direction, activeElement, row, props.allowsArrowNavigation))
+                return;
+            stopped = e.cancelBubble && !before;
+        }
+        if (e.key === "Tab" && d.shared.keyboardNavigationBehavior === "tab") {
+            // Another focusable element in this item: let the browser handle Tab.
+            const walker = getFocusableTreeWalker(row, { tabbable: true });
+            walker.currentNode = activeElement;
+            const next = e.shiftKey ? walker.previousNode() : walker.nextNode();
+            if (next)
+                stop();
+        }
+    }
+    if (!stopped && !e.cancelBubble)
+        announced(state, props, () => selectableItemKeyDown(itemOptions(props, state, d, e), e));
+}
+/** keyup on the row (keyboard press end). */
+export const gridListItemKeyUp = (e, props, state) => announced(state, props, () => selectableItemKeyUp(itemOptions(props, state, deriveItem(props, state), e), e));
+/**
+ * focusin on the row: a focused child makes the row the focused key (unless focus is visible:
+ * keyboard users return to the previously focused row); focusMode "child" moves focus from the row
+ * to its first tabbable child.
+ */
+export function gridListItemFocus(e, props, state) {
+    const row = rowOf(props, e);
+    if (!row)
+        return;
+    keyWhenFocused.set(row, props.node.key);
+    if (getEventTarget(e) !== row) {
+        if (!isFocusVisible())
+            state.selectionManager.setFocusedKey(props.node.key);
+        return;
+    }
+    selectableItemFocus(itemOptions(props, state, deriveItem(props, state), e), e);
+    // Focus came back to the row from a child in focusMode "child": don't trap it.
+    if (props.focusMode === "child" && e.relatedTarget && nodeContains(row, e.relatedTarget))
+        return;
+    if (props.focusMode === "child")
+        requestAnimationFrame(() => {
+            if (getActiveElement(getOwnerDocument(row)) === row)
+                focusRow(props, row);
+        });
+}
+/** pointerdown on the row. */
+export const gridListItemPointerDown = (e, props, state) => announced(state, props, () => selectableItemPointerDown(itemOptions(props, state, deriveItem(props, state), e), e));
+/** pointerup on the row. */
+export const gridListItemPointerUp = (e, props, state) => announced(state, props, () => selectableItemPointerUp(itemOptions(props, state, deriveItem(props, state), e), e));
+/** pointercancel / pointerleave on the row. */
+export const gridListItemPointerCancel = (e, props, state) => selectableItemPointerCancel(itemOptions(props, state, deriveItem(props, state), e), e);
+/** click on the row (the press). */
+export const gridListItemClick = (e, props, state) => announced(state, props, () => selectableItemClick(itemOptions(props, state, deriveItem(props, state), e), e));
+/** dblclick on the row (secondary action with selectionBehavior "replace"). */
+export const gridListItemDoubleClick = (e, props, state) => announced(state, props, () => selectableItemDoubleClick(itemOptions(props, state, deriveItem(props, state), e), e));
+/** dragstart on the row. */
+export const gridListItemDragStart = (e, props, state) => selectableItemDragStart(itemOptions(props, state, deriveItem(props, state), e), e);
+/**
+ * Provides the behavior and accessibility implementation for a row in a grid list (react-aria
+ * `useGridListItem` → `gridListItemProps`): row / grid cell / description attributes + item states
+ * (reads state: bind as accessors). Wire `gridListItem<Event>(event, props, state)` on the row;
+ * `gridListItemKeyDownCapture` only when `keyboardNavigationBehavior === "arrow"` or `allowsArrowNavigation`.
+ */
+export function gridListItemProps(props, state) {
+    return {
+        rowProps: gridListItemAttrs(props, state),
+        gridCellProps: gridListCellAttrs(),
+        descriptionProps: { id: props.descriptionId },
+        ...gridListItemStates(props, state),
+    };
+}
+/** Provides the behavior and accessibility implementation for a section in a grid list (react-aria `useGridListSection` → `gridListSectionProps`). */
+export function gridListSectionProps(props, _state) {
+    const { "aria-label": ariaLabel, headingId } = props;
+    // useLabels: aria-labelledby = heading (+ own id when also aria-label'd — react-aria has no id here).
+    const labelledBy = headingId ? (ariaLabel ? undefined : headingId) : undefined;
+    return {
+        rowProps: { role: "row" },
+        rowHeaderProps: { id: headingId, role: "rowheader" },
+        rowGroupProps: { role: "rowgroup", "aria-label": ariaLabel, "aria-labelledby": labelledBy },
+    };
+}
+/**
+ * Provides the behavior and accessibility implementation for a selection checkbox in a grid list
+ * (react-aria `useGridListSelectionCheckbox` → `gridListSelectionCheckboxProps`). Reads state.
+ */
+export function gridListSelectionCheckboxProps(props, state) {
+    const checkboxProps = gridSelectionCheckboxProps(props, state);
+    return { checkboxProps: { ...checkboxProps, "aria-labelledby": `${checkboxProps.id} ${getRowId(state, props.key)}` } };
+}
+/** The selection checkbox `onChange`: toggles the row's selection (announced). */
+export function gridListSelectionCheckboxChange(isSelected, props, state) {
+    announced(state, props, () => gridSelectionCheckboxChange(isSelected, props, state));
+}
+/**
+ * After the rendered items changed (live mode): react-stately `useFocusedKeyReset` (a removed focused
+ * item hands the focused key to the next / previous enabled item of the previous collection) + the
+ * react-aria focus effects that follow it (useSelectableItem focuses the new focused row;
+ * useSelectableCollection focuses the collection when the focused key became null). `previous` is the
+ * snapshot returned by the last call; call from a client effect after the DOM updated.
+ */
+export function gridListItemsChanged(state, root, previous) {
+    const current = listCollection(state, root);
+    if (!previous)
+        return current;
+    const manager = listSelectionManager(state, current);
+    const before = untrack(() => manager.focusedKey);
+    resetFocusedKey(state, previous, current);
+    const after = untrack(() => manager.focusedKey);
+    // Chromium fires focusout when the focused row is removed (React does not see it), which clears
+    // `isFocused`: focus that fell back to the body still counts as being in the collection.
+    const doc = root.ownerDocument;
+    const active = doc.activeElement;
+    const wasFocused = untrack(() => manager.isFocused) || active == null || active === doc.body;
+    if (after !== before && wasFocused) {
+        if (after != null) {
+            const row = getItemElement(root, after);
+            if (row && !isFocusWithin(row))
+                focusSafely(row);
+        }
+        else if (before != null)
+            focusSafely(root);
+    }
+    return current;
+}