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,11 +40,10 @@ export const ToastProvider = ({
   const globalContext = useProviderContext();
   const disableAnimation = disableAnimationProp ?? globalContext?.disableAnimation ?? false;
 
-  if (toastQueue.visibleToasts.length == 0) {
-    return null;
-  }
-
   return (
+    <LazyMotion features={loadFeatures}>
+      <AnimatePresence>
+        {toastQueue.visibleToasts.length > 0 ? (
           <ToastRegion
             disableAnimation={disableAnimation}
             maxVisibleToasts={maxVisibleToasts}
@@ -51,6 +53,9 @@ export const ToastProvider = ({
             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,8 +106,6 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
       {disableAnimation ? (
         toastContent
       ) : (
-        <LazyMotion features={loadFeatures}>
-          <AnimatePresence>
         <m.div {...getMotionDivProps()}>
           <m.div
             key={"inner-div"}
@@ -121,8 +117,6 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
             {toastContent}
           </m.div>
         </m.div>
-          </AnimatePresence>
-        </LazyMotion>
       )}
     </>
   );