@proyecto-viviana/solid-stately 0.2.7 → 0.3.0

package/src/table/TableCollection.ts

@@ -3,14 +3,14 @@
  * Based on @react-stately/table/TableCollection.
  */
 
-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.
@@ -35,77 +35,68 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
       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',
+        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);
     }
 
-    // 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',
+      type: "item" as GridNodeType,
+      key: "body",
       index: this._headerRows.length,
       level: 0,
       hasChildNodes: true,
       childNodes: bodyRows,
       value: null,
-      textValue: '',
+      textValue: "",
     };
-    this._keyMap.set('body', this._body);
+    this._keyMap.set("body", this._body);
 
-    // Combine all rows
     this._rows = [...this._headerRows, ...bodyRows];
   }
 
   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 +107,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,9 +137,21 @@ 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]);
       }
     }
@@ -159,9 +163,8 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
       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 +173,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);
@@ -194,7 +197,7 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
   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,24 +206,30 @@ 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;
+      const textValue = isRowDef
+        ? row.textValue
+        : typeof (row as Record<string, unknown>)?.textValue === "string"
+          ? ((row as Record<string, unknown>).textValue as string)
+          : undefined;
 
-      // Build cells for this row
       const cells: GridNode<T>[] = this._columns.map((col, colIndex) => {
         const cellKey = `${key}-${col.key}`;
+        const columnDefinition =
+          (col.props?.columnDefinition as ColumnDefinition<T> | undefined) ??
+          ({ key: col.key } as ColumnDefinition<T>);
         const cellTextValue =
-          col.key === '__selection__'
-            ? 'Selection'
+          col.key === "__selection__"
+            ? "Selection"
             : getTextValue
-              ? getTextValue(value, { key: col.key } as ColumnDefinition<T>)
-              : String((value as Record<string, unknown>)?.[String(col.key)] ?? '');
+              ? 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),
+            ? ("rowheader" as GridNodeType)
+            : ("cell" as GridNodeType),
           key: cellKey,
           index: colIndex,
           column: colIndex,
@@ -237,7 +246,7 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
       });
 
       const rowNode: GridNode<T> = {
-        type: 'item' as GridNodeType,
+        type: "item" as GridNodeType,
         key,
         index: i,
         rowIndex: rowIndexOffset + i,
@@ -245,7 +254,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);
@@ -256,15 +265,9 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
   }
 
   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;
   }
@@ -324,7 +327,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,13 +336,11 @@ export class TableCollection<T = unknown> implements ITableCollection<T> {
   }
 
   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;
   }
@@ -348,7 +349,6 @@ 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 index = bodyRows.findIndex((r) => r.key === key);
     if (index > 0) {
@@ -361,7 +361,6 @@ 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 index = bodyRows.findIndex((r) => r.key === key);
     if (index >= 0 && index < bodyRows.length - 1) {
@@ -381,8 +380,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);
 }

package/src/table/createTableColumnResizeState.ts

@@ -0,0 +1,242 @@
+/**
+ * Table column resize state management.
+ * Based on @react-stately/table/useTableColumnResizeState.
+ *
+ * Provides column width state management for a table with column resizing.
+ * Tracks column widths, the currently resizing column, and handles
+ * width distribution and clamping.
+ */
+
+import { createSignal, createMemo, type Accessor } from "solid-js";
+import type { Key } from "../collections/types";
+
+/** Column size: a number (px) or a string ('100px', '50%', '1fr'). */
+export type ColumnSize = number | string;
+
+export interface ColumnResizeDefinition {
+  /** The column key. */
+  key: Key;
+  /** The width of the column. Numbers are px, strings can be 'Xfr', 'Xpx', or 'X%'. */
+  width?: ColumnSize;
+  /** Minimum width in pixels. Default: 75. */
+  minWidth?: number;
+  /** Maximum width in pixels. Default: Infinity. */
+  maxWidth?: number;
+}
+
+export interface TableColumnResizeStateProps {
+  /** Current width of the table or table viewport. */
+  tableWidth: number;
+  /** Column definitions with width/min/max. */
+  columns: ColumnResizeDefinition[];
+}
+
+export interface TableColumnResizeState {
+  /** The key of the column currently being resized, or null. */
+  readonly resizingColumn: Accessor<Key | null>;
+  /** A reactive map of computed column widths in pixels. */
+  readonly columnWidths: Accessor<Map<Key, number>>;
+  /** Begin a resize operation for the given column. */
+  startResize(key: Key): void;
+  /** End the current resize operation. */
+  endResize(): void;
+  /** Update column widths during a resize drag. Returns the new widths map. */
+  updateResizedColumns(key: Key, width: number): Map<Key, number>;
+  /** Get the current computed width for a column. */
+  getColumnWidth(key: Key): number;
+  /** Get the minimum width for a column. */
+  getColumnMinWidth(key: Key): number;
+  /** Get the maximum width for a column. */
+  getColumnMaxWidth(key: Key): number;
+}
+
+const DEFAULT_MIN_WIDTH = 75;
+const DEFAULT_MAX_WIDTH = Infinity;
+
+interface ParsedColumn {
+  key: Key;
+  /** Fraction units (from 'Xfr' or unspecified width). 0 if fixed. */
+  fr: number;
+  /** Fixed pixel width, or 0 if fractional. */
+  fixedPx: number;
+  minWidth: number;
+  maxWidth: number;
+}
+
+function parseColumnDef(col: ColumnResizeDefinition, tableWidth: number): ParsedColumn {
+  const minWidth = col.minWidth ?? DEFAULT_MIN_WIDTH;
+  const maxWidth = col.maxWidth ?? DEFAULT_MAX_WIDTH;
+
+  if (col.width == null) {
+    // Default: 1fr
+    return { key: col.key, fr: 1, fixedPx: 0, minWidth, maxWidth };
+  }
+
+  if (typeof col.width === "number") {
+    return { key: col.key, fr: 0, fixedPx: col.width, minWidth, maxWidth };
+  }
+
+  const str = col.width.trim();
+
+  // Fractional: '2fr', '1.5fr'
+  if (str.endsWith("fr")) {
+    const val = parseFloat(str);
+    return { key: col.key, fr: isNaN(val) ? 1 : val, fixedPx: 0, minWidth, maxWidth };
+  }
+
+  // Percentage: '25%'
+  if (str.endsWith("%")) {
+    const pct = parseFloat(str);
+    const px = isNaN(pct) ? 0 : (pct / 100) * tableWidth;
+    return { key: col.key, fr: 0, fixedPx: px, minWidth, maxWidth };
+  }
+
+  // Pixel: '200px' or just a numeric string
+  const px = parseFloat(str);
+  return { key: col.key, fr: 0, fixedPx: isNaN(px) ? 0 : px, minWidth, maxWidth };
+}
+
+/**
+ * Distribute `tableWidth` among columns:
+ *  1. Fixed-width columns get their declared width (clamped to min/max).
+ *  2. Remaining space is distributed among fractional columns proportionally.
+ */
+function distributeWidths(columns: ColumnResizeDefinition[], tableWidth: number): Map<Key, number> {
+  const parsed = columns.map((c) => parseColumnDef(c, tableWidth));
+
+  // Pass 1 — allocate fixed columns
+  let usedSpace = 0;
+  let totalFr = 0;
+  for (const p of parsed) {
+    if (p.fr > 0) {
+      totalFr += p.fr;
+    } else {
+      const w = Math.max(p.minWidth, Math.min(p.maxWidth, p.fixedPx));
+      usedSpace += w;
+    }
+  }
+
+  const remainingSpace = Math.max(0, tableWidth - usedSpace);
+  const perFr = totalFr > 0 ? remainingSpace / totalFr : 0;
+
+  // Pass 2 — build map
+  const widths = new Map<Key, number>();
+  for (const p of parsed) {
+    let w: number;
+    if (p.fr > 0) {
+      w = p.fr * perFr;
+    } else {
+      w = p.fixedPx;
+    }
+    // Clamp
+    w = Math.max(p.minWidth, Math.min(p.maxWidth, w));
+    widths.set(p.key, Math.round(w));
+  }
+
+  return widths;
+}
+
+/**
+ * Creates column resize state for a table component.
+ *
+ * Builds an initial column width map from column definitions + table width,
+ * then tracks resize operations that clamp to min/max and redistribute
+ * remaining space among flex columns.
+ */
+export function createTableColumnResizeState(
+  props: Accessor<TableColumnResizeStateProps>,
+): TableColumnResizeState {
+  const getProps = () => props();
+
+  // Memoize initial width distribution (re-distributes when table width or columns change)
+  const initialWidths = createMemo(() =>
+    distributeWidths(getProps().columns, getProps().tableWidth),
+  );
+
+  // User-overridden widths (set during/after resize)
+  const [overrides, setOverrides] = createSignal<Map<Key, number>>(new Map());
+  const [resizingColumn, setResizingColumn] = createSignal<Key | null>(null);
+
+  // Computed widths: initial merged with overrides
+  const columnWidths = createMemo(() => {
+    const base = initialWidths();
+    const over = overrides();
+    if (over.size === 0) return base;
+
+    const merged = new Map(base);
+    for (const [key, width] of over) {
+      if (merged.has(key)) {
+        merged.set(key, width);
+      }
+    }
+    return merged;
+  });
+
+  // Build min/max lookup
+  const minWidthMap = createMemo(() => {
+    const map = new Map<Key, number>();
+    for (const col of getProps().columns) {
+      map.set(col.key, col.minWidth ?? DEFAULT_MIN_WIDTH);
+    }
+    return map;
+  });
+
+  const maxWidthMap = createMemo(() => {
+    const map = new Map<Key, number>();
+    for (const col of getProps().columns) {
+      map.set(col.key, col.maxWidth ?? DEFAULT_MAX_WIDTH);
+    }
+    return map;
+  });
+
+  const getColumnWidth = (key: Key): number => {
+    return columnWidths().get(key) ?? 0;
+  };
+
+  const getColumnMinWidth = (key: Key): number => {
+    return minWidthMap().get(key) ?? DEFAULT_MIN_WIDTH;
+  };
+
+  const getColumnMaxWidth = (key: Key): number => {
+    return maxWidthMap().get(key) ?? DEFAULT_MAX_WIDTH;
+  };
+
+  const startResize = (key: Key) => {
+    setResizingColumn(key);
+  };
+
+  const endResize = () => {
+    setResizingColumn(null);
+  };
+
+  const updateResizedColumns = (key: Key, width: number): Map<Key, number> => {
+    const minW = getColumnMinWidth(key);
+    const maxW = getColumnMaxWidth(key);
+    const clampedWidth = Math.round(Math.max(minW, Math.min(maxW, width)));
+
+    const newOverrides = new Map(overrides());
+    newOverrides.set(key, clampedWidth);
+    setOverrides(newOverrides);
+
+    // Return the resulting widths
+    const base = initialWidths();
+    const merged = new Map(base);
+    for (const [k, w] of newOverrides) {
+      if (merged.has(k)) {
+        merged.set(k, w);
+      }
+    }
+    return merged;
+  };
+
+  return {
+    resizingColumn,
+    columnWidths,
+    startResize,
+    endResize,
+    updateResizedColumns,
+    getColumnWidth,
+    getColumnMinWidth,
+    getColumnMaxWidth,
+  };
+}

package/src/table/createTableState.d.ts

@@ -2,11 +2,14 @@
  * 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';
+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
+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.ts

@@ -3,20 +3,20 @@
  * 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 { 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';
+} from "./types";
 
 const OPPOSITE_SORT_DIRECTION: Record<SortDirection, SortDirection> = {
-  ascending: 'descending',
-  descending: 'ascending',
+  ascending: "descending",
+  descending: "ascending",
 };
 
 /**
@@ -66,7 +66,7 @@ export function createTableState<
       newDirection = OPPOSITE_SORT_DIRECTION[currentSort.direction];
     } else {
       // Default to ascending for new column
-      newDirection = 'ascending';
+      newDirection = "ascending";
     }
 
     opts.onSortChange?.({
@@ -98,6 +98,9 @@ export function createTableState<
     get selectionMode() {
       return gridState.selectionMode;
     },
+    get selectionBehavior() {
+      return gridState.selectionBehavior;
+    },
     get selectedKeys() {
       return gridState.selectedKeys;
     },

package/src/table/index.d.ts

@@ -2,7 +2,17 @@
  * 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
+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.ts

@@ -3,8 +3,9 @@
  * Provides state hooks for Table components.
  */
 
-export { createTableState } from './createTableState';
-export { TableCollection, createTableCollection } from './TableCollection';
+export { createTableState } from "./createTableState";
+export { createTableColumnResizeState } from "./createTableColumnResizeState";
+export { TableCollection, createTableCollection } from "./TableCollection";
 export type {
   TableState,
   TableStateOptions,
@@ -15,4 +16,10 @@ export type {
   ColumnDefinition,
   RowDefinition,
   TableCollectionOptions,
-} from './types';
+} from "./types";
+export type {
+  ColumnSize,
+  ColumnResizeDefinition,
+  TableColumnResizeStateProps,
+  TableColumnResizeState,
+} from "./createTableColumnResizeState";