fix(Toast): multiple toasts should show last one (#6729)

src/components/toast/methods.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { InternalToast, ToastProps } from './toast'
-import { mergeProps } from '../../utils/with-default-props'
 import {
   ImperativeHandler,
   renderImperatively,
 } from '../../utils/render-imperatively'
+import { mergeProps } from '../../utils/with-default-props'
+import { InternalToast, ToastProps } from './toast'
 
 let currentHandler: ImperativeHandler | null = null
 let currentTimeout: number | null = null
@@ -42,7 +42,12 @@ export function show(p: ToastShowProps | string) {
     />
   )
   if (currentHandler) {
-    currentHandler.replace(element)
+    if (currentHandler.isRendered?.()) {
+      currentHandler.replace(element)
+    } else {
+      currentHandler.close()
+      currentHandler = renderImperatively(element)
+    }
   } else {
     currentHandler = renderImperatively(element)
   }

src/components/toast/tests/toast.test.tsx

@@ -1,11 +1,11 @@
 import React, { useRef } from 'react'
 import {
-  render,
+  act,
   fireEvent,
+  render,
+  screen,
   waitFor,
   waitForElementToBeRemoved,
-  act,
-  screen,
 } from 'testing'
 import Toast, { ToastHandler } from '..'
 
@@ -255,4 +255,26 @@ describe('Toast', () => {
     await waitForContentShow('content2')
     expect(document.querySelectorAll(`.${classPrefix}-main`).length)
   })
+
+  test('multiple toasts should show last one', async () => {
+    const { getByText } = render(
+      <button
+        onClick={() => {
+          Toast.show({
+            content: 'content',
+            duration: 0,
+          })
+          Toast.show({
+            content: 'content2',
+            duration: 0,
+          })
+        }}
+      >
+        btn
+      </button>
+    )
+    fireEvent.click(getByText('btn'))
+    await waitForContentShow('content2')
+    expect(document.querySelectorAll(`.${classPrefix}-main`).length)
+  })
 })

src/utils/render-imperatively.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'
 import type { ReactElement } from 'react'
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { renderToBody } from './render-to-body'
 
 type ImperativeProps = {
@@ -13,6 +13,7 @@ type TargetElement = ReactElement<ImperativeProps>
 export type ImperativeHandler = {
   close: () => void
   replace: (element: TargetElement) => void
+  isRendered?: () => boolean
 }
 
 export function renderImperatively(element: TargetElement) {
@@ -60,12 +61,15 @@ export function renderImperatively(element: TargetElement) {
       if (!wrapperRef.current) {
         // it means the wrapper is not mounted yet, call `unmount` directly
         unmount()
+        // call `afterClose` to make sure the callback is called
+        element.props.afterClose?.()
       } else {
         wrapperRef.current?.close()
       }
     },
     replace: element => {
       wrapperRef.current?.replace(element)
     },
+    isRendered: () => !!wrapperRef.current,
   } as ImperativeHandler
 }