@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

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",
 };
 
 /**
@@ -33,6 +33,7 @@ export function createTableState<
   const gridState = createGridState<T, C>(() => ({
     collection: getOptions().collection,
     disabledKeys: getOptions().disabledKeys,
+    disabledBehavior: getOptions().disabledBehavior,
     focusMode: getOptions().focusMode,
     selectionMode: getOptions().selectionMode,
     selectionBehavior: getOptions().selectionBehavior,
@@ -66,7 +67,7 @@ export function createTableState<
       newDirection = OPPOSITE_SORT_DIRECTION[currentSort.direction];
     } else {
       // Default to ascending for new column
-      newDirection = 'ascending';
+      newDirection = "ascending";
     }
 
     opts.onSortChange?.({
@@ -83,6 +84,9 @@ export function createTableState<
     get disabledKeys() {
       return gridState.disabledKeys;
     },
+    get disabledBehavior() {
+      return gridState.disabledBehavior;
+    },
     get isKeyboardNavigationDisabled() {
       return gridState.isKeyboardNavigationDisabled;
     },
@@ -98,6 +102,12 @@ export function createTableState<
     get selectionMode() {
       return gridState.selectionMode;
     },
+    get selectionBehavior() {
+      return gridState.selectionBehavior;
+    },
+    get disallowEmptySelection() {
+      return gridState.disallowEmptySelection;
+    },
     get selectedKeys() {
       return gridState.selectedKeys;
     },
@@ -109,6 +119,8 @@ export function createTableState<
     setFocused: gridState.setFocused,
     toggleSelection: gridState.toggleSelection,
     replaceSelection: gridState.replaceSelection,
+    setSelectionBehavior: gridState.setSelectionBehavior,
+    setSelectedKeys: gridState.setSelectedKeys,
     extendSelection: gridState.extendSelection,
     selectAll: gridState.selectAll,
     clearSelection: gridState.clearSelection,
@@ -123,5 +135,16 @@ export function createTableState<
       return sortDescriptor();
     },
     sort,
+
+    // A plain table has no expandable rows.
+    get expandedKeys(): "all" | Set<Key> {
+      return EMPTY_EXPANDED_KEYS;
+    },
+    get treeColumn(): Key | null {
+      return getOptions().collection.treeColumn ?? null;
+    },
+    toggleKey: () => {},
   };
 }
+
+const EMPTY_EXPANDED_KEYS: Set<Key> = new Set();

package/src/table/createTreeGridState.ts

@@ -0,0 +1,146 @@
+/**
+ * Tree grid state management for expandable Table rows.
+ * Based on @react-stately/table/useTreeGridState (the `UNSTABLE_` tree-grid feature).
+ *
+ * Owns the expanded-keys signal (controlled or uncontrolled), rebuilds the table
+ * collection from it, and layers the expansion API on top of {@link createTableState}.
+ */
+
+import { createMemo, createSignal, type Accessor } from "solid-js";
+import { createTableState } from "./createTableState";
+import { createTableCollection, TableCollection } from "./TableCollection";
+import type { Key } from "../collections/types";
+import type { TreeGridState, TreeGridStateOptions } from "./types";
+
+/**
+ * Creates state management for a tree grid (a table with expandable rows). Handles the
+ * expanded rows in addition to the selection, sort and focus handled by the table state.
+ */
+export function createTreeGridState<
+  T extends object,
+  C extends TableCollection<T> = TableCollection<T>,
+>(options: Accessor<TreeGridStateOptions<T, C>>): TreeGridState<T, C> {
+  const getOptions = () => options();
+
+  // Expanded keys: controlled via `UNSTABLE_expandedKeys`, otherwise the internal signal
+  // seeded from `UNSTABLE_defaultExpandedKeys`.
+  const [internalExpandedKeys, setInternalExpandedKeys] = createSignal<"all" | Set<Key>>(
+    getInitialExpanded(getOptions().UNSTABLE_defaultExpandedKeys),
+  );
+
+  const expandedKeys = createMemo<"all" | Set<Key>>(() => {
+    const controlled = getOptions().UNSTABLE_expandedKeys;
+    if (controlled !== undefined) {
+      return convertExpanded(controlled);
+    }
+    return internalExpandedKeys();
+  });
+
+  // Rebuild the tree collection whenever the expanded keys (or the data) change.
+  const collection = createMemo(
+    () =>
+      createTableCollection<T>({
+        columns: getOptions().columns,
+        rows: getOptions().rows,
+        getKey: getOptions().getKey,
+        getTextValue: getOptions().getTextValue,
+        showSelectionCheckboxes: getOptions().showSelectionCheckboxes ?? false,
+        rowHeaderColumnKeys: getOptions().rowHeaderColumnKeys,
+        expandedKeys: expandedKeys(),
+      }) as unknown as C,
+  );
+
+  const tableState = createTableState<T, C>(() => ({
+    collection: 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,
+    sortDescriptor: getOptions().sortDescriptor,
+    onSortChange: getOptions().onSortChange,
+    showSelectionCheckboxes: getOptions().showSelectionCheckboxes,
+  }));
+
+  const toggleKey = (key: Key) => {
+    const updated = toggleExpandedKey(expandedKeys(), key, collection());
+
+    // Only own the value when uncontrolled.
+    if (getOptions().UNSTABLE_expandedKeys === undefined) {
+      setInternalExpandedKeys(updated);
+    }
+    getOptions().UNSTABLE_onExpandedChange?.(updated);
+  };
+
+  // Layer the expansion API onto the table state object, preserving the reactive getters
+  // already defined on it (spreading would eagerly evaluate them and break reactivity).
+  const treeGridState = tableState as TreeGridState<T, C>;
+  Object.defineProperty(treeGridState, "expandedKeys", {
+    get: () => expandedKeys(),
+    configurable: true,
+    enumerable: true,
+  });
+  Object.defineProperty(treeGridState, "treeColumn", {
+    get: () => collection().treeColumn ?? null,
+    configurable: true,
+    enumerable: true,
+  });
+  Object.defineProperty(treeGridState, "keyMap", {
+    get: () => collection().keyMap,
+    configurable: true,
+    enumerable: true,
+  });
+  Object.defineProperty(treeGridState, "userColumnCount", {
+    get: () => collection().userColumnCount,
+    configurable: true,
+    enumerable: true,
+  });
+  treeGridState.toggleKey = toggleKey;
+
+  return treeGridState;
+}
+
+/**
+ * Computes the next expanded-key set when a row is toggled. Mirrors the upstream
+ * `toggleKey`: collapsing from `'all'` materialises every expandable row first.
+ */
+function toggleExpandedKey<T>(
+  current: "all" | Set<Key>,
+  key: Key,
+  collection: TableCollection<T>,
+): Set<Key> {
+  let updated: Set<Key>;
+  if (current === "all") {
+    updated = new Set(
+      collection.rows
+        .filter((row) => row.type === "item" && row.isExpandable)
+        .map((row) => row.key),
+    );
+    updated.delete(key);
+  } else {
+    updated = new Set(current);
+    if (updated.has(key)) {
+      updated.delete(key);
+    } else {
+      updated.add(key);
+    }
+  }
+  return updated;
+}
+
+function getInitialExpanded(defaultExpanded?: "all" | Iterable<Key>): "all" | Set<Key> {
+  if (defaultExpanded === undefined) {
+    return new Set();
+  }
+  return convertExpanded(defaultExpanded);
+}
+
+function convertExpanded(expanded: "all" | Iterable<Key>): "all" | Set<Key> {
+  if (!expanded) {
+    return new Set<Key>();
+  }
+  return expanded === "all" ? "all" : new Set(expanded);
+}

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,16 +3,26 @@
  * Provides state hooks for Table components.
  */
 
-export { createTableState } from './createTableState';
-export { TableCollection, createTableCollection } from './TableCollection';
+export { createTableState } from "./createTableState";
+export { createTreeGridState } from "./createTreeGridState";
+export { createTableColumnResizeState } from "./createTableColumnResizeState";
+export { TableCollection, createTableCollection } from "./TableCollection";
 export type {
   TableState,
   TableStateOptions,
   TableCollection as ITableCollection,
+  TreeGridState,
+  TreeGridStateOptions,
   SortDescriptor,
   SortDirection,
   Sortable,
   ColumnDefinition,
   RowDefinition,
   TableCollectionOptions,
-} from './types';
+} from "./types";
+export type {
+  ColumnSize,
+  ColumnResizeDefinition,
+  TableColumnResizeStateProps,
+  TableColumnResizeState,
+} from "./createTableColumnResizeState";