Toast dismiss all (#45)

* Remove all toasts when dismiss function is empty

* Update readme

* Revert index tsx changes

Author: emilkowalski

README.md

@@ -207,6 +207,14 @@ const toastId = toast('Event has been created');
 toast.dismiss(toastId);
 ```
 
+You can also use the dismiss method without the id to dismiss all toasts.
+
+```jsx
+// Removes all toasts
+
+toast.dismiss();
+```
+
 ## Keyboard focus
 
 You can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key.

src/state.ts

@@ -5,9 +5,11 @@ let toastsCounter = 0;
 
 class Observer {
   subscribers: Array<(toast: ExternalToast | ToastToDismiss) => void>;
+  toasts: Array<ToastT | ToastToDismiss>;
 
   constructor() {
     this.subscribers = [];
+    this.toasts = [];
   }
 
   // We use arrow functions to maintain the correct `this` reference
@@ -22,9 +24,16 @@ class Observer {
 
   publish = (data: ToastT) => {
     this.subscribers.forEach((subscriber) => subscriber(data));
+    this.toasts = [...this.toasts, data];
   };
 
-  dismiss = (id: number) => {
+  dismiss = (id?: number) => {
+    if (!id) {
+      this.toasts.forEach((toast) => {
+        this.subscribers.forEach((subscriber) => subscriber({ id: toast.id, dismiss: true }));
+      });
+    }
+
     this.subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }));
     return id;
   };

src/styles.css

@@ -277,7 +277,9 @@
 }
 
 [data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false'] {
+  --y: translateY(40%);
   opacity: 0;
+  transition: transform 500ms, opacity 200ms;
 }
 
 /* Bump up the height to make sure hover state doesn't get set to false */