feat(Modal): use LayerProvider and z-index for the Modal

mondaycom · Dec 9, 2024 · 55b8ac7 · 55b8ac7
1 parent fa89c93
commit 55b8ac7
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 51 deletions.
diff --git a/packages/core/src/components/ModalNew/Modal/Modal.module.scss b/packages/core/src/components/ModalNew/Modal/Modal.module.scss
@@ -1,17 +1,21 @@
 .overlay {
+  --monday-modal-z-index: 10000;
   position: fixed;
   inset: 0;
   background-color: rgba(41, 47, 76, 0.7);
+  z-index: var(--monday-modal-z-index);
 }
 
 .modal {
+  --monday-modal-z-index: 10000;
   --top-actions-spacing: var(--spacing-large);
   --top-actions-width: var(--spacing-xl);
   --modal-inline-padding: var(--spacing-xl);
 
   position: fixed;
   top: 50%;
   left: 50%;
+  z-index: var(--monday-modal-z-index);
 
   display: flex;
   flex-direction: column;

diff --git a/packages/core/src/components/ModalNew/Modal/Modal.tsx b/packages/core/src/components/ModalNew/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import cx from "classnames";
 import { RemoveScroll } from "react-remove-scroll";
 import FocusLock from "react-focus-lock";
@@ -21,6 +21,7 @@ import {
 } from "../utils/animationVariants";
 import { createPortal } from "react-dom";
 import usePortalTarget from "../hooks/usePortalTarget/usePortalTarget";
+import { LayerProvider } from "../../LayerProvider";
 
 const Modal = forwardRef(
   (
@@ -44,6 +45,8 @@ const Modal = forwardRef(
   ) => {
     const portalTargetElement = usePortalTarget(container);
 
+    const overlayRef = useRef<HTMLDivElement>(null);
+
     const [titleId, setTitleId] = useState<string>();
     const [descriptionId, setDescriptionId] = useState<string>();
 
@@ -88,56 +91,59 @@ const Modal = forwardRef(
     return (
       <AnimatePresence>
         {show && (
-          <ModalProvider value={contextValue}>
-            {createPortal(
-              <>
-                <motion.div
-                  variants={modalAnimationOverlayVariants}
-                  initial={false}
-                  animate="enter"
-                  exit="exit"
-                  data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
-                  className={styles.overlay}
-                  onClick={onBackdropClick}
-                  aria-hidden
-                />
-                <FocusLock returnFocus>
-                  <RemoveScroll forwardProps>
-                    <motion.div
-                      variants={modalAnimationVariants}
-                      initial="exit"
-                      animate="enter"
-                      exit="exit"
-                      custom={anchorElementRef}
-                      ref={ref}
-                      className={cx(
-                        styles.modal,
-                        getStyle(styles, camelCase("size-" + size)),
-                        { [styles.withHeaderAction]: !!renderHeaderAction },
-                        className
-                      )}
-                      id={id}
-                      data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}
-                      role="dialog"
-                      aria-modal
-                      aria-labelledby={titleId}
-                      aria-describedby={descriptionId}
-                      style={style}
-                    >
-                      {children}
-                      <ModalTopActions
-                        renderAction={renderHeaderAction}
-                        theme={closeButtonTheme}
-                        closeButtonAriaLabel={closeButtonAriaLabel}
-                        onClose={onClose}
-                      />
-                    </motion.div>
-                  </RemoveScroll>
-                </FocusLock>
-              </>,
-              portalTargetElement
-            )}
-          </ModalProvider>
+          <LayerProvider layerRef={overlayRef}>
+            <ModalProvider value={contextValue}>
+              {createPortal(
+                <>
+                  <motion.div
+                    ref={overlayRef}
+                    variants={modalAnimationOverlayVariants}
+                    initial={false}
+                    animate="enter"
+                    exit="exit"
+                    data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
+                    className={styles.overlay}
+                    onClick={onBackdropClick}
+                    aria-hidden
+                  />
+                  <FocusLock returnFocus>
+                    <RemoveScroll forwardProps>
+                      <motion.div
+                        variants={modalAnimationVariants}
+                        initial="exit"
+                        animate="enter"
+                        exit="exit"
+                        custom={anchorElementRef}
+                        ref={ref}
+                        className={cx(
+                          styles.modal,
+                          getStyle(styles, camelCase("size-" + size)),
+                          { [styles.withHeaderAction]: !!renderHeaderAction },
+                          className
+                        )}
+                        id={id}
+                        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}
+                        role="dialog"
+                        aria-modal
+                        aria-labelledby={titleId}
+                        aria-describedby={descriptionId}
+                        style={style}
+                      >
+                        {children}
+                        <ModalTopActions
+                          renderAction={renderHeaderAction}
+                          theme={closeButtonTheme}
+                          closeButtonAriaLabel={closeButtonAriaLabel}
+                          onClose={onClose}
+                        />
+                      </motion.div>
+                    </RemoveScroll>
+                  </FocusLock>
+                </>,
+                portalTargetElement
+              )}
+            </ModalProvider>
+          </LayerProvider>
         )}
       </AnimatePresence>
     );