fix: make closeButton option in toast take precedence over Toaster (#309

)

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}

src/types.ts

@@ -72,6 +72,7 @@ export interface HeightT {
 
 interface ToastOptions {
   className?: string;
+  closeButton?: boolean;
   descriptionClassName?: string;
   style?: React.CSSProperties;
   cancelButtonStyle?: React.CSSProperties;

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` |

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` |