@proyecto-viviana/solid-stately 0.3.0 → 0.4.1

package/src/combobox/createComboBoxState.ts

@@ -11,6 +11,7 @@ import { access, type MaybeAccessor } from "../utils";
 import { createListState } from "../collections/createListState";
 import { createOverlayTriggerState } from "../overlays";
 import type { Key, CollectionNode, Collection, FocusStrategy } from "../collections/types";
+import type { SelectionManager } from "../selection/SelectionManager";
 
 export type MenuTriggerAction = "focus" | "input" | "manual";
 
@@ -78,6 +79,12 @@ export interface ComboBoxStateProps<T = unknown> {
 export interface ComboBoxState<T = unknown> {
   /** The collection of items (may be filtered). */
   readonly collection: Accessor<Collection<T>>;
+  /**
+   * The collection-aware selection manager. Mirrors upstream `useComboBoxState`,
+   * which returns the `useListState` selection manager bound to the unfiltered
+   * collection (selection spans all items; filtering is display-only).
+   */
+  readonly selectionManager: SelectionManager<T>;
   /** Whether the combobox dropdown is open. */
   readonly isOpen: Accessor<boolean>;
   /** Open the combobox dropdown. */
@@ -366,6 +373,28 @@ export function createComboBoxState<T = unknown>(
   };
 
   // ---- Open/Toggle Logic ----
+  // Auto-focus the menu on open the way upstream's listbox does via its
+  // `autoFocus: state.focusStrategy || true` prop (useComboBox.ts:490 → useSelectableCollection):
+  // the first selectable selected key, else the first/last key for an explicit
+  // strategy, else nothing. The port drives this from the state (createListBox
+  // reimplements nav inline and does not honor a listbox `autoFocus` prop), so
+  // BOTH open() and toggle() must apply it — a button/mouse open routes through
+  // toggle(), and omitting it there left the menu opened with no active option
+  // (no aria-activedescendant / no highlighted row) unlike upstream.
+  const applyOpenFocus = (strategy: FocusStrategy | null) => {
+    const key = selectedKey();
+    const nextFocusedKey =
+      key != null && !listState.isDisabled(key)
+        ? key
+        : strategy === "first"
+          ? displayedCollection().getFirstKey()
+          : strategy === "last"
+            ? displayedCollection().getLastKey()
+            : null;
+    listState.setFocused(true);
+    listState.setFocusedKey(nextFocusedKey);
+  };
+
   const open = (strategy: FocusStrategy | null = null, trigger?: MenuTriggerAction) => {
     const displayAll = trigger === "manual" || (trigger === "focus" && menuTrigger() === "focus");
 
@@ -384,17 +413,7 @@ export function createComboBoxState<T = unknown>(
     menuOpenTrigger = trigger ?? "focus";
     setFocusStrategy(strategy);
     if (!overlayState.isOpen()) {
-      const key = selectedKey();
-      const nextFocusedKey =
-        key != null && !listState.isDisabled(key)
-          ? key
-          : strategy === "first"
-            ? displayedCollection().getFirstKey()
-            : strategy === "last"
-              ? displayedCollection().getLastKey()
-              : null;
-      listState.setFocused(true);
-      listState.setFocusedKey(nextFocusedKey);
+      applyOpenFocus(strategy);
     }
     overlayState.open();
   };
@@ -410,15 +429,20 @@ export function createComboBoxState<T = unknown>(
 
     if (!canOpen && !overlayState.isOpen()) return;
 
-    if (displayAll && !overlayState.isOpen()) {
+    const willOpen = !overlayState.isOpen();
+
+    if (displayAll && willOpen) {
       setShowAllItems(true);
     }
 
-    if (!overlayState.isOpen()) {
+    if (willOpen) {
       menuOpenTrigger = trigger ?? "focus";
     }
 
     setFocusStrategy(strategy);
+    if (willOpen) {
+      applyOpenFocus(strategy);
+    }
     overlayState.toggle();
   };
 
@@ -624,6 +648,7 @@ export function createComboBoxState<T = unknown>(
     inputValue,
     defaultInputValue: getProps().defaultInputValue ?? "",
     setInputValue,
+    selectionManager: listState.selectionManager,
     focusedKey: listState.focusedKey,
     setFocusedKey: listState.setFocusedKey,
     isFocused,

package/src/dnd/createDroppableCollectionState.ts

@@ -21,6 +21,7 @@ import type {
   DroppableCollectionReorderEvent,
   ItemDropTarget,
 } from "./types";
+import type { Collection } from "../collections/types";
 
 export interface DroppableCollectionStateOptions {
   /**
@@ -56,6 +57,14 @@ export interface DroppableCollectionStateOptions {
   onMove?: (e: DroppableCollectionReorderEvent) => void;
   /** A function returning whether a given target is a valid "on" drop target. */
   shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;
+  /**
+   * The host collection. Used by the default drop-operation feature detection to
+   * confirm a reorder stays within the same parent and to prevent dropping an
+   * item onto itself or a descendant. Optional: a flat collection (e.g. a plain
+   * ListBox) is always "within parent" and has no descendants, so omitting it is
+   * faithful for flat hosts.
+   */
+  collection?: Collection<unknown>;
   /** Whether the droppable collection is disabled. */
   isDisabled?: boolean;
 }
@@ -86,11 +95,19 @@ export interface DroppableCollectionState {
     isInternal: boolean,
     draggingKeys?: Set<string | number>,
   ): void;
-  /** Get the drop operation for a target. */
+  /**
+   * Get the drop operation for a target. `isInternal` is true when the active
+   * drag originated from this same collection; `draggingKeys` are the keys being
+   * dragged. Both feed the handler-aware feature detection that decides whether a
+   * given drop position (before/after/on/root) is a valid target — e.g. a
+   * reorder-only collection rejects "on" targets, matching React Aria.
+   */
   getDropOperation(
     target: DropTarget,
     types: DragTypes,
     allowedOperations: DropOperation[],
+    isInternal?: boolean,
+    draggingKeys?: Set<string | number>,
   ): DropOperation;
   /** Check if an item drop should be accepted. */
   shouldAcceptItemDrop(target: ItemDropTarget, types: DragTypes): boolean;
@@ -287,22 +304,124 @@ export function createDroppableCollectionState(
     }
   };
 
-  const getDropOperation = (
-    dropTarget: DropTarget,
+  // Faithful of react-stately's `isDraggingWithinParent`: every dragged item must
+  // share the target's parent for a reorder to be valid. A flat collection (no
+  // `collection` provided) has a single implicit parent, so this is always true.
+  const isDraggingWithinParent = (
+    target: ItemDropTarget,
+    draggingKeys: Set<string | number>,
+  ): boolean => {
+    const collection = getProps().collection;
+    if (!collection) return true;
+    const targetNode = collection.getItem(target.key);
+    for (const key of draggingKeys) {
+      const node = collection.getItem(key);
+      if (node?.parentKey !== targetNode?.parentKey) {
+        return false;
+      }
+    }
+    return true;
+  };
+
+  // Faithful of react-stately's `defaultGetDropOperation`: decide whether a drop
+  // position is a valid target from the handlers that are actually wired. A
+  // reorder-only collection (only `onReorder`) accepts before/after but rejects
+  // "on"; an item-drop collection accepts "on"; and so on.
+  const defaultGetDropOperation = (
+    target: DropTarget,
     types: DragTypes,
     allowedOperations: DropOperation[],
+    isInternal: boolean,
+    draggingKeys: Set<string | number>,
   ): DropOperation => {
     const p = getProps();
 
+    if (p.isDisabled || !target) {
+      return "cancel";
+    }
+
     if (!isAccepted(types)) {
       return "cancel";
     }
 
-    if (typeof p.getDropOperation === "function") {
-      return p.getDropOperation(dropTarget, types, allowedOperations);
+    const isValidInsert =
+      p.onInsert &&
+      target.type === "item" &&
+      !isInternal &&
+      (target.dropPosition === "before" || target.dropPosition === "after");
+    const isValidReorder =
+      p.onReorder &&
+      target.type === "item" &&
+      isInternal &&
+      (target.dropPosition === "before" || target.dropPosition === "after") &&
+      isDraggingWithinParent(target, draggingKeys);
+
+    const isItemDropAllowed =
+      target.type !== "item" ||
+      target.dropPosition !== "on" ||
+      !p.shouldAcceptItemDrop ||
+      p.shouldAcceptItemDrop(target, types);
+
+    const isValidMove = p.onMove && target.type === "item" && isInternal && isItemDropAllowed;
+
+    // Feedback was that internal root drop was weird, so it is prevented.
+    const isValidRootDrop = p.onRootDrop && target.type === "root" && !isInternal;
+
+    // Automatically prevent items (e.g. folders) from being dropped on themselves.
+    const isValidOnItemDrop =
+      p.onItemDrop &&
+      target.type === "item" &&
+      target.dropPosition === "on" &&
+      !(isInternal && target.key != null && draggingKeys.has(target.key)) &&
+      isItemDropAllowed;
+
+    if (
+      p.onDrop ||
+      isValidInsert ||
+      isValidReorder ||
+      isValidMove ||
+      isValidRootDrop ||
+      isValidOnItemDrop
+    ) {
+      if (typeof p.getDropOperation === "function") {
+        return p.getDropOperation(target, types, allowedOperations);
+      }
+      return allowedOperations[0] ?? "cancel";
+    }
+
+    return "cancel";
+  };
+
+  const getDropOperation = (
+    dropTarget: DropTarget,
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+    isInternal: boolean = false,
+    draggingKeys: Set<string | number> = new Set(),
+  ): DropOperation => {
+    // Prevent dropping items onto themselves or their descendants (faithful of
+    // react-stately's `getDropOperation` guard). Only meaningful for a nested
+    // collection; a flat host has no descendants.
+    if (isInternal && dropTarget.type === "item" && draggingKeys.size > 0) {
+      if (draggingKeys.has(dropTarget.key) && dropTarget.dropPosition === "on") {
+        return "cancel";
+      }
+
+      const collection = getProps().collection;
+      if (collection) {
+        let currentKey: string | number | null = dropTarget.key;
+        while (currentKey != null) {
+          const item = collection.getItem(currentKey);
+          const parentKey = item?.parentKey;
+          if (parentKey != null && draggingKeys.has(parentKey)) {
+            return "cancel";
+          }
+          currentKey = parentKey ?? null;
+        }
+      }
     }
 
-    return allowedOperations[0] ?? "cancel";
+    return defaultGetDropOperation(dropTarget, types, allowedOperations, isInternal, draggingKeys);
   };
 
   const shouldAcceptItemDrop = (dropTarget: ItemDropTarget, types: DragTypes): boolean => {

package/src/dnd/index.d.ts

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

package/src/dnd/index.ts

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

package/src/dnd/types.d.ts

@@ -174,10 +174,12 @@ export interface DroppableCollectionReorderEvent {
   /** The drop target. */
   target: ItemDropTarget;
 }
+/** A drag type: either a MIME type string or a symbol such as the directory drag type. */
+export type DragType = string | symbol;
 /** Interface for checking drag types. */
 export interface DragTypes {
   /** Returns whether the drag contains data of the given type. */
-  has(type: string | symbol): boolean;
+  has(type: DragType | DragType[]): boolean;
 }
 /** Delegate for determining drop targets within a collection. */
 export interface DropTargetDelegate {

package/src/dnd/types.ts

@@ -205,10 +205,13 @@ export interface DroppableCollectionReorderEvent {
   target: ItemDropTarget;
 }
 
+/** A drag type: either a MIME type string or a symbol such as the directory drag type. */
+export type DragType = string | symbol;
+
 /** Interface for checking drag types. */
 export interface DragTypes {
   /** Returns whether the drag contains data of the given type. */
-  has(type: string | symbol): boolean;
+  has(type: DragType | DragType[]): boolean;
 }
 
 /** Delegate for determining drop targets within a collection. */

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

@@ -50,13 +50,17 @@ export {
   type MultipleSelection,
   ListCollection,
   createListCollection,
+  getItemCount,
   createSelectionState,
   type SelectionStateProps,
   type SelectionState,
+  type SelectionPressEvent,
   createListState,
+  createFilteredListState,
   createSingleSelectListState,
   type ListStateProps,
   type ListState,
+  type ListFilterFn,
   type SingleSelectListStateProps,
   type SingleSelectListState,
   createMenuState,
@@ -72,6 +76,9 @@ export {
   useMultipleSelectionState,
   type MultipleSelectionStateProps,
   type MultipleSelectionState,
+  SelectionManager,
+  type SelectionManagerOptions,
+  type LayoutDelegate,
 } from "./selection";
 
 // Menu (module-compat aliases)
@@ -143,6 +150,7 @@ export {
   type ToastOptions,
   type QueuedToast,
   type ToastQueueOptions,
+  type ToastAction,
   type ToastStateProps,
   type ToastState,
 } from "./toast";
@@ -161,6 +169,8 @@ export {
   createCalendarState,
   type CalendarStateProps,
   type CalendarState,
+  type CalendarSelectionMode,
+  type CalendarValueType,
   type ValidationState,
   type CalendarPageBehavior,
   type CalendarSelectionAlignment,
@@ -240,12 +250,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 +337,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;
+    }
+  }
+}