fix: DH-17454: Wrap Modal in SpectrumThemeProvider (#2169)

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

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

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}