From 6c51bc8558b088cb3d253a5741cc76338c227006 Mon Sep 17 00:00:00 2001
From: peetzweg/ <839848+peetzweg@users.noreply.github.com>
Date: Wed, 10 Apr 2024 09:27:44 +0200
Subject: [PATCH] fix: rendering of `ReactNode` descriptions (#387)

---
 src/index.tsx            |  8 ++++++--
 test/src/app/page.tsx    | 14 ++++++++++++++
 test/tests/basic.spec.ts | 10 ++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 802c367..4260166 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -403,8 +403,12 @@ const Toast = (props: ToastProps) => {
                   classNames?.description,
                   toast?.classNames?.description,
                 )}
-                dangerouslySetInnerHTML={sanitizeHTML(toast.description as string)}
-              ></div>
+                dangerouslySetInnerHTML={
+                  typeof toast.description === 'string' ? sanitizeHTML(toast.description as string) : undefined
+                }
+              >
+                {typeof toast.description === 'object' ? toast.description : null}
+              </div>
             ) : null}
           </div>
           {React.isValidElement(toast.cancel) ? (
diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
index 598cf3d..bb121c6 100644
--- a/test/src/app/page.tsx
+++ b/test/src/app/page.tsx
@@ -155,6 +155,20 @@ export default function Home({ searchParams }: any) {
       >
         Updated Toast
       </button>
+      <button
+        data-testid="string-description"
+        className="button"
+        onClick={() => toast('Custom Description', { description: 'string description' })}
+      >
+        String Description
+      </button>
+      <button
+        data-testid="react-node-description"
+        className="button"
+        onClick={() => toast('Custom Description', { description: <div>This is my custom ReactNode description</div> })}
+      >
+        ReactNode Description
+      </button>
       {showAutoClose ? <div data-testid="auto-close-el" /> : null}
       {showDismiss ? <div data-testid="dismiss-el" /> : null}
       <Toaster
diff --git a/test/tests/basic.spec.ts b/test/tests/basic.spec.ts
index f450701..80daadb 100644
--- a/test/tests/basic.spec.ts
+++ b/test/tests/basic.spec.ts
@@ -179,4 +179,14 @@ test.describe('Basic functionality', () => {
 
     await expect(button).toHaveCSS('background-color', 'rgb(219, 239, 255)');
   });
+
+  test('string description is rendered', async ({ page }) => {
+    await page.getByTestId('string-description').click();
+    await expect(page.getByText('string description')).toHaveCount(1);
+  });
+
+  test('ReactNode description is rendered', async ({ page }) => {
+    await page.getByTestId('react-node-description').click();
+    await expect(page.getByText('This is my custom ReactNode description')).toHaveCount(1);
+  });
 });