@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/tabs/createTabListState.ts

@@ -3,19 +3,19 @@
  * Based on @react-stately/tabs.
  */
 
-import { createComputed, createMemo, 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. */
@@ -77,11 +77,10 @@ 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>> = createMemo(() => {
     const p = getProps();
     const items = p.items ?? [];
@@ -89,12 +88,11 @@ export function createTabListState<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,
@@ -126,7 +124,6 @@ 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;
@@ -144,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) {
@@ -177,39 +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);
@@ -217,17 +199,19 @@ export function createTabListState<T = unknown>(
   const setFocusedKey = (key: Key | null, childStrategy?: FocusStrategy) => {
     setFocusedKeyInternal(key);
     setChildFocusStrategy(childStrategy ?? null);
+  };
 
-    // In automatic mode, selecting follows focus
-    if (
-      keyboardActivation() === 'automatic' &&
-      key !== null &&
-      key !== selectedKey() &&
-      !isKeyDisabled(key)
-    ) {
-      setSelectedKey(key);
+  // If the tab list doesn't have focus and the selected key changes, or if there
+  // isn't a focused key yet, move the focused key to the selected key so the
+  // roving tabIndex stays on the selected tab (mirrors useTabListState's effect).
+  let lastSelectedKey: Key | null = selectedKey();
+  createComputed(() => {
+    const sel = selectedKey();
+    if ((sel !== null && focusedKey() === null) || (!isFocused() && sel !== lastSelectedKey)) {
+      setFocusedKey(sel);
     }
-  };
+    lastSelectedKey = sel;
+  });
 
   // Keep uncontrolled selection valid as items/disabled keys change.
   createComputed(() => {
@@ -241,6 +225,17 @@ export function createTabListState<T = unknown>(
 
     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);

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,71 +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. 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;
-    /** 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;
 /**
@@ -74,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.
@@ -117,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