Auto-Dismiss Logic

Relevant source files

The following files were used as context for generating this wiki page:

• src/store.ts
• src/provider.tsx
• src/index.ts
• package.json
• tsconfig.json

The auto-dismiss logic within the @pcstyle/toast library provides a mechanism to automatically remove notification messages from the UI after a specific duration. This system ensures that the notification stack does not become cluttered by outdated or transient information while allowing critical or long-running tasks to remain visible until manually dismissed or programmatically updated.

The core of this logic is centralized within the ToastStore class, which manages the lifecycle of each toast notification from creation through its scheduled removal. The system supports various notification types, including success, error, info, and loading, each with distinct behaviors regarding their visibility duration.

Architecture and Lifecycle Management

The auto-dismiss functionality is triggered during the addition of a new toast notification. When the add method is called, the system evaluates the notification's type and duration to determine if and when it should be removed.

Timer-Based Removal

For standard notifications, a setTimeout is initialized immediately upon the notification being added to the store's state. The duration for this timer is determined by a hierarchy: it uses the user-provided duration if available; otherwise, it defaults to 4000 milliseconds.

The diagram above illustrates the decision path for initiating the auto-dismiss timer.
Sources: src/store.ts:43-52

Exception for Loading States

Notifications of type loading are explicitly excluded from the auto-dismiss logic. These notifications remain in the state indefinitely until they are either manually removed via toastStore.remove() or updated to a different status (like success or error) through the toastStore.update() method.

Sources: src/store.ts:48-50, src/index.ts:47-64

Key Components

The following table summarizes the data structures and configuration parameters that govern the auto-dismiss behavior:

Parameter	Type	Default	Description
duration	number	4000	The time in milliseconds before the toast is automatically removed.
type	ToastType	default	Determines if the toast is exempt from auto-dismiss (e.g., loading).
remove()	function	N/A	Method called by the timer to purge the toast from the internal array.
id	string	N/A	Unique identifier used to target specific toasts for dismissal.

Sources: src/store.ts:8-16, src/store.ts:55-58, src/index.ts:3-9

Integration with UI and Store updates

The ToastProvider component subscribes to the toastStore and reflects the state changes immediately. When the auto-dismiss timer expires and calls remove(id), the state change triggers a re-render, and the UI component handles the exit animation.

This sequence diagram shows the interaction between the store, the browser's timing API, and the React UI component.
Sources: src/store.ts:25-58, src/provider.tsx:16-19

Handling Updates and Promises

When using toast.promise, the auto-dismiss logic is reset or applied based on the outcome of the promise.

1. The initial "loading" state has no auto-dismiss.
2. Upon fulfillment or rejection, the update method is called.
3. The update assigns a new duration (e.g., 4000ms for success, 5000ms for error), but the logic for standard auto-dismiss is actually defined in the add method. The update method itself does not restart a setTimeout in the current implementation; it relies on the final state defined in the helper functions.

Sources: src/index.ts:47-64, src/store.ts:60-63

Summary

The Auto-Dismiss Logic in this system is a simple yet effective implementation of ephemeral notification management. By leveraging standard JavaScript timers within a centralized store, the system ensures consistent behavior across all notification types while providing special handling for asynchronous "loading" states to maintain user awareness during long-running operations.