@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/collections/createListState.ts

@@ -4,10 +4,12 @@
  * Based on @react-stately/list.
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-import { ListCollection } from './ListCollection';
-import { createSelectionState, type SelectionState } from './createSelectionState';
+import { createMemo, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+import { ListCollection } from "./ListCollection";
+import type { SelectionState, SelectionPressEvent } from "./createSelectionState";
+import { createMultipleSelectionState } from "../selection/createMultipleSelectionState";
+import { SelectionManager } from "../selection/SelectionManager";
 import type {
   Collection,
   CollectionItemLike,
@@ -17,7 +19,7 @@ import type {
   Key,
   SelectionBehavior,
   SelectionMode,
-} from './types';
+} from "./types";
 
 export interface ListStateProps<T = unknown> {
   /** The items in the list (for dynamic rendering). */
@@ -39,11 +41,11 @@ export interface ListStateProps<T = unknown> {
   /** Whether empty selection is disallowed. */
   disallowEmptySelection?: boolean;
   /** Currently selected keys (controlled). */
-  selectedKeys?: 'all' | Iterable<Key>;
+  selectedKeys?: "all" | Iterable<Key>;
   /** Default selected keys (uncontrolled). */
-  defaultSelectedKeys?: 'all' | Iterable<Key>;
+  defaultSelectedKeys?: "all" | Iterable<Key>;
   /** Handler for selection changes. */
-  onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+  onSelectionChange?: (keys: "all" | Set<Key>) => void;
   /** Whether to allow duplicate selection events. */
   allowDuplicateSelectionEvents?: boolean;
 }
@@ -51,6 +53,8 @@ export interface ListStateProps<T = unknown> {
 export interface ListState<T = unknown> extends SelectionState {
   /** The collection of items. */
   readonly collection: Accessor<Collection<T>>;
+  /** The collection-aware selection manager (single source of truth for selection). */
+  readonly selectionManager: SelectionManager<T>;
   /** Whether the collection is focused. */
   readonly isFocused: Accessor<boolean>;
   /** Set the focused state. */
@@ -67,7 +71,7 @@ export interface ListState<T = unknown> extends SelectionState {
  * Creates state for a list component with selection.
  */
 export function createListState<T = unknown>(
-  props: MaybeAccessor<ListStateProps<T>>
+  props: MaybeAccessor<ListStateProps<T>>,
 ): ListState<T> {
   const getProps = () => access(props);
 
@@ -79,12 +83,11 @@ export function createListState<T = unknown>(
     const nodes: CollectionNode<T>[] = items.map((item, index) => {
       const o = item as CollectionItemLike;
       const key = p.getKey?.(item) ?? o.key ?? o.id ?? index;
-      const textValue =
-        p.getTextValue?.(item) ?? o.textValue ?? o.label ?? String(item);
+      const textValue = p.getTextValue?.(item) ?? o.textValue ?? o.label ?? String(item);
       const isDisabled = p.getDisabled?.(item) ?? o.isDisabled ?? false;
 
       return {
-        type: 'item' as const,
+        type: "item" as const,
         key,
         value: item,
         textValue,
@@ -117,8 +120,9 @@ export function createListState<T = unknown>(
     return [...new Set([...propsDisabled, ...itemDisabled])];
   });
 
-  // Create selection state
-  const selectionState = createSelectionState({
+  // Raw selection + focus state (the lower layer). This owns the selected keys,
+  // focus, selection behavior, and disabled keys, but is not collection-aware.
+  const state = createMultipleSelectionState({
     get selectionMode() {
       return getProps().selectionMode;
     },
@@ -148,32 +152,60 @@ export function createListState<T = unknown>(
     },
   });
 
-  // Focus state
-  const [isFocused, setIsFocused] = createSignal(false);
-  const [focusedKey, setFocusedKeyInternal] = createSignal<Key | null>(null);
-  const [childFocusStrategy, setChildFocusStrategy] = createSignal<FocusStrategy | null>(null);
-
-  const setFocusedKey = (key: Key | null, childStrategy?: FocusStrategy) => {
-    setFocusedKeyInternal(key);
-    setChildFocusStrategy(childStrategy ?? null);
-  };
+  // The collection-aware selection manager (the upper layer): the single source
+  // of truth for every selection operation. It reads the collection live so it
+  // stays reactive as the collection memo recomputes.
+  const selectionManager = new SelectionManager<T>(() => collection(), state);
 
   return {
     collection,
-    isFocused,
-    setFocused: setIsFocused,
-    focusedKey,
-    setFocusedKey,
-    childFocusStrategy,
-    ...selectionState,
+    selectionManager,
+
+    // Focus — delegate to the raw state (the single source of truth). The
+    // setter routes through the manager so it inherits the existence guard and
+    // the upstream 'first' child-focus default.
+    isFocused: () => state.isFocused,
+    setFocused: (isFocused: boolean) => state.setFocused(isFocused),
+    focusedKey: () => state.focusedKey,
+    setFocusedKey: (key: Key | null, childStrategy?: FocusStrategy) =>
+      selectionManager.setFocusedKey(key, childStrategy),
+    childFocusStrategy: () => state.childFocusStrategy,
+
+    // Flattened selection surface — delegates to the manager so the list path
+    // shares one faithful engine. extendSelection keeps its legacy second
+    // argument for back-compat, but ignores it (the manager reads the
+    // collection itself).
+    selectionMode: () => selectionManager.selectionMode,
+    selectionBehavior: () => selectionManager.selectionBehavior,
+    disallowEmptySelection: () => selectionManager.disallowEmptySelection,
+    selectedKeys: () => state.selectedKeys,
+    disabledKeys: () => selectionManager.disabledKeys,
+    disabledBehavior: () => selectionManager.disabledBehavior,
+    isEmpty: () => selectionManager.isEmpty,
+    isSelectAll: () => selectionManager.isSelectAll,
+    isSelected: (key: Key) => selectionManager.isSelected(key),
+    isDisabled: (key: Key) => selectionManager.isDisabled(key),
+    setSelectionBehavior: (behavior: SelectionBehavior) =>
+      selectionManager.setSelectionBehavior(behavior),
+    toggleSelection: (key: Key) => selectionManager.toggleSelection(key),
+    replaceSelection: (key: Key) => selectionManager.replaceSelection(key),
+    setSelectedKeys: (keys: Iterable<Key>) => selectionManager.setSelectedKeys(keys),
+    selectAll: () => selectionManager.selectAll(),
+    clearSelection: () => selectionManager.clearSelection(),
+    toggleSelectAll: () => selectionManager.toggleSelectAll(),
+    extendSelection: (toKey: Key, _collection?: Collection) =>
+      selectionManager.extendSelection(toKey),
+    select: (key: Key, e?: SelectionPressEvent) => selectionManager.select(key, e),
   };
 }
 
 /**
  * Props for single selection list state.
  */
-export interface SingleSelectListStateProps<T = unknown>
-  extends Omit<ListStateProps<T>, 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange'> {
+export interface SingleSelectListStateProps<T = unknown> extends Omit<
+  ListStateProps<T>,
+  "selectionMode" | "selectedKeys" | "defaultSelectedKeys" | "onSelectionChange"
+> {
   /** The currently selected key (controlled). */
   selectedKey?: Key | null;
   /** The default selected key (uncontrolled). */
@@ -195,7 +227,7 @@ export interface SingleSelectListState<T = unknown> extends ListState<T> {
  * Creates state for a single-select list component.
  */
 export function createSingleSelectListState<T = unknown>(
-  props: MaybeAccessor<SingleSelectListStateProps<T>>
+  props: MaybeAccessor<SingleSelectListStateProps<T>>,
 ): SingleSelectListState<T> {
   const getProps = () => access(props);
 
@@ -219,7 +251,7 @@ export function createSingleSelectListState<T = unknown>(
     get disabledBehavior() {
       return getProps().disabledBehavior;
     },
-    selectionMode: 'single',
+    selectionMode: "single",
     disallowEmptySelection: true,
     allowDuplicateSelectionEvents: true,
     get selectedKeys() {
@@ -231,7 +263,7 @@ export function createSingleSelectListState<T = unknown>(
       return key != null ? [key] : undefined;
     },
     onSelectionChange(keys) {
-      if (keys === 'all') return;
+      if (keys === "all") return;
       const key = keys.values().next().value ?? null;
       getProps().onSelectionChange?.(key);
     },
@@ -239,7 +271,7 @@ export function createSingleSelectListState<T = unknown>(
 
   const selectedKey: Accessor<Key | null> = () => {
     const keys = listState.selectedKeys();
-    if (keys === 'all') return null;
+    if (keys === "all") return null;
     return keys.values().next().value ?? null;
   };
 

package/src/collections/createMenuState.d.ts

@@ -2,49 +2,54 @@
  * State management for menu components.
  * Based on @react-stately/menu.
  */
-import { type MaybeAccessor } from '../utils';
-import { type ListState, type ListStateProps } from './createListState';
-import type { Key } from './types';
-export interface MenuStateProps<T = unknown> extends Omit<ListStateProps<T>, 'selectionMode' | 'disallowEmptySelection'> {
-    /** Handler called when an item is activated (pressed). */
-    onAction?: (key: Key) => void;
-    /** Handler called when the menu should close. */
-    onClose?: () => void;
+import { type MaybeAccessor } from "../utils";
+import { type ListState, type ListStateProps } from "./createListState";
+import type { Key } from "./types";
+export interface MenuStateProps<T = unknown> extends Omit<
+  ListStateProps<T>,
+  "selectionMode" | "disallowEmptySelection"
+> {
+  /** Handler called when an item is activated (pressed). */
+  onAction?: (key: Key) => void;
+  /** Handler called when the menu should close. */
+  onClose?: () => void;
 }
 export interface MenuState<T = unknown> extends ListState<T> {
-    /** Close the menu. */
-    close(): void;
+  /** Close the menu. */
+  close(): void;
 }
 /**
  * Creates state for a menu component.
  * Menus are single-select lists that support actions.
  */
-export declare function createMenuState<T = unknown>(props: MaybeAccessor<MenuStateProps<T>>): MenuState<T>;
+export declare function createMenuState<T = unknown>(
+  props: MaybeAccessor<MenuStateProps<T>>,
+): MenuState<T>;
 export interface MenuTriggerStateProps {
-    /** Whether the menu is open (controlled). */
-    isOpen?: boolean;
-    /** Default open state (uncontrolled). */
-    defaultOpen?: boolean;
-    /** Handler called when the open state changes. */
-    onOpenChange?: (isOpen: boolean) => void;
+  /** Whether the menu is open (controlled). */
+  isOpen?: boolean;
+  /** Default open state (uncontrolled). */
+  defaultOpen?: boolean;
+  /** Handler called when the open state changes. */
+  onOpenChange?: (isOpen: boolean) => void;
 }
 export interface MenuTriggerState {
-    /** Whether the menu is open. */
-    readonly isOpen: () => boolean;
-    /** Open the menu. */
-    open(): void;
-    /** Close the menu. */
-    close(): void;
-    /** Toggle the menu. */
-    toggle(): void;
-    /** Focus strategy for when the menu opens. */
-    readonly focusStrategy: () => 'first' | 'last' | null;
-    /** Set the focus strategy. */
-    setFocusStrategy(strategy: 'first' | 'last' | null): void;
+  /** Whether the menu is open. */
+  readonly isOpen: () => boolean;
+  /** Open the menu. */
+  open(): void;
+  /** Close the menu. */
+  close(): void;
+  /** Toggle the menu. */
+  toggle(): void;
+  /** Focus strategy for when the menu opens. */
+  readonly focusStrategy: () => "first" | "last" | null;
+  /** Set the focus strategy. */
+  setFocusStrategy(strategy: "first" | "last" | null): void;
 }
 /**
  * Creates state for a menu trigger (button that opens a menu).
  * This is essentially the same as overlay trigger state but with focus strategy.
  */
-export { createOverlayTriggerState as createMenuTriggerState } from '../overlays';
-//# sourceMappingURL=createMenuState.d.ts.map
+export { createOverlayTriggerState as createMenuTriggerState } from "../overlays";
+//# sourceMappingURL=createMenuState.d.ts.map

package/src/collections/createMenuState.ts

@@ -3,12 +3,11 @@
  * Based on @react-stately/menu.
  */
 
-import { access, type MaybeAccessor } from '../utils';
-import { createListState, type ListState, type ListStateProps } from './createListState';
-import type { Key } from './types';
+import { access, type MaybeAccessor } from "../utils";
+import { createListState, type ListState, type ListStateProps } from "./createListState";
+import type { Key } from "./types";
 
-export interface MenuStateProps<T = unknown>
-  extends Omit<ListStateProps<T>, 'selectionMode' | 'disallowEmptySelection'> {
+export interface MenuStateProps<T = unknown> extends ListStateProps<T> {
   /** Handler called when an item is activated (pressed). */
   onAction?: (key: Key) => void;
   /** Handler called when the menu should close. */
@@ -25,11 +24,11 @@ export interface MenuState<T = unknown> extends ListState<T> {
  * Menus are single-select lists that support actions.
  */
 export function createMenuState<T = unknown>(
-  props: MaybeAccessor<MenuStateProps<T>>
+  props: MaybeAccessor<MenuStateProps<T>>,
 ): MenuState<T> {
   const getProps = () => access(props);
 
-  // Create list state with single selection
+  // Menus default to action-only items, but can opt into single or multiple selection.
   const listState = createListState<T>({
     get items() {
       return getProps().items;
@@ -49,20 +48,30 @@ export function createMenuState<T = unknown>(
     get disabledBehavior() {
       return getProps().disabledBehavior;
     },
-    selectionMode: 'none', // Menus typically use onAction, not selection
-    disallowEmptySelection: true,
+    get selectionMode() {
+      return getProps().selectionMode ?? "none";
+    },
+    get disallowEmptySelection() {
+      return getProps().disallowEmptySelection;
+    },
     get selectedKeys() {
+      if ((getProps().selectionMode ?? "none") === "none") return undefined;
       return getProps().selectedKeys;
     },
     get defaultSelectedKeys() {
+      if ((getProps().selectionMode ?? "none") === "none") return undefined;
       return getProps().defaultSelectedKeys;
     },
     get onSelectionChange() {
+      if ((getProps().selectionMode ?? "none") === "none") return undefined;
       return getProps().onSelectionChange;
     },
     get selectionBehavior() {
       return getProps().selectionBehavior;
     },
+    get allowDuplicateSelectionEvents() {
+      return getProps().allowDuplicateSelectionEvents;
+    },
   });
 
   const close = () => {
@@ -94,13 +103,13 @@ export interface MenuTriggerState {
   /** Toggle the menu. */
   toggle(): void;
   /** Focus strategy for when the menu opens. */
-  readonly focusStrategy: () => 'first' | 'last' | null;
+  readonly focusStrategy: () => "first" | "last" | null;
   /** Set the focus strategy. */
-  setFocusStrategy(strategy: 'first' | 'last' | null): void;
+  setFocusStrategy(strategy: "first" | "last" | null): void;
 }
 
 /**
  * Creates state for a menu trigger (button that opens a menu).
  * This is essentially the same as overlay trigger state but with focus strategy.
  */
-export { createOverlayTriggerState as createMenuTriggerState } from '../overlays';
+export { createOverlayTriggerState as createMenuTriggerState } from "../overlays";

package/src/collections/createSelectionState.d.ts

@@ -2,75 +2,88 @@
  * Selection state management for collections.
  * Based on @react-stately/selection.
  */
-import { type Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
-import type { Collection, DisabledBehavior, Key, Selection, SelectionBehavior, SelectionMode } from './types';
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
+import type {
+  Collection,
+  DisabledBehavior,
+  Key,
+  Selection,
+  SelectionBehavior,
+  SelectionMode,
+} from "./types";
 export interface SelectionStateProps {
-    /** The selection mode. */
-    selectionMode?: SelectionMode;
-    /** How selection behaves on interaction. */
-    selectionBehavior?: SelectionBehavior;
-    /** 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: Selection) => void;
-    /** Keys of disabled items. */
-    disabledKeys?: Iterable<Key>;
-    /** How disabled keys behave. */
-    disabledBehavior?: DisabledBehavior;
-    /** Whether to allow duplicate selection events. */
-    allowDuplicateSelectionEvents?: boolean;
+  /** The selection mode. */
+  selectionMode?: SelectionMode;
+  /** How selection behaves on interaction. */
+  selectionBehavior?: SelectionBehavior;
+  /** 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: Selection) => void;
+  /** Keys of disabled items. */
+  disabledKeys?: Iterable<Key>;
+  /** How disabled keys behave. */
+  disabledBehavior?: DisabledBehavior;
+  /** Whether to allow duplicate selection events. */
+  allowDuplicateSelectionEvents?: boolean;
 }
 export interface SelectionState {
-    /** The selection mode. */
-    readonly selectionMode: Accessor<SelectionMode>;
-    /** The selection behavior. */
-    readonly selectionBehavior: Accessor<SelectionBehavior>;
-    /** Whether empty selection is disallowed. */
-    readonly disallowEmptySelection: Accessor<boolean>;
-    /** The currently selected keys. */
-    readonly selectedKeys: Accessor<Selection>;
-    /** Set of disabled keys. */
-    readonly disabledKeys: Accessor<Set<Key>>;
-    /** How disabled keys behave. */
-    readonly disabledBehavior: Accessor<DisabledBehavior>;
-    /** Whether the selection is empty. */
-    readonly isEmpty: Accessor<boolean>;
-    /** Whether all items are selected. */
-    readonly isSelectAll: Accessor<boolean>;
-    /** Check if a key is selected. */
-    isSelected(key: Key): boolean;
-    /** Check if a key is disabled. */
-    isDisabled(key: Key): boolean;
-    /** Set the selection behavior. */
-    setSelectionBehavior(behavior: SelectionBehavior): void;
-    /** Toggle selection for a key. */
-    toggleSelection(key: Key): void;
-    /** Replace selection with a single key. */
-    replaceSelection(key: Key): void;
-    /** Set multiple selected keys. */
-    setSelectedKeys(keys: Iterable<Key>): void;
-    /** Select all items. */
-    selectAll(): void;
-    /** Clear all selection. */
-    clearSelection(): void;
-    /** Toggle between select all and clear. */
-    toggleSelectAll(): void;
-    /** Extend selection to a key (for shift-click). */
-    extendSelection(toKey: Key, collection: Collection): void;
-    /** Select a key based on interaction. */
-    select(key: Key, e?: {
-        shiftKey?: boolean;
-        ctrlKey?: boolean;
-        metaKey?: boolean;
-    }, collection?: Collection): void;
+  /** The selection mode. */
+  readonly selectionMode: Accessor<SelectionMode>;
+  /** The selection behavior. */
+  readonly selectionBehavior: Accessor<SelectionBehavior>;
+  /** Whether empty selection is disallowed. */
+  readonly disallowEmptySelection: Accessor<boolean>;
+  /** The currently selected keys. */
+  readonly selectedKeys: Accessor<Selection>;
+  /** Set of disabled keys. */
+  readonly disabledKeys: Accessor<Set<Key>>;
+  /** How disabled keys behave. */
+  readonly disabledBehavior: Accessor<DisabledBehavior>;
+  /** Whether the selection is empty. */
+  readonly isEmpty: Accessor<boolean>;
+  /** Whether all items are selected. */
+  readonly isSelectAll: Accessor<boolean>;
+  /** Check if a key is selected. */
+  isSelected(key: Key): boolean;
+  /** Check if a key is disabled. */
+  isDisabled(key: Key): boolean;
+  /** Set the selection behavior. */
+  setSelectionBehavior(behavior: SelectionBehavior): void;
+  /** Toggle selection for a key. */
+  toggleSelection(key: Key): void;
+  /** Replace selection with a single key. */
+  replaceSelection(key: Key): void;
+  /** Set multiple selected keys. */
+  setSelectedKeys(keys: Iterable<Key>): void;
+  /** Select all items. */
+  selectAll(): void;
+  /** Clear all selection. */
+  clearSelection(): void;
+  /** Toggle between select all and clear. */
+  toggleSelectAll(): void;
+  /** Extend selection to a key (for shift-click). */
+  extendSelection(toKey: Key, collection: Collection): void;
+  /** Select a key based on interaction. */
+  select(
+    key: Key,
+    e?: {
+      shiftKey?: boolean;
+      ctrlKey?: boolean;
+      metaKey?: boolean;
+    },
+    collection?: Collection,
+  ): void;
 }
 /**
  * Creates selection state for a collection.
  */
-export declare function createSelectionState(props?: MaybeAccessor<SelectionStateProps>): SelectionState;
-//# sourceMappingURL=createSelectionState.d.ts.map
+export declare function createSelectionState(
+  props?: MaybeAccessor<SelectionStateProps>,
+): SelectionState;
+//# sourceMappingURL=createSelectionState.d.ts.map