@proyecto-viviana/solid-stately 0.2.4 → 0.3.0

package/src/tabs/createTabListState.ts

@@ -3,18 +3,19 @@
  * Based on @react-stately/tabs.
  */
 
-import { createSignal, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-import { ListCollection } from '../collections/ListCollection';
+import { createComputed, createMemo, createSignal, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+import { ListCollection } from "../collections/ListCollection";
 import type {
   Collection,
+  CollectionItemLike,
   CollectionNode,
   Key,
   FocusStrategy,
-} from '../collections/types';
+} from "../collections/types";
 
-export type KeyboardActivation = 'automatic' | 'manual';
-export type TabOrientation = 'horizontal' | 'vertical';
+export type KeyboardActivation = "automatic" | "manual";
+export type TabOrientation = "horizontal" | "vertical";
 
 export interface TabListStateProps<T = unknown> {
   /** The items in the tab list. */
@@ -76,27 +77,26 @@ export interface TabListState<T = unknown> {
  * Creates state for a tab list component.
  */
 export function createTabListState<T = unknown>(
-  props: MaybeAccessor<TabListStateProps<T>>
+  props: MaybeAccessor<TabListStateProps<T>>,
 ): TabListState<T> {
   const getProps = () => access(props);
 
-  // Build collection from items
-  const collection: Accessor<Collection<T>> = () => {
+  const collection: Accessor<Collection<T>> = createMemo(() => {
     const p = getProps();
     const items = p.items ?? [];
 
     const nodes: CollectionNode<T>[] = items.map((item, index) => {
-      const key = p.getKey?.(item) ?? (item as any).key ?? (item as any).id ?? index;
-      const textValue =
-        p.getTextValue?.(item) ?? (item as any).textValue ?? (item as any).label ?? String(item);
-      const isDisabled = p.getDisabled?.(item) ?? (item as any).isDisabled ?? false;
+      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 isDisabled = p.getDisabled?.(item) ?? o.isDisabled ?? false;
 
       return {
-        type: 'item' as const,
+        type: "item" as const,
         key,
         value: item,
         textValue,
-        rendered: null as any,
+        rendered: null!,
         level: 0,
         index,
         parentKey: null,
@@ -107,10 +107,10 @@ export function createTabListState<T = unknown>(
     });
 
     return new ListCollection(nodes);
-  };
+  });
 
-  // Compute disabled keys
-  const disabledKeys: Accessor<Set<Key>> = () => {
+  // Compute disabled keys (memoized to avoid rebuilding Set per access)
+  const disabledKeys: Accessor<Set<Key>> = createMemo(() => {
     const p = getProps();
     const result = new Set<Key>(p.disabledKeys ?? []);
 
@@ -122,9 +122,8 @@ export function createTabListState<T = unknown>(
     }
 
     return result;
-  };
+  });
 
-  // Check if a key is disabled
   const isKeyDisabled = (key: Key): boolean => {
     const p = getProps();
     if (p.isDisabled) return true;
@@ -142,30 +141,24 @@ export function createTabListState<T = unknown>(
     return null;
   };
 
-  // Get initial selected key
   const getInitialSelectedKey = (): Key | null => {
     const p = getProps();
 
-    // If controlled, use that value
     if (p.selectedKey !== undefined) {
       return p.selectedKey;
     }
 
-    // If default provided and not disabled, use it
     if (p.defaultSelectedKey !== undefined && !isKeyDisabled(p.defaultSelectedKey)) {
       return p.defaultSelectedKey;
     }
 
-    // Otherwise, select first non-disabled
     return findFirstNonDisabledKey();
   };
 
-  // Selection state
   const [selectedKeyInternal, setSelectedKeyInternal] = createSignal<Key | null>(
-    getInitialSelectedKey()
+    getInitialSelectedKey(),
   );
 
-  // Compute actual selected key (controlled vs uncontrolled)
   const selectedKey: Accessor<Key | null> = () => {
     const p = getProps();
     if (p.selectedKey !== undefined) {
@@ -175,38 +168,30 @@ export function createTabListState<T = unknown>(
   };
 
   const setSelectedKey = (key: Key) => {
-    // Don't select disabled keys
     if (isKeyDisabled(key)) return;
+    if (selectedKey() === key) return;
 
     const p = getProps();
-    // For uncontrolled mode, update internal state
     if (p.selectedKey === undefined) {
       setSelectedKeyInternal(key);
     }
 
-    // Always call onChange
     p.onSelectionChange?.(key);
   };
 
-  // Get selected item
   const selectedItem: Accessor<CollectionNode<T> | null> = () => {
     const key = selectedKey();
     if (key === null) return null;
     return collection().getItem(key);
   };
 
-  // Is disabled accessor
   const isDisabled: Accessor<boolean> = () => getProps().isDisabled ?? false;
 
-  // Keyboard activation accessor
   const keyboardActivation: Accessor<KeyboardActivation> = () =>
-    getProps().keyboardActivation ?? 'automatic';
+    getProps().keyboardActivation ?? "automatic";
 
-  // Orientation accessor
-  const orientation: Accessor<TabOrientation> = () =>
-    getProps().orientation ?? 'horizontal';
+  const orientation: Accessor<TabOrientation> = () => getProps().orientation ?? "horizontal";
 
-  // Focus state
   const [isFocused, setIsFocused] = createSignal(false);
   const [focusedKey, setFocusedKeyInternal] = createSignal<Key | null>(null);
   const [childFocusStrategy, setChildFocusStrategy] = createSignal<FocusStrategy | null>(null);
@@ -216,11 +201,45 @@ export function createTabListState<T = unknown>(
     setChildFocusStrategy(childStrategy ?? null);
 
     // In automatic mode, selecting follows focus
-    if (keyboardActivation() === 'automatic' && key !== null && !isKeyDisabled(key)) {
+    if (
+      keyboardActivation() === "automatic" &&
+      key !== null &&
+      key !== selectedKey() &&
+      !isKeyDisabled(key)
+    ) {
       setSelectedKey(key);
     }
   };
 
+  // Keep uncontrolled selection valid as items/disabled keys change.
+  createComputed(() => {
+    const p = getProps();
+    if (p.selectedKey !== undefined) return;
+
+    const coll = collection();
+    const current = selectedKeyInternal();
+    const currentExists = current !== null && coll.getItem(current) !== null;
+    const currentEnabled = current !== null && !isKeyDisabled(current);
+
+    if (currentExists && currentEnabled) return;
+
+    if (
+      p.defaultSelectedKey !== undefined &&
+      coll.getItem(p.defaultSelectedKey) !== null &&
+      !isKeyDisabled(p.defaultSelectedKey)
+    ) {
+      if (p.defaultSelectedKey !== current) {
+        setSelectedKeyInternal(p.defaultSelectedKey);
+      }
+      return;
+    }
+
+    const nextKey = findFirstNonDisabledKey();
+    if (nextKey !== current) {
+      setSelectedKeyInternal(nextKey);
+    }
+  });
+
   return {
     collection,
     selectedKey,

package/src/tabs/index.d.ts

@@ -1,2 +1,8 @@
-export { createTabListState, type TabListStateProps, type TabListState, type KeyboardActivation, type TabOrientation, } from './createTabListState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createTabListState,
+  type TabListStateProps,
+  type TabListState,
+  type KeyboardActivation,
+  type TabOrientation,
+} from "./createTabListState";
+//# sourceMappingURL=index.d.ts.map

package/src/tabs/index.ts

@@ -4,4 +4,4 @@ export {
   type TabListState,
   type KeyboardActivation,
   type TabOrientation,
-} from './createTabListState';
+} from "./createTabListState";

package/src/textfield/createTextFieldState.d.ts

@@ -6,25 +6,27 @@
  * This is a port of @react-stately/utils's useControlledState pattern
  * as used by @react-aria/textfield.
  */
-import { Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
+import { Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface TextFieldStateOptions {
-    /** The current value (controlled). */
-    value?: string;
-    /** The default value (uncontrolled). */
-    defaultValue?: string;
-    /** Handler that is called when the value changes. */
-    onChange?: (value: string) => void;
+  /** The current value (controlled). */
+  value?: string;
+  /** The default value (uncontrolled). */
+  defaultValue?: string;
+  /** Handler that is called when the value changes. */
+  onChange?: (value: string) => void;
 }
 export interface TextFieldState {
-    /** The current value of the text field. */
-    readonly value: Accessor<string>;
-    /** Sets the value of the text field. */
-    setValue(value: string): void;
+  /** The current value of the text field. */
+  readonly value: Accessor<string>;
+  /** Sets the value of the text field. */
+  setValue(value: string): void;
 }
 /**
  * Provides state management for text input components.
  * Supports both controlled and uncontrolled modes.
  */
-export declare function createTextFieldState(props?: MaybeAccessor<TextFieldStateOptions>): TextFieldState;
-//# sourceMappingURL=createTextFieldState.d.ts.map
+export declare function createTextFieldState(
+  props?: MaybeAccessor<TextFieldStateOptions>,
+): TextFieldState;
+//# sourceMappingURL=createTextFieldState.d.ts.map

package/src/textfield/createTextFieldState.ts

@@ -7,12 +7,8 @@
  * as used by @react-aria/textfield.
  */
 
-import { createSignal, Accessor } from 'solid-js';
-import { type MaybeAccessor, access } from '../utils';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, Accessor } from "solid-js";
+import { type MaybeAccessor, access } from "../utils";
 
 export interface TextFieldStateOptions {
   /** The current value (controlled). */
@@ -30,34 +26,27 @@ export interface TextFieldState {
   setValue(value: string): void;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides state management for text input components.
  * Supports both controlled and uncontrolled modes.
  */
-export function createTextFieldState(props: MaybeAccessor<TextFieldStateOptions> = {}): TextFieldState {
+export function createTextFieldState(
+  props: MaybeAccessor<TextFieldStateOptions> = {},
+): TextFieldState {
   const getProps = () => access(props);
 
-  // Get initial value
   const initialProps = getProps();
-  const initialValue = initialProps.value ?? initialProps.defaultValue ?? '';
+  const initialValue = initialProps.value ?? initialProps.defaultValue ?? "";
 
-  // Create internal signal for uncontrolled mode
   const [internalValue, setInternalValue] = createSignal(initialValue);
 
-  // Determine if controlled
   const isControlled = () => getProps().value !== undefined;
 
-  // Get current value
   const value: Accessor<string> = () => {
     const p = getProps();
-    return isControlled() ? (p.value ?? '') : internalValue();
+    return isControlled() ? (p.value ?? "") : internalValue();
   };
 
-  // Update value
   function setValue(newValue: string): void {
     const p = getProps();
 

package/src/textfield/index.d.ts

@@ -1,2 +1,6 @@
-export { createTextFieldState, type TextFieldStateOptions, type TextFieldState, } from './createTextFieldState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createTextFieldState,
+  type TextFieldStateOptions,
+  type TextFieldState,
+} from "./createTextFieldState";
+//# sourceMappingURL=index.d.ts.map

package/src/textfield/index.ts

@@ -2,4 +2,4 @@ export {
   createTextFieldState,
   type TextFieldStateOptions,
   type TextFieldState,
-} from './createTextFieldState';
+} from "./createTextFieldState";

package/src/toast/createToastState.d.ts

@@ -2,66 +2,73 @@
  * Toast state management for SolidJS
  * Based on @react-stately/toast useToastState
  */
-import { type Accessor } from 'solid-js';
+import { type Accessor } from "solid-js";
 export interface ToastOptions {
-    /** A timeout to automatically close the toast, in milliseconds. */
-    timeout?: number;
-    /** The priority of the toast relative to other toasts. */
-    priority?: number;
-    /** Handler called when the toast is closed. */
-    onClose?: () => void;
+  /** A timeout to automatically close the toast, in milliseconds. */
+  timeout?: number;
+  /** The priority of the toast relative to other toasts. */
+  priority?: number;
+  /** Handler called when the toast is closed. */
+  onClose?: () => void;
 }
 export interface QueuedToast<T> {
-    /** The content of the toast. */
-    content: T;
-    /** A unique key for the toast. */
-    key: string;
-    /** The timer for the toast. */
-    timer: Timer | null;
-    /** Whether the toast should be animated. */
-    animation?: 'entering' | 'exiting' | 'queued';
-    /** The priority of the toast. */
-    priority: number;
-    /** Handler called when the toast is closed. */
-    onClose?: () => void;
-    /** The timeout for the toast. */
-    timeout?: number;
+  /** The content of the toast. */
+  content: T;
+  /** A unique key for the toast. */
+  key: string;
+  /** The timer for the toast. */
+  timer: Timer | null;
+  /** Whether the toast should be animated. */
+  animation?: "entering" | "exiting" | "queued";
+  /** The priority of the toast. */
+  priority: number;
+  /** Handler called when the toast is closed. */
+  onClose?: () => void;
+  /** The timeout for the toast. */
+  timeout?: number;
 }
 export interface ToastQueueOptions {
-    /** The maximum number of toasts to display at once. */
-    maxVisibleToasts?: number;
-    /** Whether toasts should stack (true) or queue (false). */
-    hasExitAnimation?: boolean;
+  /** The maximum number of toasts to display at once. */
+  maxVisibleToasts?: number;
+  /** Whether toasts should stack (true) or queue (false). */
+  hasExitAnimation?: boolean;
 }
 export interface ToastStateProps<T> {
-    /** The toast queue to use. */
-    queue: ToastQueue<T>;
+  /** The toast queue to use. */
+  queue: ToastQueue<T>;
 }
 export interface ToastState<T> {
-    /** The currently visible toasts. */
-    visibleToasts: Accessor<QueuedToast<T>[]>;
-    /** Adds a toast to the queue. */
-    add: (content: T, options?: ToastOptions) => string;
-    /** Closes a toast by key. */
-    close: (key: string) => void;
-    /** Pauses all toast timers. */
-    pauseAll: () => void;
-    /** Resumes all toast timers. */
-    resumeAll: () => void;
+  /** The currently visible toasts. */
+  visibleToasts: Accessor<QueuedToast<T>[]>;
+  /** Adds a toast to the queue. */
+  add: (content: T, options?: ToastOptions) => string;
+  /** Closes a toast by key. Starts exit animation if hasExitAnimation is enabled. */
+  close: (key: string) => void;
+  /**
+   * Removes a toast after exit animation completes.
+   * Call this from the component layer when the CSS exit animation finishes.
+   */
+  remove: (key: string) => void;
+  /** Clears all queued and visible toasts. */
+  clear: () => void;
+  /** Pauses all toast timers. */
+  pauseAll: () => void;
+  /** Resumes all toast timers. */
+  resumeAll: () => void;
 }
 /**
  * A Timer that supports pause and resume.
  */
 export declare class Timer {
-    private timerId;
-    private startTime;
-    private remaining;
-    private callback;
-    constructor(callback: () => void, delay: number);
-    pause(): void;
-    resume(): void;
-    reset(delay: number): void;
-    cancel(): void;
+  private timerId;
+  private startTime;
+  private remaining;
+  private callback;
+  constructor(callback: () => void, delay: number);
+  pause(): void;
+  resume(): void;
+  reset(delay: number): void;
+  cancel(): void;
 }
 type SubscribeCallback<T> = (toasts: QueuedToast<T>[]) => void;
 /**
@@ -69,38 +76,42 @@ type SubscribeCallback<T> = (toasts: QueuedToast<T>[]) => void;
  * Can be created once and shared across the app (singleton pattern).
  */
 export declare class ToastQueue<T> {
-    private queue;
-    private subscriptions;
-    private maxVisibleToasts;
-    private hasExitAnimation;
-    private keyCounter;
-    constructor(options?: ToastQueueOptions);
-    /**
-     * Subscribe to queue changes.
-     */
-    subscribe(callback: SubscribeCallback<T>): () => void;
-    /**
-     * Add a toast to the queue.
-     */
-    add(content: T, options?: ToastOptions): string;
-    /**
-     * Close a toast by key.
-     */
-    close(key: string): void;
-    /**
-     * Remove a toast after exit animation completes.
-     */
-    remove(key: string): void;
-    /**
-     * Pause all toast timers.
-     */
-    pauseAll(): void;
-    /**
-     * Resume all toast timers.
-     */
-    resumeAll(): void;
-    private updateVisibility;
-    private notify;
+  private queue;
+  private subscriptions;
+  private maxVisibleToasts;
+  private hasExitAnimation;
+  private keyCounter;
+  constructor(options?: ToastQueueOptions);
+  /**
+   * Subscribe to queue changes.
+   */
+  subscribe(callback: SubscribeCallback<T>): () => void;
+  /**
+   * Add a toast to the queue.
+   */
+  add(content: T, options?: ToastOptions): string;
+  /**
+   * Close a toast by key.
+   */
+  close(key: string): void;
+  /**
+   * Remove a toast after exit animation completes.
+   */
+  remove(key: string): void;
+  /**
+   * Clear all queued and visible toasts.
+   */
+  clear(): void;
+  /**
+   * Pause all toast timers.
+   */
+  pauseAll(): void;
+  /**
+   * Resume all toast timers.
+   */
+  resumeAll(): void;
+  private updateVisibility;
+  private notify;
 }
 /**
  * Creates reactive toast state from a ToastQueue.
@@ -112,7 +123,7 @@ export declare function createToastState<T>(props: ToastStateProps<T>): ToastSta
  * Use this if you don't need a global queue.
  */
 export declare function createToastQueue<T>(options?: ToastQueueOptions): ToastState<T> & {
-    queue: ToastQueue<T>;
+  queue: ToastQueue<T>;
 };
-export {};
-//# sourceMappingURL=createToastState.d.ts.map
+
+//# sourceMappingURL=createToastState.d.ts.map