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

package/tree/index.jsx

@@ -0,0 +1,837 @@
+// Ported from react-aria-components (src/Tree.tsx: Tree, TreeItem, TreeItemContent, TreeLoadMoreItem,
+// TreeContext, TreeStateContext, TreeItemContentContext), Apache-2.0, © Adobe.
+//
+// A tree: nested, expandable rows with keyboard navigation and selection (a single column treegrid).
+// Rivet:
+// - The collection is built from the content (`buildCollectionFrom` in a local computed, B5 build mode) into a `TreeCollection`
+//   (`./collection.ts`), flattened by the expanded keys (`withExpandedKeys`) in a computed, and
+//   rendered by `CollectionRendererContext.CollectionRoot` keyed by row key: expanding / collapsing
+//   adds / removes rows in place, resumed rows are adopted.
+// - State: `@rivetjs/cdk/collections/tree-state` `createTreeState` (signals + plain data, resumable),
+//   provided as `TreeStateContext`; the gridlist view (collection + SelectionManager) is rebuilt per
+//   event / binding (`treeStateView`). Handlers are inline arrows calling `tree/behaviour` +
+//   `grid-list/behaviour` free functions with the row KEY (never a node / collection instance).
+// - Render props are accessors (`class={({ isExpanded }) => (isExpanded() ? "open" : "")}`);
+//   `data-hovered` / `data-focused` / `data-focus-visible` written by the handlers, `data-*` values `"true"`.
+// - `expandedKeys` / `selectedKeys`: a plain value (controlled) or a Signal (two-way).
+// - `class` = RAC `className` (defaults `rv-Tree`, `rv-TreeItem`, `rv-TreeLoader`).
+// - Inside a `<CollectionVirtualizer layout={ListLayout}>` the flattened collection is the virtualizer's source: the
+//   treegrid element is the scroll container (scroll forwarded to the renderer), the focused row is persisted.
+// `render` (RAC DOMRenderProps) on Tree / TreeItem / TreeSection (`<div>`) and TreeHeader (via GridListHeader): given, the attributes object goes to `render(attrs, renderProps)`;
+//   the aria prop objects become one accessor per key (object-literal accessors over `gridAttr` / `row`: only literal arrows resume), the row content is the `children` accessor.
+// Deviations:
+// - Drag and drop (`dragAndDropHooks`, drop indicators, drag button slot) not wired yet (DnD lane).
+// - `TreeItem` row `data-pressed` follows the row's pointer / key handlers (a press released outside
+//   the row clears on the next row event).
+// - No `FocusScope` wrapper (RAC uses it only for its focus manager; nothing here reads it).
+// - The selection checkbox id derives from the row id (`<row id>-checkbox`; react-aria `useId()`), like
+//   the chevron's (`tree/behaviour.tsx`): byte-stable server HTML.
+import { computed, createContext, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { For, Provider as ContextProvider, Show, clientEffect, ref as elementRef } from "@rivetjs/runtime/dom";
+import { Collection, CollectionRendererContext, DefaultCollectionRenderer, buildCollectionFrom, createBranchComponent, createLeafComponent, renderNodeAt, } from "../collections/components.jsx";
+import { createTreeState, resetTreeFocusedKey } from "../collections/tree-state.js";
+import { gridListBlur, gridListFocus, gridListHighlightDescription, gridListItemClick, gridListItemDoubleClick, gridListItemDragStart, gridListItemFocus, gridListItemKeyDown, gridListItemKeyDownCapture, gridListItemKeyUp, gridListItemPointerCancel, gridListItemPointerDown, gridListItemPointerUp, gridListKeyDown, gridListKeyDownCapture, gridListMouseDown, gridListSelectionCheckboxChange, gridListSelectionCheckboxProps, gridListSectionProps, gridListShared, treeStateView, } from "../grid-list/behaviour.js";
+import { ButtonContext } from "../button/index.jsx";
+import { CheckboxContext, CheckboxFieldContext } from "../checkbox/index.jsx";
+import { SelectionIndicatorContext } from "../selection-indicator/context.js";
+import { SharedElementContext } from "../shared-element-transition/transition.jsx";
+import { DEFAULT_SLOT, Provider, contextProps, createSlotId, slotIdRef, mergeRefValues, renderProps, resumableContext, } from "../slots/index.jsx";
+import { dataBool, focusStateBlur, focusStateFocus, hoverStateEnter, hoverStateLeave } from "../utils/data-attrs.jsx";
+import { useFocusRing } from "../focus/focus-ring.jsx";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { getScrollParent, nodeContains, scrollIntoView } from "../utils/dom.js";
+import { getFocusableTreeWalker } from "../focus/index.js";
+import {} from "../utils/render.js";
+import { loadMoreSentinel } from "../utils/load-more-sentinel.jsx";
+import { useRouter } from "../utils/links.jsx";
+import { GridListHeader, GridListHeaderContext, GridListHeaderInnerContext } from "../grid-list/index.jsx";
+import { TreeCollection } from "./collection.js";
+import { InternalNavigationTreeContext, NavigationTreeItemLinkContext, NavigationTreeItemStateContext, hasSelectedDescendant } from "./navigation-context.jsx";
+import { treeItemExpandPress, treeItemProps, treeProps } from "./behaviour.jsx";
+import { hasLive, liveKeys } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+export { TreeCollection } from "./collection.js";
+const read = (value) => (typeof value === "function" ? value() : value);
+/** The flattened collection a Tree passed to its state (`TreeState.collection`). */
+const flatOf = (state) => {
+    const c = state.collection;
+    return (typeof c === "function" ? c() : c);
+};
+/** Plain data (primitive, array, plain object): a value a For row item can carry through resume by identity. */
+const isPlainData = (value) => {
+    if (value === null || typeof value !== "object")
+        return typeof value !== "function" && typeof value !== "symbol";
+    const proto = Object.getPrototypeOf(value);
+    return Array.isArray(value) || proto === Object.prototype || proto === null;
+};
+/** Stand-in node of a row whose key just left the collection (its bindings run once more before disposal). */
+const removedNode = (key) => ({
+    type: "item",
+    key,
+    value: null,
+    level: 0,
+    index: 0,
+    parentKey: null,
+    hasChildNodes: false,
+    childNodes: [],
+    props: {},
+    textValue: "",
+    rendered: null,
+});
+/** A two-way Signal (callable with `.set`), as `collections/tree-state.ts`. */
+const isSignal = (value) => typeof value === "function" && typeof value.set === "function";
+const isDev = () => typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+/** RAC `TreeContext`: props for the Trees inside a component, optionally per `slot`. */
+export const TreeContext = resumableContext(createContext(null, { id: "rv-tree" }));
+/** RAC `TreeStateContext`: the state of the enclosing Tree. */
+export const TreeStateContext = resumableContext(createContext(null, { id: "rv-tree-state" }));
+const TreeInternalContext = resumableContext(createContext(null, { id: "rv-tree-internal" }));
+/** Global DOM events Tree handles itself; the user's run from its own handler. */
+const TREE_OWNED = ["onMouseDown", "onScroll", "style"];
+/**
+ * A tree provides users with a way to navigate nested hierarchical information, with support for
+ * keyboard navigation and selection.
+ */
+export function Tree(inProps) {
+    const [props, userRef] = contextProps(inProps, inProps.ref, TreeContext);
+    const items = props.items;
+    const children = props.children;
+    const idScope = props.idScope;
+    // `computed(buildCollectionFrom(…))` (= B5 `collectionOf`) written out here so the compiler records it as a
+    // resumable computed (`_rComputed`): the accessor `collectionOf` returns is a plain computed and does not
+    // serialize when a resumable closure captures it.
+    const base = computed(() => buildCollectionFrom(() => Collection({ items, children, idScope }), () => new TreeCollection()));
+    // Props read into locals first: a resumable closure / call reading `props.x` captures the whole props object.
+    const selectionMode = props.selectionMode ?? "none";
+    const selectionBehavior = props.selectionBehavior;
+    // Live props: a controlled `selectedKeys={keys()}` stays live (accessor; never written).
+    const selectedKeys = liveKeys(props, "selectedKeys");
+    const defaultSelectedKeys = props.defaultSelectedKeys;
+    const onSelectionChange = props.onSelectionChange;
+    const disallowEmptySelection = props.disallowEmptySelection;
+    const disabledKeys = props.disabledKeys;
+    const disabledBehavior = props.disabledBehavior ?? "all";
+    // Live props: a controlled `expandedKeys={keys()}` stays live (accessor; never written).
+    const expandedProp = liveKeys(props, "expandedKeys");
+    const defaultExpandedKeys = props.defaultExpandedKeys;
+    const onExpandedChange = props.onExpandedChange;
+    // react-stately useTreeState's expanded keys (as `createTreeState`): created here because the
+    // flattened collection reads them and the state holds the collection.
+    const expandedControlled = expandedProp !== undefined && !isSignal(expandedProp);
+    const expanded = typeof expandedProp === "function"
+        ? expandedProp
+        : signal(new Set(expandedControlled ? expandedProp : (defaultExpandedKeys ?? [])));
+    // The flattened (expanded-aware) collection: rebuilt when the content or the expanded keys change.
+    const flat = computed(() => base().withExpandedKeys(new Set(), expanded()));
+    const state = {
+        ...createTreeState({
+            selectionMode,
+            selectionBehavior,
+            selectedKeys,
+            defaultSelectedKeys,
+            onSelectionChange,
+            disallowEmptySelection,
+            disabledKeys,
+            disabledBehavior,
+            expandedKeys: expanded,
+            onExpandedChange,
+            collection: flat,
+        }),
+        // A plain `expandedKeys` value is controlled: changes are reported, never written.
+        expandedKeysControlled: expandedControlled,
+    };
+    const renderer = useContext(CollectionRendererContext);
+    // The default renderer's methods are module functions (not resumable captures): capture only a custom one.
+    const customRenderer = renderer === DefaultCollectionRenderer ? null : renderer;
+    const shared = gridListShared(props);
+    const descriptionId = shared.id + "-description";
+    const gridOpts = {
+        id: shared.id,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": props["aria-describedby"],
+        "aria-details": props["aria-details"],
+        autoFocus: props.autoFocus,
+        onAction: props.onAction,
+        disabledBehavior: props.disabledBehavior ?? "all",
+        shouldSelectOnPressUp: props.shouldSelectOnPressUp,
+        keyboardNavigationBehavior: props.keyboardNavigationBehavior,
+        escapeKeyBehavior: props.escapeKeyBehavior,
+        disallowTypeAhead: props.disallowTypeAhead,
+        linkBehavior: props.linkBehavior,
+        isVirtualized: renderer.isVirtualized,
+        // RAC: inside a Virtualizer the layout is the keyboard delegate's layout delegate (Page Up / Down).
+        layoutDelegate: renderer.layoutDelegate,
+        UNSTABLE_focusOnEntry: props.UNSTABLE_focusOnEntry,
+        direction: props.direction,
+        locale: props.locale,
+        descriptionId,
+    };
+    const view = () => treeStateView(state, shared);
+    const sharedElements = {};
+    const el = elementRef();
+    const rootRef = mergeRefValues(el, userRef);
+    // react-aria useHasTabbableChild (empty state with a tabbable child: the grid leaves the tab order).
+    const hasTabbableChild = signal(false);
+    clientEffect(() => {
+        const root = el();
+        if (!root || flat().size !== 0)
+            return;
+        const update = () => hasTabbableChild.set(!!getFocusableTreeWalker(root, { tabbable: true }).nextNode());
+        update();
+        const observer = new MutationObserver(update);
+        observer.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: ["tabIndex", "disabled"] });
+        return () => observer.disconnect();
+    });
+    const focused = signal(false);
+    const focusVisible = signal(false);
+    const rootInteraction = { states: { isFocused: focused, isFocusVisible: focusVisible } };
+    const values = {
+        isEmpty: () => flat().size === 0,
+        isFocused: () => focused(),
+        isFocusVisible: () => focusVisible(),
+        selectionMode: computed(() => view().selectionManager.selectionMode),
+        allowsDragging: () => false,
+        isDropTarget: () => false,
+        state: state,
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, values, defaultClassName: "rv-Tree" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const renderEmptyState = props.renderEmptyState;
+    const emptyValues = {
+        isFocused: values.isFocused,
+        isFocusVisible: values.isFocusVisible,
+        selectionMode: values.selectionMode,
+        allowsDragging: values.allowsDragging,
+        isDropTarget: values.isDropTarget,
+        state: values.state,
+    };
+    const onMouseDown = props.onMouseDown;
+    const onScroll = props.onScroll;
+    // Virtualized (RAC Virtualizer + ListLayout over the flattened rows): the treegrid element is the scroll container,
+    // its scroll events reach the renderer and its focused row stays rendered.
+    const virtualScroll = renderer.isVirtualized ? customRenderer?.onScroll : undefined;
+    const focusedKey = renderer.isVirtualized ? state.selectionState.focusedKey : undefined;
+    const scrolled = (e) => {
+        virtualScroll?.(e);
+        onScroll?.(e);
+    };
+    const slot = props.slot || undefined;
+    const dom = globalDOMProps(props, TREE_OWNED);
+    const description = () => gridListHighlightDescription(gridOpts, view());
+    // useTreeState: reset the focused key when its item leaves the collection.
+    clientEffect(() => resetTreeFocusedKey(state, flat()));
+    if (props.render) {
+        // Accessors are object-literal arrows over `gridAttr` (a local const): only those resume (a `liveProps` loop made them closures).
+        // `tabindex` lowercase: see CalendarCell.
+        const gridAttr = (name) => treeProps(gridOpts, view(), hasTabbableChild()).gridProps[name];
+        const attrs = {
+            ...dom,
+            id: () => gridAttr("id"),
+            role: "treegrid",
+            "aria-label": () => gridAttr("aria-label"),
+            "aria-labelledby": () => gridAttr("aria-labelledby"),
+            "aria-describedby": () => gridAttr("aria-describedby"),
+            "aria-details": () => gridAttr("aria-details"),
+            "aria-multiselectable": () => gridAttr("aria-multiselectable"),
+            "aria-rowcount": () => gridAttr("aria-rowcount"),
+            "aria-colcount": () => gridAttr("aria-colcount"),
+            tabindex: () => gridAttr("tabIndex"),
+            ref: rootRef,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "data-empty": () => dataBool(flat().size === 0),
+            "data-selection-mode": () => (values.selectionMode() === "none" ? undefined : values.selectionMode()),
+            onKeyDownCapture: (e) => gridListKeyDownCapture(e, gridOpts, view()),
+            onKeyDown: (e) => gridListKeyDown(e, gridOpts, view()),
+            onFocusIn: (e) => gridListFocus(e, gridOpts, view()),
+            onFocusOut: (e) => gridListBlur(e, gridOpts, view()),
+            onFocus: (e) => focusStateFocus(rootInteraction, e),
+            onBlur: (e) => focusStateBlur(rootInteraction, e),
+            onMouseDown: (e) => {
+                gridListMouseDown(e, gridOpts, view());
+                onMouseDown?.(e);
+            },
+            onScroll: (e) => scrolled(e),
+            children: () => [
+                <Provider values={[
+                        [TreeStateContext, state],
+                        [TreeInternalContext, { shared }],
+                        [SharedElementContext, sharedElements],
+                    ]}>
+          {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({
+                        collection: flat,
+                        scrollRef: el,
+                        focusedKey,
+                    })}
+        </Provider>,
+                renderEmptyState ? (<Show when={() => flat().size === 0}>
+            {() => (<div role="row" style={{ display: "contents" }} aria-level="1">
+                <div role="gridcell" style={{ display: "contents" }}>
+                  {renderEmptyState(emptyValues)}
+                </div>
+              </div>)}
+          </Show>) : null,
+                <Show when={() => !!description()}>
+          {() => (<div id={descriptionId} hidden>
+              {description()}
+            </div>)}
+        </Show>,
+            ],
+        };
+        return props.render(attrs, values);
+    }
+    return (<div {...dom} {...treeProps(gridOpts, view(), hasTabbableChild()).gridProps} ref={rootRef} class={rp.class()} style={rp.style()} slot={slot} data-empty={dataBool(flat().size === 0)} data-selection-mode={values.selectionMode() === "none" ? undefined : values.selectionMode()} onKeyDownCapture={(e) => gridListKeyDownCapture(e, gridOpts, view())} onKeyDown={(e) => gridListKeyDown(e, gridOpts, view())} onFocusIn={(e) => gridListFocus(e, gridOpts, view())} onFocusOut={(e) => gridListBlur(e, gridOpts, view())} onFocus={(e) => focusStateFocus(rootInteraction, e)} onBlur={(e) => focusStateBlur(rootInteraction, e)} onMouseDown={(e) => {
+            gridListMouseDown(e, gridOpts, view());
+            onMouseDown?.(e);
+        }} onScroll={virtualScroll || onScroll ? scrolled : undefined}>
+      <Provider values={[
+            [TreeStateContext, state],
+            [TreeInternalContext, { shared }],
+            // RAC: the rows share one SharedElementTransition scope (a SelectionIndicator animates between them).
+            [SharedElementContext, sharedElements],
+        ]}>
+        {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({
+            collection: flat,
+            scrollRef: el,
+            focusedKey,
+        })}
+      </Provider>
+      {renderEmptyState ? (<Show when={() => flat().size === 0}>
+          {() => (<div role="row" style={{ display: "contents" }} aria-level="1">
+              <div role="gridcell" style={{ display: "contents" }}>
+                {renderEmptyState(emptyValues)}
+              </div>
+            </div>)}
+        </Show>) : null}
+      <Show when={() => !!description()}>
+        {() => (<div id={descriptionId} hidden>
+            {description()}
+          </div>)}
+      </Show>
+    </div>);
+}
+/** RAC `TreeItemContentContext`: the render props of the enclosing TreeItem. */
+export const TreeItemContentContext = resumableContext(createContext(null, { id: "rv-tree-item-content" }));
+/** The content of a TreeItem (everything but its child rows); children may be a function of the item's render props. */
+export const TreeItemContent = /* @__PURE__ */ createLeafComponent("content", function TreeItemContent(props) {
+    const values = useContext(TreeItemContentContext);
+    const rp = renderProps({ children: props.children, values });
+    return (<ContextProvider token={CollectionRendererContext} value={DefaultCollectionRenderer}>
+      {rp.children()}
+    </ContextProvider>);
+});
+/** Global DOM events TreeItem handles itself (the user's chain after its own); RAC drops `onClick`. */
+const ITEM_OWNED = [
+    "onPointerDown",
+    "onPointerUp",
+    "onPointerCancel",
+    "onPointerEnter",
+    "onPointerLeave",
+    "onDblClick",
+    "onDragStart",
+    "onClick",
+    "style",
+];
+/** A TreeItem represents an individual item in a Tree. */
+export const TreeItem = /* @__PURE__ */ createBranchComponent("item", function TreeItem(props, forwardedRef, item) {
+    const state = useContext(TreeStateContext);
+    const internal = useContext(TreeInternalContext);
+    const shared = internal.shared;
+    const key = item.key;
+    const focusMode = props.focusMode;
+    const allowsArrowNavigation = props.allowsArrowNavigation;
+    const hasChildItemsProp = props.hasChildItems;
+    const router = useRouter();
+    const view = () => treeStateView(state, shared);
+    const opts = (collection, row) => ({
+        // A removed row's bindings may re-run once before the row is disposed: read it as a detached leaf.
+        node: collection.getItem(key) ?? removedNode(key),
+        focusMode,
+        allowsArrowNavigation,
+        hasChildItems: hasChildItemsProp,
+        shouldSelectOnPressUp: false,
+        router,
+        ref: row ?? undefined,
+    });
+    const row = elementRef();
+    const rowRef = mergeRefValues(row, forwardedRef);
+    const aria = computed(() => {
+        const v = view();
+        return treeItemProps(opts(v.collection), v);
+    });
+    const isExpanded = () => aria().rowProps["aria-expanded"] === true;
+    const hasChildItems = () => !!hasChildItemsProp || [...(flatOf(state).getChildren?.(key) ?? [])].length > 1;
+    const level = () => aria().rowProps["aria-level"] || 1;
+    const hovered = signal(false);
+    const pressed = signal(false);
+    const focusVisible = signal(false);
+    const within = useFocusRing({ within: true });
+    const { onHoverStart, onHoverChange, onHoverEnd } = props;
+    const interaction = {
+        // RAC: hover only when the row can be selected or has an action (WebKit sticky hover after drops).
+        isDisabled: () => !aria().allowsSelection && !aria().hasAction,
+        onHoverStart,
+        onHoverChange,
+        onHoverEnd,
+        states: { isHovered: hovered, isFocusVisible: focusVisible },
+    };
+    // Row `isPressed` lives in the press memo of the row element: re-read it after the row's press handlers.
+    const syncPressed = (target) => {
+        const v = view();
+        pressed.set(treeItemProps(opts(v.collection, target), v).isPressed);
+    };
+    // NavigationTree (RAC NavigationTreeItem's `render` wrapper; see navigation-context.tsx): current route,
+    // current-route ancestors and the link's focus-visible state.
+    const nav = useContext(InternalNavigationTreeContext);
+    const { href, hrefLang, target: linkTarget, rel, download, ping, referrerPolicy, routerOptions } = props;
+    const hasLink = href != null && href.length > 0;
+    const linkFocused = signal(false);
+    const isCurrent = () => !!nav && hasLink && href === nav.selectedRoute();
+    const isCurrentAncestor = () => !!nav && hasSelectedDescendant(key, flatOf(state), nav.selectedRoute());
+    const navFocusVisible = nav ? () => focusVisible() || (within.isFocusVisible() && linkFocused()) : null;
+    const values = {
+        isHovered: () => hovered(),
+        isPressed: () => pressed(),
+        // Memos: `view()` / `aria()` change on every expand / selection / focus update; a render-prop reader
+        // (`selectionMode() !== "none" ? <Checkbox/> : null`) re-runs only when its value changes (RAC: React
+        // keeps the element across those re-renders).
+        isSelected: computed(() => aria().isSelected),
+        isFocused: computed(() => aria().isFocused),
+        isFocusVisible: navFocusVisible ?? (() => focusVisible()),
+        isDisabled: computed(() => aria().isDisabled),
+        selectionMode: computed(() => view().selectionManager.selectionMode),
+        selectionBehavior: computed(() => view().selectionManager.selectionBehavior),
+        allowsDragging: () => false,
+        isDragging: () => false,
+        isDropTarget: () => false,
+        isExpanded,
+        hasChildItems,
+        level,
+        isFocusVisibleWithin: () => within.isFocusVisible(),
+        state: state,
+        id: key,
+        ...(nav ? { isCurrent, isCurrentAncestor } : {}),
+    };
+    if (nav) {
+        // Keep the current route's row visible inside the tree's own scroll container (never the page).
+        clientEffect(() => {
+            const el = row();
+            if (!isCurrent() || !el)
+                return;
+            const scrollParent = getScrollParent(el, true);
+            const tree = el.closest('[role="treegrid"]');
+            if (tree && nodeContains(tree, scrollParent))
+                scrollIntoView(scrollParent, el, { block: "center" });
+        });
+    }
+    const rp = untrack(() => renderProps({
+        class: props.class,
+        style: props.style,
+        values,
+        defaultClassName: "rv-TreeItem",
+        defaultStyle: { "--tree-item-level": level() },
+    }, hasLive(props) ? liveRenderProps(props) : undefined));
+    if (isDev() && !item.textValue) {
+        console.warn("A `textValue` prop is required for <TreeItem> elements in order to support accessibility features such as type to select.");
+    }
+    if (isDev()) {
+        clientEffect(() => {
+            const el = row();
+            if (el && untrack(hasChildItems) && !el.querySelector('[slot="chevron"]')) {
+                console.warn("Expandable tree items must contain a expand button so screen reader users can expand/collapse the item.");
+            }
+        });
+    }
+    const rowId = () => aria().rowProps.id;
+    // useGridListSelectionCheckbox (Rivet: the checkbox id derives from the row id, see header).
+    const checkboxId = untrack(rowId) + "-checkbox";
+    const checkboxLabel = untrack(() => gridListSelectionCheckboxProps({ key, id: checkboxId }, view()).checkboxProps["aria-label"]);
+    const checkboxProps = {
+        id: checkboxId,
+        "aria-label": checkboxLabel,
+        "aria-labelledby": `${checkboxId} ${untrack(rowId)}`,
+        isSelected: () => aria().isSelected,
+        isDisabled: () => !view().selectionManager.canSelectItem(key),
+        onChange: (isSelected) => gridListSelectionCheckboxChange(isSelected, { key }, view()),
+    };
+    const chevronId = () => aria().expandButtonProps.id;
+    const arrowNav = shared.keyboardNavigationBehavior === "arrow" || !!allowsArrowNavigation;
+    const { onPointerDown, onPointerUp, onPointerCancel, onPointerEnter, onPointerLeave, onDblClick } = props;
+    const dom = globalDOMProps(props, ITEM_OWNED);
+    const contentKeys = () => {
+        const keys = [];
+        for (const child of flatOf(state).getChildren?.(key) ?? [])
+            if (child.type === "content")
+                keys.push(child.key);
+        return keys;
+    };
+    // Content rows are keyed by index; each row's item is the row's value when it is plain data (else null). A resumed
+    // page adopts the server rows only while that value is the same object, and a client row re-renders when it
+    // changes: `createTreeData.update` (a new value) re-renders the content (RAC re-renders TreeItemContent with the
+    // new item even where the content node itself is unchanged).
+    const contentRows = () => {
+        const value = flatOf(state).getItem(key)?.value;
+        const token = isPlainData(value) ? value : null;
+        return contentKeys().map(() => token);
+    };
+    if (props.render) {
+        const rowAttr = (name) => aria().rowProps[name];
+        const attrs = {
+            ...dom,
+            id: () => rowAttr("id"),
+            role: "row",
+            "aria-label": () => rowAttr("aria-label"),
+            "aria-labelledby": () => rowAttr("aria-labelledby"),
+            "aria-selected": () => (rowAttr("aria-selected") === undefined ? undefined : String(rowAttr("aria-selected"))),
+            "aria-disabled": () => (rowAttr("aria-disabled") ? "true" : undefined),
+            "aria-expanded": () => (rowAttr("aria-expanded") === undefined ? undefined : String(rowAttr("aria-expanded"))),
+            "aria-level": () => rowAttr("aria-level"),
+            "aria-posinset": () => rowAttr("aria-posinset"),
+            "aria-setsize": () => rowAttr("aria-setsize"),
+            "aria-rowindex": () => rowAttr("aria-rowindex"),
+            tabindex: () => rowAttr("tabIndex"),
+            "data-key": () => rowAttr("data-key"),
+            "data-key-type": () => rowAttr("data-key-type"),
+            "data-collection": () => rowAttr("data-collection"),
+            "data-href": () => rowAttr("data-href"),
+            "data-target": () => rowAttr("data-target"),
+            "data-rel": () => rowAttr("data-rel"),
+            "data-download": () => rowAttr("data-download"),
+            "data-ping": () => rowAttr("data-ping"),
+            "data-referrer-policy": () => rowAttr("data-referrer-policy"),
+            ref: rowRef,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-expanded": () => dataBool(hasChildItems() && isExpanded()),
+            "data-has-child-items": () => dataBool(hasChildItems()),
+            "data-level": () => level(),
+            "data-selected": () => dataBool(aria().isSelected),
+            "data-disabled": () => dataBool(aria().isDisabled),
+            "data-focused": () => dataBool(aria().isFocused),
+            "data-pressed": () => dataBool(pressed()),
+            "data-selection-mode": () => (values.selectionMode() === "none" ? undefined : values.selectionMode()),
+            "data-current": nav ? () => dataBool(isCurrent()) : undefined,
+            "data-current-ancestor": nav ? () => dataBool(isCurrentAncestor()) : undefined,
+            "data-focus-visible": navFocusVisible ? () => dataBool(navFocusVisible()) : undefined,
+            onKeyDownCapture: (e) => {
+                if (!arrowNav)
+                    return;
+                const v = view();
+                gridListItemKeyDownCapture(e, opts(v.collection), v);
+            },
+            onKeyDown: (e) => {
+                const v = view();
+                gridListItemKeyDown(e, opts(v.collection), v);
+                syncPressed(e.currentTarget);
+            },
+            onKeyUp: (e) => {
+                const v = view();
+                gridListItemKeyUp(e, opts(v.collection), v);
+                syncPressed(e.currentTarget);
+            },
+            onFocusIn: (e) => {
+                const v = view();
+                gridListItemFocus(e, opts(v.collection), v);
+                within.focusProps.onFocusIn(e);
+            },
+            onFocusOut: (e) => within.focusProps.onFocusOut(e),
+            onFocus: (e) => focusStateFocus(interaction, e),
+            onBlur: (e) => focusStateBlur(interaction, e),
+            onPointerEnter: (e) => {
+                hoverStateEnter(interaction, e);
+                onPointerEnter?.(e);
+            },
+            onPointerLeave: (e) => {
+                hoverStateLeave(interaction, e);
+                onPointerLeave?.(e);
+            },
+            onPointerDown: (e) => {
+                const v = view();
+                gridListItemPointerDown(e, opts(v.collection), v);
+                syncPressed(e.currentTarget);
+                onPointerDown?.(e);
+            },
+            onPointerUp: (e) => {
+                const v = view();
+                gridListItemPointerUp(e, opts(v.collection), v);
+                syncPressed(e.currentTarget);
+                onPointerUp?.(e);
+            },
+            onPointerCancel: (e) => {
+                const v = view();
+                gridListItemPointerCancel(e, opts(v.collection), v);
+                syncPressed(e.currentTarget);
+                onPointerCancel?.(e);
+            },
+            onClick: (e) => {
+                const v = view();
+                gridListItemClick(e, opts(v.collection), v);
+                syncPressed(e.currentTarget);
+            },
+            onDblClick: (e) => {
+                const v = view();
+                gridListItemDoubleClick(e, opts(v.collection), v);
+                onDblClick?.(e);
+            },
+            onDragStart: (e) => {
+                const v = view();
+                gridListItemDragStart(e, opts(v.collection), v);
+            },
+            children: () => (<div {...aria().gridCellProps} style={{ display: "contents" }}>
+          <Provider values={[
+                    [CheckboxContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
+                    [CheckboxFieldContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
+                    [
+                        ButtonContext,
+                        {
+                            slots: {
+                                [DEFAULT_SLOT]: {},
+                                chevron: {
+                                    id: untrack(chevronId),
+                                    "aria-label": () => aria().expandButtonProps["aria-label"],
+                                    "aria-labelledby": `${untrack(chevronId)} ${untrack(rowId)}`,
+                                    excludeFromTabOrder: true,
+                                    preventFocusOnPress: true,
+                                    "data-rv-prevent-focus": "true",
+                                    onPress: () => {
+                                        const v = view();
+                                        const o = opts(v.collection);
+                                        treeItemExpandPress(undefined, o, v, treeItemProps(o, v).isDisabled);
+                                    },
+                                },
+                            },
+                        },
+                    ],
+                    [TreeItemContentContext, values],
+                    [SelectionIndicatorContext, { isSelected: () => aria().isSelected }],
+                    ...(nav
+                        ? [
+                            [
+                                NavigationTreeItemLinkContext,
+                                {
+                                    href,
+                                    hrefLang,
+                                    target: linkTarget,
+                                    rel,
+                                    download,
+                                    ping,
+                                    referrerPolicy,
+                                    routerOptions,
+                                    isCurrent,
+                                    isLinkFocused: linkFocused,
+                                },
+                            ],
+                            [NavigationTreeItemStateContext, { isCurrentAncestor }],
+                        ]
+                        : []),
+                ]}>
+            <For each={contentRows} by={(_, index) => index}>
+              {(value, index) => renderNodeAt(() => flatOf(state), () => untrack(contentKeys)[index()], value)}
+            </For>
+          </Provider>
+        </div>),
+        };
+        return props.render(attrs, values);
+    }
+    return (<div {...dom} {...aria().rowProps} ref={rowRef} class={rp.class()} style={rp.style()} data-expanded={dataBool(hasChildItems() && isExpanded())} data-has-child-items={dataBool(hasChildItems())} data-level={level()} data-selected={dataBool(aria().isSelected)} data-disabled={dataBool(aria().isDisabled)} data-focused={dataBool(aria().isFocused)} data-pressed={dataBool(pressed())} data-selection-mode={values.selectionMode() === "none" ? undefined : values.selectionMode()} data-current={nav ? dataBool(isCurrent()) : undefined} data-current-ancestor={nav ? dataBool(isCurrentAncestor()) : undefined} data-focus-visible={navFocusVisible ? dataBool(navFocusVisible()) : undefined} onKeyDownCapture={arrowNav
+            ? (e) => {
+                const v = view();
+                gridListItemKeyDownCapture(e, opts(v.collection), v);
+            }
+            : undefined} onKeyDown={(e) => {
+            const v = view();
+            gridListItemKeyDown(e, opts(v.collection), v);
+            syncPressed(e.currentTarget);
+        }} onKeyUp={(e) => {
+            const v = view();
+            gridListItemKeyUp(e, opts(v.collection), v);
+            syncPressed(e.currentTarget);
+        }} onFocusIn={(e) => {
+            const v = view();
+            gridListItemFocus(e, opts(v.collection), v);
+            within.focusProps.onFocusIn(e);
+        }} onFocusOut={(e) => within.focusProps.onFocusOut(e)} onFocus={(e) => focusStateFocus(interaction, e)} onBlur={(e) => focusStateBlur(interaction, e)} onPointerEnter={(e) => {
+            hoverStateEnter(interaction, e);
+            onPointerEnter?.(e);
+        }} onPointerLeave={(e) => {
+            hoverStateLeave(interaction, e);
+            onPointerLeave?.(e);
+        }} onPointerDown={(e) => {
+            const v = view();
+            gridListItemPointerDown(e, opts(v.collection), v);
+            syncPressed(e.currentTarget);
+            onPointerDown?.(e);
+        }} onPointerUp={(e) => {
+            const v = view();
+            gridListItemPointerUp(e, opts(v.collection), v);
+            syncPressed(e.currentTarget);
+            onPointerUp?.(e);
+        }} onPointerCancel={(e) => {
+            const v = view();
+            gridListItemPointerCancel(e, opts(v.collection), v);
+            syncPressed(e.currentTarget);
+            onPointerCancel?.(e);
+        }} onClick={(e) => {
+            const v = view();
+            gridListItemClick(e, opts(v.collection), v);
+            syncPressed(e.currentTarget);
+        }} onDblClick={(e) => {
+            const v = view();
+            gridListItemDoubleClick(e, opts(v.collection), v);
+            onDblClick?.(e);
+        }} onDragStart={(e) => {
+            const v = view();
+            gridListItemDragStart(e, opts(v.collection), v);
+        }}>
+      <div {...aria().gridCellProps} style={{ display: "contents" }}>
+        <Provider values={[
+            [CheckboxContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
+            [CheckboxFieldContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
+            [
+                ButtonContext,
+                {
+                    slots: {
+                        [DEFAULT_SLOT]: {},
+                        chevron: {
+                            id: untrack(chevronId),
+                            "aria-label": () => aria().expandButtonProps["aria-label"],
+                            "aria-labelledby": `${untrack(chevronId)} ${untrack(rowId)}`,
+                            excludeFromTabOrder: true,
+                            preventFocusOnPress: true,
+                            "data-rv-prevent-focus": "true",
+                            onPress: () => {
+                                const v = view();
+                                const o = opts(v.collection);
+                                treeItemExpandPress(undefined, o, v, treeItemProps(o, v).isDisabled);
+                            },
+                        },
+                    },
+                },
+            ],
+            [TreeItemContentContext, values],
+            [SelectionIndicatorContext, { isSelected: () => aria().isSelected }],
+            ...(nav
+                ? [
+                    [
+                        NavigationTreeItemLinkContext,
+                        {
+                            href,
+                            hrefLang,
+                            target: linkTarget,
+                            rel,
+                            download,
+                            ping,
+                            referrerPolicy,
+                            routerOptions,
+                            isCurrent,
+                            isLinkFocused: linkFocused,
+                        },
+                    ],
+                    [NavigationTreeItemStateContext, { isCurrentAncestor }],
+                ]
+                : []),
+        ]}>
+          <For each={contentRows} by={(_, index) => index}>
+            {(value, index) => renderNodeAt(() => flatOf(state), () => untrack(contentKeys)[index()], value)}
+          </For>
+        </Provider>
+      </div>
+    </div>);
+});
+/** A sentinel row: calls `onLoadMore` when scrolled near, and renders its children while `isLoading`. */
+export const TreeLoadMoreItem = /* @__PURE__ */ createLeafComponent("loader", function TreeLoadingSentinel(props, ref, item) {
+    const state = useContext(TreeStateContext);
+    const internal = useContext(TreeInternalContext);
+    const isVirtualized = useContext(CollectionRendererContext).isVirtualized;
+    const key = item.key;
+    const shared = internal.shared;
+    const isLoading = props.isLoading;
+    const sentinel = elementRef();
+    // This collection updates whenever a row is expanded / collapsed (the flattened rows change):
+    // onLoadMore may fire again; users handle repeated calls.
+    loadMoreSentinel({ onLoadMore: props.onLoadMore, collection: () => flatOf(state), scrollOffset: props.scrollOffset }, sentinel);
+    const level = () => {
+        const v = treeStateView(state, shared);
+        const node = v.collection.getItem(key);
+        return node ? treeItemProps({ node }, v).rowProps["aria-level"] || 1 : 1;
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, children: props.children, values: { level }, defaultClassName: "rv-TreeLoader" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const hasChildren = props.children != null;
+    const dom = globalDOMProps(props, ["style"]);
+    return (<>
+        {/* Always render the sentinel. For now onus is on the user for styling when using 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) && hasChildren}>
+          {() => (
+        // No aria-posinset / aria-setsize on the loader: it is not keyboard focusable.
+        <div {...dom} ref={ref} role="row" aria-level={level()} class={rp.class()} style={rp.style()} data-level={level()}>
+              <div role="gridcell" aria-colindex="1" style={isVirtualized ? { display: "contents" } : undefined}>
+                {rp.children()}
+              </div>
+            </div>)}
+        </Show>
+      </>);
+});
+// ---------------------------------------------------------------------------------------------
+// TreeSection / TreeHeader
+// ---------------------------------------------------------------------------------------------
+const isServer = typeof document === "undefined";
+/** react-aria `useSlotId` on the server: the id is always rendered; in the browser only while the header is. */
+const slotRef = (slot) => (isServer ? slot.id : slotIdRef(slot));
+/** A TreeSection represents a section within a Tree. */
+export const TreeSection = /* @__PURE__ */ createBranchComponent("section", function TreeSection(props, forwardedRef, item) {
+    const state = useContext(TreeStateContext);
+    const renderer = useContext(CollectionRendererContext);
+    const customRenderer = renderer === DefaultCollectionRenderer ? null : renderer;
+    // The section is read back from the collection by key: the (resumable) branch render must not capture the node.
+    const sectionKey = item.key;
+    const heading = createSlotId();
+    const ariaLabel = props["aria-label"] ?? undefined;
+    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-TreeSection";
+    const style = props.style;
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref: forwardedRef,
+            role: aria.rowGroupProps.role,
+            class: className,
+            style,
+            "aria-label": ariaLabel,
+            "aria-labelledby": labelledBy,
+            children: () => (<Provider values={[
+                    [GridListHeaderContext, { ...aria.rowProps }],
+                    [GridListHeaderInnerContext, { ...aria.rowHeaderProps, id: heading }],
+                ]}>
+          {(customRenderer ?? DefaultCollectionRenderer).CollectionBranch({
+                    collection: () => flatOf(state),
+                    parent: untrack(() => flatOf(state).getItem(sectionKey)),
+                })}
+        </Provider>),
+        };
+        return props.render(attrs, undefined);
+    }
+    return (<div {...dom} ref={forwardedRef} role={aria.rowGroupProps.role} class={className} style={style} aria-label={ariaLabel} aria-labelledby={labelledBy()}>
+      <Provider values={[
+            [GridListHeaderContext, { ...aria.rowProps }],
+            [GridListHeaderInnerContext, { ...aria.rowHeaderProps, id: heading }],
+        ]}>
+        {(customRenderer ?? DefaultCollectionRenderer).CollectionBranch({
+            collection: () => flatOf(state),
+            parent: untrack(() => flatOf(state).getItem(sectionKey)),
+        })}
+      </Provider>
+    </div>);
+});
+/** The header of a TreeSection (a GridListHeader with class `rv-TreeHeader`). */
+export const TreeHeader = (props) => {
+    const { children, ...rest } = props;
+    return (<GridListHeader class="rv-TreeHeader" {...rest}>
+      {children}
+    </GridListHeader>);
+};