fix: Modals should not open outside of the component

close #957;

src/component/NMRium.tsx

@@ -299,7 +299,7 @@ function NMRium({
           <div
             onMouseEnter={mouseEnterHandler}
             onMouseLeave={mouseLeaveHandler}
-            style={{ height: '100%' }}
+            style={{ height: '100%', position: 'relative' }}
           >
             {/* @ts-expect-error: TODO remove when HelpProvider is migrated */}
             <HelpProvider
@@ -377,7 +377,20 @@ function NMRium({
                                   </SplitPane>
                                 </DropZone>
                               </div>
-                              <div ref={elementsWraperRef} id="main-wrapper" />
+                              <div
+                                ref={elementsWraperRef}
+                                key={String(isFullscreen)}
+                                id="main-wrapper"
+                                style={{
+                                  position: 'absolute',
+                                  pointerEvents: 'none',
+                                  zIndex: 0,
+                                  left: 0,
+                                  right: 0,
+                                  top: 0,
+                                  bottom: 0,
+                                }}
+                              />
                             </div>
                           </SpinnerProvider>
                         </AssignmentProvider>

src/component/elements/popup/Alert/Provider.js

@@ -1,5 +1,12 @@
 import PropTypes from 'prop-types';
-import { Fragment, useState, useRef, useEffect, useCallback } from 'react';
+import {
+  Fragment,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react';
 import { createPortal } from 'react-dom';
 import { FaTimes } from 'react-icons/fa';
 import { TransitionGroup } from 'react-transition-group';
@@ -137,6 +144,18 @@ function Provider({
   );
 
   const alertsByPosition = groupBy(alerts, (alert) => alert.options.position);
+
+  const parentStyle = useMemo(() => {
+    return wrapperRef
+      ? wrapperRef.getBoundingClientRect()
+      : {
+          top: 0,
+          left: 0,
+          width: window.innerWidth,
+          height: window.innerHeight,
+        };
+  }, [wrapperRef]);
+
   return (
     <AlertProvider
       value={{ alerts, show, remove, removeAll, success, error, info }}
@@ -154,6 +173,7 @@ function Provider({
                   key={position}
                   options={{ position, zIndex: 999999 }}
                   component={Wrapper}
+                  containerStyle={parentStyle}
                   {...props}
                 >
                   {alertsByPosition[position]

src/component/elements/popup/Help/Provider.js

@@ -6,6 +6,7 @@ import {
   Fragment,
   useState,
   memo,
+  useMemo,
 } from 'react';
 import { createPortal } from 'react-dom';
 import { FaTimes } from 'react-icons/fa';
@@ -180,6 +181,17 @@ function Provider({
     clearTimeout(dealyTimeOut);
   }, []);
 
+  const parentStyle = useMemo(() => {
+    return wrapperRef
+      ? wrapperRef.getBoundingClientRect()
+      : {
+          top: 0,
+          left: 0,
+          width: window.innerWidth,
+          height: window.innerHeight,
+        };
+  }, [wrapperRef]);
+
   const [helpState, dispatch] = useReducer(helpReducer, {
     ...initState,
     data,
@@ -204,22 +216,26 @@ function Provider({
                   appear
                   key={_position}
                   options={{ position, containerStyle }}
+                  containerStyle={parentStyle}
                   component={Wrapper}
                 >
                   {modalsByPosition[_position]
                     ? modalsByPosition[_position].map((modal) => (
                         <Transition
                           type={transition}
                           key={modal.id}
-                          transitionStyles={transitionStyles}
+                          transitionStyles={{
+                            ...transitionStyles,
+                            default: { width: '400px', height: '400px' },
+                          }}
                         >
                           <Rnd
                             style={{
                               margin: offset,
                               ...styles.outerContainer,
                             }}
                             default={{
-                              x: -200,
+                              x: 0,
                               y: 0,
                               width: 400,
                               height: 400,

src/component/elements/popup/Modal/Provider.js

@@ -7,6 +7,7 @@ import {
   useCallback,
   Fragment,
   cloneElement,
+  useMemo,
 } from 'react';
 import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';
@@ -62,6 +63,17 @@ function Provider({
     setModal(null);
   };
 
+  const parentStyle = useMemo(() => {
+    return wrapperRef
+      ? wrapperRef.getBoundingClientRect()
+      : {
+          top: 0,
+          left: 0,
+          width: window.innerWidth,
+          height: window.innerHeight,
+        };
+  }, [wrapperRef]);
+
   const closeHandler = useCallback(() => {
     remove();
   }, []);
@@ -116,12 +128,12 @@ function Provider({
   }, [closeHandler]);
 
   const styles = css`
-    position: fixed;
+    position: absolute;
+    left: 0;
     top: 0;
-    right: 0;
     bottom: 0;
-    left: 0;
-    z-index: 1;
+    right: 0;
+    z-index: 0;
 
     .handle {
       cursor: move;
@@ -167,6 +179,7 @@ function Provider({
                       ? modal.options.position
                       : position,
                   }}
+                  containerStyle={parentStyle}
                   component={Wrapper}
                 >
                   <Transition
@@ -175,7 +188,17 @@ function Provider({
                         ? modal.options.transition
                         : transition
                     }
-                    transitionStyles={transitionStyles}
+                    transitionStyles={{
+                      ...transitionStyles,
+                      default: {
+                        width: modal.options.width
+                          ? `${modal.options.width}px`
+                          : 'auto',
+                      },
+                      height: modal.options.height
+                        ? `${modal.options.height}px`
+                        : 'auto',
+                    }}
                     key={modal.id}
                   >
                     <Rnd

src/component/elements/popup/Transition.js

@@ -31,7 +31,6 @@ const defaultTransitionStyles = {
 
 const Transtion = ({ children, type, transitionStyles, ...props }) => {
   const ref = useRef(null);
-
   return (
     <ContainerTransition nodeRef={ref} {...props} timeout={duration}>
       {(state) => (
@@ -40,6 +39,7 @@ const Transtion = ({ children, type, transitionStyles, ...props }) => {
           style={{
             ...defaultStyle[type],
             ...transitionStyles[type][state],
+            ...transitionStyles.default,
           }}
         >
           {children}

src/component/elements/popup/Wrapper.js

@@ -2,70 +2,92 @@ import { useMemo } from 'react';
 
 import { positions } from './options';
 
-export const getStyles = (position) => {
+export const getStyles = (position, props) => {
   const initialStyles = {
-    left: 0,
+    // left: 0,
     position: 'fixed',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'column',
-    width: '100%',
+    // width: '100%',
     pointerEvents: 'none',
+    overflow: 'visible',
+    ...(props.containerStyle
+      ? {
+          top: `${props.containerStyle.top}px`,
+          left: `${props.containerStyle.left}px`,
+          height: `${props.containerStyle.height}px`,
+          width: `${props.containerStyle.width}px`,
+        }
+      : { width: '100%', height: '100%' }),
   };
 
   switch (position) {
     case positions.TOP_LEFT:
       return {
         ...initialStyles,
-        top: 0,
+        // top: 0,
+        justifyContent: 'flex-start',
         alignItems: 'flex-start',
       };
     case positions.TOP_CENTER:
       return {
         ...initialStyles,
-        top: 0,
+        justifyContent: 'flex-start',
+
+        // top: 0,
       };
     case positions.TOP_RIGHT:
       return {
         ...initialStyles,
-        top: 0,
+        // top: 0,
+        justifyContent: 'flex-start',
         alignItems: 'flex-end',
       };
     case positions.MIDDLE_LEFT:
       return {
         ...initialStyles,
-        top: '50%',
+        // top: '50%',
+        justifyContent: 'center',
         alignItems: 'flex-start',
       };
     case positions.MIDDLE: {
       return {
         ...initialStyles,
-        top: '50%',
+        // top: '50%',
+        justifyContent: 'center',
       };
     }
     case positions.MIDDLE_RIGHT:
       return {
         ...initialStyles,
-        top: '50%',
+        // top: '50%',
+        justifyContent: 'center',
+
         alignItems: 'flex-end',
       };
 
     case positions.BOTTOM_LEFT:
       return {
         ...initialStyles,
-        bottom: 0,
+        // bottom: 0,
+        justifyContent: 'flex-end',
+
         alignItems: 'flex-start',
       };
     case positions.BOTTOM_CENTER:
       return {
         ...initialStyles,
-        bottom: 0,
+        // bottom: 0,
+        justifyContent: 'flex-end',
       };
     case positions.BOTTOM_RIGHT:
       return {
         ...initialStyles,
-        bottom: 0,
+        // bottom: 0,
+        justifyContent: 'flex-end',
+
         alignItems: 'flex-end',
       };
 
@@ -75,16 +97,12 @@ export const getStyles = (position) => {
   }
 };
 
-function Wrapper({
-  children,
-  options: { position, containerStyle },
-  ...props
-}) {
-  const styles = useMemo(() => getStyles(position), [position]);
+function Wrapper({ children, options: { position }, ...props }) {
+  const styles = useMemo(() => getStyles(position, props), [position, props]);
 
   return (
     children.length > 0 && (
-      <div style={{ ...styles, ...containerStyle }} {...props}>
+      <div style={styles} {...props}>
         {children}
       </div>
     )