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

package/table/behaviour.js

@@ -0,0 +1,334 @@
+// Ported from @react-aria/table (useTable.ts, useTableColumnHeader.ts, useTableRow.ts,
+// useTableHeaderRow.ts, useTableCell.ts, useTableSelectionCheckbox.ts, useTableRowGroup.ts,
+// utils.ts), Apache-2.0, © Adobe.
+//
+// Rivet (cdk hook naming convention): `useX` → `xProps(props, state)` returning react-aria's bag(s)
+// with values computed from the `TableState` view passed in (`../state/table.ts` `tableState(data,
+// collection)`: call inside a binding / accessor for reactivity); react-aria's handlers → free
+// functions `x<Event>(event, props, state)` called from inline arrows (resumable). The bags hold no
+// closures (react-aria's `expandButtonProps.onPress` → `tableRowExpandPress`, `checkboxProps.onChange`
+// → `tableSelectionCheckboxChange` / `tableSelectAllCheckboxChange`).
+// - react-aria `gridIds` (WeakMap keyed by the state) → `state.gridId` on the view (views are rebuilt
+//   per use); `gridIds` stays as the fallback for long-lived state objects. Same for `gridMap`
+//   (`../grid/behaviour.ts` `state.grid`).
+// - `useDescription` (sort / sortable descriptions): the props take the description element ids
+//   (`sortDescriptionId`, `descriptionId`) — the component renders the hidden elements
+//   (`tableSortDescription`, `tableColumnSortableDescription` give the texts), so server HTML carries
+//   them.
+// - The sort announcement (react-aria: update effect on the sort description) runs at the end of
+//   `tableColumnHeaderPress` when the sort descriptor changed.
+// - useTableColumnResize (closures: press / move / keyboard machines) lives in `./column-resize.tsx`.
+import { untrack } from "@rivetjs/reactivity";
+import { announce } from "../announcer/live-announcer.js";
+import { formatMessage } from "../_adapters/intl.js";
+import { isAndroid } from "../platform/index.js";
+import { gridCellProps, gridKeyboardDelegate, gridProps, gridRowProps, gridRowGroupProps, gridSelectionCheckboxProps, } from "../grid/behaviour.js";
+import { direction as elementDirection } from "../bidi/index.js";
+import { syntheticLinkAttrs } from "../utils/links.jsx";
+import { searchCollator } from "../selection/list-keyboard-delegate.js";
+import { TableKeyboardDelegate } from "./keyboard-delegate.js";
+import { strings } from "./intl.js";
+export { gridRowGroupProps as tableRowGroupProps };
+const format = (locale, key, args) => formatMessage(strings, locale, key, args);
+// --- utils.ts ------------------------------------------------------------------------------------
+/** react-aria `gridIds`: the table id per (long-lived) state object (fallback of `state.gridId`). */
+export const gridIds = new WeakMap();
+function gridIdOf(state) {
+    const gridId = state.gridId ?? gridIds.get(state);
+    if (!gridId)
+        throw new Error("Unknown grid");
+    return gridId;
+}
+/** Strips whitespace from string keys (ids must not contain spaces). */
+export function normalizeKey(key) {
+    if (typeof key === "string")
+        return key.replace(/\s*/g, "");
+    return "" + key;
+}
+/** The id of a column header (`<grid id>-<column key>`). */
+export function getColumnHeaderId(state, columnKey) {
+    return `${gridIdOf(state)}-${normalizeKey(columnKey)}`;
+}
+/** The id of a cell (`<grid id>-<row key>-<column key>`). */
+export function getCellId(state, rowKey, columnKey) {
+    return `${gridIdOf(state)}-${normalizeKey(rowKey)}-${normalizeKey(columnKey)}`;
+}
+/** A row is labelled by its row header cells. */
+export function getRowLabelledBy(state, rowKey) {
+    return [...state.collection.rowHeaderColumnKeys].map((columnKey) => getCellId(state, rowKey, columnKey)).join(" ");
+}
+/**
+ * The keyboard delegate `useTable` builds (react-aria memoizes it; Rivet builds it per event):
+ * `props.keyboardDelegate`, else a `TableKeyboardDelegate` over the table element's DOM layout.
+ */
+export function tableKeyboardDelegate(props, state, element) {
+    if (props.keyboardDelegate)
+        return props.keyboardDelegate;
+    return new TableKeyboardDelegate({
+        collection: state.collection,
+        disabledKeys: state.disabledKeys,
+        disabledBehavior: state.selectionManager.disabledBehavior,
+        ref: element,
+        direction: props.direction ?? (element ? elementDirection(element) : "ltr"),
+        collator: searchCollator(props.locale),
+        layoutDelegate: props.layoutDelegate,
+    });
+}
+/** The sort description of the table (`"sorted by column X in ascending order"`), or undefined. */
+export function tableSortDescription(props, state) {
+    const { column, direction: sortDirection } = state.sortDescriptor || {};
+    const columnName = state.collection.columns.find((c) => c.key === column)?.textValue ?? "";
+    return sortDirection && column != null ? format(props.locale, `${sortDirection}Sort`, { columnName }) : undefined;
+}
+/**
+ * Provides the behavior and accessibility implementation for a table component (react-aria
+ * `useTable` → `tableProps`): `gridProps` of `../grid/behaviour.ts` + treegrid role, virtualized row
+ * count including header rows, the sort description. Reads state: bind as accessors. Wire the grid
+ * handlers (`gridKeyDown` …) with `keyboardDelegate: tableKeyboardDelegate(…)` — `table<Event>` below.
+ */
+export function tableProps(props, state, hasTabbableChild = false) {
+    const { gridProps: attrs } = gridProps({ ...props, id: props.id ?? state.gridId }, state, hasTabbableChild);
+    // Override to include header rows
+    if (props.isVirtualized)
+        attrs["aria-rowcount"] = state.collection.size + state.collection.headerRows.length;
+    if (state.treeColumn != null)
+        attrs.role = "treegrid";
+    const sortDescription = tableSortDescription(props, state);
+    // merge sort description with long press information
+    const describedBy = [sortDescription ? props.sortDescriptionId : undefined, attrs["aria-describedby"]].filter(Boolean).join(" ");
+    attrs["aria-describedby"] = describedBy || undefined;
+    return { gridProps: attrs };
+}
+/** The grid handler props of `tableProps`: `props` with the table keyboard delegate for the element. */
+export function tableGridProps(props, state, element) {
+    return { ...props, keyboardDelegate: tableKeyboardDelegate(props, state, element) };
+}
+/** The "sortable column" description of a column header (Android adds the sort order), or undefined. */
+export function tableColumnSortableDescription(props, state) {
+    const { node } = props;
+    if (!node.props?.allowsSorting)
+        return undefined;
+    let sortDescription = `${format(props.locale, "sortable")}`;
+    const isSortedColumn = state.sortDescriptor?.column === node.key;
+    const sortDirection = state.sortDescriptor?.direction;
+    // Android Talkback doesn't support aria-sort so we add sort order details to the aria-described by here
+    if (isSortedColumn && sortDirection && isAndroid())
+        sortDescription = `${sortDescription}, ${format(props.locale, sortDirection)}`;
+    return sortDescription;
+}
+/** Whether the column header press sorts (react-aria `usePress({ isDisabled })`). */
+export function tableColumnHeaderPressable(props, state) {
+    const { node } = props;
+    const isSelectionCellDisabled = node.props?.isSelectionCell && state.selectionManager.selectionMode === "single";
+    return !!node.props?.allowsSorting && !isSelectionCellDisabled;
+}
+/**
+ * Provides the behavior and accessibility implementation for a column header in a table (react-aria
+ * `useTableColumnHeader` → `tableColumnHeaderProps`). Reads state: bind as accessors. Wire the
+ * `gridCell<Event>` handlers (focusMode "child") and a press (`../interactions/press.tsx`) calling
+ * `tableColumnHeaderPress` when `tableColumnHeaderPressable`.
+ */
+export function tableColumnHeaderProps(props, state) {
+    const { node } = props;
+    const { gridCellProps: cellAttrs } = gridCellProps({ focusMode: "child", ...props }, state);
+    let ariaSort;
+    const isSortedColumn = state.sortDescriptor?.column === node.key;
+    const sortDirection = state.sortDescriptor?.direction;
+    // aria-sort not supported in Android Talkback
+    if (node.props?.allowsSorting && !isAndroid())
+        ariaSort = isSortedColumn ? sortDirection : "none";
+    const description = tableColumnSortableDescription(props, state);
+    const shouldDisableFocus = state.collection.size === 0;
+    return {
+        columnHeaderProps: {
+            ...cellAttrs,
+            "aria-describedby": description ? props.descriptionId : undefined,
+            // If the table is empty, make all column headers untabbable
+            ...(shouldDisableFocus ? { tabIndex: -1 } : null),
+            role: "columnheader",
+            id: getColumnHeaderId(state, node.key),
+            "aria-colspan": node.colSpan && node.colSpan > 1 ? node.colSpan : undefined,
+            "aria-sort": ariaSort,
+        },
+        isPressed: false,
+    };
+}
+/**
+ * The column header press: `state.sort(column)`, then the sort announcement (react-aria announces
+ * the changed sort description, assertive, 500 ms).
+ */
+export function tableColumnHeaderPress(props, state, sort, read) {
+    if (!tableColumnHeaderPressable(props, state))
+        return;
+    const before = tableSortDescription(props, state);
+    sort(props.node.key);
+    const after = untrack(() => tableSortDescription(props, read()));
+    if (after && after !== before)
+        announce(after, "assertive", 500);
+}
+/**
+ * react-aria's effect: an empty table drops a focused column header key. Call at the end of
+ * handlers that may empty the collection (and on render: no-op unless focused).
+ */
+export function tableColumnHeaderResetFocus(props, state) {
+    if (state.collection.size === 0 && untrack(() => state.selectionManager.focusedKey) === props.node.key)
+        state.selectionManager.setFocusedKey(null);
+}
+// --- useTableRow ---------------------------------------------------------------------------------
+const EXPANSION_KEYS = {
+    expand: { ltr: "ArrowRight", rtl: "ArrowLeft" },
+    collapse: { ltr: "ArrowLeft", rtl: "ArrowRight" },
+};
+function getLastChild(collection, node) {
+    if ("lastChildKey" in node)
+        return node.lastChildKey != null ? collection.getItem(node.lastChildKey) : null;
+    return Array.from(node.childNodes).findLast((item) => item.parentKey === node.key);
+}
+function treeGridRow(props, state) {
+    const { node } = props;
+    if (state.treeColumn == null)
+        return null;
+    const treeNode = state.collection.getItem(node.key);
+    if (treeNode == null)
+        return null;
+    const lastChild = getLastChild(state.collection, node);
+    const hasChildRows = !!(treeNode.props?.hasChildRows || treeNode.props?.UNSTABLE_childItems || lastChild?.type !== "cell");
+    const parent = state.collection.getItem(node.parentKey);
+    const isParentBody = parent.type === "tablebody" || parent.type === "body";
+    let lastSibling = getLastChild(state.collection, parent);
+    while (lastSibling && lastSibling.type !== "item" && lastSibling.prevKey != null)
+        lastSibling = state.collection.getItem(lastSibling.prevKey);
+    return {
+        hasChildRows,
+        attrs: {
+            "aria-expanded": hasChildRows ? state.expandedKeys === "all" || state.expandedKeys.has(node.key) : undefined,
+            "aria-level": treeNode.level + 1,
+            "aria-posinset": treeNode.index - (isParentBody ? 0 : state.collection.columnCount) + 1,
+            "aria-setsize": lastSibling.index - (isParentBody ? 0 : state.collection.columnCount) + 1,
+        },
+    };
+}
+/**
+ * Provides the behavior and accessibility implementation for a row in a table (react-aria
+ * `useTableRow` → `tableRowProps`): `gridRowProps` + virtualized aria-rowindex, treegrid
+ * expansion attributes, synthetic link attributes, aria-labelledby (row header cells), the expand
+ * button props. Reads state: bind as accessors. Wire the `gridRow<Event>` handlers and
+ * `tableRowKeyDown` (treegrid expansion keys) on the row.
+ */
+export function tableRowProps(props, state, locale) {
+    const { node, isVirtualized } = props;
+    const { rowProps, ...states } = gridRowProps(props, state);
+    if (isVirtualized && state.treeColumn == null)
+        rowProps["aria-rowindex"] = node.index + 1 + state.collection.headerRows.length; // aria-rowindex is 1 based
+    else
+        delete rowProps["aria-rowindex"];
+    const isExpanded = state.treeColumn != null && (state.expandedKeys === "all" || state.expandedKeys.has(node.key));
+    let expandButtonProps = {};
+    const tree = treeGridRow(props, state);
+    if (tree) {
+        // useLabels: aria-label + aria-labelledby → labelled by itself + the row headers.
+        const labelledBy = getRowLabelledBy(state, node.key);
+        expandButtonProps = {
+            isDisabled: states.isDisabled,
+            excludeFromTabOrder: true,
+            preventFocusOnPress: true,
+            "data-react-aria-prevent-focus": true,
+            "aria-label": format(locale, isExpanded ? "collapse" : "expand"),
+            "aria-labelledby": labelledBy ? [props.expandButtonId, labelledBy].filter(Boolean).join(" ") : undefined,
+            id: props.expandButtonId,
+        };
+    }
+    const linkProps = states.hasAction ? syntheticLinkAttrs((node.props ?? {}), props.router) : {};
+    return {
+        rowProps: { ...rowProps, ...(tree?.attrs ?? {}), ...linkProps, "aria-labelledby": getRowLabelledBy(state, node.key) },
+        expandButtonProps,
+        ...states,
+    };
+}
+/** keydown on a treegrid row: expand / collapse (RTL aware), collapse on a leaf moves to the parent. */
+export function tableRowKeyDown(e, props, state) {
+    const tree = treeGridRow(props, state);
+    if (!tree)
+        return;
+    const treeNode = state.collection.getItem(props.node.key);
+    const direction = elementDirection(e.currentTarget);
+    const focusedKey = untrack(() => state.selectionManager.focusedKey);
+    const expandedKeys = state.expandedKeys;
+    if (e.key === EXPANSION_KEYS.expand[direction] && focusedKey === treeNode.key && tree.hasChildRows && expandedKeys !== "all" && !expandedKeys.has(treeNode.key)) {
+        state.toggleKey(treeNode.key);
+        e.stopPropagation();
+    }
+    else if (e.key === EXPANSION_KEYS.collapse[direction] && focusedKey === treeNode.key) {
+        if (expandedKeys !== "all") {
+            if (tree.hasChildRows && expandedKeys.has(treeNode.key)) {
+                state.toggleKey(treeNode.key);
+                e.stopPropagation();
+            }
+            else if (!expandedKeys.has(treeNode.key) && treeNode.parentKey != null && treeNode.level > 0) {
+                // Item is a leaf or already collapsed, move focus to parent
+                state.selectionManager.setFocusedKey(treeNode.parentKey);
+                e.stopPropagation();
+            }
+        }
+        else {
+            state.toggleKey(treeNode.key);
+            e.stopPropagation();
+        }
+    }
+}
+/** The expand button's `onPress` (react-aria `expandButtonProps.onPress`). */
+export function tableRowExpandPress(props, state) {
+    const isDisabled = state.selectionManager.isDisabled(props.node.key) || state.collection.size === 0;
+    if (!isDisabled) {
+        state.toggleKey(props.node.key);
+        state.selectionManager.setFocused(true);
+        state.selectionManager.setFocusedKey(props.node.key);
+    }
+}
+/** Provides the behavior and accessibility implementation for a header row in a table (react-aria `useTableHeaderRow`). */
+export function tableHeaderRowProps(props, state) {
+    const rowProps = { role: "row" };
+    if (props.isVirtualized && state.treeColumn == null)
+        rowProps["aria-rowindex"] = props.node.index + 1; // aria-rowindex is 1 based
+    return { rowProps };
+}
+/**
+ * Provides the behavior and accessibility implementation for a cell in a table (react-aria
+ * `useTableCell` → `tableCellProps`): `gridCellProps`, row header cells get role rowheader + the id
+ * rows are labelled by. Reads state. Wire the `gridCell<Event>` handlers.
+ */
+export function tableCellProps(props, state) {
+    const { gridCellProps: attrs, isPressed } = gridCellProps(props, state);
+    const columnKey = props.node.column?.key;
+    if (columnKey != null && state.collection.rowHeaderColumnKeys.has(columnKey)) {
+        attrs.role = "rowheader";
+        attrs.id = getCellId(state, props.node.parentKey, columnKey);
+    }
+    return { gridCellProps: attrs, isPressed };
+}
+/** Provides the behavior and accessibility implementation for a row selection checkbox in a table (react-aria `useTableSelectionCheckbox`). */
+export function tableSelectionCheckboxProps(props, state) {
+    const { checkboxProps } = { checkboxProps: gridSelectionCheckboxProps(props, state) };
+    return { checkboxProps: { ...checkboxProps, "aria-labelledby": `${checkboxProps.id} ${getRowLabelledBy(state, props.key)}` } };
+}
+/** The row selection checkbox's `onChange`: toggles the row's selection. */
+export function tableSelectionCheckboxChange(_isSelected, props, state) {
+    state.selectionManager.toggleSelection(props.key);
+}
+/** Provides the behavior and accessibility implementation for the select all checkbox in a table (react-aria `useTableSelectAllCheckbox`). */
+export function tableSelectAllCheckboxProps(state, locale) {
+    const { isEmpty, isSelectAll, selectionMode } = state.selectionManager;
+    return {
+        checkboxProps: {
+            "aria-label": format(locale, selectionMode === "single" ? "select" : "selectAll"),
+            isSelected: isSelectAll,
+            isDisabled: selectionMode !== "multiple" || state.collection.size === 0 || (state.collection.rows.length === 1 && state.collection.rows[0].type === "loader"),
+            isIndeterminate: !isEmpty && !isSelectAll,
+        },
+    };
+}
+/** The select all checkbox's `onChange`. */
+export function tableSelectAllCheckboxChange(state) {
+    state.selectionManager.toggleSelectAll();
+}
+export { gridKeyboardDelegate };

package/table/collection.d.ts

@@ -0,0 +1,49 @@
+import { BaseCollection, CollectionNode, FilterableNode } from "../collections/base.js";
+import { type ITableCollection } from "../collections/table.js";
+import type { GridNode } from "../collections/grid.js";
+import type { Key, Node } from "../collections/types.js";
+export declare class TableHeaderNode<T> extends CollectionNode<T> {
+    static readonly type = "tableheader";
+}
+export declare class TableColumnNode extends CollectionNode<unknown> {
+    static readonly type = "column";
+    /** Read live by the column resize state / Column part: a width change keeps the rendered header (resizer drag). */
+    static readonly liveProps: string[];
+}
+export declare class TableBodyNode<T> extends FilterableNode<T> {
+    static readonly type = "tablebody";
+}
+export declare class TableFooterNode<T> extends FilterableNode<T> {
+    static readonly type = "tablefooter";
+}
+export declare class TableRowNode<T> extends CollectionNode<T> {
+    static readonly type = "item";
+    filter(collection: BaseCollection<T>, newCollection: BaseCollection<T>, filterFn: (textValue: string, node: Node<T>) => boolean): TableRowNode<T> | null;
+}
+export declare class TableCellNode extends CollectionNode<unknown> {
+    static readonly type = "cell";
+}
+export declare class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T> {
+    headerRows: GridNode<T>[];
+    columns: GridNode<T>[];
+    rows: GridNode<T>[];
+    rowHeaderColumnKeys: Set<Key>;
+    head: CollectionNode<T>;
+    columnsDirty: boolean;
+    expandedKeys: Set<Key>;
+    withExpandedKeys(expandedKeys: Set<Key>): this;
+    addNode(node: CollectionNode<T>): void;
+    private getRowNodes;
+    get body(): GridNode<T>;
+    commit(firstKey: Key | null, lastKey: Key | null, isSSR?: boolean): void;
+    private updateColumns;
+    get columnCount(): number;
+    [Symbol.iterator](): IterableIterator<Node<T>>;
+    getFirstKey(): Key | null;
+    getLastKey(): Key | null;
+    getKeyAfter(key: Key): Key | null;
+    getKeyBefore(key: Key): Key | null;
+    getChildren(key: Key): Iterable<Node<T>>;
+    clone(): this;
+    getTextValue(key: Key): string;
+}

package/table/collection.js

@@ -0,0 +1,259 @@
+// Ported from react-aria-components (src/Table.tsx: TableCollection, TableHeaderNode, TableColumnNode,
+// TableBodyNode, TableFooterNode, TableRowNode, TableCellNode), Apache-2.0, © Adobe.
+//
+// The collection RAC's `<Table>` builds from its JSX parts (`../collections/base.ts` BaseCollection
+// subclass): header rows from nested columns (`buildHeaderRows`), the leaf columns, the row header
+// column keys, the body / footer rows (nested rows flattened through `expandedKeys`).
+// Rivet: built by `../collections/components.tsx` `collectionOf(content, () => new TableCollection())`
+// (BUILD mode). `getRows` is named `getRowNodes` (TS: `rows` field and a private `getRows` would
+// read alike); same behaviour.
+import { BaseCollection, CollectionNode, FilterableNode } from "../collections/base.js";
+import { buildHeaderRows } from "../collections/table.js";
+export class TableHeaderNode extends CollectionNode {
+    static type = "tableheader";
+}
+export class TableColumnNode extends CollectionNode {
+    static type = "column";
+    /** Read live by the column resize state / Column part: a width change keeps the rendered header (resizer drag). */
+    static liveProps = ["width", "defaultWidth", "minWidth", "maxWidth"];
+}
+export class TableBodyNode extends FilterableNode {
+    static type = "tablebody";
+}
+export class TableFooterNode extends FilterableNode {
+    static type = "tablefooter";
+}
+export class TableRowNode extends CollectionNode {
+    static type = "item";
+    filter(collection, newCollection, filterFn) {
+        const cells = collection.getChildren(this.key);
+        for (const cell of cells) {
+            if (filterFn(cell.textValue, cell)) {
+                const clone = this.clone();
+                newCollection.addDescendants(clone, collection);
+                return clone;
+            }
+        }
+        return null;
+    }
+}
+export class TableCellNode extends CollectionNode {
+    static type = "cell";
+}
+export class TableCollection extends BaseCollection {
+    headerRows = [];
+    columns = [];
+    rows = [];
+    rowHeaderColumnKeys = new Set();
+    head = new TableHeaderNode(-1);
+    columnsDirty = true;
+    expandedKeys = new Set();
+    withExpandedKeys(expandedKeys) {
+        const collection = this.clone();
+        collection.expandedKeys = expandedKeys;
+        collection.frozen = this.frozen;
+        collection.rows = Array.from(collection.getRowNodes());
+        return collection;
+    }
+    addNode(node) {
+        super.addNode(node);
+        this.columnsDirty ||= node.type === "column";
+        if (node.type === "tableheader")
+            this.head = node;
+    }
+    getRowNodes() {
+        const rows = [];
+        for (const child of this) {
+            if (child.type === "tablebody" || child.type === "tablefooter")
+                rows.push(...this.getChildren(child.key));
+        }
+        return rows;
+    }
+    get body() {
+        for (const child of this)
+            if (child.type === "tablebody")
+                return child;
+        return new TableBodyNode(-2);
+    }
+    commit(firstKey, lastKey, isSSR = false) {
+        this.updateColumns(isSSR);
+        this.firstKey = firstKey;
+        this.lastKey = lastKey;
+        this.rows = [];
+        for (const row of this.getRowNodes()) {
+            const lastChildKey = row.lastChildKey;
+            if (lastChildKey != null) {
+                let lastCell = this.getItem(lastChildKey);
+                while (lastCell && lastCell.type !== "cell")
+                    lastCell = lastCell.prevKey != null ? this.getItem(lastCell.prevKey) : null;
+                if (lastCell) {
+                    const numberOfCellsInRow = (lastCell.colIndex ?? lastCell.index) + (lastCell.colSpan ?? 1);
+                    if (numberOfCellsInRow !== this.columns.length && !isSSR) {
+                        throw new Error(`Cell count must match column count. Found ${numberOfCellsInRow} cells and ${this.columns.length} columns.`);
+                    }
+                }
+            }
+            this.rows.push(row);
+        }
+        super.commit(firstKey, lastKey, isSSR);
+    }
+    updateColumns(isSSR) {
+        if (!this.columnsDirty)
+            return;
+        this.rowHeaderColumnKeys = new Set();
+        this.columns = [];
+        const columnKeyMap = new Map();
+        const visit = (node) => {
+            switch (node.type) {
+                case "column":
+                    columnKeyMap.set(node.key, node);
+                    if (!node.hasChildNodes) {
+                        node.index = this.columns.length;
+                        this.columns.push(node);
+                        if (node.props.isRowHeader)
+                            this.rowHeaderColumnKeys.add(node.key);
+                    }
+                    break;
+            }
+            for (const child of this.getChildren(node.key))
+                visit(child);
+        };
+        for (const node of this.getChildren(this.head.key))
+            visit(node);
+        this.headerRows = buildHeaderRows(columnKeyMap, this.columns);
+        this.columnsDirty = false;
+        if (this.rowHeaderColumnKeys.size === 0 && this.columns.length > 0 && !isSSR) {
+            throw new Error("A table must have at least one Column with the isRowHeader prop set to true");
+        }
+    }
+    get columnCount() {
+        return this.columns.length;
+    }
+    *[Symbol.iterator]() {
+        let key = this.firstKey;
+        while (key != null) {
+            const node = this.getItem(key);
+            if (node)
+                yield node;
+            key = node?.nextKey ?? null;
+        }
+    }
+    getFirstKey() {
+        for (const child of this)
+            if (child.type === "tablebody")
+                return child.firstChildKey ?? null;
+        return null;
+    }
+    getLastKey() {
+        const key = this.lastKey;
+        if (key == null)
+            return null;
+        let node = this.getItem(key);
+        while (node?.lastChildKey != null && (node.type !== "item" || this.expandedKeys.has(node.key)))
+            node = this.getItem(node.lastChildKey);
+        return node?.key ?? null;
+    }
+    getKeyAfter(key) {
+        const node = this.getItem(key);
+        if (node?.type === "column")
+            return node.nextKey ?? null;
+        if (!node)
+            return null;
+        if (node.type === "item" && node.firstChildKey != null && this.expandedKeys.has(node.key)) {
+            let child = this.getItem(node.firstChildKey);
+            while (child) {
+                if (child.type === "item")
+                    return child.key;
+                child = child.nextKey != null ? this.getItem(child.nextKey) : null;
+            }
+        }
+        return super.getKeyAfter(key);
+    }
+    getKeyBefore(key) {
+        let node = this.getItem(key);
+        if (node?.type === "column")
+            return node.prevKey ?? null;
+        if (!node)
+            return null;
+        let k = null;
+        if (node.prevKey != null) {
+            node = this.getItem(node.prevKey);
+            // Traverse to the deepest expanded child.
+            while (node && (node.type !== "item" || this.expandedKeys.has(node.key)) && node.lastChildKey != null)
+                node = this.getItem(node.lastChildKey);
+            k = node?.key ?? null;
+        }
+        if (k == null)
+            k = node.parentKey;
+        if (k != null && this.getItem(k)?.type === "tableheader")
+            return null;
+        return k;
+    }
+    getChildren(key) {
+        const item = this.getItem(key);
+        if (!item) {
+            for (const row of this.headerRows)
+                if (row.key === key)
+                    return row.childNodes;
+        }
+        // Flatten all rows into the body.
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        if (item?.type === "tablebody" || item?.type === "tablefooter") {
+            return {
+                *[Symbol.iterator]() {
+                    const firstKey = item.firstChildKey;
+                    let node = firstKey != null ? self.getItem(firstKey) : null;
+                    while (node) {
+                        yield node;
+                        const key = self.getKeyAfter(node.key);
+                        node = key != null ? self.getItem(key) : null;
+                        if (node && node.parentKey === item.parentKey)
+                            break;
+                    }
+                },
+            };
+        }
+        return {
+            *[Symbol.iterator]() {
+                const parent = self.getItem(key);
+                let node = parent?.firstChildKey != null ? self.getItem(parent.firstChildKey) : null;
+                while (node) {
+                    yield node;
+                    node = node.nextKey != null ? self.getItem(node.nextKey) : null;
+                    // Return only cells as children of rows (nested rows are flattened into the body).
+                    if (parent?.type === "item" && node?.type !== "cell")
+                        break;
+                }
+            },
+        };
+    }
+    clone() {
+        const collection = super.clone();
+        collection.headerRows = this.headerRows;
+        collection.columns = this.columns;
+        collection.rows = this.rows;
+        collection.rowHeaderColumnKeys = this.rowHeaderColumnKeys;
+        collection.head = this.head;
+        return collection;
+    }
+    getTextValue(key) {
+        const row = this.getItem(key);
+        if (!row)
+            return "";
+        // If the row has a textValue, use that.
+        if (row.textValue)
+            return row.textValue;
+        // Otherwise combine the text of each of the row header columns.
+        const rowHeaderColumnKeys = this.rowHeaderColumnKeys;
+        const text = [];
+        for (const cell of this.getChildren(key)) {
+            const column = this.columns[cell.index];
+            if (rowHeaderColumnKeys.has(column.key) && cell.textValue)
+                text.push(cell.textValue);
+            if (text.length === rowHeaderColumnKeys.size)
+                break;
+        }
+        return text.join(" ");
+    }
+}