From d1b6619c7264cd67de11ef4f8ad2bb2c8cc04277 Mon Sep 17 00:00:00 2001
From: Jeff Huang <jeff.huang62@gmail.com>
Date: Wed, 24 Jan 2024 01:31:11 -0500
Subject: [PATCH] fix: make closeButton option in toast take precedence over
 Toaster (#309)

---
 src/index.tsx                 | 10 +++++++---
 src/types.ts                  |  1 +
 website/src/pages/toast.mdx   |  2 +-
 website/src/pages/toaster.mdx |  2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index a1a0e9a..e8b8a41 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -44,7 +44,7 @@ const Toast = (props: ToastProps) => {
     toasts,
     expanded,
     removeToast,
-    closeButton,
+    closeButton: closeButtonFromToaster,
     style,
     cancelButtonStyle,
     actionButtonStyle,
@@ -77,6 +77,10 @@ const Toast = (props: ToastProps) => {
     () => heights.findIndex((height) => height.toastId === toast.id) || 0,
     [heights, toast.id],
   );
+  const closeButton = React.useMemo(
+    () => toast.closeButton ?? closeButtonFromToaster,
+    [toast.closeButton, closeButtonFromToaster],
+  );
   const duration = React.useMemo(
     () => toast.duration || durationFromToaster || TOAST_LIFETIME,
     [toast.duration, durationFromToaster],
@@ -295,7 +299,7 @@ const Toast = (props: ToastProps) => {
         }
       }}
     >
-      {(closeButton || toast.closeButton) && !toast.jsx ? (
+      {closeButton && !toast.jsx ? (
         <button
           aria-label={closeButtonAriaLabel}
           data-disabled={disabled}
@@ -628,7 +632,7 @@ const Toaster = (props: ToasterProps) => {
                   descriptionClassName={toastOptions?.descriptionClassName}
                   invert={invert}
                   visibleToasts={visibleToasts}
-                  closeButton={closeButton}
+                  closeButton={toastOptions?.closeButton ?? closeButton}
                   interacting={interacting}
                   position={position}
                   style={toastOptions?.style}
diff --git a/src/types.ts b/src/types.ts
index 8fca882..9ffceed 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -72,6 +72,7 @@ export interface HeightT {
 
 interface ToastOptions {
   className?: string;
+  closeButton?: boolean;
   descriptionClassName?: string;
   style?: React.CSSProperties;
   cancelButtonStyle?: React.CSSProperties;
diff --git a/website/src/pages/toast.mdx b/website/src/pages/toast.mdx
index caa0b9d..3a23263 100644
--- a/website/src/pages/toast.mdx
+++ b/website/src/pages/toast.mdx
@@ -173,7 +173,7 @@ toast.dismiss();
 | Property           |                                              Description                                               |        Default |
 | :----------------- | :----------------------------------------------------------------------------------------------------: | -------------: |
 | description        |                           Toast's description, renders underneath the title.                           |            `-` |
-| closeButton        |                               Adds a close button which shows on hover.                                |        `false` |
+| closeButton        |                                          Adds a close button.                                          |        `false` |
 | invert             |                                Dark toast in light mode and vice versa.                                |        `false` |
 | important          |                        Control the sensitivity of the toast for screen readers                         |        `false` |
 | duration           |            Time in milliseconds that should elapse before automatically closing the toast.             |         `4000` |
diff --git a/website/src/pages/toaster.mdx b/website/src/pages/toaster.mdx
index 7a7323f..06dc2df 100644
--- a/website/src/pages/toaster.mdx
+++ b/website/src/pages/toaster.mdx
@@ -56,7 +56,7 @@ Changes the directionality of the toast's text.
 | expand        |                                 Toasts will be expanded by default                                 |        `false` |
 | visibleToasts |                                      Amount of visible toasts                                      |            `3` |
 | position      |                              Place where the toasts will be rendered                               | `bottom-right` |
-| closeButton   |                         Adds a close button to all toasts, shows on hover                          |        `false` |
+| closeButton   |                                 Adds a close button to all toasts                                  |        `false` |
 | offset        |                                Offset from the edges of the screen.                                |         `32px` |
 | dir           |                                   Directionality of toast's text                                   |          `ltr` |
 | hotkey        |                    Keyboard shortcut that will move focus to the toaster area.                     |    `⌥/alt + T` |