diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts
index 51e793bbe..b94b0f624 100644
--- a/packages/components/toast/src/use-toast.ts
+++ b/packages/components/toast/src/use-toast.ts
@@ -396,24 +396,13 @@ export function useToast
(originalProps: UseToastProps)
"data-placement": placement,
"data-drag-value": dragValue,
"data-toast": true,
- "data-animation": toast.animation,
"aria-label": "toast",
- onTransitionEnd: () => {
- if (toast.animation === "exiting") {
- const updatedHeights = heights;
-
- updatedHeights.splice(index, 1);
- setHeights([...updatedHeights]);
-
- state.remove(toast.key);
- }
- },
style: {
opacity: opacityValue,
},
...mergeProps(props, otherProps, toastProps, hoverProps),
}),
- [slots, classNames, toastProps, hoverProps, toast, toast.animation, toast.key, opacityValue],
+ [slots, classNames, toastProps, hoverProps, toast, toast.key, opacityValue],
);
const getWrapperProps: PropGetter = useCallback(
@@ -555,7 +544,6 @@ export function useToast(originalProps: UseToastProps)
setHeights([...updatedHeights]);
state.close(toast.key);
- state.remove(toast.key);
return;
}
diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx
index d85529f03..681f7b7f2 100644
--- a/packages/components/toast/stories/toast.stories.tsx
+++ b/packages/components/toast/stories/toast.stories.tsx
@@ -2,6 +2,15 @@ import React, {useEffect} from "react";
import {Meta} from "@storybook/react";
import {cn, toast} from "@heroui/theme";
import {Button} from "@heroui/button";
+import {
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ useDisclosure,
+} from "@heroui/modal";
+import {Drawer, DrawerContent} from "@heroui/drawer";
import {Toast, ToastProps, ToastProvider, addToast, closeAll} from "../src";
@@ -205,7 +214,7 @@ const PromiseToastTemplate = (args: ToastProps) => {
description: "Toast Displayed Successfully",
promise: new Promise((resolve) => setTimeout(resolve, 3000)),
timeout: 3000,
- shouldShowTimeoutProgess: false,
+ shouldShowTimeoutProgress: false,
...args,
});
}}
@@ -217,6 +226,68 @@ const PromiseToastTemplate = (args: ToastProps) => {
);
};
+const WithToastFromOverlayTemplate = (args) => {
+ const {isOpen, onOpen, onOpenChange, onClose} = useDisclosure();
+ const {
+ isOpen: isDrawerOpen,
+ onOpen: onDrawerOpen,
+ onOpenChange: onDrawerOpenChange,
+ } = useDisclosure({defaultOpen: args.defaultOpen});
+
+ return (
+ <>
+
+
+
+
+ Toast from Modal
+
+ Press "Show Toast" to launch a toast.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
const CustomToastComponent = (args) => {
const color = args.color;
const colorMap = {
@@ -260,6 +331,7 @@ const CustomToastComponent = (args) => {