archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(toast): toastRegion leftover in DOM (#5508)

Browse Source
This commit is contained in:
WK 2025-07-29 00:53:56 +08:00 committed by GitHub
parent 2cb6ecff93
commit 60118379f5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 50 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/silver-items-doubt.md Normal file
View File

@ -0,0 +1,5 @@
---
"@heroui/toast": patch
---
fixed toastRegion leftover in DOM (#5502)

26
packages/components/toast/src/toast-provider.tsx
View File

@ -4,7 +4,7 @@ import type {ToastProps, ToastPlacement} from "./use-toast";
import {ToastQueue, useToastQueue} from "@react-stately/toast";
import {useProviderContext} from "@heroui/system";
import {AnimatePresence, LazyMotion} from "framer-motion";
import {LazyMotion} from "framer-motion";
import {ToastRegion} from "./toast-region";
@ -45,19 +45,17 @@ export const ToastProvider = ({
return (
<LazyMotion features={loadFeatures}>
<AnimatePresence>
{toastQueue.visibleToasts.length > 0 ? (
<ToastRegion
disableAnimation={disableAnimation}
maxVisibleToasts={maxVisibleToasts}
placement={placement}
toastOffset={toastOffset}
toastProps={toastProps}
toastQueue={toastQueue}
{...regionProps}
/>
) : null}
</AnimatePresence>
{toastQueue.visibleToasts.length > 0 && (
<ToastRegion
disableAnimation={disableAnimation}
maxVisibleToasts={maxVisibleToasts}
placement={placement}
toastOffset={toastOffset}
toastProps={toastProps}
toastQueue={toastQueue}
{...regionProps}
/>
)}
</LazyMotion>
);
};

63
packages/components/toast/src/toast-region.tsx
View File

@ -8,6 +8,7 @@ import {useToastRegion} from "@react-aria/toast";
import {useHover} from "@react-aria/interactions";
import {toastRegion} from "@heroui/theme";
import {clsx, mergeProps} from "@heroui/shared-utils";
import {AnimatePresence} from "framer-motion";
import Toast from "./toast";
@ -81,37 +82,39 @@ export function ToastRegion<T extends ToastProps>({
data-placement={placement}
onTouchStart={handleTouchStart}
>
{[...toastQueue.visibleToasts].reverse().map((toast: QueuedToast<ToastProps>, index) => {
if (disableAnimation && total - index > maxVisibleToasts) {
<AnimatePresence>
{[...toastQueue.visibleToasts].reverse().map((toast: QueuedToast<ToastProps>, index) => {
if (disableAnimation && total - index > maxVisibleToasts) {
return null;
}
if (
disableAnimation ||
total - index <= 4 ||
(isHovered && total - index <= maxVisibleToasts + 1)
) {
return (
<Toast
key={toast.key}
state={toastQueue}
toast={toast}
{...mergeProps(toastProps, toast.content)}
disableAnimation={disableAnimation}
heights={heights}
index={index}
isRegionExpanded={isHovered || isTouched}
maxVisibleToasts={maxVisibleToasts}
placement={placement}
setHeights={setHeights}
toastOffset={toastOffset}
total={total}
/>
);
}
return null;
}
if (
disableAnimation ||
total - index <= 4 ||
(isHovered && total - index <= maxVisibleToasts + 1)
) {
return (
<Toast
key={toast.key}
state={toastQueue}
toast={toast}
{...mergeProps(toastProps, toast.content)}
disableAnimation={disableAnimation}
heights={heights}
index={index}
isRegionExpanded={isHovered || isTouched}
maxVisibleToasts={maxVisibleToasts}
placement={placement}
setHeights={setHeights}
toastOffset={toastOffset}
total={total}
/>
);
}
return null;
})}
})}
</AnimatePresence>
</div>
);
}