Merge branch 'main' into fix-395

package.json

@@ -7,6 +7,7 @@
     "import": "./dist/index.mjs",
     "require": "./dist/index.js"
   },
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"

src/index.tsx

@@ -397,7 +397,7 @@ const Toast = (props: ToastProps) => {
                   toastDescriptionClassname,
                   classNames?.description,
                   toast?.classNames?.description,
-			)}
+                )}
               >
                 {toast.description}
               </div>
@@ -534,16 +534,15 @@ const Toaster = (props: ToasterProps) => {
   const lastFocusedElementRef = React.useRef<HTMLElement>(null);
   const isFocusWithinRef = React.useRef(false);
 
-  const removeToast = React.useCallback(
-    (toastToRemove: ToastT) => {
+  const removeToast = React.useCallback((toastToRemove: ToastT) => {
+    setToasts((toasts) => {
       if (!toasts.find((toast) => toast.id === toastToRemove.id)?.delete) {
         ToastState.dismiss(toastToRemove.id);
       }
 
-      setToasts((toasts) => toasts.filter(({ id }) => id !== toastToRemove.id))
-    },
-    [toasts],
-  );
+      return toasts.filter(({ id }) => id !== toastToRemove.id);
+    });
+  }, []);
 
   React.useEffect(() => {
     return ToastState.subscribe((toast) => {
@@ -755,3 +754,4 @@ const Toaster = (props: ToasterProps) => {
   );
 };
 export { toast, Toaster, type ExternalToast, type ToastT, type ToasterProps, useSonner };
+export { type ToastClassnames, type ToastToDismiss, type Action } from './types';

src/styles.css

@@ -357,6 +357,10 @@
     width: 100%;
   }
 
+  [data-sonner-toaster][dir='rtl'] {
+    left: calc(var(--mobile-offset) * -1);
+  }
+
   [data-sonner-toaster] [data-sonner-toast] {
     left: 0;
     right: 0;

src/types.ts

@@ -45,7 +45,7 @@ export interface ToastIcons {
   loading?: React.ReactNode;
 }
 
-interface Action {
+export interface Action {
   label: React.ReactNode;
   onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   actionButtonStyle?: React.CSSProperties;