From 1d459291dba32abf3588d1682ce2a48fee72fad6 Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Thu, 20 Feb 2025 14:48:07 +0530
Subject: [PATCH 1/4] fix: maxVisibleToasts functionality

---
 packages/components/toast/src/toast-region.tsx | 7 ++++++-
 packages/components/toast/src/use-toast.ts     | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/components/toast/src/toast-region.tsx b/packages/components/toast/src/toast-region.tsx
index 41a212ece7..54c568661a 100644
--- a/packages/components/toast/src/toast-region.tsx
+++ b/packages/components/toast/src/toast-region.tsx
@@ -74,7 +74,11 @@ export function ToastRegion<T extends ToastProps>({
           return null;
         }
 
-        if (total - index <= 4 || (isHovered && total - index <= maxVisibleToasts + 1)) {
+        if (
+          disableAnimation ||
+          total - index <= 4 ||
+          (isHovered && total - index <= maxVisibleToasts + 1)
+        ) {
           return (
             <Toast
               key={toast.key}
@@ -85,6 +89,7 @@ export function ToastRegion<T extends ToastProps>({
               heights={heights}
               index={index}
               isRegionExpanded={isHovered || isTouched}
+              maxVisibleToasts={maxVisibleToasts}
               placement={placement}
               setHeights={setHeights}
               toastOffset={toastOffset}
diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts
index a442678767..20d19ed317 100644
--- a/packages/components/toast/src/use-toast.ts
+++ b/packages/components/toast/src/use-toast.ts
@@ -119,6 +119,7 @@ interface Props<T> extends Omit<HTMLHeroUIProps<"div">, "title">, ToastProps {
   isRegionExpanded: boolean;
   placement?: ToastPlacement;
   toastOffset?: number;
+  maxVisibleToasts: number;
 }
 
 export type UseToastProps<T = ToastProps> = Props<T> &
@@ -158,6 +159,7 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
     icon,
     onClose,
     severity,
+    maxVisibleToasts,
     ...otherProps
   } = props;
 
@@ -486,7 +488,8 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
       "data-drag-value": number;
       className: string;
     } => {
-      const isCloseToEnd = total - index - 1 <= 2;
+      const comparingValue = isRegionExpanded ? maxVisibleToasts - 1 : 2;
+      const isCloseToEnd = total - index - 1 <= comparingValue;
       const dragDirection = placement === "bottom-center" || placement === "top-center" ? "y" : "x";
       const dragConstraints = {left: 0, right: 0, top: 0, bottom: 0};
       const dragElastic = getDragElasticConstraints(placement);
@@ -593,6 +596,7 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
       shouldCloseToast,
       slots,
       toastOffset,
+      maxVisibleToasts,
     ],
   );
 

From a66aabe550ac05717d6b8d8e5c62d90c0d8d5c44 Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Thu, 20 Feb 2025 14:51:58 +0530
Subject: [PATCH 2/4] chore: adding the changeset

---
 .changeset/slow-dogs-travel.md                |  5 +++++
 packages/components/toast/src/use-toast.ts    |  4 +++-
 .../toast/stories/toast.stories.tsx           | 22 +++++++++++++------
 3 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/slow-dogs-travel.md

diff --git a/.changeset/slow-dogs-travel.md b/.changeset/slow-dogs-travel.md
new file mode 100644
index 0000000000..048b8c00fc
--- /dev/null
+++ b/.changeset/slow-dogs-travel.md
@@ -0,0 +1,5 @@
+---
+"@heroui/toast": patch
+---
+
+fixing maxVisibleToast functionality in toast (#4870)
diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts
index 20d19ed317..9d022b46b2 100644
--- a/packages/components/toast/src/use-toast.ts
+++ b/packages/components/toast/src/use-toast.ts
@@ -488,7 +488,9 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
       "data-drag-value": number;
       className: string;
     } => {
-      const comparingValue = isRegionExpanded ? maxVisibleToasts - 1 : 2;
+      const comparingValue = isRegionExpanded
+        ? maxVisibleToasts - 1
+        : Math.min(2, maxVisibleToasts - 1);
       const isCloseToEnd = total - index - 1 <= comparingValue;
       const dragDirection = placement === "bottom-center" || placement === "top-center" ? "y" : "x";
       const dragConstraints = {left: 0, right: 0, top: 0, bottom: 0};
diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx
index b501f18789..586be77fb3 100644
--- a/packages/components/toast/stories/toast.stories.tsx
+++ b/packages/components/toast/stories/toast.stories.tsx
@@ -49,6 +49,9 @@ export default {
         "top-center",
       ],
     },
+    maxVisibleToasts: {
+      control: {type: "number"},
+    },
     hideCloseButton: {
       control: {
         type: "boolean",
@@ -80,7 +83,7 @@ const defaultProps = {
 const Template = (args: ToastProps) => {
   return (
     <>
-      <ToastProvider placement={args.placement} />
+      <ToastProvider maxVisibleToasts={args.maxVisibleToasts} placement={args.placement} />
       <div>
         <Button
           onPress={() => {
@@ -100,7 +103,7 @@ const Template = (args: ToastProps) => {
 const ShowTimeoutProgressTemplate = (args: ToastProps) => {
   return (
     <>
-      <ToastProvider placement={args.placement} />
+      <ToastProvider maxVisibleToasts={args.maxVisibleToasts} placement={args.placement} />
       <Button
         onPress={() => {
           addToast({
@@ -121,7 +124,7 @@ const ShowTimeoutProgressTemplate = (args: ToastProps) => {
 const WithEndContentTemplate = (args) => {
   return (
     <>
-      <ToastProvider placement={args.placement} />
+      <ToastProvider maxVisibleToasts={args.maxVisibleToasts} placement={args.placement} />
       <Button
         onPress={() => {
           addToast({
@@ -147,7 +150,7 @@ const WithEndContentTemplate = (args) => {
 const PlacementTemplate = (args: ToastProps) => {
   return (
     <>
-      <ToastProvider placement={args.placement} />
+      <ToastProvider maxVisibleToasts={args.maxVisibleToasts} placement={args.placement} />
       <div>
         <Button
           onPress={() => {
@@ -168,7 +171,11 @@ const PlacementTemplate = (args: ToastProps) => {
 const DisableAnimationTemplate = (args: ToastProps) => {
   return (
     <>
-      <ToastProvider disableAnimation={true} placement={args.placement} />
+      <ToastProvider
+        disableAnimation={true}
+        maxVisibleToasts={args.maxVisibleToasts}
+        placement={args.placement}
+      />
       <div>
         <Button
           onPress={() => {
@@ -189,7 +196,7 @@ const DisableAnimationTemplate = (args: ToastProps) => {
 const PromiseToastTemplate = (args: ToastProps) => {
   return (
     <>
-      <ToastProvider placement={args.placement} />
+      <ToastProvider maxVisibleToasts={args.maxVisibleToasts} placement={args.placement} />
       <div>
         <Button
           onPress={() => {
@@ -265,7 +272,7 @@ const CustomToastTemplate = (args) => {
 
   return (
     <>
-      <ToastProvider placement={args.placement} />
+      <ToastProvider maxVisibleToasts={args.maxVisibleToasts} placement={args.placement} />
       <div className="flex gap-2">
         {colors.map((color, idx) => (
           <CustomToastComponent key={idx} color={color} />
@@ -279,6 +286,7 @@ const CustomCloseButtonTemplate = (args) => {
   return (
     <>
       <ToastProvider
+        maxVisibleToasts={args.maxVisibleToasts}
         placement={args.placement}
         toastProps={{
           classNames: {

From 59c59389fb53ef10812f37a45f468b02d613d53d Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Fri, 21 Feb 2025 12:57:11 +0530
Subject: [PATCH 3/4] fix: starting the toast timer when the promise is
 resolved

---
 .changeset/slow-dogs-travel.md                |  1 +
 packages/components/toast/src/use-toast.ts    | 31 ++++++++++++-------
 .../toast/stories/toast.stories.tsx           |  4 ++-
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/.changeset/slow-dogs-travel.md b/.changeset/slow-dogs-travel.md
index 048b8c00fc..3e8f436589 100644
--- a/.changeset/slow-dogs-travel.md
+++ b/.changeset/slow-dogs-travel.md
@@ -3,3 +3,4 @@
 ---
 
 fixing maxVisibleToast functionality in toast (#4870)
+For promises, starting the timer only after the promise is resolved
diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts
index 9d022b46b2..d52e309001 100644
--- a/packages/components/toast/src/use-toast.ts
+++ b/packages/components/toast/src/use-toast.ts
@@ -195,9 +195,18 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
     }
   }, []);
 
+  const [isLoading, setIsLoading] = useState<boolean>(!!promiseProp);
+
+  useEffect(() => {
+    if (!promiseProp) return;
+    promiseProp.finally(() => {
+      setIsLoading(false);
+    });
+  }, [promiseProp]);
+
   useEffect(() => {
     const updateProgress = (timestamp: number) => {
-      if (!timeout) {
+      if (!timeout || isLoading) {
         return;
       }
 
@@ -240,16 +249,16 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
         cancelAnimationFrame(animationRef.current);
       }
     };
-  }, [timeout, shouldShowTimeoutProgess, state, isToastHovered, index, total, isRegionExpanded]);
-
-  const [isLoading, setIsLoading] = useState<boolean>(!!promiseProp);
-
-  useEffect(() => {
-    if (!promiseProp) return;
-    promiseProp.finally(() => {
-      setIsLoading(false);
-    });
-  }, [promiseProp]);
+  }, [
+    timeout,
+    shouldShowTimeoutProgess,
+    state,
+    isToastHovered,
+    index,
+    total,
+    isRegionExpanded,
+    isLoading,
+  ]);
 
   const Component = as || "div";
   const loadingIcon: ReactNode = icon;
diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx
index 586be77fb3..1f6cca2c54 100644
--- a/packages/components/toast/stories/toast.stories.tsx
+++ b/packages/components/toast/stories/toast.stories.tsx
@@ -203,7 +203,9 @@ const PromiseToastTemplate = (args: ToastProps) => {
             addToast({
               title: "Toast Title",
               description: "Toast Displayed Successfully",
-              promise: new Promise((resolve) => setTimeout(resolve, 5000)),
+              promise: new Promise((resolve) => setTimeout(resolve, 3000)),
+              timeout: 3000,
+              shouldShowTimeoutProgess: false,
               ...args,
             });
           }}

From 430db5f062926780346900bf54cd7090476968e7 Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Fri, 21 Feb 2025 13:22:22 +0530
Subject: [PATCH 4/4] fix: spinner invisible in solid variants

---
 packages/components/toast/src/toast.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/toast/src/toast.tsx b/packages/components/toast/src/toast.tsx
index 3ce829f454..372f24b6e2 100644
--- a/packages/components/toast/src/toast.tsx
+++ b/packages/components/toast/src/toast.tsx
@@ -69,7 +69,7 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
         <Spinner
           aria-label="loadingIcon"
           classNames={{wrapper: getLoadingIconProps().className}}
-          color={color ?? "default"}
+          color={"current"}
         />
       )
     : null;