@proyecto-viviana/solid-stately 0.2.2 → 0.2.3

package/src/table/TableCollection.ts

@@ -0,0 +1,388 @@
+/**
+ * TableCollection - A collection class for table data.
+ * Based on @react-stately/table/TableCollection.
+ */
+
+import type { Key } from '../collections/types';
+import type { GridNode, GridNodeType } from '../grid/types';
+import type {
+  TableCollection as ITableCollection,
+  TableCollectionOptions,
+  ColumnDefinition,
+  RowDefinition,
+} from './types';
+
+/**
+ * Creates a table collection from column and row definitions.
+ */
+export class TableCollection<T = unknown> implements ITableCollection<T> {
+  private _columns: GridNode<T>[] = [];
+  private _rows: GridNode<T>[] = [];
+  private _headerRows: GridNode<T>[] = [];
+  private _body: GridNode<T>;
+  private _head: GridNode<T> | undefined;
+  private _keyMap: Map<Key, GridNode<T>> = new Map();
+  private _rowHeaderColumnKeys: Set<Key>;
+  private _size: number = 0;
+
+  constructor(options: TableCollectionOptions<T>) {
+    const {
+      columns,
+      rows,
+      getKey,
+      getTextValue,
+      showSelectionCheckboxes = false,
+      rowHeaderColumnKeys,
+    } = options;
+
+    // Build columns
+    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',
+        index: 0,
+        level: 0,
+        hasChildNodes: true,
+        childNodes: this._headerRows,
+        value: null,
+        textValue: '',
+      };
+      this._keyMap.set('header', this._head);
+    }
+
+    // Build body rows
+    const bodyRows = this.buildRows(rows, getKey, getTextValue);
+    this._size = bodyRows.length;
+
+    // Build body node
+    this._body = {
+      type: 'item' as GridNodeType,
+      key: 'body',
+      index: this._headerRows.length,
+      level: 0,
+      hasChildNodes: true,
+      childNodes: bodyRows,
+      value: null,
+      textValue: '',
+    };
+    this._keyMap.set('body', this._body);
+
+    // Combine all rows
+    this._rows = [...this._headerRows, ...bodyRows];
+  }
+
+  private buildColumns(
+    columns: ColumnDefinition<T>[],
+    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__',
+        index: colIndex,
+        column: 0,
+        level: 0,
+        hasChildNodes: false,
+        childNodes: [],
+        value: null,
+        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);
+      colIndex++;
+    }
+
+    return result;
+  }
+
+  private buildColumnNode(col: ColumnDefinition<T>, index: number): GridNode<T> {
+    const node: GridNode<T> = {
+      type: 'column' as GridNodeType,
+      key: col.key,
+      index,
+      column: index,
+      level: 0,
+      hasChildNodes: (col.children?.length ?? 0) > 0,
+      childNodes: [],
+      value: null,
+      textValue: col.textValue ?? col.name ?? String(col.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.level = 1;
+        node.childNodes.push(childNode);
+        childIndex++;
+      }
+    }
+
+    this._keyMap.set(node.key, node);
+    return node;
+  }
+
+  private getDefaultRowHeaderColumnKeys(): Set<Key> {
+    // Default to first non-selection column as row header
+    for (const col of this._columns) {
+      if (col.key !== '__selection__') {
+        return new Set([col.key]);
+      }
+    }
+    return new Set();
+  }
+
+  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,
+      key: `header-${col.key}`,
+      index,
+      column: index,
+      level: 1,
+      hasChildNodes: false,
+      childNodes: [],
+      value: null,
+      textValue: col.textValue,
+      parentKey: 'headerrow-0',
+    }));
+
+    const headerRow: GridNode<T> = {
+      type: 'headerrow' as GridNodeType,
+      key: 'headerrow-0',
+      index: 0,
+      rowIndex: 0,
+      level: 0,
+      hasChildNodes: true,
+      childNodes: headerCells,
+      value: null,
+      textValue: '',
+    };
+
+    this._keyMap.set(headerRow.key, headerRow);
+    headerCells.forEach((cell) => this._keyMap.set(cell.key, cell));
+
+    return [headerRow];
+  }
+
+  private buildRows(
+    rows: RowDefinition<T>[] | T[],
+    getKey?: (item: T) => Key,
+    getTextValue?: (item: T, column: ColumnDefinition<T>) => string
+  ): GridNode<T>[] {
+    const result: GridNode<T>[] = [];
+    const rowIndexOffset = this._headerRows.length;
+
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i];
+      const isRowDef = this.isRowDefinition(row);
+
+      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 rowNode: GridNode<T> = {
+        type: 'item' as GridNodeType,
+        key,
+        index: i,
+        rowIndex: rowIndexOffset + i,
+        level: 0,
+        hasChildNodes: true,
+        childNodes: cells,
+        value,
+        textValue: textValue ?? cells.map((c) => c.textValue).join(' '),
+      };
+
+      this._keyMap.set(key, rowNode);
+      result.push(rowNode);
+    }
+
+    return result;
+  }
+
+  private isRowDefinition(row: unknown): row is RowDefinition<T> {
+    return (
+      typeof row === 'object' &&
+      row !== null &&
+      'key' in row &&
+      'value' in row
+    );
+  }
+
+  // Collection interface implementation
+  get size(): number {
+    return this._size;
+  }
+
+  get rows(): GridNode<T>[] {
+    return this._rows;
+  }
+
+  get columns(): GridNode<T>[] {
+    return this._columns;
+  }
+
+  get headerRows(): GridNode<T>[] {
+    return this._headerRows;
+  }
+
+  get head(): GridNode<T> | undefined {
+    return this._head;
+  }
+
+  get body(): GridNode<T> {
+    return this._body;
+  }
+
+  get rowCount(): number {
+    return this._rows.length;
+  }
+
+  get columnCount(): number {
+    return this._columns.length;
+  }
+
+  get rowHeaderColumnKeys(): Set<Key> {
+    return this._rowHeaderColumnKeys;
+  }
+
+  getKeys(): Iterable<Key> {
+    return this._keyMap.keys();
+  }
+
+  getItem(key: Key): GridNode<T> | null {
+    return this._keyMap.get(key) ?? null;
+  }
+
+  at(index: number): GridNode<T> | null {
+    const bodyRows = this._body.childNodes;
+    if (index < 0 || index >= bodyRows.length) {
+      return null;
+    }
+    return bodyRows[index];
+  }
+
+  getChildren(key: Key): Iterable<GridNode<T>> {
+    const node = this._keyMap.get(key);
+    return node?.childNodes ?? [];
+  }
+
+  getTextValue(key: Key): string {
+    const node = this._keyMap.get(key);
+    return node?.textValue ?? '';
+  }
+
+  getCell(rowKey: Key, columnKey: Key): GridNode<T> | null {
+    const cellKey = `${rowKey}-${columnKey}`;
+    return this._keyMap.get(cellKey) ?? null;
+  }
+
+  getFirstKey(): Key | null {
+    // Return first body row key
+    const bodyRows = this._body.childNodes;
+    return bodyRows.length > 0 ? bodyRows[0].key : null;
+  }
+
+  getLastKey(): Key | null {
+    // Return last body row key
+    const bodyRows = this._body.childNodes;
+    return bodyRows.length > 0 ? bodyRows[bodyRows.length - 1].key : null;
+  }
+
+  getKeyBefore(key: Key): Key | null {
+    const node = this._keyMap.get(key);
+    if (!node) return null;
+
+    // Find in body rows
+    const bodyRows = this._body.childNodes;
+    const index = bodyRows.findIndex((r) => r.key === key);
+    if (index > 0) {
+      return bodyRows[index - 1].key;
+    }
+    return null;
+  }
+
+  getKeyAfter(key: Key): Key | null {
+    const node = this._keyMap.get(key);
+    if (!node) return null;
+
+    // Find in body rows
+    const bodyRows = this._body.childNodes;
+    const index = bodyRows.findIndex((r) => r.key === key);
+    if (index >= 0 && index < bodyRows.length - 1) {
+      return bodyRows[index + 1].key;
+    }
+    return null;
+  }
+
+  *[Symbol.iterator](): Iterator<GridNode<T>> {
+    // Only iterate body rows, not header rows
+    for (const row of this._body.childNodes) {
+      yield row;
+    }
+  }
+}
+
+/**
+ * Creates a table collection from options.
+ */
+export function createTableCollection<T>(
+  options: TableCollectionOptions<T>
+): TableCollection<T> {
+  return new TableCollection(options);
+}

package/src/table/createTableState.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Table state management for Table components.
+ * Based on @react-stately/table/useTableState.
+ */
+import { type Accessor } from 'solid-js';
+import type { TableState, TableStateOptions, TableCollection } from './types';
+/**
+ * Creates state management for a table component.
+ * Extends grid state with sorting and table-specific features.
+ */
+export declare function createTableState<T extends object, C extends TableCollection<T> = TableCollection<T>>(options: Accessor<TableStateOptions<T, C>>): TableState<T, C>;
+//# sourceMappingURL=createTableState.d.ts.map

package/src/table/createTableState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTableState.d.ts","sourceRoot":"","sources":["createTableState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGrD,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,eAAe,EAGhB,MAAM,SAAS,CAAC;AAOjB;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,EACjD,OAAO,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAkG9D"}

package/src/table/createTableState.ts

@@ -0,0 +1,127 @@
+/**
+ * Table state management for Table components.
+ * Based on @react-stately/table/useTableState.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import { createGridState } from '../grid/createGridState';
+import type { Key } from '../collections/types';
+import type {
+  TableState,
+  TableStateOptions,
+  TableCollection,
+  SortDescriptor,
+  SortDirection,
+} from './types';
+
+const OPPOSITE_SORT_DIRECTION: Record<SortDirection, SortDirection> = {
+  ascending: 'descending',
+  descending: 'ascending',
+};
+
+/**
+ * Creates state management for a table component.
+ * Extends grid state with sorting and table-specific features.
+ */
+export function createTableState<
+  T extends object,
+  C extends TableCollection<T> = TableCollection<T>,
+>(options: Accessor<TableStateOptions<T, C>>): TableState<T, C> {
+  const getOptions = () => options();
+
+  // Create the underlying grid state
+  const gridState = createGridState<T, C>(() => ({
+    collection: getOptions().collection,
+    disabledKeys: getOptions().disabledKeys,
+    focusMode: getOptions().focusMode,
+    selectionMode: getOptions().selectionMode,
+    selectionBehavior: getOptions().selectionBehavior,
+    disallowEmptySelection: getOptions().disallowEmptySelection,
+    selectedKeys: getOptions().selectedKeys,
+    defaultSelectedKeys: getOptions().defaultSelectedKeys,
+    onSelectionChange: getOptions().onSelectionChange,
+  }));
+
+  // Memoized sort descriptor
+  const sortDescriptor = createMemo<SortDescriptor | null>(() => {
+    return getOptions().sortDescriptor ?? null;
+  });
+
+  // Show selection checkboxes
+  const showSelectionCheckboxes = createMemo(() => {
+    return getOptions().showSelectionCheckboxes ?? false;
+  });
+
+  // Sort function
+  const sort = (columnKey: Key, direction?: SortDirection) => {
+    const opts = getOptions();
+    const currentSort = opts.sortDescriptor;
+
+    // Determine direction
+    let newDirection: SortDirection;
+    if (direction) {
+      newDirection = direction;
+    } else if (currentSort?.column === columnKey) {
+      // Toggle direction if sorting same column
+      newDirection = OPPOSITE_SORT_DIRECTION[currentSort.direction];
+    } else {
+      // Default to ascending for new column
+      newDirection = 'ascending';
+    }
+
+    opts.onSortChange?.({
+      column: columnKey,
+      direction: newDirection,
+    });
+  };
+
+  return {
+    // Forward grid state properties
+    get collection() {
+      return getOptions().collection;
+    },
+    get disabledKeys() {
+      return gridState.disabledKeys;
+    },
+    get isKeyboardNavigationDisabled() {
+      return gridState.isKeyboardNavigationDisabled;
+    },
+    get focusedKey() {
+      return gridState.focusedKey;
+    },
+    get childFocusStrategy() {
+      return gridState.childFocusStrategy;
+    },
+    get isFocused() {
+      return gridState.isFocused;
+    },
+    get selectionMode() {
+      return gridState.selectionMode;
+    },
+    get selectedKeys() {
+      return gridState.selectedKeys;
+    },
+
+    // Grid state methods
+    isSelected: gridState.isSelected,
+    isDisabled: gridState.isDisabled,
+    setFocusedKey: gridState.setFocusedKey,
+    setFocused: gridState.setFocused,
+    toggleSelection: gridState.toggleSelection,
+    replaceSelection: gridState.replaceSelection,
+    extendSelection: gridState.extendSelection,
+    selectAll: gridState.selectAll,
+    clearSelection: gridState.clearSelection,
+    toggleSelectAll: gridState.toggleSelectAll,
+    setKeyboardNavigationDisabled: gridState.setKeyboardNavigationDisabled,
+
+    // Table-specific properties
+    get showSelectionCheckboxes() {
+      return showSelectionCheckboxes();
+    },
+    get sortDescriptor() {
+      return sortDescriptor();
+    },
+    sort,
+  };
+}

package/src/table/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Table state management module.
+ * Provides state hooks for Table components.
+ */
+export { createTableState } from './createTableState';
+export { TableCollection, createTableCollection } from './TableCollection';
+export type { TableState, TableStateOptions, TableCollection as ITableCollection, SortDescriptor, SortDirection, Sortable, ColumnDefinition, RowDefinition, TableCollectionOptions, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/src/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,YAAY,EACV,UAAU,EACV,iBAAiB,EACjB,eAAe,IAAI,gBAAgB,EACnC,cAAc,EACd,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,sBAAsB,GACvB,MAAM,SAAS,CAAC"}

package/src/table/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Table state management module.
+ * Provides state hooks for Table components.
+ */
+
+export { createTableState } from './createTableState';
+export { TableCollection, createTableCollection } from './TableCollection';
+export type {
+  TableState,
+  TableStateOptions,
+  TableCollection as ITableCollection,
+  SortDescriptor,
+  SortDirection,
+  Sortable,
+  ColumnDefinition,
+  RowDefinition,
+  TableCollectionOptions,
+} from './types';

package/src/table/types.d.ts

@@ -0,0 +1,139 @@
+/**
+ * Table state types for Table components.
+ * Based on @react-stately/table and @react-types/table.
+ */
+import type { Key } from '../collections/types';
+import type { GridState, GridCollection, GridNode } from '../grid/types';
+/**
+ * Sort direction for table columns.
+ */
+export type SortDirection = 'ascending' | 'descending';
+/**
+ * Describes which column to sort by and in what direction.
+ */
+export interface SortDescriptor {
+    /** The key of the column to sort by. */
+    column: Key;
+    /** The direction to sort by. */
+    direction: SortDirection;
+}
+/**
+ * Interface for sortable components.
+ */
+export interface Sortable {
+    /** The current sorted column and direction. */
+    sortDescriptor?: SortDescriptor;
+    /** Handler that is called when the sorted column or direction changes. */
+    onSortChange?: (descriptor: SortDescriptor) => void;
+}
+/**
+ * A collection of table rows and columns.
+ * Extends GridCollection with table-specific metadata.
+ */
+export interface TableCollection<T = unknown> extends GridCollection<T> {
+    /** A list of header row nodes in the table. */
+    readonly headerRows: GridNode<T>[];
+    /** A list of column nodes in the table. */
+    readonly columns: GridNode<T>[];
+    /** A set of column keys that serve as the row header. */
+    readonly rowHeaderColumnKeys: Set<Key>;
+    /** The node that makes up the header of the table. */
+    readonly head?: GridNode<T>;
+    /** The node that makes up the body of the table. */
+    readonly body: GridNode<T>;
+}
+/**
+ * State for a table component.
+ * Extends GridState with table-specific functionality.
+ */
+export interface TableState<T, C extends TableCollection<T> = TableCollection<T>> extends Omit<GridState<T, GridCollection<T>>, 'collection'> {
+    /** The table collection. */
+    readonly collection: C;
+    /** Whether the row selection checkboxes should be displayed. */
+    readonly showSelectionCheckboxes: boolean;
+    /** The current sorted column and direction. */
+    readonly sortDescriptor: SortDescriptor | null;
+    /** Sort by the given column and direction. */
+    sort(columnKey: Key, direction?: SortDirection): void;
+}
+/**
+ * Options for creating table state.
+ */
+export interface TableStateOptions<T, C extends TableCollection<T> = TableCollection<T>> extends Sortable {
+    /** The table collection. */
+    collection: C;
+    /** Keys of disabled rows. */
+    disabledKeys?: Iterable<Key>;
+    /** Focus mode: 'row' or 'cell'. */
+    focusMode?: 'row' | 'cell';
+    /** Selection mode. */
+    selectionMode?: 'none' | 'single' | 'multiple';
+    /** Selection behavior. */
+    selectionBehavior?: 'toggle' | 'replace';
+    /** Whether empty selection is disallowed. */
+    disallowEmptySelection?: boolean;
+    /** Currently selected keys (controlled). */
+    selectedKeys?: 'all' | Iterable<Key>;
+    /** Default selected keys (uncontrolled). */
+    defaultSelectedKeys?: 'all' | Iterable<Key>;
+    /** Handler for selection changes. */
+    onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+    /** Whether the row selection checkboxes should be displayed. */
+    showSelectionCheckboxes?: boolean;
+}
+/**
+ * Column definition for building table collections.
+ */
+export interface ColumnDefinition<T = unknown> {
+    /** The key for the column. */
+    key: Key;
+    /** The display name or rendered content. */
+    name?: string;
+    /** Text value for accessibility. */
+    textValue?: string;
+    /** Whether this column is a row header. */
+    isRowHeader?: boolean;
+    /** Whether this column allows sorting. */
+    allowsSorting?: boolean;
+    /** Child columns (for column groups). */
+    children?: ColumnDefinition<T>[];
+    /** Width of the column. */
+    width?: number | string;
+    /** Minimum width of the column. */
+    minWidth?: number;
+    /** Maximum width of the column. */
+    maxWidth?: number;
+}
+/**
+ * Row definition for building table collections.
+ */
+export interface RowDefinition<T = unknown> {
+    /** The key for the row. */
+    key: Key;
+    /** The data value for the row. */
+    value: T;
+    /** Text value for accessibility/search. */
+    textValue?: string;
+    /** Whether this row has child rows (for tree tables). */
+    hasChildRows?: boolean;
+    /** Child rows (for tree tables). */
+    childRows?: RowDefinition<T>[];
+}
+/**
+ * Options for building a table collection.
+ */
+export interface TableCollectionOptions<T = unknown> {
+    /** Column definitions. */
+    columns: ColumnDefinition<T>[];
+    /** Row definitions or data items. */
+    rows: RowDefinition<T>[] | T[];
+    /** Function to get the key from a data item. */
+    getKey?: (item: T) => Key;
+    /** Function to get the text value from a data item. */
+    getTextValue?: (item: T, column: ColumnDefinition<T>) => string;
+    /** Whether to show selection checkboxes. */
+    showSelectionCheckboxes?: boolean;
+    /** Set of column keys that serve as row headers. */
+    rowHeaderColumnKeys?: Set<Key>;
+}
+//# sourceMappingURL=types.d.ts.map