fix: DH-17454: Fix Spectrum component theming in modal dialogs

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;
@@ -25,7 +26,7 @@ interface ModalProps {
 }
 
 function Modal({
-  className = '',
+  className,
   children,
   role = 'role',
   keyboard = true,
@@ -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
@@ -153,7 +156,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',
@@ -171,7 +174,7 @@ function Modal({
               </div>
             </div>
           </CSSTransition>
-        </>,
+        </SpectrumThemeProvider>,
         element.current
       )
     : null;

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>
   );

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>
   );

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

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}