From 667d18469aba8048e01efb6aa72b10f70bf0fe40 Mon Sep 17 00:00:00 2001
From: emilkowalski <e@emilkowal.ski>
Date: Sun, 5 Nov 2023 13:50:14 +0100
Subject: [PATCH] Close custom toasts

---
 src/state.ts                          |  4 ++--
 website/src/components/Hero/index.tsx | 17 +++++++++++++++++
 website/src/pages/toast.mdx           |  6 ++++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/state.ts b/src/state.ts
index b917f56..344b7f1 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -36,6 +36,7 @@ class Observer {
       message?: string | React.ReactNode;
       type?: ToastTypes;
       promise?: PromiseT;
+      jsx?: React.ReactElement;
     },
   ) => {
     const { message, ...rest } = data;
@@ -149,10 +150,9 @@ class Observer {
     return id;
   };
 
-  // We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()?
   custom = (jsx: (id: number | string) => React.ReactElement, data?: ExternalToast) => {
     const id = data?.id || toastsCounter++;
-    this.publish({ jsx: jsx(id), id, ...data });
+    this.create({ jsx: jsx(id), id, ...data });
     return id;
   };
 }
diff --git a/website/src/components/Hero/index.tsx b/website/src/components/Hero/index.tsx
index 2e9dbcc..4d74c46 100644
--- a/website/src/components/Hero/index.tsx
+++ b/website/src/components/Hero/index.tsx
@@ -3,6 +3,21 @@ import { toast } from 'sonner';
 import styles from './hero.module.css';
 import Link from 'next/link';
 
+export const headlessToast = (message: string) => {
+  toast.custom(
+    (t) => (
+      <div>
+        {message}
+        <button onClick={() => toast.dismiss(t)}>x</button>
+      </div>
+    ),
+    {
+      // dismissible: true
+      // onDismiss: (t) => toast.dismiss(t.id)
+    },
+  );
+};
+
 export const Hero = () => {
   return (
     <div className={styles.wrapper}>
@@ -17,6 +32,7 @@ export const Hero = () => {
         <button
           data-primary=""
           onClick={() => {
+            headlessToast('headless toast');
             toast('Sonner', {
               description: 'An opinionated toast component for React.',
             });
@@ -25,6 +41,7 @@ export const Hero = () => {
         >
           Render a toast
         </button>
+        <button onClick={() => toast.dismiss()}>dismiss all</button>
         <a className={styles.button} href="https://github.com/emilkowalski/sonner" target="_blank">
           GitHub
         </a>
diff --git a/website/src/pages/toast.mdx b/website/src/pages/toast.mdx
index 1cdfe7e..3ec320e 100644
--- a/website/src/pages/toast.mdx
+++ b/website/src/pages/toast.mdx
@@ -162,6 +162,12 @@ const toastId = toast('Event has been created');
 toast.dismiss(toastId);
 ```
 
+You can also dismiss all toasts at once by calling `toast.dismiss()` without an id.
+
+```jsx
+toast.dismiss();
+```
+
 ## API Reference
 
 | Property    |                                              Description                                               |        Default |