feat(toast): provide a way to close the toast itself within the endContent

.changeset/grumpy-boxes-doubt.md

@@ -0,0 +1,5 @@
+---
+"@heroui/toast": patch
+---
+
+Enable the toast's endContent to close the toast using the onClose function

apps/docs/content/components/toast/custom-close-button-in-endContent.raw.jsx

@@ -0,0 +1,21 @@
+import {Button} from "@heroui/react";
+
+export default function App() {
+  return (
+    <Button
+      variant="flat"
+      onPress={() => {
+        addToast({
+          title: "Sucessful!",
+          endContent: (onClose) => (
+            <Button color="danger" size="sm" variant="flat" onPress={onClose}>
+              Close
+            </Button>
+          ),
+        });
+      }}
+    >
+      Show Toast
+    </Button>
+  );
+}

apps/docs/content/components/toast/custom-close-button-in-endContent.ts

@@ -0,0 +1,9 @@
+import App from "./custom-close-button-in-endContent.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/toast/index.ts

@@ -6,6 +6,7 @@ import placement from "./placement";
 import usage from "./usage";
 import customCloseIcon from "./custom-close-icon";
 import close from "./close";
+import customCloseButtonInEndContent from "./custom-close-button-in-endContent";
 
 export const toastContent = {
   color,
@@ -16,4 +17,5 @@ export const toastContent = {
   placement,
   usage,
   customCloseIcon,
+  customCloseButtonInEndContent,
 };

apps/docs/content/docs/components/toast.mdx

@@ -134,6 +134,15 @@ You can pass a custom close icon to the toast by passing the `closeIcon` prop an
   files={toastContent.customCloseIcon}
 />
 
+### Custom Close Button in `endContent`
+
+You can also customize a close button in the `endContent` by using the provided `onClose` function inside it.
+
+<CodeDemo
+    title="Custom Close Button in endContent"
+    files={toastContent.customCloseButtonInEndContent}
+/>
+
 ### Global Toast Props
 
 You can pass global toast props to the `ToastProvider` to apply to all toasts.

packages/components/toast/src/toast.tsx

@@ -82,6 +82,11 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
       ? closeIcon({})
       : isValidElement(closeIcon) && cloneElement(closeIcon as ReactElement, {});
 
+  const customEndContent =
+    typeof endContent === "function"
+      ? endContent((getCloseButtonProps() as ButtonProps).onPress as () => void)
+      : endContent;
+
   const toastContent = (
     <Component ref={domRef} {...getToastProps()}>
       <div {...getContentProps()}>
@@ -104,7 +109,7 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
       <Button isIconOnly {...(getCloseButtonProps() as ButtonProps)}>
         {customCloseIcon || <CloseIcon {...getCloseIconProps()} />}
       </Button>
-      {endContent}
+      {customEndContent}
     </Component>
   );
 

packages/components/toast/src/use-toast.ts

@@ -67,7 +67,7 @@ export interface ToastProps extends ToastVariantProps {
   /**
    * Content to be displayed in the end side of the toast
    */
-  endContent?: ReactNode;
+  endContent?: ReactNode | ((onClose: () => void) => ReactNode);
   /**
    * Icon to be displayed in the toast - overrides the default icon
    */

packages/components/toast/stories/toast.stories.tsx

@@ -143,11 +143,7 @@ const WithEndContentTemplate = (args) => {
           addToast({
             title: "Toast Title",
             description: "Toast Description",
-            endContent: (
-              <Button color="warning" size="sm" variant="flat">
-                Upgrade
-              </Button>
-            ),
+            endContent: args.endContent,
             color: "warning",
             variant: "faded",
             ...args,
@@ -444,6 +440,28 @@ export const WithEndContent = {
   render: WithEndContentTemplate,
   args: {
     ...defaultProps,
+    endContent: (
+      <Button color="warning" size="sm" variant="flat">
+        Upgrade
+      </Button>
+    ),
+  },
+};
+
+export const WithEndContentCloseFunction = {
+  render: WithEndContentTemplate,
+  args: {
+    ...defaultProps,
+    endContent: (onClose) => (
+      <>
+        <Button color="warning" size="sm" variant="flat">
+          Upgrade
+        </Button>
+        <Button color="danger" size="sm" variant="flat" onPress={onClose}>
+          Maybe later
+        </Button>
+      </>
+    ),
   },
 };