From 0058b1801c1bfb21e3961a31a8a1c7a27443abb4 Mon Sep 17 00:00:00 2001
From: Vlad Babich <vladbabich@deephaven.io>
Date: Thu, 25 Jul 2024 10:13:23 -0600
Subject: [PATCH] fix: DH-17454: Wrap Modal in SpectrumThemeProvider (#2169)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap the `Modal` component attached to `document.body` in
`SpectrumThemeProvider`.

Had to add `zIndex: 0` and `position: relative` to the
`SpectrumThemeProvider` to fix the issue with `DatePicker` popovers
nested in the `Modal` rendering behind it.

![Screenshot 2024-07-23 at 4 35
35 PM](https://github.com/user-attachments/assets/1a860697-f4dd-4565-bf0e-6269f24a8723)
---
 packages/components/src/modal/Modal.tsx                 | 7 +++++--
 packages/components/src/theme/SpectrumThemeProvider.tsx | 6 ++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/modal/Modal.tsx b/packages/components/src/modal/Modal.tsx
index 0cc86fc61c..5a3de42646 100644
--- a/packages/components/src/modal/Modal.tsx
+++ b/packages/components/src/modal/Modal.tsx
@@ -9,6 +9,7 @@ import React, {
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import ThemeExport from '../ThemeExport';
+import { SpectrumThemeProvider } from '../theme/SpectrumThemeProvider';
 
 interface ModalProps {
   className?: string;
@@ -101,7 +102,9 @@ function Modal({
 
   return element.current
     ? ReactDOM.createPortal(
-        <>
+        // Without the zIndex and position props
+        // the modal is rendered on top of nested DatePicker popovers
+        <SpectrumThemeProvider isPortal zIndex={0} position="relative">
           <CSSTransition
             appear
             mountOnEnter
@@ -171,7 +174,7 @@ function Modal({
               </div>
             </div>
           </CSSTransition>
-        </>,
+        </SpectrumThemeProvider>,
         element.current
       )
     : null;
diff --git a/packages/components/src/theme/SpectrumThemeProvider.tsx b/packages/components/src/theme/SpectrumThemeProvider.tsx
index 7998643a21..a127a1cd5d 100644
--- a/packages/components/src/theme/SpectrumThemeProvider.tsx
+++ b/packages/components/src/theme/SpectrumThemeProvider.tsx
@@ -9,6 +9,8 @@ export interface SpectrumThemeProviderProps {
   isPortal?: boolean;
   theme?: Theme;
   colorScheme?: 'light' | 'dark';
+  zIndex?: number;
+  position?: 'static' | 'absolute' | 'fixed' | 'relative' | 'sticky';
 }
 
 /**
@@ -23,6 +25,8 @@ export function SpectrumThemeProvider({
   isPortal = false,
   theme = themeDHDefault,
   colorScheme,
+  zIndex,
+  position,
 }: SpectrumThemeProviderProps): JSX.Element {
   // a unique ID is used per provider to force it to render the theme wrapper element inside portals
   // based on https://github.com/adobe/react-spectrum/issues/1697#issuecomment-999827266
@@ -34,6 +38,8 @@ export function SpectrumThemeProvider({
       UNSAFE_className="spectrum-theme-provider"
       theme={theme}
       colorScheme={colorScheme}
+      zIndex={zIndex}
+      position={position}
       data-unique-id={id}
     >
       {children}