From b5739a4ca0c84ffcbfcc595f16e8999b6ac643ac Mon Sep 17 00:00:00 2001
From: Vlad Babich <vladbabich@deephaven.io>
Date: Fri, 26 Jul 2024 15:10:10 -0600
Subject: [PATCH 1/2] fix: DH-17454: Combine modal classes instead of replacing
 (#2173)

---
 packages/components/src/modal/Modal.tsx       | 4 ++--
 packages/components/src/modal/ModalBody.tsx   | 9 +++++++--
 packages/components/src/modal/ModalFooter.tsx | 8 ++++++--
 packages/components/src/modal/ModalHeader.tsx | 3 ++-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/modal/Modal.tsx b/packages/components/src/modal/Modal.tsx
index 0cc86fc61..710b2d43a 100644
--- a/packages/components/src/modal/Modal.tsx
+++ b/packages/components/src/modal/Modal.tsx
@@ -25,7 +25,7 @@ interface ModalProps {
 }
 
 function Modal({
-  className = '',
+  className,
   children,
   role = 'role',
   keyboard = true,
@@ -153,7 +153,7 @@ function Modal({
               style={{ display: 'block' }}
             >
               <div
-                className={classNames(`modal-dialog ${className}`, {
+                className={classNames('modal-dialog', className, {
                   'modal-lg': size === 'lg',
                   'modal-sm': size === 'sm',
                   'modal-xl': size === 'xl',
diff --git a/packages/components/src/modal/ModalBody.tsx b/packages/components/src/modal/ModalBody.tsx
index 351288f68..9a531acea 100644
--- a/packages/components/src/modal/ModalBody.tsx
+++ b/packages/components/src/modal/ModalBody.tsx
@@ -1,4 +1,5 @@
 import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+import classNames from 'classnames';
 
 interface ModalBodyProps {
   className?: string;
@@ -8,13 +9,17 @@ interface ModalBodyProps {
 }
 
 function ModalBody({
-  className = 'modal-body',
+  className,
   style,
   children,
   'data-testid': dataTestId,
 }: ModalBodyProps): ReactElement {
   return (
-    <div className={className} data-testid={dataTestId} style={style}>
+    <div
+      className={classNames('modal-body', className)}
+      data-testid={dataTestId}
+      style={style}
+    >
       {children}
     </div>
   );
diff --git a/packages/components/src/modal/ModalFooter.tsx b/packages/components/src/modal/ModalFooter.tsx
index 3c6a7ee2f..8a20be419 100644
--- a/packages/components/src/modal/ModalFooter.tsx
+++ b/packages/components/src/modal/ModalFooter.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
+import classNames from 'classnames';
 
 interface ModalFooterProps {
   className?: string;
@@ -7,12 +8,15 @@ interface ModalFooterProps {
 }
 
 function ModalFooter({
-  className = 'modal-footer',
+  className,
   children,
   'data-testid': dataTestId,
 }: ModalFooterProps): ReactElement {
   return (
-    <div className={className} data-testid={dataTestId}>
+    <div
+      className={classNames('modal-footer', className)}
+      data-testid={dataTestId}
+    >
       {children}
     </div>
   );
diff --git a/packages/components/src/modal/ModalHeader.tsx b/packages/components/src/modal/ModalHeader.tsx
index f9ea6c5f1..0e8b5602d 100644
--- a/packages/components/src/modal/ModalHeader.tsx
+++ b/packages/components/src/modal/ModalHeader.tsx
@@ -1,4 +1,5 @@
 import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+import classNames from 'classnames';
 
 interface ModalHeaderProps {
   className?: string;
@@ -18,7 +19,7 @@ function ModalHeader({
   'data-testid': dataTestId,
 }: ModalHeaderProps): ReactElement {
   return (
-    <div className={`modal-header ${className}`} style={style}>
+    <div className={classNames('modal-header', className)} style={style}>
       <h5 className="modal-title">{children}</h5>
       {closeButton && (
         <button

From 6610162dfa5242f805153eb8dcebe6aef18d0a8e Mon Sep 17 00:00:00 2001
From: Vlad Babich <vladbabich@deephaven.io>
Date: Thu, 25 Jul 2024 10:13:23 -0600
Subject: [PATCH 2/2] 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 710b2d43a..03f1cc983 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 7998643a2..a127a1cd5 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}