fix toast z index bug

src/components/Layer.tsx

@@ -1,5 +1,10 @@
+// this is deprecated and only still used internally for the Toast component (since it's probably more work than it's worth to migrate)
+// anything else that needs similar functionality should use a ModalWrapper
+import { type UseTransitionProps, useTransition } from '@react-spring/web'
 import { useOutsideClick } from 'honorable'
+import { isNil } from 'lodash-es'
 import {
+  type ComponentProps,
   type MutableRefObject,
   type PropsWithChildren,
   forwardRef,
@@ -9,8 +14,6 @@ import {
   useState,
 } from 'react'
 import { createPortal } from 'react-dom'
-import { type UseTransitionProps, useTransition } from '@react-spring/web'
-import { isNil } from 'lodash-es'
 import styled, { useTheme } from 'styled-components'
 
 import usePrevious from '../hooks/usePrevious'
@@ -158,6 +161,7 @@ function LayerRef(
     onClose,
     onCloseComplete,
     open,
+    wrapperProps,
   }: PropsWithChildren<{
     open: boolean
     position: LayerPositionType
@@ -167,6 +171,7 @@ function LayerRef(
     onClose?: () => void | null | undefined
     onCloseComplete?: () => void | null | undefined
     onClickOutside?: () => void | null | undefined
+    wrapperProps?: ComponentProps<'div'>
   }>,
   ref: MutableRefObject<HTMLDivElement>
 ) {
@@ -292,14 +297,15 @@ function LayerRef(
     <LayerWrapper
       $position={position}
       $margin={margin}
+      {...wrapperProps}
     >
       {transitions((styles) => (
         <AnimatedDiv
           className="animated"
           ref={finalRef}
           style={{
             ...styles,
-            ...(modal ? { zIndex: theme.zIndexes.modal } : {}),
+            ...(modal ? { zIndex: theme.zIndexes.toast } : {}),
           }}
         >
           {children}

src/components/Toast.tsx

@@ -1,4 +1,11 @@
-import { type Ref, forwardRef, useCallback, useEffect, useState } from 'react'
+import {
+  type ComponentProps,
+  type Ref,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 
 import { type Severity } from '../types'
 import { type Extends } from '../utils/ts-utils'
@@ -15,6 +22,7 @@ type ToastProps = {
   onCloseComplete?: () => void
   show?: boolean
   severity?: ToastSeverity
+  layerProps?: ComponentProps<'div'>
 } & BannerProps
 
 const defaults = {
@@ -35,6 +43,7 @@ const Toast = forwardRef(
       severity = defaults.severity,
       children,
       show = true,
+      layerProps,
       ...props
     }: ToastProps,
     ref: Ref<any>
@@ -67,6 +76,7 @@ const Toast = forwardRef(
 
     return (
       <Layer
+        modal
         open={open}
         position={position}
         onClose={() => {
@@ -76,6 +86,7 @@ const Toast = forwardRef(
           onCloseComplete()
         }}
         ref={ref}
+        {...layerProps}
       >
         <Banner
           onClose={() => setOpen(false)}

src/theme/zIndexes.ts

@@ -5,4 +5,5 @@ export const zIndexes = {
   modal: 1000,
   selectPopover: 1500,
   tooltip: 2000,
+  toast: 2500,
 } as const satisfies CSSObject