@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/toast/createToastState.ts

@@ -3,11 +3,7 @@
  * Based on @react-stately/toast useToastState
  */
 
-import { createSignal, onCleanup, type Accessor } from 'solid-js';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, onCleanup, type Accessor } from "solid-js";
 
 export interface ToastOptions {
   /** A timeout to automatically close the toast, in milliseconds. */
@@ -26,7 +22,7 @@ export interface QueuedToast<T> {
   /** The timer for the toast. */
   timer: Timer | null;
   /** Whether the toast should be animated. */
-  animation?: 'entering' | 'exiting' | 'queued';
+  animation?: "entering" | "exiting" | "queued";
   /** The priority of the toast. */
   priority: number;
   /** Handler called when the toast is closed. */
@@ -35,11 +31,20 @@ export interface QueuedToast<T> {
   timeout?: number;
 }
 
+/** The kind of queue mutation that triggered a notification, passed to `wrapUpdate`. */
+export type ToastAction = "add" | "remove" | "clear";
+
 export interface ToastQueueOptions {
   /** The maximum number of toasts to display at once. */
   maxVisibleToasts?: number;
   /** Whether toasts should stack (true) or queue (false). */
   hasExitAnimation?: boolean;
+  /**
+   * Wraps each update to the visible toasts (e.g. in `document.startViewTransition()`),
+   * so the resulting re-render can be animated. Receives the action that triggered the
+   * update. Mirrors `@react-stately/toast`'s `wrapUpdate`.
+   */
+  wrapUpdate?: (fn: () => void, action: ToastAction) => void;
 }
 
 export interface ToastStateProps<T> {
@@ -60,16 +65,14 @@ export interface ToastState<T> {
    * If hasExitAnimation is false, close() removes immediately and this is not needed.
    */
   remove: (key: string) => void;
+  /** Clears all queued and visible toasts. */
+  clear: () => void;
   /** Pauses all toast timers. */
   pauseAll: () => void;
   /** Resumes all toast timers. */
   resumeAll: () => void;
 }
 
-// ============================================
-// TIMER CLASS
-// ============================================
-
 /**
  * A Timer that supports pause and resume.
  */
@@ -119,10 +122,6 @@ export class Timer {
   }
 }
 
-// ============================================
-// TOAST QUEUE CLASS
-// ============================================
-
 type SubscribeCallback<T> = (toasts: QueuedToast<T>[]) => void;
 
 /**
@@ -135,10 +134,29 @@ export class ToastQueue<T> {
   private maxVisibleToasts: number;
   private hasExitAnimation: boolean;
   private keyCounter = 0;
+  private wrapUpdate?: (fn: () => void, action: ToastAction) => void;
 
   constructor(options: ToastQueueOptions = {}) {
     this.maxVisibleToasts = options.maxVisibleToasts ?? 5;
     this.hasExitAnimation = options.hasExitAnimation ?? false;
+    this.wrapUpdate = options.wrapUpdate;
+  }
+
+  /**
+   * Installs (or clears) the function that wraps visible-toast updates, so the
+   * resulting re-render can be animated. Used to attach `document.startViewTransition`
+   * to a shared queue (e.g. the global queue) after construction.
+   */
+  setWrapUpdate(wrapUpdate?: (fn: () => void, action: ToastAction) => void): void {
+    this.wrapUpdate = wrapUpdate;
+  }
+
+  private runWithWrapUpdate(fn: () => void, action: ToastAction): void {
+    if (this.wrapUpdate) {
+      this.wrapUpdate(fn, action);
+    } else {
+      fn();
+    }
   }
 
   /**
@@ -164,7 +182,7 @@ export class ToastQueue<T> {
       priority: options.priority ?? 0,
       onClose: options.onClose,
       timeout: options.timeout,
-      animation: 'entering',
+      animation: "entering",
     };
 
     // Find insertion point based on priority
@@ -172,7 +190,7 @@ export class ToastQueue<T> {
     let high = this.queue.length;
     while (low < high) {
       const mid = Math.floor((low + high) / 2);
-      if (toast.priority > this.queue[mid].priority) {
+      if (toast.priority >= this.queue[mid].priority) {
         high = mid;
       } else {
         low = mid + 1;
@@ -180,14 +198,10 @@ export class ToastQueue<T> {
     }
 
     // Insert at the correct position
-    this.queue = [
-      ...this.queue.slice(0, low),
-      toast,
-      ...this.queue.slice(low),
-    ];
+    this.queue = [...this.queue.slice(0, low), toast, ...this.queue.slice(low)];
 
     // Start timer for visible toasts
-    this.updateVisibility();
+    this.updateVisibility("add");
 
     return key;
   }
@@ -201,12 +215,13 @@ export class ToastQueue<T> {
 
     // Cancel any existing timer
     toast.timer?.cancel();
-    toast.timer = null;
 
-    if (this.hasExitAnimation && toast.animation !== 'queued') {
+    if (this.hasExitAnimation && toast.animation !== "queued") {
       // Mark as exiting for animation
-      toast.animation = 'exiting';
-      this.notify();
+      this.queue = this.queue.map((t) =>
+        t.key === key ? { ...t, timer: null, animation: "exiting" } : t,
+      );
+      this.notify("remove");
     } else {
       // Remove immediately
       this.remove(key);
@@ -224,7 +239,19 @@ export class ToastQueue<T> {
     }
 
     this.queue = this.queue.filter((t) => t.key !== key);
-    this.updateVisibility();
+    this.updateVisibility("remove");
+  }
+
+  /**
+   * Clear all queued and visible toasts.
+   */
+  clear(): void {
+    for (const toast of this.queue) {
+      toast.timer?.cancel();
+    }
+
+    this.queue = [];
+    this.notify("clear");
   }
 
   /**
@@ -245,43 +272,55 @@ export class ToastQueue<T> {
     }
   }
 
-  private updateVisibility(): void {
+  private updateVisibility(action: ToastAction): void {
     // Mark toasts as visible or queued based on maxVisibleToasts
     const visibleCount = this.queue.filter(
-      (t) => t.animation !== 'queued' && t.animation !== 'exiting'
+      (t) => t.animation !== "queued" && t.animation !== "exiting",
     ).length;
 
     let promoted = 0;
-    for (const toast of this.queue) {
-      if (toast.animation === 'queued' && visibleCount + promoted < this.maxVisibleToasts) {
-        toast.animation = 'entering';
+    this.queue = this.queue.map((toast) => {
+      let nextToast = toast;
+
+      if (nextToast.animation === "queued" && visibleCount + promoted < this.maxVisibleToasts) {
+        nextToast = { ...nextToast, animation: "entering" };
         promoted++;
       }
-      if (toast.animation === 'queued') continue;
+      if (nextToast.animation === "queued") return nextToast;
 
       // Start timer for visible toasts
-      if (toast.timeout != null && toast.timer === null && toast.animation !== 'exiting') {
-        toast.timer = new Timer(() => {
-          this.close(toast.key);
-        }, toast.timeout);
+      if (
+        nextToast.timeout != null &&
+        nextToast.timer === null &&
+        nextToast.animation !== "exiting"
+      ) {
+        nextToast = {
+          ...nextToast,
+          timer: new Timer(() => {
+            this.close(nextToast.key);
+          }, nextToast.timeout),
+        };
       }
-    }
 
-    this.notify();
+      return nextToast;
+    });
+
+    this.notify(action);
   }
 
-  private notify(): void {
+  private notify(action: ToastAction = "add"): void {
     const toasts = [...this.queue];
-    for (const callback of this.subscriptions) {
-      callback(toasts);
-    }
+    // The new visible toasts are computed synchronously above; only the subscriber
+    // fan-out (which drives the re-render) is wrapped, so it can run inside a view
+    // transition. Mirrors @react-stately/toast's updateVisibleToasts.
+    this.runWithWrapUpdate(() => {
+      for (const callback of this.subscriptions) {
+        callback(toasts);
+      }
+    }, action);
   }
 }
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Creates reactive toast state from a ToastQueue.
  * Use this hook to subscribe to toast changes in your component.
@@ -303,20 +342,19 @@ export function createToastState<T>(props: ToastStateProps<T>): ToastState<T> {
     add: (content, options) => props.queue.add(content, options),
     close: (key) => props.queue.close(key),
     remove: (key) => props.queue.remove(key),
+    clear: () => props.queue.clear(),
     pauseAll: () => props.queue.pauseAll(),
     resumeAll: () => props.queue.resumeAll(),
   };
 }
 
-// ============================================
-// CONVENIENCE HOOKS
-// ============================================
-
 /**
  * Creates a new ToastQueue and returns reactive state.
  * Use this if you don't need a global queue.
  */
-export function createToastQueue<T>(options?: ToastQueueOptions): ToastState<T> & { queue: ToastQueue<T> } {
+export function createToastQueue<T>(
+  options?: ToastQueueOptions,
+): ToastState<T> & { queue: ToastQueue<T> } {
   const queue = new ToastQueue<T>(options);
   const state = createToastState({ queue });
   return { ...state, queue };

package/src/toast/index.d.ts

@@ -1,2 +1,12 @@
-export { createToastState, createToastQueue, ToastQueue, Timer, type ToastOptions, type QueuedToast, type ToastQueueOptions, type ToastStateProps, type ToastState, } from './createToastState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createToastState,
+  createToastQueue,
+  ToastQueue,
+  Timer,
+  type ToastOptions,
+  type QueuedToast,
+  type ToastQueueOptions,
+  type ToastStateProps,
+  type ToastState,
+} from "./createToastState";
+//# sourceMappingURL=index.d.ts.map

package/src/toast/index.ts

@@ -6,6 +6,7 @@ export {
   type ToastOptions,
   type QueuedToast,
   type ToastQueueOptions,
+  type ToastAction,
   type ToastStateProps,
   type ToastState,
-} from './createToastState';
+} from "./createToastState";

package/src/toggle/createToggleGroupState.ts

@@ -7,20 +7,16 @@
  * This is a port of @react-stately/toggle's useToggleGroupState.
  */
 
-import { createSignal } from 'solid-js';
-import type { Key } from '../collections';
-import { type MaybeAccessor, access } from '../utils';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal } from "solid-js";
+import type { Key } from "../collections";
+import { type MaybeAccessor, access } from "../utils";
 
 export interface ToggleGroupProps {
   /**
    * Whether single or multiple selection is enabled.
    * @default 'single'
    */
-  selectionMode?: 'single' | 'multiple';
+  selectionMode?: "single" | "multiple";
   /** Whether empty selection is disallowed. */
   disallowEmptySelection?: boolean;
   /** Controlled selected keys. */
@@ -35,7 +31,7 @@ export interface ToggleGroupProps {
 
 export interface ToggleGroupState {
   /** Whether single or multiple selection is enabled. */
-  readonly selectionMode: 'single' | 'multiple';
+  readonly selectionMode: "single" | "multiple";
   /** Whether all items are disabled. */
   readonly isDisabled: boolean;
   /** Current selected keys. */
@@ -52,21 +48,17 @@ function toKeySet(keys?: Iterable<Key>): Set<Key> {
   return new Set(keys ? Array.from(keys) : []);
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Manages state for a group of toggle buttons.
  */
 export function createToggleGroupState(
-  props: MaybeAccessor<ToggleGroupProps> = {}
+  props: MaybeAccessor<ToggleGroupProps> = {},
 ): ToggleGroupState {
   const getProps = () => access(props);
 
   const initialProps = getProps();
   const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Set<Key>>(
-    toKeySet(initialProps.defaultSelectedKeys)
+    toKeySet(initialProps.defaultSelectedKeys),
   );
 
   const isControlled = () => getProps().selectedKeys !== undefined;
@@ -83,12 +75,12 @@ export function createToggleGroupState(
 
   function toggleKey(key: Key): void {
     const props = getProps();
-    const mode = props.selectionMode ?? 'single';
+    const mode = props.selectionMode ?? "single";
     const disallowEmptySelection = props.disallowEmptySelection ?? false;
     const currentKeys = selectedKeys();
 
     let nextKeys: Set<Key>;
-    if (mode === 'multiple') {
+    if (mode === "multiple") {
       nextKeys = new Set(currentKeys);
       if (nextKeys.has(key) && (!disallowEmptySelection || nextKeys.size > 1)) {
         nextKeys.delete(key);
@@ -96,9 +88,7 @@ export function createToggleGroupState(
         nextKeys.add(key);
       }
     } else {
-      nextKeys = new Set(
-        currentKeys.has(key) && !disallowEmptySelection ? [] : [key]
-      );
+      nextKeys = new Set(currentKeys.has(key) && !disallowEmptySelection ? [] : [key]);
     }
 
     setSelectedKeys(nextKeys);
@@ -112,7 +102,7 @@ export function createToggleGroupState(
 
   return {
     get selectionMode() {
-      return getProps().selectionMode ?? 'single';
+      return getProps().selectionMode ?? "single";
     },
     get isDisabled() {
       return getProps().isDisabled ?? false;

package/src/toggle/createToggleState.d.ts

@@ -5,30 +5,30 @@
  *
  * This is a 1:1 port of @react-stately/toggle's useToggleState.
  */
-import { Accessor } from 'solid-js';
-import { type MaybeAccessor } from '../utils';
+import { Accessor } from "solid-js";
+import { type MaybeAccessor } from "../utils";
 export interface ToggleStateOptions {
-    /** Whether the element should be selected (controlled). */
-    isSelected?: boolean;
-    /** Whether the element should be selected by default (uncontrolled). */
-    defaultSelected?: boolean;
-    /** Handler that is called when the element's selection state changes. */
-    onChange?: (isSelected: boolean) => void;
-    /** Whether the element is read only. */
-    isReadOnly?: boolean;
+  /** Whether the element should be selected (controlled). */
+  isSelected?: boolean;
+  /** Whether the element should be selected by default (uncontrolled). */
+  defaultSelected?: boolean;
+  /** Handler that is called when the element's selection state changes. */
+  onChange?: (isSelected: boolean) => void;
+  /** Whether the element is read only. */
+  isReadOnly?: boolean;
 }
 export interface ToggleState {
-    /** Whether the toggle is selected. */
-    readonly isSelected: Accessor<boolean>;
-    /** Whether the toggle is selected by default. */
-    readonly defaultSelected: boolean;
-    /** Updates selection state. */
-    setSelected(isSelected: boolean): void;
-    /** Toggle the selection state. */
-    toggle(): void;
+  /** Whether the toggle is selected. */
+  readonly isSelected: Accessor<boolean>;
+  /** Whether the toggle is selected by default. */
+  readonly defaultSelected: boolean;
+  /** Updates selection state. */
+  setSelected(isSelected: boolean): void;
+  /** Toggle the selection state. */
+  toggle(): void;
 }
 /**
  * Provides state management for toggle components like checkboxes and switches.
  */
 export declare function createToggleState(props?: MaybeAccessor<ToggleStateOptions>): ToggleState;
-//# sourceMappingURL=createToggleState.d.ts.map
+//# sourceMappingURL=createToggleState.d.ts.map

package/src/toggle/createToggleState.ts

@@ -6,12 +6,8 @@
  * This is a 1:1 port of @react-stately/toggle's useToggleState.
  */
 
-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 ToggleStateOptions {
   /** Whether the element should be selected (controlled). */
@@ -35,33 +31,24 @@ export interface ToggleState {
   toggle(): void;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides state management for toggle components like checkboxes and switches.
  */
 export function createToggleState(props: MaybeAccessor<ToggleStateOptions> = {}): ToggleState {
   const getProps = () => access(props);
 
-  // Get initial values
   const initialProps = getProps();
   const initialSelected = initialProps.isSelected ?? initialProps.defaultSelected ?? false;
 
-  // Create internal signal for uncontrolled mode
   const [internalSelected, setInternalSelected] = createSignal(initialSelected);
 
-  // Determine if controlled
   const isControlled = () => getProps().isSelected !== undefined;
 
-  // Get current selection state
   const isSelected: Accessor<boolean> = () => {
     const p = getProps();
     return isControlled() ? (p.isSelected ?? false) : internalSelected();
   };
 
-  // Update selection state
   function setSelected(value: boolean): void {
     const p = getProps();
     if (p.isReadOnly) {
@@ -75,7 +62,6 @@ export function createToggleState(props: MaybeAccessor<ToggleStateOptions> = {})
     p.onChange?.(value);
   }
 
-  // Toggle selection state
   function toggle(): void {
     const p = getProps();
     if (p.isReadOnly) {

package/src/toggle/index.d.ts

@@ -1,2 +1,2 @@
-export { createToggleState, type ToggleStateOptions, type ToggleState, } from './createToggleState';
-//# sourceMappingURL=index.d.ts.map
+export { createToggleState, type ToggleStateOptions, type ToggleState } from "./createToggleState";
+//# sourceMappingURL=index.d.ts.map

package/src/toggle/index.ts

@@ -1,11 +1,7 @@
-export {
-  createToggleState,
-  type ToggleStateOptions,
-  type ToggleState,
-} from './createToggleState';
+export { createToggleState, type ToggleStateOptions, type ToggleState } from "./createToggleState";
 
 export {
   createToggleGroupState,
   type ToggleGroupProps,
   type ToggleGroupState,
-} from './createToggleGroupState';
+} from "./createToggleGroupState";

package/src/tooltip/createTooltipTriggerState.d.ts

@@ -5,25 +5,25 @@
  * Tracks whether the tooltip is open, and provides methods to toggle this state.
  * Ensures only one tooltip is open at a time and controls the delay for showing a tooltip.
  */
-import { type Accessor } from 'solid-js';
-import { type OverlayTriggerProps } from '../overlays';
+import { type Accessor } from "solid-js";
+import { type OverlayTriggerProps } from "../overlays";
 export interface TooltipTriggerProps extends OverlayTriggerProps {
-    /** The delay time in milliseconds for the tooltip to show up. */
-    delay?: number;
-    /** The delay time in milliseconds for the tooltip to close. */
-    closeDelay?: number;
+  /** The delay time in milliseconds for the tooltip to show up. */
+  delay?: number;
+  /** The delay time in milliseconds for the tooltip to close. */
+  closeDelay?: number;
 }
 export interface TooltipTriggerState {
-    /** Whether the tooltip is currently showing. */
-    readonly isOpen: Accessor<boolean>;
-    /**
-     * Shows the tooltip. By default, the tooltip becomes visible after a delay
-     * depending on a global warmup timer. The `immediate` option shows the
-     * tooltip immediately instead.
-     */
-    open(immediate?: boolean): void;
-    /** Hides the tooltip. */
-    close(immediate?: boolean): void;
+  /** Whether the tooltip is currently showing. */
+  readonly isOpen: Accessor<boolean>;
+  /**
+   * Shows the tooltip. By default, the tooltip becomes visible after a delay
+   * depending on a global warmup timer. The `immediate` option shows the
+   * tooltip immediately instead.
+   */
+  open(immediate?: boolean): void;
+  /** Hides the tooltip. */
+  close(immediate?: boolean): void;
 }
 /**
  * Resets the global tooltip state. Useful for testing.
@@ -36,4 +36,4 @@ export declare function resetTooltipState(): void;
  * the delay for showing a tooltip.
  */
 export declare function createTooltipTriggerState(props?: TooltipTriggerProps): TooltipTriggerState;
-//# sourceMappingURL=createTooltipTriggerState.d.ts.map
+//# sourceMappingURL=createTooltipTriggerState.d.ts.map

package/src/tooltip/createTooltipTriggerState.ts

@@ -6,9 +6,9 @@
  * Ensures only one tooltip is open at a time and controls the delay for showing a tooltip.
  */
 
-import { createSignal, onCleanup, type Accessor } from 'solid-js';
-import { createOverlayTriggerState, type OverlayTriggerProps } from '../overlays';
-import { isServer } from '../ssr';
+import { createSignal, onCleanup, type Accessor } from "solid-js";
+import { createOverlayTriggerState, type OverlayTriggerProps } from "../overlays";
+import { isServer } from "../ssr";
 
 // Default delays (in ms)
 const TOOLTIP_DELAY = 1500;
@@ -64,9 +64,7 @@ export function resetTooltipState(): void {
  * methods to toggle this state. Ensures only one tooltip is open at a time and controls
  * the delay for showing a tooltip.
  */
-export function createTooltipTriggerState(
-  props: TooltipTriggerProps = {}
-): TooltipTriggerState {
+export function createTooltipTriggerState(props: TooltipTriggerProps = {}): TooltipTriggerState {
   const delay = () => props.delay ?? TOOLTIP_DELAY;
   const closeDelay = () => props.closeDelay ?? TOOLTIP_COOLDOWN;
 
@@ -132,11 +130,14 @@ export function createTooltipTriggerState(
       if (globalCooldownTimeout) {
         clearTimeout(globalCooldownTimeout);
       }
-      globalCooldownTimeout = setTimeout(() => {
-        delete tooltips[id];
-        globalCooldownTimeout = null;
-        globalWarmedUp = false;
-      }, Math.max(TOOLTIP_COOLDOWN, closeDelay()));
+      globalCooldownTimeout = setTimeout(
+        () => {
+          delete tooltips[id];
+          globalCooldownTimeout = null;
+          globalWarmedUp = false;
+        },
+        Math.max(TOOLTIP_COOLDOWN, closeDelay()),
+      );
     }
   };
 

package/src/tooltip/index.d.ts

@@ -1,2 +1,7 @@
-export { createTooltipTriggerState, resetTooltipState, type TooltipTriggerProps, type TooltipTriggerState, } from './createTooltipTriggerState';
-//# sourceMappingURL=index.d.ts.map
+export {
+  createTooltipTriggerState,
+  resetTooltipState,
+  type TooltipTriggerProps,
+  type TooltipTriggerState,
+} from "./createTooltipTriggerState";
+//# sourceMappingURL=index.d.ts.map

package/src/tooltip/index.ts

@@ -3,4 +3,4 @@ export {
   resetTooltipState,
   type TooltipTriggerProps,
   type TooltipTriggerState,
-} from './createTooltipTriggerState';
+} from "./createTooltipTriggerState";