@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/searchfield/createSearchFieldState.ts

@@ -3,8 +3,8 @@
  * Based on @react-stately/searchfield useSearchFieldState.
  */
 
-import { type Accessor, createSignal, createMemo } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
+import { type Accessor, createSignal, createMemo } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
 
 export interface SearchFieldStateProps {
   /** The current value (controlled). */
@@ -26,25 +26,19 @@ export interface SearchFieldState {
  * Provides state management for a search field.
  */
 export function createSearchFieldState(
-  props: MaybeAccessor<SearchFieldStateProps>
+  props: MaybeAccessor<SearchFieldStateProps>,
 ): SearchFieldState {
   const getProps = () => access(props);
 
-  // Controlled vs uncontrolled
   const isControlled = () => getProps().value !== undefined;
 
-  // Internal signal for uncontrolled mode
-  const [internalValue, setInternalValue] = createSignal(
-    getProps().defaultValue ?? ''
-  );
+  const [internalValue, setInternalValue] = createSignal(getProps().defaultValue ?? "");
 
-  // Current value accessor
   const value = createMemo(() => {
     const p = getProps();
-    return isControlled() ? (p.value ?? '') : internalValue();
+    return isControlled() ? (p.value ?? "") : internalValue();
   });
 
-  // Set value function
   const setValue = (newValue: string) => {
     const p = getProps();
 

package/src/searchfield/index.d.ts

@@ -1,3 +1,3 @@
-export { createSearchFieldState } from './createSearchFieldState';
-export type { SearchFieldState, SearchFieldStateProps, } from './createSearchFieldState';
-//# sourceMappingURL=index.d.ts.map
+export { createSearchFieldState } from "./createSearchFieldState";
+export type { SearchFieldState, SearchFieldStateProps } from "./createSearchFieldState";
+//# sourceMappingURL=index.d.ts.map

package/src/searchfield/index.ts

@@ -1,5 +1,2 @@
-export { createSearchFieldState } from './createSearchFieldState';
-export type {
-  SearchFieldState,
-  SearchFieldStateProps,
-} from './createSearchFieldState';
+export { createSearchFieldState } from "./createSearchFieldState";
+export type { SearchFieldState, SearchFieldStateProps } from "./createSearchFieldState";

package/src/select/createSelectState.d.ts

@@ -2,72 +2,74 @@
  * State management for select components.
  * Based on @react-stately/select useSelectState.
  */
-import { type Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
-import type { Key, CollectionNode, Collection } from '../collections/types';
+import { type Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
+import type { Key, CollectionNode, Collection } from "../collections/types";
 export interface SelectStateProps<T = unknown> {
-    /** The items to display in the select. */
-    items: T[];
-    /** Function to get the key for an item. */
-    getKey?: (item: T) => Key;
-    /** Function to get the text value for an item. */
-    getTextValue?: (item: T) => string;
-    /** Function to check if an item is disabled. */
-    getDisabled?: (item: T) => boolean;
-    /** Keys of disabled items. */
-    disabledKeys?: Iterable<Key>;
-    /** The currently selected key (controlled). */
-    selectedKey?: Key | null;
-    /** The default selected key (uncontrolled). */
-    defaultSelectedKey?: Key | null;
-    /** Handler called when the selection changes. */
-    onSelectionChange?: (key: Key | null) => void;
-    /** Whether the select is open (controlled). */
-    isOpen?: boolean;
-    /** Whether the select is open by default (uncontrolled). */
-    defaultOpen?: boolean;
-    /** Handler called when the open state changes. */
-    onOpenChange?: (isOpen: boolean) => void;
-    /** Whether the select is disabled. */
-    isDisabled?: boolean;
-    /** Whether the select is required. */
-    isRequired?: boolean;
+  /** The items to display in the select. */
+  items: T[];
+  /** Function to get the key for an item. */
+  getKey?: (item: T) => Key;
+  /** Function to get the text value for an item. */
+  getTextValue?: (item: T) => string;
+  /** Function to check if an item is disabled. */
+  getDisabled?: (item: T) => boolean;
+  /** Keys of disabled items. */
+  disabledKeys?: Iterable<Key>;
+  /** The currently selected key (controlled). */
+  selectedKey?: Key | null;
+  /** The default selected key (uncontrolled). */
+  defaultSelectedKey?: Key | null;
+  /** Handler called when the selection changes. */
+  onSelectionChange?: (key: Key | null) => void;
+  /** Whether the select is open (controlled). */
+  isOpen?: boolean;
+  /** Whether the select is open by default (uncontrolled). */
+  defaultOpen?: boolean;
+  /** Handler called when the open state changes. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Whether the select is disabled. */
+  isDisabled?: boolean;
+  /** Whether the select is required. */
+  isRequired?: boolean;
 }
 export interface SelectState<T = unknown> {
-    /** The collection of items. */
-    readonly collection: Accessor<Collection<T>>;
-    /** Whether the select dropdown is open. */
-    readonly isOpen: Accessor<boolean>;
-    /** Open the select dropdown. */
-    open(): void;
-    /** Close the select dropdown. */
-    close(): void;
-    /** Toggle the select dropdown. */
-    toggle(): void;
-    /** The currently selected key. */
-    readonly selectedKey: Accessor<Key | null>;
-    /** The currently selected item. */
-    readonly selectedItem: Accessor<CollectionNode<T> | null>;
-    /** Set the selected key. */
-    setSelectedKey(key: Key | null): void;
-    /** The currently focused key. */
-    readonly focusedKey: Accessor<Key | null>;
-    /** Set the focused key. */
-    setFocusedKey(key: Key | null): void;
-    /** Whether the select has focus. */
-    readonly isFocused: Accessor<boolean>;
-    /** Set whether the select has focus. */
-    setFocused(isFocused: boolean): void;
-    /** Whether a specific key is disabled. */
-    isKeyDisabled(key: Key): boolean;
-    /** Whether the select is disabled. */
-    readonly isDisabled: boolean;
-    /** Whether the select is required. */
-    readonly isRequired: boolean;
+  /** The collection of items. */
+  readonly collection: Accessor<Collection<T>>;
+  /** Whether the select dropdown is open. */
+  readonly isOpen: Accessor<boolean>;
+  /** Open the select dropdown. */
+  open(): void;
+  /** Close the select dropdown. */
+  close(): void;
+  /** Toggle the select dropdown. */
+  toggle(): void;
+  /** The currently selected key. */
+  readonly selectedKey: Accessor<Key | null>;
+  /** The currently selected item. */
+  readonly selectedItem: Accessor<CollectionNode<T> | null>;
+  /** Set the selected key. */
+  setSelectedKey(key: Key | null): void;
+  /** The currently focused key. */
+  readonly focusedKey: Accessor<Key | null>;
+  /** Set the focused key. */
+  setFocusedKey(key: Key | null): void;
+  /** Whether the select has focus. */
+  readonly isFocused: Accessor<boolean>;
+  /** Set whether the select has focus. */
+  setFocused(isFocused: boolean): void;
+  /** Whether a specific key is disabled. */
+  isKeyDisabled(key: Key): boolean;
+  /** Whether the select is disabled. */
+  readonly isDisabled: boolean;
+  /** Whether the select is required. */
+  readonly isRequired: boolean;
 }
 /**
  * Creates state for a select component.
  * Combines list state with overlay trigger state for dropdown behavior.
  */
-export declare function createSelectState<T = unknown>(props: MaybeAccessor<SelectStateProps<T>>): SelectState<T>;
-//# sourceMappingURL=createSelectState.d.ts.map
+export declare function createSelectState<T = unknown>(
+  props: MaybeAccessor<SelectStateProps<T>>,
+): SelectState<T>;
+//# sourceMappingURL=createSelectState.d.ts.map

package/src/select/createSelectState.ts

@@ -3,12 +3,13 @@
  * Based on @react-stately/select useSelectState.
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-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 { createSignal, createMemo, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+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. */
@@ -26,15 +27,15 @@ export interface SelectStateProps<T = unknown> {
   /** The default selected key (uncontrolled). */
   defaultSelectedKey?: Key | null;
   /** The selected keys (controlled, for multiple selection mode). */
-  selectedKeys?: 'all' | Iterable<Key>;
+  selectedKeys?: "all" | Iterable<Key>;
   /** Default selected keys (uncontrolled, for multiple selection mode). */
-  defaultSelectedKeys?: 'all' | Iterable<Key>;
+  defaultSelectedKeys?: "all" | Iterable<Key>;
   /** Handler called when the selection changes. */
   onSelectionChange?: (key: Key | null) => void;
   /** Handler called when selected keys change. */
   onSelectionChangeKeys?: (keys: Selection) => void;
   /** Selection mode for the select. */
-  selectionMode?: Extract<SelectionMode, 'single' | 'multiple'>;
+  selectionMode?: Extract<SelectionMode, "single" | "multiple">;
   /** Whether the select is open (controlled). */
   isOpen?: boolean;
   /** Whether the select is open by default (uncontrolled). */
@@ -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. */
@@ -85,7 +91,7 @@ export interface SelectState<T = unknown> {
   /** Whether the select is required. */
   readonly isRequired: boolean;
   /** The selection mode. */
-  readonly selectionMode: Accessor<'single' | 'multiple'>;
+  readonly selectionMode: Accessor<"single" | "multiple">;
 }
 
 /**
@@ -93,10 +99,10 @@ export interface SelectState<T = unknown> {
  * Combines list state with overlay trigger state for dropdown behavior.
  */
 export function createSelectState<T = unknown>(
-  props: MaybeAccessor<SelectStateProps<T>>
+  props: MaybeAccessor<SelectStateProps<T>>,
 ): SelectState<T> {
   const getProps = () => access(props);
-  const selectionMode: Accessor<'single' | 'multiple'> = () => getProps().selectionMode ?? 'single';
+  const selectionMode: Accessor<"single" | "multiple"> = () => getProps().selectionMode ?? "single";
 
   // Overlay trigger state for open/close
   const overlayState = createOverlayTriggerState({
@@ -115,18 +121,18 @@ export function createSelectState<T = unknown>(
   const isControlledSingle = () => getProps().selectedKey !== undefined;
   const isControlledMultiple = () => getProps().selectedKeys !== undefined;
   const [internalSelectedKey, setInternalSelectedKey] = createSignal<Key | null>(
-    getProps().defaultSelectedKey ?? null
+    getProps().defaultSelectedKey ?? null,
   );
   const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Selection>(
-    getProps().defaultSelectedKeys === 'all'
-      ? 'all'
-      : new Set(getProps().defaultSelectedKeys ?? [])
+    getProps().defaultSelectedKeys === "all"
+      ? "all"
+      : new Set(getProps().defaultSelectedKeys ?? []),
   );
 
   const selectedKey: Accessor<Key | null> = () => {
-    if (selectionMode() === 'multiple') {
+    if (selectionMode() === "multiple") {
       const keys = selectedKeys();
-      if (keys === 'all') return null;
+      if (keys === "all") return null;
       return keys.size > 0 ? Array.from(keys)[0] : null;
     }
 
@@ -134,7 +140,7 @@ export function createSelectState<T = unknown>(
   };
 
   const setSelectedKey = (key: Key | null) => {
-    if (selectionMode() === 'multiple') {
+    if (selectionMode() === "multiple") {
       if (key == null) {
         if (!isControlledMultiple()) {
           setInternalSelectedKeys(new Set<Key>());
@@ -160,10 +166,10 @@ export function createSelectState<T = unknown>(
   };
 
   const selectedKeys: Accessor<Selection> = createMemo(() => {
-    if (selectionMode() === 'multiple') {
+    if (selectionMode() === "multiple") {
       if (isControlledMultiple()) {
         const keys = getProps().selectedKeys;
-        return keys === 'all' ? 'all' : new Set<Key>(keys ?? []);
+        return keys === "all" ? "all" : new Set<Key>(keys ?? []);
       }
       return internalSelectedKeys();
     }
@@ -174,7 +180,7 @@ export function createSelectState<T = unknown>(
 
   const setSelectedKeys = (keys: Iterable<Key>) => {
     const next = new Set(keys);
-    if (selectionMode() === 'multiple') {
+    if (selectionMode() === "multiple") {
       if (!isControlledMultiple()) {
         setInternalSelectedKeys(next);
       }
@@ -210,23 +216,23 @@ export function createSelectState<T = unknown>(
     disallowEmptySelection: true,
     get selectedKeys() {
       const keys = selectedKeys();
-      if (keys === 'all') return 'all';
+      if (keys === "all") return "all";
       return keys;
     },
     onSelectionChange(keys) {
-      if (selectionMode() === 'multiple') {
+      if (selectionMode() === "multiple") {
         if (!isControlledMultiple()) {
           setInternalSelectedKeys(keys);
         }
         getProps().onSelectionChangeKeys?.(keys);
-        if (keys !== 'all') {
+        if (keys !== "all") {
           getProps().onSelectionChange?.(keys.size > 0 ? Array.from(keys)[0] : null);
         }
         return;
       }
 
       // Get the first (and only) selected key
-      if (keys === 'all') return;
+      if (keys === "all") return;
       const key = keys.size > 0 ? Array.from(keys)[0] : null;
       setSelectedKey(key);
       // Close the dropdown after selection in single mode
@@ -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();
@@ -243,7 +255,7 @@ export function createSelectState<T = unknown>(
 
   const selectedItems: Accessor<CollectionNode<T>[]> = createMemo(() => {
     const keys = selectedKeys();
-    if (keys === 'all') {
+    if (keys === "all") {
       return Array.from(listState.collection());
     }
 
@@ -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/select/index.d.ts

@@ -1,2 +1,2 @@
-export { createSelectState, type SelectStateProps, type SelectState, } from './createSelectState';
-//# sourceMappingURL=index.d.ts.map
+export { createSelectState, type SelectStateProps, type SelectState } from "./createSelectState";
+//# sourceMappingURL=index.d.ts.map

package/src/select/index.ts

@@ -1,5 +1 @@
-export {
-  createSelectState,
-  type SelectStateProps,
-  type SelectState,
-} from './createSelectState';
+export { createSelectState, type SelectStateProps, type SelectState } from "./createSelectState";

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;
+    }
+  }
+}