feat(toast): Add delay option (Fixes #338)

src/components/toaster.tsx

@@ -112,6 +112,7 @@ export const Toaster: React.FC<ToasterProps> = ({
       onMouseLeave={handlers.endPause}
     >
       {toasts.map((t) => {
+        if (t.delayed && !t.visible) return null;
         const toastPosition = t.position || position;
         const offset = handlers.calculateOffset(t, {
           reverseOrder,

src/core/store.ts

@@ -30,7 +30,7 @@ export type Action =
     }
   | {
       type: ActionType.UPDATE_TOAST;
-      toast: Partial<Toast>;
+      toast: Partial<Toast> & { id: string };
     }
   | {
       type: ActionType.DISMISS_TOAST;
@@ -59,6 +59,8 @@ interface State {
   [toasterId: string]: ToasterState;
 }
 
+const pendingDelayTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
 export const reducer = (state: ToasterState, action: Action): ToasterState => {
   const { toastLimit } = state.settings;
 
@@ -86,9 +88,20 @@ export const reducer = (state: ToasterState, action: Action): ToasterState => {
         toast,
       });
 
-    case ActionType.DISMISS_TOAST:
+    case ActionType.DISMISS_TOAST: {
       const { toastId } = action;
 
+      if (toastId) {
+        const timeoutId = pendingDelayTimeouts.get(toastId);
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          pendingDelayTimeouts.delete(toastId);
+        }
+      } else {
+        pendingDelayTimeouts.forEach((timeoutId) => clearTimeout(timeoutId));
+        pendingDelayTimeouts.clear();
+      }
+
       return {
         ...state,
         toasts: state.toasts.map((t) =>
@@ -101,17 +114,34 @@ export const reducer = (state: ToasterState, action: Action): ToasterState => {
             : t
         ),
       };
-    case ActionType.REMOVE_TOAST:
-      if (action.toastId === undefined) {
+    }
+
+    case ActionType.REMOVE_TOAST: {
+      const { toastId } = action;
+
+      if (toastId) {
+        const timeoutId = pendingDelayTimeouts.get(toastId);
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          pendingDelayTimeouts.delete(toastId);
+        }
+      } else {
+        pendingDelayTimeouts.forEach((timeoutId) => clearTimeout(timeoutId));
+        pendingDelayTimeouts.clear();
+      }
+
+      if (toastId === undefined) {
         return {
           ...state,
           toasts: [],
         };
       }
+
       return {
         ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+        toasts: state.toasts.filter((t) => t.id !== toastId),
       };
+    }
 
     case ActionType.START_PAUSE:
       return {
@@ -130,6 +160,9 @@ export const reducer = (state: ToasterState, action: Action): ToasterState => {
           pauseDuration: t.pauseDuration + diff,
         })),
       };
+
+    default:
+      return state;
   }
 };
 
@@ -144,7 +177,10 @@ const defaultToasterState: ToasterState = {
     toastLimit: TOAST_LIMIT,
   },
 };
-let memoryState: State = {};
+
+let memoryState: State = {
+  [DEFAULT_TOASTER_ID]: defaultToasterState,
+};
 
 export const dispatch = (action: Action, toasterId = DEFAULT_TOASTER_ID) => {
   memoryState[toasterId] = reducer(
@@ -172,6 +208,8 @@ export const createDispatch =
     dispatch(action, toasterId);
   };
 
+export const getPendingDelayTimeouts = () => pendingDelayTimeouts;
+
 export const defaultTimeouts: {
   [key in ToastType]: number;
 } = {
@@ -212,7 +250,8 @@ export const useStore = (
     removeDelay:
       t.removeDelay ||
       toastOptions[t.type]?.removeDelay ||
-      toastOptions?.removeDelay,
+      toastOptions?.removeDelay ||
+      TOAST_EXPIRE_DISMISS_DELAY,
     duration:
       t.duration ||
       toastOptions[t.type]?.duration ||

src/core/toast.ts

@@ -39,18 +39,34 @@ const createToast = (
   id: opts?.id || genId(),
 });
 
-const createHandler =
-  (type?: ToastType): ToastHandler =>
-  (message, options) => {
-    const toast = createToast(message, type, options);
+const pendingDelayTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
-    const dispatch = createDispatch(
-      toast.toasterId || getToasterIdFromToastId(toast.id)
-    );
+const createHandler = (type?: ToastType): ToastHandler => (message, options) => {
+  const toast = createToast(message, type, options);
 
+  const dispatch = createDispatch(toast.toasterId || getToasterIdFromToastId(toast.id));
+
+  if (toast.delay && toast.delay > 0) {
+    dispatch({
+      type: ActionType.UPSERT_TOAST,
+      toast: { ...toast, visible: false, delayed: true },
+    });
+
+    const timeoutId = setTimeout(() => {
+      dispatch({
+        type: ActionType.UPDATE_TOAST,
+        toast: { id: toast.id, visible: true, delayed: false },
+      });
+      pendingDelayTimeouts.delete(toast.id);
+    }, toast.delay);
+
+    pendingDelayTimeouts.set(toast.id, timeoutId);
+  } else {
     dispatch({ type: ActionType.UPSERT_TOAST, toast });
-    return toast.id;
-  };
+  }
+
+  return toast.id;
+};
 
 const toast = (message: Message, opts?: ToastOptions) =>
   createHandler('blank')(message, opts);

src/core/types.ts

@@ -41,6 +41,8 @@ export interface Toast {
   pauseDuration: number;
   position?: ToastPosition;
   removeDelay?: number;
+  delay?: number;
+  delayed?: boolean;
 
   ariaProps: {
     role: 'status' | 'alert';
@@ -70,6 +72,8 @@ export type ToastOptions = Partial<
     | 'iconTheme'
     | 'toasterId'
     | 'removeDelay'
+    | 'delay'
+    | 'delayed'
   >
 >;
 

test/toast.test.tsx

@@ -532,3 +532,35 @@ describe('Multi-Toaster behavior', () => {
     expect(screen.queryByText('Removable toast #2')).toBeInTheDocument();
   });
 });
+
+describe('toast delay', () => {
+  test('shows toast only after delay', () => {
+    render(<Toaster />);
+
+    act(() => {
+      toast.success('Delayed toast', { delay: 500 });
+    });
+
+    expect(screen.queryByText('Delayed toast')).toBeNull();
+
+    act(() => {
+      jest.advanceTimersByTime(499);
+    });
+    expect(screen.queryByText('Delayed toast')).toBeNull();
+
+    act(() => {
+      jest.advanceTimersByTime(1);
+    });
+    expect(screen.getByText('Delayed toast')).toBeInTheDocument();
+
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(1500);
+    });
+
+    expect(screen.queryByText('Delayed toast')).toBeNull();
+  });
+});