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

package/table/index.jsx

@@ -0,0 +1,982 @@
+// Ported from react-aria-components (src/Table.tsx: Table, TableHeader, Column, ColumnResizer,
+// TableBody, TableFooter, Row, Cell, TableLoadMoreItem, ResizableTableContainer, TableContext,
+// TableStateContext, TableColumnResizeStateContext, TableOptionsContext / useTableOptions,
+// RowFocusContext), Apache-2.0, © Adobe.
+//
+// A table displays data in rows and columns: keyboard navigation, row selection (checkboxes via
+// `<Checkbox slot="selection">`), sorting, column resizing, expandable rows (treegrid), links, actions.
+// Rivet:
+// - The collection is built from the content (`collectionOf`, B5 build mode) into `./collection.ts`
+//   `TableCollection` (RAC's internal class), flattened by the expanded keys and filtered by the
+//   SelectableCollectionContext `filter` in a computed; `CollectionRendererContext.CollectionRoot`
+//   renders the header / body / footer sections keyed by node key (resumed rows are adopted).
+// - State: `../state/table.ts` `createTableState` (signals + plain data); the react-stately `TableState`
+//   view (collection + SelectionManager instances) is rebuilt per event / binding. Handlers are inline
+//   arrows calling `./behaviour.ts` / `../grid/behaviour.ts` free functions with KEYS, never nodes.
+// - `TableStateContext` / `TableColumnResizeStateContext` provide ACCESSORS of the state views
+//   (`useContext(TableStateContext)!()`), not the views (deviation: views hold class instances).
+// - `tableOptions()` = RAC `useTableOptions()` (cdk naming: no `use*`).
+// - Render props are accessors (`class={({ isSelected }) => (isSelected() ? "on" : "")}`); `data-*`
+//   state values `"true"`; `class` = RAC `className` (defaults `rv-Table`, `rv-TableHeader`, `rv-Column`,
+//   `rv-ColumnResizer`, `rv-TableBody`, `rv-TableFooter`, `rv-Row`, `rv-Cell`, `rv-TableLoadingIndicator`,
+//   `rv-ResizableTableContainer`).
+// - react-aria `useDescription` elements (sort, sortable column, long-press, resizer descriptions) are
+//   rendered by the Table as hidden siblings after the `<table>` (server HTML carries them; a `<div>`
+//   inside `<table>` would be foster-parented by the HTML parser).
+// - Selection checkbox / expand button ids derive from the table id + row key (byte-stable server HTML).
+// Deviations:
+// - Native table elements only (`table` / `thead` / `tr` / `th` / `td`): the Virtualizer table layout
+//   (`isVirtualized` → `div` elements) is not wired yet.
+// - Drag and drop (`dragAndDropHooks`, drop indicators, `slot="drag"` button) not wired yet (DnD lane).
+// - No `FocusScope` wrapper (nothing here reads its context); the SharedElementTransition scope is a `SharedElementContext` provider entry.
+// - Header placeholder cells (nested columns, react-stately level) render nothing — RAC renders
+//   `node.render` of a placeholder (no render: throws); RAC `Column` is a leaf, so RAC tables never
+//   have them.
+import { computed, createContext, provide, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { For, Portal, Show, clientEffect, ref as elementRef } from "@rivetjs/runtime/dom";
+import { isSlot, renderSlot } from "@rivetjs/runtime/slot";
+import { Collection, CollectionRendererContext, DefaultCollectionRenderer, collectionOf, createBranchComponent, createLeafComponent, renderNodeAt, } from "../collections/components.jsx";
+import { LoaderNode } from "../collections/base.js";
+import { createTableState, tableState } from "../state/table.js";
+import { resetGridFocusedKey } from "../state/grid.js";
+import { createTableColumnResizeState, tableColumnResizeState } from "../state/table-column-resize.js";
+import { gridBlur, gridCellClick, gridCellFocus, gridCellKeyDown, gridCellKeyDownCapture, gridCellKeyUp, gridCellPointerDown, gridCellPointerUp, gridFocus, gridKeyDown, gridKeyDownCapture, gridMouseDown, gridRowClick, gridRowDoubleClick, gridRowDragStart, gridRowFocus, gridRowKeyDown, gridRowKeyUp, gridRowPointerCancel, gridRowPointerDown, gridRowPointerUp, gridShared, highlightSelectionDescription, } from "../grid/behaviour.js";
+import { getRowLabelledBy, normalizeKey, tableCellProps, tableColumnHeaderPress, tableColumnHeaderPressable, tableColumnHeaderProps, tableGridProps, tableHeaderRowProps, tableProps, tableRowExpandPress, tableRowKeyDown, tableRowProps, tableSelectAllCheckboxChange, tableSelectAllCheckboxProps, tableSelectionCheckboxChange, tableSelectionCheckboxProps, tableSortDescription, } from "./behaviour.js";
+import { focusColumnResizer, tableColumnResizeProps } from "./column-resize.jsx";
+import { TableBodyNode, TableCellNode, TableCollection, TableColumnNode, TableFooterNode, TableHeaderNode, TableRowNode } from "./collection.js";
+import { strings as tableStrings } from "./intl.js";
+import { strings as racStrings } from "./rac-intl.js";
+import { formatMessage } from "../_adapters/intl.js";
+import { pressClick, pressDragStart, pressKeyDown, pressMouseDown, pressPointerDown, pressPointerEnter, pressPointerLeave, pressPointerUp, } from "../button/press.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 { FieldInputContext, SelectableCollectionContext } from "../autocomplete/contexts.js";
+import { DEFAULT_SLOT, Provider, contextProps, mergeRefValues, renderProps, resumableContext, } from "../slots/index.jsx";
+import { dataBool, focusStateBlur, focusStateFocus, focusStateIn, hoverStateEnter, hoverStateLeave, hoverStateOver, } from "../utils/data-attrs.jsx";
+import { useFocusRing } from "../focus/focus-ring.jsx";
+import { focusSafely, getFocusableTreeWalker } from "../focus/index.js";
+import { getItemElement } from "../collections/dom.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { isScrollable } from "../utils/dom.js";
+import { useId } from "../utils/id.js";
+import { useLocale } from "../i18n/index.js";
+import { loadMoreSentinel } from "../utils/load-more-sentinel.jsx";
+import { useRouter } from "../utils/links.jsx";
+import { hasLive, liveKeys } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+export { TableCollection } from "./collection.js";
+const read = (value) => (typeof value === "function" ? value() : value);
+// ---------------------------------------------------------------------------------------------
+// Contexts
+// ---------------------------------------------------------------------------------------------
+/** RAC `TableContext`: props for the Tables inside a component, optionally per `slot`. */
+export const TableContext = resumableContext(createContext(null, { id: "rv-table" }));
+/** RAC `TableStateContext` (Rivet: an accessor of the state view of the enclosing Table). */
+export const TableStateContext = resumableContext(createContext(null, { id: "rv-table-state" }));
+/** RAC `TableColumnResizeStateContext` (Rivet: an accessor; null outside a ResizableTableContainer). */
+export const TableColumnResizeStateContext = resumableContext(createContext(null, { id: "rv-table-column-resize-state" }));
+const TableOptionsContext = resumableContext(createContext(null, { id: "rv-table-options" }));
+/** Returns options from the parent `<Table>` component (RAC `useTableOptions`). */
+export function tableOptions() {
+    return useContext(TableOptionsContext);
+}
+/** RAC `RowFocusContext` (Rivet: `isFocusVisibleWithinRow` is an accessor). */
+export const RowFocusContext = resumableContext(createContext({ isFocusVisibleWithinRow: () => false }, { id: "rv-row-focus" }));
+const TableInternalContext = resumableContext(createContext(null, { id: "rv-table-internal" }));
+const ResizableTableContainerContext = resumableContext(createContext(null, { id: "rv-resizable-table-container" }));
+const ColumnResizerContext = resumableContext(createContext(null, { id: "rv-column-resizer" }));
+const columnOf = (c, key) => (c.getItem(key) ?? undefined);
+/** Wraps a Table to enable column resizing (ColumnResizer); measures the scrollable width. */
+export function ResizableTableContainer(props) {
+    const container = elementRef();
+    const containerRef = mergeRefValues(container, props.ref);
+    const tableRef = elementRef();
+    const tableWidth = signal(0);
+    clientEffect(() => {
+        // Walk up the DOM from the Table to the ResizableTableContainer and stop when we reach the first
+        // scrollable element: what we measure to determine column widths (scrollbar widths).
+        const root = container();
+        let table = tableRef();
+        while (table && table !== root && !isScrollable(table))
+            table = table.parentElement;
+        const scroll = table ?? null;
+        if (!scroll)
+            return;
+        tableWidth.set(scroll.clientWidth);
+        const view = scroll.ownerDocument.defaultView;
+        if (!view || typeof view.ResizeObserver === "undefined")
+            return;
+        const observer = new view.ResizeObserver(() => tableWidth.set(scroll.clientWidth));
+        observer.observe(scroll, { box: "border-box" });
+        return () => observer.disconnect();
+    });
+    // Locals only (PROPS-CAPTURE: a literal reading `props.x` captures the whole props object).
+    const { onResizeStart, onResize, onResizeEnd } = props;
+    const ctx = { tableWidth, tableRef: tableRef, onResizeStart, onResize, onResizeEnd };
+    const dom = globalDOMProps(props, ["style"]);
+    const className = props.class || "rv-ResizableTableContainer";
+    const style = props.style;
+    const children = props.children;
+    return (<div {...dom} ref={containerRef} class={className} style={style}>
+      {provide(ResizableTableContainerContext, ctx, () => renderSlot(children))}
+    </div>);
+}
+/** Global DOM events / attributes Table handles itself; the user's run from its own handler. */
+const TABLE_OWNED = ["onMouseDown", "onScroll", "style", "id"];
+/**
+ * A table displays data in rows and columns and enables a user to navigate its contents via
+ * directional navigation keys, and optionally supports row selection and sorting.
+ */
+export function Table(inProps) {
+    const [tableCtxProps, tableCtxRef] = contextProps(inProps, inProps.ref, TableContext);
+    // RAC TableInner: the Autocomplete's SelectableCollectionContext merges under the table props.
+    const [props, userRef] = contextProps(tableCtxProps, tableCtxRef, SelectableCollectionContext);
+    const container = useContext(ResizableTableContainerContext);
+    const renderer = useContext(CollectionRendererContext);
+    // Module component functions are not serializable: resolve the renderer at the call site (`(custom ?? Default).X(…)`).
+    const customRenderer = renderer === DefaultCollectionRenderer ? undefined : renderer;
+    const sharedElements = {};
+    const isVirtualized = !!renderer.isVirtualized;
+    const { locale, direction } = useLocale();
+    // Separate selection options so collection components can read them via tableOptions().
+    const selectionMode = props.selectionMode ?? "none";
+    const selectionBehavior = props.selectionBehavior ?? "toggle";
+    // Locals only (PROPS-CAPTURE: literals / closures reading `props.x` capture the whole props object).
+    const { disallowEmptySelection, onRowAction, onCellAction, shouldSelectOnPressUp, keyboardNavigationBehavior, escapeKeyBehavior, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-details": ariaDetails, } = props;
+    const options = {
+        selectionMode,
+        selectionBehavior: selectionMode === "none" ? null : selectionBehavior,
+        disallowEmptySelection: !!disallowEmptySelection,
+        allowsDragging: false,
+    };
+    const children = props.children;
+    // Object-literal arrows (not call-argument arrows): the build computed captures them, so they must be
+    // resumable closures.
+    const build = {
+        content: () => provide(TableOptionsContext, options, () => Collection({ children })),
+        createCollection: () => new TableCollection(),
+    };
+    const built = collectionOf(build.content, build.createCollection);
+    const data = createTableState({
+        selectionMode,
+        selectionBehavior,
+        // Live props: a controlled `selectedKeys={keys()}` stays live (accessor; never written).
+        selectedKeys: liveKeys(props, "selectedKeys"),
+        defaultSelectedKeys: props.defaultSelectedKeys,
+        onSelectionChange: props.onSelectionChange,
+        disallowEmptySelection: props.disallowEmptySelection,
+        disabledKeys: props.disabledKeys,
+        disabledBehavior: props.disabledBehavior ?? "all",
+        sortDescriptor: props.sortDescriptor,
+        onSortChange: props.onSortChange,
+        expandedKeys: liveKeys(props, "expandedKeys"),
+        defaultExpandedKeys: props.defaultExpandedKeys,
+        onExpandedChange: props.onExpandedChange,
+        treeColumn: props.treeColumn,
+    });
+    const filter = props.filter;
+    // RAC: collection.withExpandedKeys(expandedKeys), then UNSTABLE_useFilteredTableState(state, filter).
+    const collection = computed(() => {
+        const c = built().withExpandedKeys(data.expandedKeys.value());
+        return filter ? c.filter(filter) : c;
+    });
+    const shared = gridShared({ onRowAction, onCellAction, shouldSelectOnPressUp, keyboardNavigationBehavior });
+    const gridId = useId(props.id);
+    const view = () => ({ ...tableState(data, collection()), grid: shared, gridId });
+    const sortDescriptionId = gridId + "-sort-description";
+    const descriptionId = gridId + "-description";
+    const internal = {
+        data,
+        collection,
+        gridId,
+        locale,
+        direction,
+        isVirtualized,
+        sortableDescriptionId: gridId + "-sortable-description",
+        resizerDescriptionId: gridId + "-resizer-description",
+    };
+    const aria = {
+        id: gridId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        "aria-details": ariaDetails,
+        isVirtualized,
+        layoutDelegate: renderer.layoutDelegate,
+        escapeKeyBehavior,
+        keyboardNavigationBehavior,
+        onRowAction,
+        onCellAction,
+        shouldSelectOnPressUp,
+        locale,
+        direction,
+        descriptionId,
+        sortDescriptionId,
+    };
+    const disallowTypeAhead = props.disallowTypeAhead;
+    const shouldUseVirtualFocus = props.shouldUseVirtualFocus;
+    const onFocusInFromContext = props.onFocusIn;
+    // The grid handler props for the event's table element (keyboard delegate over its DOM layout).
+    const gridOf = (v, e) => tableGridProps({ ...aria, disallowTypeAhead: !!read(disallowTypeAhead) }, v, e.currentTarget);
+    const el = elementRef();
+    const rootRef = mergeRefValues(mergeRefValues(el, userRef), container?.tableRef);
+    // react-aria useHasTabbableChild (empty table with a tabbable child: the table leaves the tab order).
+    const hasTabbableChild = signal(false);
+    clientEffect(() => {
+        const root = el();
+        if (!root || collection().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();
+    });
+    // useGridState: reset the focused key when its row leaves the collection.
+    // `blurred`: target of the last focusout to nowhere (Rivet: Chromium fires focusout when the focused row is
+    // removed, jsdom / React's detached-node events do not — a blur whose target left the DOM keeps focus in the grid).
+    const focusMemo = { last: null, blurred: null };
+    clientEffect(() => {
+        const c = collection();
+        const selection = data.selectionState;
+        const previous = untrack(selection.focusedKey);
+        resetGridFocusedKey(data, focusMemo.last, c);
+        focusMemo.last = c;
+        // useSelectableItem's focus effect for the replacement key, after the rows re-rendered.
+        const next = untrack(selection.focusedKey);
+        if (next == null || next === previous)
+            return;
+        const wasFocused = untrack(selection.isFocused);
+        queueMicrotask(() => {
+            const lost = focusMemo.blurred;
+            if (untrack(selection.focusedKey) !== next || !(wasFocused || (lost && !lost.isConnected)))
+                return;
+            const item = getItemElement(el(), next);
+            if (item && item.ownerDocument.activeElement !== item)
+                focusSafely(item);
+        });
+    });
+    // Column resizing (ResizableTableContainer): the layout state over the measured width.
+    const resizeData = container ? createTableColumnResizeState({ tableWidth: container.tableWidth }) : null;
+    const layout = resizeData ? () => tableColumnResizeState(resizeData, view()) : null;
+    const focused = signal(false);
+    const focusVisible = signal(false);
+    const rootInteraction = { states: { isFocused: focused, isFocusVisible: focusVisible } };
+    const values = {
+        isFocused: () => focused(),
+        isFocusVisible: () => focusVisible(),
+        isDropTarget: () => false,
+        state: view,
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, values, defaultClassName: "rv-Table" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const style = () => {
+        const s = rp.style();
+        // due to https://bugzilla.mozilla.org/show_bug.cgi?id=1959353, we can't use "fit-content".
+        return resizeData && !isVirtualized ? { ...s, tableLayout: "fixed", width: "min-content" } : s;
+    };
+    const onMouseDown = props.onMouseDown;
+    const onScroll = props.onScroll;
+    const slot = props.slot || undefined;
+    const dom = globalDOMProps(props, TABLE_OWNED);
+    const attrs = () => {
+        const a = tableProps(aria, view(), hasTabbableChild()).gridProps;
+        // Autocomplete virtual focus: the collection itself is never tabbable.
+        return read(shouldUseVirtualFocus) ? { ...a, tabIndex: undefined } : a;
+    };
+    const sortDescription = () => tableSortDescription({ locale }, view());
+    const longPressDescription = () => {
+        const v = view();
+        return highlightSelectionDescription({
+            selectionManager: v.selectionManager,
+            hasItemActions: !!(shared.actions.onRowAction || shared.actions.onCellAction),
+            locale,
+        });
+    };
+    return (<>
+      <table {...dom} {...attrs()} ref={rootRef} class={rp.class()} style={style()} slot={slot} data-focused={dataBool(focused())} data-focus-visible={dataBool(focusVisible())} onKeyDownCapture={(e) => {
+            const v = view();
+            gridKeyDownCapture(e, gridOf(v, e), v);
+        }} onKeyDown={(e) => {
+            const v = view();
+            gridKeyDown(e, gridOf(v, e), v);
+        }} onFocusIn={(e) => {
+            const v = view();
+            gridFocus(e, gridOf(v, e), v);
+            onFocusInFromContext?.(e);
+        }} onFocusOut={(e) => {
+            focusMemo.blurred = e.relatedTarget == null ? e.target : null;
+            const v = view();
+            gridBlur(e, gridOf(v, e), v);
+        }} onFocus={(e) => focusStateFocus(rootInteraction, e)} onBlur={(e) => focusStateBlur(rootInteraction, e)} onMouseDown={(e) => {
+            const v = view();
+            gridMouseDown(e, gridOf(v, e), v);
+            onMouseDown?.(e);
+        }} onScroll={(e) => onScroll?.(e)}>
+        <Provider values={[
+            [TableStateContext, view],
+            [TableColumnResizeStateContext, layout],
+            [TableOptionsContext, options],
+            [TableInternalContext, internal],
+            [SelectableCollectionContext, null],
+            [FieldInputContext, null],
+            // RAC: the rows share one SharedElementTransition scope (a SelectionIndicator animates between them).
+            [SharedElementContext, sharedElements],
+        ]}>
+          {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: collection, scrollRef: el })}
+        </Provider>
+      </table>
+      <div id={sortDescriptionId} hidden>
+        {sortDescription() ?? ""}
+      </div>
+      <div id={internal.sortableDescriptionId} hidden>
+        {formatMessage(tableStrings, locale, "sortable")}
+      </div>
+      <div id={descriptionId} hidden>
+        {longPressDescription() ?? ""}
+      </div>
+      {resizeData ? (<div id={internal.resizerDescriptionId} hidden>
+          {formatMessage(tableStrings, locale, "resizerDescription")}
+        </div>) : null}
+    </>);
+}
+const HOVER_OWNED = ["onPointerEnter", "onPointerLeave", "style"];
+/** A header within a `<Table>`, containing the table columns. */
+export const TableHeader = /* @__PURE__ */ createBranchComponent(TableHeaderNode, function TableHeader(props, ref) {
+    const internal = useContext(TableInternalContext);
+    const hovered = signal(false);
+    const { onHoverStart, onHoverChange, onHoverEnd } = props;
+    const interaction = {
+        onHoverStart,
+        onHoverChange,
+        onHoverEnd,
+        states: { isHovered: hovered },
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, values: { isHovered: () => hovered() }, defaultClassName: "rv-TableHeader" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const { onPointerEnter, onPointerLeave } = props;
+    const dom = globalDOMProps(props, HOVER_OWNED);
+    const rowKeys = () => internal.collection().headerRows.map((row) => row.key);
+    return (<thead {...dom} role="rowgroup" ref={ref} class={rp.class()} style={rp.style()} onPointerEnter={(e) => {
+            hoverStateEnter(interaction, e);
+            onPointerEnter?.(e);
+        }} onPointerLeave={(e) => {
+            hoverStateLeave(interaction, e);
+            onPointerLeave?.(e);
+        }}>
+        <For each={rowKeys} by={(k) => k}>
+          {(k) => <TableHeaderRow rowKey={untrack(k)}/>}
+        </For>
+      </thead>);
+}, (props) => Collection({ items: props.columns, children: props.children }));
+function TableHeaderRow(props) {
+    const view = useContext(TableStateContext);
+    const internal = useContext(TableInternalContext);
+    const rowKey = props.rowKey;
+    const isVirtualized = internal.isVirtualized;
+    const locale = internal.locale;
+    const attrs = () => {
+        const v = view();
+        const row = v.collection.headerRows.find((r) => r.key === rowKey);
+        return row ? tableHeaderRowProps({ node: row, isVirtualized }, v).rowProps : { role: "row" };
+    };
+    // useTableSelectAllCheckbox
+    const checkboxProps = {
+        "aria-label": untrack(() => tableSelectAllCheckboxProps(view(), locale).checkboxProps["aria-label"]),
+        isSelected: () => tableSelectAllCheckboxProps(view(), locale).checkboxProps.isSelected,
+        isDisabled: () => tableSelectAllCheckboxProps(view(), locale).checkboxProps.isDisabled,
+        isIndeterminate: () => tableSelectAllCheckboxProps(view(), locale).checkboxProps.isIndeterminate,
+        onChange: () => tableSelectAllCheckboxChange(view()),
+    };
+    const cellKeys = () => {
+        const keys = [];
+        for (const n of internal.collection().getChildren(rowKey))
+            keys.push(n.key);
+        return keys;
+    };
+    return (<tr {...attrs()}>
+      <Provider values={[
+            [CheckboxContext, { slots: { selection: checkboxProps } }],
+            [CheckboxFieldContext, { slots: { selection: checkboxProps } }],
+        ]}>
+        {/* Columns are in the key map; header placeholders (nested columns) render nothing. */}
+        <For each={cellKeys} by={(k) => k}>
+          {(k) => renderNodeAt(internal.collection, k)}
+        </For>
+      </Provider>
+    </tr>);
+}
+const COLUMN_OWNED = ["onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseDown", "onClick", "onDragStart", "style", "id"];
+/** A column within a `<Table>`. */
+export const Column = /* @__PURE__ */ createLeafComponent(TableColumnNode, function Column(props, forwardedRef, column) {
+    const view = useContext(TableStateContext);
+    const internal = useContext(TableInternalContext);
+    const layout = useContext(TableColumnResizeStateContext);
+    const key = column.key;
+    const isVirtualized = internal.isVirtualized;
+    const locale = internal.locale;
+    const descriptionId = internal.sortableDescriptionId;
+    const { focusMode, allowsArrowNavigation } = props;
+    const th = elementRef();
+    const thRef = mergeRefValues(th, forwardedRef);
+    const hopts = (v, el) => ({
+        node: columnOf(v.collection, key),
+        isVirtualized,
+        focusMode: focusMode ?? "child",
+        allowsArrowNavigation,
+        descriptionId,
+        locale,
+        ref: el ?? undefined,
+    });
+    const attrs = () => {
+        const v = view();
+        return columnOf(v.collection, key) ? tableColumnHeaderProps(hopts(v), v).columnHeaderProps : {};
+    };
+    const allowsSorting = () => !!columnOf(internal.collection(), key)?.props?.allowsSorting;
+    const sortDirection = () => {
+        const s = internal.data.sortDescriptor.value();
+        return s?.column === key ? s.direction : undefined;
+    };
+    const isResizing = () => !!layout && layout().resizingColumn === key;
+    const hovered = signal(false);
+    const pressed = signal(false);
+    const focused = signal(false);
+    const focusVisible = signal(false);
+    const interaction = {
+        isDisabled: () => !allowsSorting(),
+        states: { isHovered: hovered, isFocused: focused, isFocusVisible: focusVisible },
+    };
+    // usePress of useTableColumnHeader (options read per event).
+    const press = (v) => {
+        const o = hopts(v);
+        return {
+            isDisabled: !tableColumnHeaderPressable(o, v),
+            onPress: () => tableColumnHeaderPress(o, v, (k) => v.sort(k), view),
+            onPressStart: () => pressed.set(true),
+            onPressEnd: () => pressed.set(false),
+        };
+    };
+    const values = {
+        isHovered: () => hovered(),
+        isPressed: () => pressed(),
+        isFocused: () => focused(),
+        isFocusVisible: () => focusVisible(),
+        allowsSorting,
+        sortDirection,
+        isResizing,
+        startResize: () => {
+            if (!layout)
+                throw new Error("Wrap your <Table> in a <ResizableTableContainer> to enable column resizing");
+            layout().startResize(key);
+            view().setKeyboardNavigationDisabled(true);
+            focusColumnResizer(th() ?? null);
+        },
+        sort: (direction) => view().sort(key, direction),
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-Column" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const style = () => {
+        const s = rp.style();
+        return layout ? { ...s, width: `${layout().getColumnWidth(key)}px` } : s;
+    };
+    const { onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onClick } = props;
+    const dom = globalDOMProps(props, COLUMN_OWNED);
+    return (<th {...dom} {...attrs()} ref={thRef} class={rp.class()} style={style()} data-resizing={dataBool(isResizing())} data-allows-sorting={dataBool(allowsSorting())} data-sort-direction={sortDirection()} onKeyDownCapture={(e) => {
+            const v = view();
+            gridCellKeyDownCapture(e, hopts(v), v);
+        }} onKeyDown={(e) => {
+            const v = view();
+            gridCellKeyDown(e, hopts(v), v);
+            pressKeyDown(press(v), e);
+        }} onKeyUp={(e) => {
+            const v = view();
+            gridCellKeyUp(e, hopts(v), v);
+        }} onFocusIn={(e) => {
+            const v = view();
+            gridCellFocus(e, hopts(v), v);
+        }} onFocus={(e) => {
+            focusStateFocus(interaction, e);
+        }} onBlur={(e) => {
+            focusStateBlur(interaction, e);
+        }} onPointerEnter={(e) => {
+            hoverStateEnter(interaction, e);
+            pressPointerEnter(press(view()), e);
+            onPointerEnter?.(e);
+        }} onPointerLeave={(e) => {
+            hoverStateLeave(interaction, e);
+            pressPointerLeave(press(view()), e);
+            onPointerLeave?.(e);
+        }} onPointerDown={(e) => {
+            const v = view();
+            gridCellPointerDown(e, hopts(v), v);
+            pressPointerDown(press(v), e);
+            onPointerDown?.(e);
+        }} onPointerUp={(e) => {
+            const v = view();
+            gridCellPointerUp(e, hopts(v), v);
+            pressPointerUp(press(v), e);
+            onPointerUp?.(e);
+        }} onMouseDown={(e) => pressMouseDown(press(view()), e)} onClick={(e) => {
+            const v = view();
+            gridCellClick(e, hopts(v), v);
+            pressClick(press(v), e);
+            onClick?.(e);
+        }} onDragStart={(e) => pressDragStart(press(view()), e)}>
+      {
+        // A binding (not a Provider child slot): a render function that reads render-prop accessors
+        // and returns text re-runs on change, as RAC re-renders.
+        provide(ColumnResizerContext, { columnKey: key, triggerRef: th }, () => provide(CollectionRendererContext, DefaultCollectionRenderer, () => rp.children()))}
+    </th>);
+});
+const RESIZER_OWNED = ["onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseDown", "onClick", "onDragStart", "style"];
+/** A draggable / keyboard-adjustable handle that resizes its Column (inside a ResizableTableContainer). */
+export function ColumnResizer(props) {
+    const layout = useContext(TableColumnResizeStateContext);
+    if (!layout)
+        throw new Error("Wrap your <Table> in a <ResizableTableContainer> to enable column resizing");
+    const container = useContext(ResizableTableContainerContext);
+    const { columnKey, triggerRef } = useContext(ColumnResizerContext);
+    const internal = useContext(TableInternalContext);
+    const locale = internal.locale;
+    const direction = internal.direction;
+    const column = untrack(() => columnOf(internal.collection(), columnKey));
+    const ariaLabelProp = props["aria-label"];
+    const id = `${internal.gridId}-${normalizeKey(columnKey)}-resizer`;
+    const aria = tableColumnResizeProps({
+        column,
+        "aria-label": ariaLabelProp || formatMessage(racStrings, locale, "tableResizer"),
+        onResizeStart: container.onResizeStart,
+        onResize: container.onResize,
+        onResizeEnd: container.onResizeEnd,
+        triggerRef,
+        id,
+        descriptionId: internal.resizerDescriptionId,
+        locale,
+    }, layout);
+    const ring = useFocusRing();
+    const hovered = signal(false);
+    const { onHoverStart, onHoverChange, onHoverEnd } = props;
+    const interaction = { onHoverStart, onHoverChange, onHoverEnd, states: { isHovered: hovered } };
+    const resizableDirection = () => {
+        const l = layout();
+        const isEResizable = l.getColumnMinWidth(columnKey) >= l.getColumnWidth(columnKey);
+        const isWResizable = l.getColumnMaxWidth(columnKey) <= l.getColumnWidth(columnKey);
+        if (isEResizable)
+            return direction === "rtl" ? "right" : "left";
+        if (isWResizable)
+            return direction === "rtl" ? "left" : "right";
+        return "both";
+    };
+    const resizer = elementRef();
+    const resizerRef = mergeRefValues(resizer, props.ref);
+    // The cursor of the resizer (computed style) for the full-screen cursor overlay.
+    const cursor = signal("");
+    clientEffect(() => {
+        const node = resizer();
+        resizableDirection();
+        if (node)
+            cursor.set(node.ownerDocument.defaultView?.getComputedStyle(node).cursor ?? "");
+    });
+    const values = {
+        isHovered: () => hovered(),
+        isFocused: () => ring.isFocused(),
+        isFocusVisible: () => ring.isFocusVisible(),
+        isResizing: aria.isResizing,
+        resizableDirection,
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-ColumnResizer" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const r = aria.resizerProps;
+    const input = aria.inputProps;
+    const { onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseDown, onClick } = props;
+    const dom = globalDOMProps(props, RESIZER_OWNED);
+    const { onFocus: inputFocus, onBlur: inputBlur, onChange: inputChange, style: inputStyle, ...inputAttrs } = input;
+    // Cursor overlay is used to style the cursor against the entire screen.
+    // Do not turn off pointer events or the cursor will no longer be styled.
+    return (<div {...dom} ref={resizerRef} role="presentation" class={rp.class()} style={{ ...rp.style(), touchAction: "none" }} data-rv-column-resizer="" data-focused={dataBool(ring.isFocused())} data-focus-visible={dataBool(ring.isFocusVisible())} data-resizing={dataBool(aria.isResizing())} data-resizable-direction={resizableDirection()} onKeyDown={(e) => {
+            r.onKeyDown(e);
+        }} onKeyUp={(e) => {
+            r.onKeyUp(e);
+        }} onPointerDown={(e) => {
+            r.onPointerDown(e);
+            onPointerDown?.(e);
+        }} onPointerUp={(e) => {
+            r.onPointerUp(e);
+            onPointerUp?.(e);
+        }} onPointerEnter={(e) => {
+            hoverStateEnter(interaction, e);
+            r.onPointerEnter(e);
+            onPointerEnter?.(e);
+        }} onPointerLeave={(e) => {
+            hoverStateLeave(interaction, e);
+            r.onPointerLeave(e);
+            onPointerLeave?.(e);
+        }} onMouseDown={(e) => {
+            r.onMouseDown(e);
+            onMouseDown?.(e);
+        }} onClick={(e) => {
+            r.onClick(e);
+            onClick?.(e);
+        }} onDragStart={(e) => r.onDragStart(e)}>
+      {rp.children()}
+      <input {...inputAttrs} style={inputStyle} onFocus={(e) => {
+            inputFocus(e);
+            // The ring's focus-in (binds its own blur while focused).
+            ring.focusProps.onFocusIn(e);
+        }} onBlur={(e) => inputBlur(e)} onChange={(e) => inputChange(e)}/>
+      <Show when={() => aria.isResizing() && aria.isMouseResizing()}>
+        {() => (<Portal>
+            <div style={{ position: "fixed", top: "0", left: "0", bottom: "0", right: "0", cursor: cursor() }} data-testid="cursor-overlay"/>
+          </Portal>)}
+      </Show>
+    </div>);
+}
+/** The body of a `<Table>`, containing the table rows. */
+export const TableBody = /* @__PURE__ */ createBranchComponent(TableBodyNode, function TableBody(props, ref, node) {
+    const internal = useContext(TableInternalContext);
+    const branchRenderer = useContext(CollectionRendererContext);
+    const customBranch = branchRenderer === DefaultCollectionRenderer ? undefined : branchRenderer;
+    // The built renderer only reads the parent key: a plain object, not the node class instance (resumable capture).
+    const branchParent = { key: node.key };
+    const isEmpty = () => internal.collection().size === 0;
+    const values = { isEmpty, isDropTarget: () => false };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, values, defaultClassName: "rv-TableBody" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const renderEmptyState = props.renderEmptyState;
+    const numColumns = () => internal.collection().columnCount;
+    const dom = globalDOMProps(props, ["style", "id"]);
+    // TODO (upstream): TableBody doesn't support being the scrollable body of the table yet.
+    return (<tbody {...dom} role="rowgroup" ref={ref} class={rp.class()} style={rp.style()} data-empty={dataBool(isEmpty())}>
+      {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({ collection: internal.collection, parent: branchParent })}
+      {renderEmptyState ? (<Show when={isEmpty}>
+          {() => (<tr role="row">
+              <td role="rowheader" colSpan={numColumns()}>
+                {renderEmptyState(values)}
+              </td>
+            </tr>)}
+        </Show>) : null}
+    </tbody>);
+});
+/** The footer of a `<Table>`, containing table rows. */
+export const TableFooter = /* @__PURE__ */ createBranchComponent(TableFooterNode, function TableFooter(props, ref, node) {
+    const internal = useContext(TableInternalContext);
+    const branchRenderer = useContext(CollectionRendererContext);
+    const customBranch = branchRenderer === DefaultCollectionRenderer ? undefined : branchRenderer;
+    // The built renderer only reads the parent key: a plain object, not the node class instance (resumable capture).
+    const branchParent = { key: node.key };
+    const dom = globalDOMProps(props, ["style", "id"]);
+    const className = props.class || "rv-TableFooter";
+    const style = props.style;
+    return (<tfoot {...dom} role="rowgroup" ref={ref} class={className} style={style}>
+      {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({ collection: internal.collection, parent: branchParent })}
+    </tfoot>);
+});
+/** Global DOM events Row handles itself (the user's chain after its own); RAC drops `onClick`. */
+const ROW_OWNED = [
+    "onPointerDown",
+    "onPointerUp",
+    "onPointerCancel",
+    "onPointerEnter",
+    "onPointerLeave",
+    "onDblClick",
+    "onDragStart",
+    "onClick",
+    "style",
+    "id",
+];
+/** A row within a `<Table>`. */
+export const Row = /* @__PURE__ */ createBranchComponent(TableRowNode, function Row(props, forwardedRef, item) {
+    const view = useContext(TableStateContext);
+    const internal = useContext(TableInternalContext);
+    const key = item.key;
+    const isVirtualized = internal.isVirtualized;
+    const locale = internal.locale;
+    const router = useRouter();
+    const rowBase = `${internal.gridId}-${normalizeKey(key)}`;
+    const expandButtonId = rowBase + "-expand";
+    const checkboxId = rowBase + "-checkbox";
+    const isTreeGrid = internal.data.treeColumn != null;
+    const { hasChildItems: hasChildItemsProp, onHoverStart, onHoverChange, onHoverEnd } = props;
+    const ropts = (v, el) => ({
+        node: v.collection.getItem(key),
+        isVirtualized,
+        shouldSelectOnPressUp: false,
+        expandButtonId,
+        router,
+        locale,
+        ref: el ?? undefined,
+    });
+    const row = elementRef();
+    const rowRef = mergeRefValues(row, forwardedRef);
+    const st = computed(() => {
+        const v = view();
+        const n = v.collection.getItem(key);
+        if (!n)
+            return null;
+        const aria = tableRowProps(ropts(v), v, locale);
+        const hasChildItems = !!hasChildItemsProp || v.collection.getItem(n.lastChildKey)?.type !== "cell";
+        return {
+            aria,
+            hasChildItems,
+            isExpanded: hasChildItems && v.expandedKeys.has(key),
+            level: n.level + 1,
+            selectionMode: v.selectionManager.selectionMode,
+            selectionBehavior: v.selectionManager.selectionBehavior,
+        };
+    });
+    const hovered = signal(false);
+    const pressed = signal(false);
+    const focusVisible = signal(false);
+    const within = useFocusRing({ within: true });
+    const interaction = {
+        // because of https://bugs.webkit.org/show_bug.cgi?id=214609, hover only when selectable or with an action.
+        isDisabled: () => !st()?.aria.allowsSelection && !st()?.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();
+        if (v.collection.getItem(key))
+            pressed.set(tableRowProps(ropts(v, target), v, locale).isPressed);
+    };
+    const selectionMode = () => st()?.selectionMode ?? "none";
+    const values = {
+        isHovered: () => hovered(),
+        isPressed: () => pressed(),
+        isSelected: () => !!st()?.aria.isSelected,
+        isFocused: () => !!st()?.aria.isFocused,
+        isFocusVisible: () => focusVisible(),
+        isDisabled: () => !!st()?.aria.isDisabled,
+        selectionMode,
+        selectionBehavior: () => st()?.selectionBehavior ?? "toggle",
+        allowsDragging: () => false,
+        isDragging: () => false,
+        isDropTarget: () => false,
+        isFocusVisibleWithin: () => within.isFocusVisible(),
+        id: key,
+        hasChildItems: () => !!st()?.hasChildItems,
+        isExpanded: () => !!st()?.isExpanded,
+        level: () => st()?.level ?? 1,
+        state: view,
+    };
+    const rp = untrack(() => renderProps({
+        class: props.class,
+        style: props.style,
+        values,
+        defaultClassName: "rv-Row",
+        defaultStyle: { "--table-row-level": untrack(values.level) },
+    }, hasLive(props) ? liveRenderProps(props) : undefined));
+    // useTableSelectionCheckbox (Rivet: the id derives from the table id + row key, see header).
+    const checkboxProps = {
+        id: checkboxId,
+        "aria-label": untrack(() => tableSelectionCheckboxProps({ key, id: checkboxId, locale }, view()).checkboxProps["aria-label"]),
+        "aria-labelledby": untrack(() => `${checkboxId} ${getRowLabelledBy(view(), key)}`),
+        isSelected: () => !!st()?.aria.isSelected,
+        isDisabled: () => !view().selectionManager.canSelectItem(key),
+        onChange: (isSelected) => tableSelectionCheckboxChange(isSelected, { key }, view()),
+    };
+    const chevron = isTreeGrid
+        ? {
+            id: expandButtonId,
+            "aria-label": () => st()?.aria.expandButtonProps["aria-label"],
+            "aria-labelledby": untrack(() => st()?.aria.expandButtonProps["aria-labelledby"]),
+            isDisabled: () => !!st()?.aria.expandButtonProps.isDisabled,
+            excludeFromTabOrder: true,
+            preventFocusOnPress: true,
+            "data-react-aria-prevent-focus": "true",
+            onPress: () => {
+                const v = view();
+                tableRowExpandPress(ropts(v), v);
+            },
+        }
+        : {};
+    const { onPointerDown, onPointerUp, onPointerCancel, onPointerEnter, onPointerLeave, onDblClick } = props;
+    const dom = globalDOMProps(props, ROW_OWNED);
+    const branchRenderer = useContext(CollectionRendererContext);
+    const customBranch = branchRenderer === DefaultCollectionRenderer ? undefined : branchRenderer;
+    // The built renderer only reads the parent key: a plain object, not the node class instance (resumable capture).
+    const branchParent = { key: key };
+    return (<tr {...dom} {...(st()?.aria.rowProps ?? { role: "row" })} ref={rowRef} class={rp.class()} style={rp.style()} data-disabled={dataBool(values.isDisabled())} data-selected={dataBool(values.isSelected())} data-focused={dataBool(values.isFocused())} data-pressed={dataBool(pressed())} data-selection-mode={selectionMode() === "none" ? undefined : selectionMode()} data-expanded={dataBool(values.isExpanded())} data-has-child-items={dataBool(values.hasChildItems())} data-level={values.level()} data-focus-visible-within={dataBool(values.isFocusVisibleWithin())} onKeyDown={(e) => {
+            const v = view();
+            gridRowKeyDown(e, ropts(v), v);
+            if (!e.cancelBubble)
+                tableRowKeyDown(e, ropts(v), v);
+            syncPressed(e.currentTarget);
+        }} onKeyUp={(e) => {
+            const v = view();
+            gridRowKeyUp(e, ropts(v), v);
+            syncPressed(e.currentTarget);
+        }} onFocusIn={(e) => {
+            // The row's own focus (was a native `focus` listener per row; it ran before this focusin): its `blur` binds while focused.
+            focusStateIn(interaction, e);
+            const v = view();
+            gridRowFocus(e, ropts(v), v);
+            within.focusProps.onFocusIn(e);
+        }} onFocusOut={(e) => within.focusProps.onFocusOut(e)} onPointerOver={(e) => hoverStateOver(interaction, e)} onPointerEnter={onPointerEnter ? (e) => onPointerEnter(e) : undefined} onPointerLeave={onPointerLeave ? (e) => onPointerLeave(e) : undefined} onPointerDown={(e) => {
+            const v = view();
+            gridRowPointerDown(e, ropts(v), v);
+            syncPressed(e.currentTarget);
+            onPointerDown?.(e);
+        }} onPointerUp={(e) => {
+            const v = view();
+            gridRowPointerUp(e, ropts(v), v);
+            syncPressed(e.currentTarget);
+            onPointerUp?.(e);
+        }} onPointerCancel={(e) => {
+            const v = view();
+            gridRowPointerCancel(e, ropts(v), v);
+            syncPressed(e.currentTarget);
+            onPointerCancel?.(e);
+        }} onClick={(e) => {
+            const v = view();
+            gridRowClick(e, ropts(v), v);
+            syncPressed(e.currentTarget);
+        }} onDblClick={(e) => {
+            const v = view();
+            gridRowDoubleClick(e, ropts(v), v);
+            onDblClick?.(e);
+        }} onDragStart={(e) => {
+            const v = view();
+            gridRowDragStart(e, ropts(v), v);
+        }}>
+        <Provider values={[
+            [CheckboxContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
+            [CheckboxFieldContext, { slots: { [DEFAULT_SLOT]: {}, selection: checkboxProps } }],
+            [ButtonContext, { slots: { [DEFAULT_SLOT]: {}, chevron, drag: { style: { pointerEvents: "none" } } } }],
+            [SelectionIndicatorContext, { isSelected: values.isSelected }],
+            [RowFocusContext, { isFocusVisibleWithinRow: values.isFocusVisibleWithin }],
+        ]}>
+          {(customBranch ?? DefaultCollectionRenderer).CollectionBranch({ collection: internal.collection, parent: branchParent })}
+        </Provider>
+      </tr>);
+}, (props) => {
+    const children = props.children;
+    if (props.id == null && typeof children === "function" && !isSlot(children)) {
+        throw new Error("No id detected for the Row element. The Row element requires a id to be provided to it when the cells are rendered dynamically.");
+    }
+    return Collection({ items: props.columns, children, idScope: props.id });
+});
+const CELL_OWNED = ["onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onClick", "style", "id"];
+/** A cell within a table row. */
+export const Cell = /* @__PURE__ */ createLeafComponent(TableCellNode, function Cell(props, forwardedRef, cell) {
+    const view = useContext(TableStateContext);
+    const internal = useContext(TableInternalContext);
+    const rowFocus = useContext(RowFocusContext);
+    const key = cell.key;
+    const rowKey = cell.parentKey;
+    const isVirtualized = internal.isVirtualized;
+    const { focusMode, allowsArrowNavigation } = props;
+    const nodeOf = (v) => {
+        const n = v.collection.getItem(key);
+        if (n)
+            n.column = v.collection.columns[n.index];
+        return n;
+    };
+    const copts = (v, n, el) => ({
+        node: n,
+        isVirtualized,
+        focusMode,
+        allowsArrowNavigation,
+        shouldSelectOnPressUp: false,
+        ref: el ?? undefined,
+    });
+    const st = computed(() => {
+        const v = view();
+        const n = nodeOf(v);
+        if (!n)
+            return null;
+        const row = v.collection.getItem(rowKey);
+        const hasChildItems = !!row && (!!row.props?.hasChildItems || v.collection.getItem(row.lastChildKey)?.type !== "cell");
+        return {
+            ...tableCellProps(copts(v, n), v),
+            isSelected: v.selectionManager.isSelected(rowKey),
+            isDisabled: v.selectionManager.isDisabled(rowKey),
+            hasChildItems,
+            isExpanded: hasChildItems && v.expandedKeys.has(rowKey),
+            level: (row?.level ?? 0) + 1,
+            // colIndex is null, when there is no span, falling back to using the index
+            columnIndex: n.colIndex || n.index,
+            isTreeColumn: n.column?.key === v.treeColumn,
+        };
+    });
+    // Cell events with the node for the event (skipped once the cell left the collection).
+    const on = (e, fn) => {
+        const v = view();
+        const n = nodeOf(v);
+        if (n)
+            fn(e, copts(v, n), v);
+    };
+    const hovered = signal(false);
+    const focused = signal(false);
+    const focusVisible = signal(false);
+    const interaction = { states: { isHovered: hovered, isFocused: focused, isFocusVisible: focusVisible } };
+    const values = {
+        isPressed: () => !!st()?.isPressed,
+        isFocused: () => focused(),
+        isFocusVisible: () => focusVisible(),
+        isHovered: () => hovered(),
+        isSelected: () => !!st()?.isSelected,
+        isDisabled: () => !!st()?.isDisabled,
+        isFocusVisibleWithinRow: rowFocus.isFocusVisibleWithinRow,
+        id: key,
+        columnIndex: () => st()?.columnIndex,
+        isTreeColumn: () => !!st()?.isTreeColumn,
+        isExpanded: () => !!st()?.isExpanded,
+        hasChildItems: () => !!st()?.hasChildItems,
+        level: () => st()?.level ?? 1,
+    };
+    const rp = untrack(() => renderProps({ class: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-Cell" }, hasLive(props) ? liveRenderProps(props) : undefined));
+    const { onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onClick } = props;
+    const dom = globalDOMProps(props, CELL_OWNED);
+    return (<td {...dom} {...(st()?.gridCellProps ?? { role: "gridcell" })} ref={forwardedRef} class={rp.class()} style={rp.style()} data-focus-visible-within-row={dataBool(rowFocus.isFocusVisibleWithinRow())} data-pressed={dataBool(values.isPressed())} data-selected={dataBool(values.isSelected())} data-column-index={values.columnIndex() ?? undefined} data-expanded={dataBool(values.isExpanded())} data-has-child-items={dataBool(values.hasChildItems())} data-level={values.level()} data-tree-column={dataBool(values.isTreeColumn())} data-disabled={dataBool(values.isDisabled())} onKeyDownCapture={(e) => on(e, gridCellKeyDownCapture)} onKeyDown={(e) => {
+            on(e, gridCellKeyDown);
+        }} onKeyUp={(e) => {
+            on(e, gridCellKeyUp);
+        }} onFocusIn={(e) => {
+            // The cell's own focus (was a native `focus` listener per cell, before this focusin); its `blur` binds while focused.
+            focusStateIn(interaction, e);
+            on(e, gridCellFocus);
+        }} onPointerOver={(e) => hoverStateOver(interaction, e)} onPointerEnter={onPointerEnter ? (e) => onPointerEnter(e) : undefined} onPointerLeave={onPointerLeave ? (e) => onPointerLeave(e) : undefined} onPointerDown={(e) => {
+            on(e, gridCellPointerDown);
+            onPointerDown?.(e);
+        }} onPointerUp={(e) => {
+            on(e, gridCellPointerUp);
+            onPointerUp?.(e);
+        }} onClick={(e) => {
+            on(e, gridCellClick);
+            onClick?.(e);
+        }}>
+      {provide(CollectionRendererContext, DefaultCollectionRenderer, () => rp.children())}
+    </td>);
+});
+/** A sentinel row: calls `onLoadMore` when scrolled near, and renders its children while `isLoading`. */
+export const TableLoadMoreItem = /* @__PURE__ */ createLeafComponent(LoaderNode, function TableLoadingIndicator(props, ref, item) {
+    const internal = useContext(TableInternalContext);
+    const isLoading = props.isLoading;
+    const level = item.level + 1;
+    const numColumns = () => internal.collection().columns.length;
+    const sentinel = elementRef();
+    const { onLoadMore, scrollOffset, style: userStyle } = props;
+    loadMoreSentinel({ onLoadMore, collection: internal.collection, scrollOffset }, sentinel);
+    const children = props.children;
+    const className = props.class || "rv-TableLoadingIndicator";
+    const style = { "--table-row-level": level, ...userStyle };
+    const dom = globalDOMProps(props, ["style", "id"]);
+    return (<>
+        {/* Always render the sentinel. For now onus is on the user for styling when using flex + gap. */}
+        <tr style={{ height: "0" }} inert>
+          <td style={{ padding: "0", border: "0" }}>
+            <div data-testid="loadMoreSentinel" ref={sentinel} style={{ position: "relative", height: "1px", width: "1px" }}/>
+          </td>
+        </tr>
+        <Show when={() => !!read(isLoading) && children != null}>
+          {() => (
+        // For now don't include aria-rowindex on loader since they aren't keyboard focusable.
+        <tr {...dom} ref={ref} role="row" class={className} style={style} aria-level={level} data-level={level}>
+              <td role="rowheader" colSpan={numColumns()}>
+                {children}
+              </td>
+            </tr>)}
+        </Show>
+      </>);
+});