@proyecto-viviana/solid-stately 0.3.0 → 0.4.0

package/src/grid/createGridState.ts

@@ -5,7 +5,7 @@
 
 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 type { Key, FocusStrategy, SelectionBehavior, Selection } from "../collections/types";
 
 /**
  * Creates state management for a grid component.
@@ -40,11 +40,33 @@ export function createGridState<T extends object, C extends GridCollection<T> =
   });
 
   const selectionMode = createMemo(() => getOptions().selectionMode ?? "none");
-  const selectionBehavior = createMemo(() => getOptions().selectionBehavior ?? "toggle");
+  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");
 
   const focusMode = createMemo(() => getOptions().focusMode ?? "row");
 
+  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;
@@ -215,6 +237,10 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     setAnchorKey(key);
   };
 
+  const setSelectedKeys = (keys: Selection | Iterable<Key>) => {
+    updateSelection(normalizeSelection(keys));
+  };
+
   const extendSelection = (toKey: Key) => {
     if (isDisabled(toKey)) return;
     if (selectionMode() !== "multiple") {
@@ -273,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();
     },
@@ -291,6 +320,9 @@ export function createGridState<T extends object, C extends GridCollection<T> =
     get selectionBehavior() {
       return selectionBehavior();
     },
+    get disallowEmptySelection() {
+      return disallowEmptySelection();
+    },
     get selectedKeys() {
       return selectedKeys();
     },
@@ -298,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,

package/src/grid/types.ts

@@ -3,7 +3,7 @@
  * Based on @react-types/grid.
  */
 
-import type { Key, FocusStrategy } from "../collections/types";
+import type { Key, FocusStrategy, Selection, SelectionBehavior } from "../collections/types";
 
 /**
  * Represents the type of a grid node.
@@ -42,6 +42,10 @@ export interface GridNode<T = unknown> {
   prevKey?: Key | null;
   /** Next sibling key (visible order). */
   nextKey?: Key | null;
+  /** Key of the first child node, if any (used by tree grids). */
+  firstChildKey?: Key | null;
+  /** Key of the last child node, if any (used by tree grids). */
+  lastChildKey?: Key | null;
   /** Whether this node has child nodes. */
   hasChildNodes: boolean;
   /** Child nodes (cells for rows, rows for sections). */
@@ -123,6 +127,8 @@ export interface GridState<T, C extends GridCollection<T> = GridCollection<T>> {
   readonly collection: C;
   /** Keys of disabled rows. */
   readonly disabledKeys: Set<Key>;
+  /** Whether `disabledKeys` applies to all interactions, or only selection. */
+  readonly disabledBehavior: "selection" | "all";
   /** Whether keyboard navigation is disabled. */
   readonly isKeyboardNavigationDisabled: boolean;
   /** Currently focused key. */
@@ -134,7 +140,9 @@ export interface GridState<T, C extends GridCollection<T> = GridCollection<T>> {
   /** The selection mode. */
   readonly selectionMode: "none" | "single" | "multiple";
   /** The selection behavior. */
-  readonly selectionBehavior: "toggle" | "replace";
+  readonly selectionBehavior: SelectionBehavior;
+  /** Whether empty selection is disallowed. */
+  readonly disallowEmptySelection: boolean;
   /** The currently selected keys. */
   readonly selectedKeys: "all" | Set<Key>;
   /** Check if a key is selected. */
@@ -145,10 +153,14 @@ export interface GridState<T, C extends GridCollection<T> = GridCollection<T>> {
   setFocusedKey(key: Key | null, childFocusStrategy?: FocusStrategy): void;
   /** Set focused state. */
   setFocused(isFocused: boolean): void;
+  /** Set the selection behavior. */
+  setSelectionBehavior(behavior: SelectionBehavior): void;
   /** Toggle selection for a key. */
   toggleSelection(key: Key): void;
   /** Replace selection with a key. */
   replaceSelection(key: Key): void;
+  /** Set multiple selected keys. */
+  setSelectedKeys(keys: Selection | Iterable<Key>): void;
   /** Extend selection to a key (shift-click). */
   extendSelection(toKey: Key): void;
   /** Select all rows. */
@@ -169,12 +181,14 @@ export interface GridStateOptions<T, C extends GridCollection<T> = GridCollectio
   collection: C;
   /** Keys of disabled rows. */
   disabledKeys?: Iterable<Key>;
+  /** Whether `disabledKeys` applies to all interactions, or only selection. @default "all" */
+  disabledBehavior?: "selection" | "all";
   /** Focus mode: 'row' or 'cell'. */
   focusMode?: "row" | "cell";
   /** Selection mode. */
   selectionMode?: "none" | "single" | "multiple";
   /** Selection behavior. */
-  selectionBehavior?: "toggle" | "replace";
+  selectionBehavior?: SelectionBehavior;
   /** Whether empty selection is disallowed. */
   disallowEmptySelection?: boolean;
   /** Currently selected keys (controlled). */

package/src/index.d.ts

@@ -266,6 +266,7 @@ export {
   type DroppableCollectionRootDropEvent,
   type DroppableCollectionOnItemDropEvent,
   type DroppableCollectionReorderEvent,
+  type DragType,
   type DragTypes,
   type DropTargetDelegate,
   type DraggableCollectionStartEvent,

package/src/index.ts

@@ -53,6 +53,7 @@ export {
   createSelectionState,
   type SelectionStateProps,
   type SelectionState,
+  type SelectionPressEvent,
   createListState,
   createSingleSelectListState,
   type ListStateProps,
@@ -72,6 +73,9 @@ export {
   useMultipleSelectionState,
   type MultipleSelectionStateProps,
   type MultipleSelectionState,
+  SelectionManager,
+  type SelectionManagerOptions,
+  type LayoutDelegate,
 } from "./selection";
 
 // Menu (module-compat aliases)
@@ -143,6 +147,7 @@ export {
   type ToastOptions,
   type QueuedToast,
   type ToastQueueOptions,
+  type ToastAction,
   type ToastStateProps,
   type ToastState,
 } from "./toast";
@@ -161,6 +166,8 @@ export {
   createCalendarState,
   type CalendarStateProps,
   type CalendarState,
+  type CalendarSelectionMode,
+  type CalendarValueType,
   type ValidationState,
   type CalendarPageBehavior,
   type CalendarSelectionAlignment,
@@ -240,12 +247,15 @@ export {
 
 export {
   createTableState,
+  createTreeGridState,
   createTableColumnResizeState,
   TableCollection,
   createTableCollection,
   type TableState,
   type TableStateOptions,
   type ITableCollection,
+  type TreeGridState,
+  type TreeGridStateOptions,
   type SortDescriptor,
   type SortDirection,
   type Sortable,
@@ -324,6 +334,7 @@ export {
   type DroppableCollectionRootDropEvent,
   type DroppableCollectionOnItemDropEvent,
   type DroppableCollectionReorderEvent,
+  type DragType,
   type DragTypes,
   type DropTargetDelegate,
   type DraggableCollectionStartEvent,

package/src/select/createSelectState.ts

@@ -9,6 +9,7 @@ import { createListState } from "../collections/createListState";
 import { createOverlayTriggerState } from "../overlays";
 import type { Key, CollectionNode, Collection } from "../collections/types";
 import type { SelectionMode, Selection } from "../collections/types";
+import type { SelectionManager } from "../selection/SelectionManager";
 
 export interface SelectStateProps<T = unknown> {
   /** The items to display in the select. */
@@ -50,6 +51,11 @@ export interface SelectStateProps<T = unknown> {
 export interface SelectState<T = unknown> {
   /** The collection of items. */
   readonly collection: Accessor<Collection<T>>;
+  /**
+   * The collection-aware selection manager. Mirrors upstream `useSelectState`,
+   * which spreads the underlying `useListState` (including its selection manager).
+   */
+  readonly selectionManager: SelectionManager<T>;
   /** Whether the select dropdown is open. */
   readonly isOpen: Accessor<boolean>;
   /** Open the select dropdown. */
@@ -234,6 +240,12 @@ export function createSelectState<T = unknown>(
     },
   });
 
+  // The select's own focus state (the trigger), separate from the collection's
+  // focus-within state on the selection manager — upstream useSelectState keeps
+  // these apart with a dedicated useState. Sharing the manager's signal makes
+  // trigger focus re-arm the item roving-focus effect and steal focus back.
+  const [isFocused, setFocused] = createSignal(false);
+
   // Get the selected item from the collection (memoized)
   const selectedItem: Accessor<CollectionNode<T> | null> = createMemo(() => {
     const key = selectedKey();
@@ -258,12 +270,13 @@ export function createSelectState<T = unknown>(
   return {
     // Collection
     collection: listState.collection,
+    selectionManager: listState.selectionManager,
 
     // Focus management
     focusedKey: listState.focusedKey,
     setFocusedKey: listState.setFocusedKey,
-    isFocused: listState.isFocused,
-    setFocused: listState.setFocused,
+    isFocused,
+    setFocused,
 
     // Overlay state
     isOpen: overlayState.isOpen,

package/src/selection/Selection.ts

@@ -0,0 +1,28 @@
+/**
+ * A Selection is a special Set containing Keys, which also has an anchor
+ * and current selected key for use when range selecting.
+ *
+ * Based on @react-stately/selection.
+ */
+
+import type { Key } from "../collections/types";
+
+/**
+ * A Selection is a special Set containing Keys, which also has an anchor
+ * and current selected key for use when range selecting.
+ */
+export class Selection extends Set<Key> {
+  anchorKey: Key | null;
+  currentKey: Key | null;
+
+  constructor(keys?: Iterable<Key> | Selection, anchorKey?: Key | null, currentKey?: Key | null) {
+    super(keys);
+    if (keys instanceof Selection) {
+      this.anchorKey = anchorKey ?? keys.anchorKey;
+      this.currentKey = currentKey ?? keys.currentKey;
+    } else {
+      this.anchorKey = anchorKey ?? null;
+      this.currentKey = currentKey ?? null;
+    }
+  }
+}