@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/table/TableCollection.ts

@@ -1,16 +1,22 @@
 /**
  * TableCollection - A collection class for table data.
  * Based on @react-stately/table/TableCollection.
+ *
+ * Supports a plain (flat) table and, when an `expandedKeys` option is supplied, a
+ * tree grid: `childRows` are walked recursively, each parent row keeps its full
+ * structure (cells followed by every child row), and only rows whose ancestors are
+ * all expanded are flattened into the navigable body. Mirrors the structure produced
+ * by `@react-stately/table`'s `generateTreeGridCollection`.
  */
 
-import type { Key } from '../collections/types';
-import type { GridNode, GridNodeType } from '../grid/types';
+import type { Key } from "../collections/types";
+import type { GridNode, GridNodeType } from "../grid/types";
 import type {
   TableCollection as ITableCollection,
   TableCollectionOptions,
   ColumnDefinition,
   RowDefinition,
-} from './types';
+} from "./types";
 
 /**
  * Creates a table collection from column and row definitions.
@@ -24,6 +30,10 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
   private _keyMap: Map<Key, GridNode<T>> = new Map();
   private _rowHeaderColumnKeys: Set<Key>;
   private _size: number = 0;
+  /** Visible rows in DFS order. Drives size, navigation, iteration and the `rows` list. */
+  private _flattenedRows: GridNode<T>[] = [];
+  private _treeColumn: Key | null = null;
+  private _userColumnCount: number = 0;
 
   constructor(options: TableCollectionOptions<T>) {
     const {
@@ -33,79 +43,95 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
       getTextValue,
       showSelectionCheckboxes = false,
       rowHeaderColumnKeys,
+      expandedKeys,
     } = options;
 
-    // Build columns
+    // Passing `expandedKeys` (even an empty set) selects tree-grid mode.
+    const isTreeGrid = expandedKeys !== undefined;
+
     this._columns = this.buildColumns(columns, showSelectionCheckboxes);
 
-    // Determine row header column keys
     this._rowHeaderColumnKeys = rowHeaderColumnKeys ?? this.getDefaultRowHeaderColumnKeys();
 
-    // Build header rows
     this._headerRows = this.buildHeaderRows();
 
-    // Build head node
     if (this._headerRows.length > 0) {
       this._head = {
-        type: 'headerrow' as GridNodeType,
-        key: 'header',
+        type: "headerrow" as GridNodeType,
+        key: "header",
         index: 0,
         level: 0,
         hasChildNodes: true,
         childNodes: this._headerRows,
         value: null,
-        textValue: '',
+        textValue: "",
       };
-      this._keyMap.set('header', this._head);
+      this._keyMap.set("header", this._head);
+    }
+
+    let bodyChildren: GridNode<T>[];
+    if (isTreeGrid) {
+      const built = this.buildTreeRows(rows, expandedKeys, getKey, getTextValue);
+      bodyChildren = built.topLevelRows;
+      this._flattenedRows = built.flattenedRows;
+      this._userColumnCount = this.countLeafColumns();
+      this._treeColumn =
+        options.treeColumn !== undefined
+          ? options.treeColumn
+          : (this._rowHeaderColumnKeys.values().next().value ?? null);
+    } else {
+      const bodyRows = this.buildRows(rows, getKey, getTextValue);
+      bodyChildren = bodyRows;
+      this._flattenedRows = bodyRows;
+      this._userColumnCount = this.countLeafColumns();
+      this._treeColumn = null;
     }
 
-    // Build body rows
-    const bodyRows = this.buildRows(rows, getKey, getTextValue);
-    this._size = bodyRows.length;
+    this._size = this._flattenedRows.length;
 
-    // Build body node
     this._body = {
-      type: 'item' as GridNodeType,
-      key: 'body',
+      type: "item" as GridNodeType,
+      key: "body",
       index: this._headerRows.length,
       level: 0,
       hasChildNodes: true,
-      childNodes: bodyRows,
+      // The body's children retain the full tree structure (top-level rows with their
+      // child rows nested inside) so sibling-based aria-posinset/aria-setsize work; the
+      // flattened visible list lives in `_flattenedRows`. For a flat table these are the
+      // same array.
+      childNodes: bodyChildren,
       value: null,
-      textValue: '',
+      textValue: "",
     };
-    this._keyMap.set('body', this._body);
+    this._keyMap.set("body", this._body);
 
-    // Combine all rows
-    this._rows = [...this._headerRows, ...bodyRows];
+    this._rows = [...this._headerRows, ...this._flattenedRows];
   }
 
   private buildColumns(
     columns: ColumnDefinition<T>[],
-    showSelectionCheckboxes: boolean
+    showSelectionCheckboxes: boolean,
   ): GridNode<T>[] {
     const result: GridNode<T>[] = [];
     let colIndex = 0;
 
-    // Add selection column if needed
     if (showSelectionCheckboxes) {
       const selectionColumn: GridNode<T> = {
-        type: 'column' as GridNodeType,
-        key: '__selection__',
+        type: "column" as GridNodeType,
+        key: "__selection__",
         index: colIndex,
         column: 0,
         level: 0,
         hasChildNodes: false,
         childNodes: [],
         value: null,
-        textValue: 'Selection',
+        textValue: "Selection",
       };
       result.push(selectionColumn);
       this._keyMap.set(selectionColumn.key, selectionColumn);
       colIndex++;
     }
 
-    // Build user columns
     for (const col of columns) {
       const node = this.buildColumnNode(col, colIndex);
       result.push(node);
@@ -116,24 +142,25 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
   }
 
   private buildColumnNode(col: ColumnDefinition<T>, index: number): GridNode<T> {
+    const key = col.key ?? (col as ColumnDefinition<T> & { id?: Key }).id ?? index;
     const node: GridNode<T> = {
-      type: 'column' as GridNodeType,
-      key: col.key,
+      type: "column" as GridNodeType,
+      key,
       index,
       column: index,
       level: 0,
       hasChildNodes: (col.children?.length ?? 0) > 0,
       childNodes: [],
       value: null,
-      textValue: col.textValue ?? col.name ?? String(col.key),
+      props: { columnDefinition: { ...col, key } },
+      textValue: col.textValue ?? col.name ?? String(key),
     };
 
-    // Build child columns if present (for column groups)
     if (col.children && col.children.length > 0) {
       let childIndex = 0;
       for (const child of col.children) {
         const childNode = this.buildColumnNode(child, childIndex);
-        childNode.parentKey = col.key;
+        childNode.parentKey = key;
         childNode.level = 1;
         node.childNodes.push(childNode);
         childIndex++;
@@ -145,23 +172,51 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
   }
 
   private getDefaultRowHeaderColumnKeys(): Set<Key> {
-    // Default to first non-selection column as row header
+    const explicitRowHeaderKeys = this._columns
+      .filter((col) => col.key !== "__selection__")
+      .filter((col) => {
+        const definition = col.props?.columnDefinition as ColumnDefinition<T> | undefined;
+        return !!definition?.isRowHeader;
+      })
+      .map((col) => col.key);
+
+    if (explicitRowHeaderKeys.length > 0) {
+      return new Set(explicitRowHeaderKeys);
+    }
+
+    // Default to first non-selection column as row header.
     for (const col of this._columns) {
-      if (col.key !== '__selection__') {
+      if (col.key !== "__selection__") {
         return new Set([col.key]);
       }
     }
     return new Set();
   }
 
+  /** Counts the leaf columns supplied by the user (excludes the selection column). */
+  private countLeafColumns(): number {
+    let count = 0;
+    const visit = (col: GridNode<T>) => {
+      if (col.key === "__selection__") {
+        return;
+      }
+      if (col.childNodes.length > 0) {
+        col.childNodes.forEach(visit);
+      } else {
+        count++;
+      }
+    };
+    this._columns.forEach(visit);
+    return count;
+  }
+
   private buildHeaderRows(): GridNode<T>[] {
     if (this._columns.length === 0) {
       return [];
     }
 
-    // Build a single header row containing all columns
     const headerCells: GridNode<T>[] = this._columns.map((col, index) => ({
-      type: 'column' as GridNodeType,
+      type: "column" as GridNodeType,
       key: `header-${col.key}`,
       index,
       column: index,
@@ -170,19 +225,19 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
       childNodes: [],
       value: null,
       textValue: col.textValue,
-      parentKey: 'headerrow-0',
+      parentKey: "headerrow-0",
     }));
 
     const headerRow: GridNode<T> = {
-      type: 'headerrow' as GridNodeType,
-      key: 'headerrow-0',
+      type: "headerrow" as GridNodeType,
+      key: "headerrow-0",
       index: 0,
       rowIndex: 0,
       level: 0,
       hasChildNodes: true,
       childNodes: headerCells,
       value: null,
-      textValue: '',
+      textValue: "",
     };
 
     this._keyMap.set(headerRow.key, headerRow);
@@ -191,10 +246,51 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
     return [headerRow];
   }
 
+  /**
+   * Builds the cell nodes for one row. Does not register the cells in the key map;
+   * the caller registers cells once the owning row is known to be present.
+   */
+  private buildCells(
+    rowKey: Key,
+    value: T,
+    rowLevel: number,
+    getTextValue?: (item: T, column: ColumnDefinition<T>) => string,
+  ): GridNode<T>[] {
+    return this._columns.map((col, colIndex) => {
+      const cellKey = `${rowKey}-${col.key}`;
+      const columnDefinition =
+        (col.props?.columnDefinition as ColumnDefinition<T> | undefined) ??
+        ({ key: col.key } as ColumnDefinition<T>);
+      const cellTextValue =
+        col.key === "__selection__"
+          ? "Selection"
+          : getTextValue
+            ? getTextValue(value, columnDefinition)
+            : String((value as Record<string, unknown>)?.[String(col.key)] ?? "");
+
+      const cell: GridNode<T> = {
+        type: this._rowHeaderColumnKeys.has(col.key)
+          ? ("rowheader" as GridNodeType)
+          : ("cell" as GridNodeType),
+        key: cellKey,
+        index: colIndex,
+        column: colIndex,
+        level: rowLevel + 1,
+        hasChildNodes: false,
+        childNodes: [],
+        value,
+        textValue: cellTextValue,
+        parentKey: rowKey,
+      };
+
+      return cell;
+    });
+  }
+
   private buildRows(
     rows: RowDefinition<T>[] | T[],
     getKey?: (item: T) => Key,
-    getTextValue?: (item: T, column: ColumnDefinition<T>) => string
+    getTextValue?: (item: T, column: ColumnDefinition<T>) => string,
   ): GridNode<T>[] {
     const result: GridNode<T>[] = [];
     const rowIndexOffset = this._headerRows.length;
@@ -203,41 +299,19 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
       const row = rows[i];
       const isRowDef = this.isRowDefinition(row);
 
-      const key = isRowDef ? row.key : getKey?.(row as T) ?? i;
+      const key = isRowDef ? row.key : (getKey?.(row as T) ?? i);
       const value = isRowDef ? row.value : (row as T);
-      const textValue = isRowDef ? row.textValue : undefined;
-
-      // Build cells for this row
-      const cells: GridNode<T>[] = this._columns.map((col, colIndex) => {
-        const cellKey = `${key}-${col.key}`;
-        const cellTextValue =
-          col.key === '__selection__'
-            ? 'Selection'
-            : getTextValue
-              ? getTextValue(value, { key: col.key } as ColumnDefinition<T>)
-              : String((value as Record<string, unknown>)?.[String(col.key)] ?? '');
-
-        const cell: GridNode<T> = {
-          type: this._rowHeaderColumnKeys.has(col.key)
-            ? ('rowheader' as GridNodeType)
-            : ('cell' as GridNodeType),
-          key: cellKey,
-          index: colIndex,
-          column: colIndex,
-          level: 1,
-          hasChildNodes: false,
-          childNodes: [],
-          value,
-          textValue: cellTextValue,
-          parentKey: key,
-        };
-
-        this._keyMap.set(cellKey, cell);
-        return cell;
-      });
+      const textValue = isRowDef
+        ? row.textValue
+        : typeof (row as Record<string, unknown>)?.textValue === "string"
+          ? ((row as Record<string, unknown>).textValue as string)
+          : undefined;
+
+      const cells = this.buildCells(key, value as T, 0, getTextValue);
+      cells.forEach((cell) => this._keyMap.set(cell.key, cell));
 
       const rowNode: GridNode<T> = {
-        type: 'item' as GridNodeType,
+        type: "item" as GridNodeType,
         key,
         index: i,
         rowIndex: rowIndexOffset + i,
@@ -245,7 +319,7 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
         hasChildNodes: true,
         childNodes: cells,
         value,
-        textValue: textValue ?? cells.map((c) => c.textValue).join(' '),
+        textValue: textValue ?? cells.map((c) => c.textValue).join(" "),
       };
 
       this._keyMap.set(key, rowNode);
@@ -255,16 +329,101 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
     return result;
   }
 
+  /**
+   * Builds the tree-grid rows: every row keeps its full structure (cells then all child
+   * rows, expanded or not) while only the rows whose ancestors are all expanded are
+   * registered in the key map and pushed into the flattened body. Mirrors
+   * `generateTreeGridCollection` upstream.
+   */
+  private buildTreeRows(
+    rows: RowDefinition<T>[] | T[],
+    expandedKeys: "all" | Set<Key>,
+    getKey?: (item: T) => Key,
+    getTextValue?: (item: T, column: ColumnDefinition<T>) => string,
+  ): { topLevelRows: GridNode<T>[]; flattenedRows: GridNode<T>[] } {
+    const isExpanded = (key: Key): boolean => expandedKeys === "all" || expandedKeys.has(key);
+
+    // Build the full tree structure without touching the key map. `index` is the row's
+    // position among its same-level siblings, so aria-posinset/aria-setsize read directly.
+    const buildRowNode = (
+      row: RowDefinition<T> | T,
+      level: number,
+      parentKey: Key | null,
+      indexAmongSiblings: number,
+    ): GridNode<T> => {
+      const isRowDef = this.isRowDefinition(row);
+      const key = isRowDef ? row.key : (getKey?.(row as T) ?? indexAmongSiblings);
+      const value = (isRowDef ? row.value : (row as T)) as T;
+      const textValue = isRowDef
+        ? row.textValue
+        : typeof (row as Record<string, unknown>)?.textValue === "string"
+          ? ((row as Record<string, unknown>).textValue as string)
+          : undefined;
+
+      const cells = this.buildCells(key, value, level, getTextValue);
+
+      const childRowDefs = isRowDef ? (row.childRows ?? []) : [];
+      const hasChildRows = childRowDefs.length > 0 || (isRowDef && !!row.hasChildRows);
+
+      const childRowNodes = childRowDefs.map((child, childIdx) =>
+        buildRowNode(child, level + 1, key, childIdx),
+      );
+
+      const childNodes = [...cells, ...childRowNodes];
+      const rowNode: GridNode<T> = {
+        type: "item" as GridNodeType,
+        key,
+        index: indexAmongSiblings,
+        level,
+        parentKey,
+        hasChildNodes: true,
+        childNodes,
+        value,
+        textValue: textValue ?? cells.map((c) => c.textValue).join(" "),
+        isExpandable: hasChildRows,
+        isExpanded: hasChildRows && isExpanded(key),
+        firstChildKey: childNodes[0]?.key ?? null,
+        lastChildKey: childNodes[childNodes.length - 1]?.key ?? null,
+      };
+
+      return rowNode;
+    };
+
+    const topLevelRows = rows.map((row, i) => buildRowNode(row, 0, "body", i));
+
+    // Flatten the visible rows (DFS). A row is visited iff every ancestor is expanded;
+    // visiting a row registers it and its cells, then descends into its child rows only
+    // when the row itself is expanded.
+    const flattenedRows: GridNode<T>[] = [];
+    const rowIndexOffset = this._headerRows.length;
+    const visit = (node: GridNode<T>) => {
+      node.rowIndex = rowIndexOffset + flattenedRows.length;
+      flattenedRows.push(node);
+      this._keyMap.set(node.key, node);
+      for (const child of node.childNodes) {
+        if (child.type !== "item") {
+          this._keyMap.set(child.key, child);
+        }
+      }
+      if (isExpanded(node.key)) {
+        for (const child of node.childNodes) {
+          if (child.type === "item") {
+            visit(child);
+          }
+        }
+      }
+    };
+    for (const node of topLevelRows) {
+      visit(node);
+    }
+
+    return { topLevelRows, flattenedRows };
+  }
+
   private isRowDefinition(row: unknown): row is RowDefinition<T> {
-    return (
-      typeof row === 'object' &&
-      row !== null &&
-      'key' in row &&
-      'value' in row
-    );
+    return typeof row === "object" && row !== null && "key" in row && "value" in row;
   }
 
-  // Collection interface implementation
   get size(): number {
     return this._size;
   }
@@ -301,6 +460,21 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
     return this._rowHeaderColumnKeys;
   }
 
+  /** The key of the column that renders the tree-grid affordance, or `null` for a flat table. */
+  get treeColumn(): Key | null {
+    return this._treeColumn;
+  }
+
+  /** The number of leaf columns provided by the user (excludes the selection column). */
+  get userColumnCount(): number {
+    return this._userColumnCount;
+  }
+
+  /** The key map of all present nodes (visible rows, their cells, columns and the body). */
+  get keyMap(): Map<Key, GridNode<T>> {
+    return this._keyMap;
+  }
+
   getKeys(): Iterable<Key> {
     return this._keyMap.keys();
   }
@@ -310,11 +484,10 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
   }
 
   at(index: number): GridNode<T> | null {
-    const bodyRows = this._body.childNodes;
-    if (index < 0 || index >= bodyRows.length) {
+    if (index < 0 || index >= this._flattenedRows.length) {
       return null;
     }
-    return bodyRows[index];
+    return this._flattenedRows[index];
   }
 
   getChildren(key: Key): Iterable<GridNode<T>> {
@@ -324,7 +497,7 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
 
   getTextValue(key: Key): string {
     const node = this._keyMap.get(key);
-    return node?.textValue ?? '';
+    return node?.textValue ?? "";
   }
 
   getCell(rowKey: Key, columnKey: Key): GridNode<T> | null {
@@ -333,14 +506,12 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
   }
 
   getFirstKey(): Key | null {
-    // Return first body row key
-    const bodyRows = this._body.childNodes;
+    const bodyRows = this._flattenedRows;
     return bodyRows.length > 0 ? bodyRows[0].key : null;
   }
 
   getLastKey(): Key | null {
-    // Return last body row key
-    const bodyRows = this._body.childNodes;
+    const bodyRows = this._flattenedRows;
     return bodyRows.length > 0 ? bodyRows[bodyRows.length - 1].key : null;
   }
 
@@ -348,8 +519,7 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
     const node = this._keyMap.get(key);
     if (!node) return null;
 
-    // Find in body rows
-    const bodyRows = this._body.childNodes;
+    const bodyRows = this._flattenedRows;
     const index = bodyRows.findIndex((r) => r.key === key);
     if (index > 0) {
       return bodyRows[index - 1].key;
@@ -361,8 +531,7 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
     const node = this._keyMap.get(key);
     if (!node) return null;
 
-    // Find in body rows
-    const bodyRows = this._body.childNodes;
+    const bodyRows = this._flattenedRows;
     const index = bodyRows.findIndex((r) => r.key === key);
     if (index >= 0 && index < bodyRows.length - 1) {
       return bodyRows[index + 1].key;
@@ -371,8 +540,8 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
   }
 
   *[Symbol.iterator](): Iterator<GridNode<T>> {
-    // Only iterate body rows, not header rows
-    for (const row of this._body.childNodes) {
+    // Only iterate visible body rows, not header rows.
+    for (const row of this._flattenedRows) {
       yield row;
     }
   }
@@ -381,8 +550,6 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
 /**
  * Creates a table collection from options.
  */
-export function createTableCollection<T>(
-  options: TableCollectionOptions<T>
-): TableCollection<T> {
+export function createTableCollection<T>(options: TableCollectionOptions<T>): TableCollection<T> {
   return new TableCollection(options);
 }