fix: incorrect stacking (#499)

emilkowalski · Nov 2, 2024 · 51ed654 · 51ed654
1 parent 8d33b51
commit 51ed654
Showing 1 changed file with 29 additions and 12 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -127,6 +127,17 @@ const Toast = (props: ToastProps) => {
     setMounted(true);
   }, []);
 
+  React.useEffect(() => {
+    const toastNode = toastRef.current;
+    if (toastNode) {
+      const height = toastNode.getBoundingClientRect().height;
+      // Add toast height tot heights array after the toast is mounted
+      setInitialHeight(height);
+      setHeights((h) => [{ toastId: toast.id, height, position: toast.position }, ...h]);
+      return () => setHeights((h) => h.filter((height) => height.toastId !== toast.id));
+    }
+  }, [setHeights, toast.id]);
+
   React.useLayoutEffect(() => {
     if (!mounted) return;
     const toastNode = toastRef.current;
@@ -219,15 +230,21 @@ const Toast = (props: ToastProps) => {
   function getLoadingIcon() {
     if (icons?.loading) {
       return (
-        <div className={cn(classNames?.loader, toast?.classNames?.loader, "sonner-loader")} data-visible={toastType === 'loading'}>
+        <div
+          className={cn(classNames?.loader, toast?.classNames?.loader, 'sonner-loader')}
+          data-visible={toastType === 'loading'}
+        >
           {icons.loading}
         </div>
       );
     }
 
     if (loadingIconProp) {
       return (
-        <div className={cn(classNames?.loader, toast?.classNames?.loader, "sonner-loader")} data-visible={toastType === 'loading'}>
+        <div
+          className={cn(classNames?.loader, toast?.classNames?.loader, 'sonner-loader')}
+          data-visible={toastType === 'loading'}
+        >
           {loadingIconProp}
         </div>
       );
@@ -569,26 +586,26 @@ const Toaster = forwardRef<HTMLElement, ToasterProps>(function Toaster(props, re
     try {
       // Chrome & Firefox
       darkMediaQuery.addEventListener('change', ({ matches }) => {
-         if (matches) {
-           setActualTheme('dark');
-         } else {
-           setActualTheme('light');
-         }
-       });
+        if (matches) {
+          setActualTheme('dark');
+        } else {
+          setActualTheme('light');
+        }
+      });
     } catch (error) {
       // Safari < 14
-      darkMediaQuery.addListener( ({ matches }) => {
+      darkMediaQuery.addListener(({ matches }) => {
         try {
           if (matches) {
             setActualTheme('dark');
           } else {
             setActualTheme('light');
           }
-        } catch(e) {
-          console.error(e)
+        } catch (e) {
+          console.error(e);
         }
       });
-    } 
+    }
   }, [theme]);
 
   React.useEffect(() => {