@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/grid/createGridState.ts

@@ -3,43 +3,34 @@
  * Based on @react-stately/grid/useGridState.
  */
 
-import { createSignal, createEffect, createMemo, on, type Accessor } from 'solid-js';
-import type {
-  GridState,
-  GridStateOptions,
-  GridCollection,
-  GridNode,
-} from './types';
-import type { Key, FocusStrategy } from '../collections/types';
+import { createSignal, createEffect, createMemo, on, type Accessor } from "solid-js";
+import type { GridState, GridStateOptions, GridCollection, GridNode } from "./types";
+import type { Key, FocusStrategy, SelectionBehavior, Selection } from "../collections/types";
 
 /**
  * Creates state management for a grid component.
  * Handles row selection, focus management, and keyboard navigation state.
  */
 export function createGridState<T extends object, C extends GridCollection<T> = GridCollection<T>>(
-  options: Accessor<GridStateOptions<T, C>>
+  options: Accessor<GridStateOptions<T, C>>,
 ): GridState<T, C> {
   const getOptions = () => options();
 
-  // Disabled keys as a Set
   const disabledKeys = createMemo(() => {
     const keys = getOptions().disabledKeys;
     return keys ? new Set(keys) : new Set<Key>();
   });
 
-  // Focus state
   const [isFocused, setIsFocused] = createSignal(false);
   const [focusedKey, setFocusedKeyInternal] = createSignal<Key | null>(null);
   const [childFocusStrategy, setChildFocusStrategy] = createSignal<FocusStrategy | null>(null);
   const [isKeyboardNavigationDisabled, setKeyboardNavigationDisabled] = createSignal(false);
 
-  // Selection state
-  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<'all' | Set<Key>>(
-    getInitialSelection(getOptions().defaultSelectedKeys)
+  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<"all" | Set<Key>>(
+    getInitialSelection(getOptions().defaultSelectedKeys),
   );
   const [anchorKey, setAnchorKey] = createSignal<Key | null>(null);
 
-  // Computed selection
   const selectedKeys = createMemo(() => {
     const opts = getOptions();
     if (opts.selectedKeys !== undefined) {
@@ -48,24 +39,44 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     return internalSelectedKeys();
   });
 
-  const selectionMode = createMemo(() => getOptions().selectionMode ?? 'none');
-  const selectionBehavior = createMemo(() => getOptions().selectionBehavior ?? 'toggle');
+  const selectionMode = createMemo(() => getOptions().selectionMode ?? "none");
+  const selectionBehaviorProp = (): SelectionBehavior => getOptions().selectionBehavior ?? "toggle";
+  const [selectionBehaviorState, setSelectionBehaviorState] =
+    createSignal<SelectionBehavior>(selectionBehaviorProp());
+  const selectionBehavior = createMemo(() => selectionBehaviorState());
   const disallowEmptySelection = createMemo(() => getOptions().disallowEmptySelection ?? false);
+  const disabledBehavior = createMemo(() => getOptions().disabledBehavior ?? "all");
 
-  // Focus mode handling
-  const focusMode = createMemo(() => getOptions().focusMode ?? 'row');
+  const focusMode = createMemo(() => getOptions().focusMode ?? "row");
 
-  // Set focused key with focus mode awareness
-  const setFocusedKey = (key: Key | null, strategy: FocusStrategy = 'first') => {
+  createEffect(
+    on(selectionBehaviorProp, (behavior) => {
+      setSelectionBehaviorState(behavior);
+    }),
+  );
+
+  createEffect(() => {
+    const keys = selectedKeys();
+    if (
+      selectionBehaviorProp() === "replace" &&
+      selectionBehaviorState() === "toggle" &&
+      keys !== "all" &&
+      keys.size === 0
+    ) {
+      setSelectionBehaviorState("replace");
+    }
+  });
+
+  const setFocusedKey = (key: Key | null, strategy: FocusStrategy = "first") => {
     const opts = getOptions();
     const collection = opts.collection;
 
     // If focusMode is cell and an item is focused, focus a child cell instead
-    if (focusMode() === 'cell' && key != null) {
+    if (focusMode() === "cell" && key != null) {
       const item = collection.getItem(key);
-      if (item?.type === 'item') {
+      if (item?.type === "item") {
         const children = [...collection.getChildren(key)];
-        if (strategy === 'last') {
+        if (strategy === "last") {
           key = children[children.length - 1]?.key ?? key;
         } else {
           key = children[0]?.key ?? key;
@@ -86,12 +97,16 @@ export function createGridState<T extends object, C extends GridCollection<T> =
       (collection) => {
         const currentFocusedKey = focusedKey();
 
-        if (currentFocusedKey != null && cachedCollection && !collection.getItem(currentFocusedKey)) {
+        if (
+          currentFocusedKey != null &&
+          cachedCollection &&
+          !collection.getItem(currentFocusedKey)
+        ) {
           // The focused item was deleted, find a new one to focus
           const node = cachedCollection.getItem(currentFocusedKey);
           const parentNode =
             node?.parentKey != null &&
-            (node.type === 'cell' || node.type === 'rowheader' || node.type === 'column')
+            (node.type === "cell" || node.type === "rowheader" || node.type === "column")
               ? cachedCollection.getItem(node.parentKey)
               : node;
 
@@ -107,13 +122,13 @@ export function createGridState<T extends object, C extends GridCollection<T> =
 
           let index = Math.min(
             diff > 1 ? Math.max(parentNode.index - diff + 1, 0) : parentNode.index,
-            rows.length - 1
+            rows.length - 1,
           );
 
           let newRow: GridNode<T> | null = null;
           while (index >= 0) {
             const row = rows[index];
-            if (!disabledKeys().has(row.key) && row.type !== 'headerrow') {
+            if (!disabledKeys().has(row.key) && row.type !== "headerrow") {
               newRow = row;
               break;
             }
@@ -132,10 +147,7 @@ export function createGridState<T extends object, C extends GridCollection<T> =
           if (newRow) {
             const childNodes = newRow.hasChildNodes ? [...collection.getChildren(newRow.key)] : [];
             const keyToFocus =
-              newRow.hasChildNodes &&
-              parentNode !== node &&
-              node &&
-              node.index < childNodes.length
+              newRow.hasChildNodes && parentNode !== node && node && node.index < childNodes.length
                 ? childNodes[node.index].key
                 : newRow.key;
             setFocusedKeyInternal(keyToFocus);
@@ -145,14 +157,14 @@ export function createGridState<T extends object, C extends GridCollection<T> =
         }
 
         cachedCollection = collection;
-      }
-    )
+      },
+    ),
   );
 
   // Selection methods
   const isSelected = (key: Key): boolean => {
     const keys = selectedKeys();
-    if (keys === 'all') return true;
+    if (keys === "all") return true;
     return keys.has(key);
   };
 
@@ -160,7 +172,7 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     return disabledKeys().has(key);
   };
 
-  const updateSelection = (newSelection: 'all' | Set<Key>) => {
+  const updateSelection = (newSelection: "all" | Set<Key>) => {
     const opts = getOptions();
 
     // Controlled mode
@@ -172,8 +184,8 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     // Uncontrolled mode
     const current = internalSelectedKeys();
     const isDifferent =
-      current === 'all' ||
-      newSelection === 'all' ||
+      current === "all" ||
+      newSelection === "all" ||
       current.size !== (newSelection as Set<Key>).size ||
       ![...current].every((k) => (newSelection as Set<Key>).has(k));
 
@@ -185,11 +197,11 @@ export function createGridState<T extends object, C extends GridCollection<T> =
 
   const toggleSelection = (key: Key) => {
     if (isDisabled(key)) return;
-    if (selectionMode() === 'none') return;
+    if (selectionMode() === "none") return;
 
     const current = selectedKeys();
 
-    if (selectionMode() === 'single') {
+    if (selectionMode() === "single") {
       if (isSelected(key) && !disallowEmptySelection()) {
         updateSelection(new Set());
       } else {
@@ -199,7 +211,7 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     }
 
     // Multiple selection
-    if (current === 'all') {
+    if (current === "all") {
       // Can't toggle when all selected without knowing all keys
       return;
     }
@@ -219,15 +231,19 @@ export function createGridState<T extends object, C extends GridCollection<T> =
 
   const replaceSelection = (key: Key) => {
     if (isDisabled(key)) return;
-    if (selectionMode() === 'none') return;
+    if (selectionMode() === "none") return;
 
     updateSelection(new Set([key]));
     setAnchorKey(key);
   };
 
+  const setSelectedKeys = (keys: Selection | Iterable<Key>) => {
+    updateSelection(normalizeSelection(keys));
+  };
+
   const extendSelection = (toKey: Key) => {
     if (isDisabled(toKey)) return;
-    if (selectionMode() !== 'multiple') {
+    if (selectionMode() !== "multiple") {
       replaceSelection(toKey);
       return;
     }
@@ -239,7 +255,7 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     }
 
     const collection = getOptions().collection;
-    const rows = collection.rows.filter((r) => r.type === 'item');
+    const rows = collection.rows.filter((r) => r.type === "item");
     const keys = rows.map((r) => r.key);
     const anchorIndex = keys.indexOf(anchor);
     const toIndex = keys.indexOf(toKey);
@@ -257,8 +273,8 @@ export function createGridState<T extends object, C extends GridCollection<T> =
   };
 
   const selectAll = () => {
-    if (selectionMode() !== 'multiple') return;
-    updateSelection('all');
+    if (selectionMode() !== "multiple") return;
+    updateSelection("all");
   };
 
   const clearSelection = () => {
@@ -267,9 +283,9 @@ export function createGridState<T extends object, C extends GridCollection<T> =
   };
 
   const toggleSelectAll = () => {
-    if (selectionMode() !== 'multiple') return;
+    if (selectionMode() !== "multiple") return;
 
-    if (selectedKeys() === 'all') {
+    if (selectedKeys() === "all") {
       clearSelection();
     } else {
       selectAll();
@@ -283,6 +299,9 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     get disabledKeys() {
       return disabledKeys();
     },
+    get disabledBehavior() {
+      return disabledBehavior();
+    },
     get isKeyboardNavigationDisabled() {
       return isKeyboardNavigationDisabled();
     },
@@ -298,6 +317,12 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     get selectionMode() {
       return selectionMode();
     },
+    get selectionBehavior() {
+      return selectionBehavior();
+    },
+    get disallowEmptySelection() {
+      return disallowEmptySelection();
+    },
     get selectedKeys() {
       return selectedKeys();
     },
@@ -305,8 +330,10 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     isDisabled,
     setFocusedKey,
     setFocused: setIsFocused,
+    setSelectionBehavior: setSelectionBehaviorState,
     toggleSelection,
     replaceSelection,
+    setSelectedKeys,
     extendSelection,
     selectAll,
     clearSelection,
@@ -316,12 +343,12 @@ export function createGridState<T extends object, C extends GridCollection<T> =
 }
 
 // Helper functions
-function getInitialSelection(defaultKeys?: 'all' | Iterable<Key>): 'all' | Set<Key> {
+function getInitialSelection(defaultKeys?: "all" | Iterable<Key>): "all" | Set<Key> {
   if (defaultKeys === undefined) return new Set();
   return normalizeSelection(defaultKeys);
 }
 
-function normalizeSelection(keys: 'all' | Iterable<Key>): 'all' | Set<Key> {
-  if (keys === 'all') return 'all';
+function normalizeSelection(keys: "all" | Iterable<Key>): "all" | Set<Key> {
+  if (keys === "all") return "all";
   return new Set(keys);
 }

package/src/grid/index.d.ts

@@ -2,6 +2,6 @@
  * Grid state management module.
  * Provides state hooks for Table and GridList components.
  */
-export { createGridState } from './createGridState';
-export type { GridState, GridStateOptions, GridCollection, GridNode, GridNodeType, } from './types';
-//# sourceMappingURL=index.d.ts.map
+export { createGridState } from "./createGridState";
+export type { GridState, GridStateOptions, GridCollection, GridNode, GridNodeType } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/src/grid/index.ts

@@ -3,11 +3,5 @@
  * Provides state hooks for Table and GridList components.
  */
 
-export { createGridState } from './createGridState';
-export type {
-  GridState,
-  GridStateOptions,
-  GridCollection,
-  GridNode,
-  GridNodeType,
-} from './types';
+export { createGridState } from "./createGridState";
+export type { GridState, GridStateOptions, GridCollection, GridNode, GridNodeType } from "./types";

package/src/grid/types.d.ts

@@ -2,155 +2,162 @@
  * Grid collection types for Table and GridList components.
  * Based on @react-types/grid.
  */
-import type { Key, FocusStrategy } from '../collections/types';
+import type { Key, FocusStrategy } from "../collections/types";
 /**
  * Represents the type of a grid node.
  */
-export type GridNodeType = 'item' | 'cell' | 'column' | 'rowheader' | 'headerrow' | 'section' | 'placeholder';
+export type GridNodeType =
+  | "item"
+  | "cell"
+  | "column"
+  | "rowheader"
+  | "headerrow"
+  | "section"
+  | "placeholder";
 /**
  * Represents a node in a grid collection.
  */
 export interface GridNode<T = unknown> {
-    /** The type of grid node. */
-    type: GridNodeType;
-    /** A unique key for the node. */
-    key: Key;
-    /** The original value/data for this node. */
-    value: T | null;
-    /** The text content for accessibility and typeahead. */
-    textValue: string;
-    /** The rendered content (JSX) - optional for programmatic nodes. */
-    rendered?: unknown;
-    /** The level of nesting (0 for top-level). */
-    level: number;
-    /** The index within the parent. */
-    index: number;
-    /** The key of the parent node, if any. */
-    parentKey?: Key | null;
-    /** Whether this node has child nodes. */
-    hasChildNodes: boolean;
-    /** Child nodes (cells for rows, rows for sections). */
-    childNodes: GridNode<T>[];
-    /** Whether this item is disabled. */
-    isDisabled?: boolean;
-    /** ARIA label for this node. */
-    'aria-label'?: string;
-    /** Additional props for the node. */
-    props?: Record<string, unknown>;
-    /** Column index for cells. */
-    column?: number;
-    /** Column span for cells. */
-    colspan?: number;
-    /** Row index. */
-    rowIndex?: number;
-    /** Whether this row can be expanded (for tree grids). */
-    isExpandable?: boolean;
-    /** Whether this row is expanded. */
-    isExpanded?: boolean;
+  /** The type of grid node. */
+  type: GridNodeType;
+  /** A unique key for the node. */
+  key: Key;
+  /** The original value/data for this node. */
+  value: T | null;
+  /** The text content for accessibility and typeahead. */
+  textValue: string;
+  /** The rendered content (JSX) - optional for programmatic nodes. */
+  rendered?: unknown;
+  /** The level of nesting (0 for top-level). */
+  level: number;
+  /** The index within the parent. */
+  index: number;
+  /** The key of the parent node, if any. */
+  parentKey?: Key | null;
+  /** Whether this node has child nodes. */
+  hasChildNodes: boolean;
+  /** Child nodes (cells for rows, rows for sections). */
+  childNodes: GridNode<T>[];
+  /** Whether this item is disabled. */
+  isDisabled?: boolean;
+  /** ARIA label for this node. */
+  "aria-label"?: string;
+  /** Additional props for the node. */
+  props?: Record<string, unknown>;
+  /** Column index for cells. */
+  column?: number;
+  /** Column span for cells. */
+  colspan?: number;
+  /** Row index. */
+  rowIndex?: number;
+  /** Whether this row can be expanded (for tree grids). */
+  isExpandable?: boolean;
+  /** Whether this row is expanded. */
+  isExpanded?: boolean;
 }
 /**
  * A collection of grid nodes with grid-specific navigation.
  */
 export interface GridCollection<T = unknown> {
-    /** The number of items in the collection. */
-    readonly size: number;
-    /** All rows in the grid (including header rows). */
-    readonly rows: GridNode<T>[];
-    /** All column definitions. */
-    readonly columns: GridNode<T>[];
-    /** Number of header rows. */
-    readonly headerRows: GridNode<T>[];
-    /** Number of body rows (excluding headers). */
-    readonly rowCount: number;
-    /** Number of columns. */
-    readonly columnCount: number;
-    /** Get all keys in the collection. */
-    getKeys(): Iterable<Key>;
-    /** Get a node by its key. */
-    getItem(key: Key): GridNode<T> | null;
-    /** Get a node by index. */
-    at(index: number): GridNode<T> | null;
-    /** Get the key before the given key. */
-    getKeyBefore(key: Key): Key | null;
-    /** Get the key after the given key. */
-    getKeyAfter(key: Key): Key | null;
-    /** Get the first key in the collection. */
-    getFirstKey(): Key | null;
-    /** Get the last key in the collection. */
-    getLastKey(): Key | null;
-    /** Get the children of a node. */
-    getChildren(key: Key): Iterable<GridNode<T>>;
-    /** Get the text value for a key. */
-    getTextValue(key: Key): string;
-    /** Get a cell by row and column key. */
-    getCell(rowKey: Key, columnKey: Key): GridNode<T> | null;
-    /** Iterator over all nodes. */
-    [Symbol.iterator](): Iterator<GridNode<T>>;
+  /** The number of items in the collection. */
+  readonly size: number;
+  /** All rows in the grid (including header rows). */
+  readonly rows: GridNode<T>[];
+  /** All column definitions. */
+  readonly columns: GridNode<T>[];
+  /** Number of header rows. */
+  readonly headerRows: GridNode<T>[];
+  /** Number of body rows (excluding headers). */
+  readonly rowCount: number;
+  /** Number of columns. */
+  readonly columnCount: number;
+  /** Get all keys in the collection. */
+  getKeys(): Iterable<Key>;
+  /** Get a node by its key. */
+  getItem(key: Key): GridNode<T> | null;
+  /** Get a node by index. */
+  at(index: number): GridNode<T> | null;
+  /** Get the key before the given key. */
+  getKeyBefore(key: Key): Key | null;
+  /** Get the key after the given key. */
+  getKeyAfter(key: Key): Key | null;
+  /** Get the first key in the collection. */
+  getFirstKey(): Key | null;
+  /** Get the last key in the collection. */
+  getLastKey(): Key | null;
+  /** Get the children of a node. */
+  getChildren(key: Key): Iterable<GridNode<T>>;
+  /** Get the text value for a key. */
+  getTextValue(key: Key): string;
+  /** Get a cell by row and column key. */
+  getCell(rowKey: Key, columnKey: Key): GridNode<T> | null;
+  /** Iterator over all nodes. */
+  [Symbol.iterator](): Iterator<GridNode<T>>;
 }
 /**
  * State for a grid component.
  */
 export interface GridState<T, C extends GridCollection<T> = GridCollection<T>> {
-    /** The grid collection. */
-    readonly collection: C;
-    /** Keys of disabled rows. */
-    readonly disabledKeys: Set<Key>;
-    /** Whether keyboard navigation is disabled. */
-    readonly isKeyboardNavigationDisabled: boolean;
-    /** Currently focused key. */
-    readonly focusedKey: Key | null;
-    /** Focus strategy for child focus. */
-    readonly childFocusStrategy: FocusStrategy | null;
-    /** Whether the grid is focused. */
-    readonly isFocused: boolean;
-    /** The selection mode. */
-    readonly selectionMode: 'none' | 'single' | 'multiple';
-    /** The currently selected keys. */
-    readonly selectedKeys: 'all' | Set<Key>;
-    /** Check if a key is selected. */
-    isSelected(key: Key): boolean;
-    /** Check if a key is disabled. */
-    isDisabled(key: Key): boolean;
-    /** Set the focused key. */
-    setFocusedKey(key: Key | null, childFocusStrategy?: FocusStrategy): void;
-    /** Set focused state. */
-    setFocused(isFocused: boolean): void;
-    /** Toggle selection for a key. */
-    toggleSelection(key: Key): void;
-    /** Replace selection with a key. */
-    replaceSelection(key: Key): void;
-    /** Extend selection to a key (shift-click). */
-    extendSelection(toKey: Key): void;
-    /** Select all rows. */
-    selectAll(): void;
-    /** Clear selection. */
-    clearSelection(): void;
-    /** Toggle select all. */
-    toggleSelectAll(): void;
-    /** Set keyboard navigation disabled. */
-    setKeyboardNavigationDisabled(isDisabled: boolean): void;
+  /** The grid collection. */
+  readonly collection: C;
+  /** Keys of disabled rows. */
+  readonly disabledKeys: Set<Key>;
+  /** Whether keyboard navigation is disabled. */
+  readonly isKeyboardNavigationDisabled: boolean;
+  /** Currently focused key. */
+  readonly focusedKey: Key | null;
+  /** Focus strategy for child focus. */
+  readonly childFocusStrategy: FocusStrategy | null;
+  /** Whether the grid is focused. */
+  readonly isFocused: boolean;
+  /** The selection mode. */
+  readonly selectionMode: "none" | "single" | "multiple";
+  /** The currently selected keys. */
+  readonly selectedKeys: "all" | Set<Key>;
+  /** Check if a key is selected. */
+  isSelected(key: Key): boolean;
+  /** Check if a key is disabled. */
+  isDisabled(key: Key): boolean;
+  /** Set the focused key. */
+  setFocusedKey(key: Key | null, childFocusStrategy?: FocusStrategy): void;
+  /** Set focused state. */
+  setFocused(isFocused: boolean): void;
+  /** Toggle selection for a key. */
+  toggleSelection(key: Key): void;
+  /** Replace selection with a key. */
+  replaceSelection(key: Key): void;
+  /** Extend selection to a key (shift-click). */
+  extendSelection(toKey: Key): void;
+  /** Select all rows. */
+  selectAll(): void;
+  /** Clear selection. */
+  clearSelection(): void;
+  /** Toggle select all. */
+  toggleSelectAll(): void;
+  /** Set keyboard navigation disabled. */
+  setKeyboardNavigationDisabled(isDisabled: boolean): void;
 }
 /**
  * Options for creating grid state.
  */
 export interface GridStateOptions<T, C extends GridCollection<T> = GridCollection<T>> {
-    /** The grid 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;
+  /** The grid 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;
 }
-//# sourceMappingURL=types.d.ts.map
+//# sourceMappingURL=types.d.ts.map