feat(Modal): wrap the overlay and modal inside a container, to allow …

…portaling with layer provider to the container (#2703)
mondaycom · Jan 7, 2025 · 6f4b9d5 · 6f4b9d5
1 parent 7c7608d
commit 6f4b9d5
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 60 deletions.
diff --git a/packages/core/src/components/Modal/Modal/Modal.module.scss b/packages/core/src/components/Modal/Modal/Modal.module.scss
@@ -1,47 +1,50 @@
-$modal-default-z-index: 10000;
-
-.overlay {
+.container {
   position: fixed;
   inset: 0;
-  background-color: var(--color-surface);
-  z-index: var(--monday-modal-z-index, $modal-default-z-index);
-}
-
-.modal {
-  --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, $modal-default-z-index);
-
-  display: flex;
-  flex-direction: column;
-  width: var(--modal-width);
-  max-height: var(--modal-max-height);
-  background-color: var(--primary-background-color);
-  overflow: hidden;
-  border-radius: var(--border-radius-big);
-  box-shadow: var(--box-shadow-large);
-
-  &.withHeaderAction {
-    --top-actions-width: calc(var(--spacing-xl) * 2);
-  }
-
-  &.sizeSmall {
-    --modal-max-height: 50%;
-    --modal-width: 480px;
-  }
+  z-index: var(--monday-modal-z-index, 10000);
 
-  &.sizeMedium {
-    --modal-max-height: 80%;
-    --modal-width: 580px;
+  .overlay {
+    position: fixed;
+    inset: 0;
+    height: 100%;
+    background-color: var(--color-surface);
   }
 
-  &.sizeLarge {
-    --modal-max-height: 80%;
-    --modal-width: 840px;
+  .modal {
+    --top-actions-spacing: var(--spacing-large);
+    --top-actions-width: var(--spacing-xl);
+    --modal-inline-padding: var(--spacing-xl);
+
+    position: relative;
+    top: 50%;
+    left: 50%;
+
+    display: flex;
+    flex-direction: column;
+    width: var(--modal-width);
+    max-height: var(--modal-max-height);
+    background-color: var(--primary-background-color);
+    overflow: hidden;
+    border-radius: var(--border-radius-big);
+    box-shadow: var(--box-shadow-large);
+
+    &.withHeaderAction {
+      --top-actions-width: calc(var(--spacing-xl) * 2);
+    }
+
+    &.sizeSmall {
+      --modal-max-height: 50%;
+      --modal-width: 480px;
+    }
+
+    &.sizeMedium {
+      --modal-max-height: 80%;
+      --modal-width: 580px;
+    }
+
+    &.sizeLarge {
+      --modal-max-height: 80%;
+      --modal-width: 840px;
+    }
   }
 }
diff --git a/packages/core/src/components/Modal/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal/Modal.tsx
@@ -53,7 +53,7 @@ const Modal = forwardRef(
 
     const modalRef = useRef<HTMLDivElement>(null);
     const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);
-    const overlayRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
 
     const [titleId, setTitleId] = useState<string>();
     const [descriptionId, setDescriptionId] = useState<string>();
@@ -103,28 +103,25 @@ const Modal = forwardRef(
       : modalAnimationCenterPopVariants;
 
     const zIndexStyle = zIndex ? ({ "--monday-modal-z-index": zIndex } as React.CSSProperties) : {};
-    const modalStyle = { ...zIndexStyle, ...style };
 
     return (
       <AnimatePresence>
         {show && (
-          <LayerProvider layerRef={overlayRef}>
+          <LayerProvider layerRef={containerRef}>
             <ModalProvider value={contextValue}>
               {createPortal(
-                <>
-                  <motion.div
-                    ref={overlayRef}
-                    variants={modalAnimationOverlayVariants}
-                    initial="initial"
-                    animate="enter"
-                    exit="exit"
-                    data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
-                    className={styles.overlay}
-                    onClick={onBackdropClick}
-                    aria-hidden
-                    style={zIndexStyle}
-                  />
-                  <FocusLockComponent returnFocus>
+                <FocusLockComponent returnFocus>
+                  <div ref={containerRef} className={styles.container} style={zIndexStyle}>
+                    <motion.div
+                      variants={modalAnimationOverlayVariants}
+                      initial="initial"
+                      animate="enter"
+                      exit="exit"
+                      data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
+                      className={styles.overlay}
+                      onClick={onBackdropClick}
+                      aria-hidden
+                    />
                     <RemoveScroll forwardProps ref={modalMergedRef}>
                       <motion.div
                         variants={modalAnimationVariants}
@@ -144,7 +141,7 @@ const Modal = forwardRef(
                         aria-modal
                         aria-labelledby={ariaLabelledby || titleId}
                         aria-describedby={ariaDescribedby || descriptionId}
-                        style={modalStyle}
+                        style={style}
                         onKeyDown={onModalKeyDown}
                         tabIndex={-1}
                       >
@@ -157,8 +154,8 @@ const Modal = forwardRef(
                         />
                       </motion.div>
                     </RemoveScroll>
-                  </FocusLockComponent>
-                </>,
+                  </div>
+                </FocusLockComponent>,
                 portalTargetElement
               )}
             </ModalProvider>