Fix batch updates (#28)

* Fix batch updates

* cleanup

* Readme update

* Fix rich colors and icon alignment

* Change timeout

README.md

@@ -40,7 +40,7 @@ Most basic toast. You can customize it (and any other type) by passing an option
 toast('Event has been created');
 ```
 
-With icon and description:
+With custom icon and description:
 
 ```jsx
 toast('Event has been created', {

package.json

@@ -29,12 +29,14 @@
     "@types/react": "^18.0.26",
     "prettier": "^2.8.4",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tsup": "^6.4.0",
     "turbo": "1.6",
     "typescript": "^4.8.4"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "packageManager": "[email protected]"
 }

src/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 import './styles.css';
 import { getAsset, Loader } from './assets';
@@ -135,7 +136,7 @@ const Toast = (props: ToastProps) => {
             }
           });
       };
-	  
+
       if (toast.promise instanceof Promise) {
         promiseHandler(toast.promise);
       } else if (typeof toast.promise === 'function') {
@@ -241,7 +242,7 @@ const Toast = (props: ToastProps) => {
       data-index={index}
       data-front={isFront}
       data-swiping={swiping}
-      data-type={promiseStatus !== 'loading' ? promiseStatus : toastType}
+      data-type={promiseStatus !== 'loading' && promiseStatus ? promiseStatus : toastType}
       data-invert={invert}
       data-swipe-out={swipeOut}
       data-expanded={Boolean(expanded || (expandByDefault && mounted))}
@@ -429,7 +430,10 @@ const Toaster = (props: ToasterProps) => {
         return;
       }
 
-      setToasts((toasts) => [toast, ...toasts]);
+      // Don't batch update toasts to prevent wrong calculations
+      ReactDOM.flushSync(() => {
+        setToasts((toasts) => [toast, ...toasts]);
+      });
     });
   }, []);
 

src/styles.css

@@ -118,13 +118,18 @@
 [data-sonner-toast][data-promise='true'] [data-icon] > svg {
   opacity: 0;
   transform: scale(0.8);
+  transform-origin: center;
   animation: sonner-fade-in 300ms ease forwards;
 }
 
 [data-sonner-toast] [data-icon] > * {
   flex-shrink: 0;
 }
 
+[data-sonner-toast] [data-icon] svg {
+  margin-left: -1px;
+}
+
 [data-sonner-toast] [data-content] {
   display: flex;
   flex-direction: column;
@@ -410,6 +415,7 @@
 }
 
 .sonner-loading-wrapper[data-visible='false'] {
+  transform-origin: center;
   animation: sonner-fade-out 0.2s ease forwards;
 }