fix(toast): enable proper exit animations (#5121)

* fix(toast): enable proper exit animations
	•	Use LazyMotion and AnimatePresence in ToastProvider to support exit animations.
	•	Simplify Toast by removing redundant LazyMotion wrapper.
	•	Add motionProps to stories for easier animation customization.

* chore(changeset): add changeset for ToastProvider exit animations

* chore(toast): clean up stories by removing motionProps argument

* chore(docs): revert `CONTRIBUTING.md` and `toast.stories.tsx`to initial state

.changeset/friendly-balloons-rest.md

@@ -0,0 +1,5 @@
+---
+"@heroui/toast": patch
+---
+
+- Use LazyMotion and AnimatePresence in ToastProvider to support exit animations.

packages/components/toast/src/toast-provider.tsx

@@ -1,9 +1,12 @@
 import {ToastOptions, ToastQueue, useToastQueue} from "@react-stately/toast";
 import {useProviderContext} from "@heroui/system";
+import {AnimatePresence, LazyMotion} from "framer-motion";
 
 import {RegionProps, ToastRegion} from "./toast-region";
 import {ToastProps, ToastPlacement} from "./use-toast";
 
+const loadFeatures = () => import("framer-motion").then((res) => res.domMax);
+
 let globalToastQueue: ToastQueue<ToastProps> | null = null;
 
 interface ToastProviderProps {
@@ -37,20 +40,22 @@ export const ToastProvider = ({
   const globalContext = useProviderContext();
   const disableAnimation = disableAnimationProp ?? globalContext?.disableAnimation ?? false;
 
-  if (toastQueue.visibleToasts.length == 0) {
-    return null;
-  }
-
   return (
-    <ToastRegion
+    <LazyMotion features={loadFeatures}>
-      disableAnimation={disableAnimation}
+      <AnimatePresence>
-      maxVisibleToasts={maxVisibleToasts}
+        {toastQueue.visibleToasts.length > 0 ? (
-      placement={placement}
+          <ToastRegion
-      toastOffset={toastOffset}
+            disableAnimation={disableAnimation}
-      toastProps={toastProps}
+            maxVisibleToasts={maxVisibleToasts}
-      toastQueue={toastQueue}
+            placement={placement}
-      {...regionProps}
+            toastOffset={toastOffset}
-    />
+            toastProps={toastProps}
+            toastQueue={toastQueue}
+            {...regionProps}
+          />
+        ) : null}
+      </AnimatePresence>
+    </LazyMotion>
   );
 };
 

packages/components/toast/src/toast.tsx

@@ -7,14 +7,12 @@ import {
   SuccessIcon,
   WarningIcon,
 } from "@heroui/shared-icons";
-import {AnimatePresence, m, LazyMotion} from "framer-motion";
+import {m} from "framer-motion";
 import {cloneElement, isValidElement} from "react";
 import {Spinner} from "@heroui/spinner";
 
 import {UseToastProps, useToast} from "./use-toast";
 
-const loadFeatures = () => import("framer-motion").then((res) => res.domMax);
-
 export interface ToastProps extends UseToastProps {}
 
 const iconMap = {
@@ -108,21 +106,17 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
       {disableAnimation ? (
         toastContent
       ) : (
-        <LazyMotion features={loadFeatures}>
+        <m.div {...getMotionDivProps()}>
-          <AnimatePresence>
+          <m.div
-            <m.div {...getMotionDivProps()}>
+            key={"inner-div"}
-              <m.div
+            animate={{opacity: 1}}
-                key={"inner-div"}
+            exit={{opacity: 0}}
-                animate={{opacity: 1}}
+            initial={{opacity: 0}}
-                exit={{opacity: 0}}
+            transition={{duration: 0.25, ease: "easeOut", delay: 0.1}}
-                initial={{opacity: 0}}
+          >
-                transition={{duration: 0.25, ease: "easeOut", delay: 0.1}}
+            {toastContent}
-              >
+          </m.div>
-                {toastContent}
+        </m.div>
-              </m.div>
-            </m.div>
-          </AnimatePresence>
-        </LazyMotion>
       )}
     </>
   );