fix(toast): toast should appear above overlay and adding regionProps to ToastProvider

.changeset/popular-forks-sparkle.md

@@ -0,0 +1,6 @@
+---
+"@heroui/toast": patch
+"@heroui/theme": patch
+---
+
+Toast should be above the modal(#4898).

apps/docs/content/docs/components/toast.mdx

@@ -180,7 +180,7 @@ Toast has the following slots:
 ## Accessibility
 
 - Toast has role of `alert`
-- All Toasts are present in ToastRegion.
+- All Toasts are present in `ToastRegion`.
 - Close button has aria-label="Close" by default
 - When no toast are present, ToastRegion is removed from the DOM
 
@@ -331,9 +331,27 @@ Toast has the following slots:
       description: "Props to be passed to all toasts",
       default: "-"
     },
+    {
+      attribute: "regionProps",
+      type: "ToastRegionProps",
+      description: "Props to be passed to toast region",
+      default: "-"
+    },
   ]}
 />
 
+### ToastRegion Props
+
+<APITable
+  data={[
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\", string>>",
+      description: "Allows to set custom class names for the toast region slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Toast Events
 

packages/components/toast/package.json

@@ -56,6 +56,8 @@
     "@heroui/system": "workspace:*",
     "@heroui/theme": "workspace:*",
     "@heroui/button": "workspace:*",
+    "@heroui/modal": "workspace:*",
+    "@heroui/drawer": "workspace:*",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

packages/components/toast/src/toast-provider.tsx

@@ -1,7 +1,7 @@
 import {ToastOptions, ToastQueue, useToastQueue} from "@react-stately/toast";
 import {useProviderContext} from "@heroui/system";
 
-import {ToastRegion} from "./toast-region";
+import {RegionProps, ToastRegion} from "./toast-region";
 import {ToastProps, ToastPlacement} from "./use-toast";
 
 let globalToastQueue: ToastQueue<ToastProps> | null = null;
@@ -12,6 +12,7 @@ interface ToastProviderProps {
   disableAnimation?: boolean;
   toastProps?: ToastProps;
   toastOffset?: number;
+  regionProps?: RegionProps;
 }
 
 export const getToastQueue = () => {
@@ -31,6 +32,7 @@ export const ToastProvider = ({
   maxVisibleToasts = 3,
   toastOffset = 0,
   toastProps = {},
+  regionProps,
 }: ToastProviderProps) => {
   const toastQueue = useToastQueue(getToastQueue());
   const globalContext = useProviderContext();
@@ -48,6 +50,7 @@ export const ToastProvider = ({
       toastOffset={toastOffset}
       toastProps={toastProps}
       toastQueue={toastQueue}
+      {...regionProps}
     />
   );
 };
@@ -73,5 +76,6 @@ export const closeAll = () => {
 
   keys.map((key) => {
     globalToastQueue?.close(key);
+    globalToastQueue?.remove(key);
   });
 };

packages/components/toast/src/toast-region.tsx

@@ -1,14 +1,22 @@
+import type {SlotsToClasses, ToastRegionSlots, ToastRegionVariantProps} from "@heroui/theme";
+
 import {useCallback, useEffect, useMemo, useRef, useState} from "react";
 import {useToastRegion, AriaToastRegionProps} from "@react-aria/toast";
 import {QueuedToast, ToastState} from "@react-stately/toast";
 import {useHover} from "@react-aria/interactions";
 import {mergeProps} from "@react-aria/utils";
-import {toastRegion, ToastRegionVariantProps} from "@heroui/theme";
+import {toastRegion} from "@heroui/theme";
+import {clsx} from "@heroui/shared-utils";
 
 import Toast from "./toast";
 import {ToastProps, ToastPlacement} from "./use-toast";
 
-interface ToastRegionProps<T> extends AriaToastRegionProps, ToastRegionVariantProps {
+export interface RegionProps {
+  className?: string;
+  classNames?: SlotsToClasses<ToastRegionSlots>;
+}
+
+interface ToastRegionProps<T> extends AriaToastRegionProps, ToastRegionVariantProps, RegionProps {
   toastQueue: ToastState<T>;
   placement?: ToastPlacement;
   maxVisibleToasts: number;
@@ -23,6 +31,8 @@ export function ToastRegion<T extends ToastProps>({
   maxVisibleToasts,
   toastOffset,
   toastProps = {},
+  className,
+  classNames,
   ...props
 }: ToastRegionProps<T>) {
   const ref = useRef(null);
@@ -41,6 +51,8 @@ export function ToastRegion<T extends ToastProps>({
     [disableAnimation],
   );
 
+  const baseStyles = clsx(classNames?.base, className);
+
   useEffect(() => {
     function handleTouchOutside(event: TouchEvent) {
       if (ref.current && !(ref.current as HTMLDivElement).contains(event.target as Node)) {
@@ -65,7 +77,7 @@ export function ToastRegion<T extends ToastProps>({
     <div
       {...mergeProps(regionProps, hoverProps)}
       ref={ref}
-      className={slots.base()}
+      className={slots.base({class: baseStyles})}
       data-placement={placement}
       onTouchStart={handleTouchStart}
     >

packages/components/toast/stories/toast.stories.tsx

@@ -2,6 +2,15 @@ import React, {useEffect} from "react";
 import {Meta} from "@storybook/react";
 import {cn, toast} from "@heroui/theme";
 import {Button} from "@heroui/button";
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  useDisclosure,
+} from "@heroui/modal";
+import {Drawer, DrawerContent} from "@heroui/drawer";
 
 import {Toast, ToastProps, ToastProvider, addToast, closeAll} from "../src";
 
@@ -217,6 +226,68 @@ const PromiseToastTemplate = (args: ToastProps) => {
   );
 };
 
+const WithToastFromOverlayTemplate = (args) => {
+  const {isOpen, onOpen, onOpenChange, onClose} = useDisclosure();
+  const {
+    isOpen: isDrawerOpen,
+    onOpen: onDrawerOpen,
+    onOpenChange: onDrawerOpenChange,
+  } = useDisclosure({defaultOpen: args.defaultOpen});
+
+  return (
+    <>
+      <ToastProvider maxVisibleToasts={args.maxVisibleToasts} placement={args.placement} />
+
+      <Modal isOpen={isOpen} scrollBehavior="outside" onOpenChange={onOpenChange}>
+        <ModalContent>
+          <ModalHeader>Toast from Modal</ModalHeader>
+          <ModalBody>
+            <div>Press &quot;Show Toast&quot; to launch a toast.</div>
+          </ModalBody>
+          <ModalFooter>
+            <div className="flex gap-4">
+              <Button
+                onPress={() => {
+                  addToast({
+                    title: "Toast from modal",
+                    description: "Toast Displayed Successfully",
+                    ...args,
+                  });
+                }}
+              >
+                Show Toast
+              </Button>
+              <Button onPress={onClose}>Close</Button>
+            </div>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <Drawer isOpen={isDrawerOpen} onOpenChange={onDrawerOpenChange}>
+        <DrawerContent className="p-4">
+          <Button
+            className="w-fit"
+            onPress={() => {
+              addToast({
+                title: "Toast from drawer",
+                description: "Toast Displayed Successfully",
+                ...args,
+              });
+            }}
+          >
+            Show Toast
+          </Button>
+        </DrawerContent>
+      </Drawer>
+
+      <div className="flex gap-x-2">
+        <Button onPress={onOpen}>Open Modal</Button>
+        <Button onPress={onDrawerOpen}>Open Drawer</Button>
+      </div>
+    </>
+  );
+};
+
 const CustomToastComponent = (args) => {
   const color = args.color;
   const colorMap = {
@@ -409,6 +480,13 @@ export const WithEndContent = {
   },
 };
 
+export const ToastFromOverlay = {
+  render: WithToastFromOverlayTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const CustomStyles = {
   render: CustomToastTemplate,
   args: {

packages/core/theme/src/components/toast.ts

@@ -5,7 +5,7 @@ import {colorVariants} from "../utils";
 
 const toastRegion = tv({
   slots: {
-    base: "relative z-50",
+    base: "relative z-[100]",
   },
   variants: {
     disableAnimation: {