react-science 0.21.0 → 0.21.1

package/lib/app-data/loaders/loadMeasurements.js

@@ -28,8 +28,7 @@ function computeMinMax(measurement) {
                 // TODO: should we accept empty data?
                 return;
             }
-            if (typeof variable.min === 'undefined' ||
-                typeof variable.max === 'undefined') {
+            if (variable.min === undefined || variable.max === undefined) {
                 const { min, max } = (0, ml_spectra_processing_1.xMinMaxValues)(variable.data);
                 variable.min = min;
                 variable.max = max;

package/lib/components/fullscreen/FullscreenContext.js

@@ -6,7 +6,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const fullscreenContextInit = {
     isFullScreen: false,
-    toggle: () => { },
+    toggle: () => {
+        // empty
+    },
 };
 const FullscreenContext = (0, react_1.createContext)(fullscreenContextInit);
 function useFullscreen() {

package/lib/components/modal/ConfirmModal.js

@@ -7,9 +7,9 @@ exports.ConfirmModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const __1 = require("..");
+const Portal_1 = require("../root-layout/Portal");
 const useDialog_1 = require("./useDialog");
 const ConfirmModalDialog = styled_1.default.dialog `
-  display: flex;
   position: fixed;
   background-color: transparent;
 
@@ -17,7 +17,7 @@ const ConfirmModalDialog = styled_1.default.dialog `
     background-color: rgba(113, 113, 122, 0.75);
   }
 `;
-const ConfirmModalOpened = styled_1.default.div `
+const ConfirmModalContents = styled_1.default.div `
   position: relative;
   display: flex;
   flex-direction: column;
@@ -27,7 +27,7 @@ const ConfirmModalOpened = styled_1.default.div `
   border-width: 1px;
   border-color: transparent;
   border-radius: 0.5rem;
-  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 0, 0 0px 16px rgba(0, 0, 0, 0.3);
   border-top: 10px solid ${({ headerColor }) => headerColor};
 `;
 const ConfirmModalChildrenRoot = styled_1.default.div `
@@ -50,12 +50,15 @@ function ConfirmModal(props) {
         requestCloseOnBackdrop,
         onRequestClose,
     });
-    return ((0, jsx_runtime_1.jsx)(ConfirmModalDialog, { ref: ref, onClick: onClick, children: isOpen ? ((0, jsx_runtime_1.jsxs)(ConfirmModalOpened, { headerColor: headerColor, style: { maxWidth }, children: [(0, jsx_runtime_1.jsx)(ConfirmModalChildrenRoot, { headerColor: headerColor, children: children }), (0, jsx_runtime_1.jsxs)(ConfirmModalFooter, { children: [(0, jsx_runtime_1.jsx)(__1.Button, { onClick: onConfirm, backgroundColor: {
-                                basic: 'hsla(243deg, 75%, 58%, 1)',
-                                hover: 'hsla(245deg, 58%, 50%, 1)',
-                            }, color: { basic: 'white' }, children: saveText }), (0, jsx_runtime_1.jsx)(__1.Button, { onClick: onCancel, backgroundColor: {
-                                basic: 'hsla(0deg, 72%, 50%, 1)',
-                                hover: 'hsla(0deg, 73%, 42%, 1)',
-                            }, color: { basic: 'white' }, children: cancelText })] })] })) : null }));
+    if (!isOpen) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(ConfirmModalDialog, { ref: ref, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(ConfirmModalContents, { headerColor: headerColor, style: { maxWidth }, children: [(0, jsx_runtime_1.jsx)(ConfirmModalChildrenRoot, { headerColor: headerColor, children: children }), (0, jsx_runtime_1.jsxs)(ConfirmModalFooter, { children: [(0, jsx_runtime_1.jsx)(__1.Button, { onClick: onConfirm, backgroundColor: {
+                                    basic: 'hsla(243deg, 75%, 58%, 1)',
+                                    hover: 'hsla(245deg, 58%, 50%, 1)',
+                                }, color: { basic: 'white' }, children: saveText }), (0, jsx_runtime_1.jsx)(__1.Button, { onClick: onCancel, backgroundColor: {
+                                    basic: 'hsla(0deg, 72%, 50%, 1)',
+                                    hover: 'hsla(0deg, 73%, 42%, 1)',
+                                }, color: { basic: 'white' }, children: cancelText })] })] }) }) }));
 }
 exports.ConfirmModal = ConfirmModal;

package/lib/components/modal/Modal.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_1 = __importDefault(require("@emotion/styled"));
+const Portal_1 = require("../root-layout/Portal");
 const ModalCloseButton_1 = __importDefault(require("./ModalCloseButton"));
 const useDialog_1 = require("./useDialog");
 const DialogRoot = styled_1.default.dialog `
-  display: flex;
   position: fixed;
   background-color: transparent;
 
@@ -17,7 +17,7 @@ const DialogRoot = styled_1.default.dialog `
     background-color: rgba(113, 113, 122, 0.75);
   }
 `;
-const DialogOpened = styled_1.default.div `
+const DialogContents = styled_1.default.div `
   position: relative;
   display: flex;
   flex-direction: column;
@@ -26,7 +26,7 @@ const DialogOpened = styled_1.default.div `
   border-width: 1px;
   border-color: transparent;
   border-radius: 0.5rem;
-  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 0, 0 0px 16px rgba(0, 0, 0, 0.3);
 `;
 const ModalHeaderStyled = styled_1.default.div `
   display: flex;
@@ -52,11 +52,14 @@ function Modal(props) {
         requestCloseOnBackdrop,
         onRequestClose,
     });
-    return ((0, jsx_runtime_1.jsx)(DialogRoot, { ref: ref, onClick: onClick, children: isOpen ? ((0, jsx_runtime_1.jsxs)(DialogOpened, { style: {
-                maxWidth,
-                height: height || 'max-content',
-                width: width || '100%',
-            }, children: [children, hasCloseButton && (0, jsx_runtime_1.jsx)(ModalCloseButton_1.default, { onClick: onRequestClose })] })) : null }));
+    if (!isOpen) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(DialogRoot, { ref: ref, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(DialogContents, { style: {
+                    maxWidth,
+                    height: height || 'max-content',
+                    width: width || '100%',
+                }, children: [children, hasCloseButton && (0, jsx_runtime_1.jsx)(ModalCloseButton_1.default, { onClick: onRequestClose })] }) }) }));
 }
 exports.Modal = Modal;
 Modal.Header = function ModalHeader(props) {

package/lib-esm/app-data/loaders/loadMeasurements.js

@@ -24,8 +24,7 @@ function computeMinMax(measurement) {
                 // TODO: should we accept empty data?
                 return;
             }
-            if (typeof variable.min === 'undefined' ||
-                typeof variable.max === 'undefined') {
+            if (variable.min === undefined || variable.max === undefined) {
                 const { min, max } = xMinMaxValues(variable.data);
                 variable.min = min;
                 variable.max = max;

package/lib-esm/app-data/loaders/loadMeasurements.js.map

@@ -1 +1 @@
-{"version":3,"file":"loadMeasurements.js","sourceRoot":"","sources":["../../../src/app-data/loaders/loadMeasurements.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAgB,OAAO,EAA8B,MAAM,UAAU,CAAC;AAE7E,OAAO,EAEL,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AASrC,MAAM,CAAC,KAAK,UAAU,gBAAgB,CACpC,cAA8B,EAC9B,UAAuB,EAAE;IAEzB,MAAM,YAAY,GAA0B,EAAE,CAAC;IAC/C,IAAI,IAAI,GAAgB,EAAE,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC;IAChE,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;QAC5B,MAAM,UAAU,GAAG,MAAM,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC3E,KAAK,MAAM,EAAE,OAAO,EAAE,IAAI,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE;YACnD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,aAAa,CAAC,KAAK,CAAC,CAAC;aACtB;SACF;QACD,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;QAC/B,iBAAiB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;KAC7C;IACD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;AAChC,CAAC;AAED,SAAS,aAAa,CAAC,WAA4B;IACjD,KAAK,MAAM,KAAK,IAAI,WAAW,CAAC,IAAI,EAAE;QACpC,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;YACrD,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,qCAAqC;gBACrC,OAAO;aACR;YACD,IACE,OAAO,QAAQ,CAAC,GAAG,KAAK,WAAW;gBACnC,OAAO,QAAQ,CAAC,GAAG,KAAK,WAAW,EACnC;gBACA,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBAClD,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;gBACnB,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;aACpB;SACF;KACF;AACH,CAAC"}
+{"version":3,"file":"loadMeasurements.js","sourceRoot":"","sources":["../../../src/app-data/loaders/loadMeasurements.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAgB,OAAO,EAA8B,MAAM,UAAU,CAAC;AAE7E,OAAO,EAEL,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AASrC,MAAM,CAAC,KAAK,UAAU,gBAAgB,CACpC,cAA8B,EAC9B,UAAuB,EAAE;IAEzB,MAAM,YAAY,GAA0B,EAAE,CAAC;IAC/C,IAAI,IAAI,GAAgB,EAAE,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC;IAChE,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;QAC5B,MAAM,UAAU,GAAG,MAAM,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC3E,KAAK,MAAM,EAAE,OAAO,EAAE,IAAI,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE;YACnD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,aAAa,CAAC,KAAK,CAAC,CAAC;aACtB;SACF;QACD,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;QAC/B,iBAAiB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;KAC7C;IACD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;AAChC,CAAC;AAED,SAAS,aAAa,CAAC,WAA4B;IACjD,KAAK,MAAM,KAAK,IAAI,WAAW,CAAC,IAAI,EAAE;QACpC,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;YACrD,IAAI,QAAQ,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,qCAAqC;gBACrC,OAAO;aACR;YACD,IAAI,QAAQ,CAAC,GAAG,KAAK,SAAS,IAAI,QAAQ,CAAC,GAAG,KAAK,SAAS,EAAE;gBAC5D,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBAClD,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;gBACnB,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;aACpB;SACF;KACF;AACH,CAAC"}

package/lib-esm/components/fullscreen/FullscreenContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FullscreenContext.d.ts","sourceRoot":"","sources":["../../../src/components/fullscreen/FullscreenContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,SAAS,EAMV,MAAM,OAAO,CAAC;AAUf,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,UAAU,eAAe;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,WAAY,SAAQ,eAAe;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAOD,wBAAgB,aAAa,gBAE5B;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,eAYxD"}
+{"version":3,"file":"FullscreenContext.d.ts","sourceRoot":"","sources":["../../../src/components/fullscreen/FullscreenContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,SAAS,EAMV,MAAM,OAAO,CAAC;AAUf,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,UAAU,eAAe;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,WAAY,SAAQ,eAAe;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AASD,wBAAgB,aAAa,gBAE5B;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,eAYxD"}

package/lib-esm/components/fullscreen/FullscreenContext.js

@@ -3,7 +3,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useReducer, useRef, } from 'react';
 const fullscreenContextInit = {
     isFullScreen: false,
-    toggle: () => { },
+    toggle: () => {
+        // empty
+    },
 };
 const FullscreenContext = createContext(fullscreenContextInit);
 export function useFullscreen() {

package/lib-esm/components/fullscreen/FullscreenContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullscreenContext.js","sourceRoot":"","sources":["../../../src/components/fullscreen/FullscreenContext.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FullscreenContext.js","sourceRoot":"","sources":["../../../src/components/fullscreen/FullscreenContext.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/modal/ConfirmModal.d.ts

@@ -12,6 +12,6 @@ interface ConfirmModalProps {
     headerColor: string;
     maxWidth?: number;
 }
-export declare function ConfirmModal(props: ConfirmModalProps): JSX.Element;
+export declare function ConfirmModal(props: ConfirmModalProps): JSX.Element | null;
 export {};
 //# sourceMappingURL=ConfirmModal.d.ts.map

package/lib-esm/components/modal/ConfirmModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0CD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAwDpD"}
+{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAyCD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,sBA4DpD"}

package/lib-esm/components/modal/ConfirmModal.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@emotion/styled';
 import { Button } from '..';
+import { Portal } from '../root-layout/Portal';
 import { useDialog } from './useDialog';
 const ConfirmModalDialog = styled.dialog `
-  display: flex;
   position: fixed;
   background-color: transparent;
 
@@ -11,7 +11,7 @@ const ConfirmModalDialog = styled.dialog `
     background-color: rgba(113, 113, 122, 0.75);
   }
 `;
-const ConfirmModalOpened = styled.div `
+const ConfirmModalContents = styled.div `
   position: relative;
   display: flex;
   flex-direction: column;
@@ -21,7 +21,7 @@ const ConfirmModalOpened = styled.div `
   border-width: 1px;
   border-color: transparent;
   border-radius: 0.5rem;
-  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 0, 0 0px 16px rgba(0, 0, 0, 0.3);
   border-top: 10px solid ${({ headerColor }) => headerColor};
 `;
 const ConfirmModalChildrenRoot = styled.div `
@@ -44,12 +44,15 @@ export function ConfirmModal(props) {
         requestCloseOnBackdrop,
         onRequestClose,
     });
-    return (_jsx(ConfirmModalDialog, { ref: ref, onClick: onClick, children: isOpen ? (_jsxs(ConfirmModalOpened, { headerColor: headerColor, style: { maxWidth }, children: [_jsx(ConfirmModalChildrenRoot, { headerColor: headerColor, children: children }), _jsxs(ConfirmModalFooter, { children: [_jsx(Button, { onClick: onConfirm, backgroundColor: {
-                                basic: 'hsla(243deg, 75%, 58%, 1)',
-                                hover: 'hsla(245deg, 58%, 50%, 1)',
-                            }, color: { basic: 'white' }, children: saveText }), _jsx(Button, { onClick: onCancel, backgroundColor: {
-                                basic: 'hsla(0deg, 72%, 50%, 1)',
-                                hover: 'hsla(0deg, 73%, 42%, 1)',
-                            }, color: { basic: 'white' }, children: cancelText })] })] })) : null }));
+    if (!isOpen) {
+        return null;
+    }
+    return (_jsx(Portal, { children: _jsx(ConfirmModalDialog, { ref: ref, onClick: onClick, children: _jsxs(ConfirmModalContents, { headerColor: headerColor, style: { maxWidth }, children: [_jsx(ConfirmModalChildrenRoot, { headerColor: headerColor, children: children }), _jsxs(ConfirmModalFooter, { children: [_jsx(Button, { onClick: onConfirm, backgroundColor: {
+                                    basic: 'hsla(243deg, 75%, 58%, 1)',
+                                    hover: 'hsla(245deg, 58%, 50%, 1)',
+                                }, color: { basic: 'white' }, children: saveText }), _jsx(Button, { onClick: onCancel, backgroundColor: {
+                                    basic: 'hsla(0deg, 72%, 50%, 1)',
+                                    hover: 'hsla(0deg, 73%, 42%, 1)',
+                                }, color: { basic: 'white' }, children: cancelText })] })] }) }) }));
 }
 //# sourceMappingURL=ConfirmModal.js.map

package/lib-esm/components/modal/ConfirmModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgBxC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;CAQvC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAEnC;;;;;;;;;;;2BAWyB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;CAC1D,CAAC;AAEF,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAyB;WACzD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;;;CAG1C,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMpC,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,UAAU,GAAG,QAAQ,EACrB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,QAAQ,GAAG,cAAc,EACzB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACjC,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,YAC3C,MAAM,CAAC,CAAC,CAAC,CACR,MAAC,kBAAkB,IAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,aAC/D,KAAC,wBAAwB,IAAC,WAAW,EAAE,WAAW,YAC/C,QAAQ,GACgB,EAE3B,MAAC,kBAAkB,eACjB,KAAC,MAAM,IACL,OAAO,EAAE,SAAS,EAClB,eAAe,EAAE;gCACf,KAAK,EAAE,2BAA2B;gCAClC,KAAK,EAAE,2BAA2B;6BACnC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,QAAQ,GACF,EACT,KAAC,MAAM,IACL,OAAO,EAAE,QAAQ,EACjB,eAAe,EAAE;gCACf,KAAK,EAAE,yBAAyB;gCAChC,KAAK,EAAE,yBAAyB;6BACjC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,UAAU,GACJ,IACU,IACF,CACtB,CAAC,CAAC,CAAC,IAAI,GACW,CACtB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgBxC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;CAOvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAErC;;;;;;;;;;;2BAWyB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;CAC1D,CAAC;AAEF,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAyB;WACzD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW;;;CAG1C,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMpC,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,UAAU,GAAG,QAAQ,EACrB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,QAAQ,GAAG,cAAc,EACzB,SAAS,EACT,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACjC,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,KAAC,MAAM,cACL,KAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,YAC5C,MAAC,oBAAoB,IAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,aACjE,KAAC,wBAAwB,IAAC,WAAW,EAAE,WAAW,YAC/C,QAAQ,GACgB,EAE3B,MAAC,kBAAkB,eACjB,KAAC,MAAM,IACL,OAAO,EAAE,SAAS,EAClB,eAAe,EAAE;oCACf,KAAK,EAAE,2BAA2B;oCAClC,KAAK,EAAE,2BAA2B;iCACnC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,QAAQ,GACF,EACT,KAAC,MAAM,IACL,OAAO,EAAE,QAAQ,EACjB,eAAe,EAAE;oCACf,KAAK,EAAE,yBAAyB;oCAChC,KAAK,EAAE,yBAAyB;iCACjC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,UAAU,GACJ,IACU,IACA,GACJ,GACd,CACV,CAAC;AACJ,CAAC"}

package/lib-esm/components/modal/Modal.d.ts

@@ -10,7 +10,7 @@ export interface ModalProps {
     width?: number;
     height?: number;
 }
-export declare function Modal(props: ModalProps): JSX.Element;
+export declare function Modal(props: ModalProps): JSX.Element | null;
 export declare namespace Modal {
     var Header: (props: {
         children: ReactNode;

package/lib-esm/components/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2CD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAoCtC;yBApCe,KAAK"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOrD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0CD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,sBAwCtC;yBAxCe,KAAK"}

package/lib-esm/components/modal/Modal.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@emotion/styled';
+import { Portal } from '../root-layout/Portal';
 import ModalCloseButton from './ModalCloseButton';
 import { useDialog } from './useDialog';
 const DialogRoot = styled.dialog `
-  display: flex;
   position: fixed;
   background-color: transparent;
 
@@ -11,7 +11,7 @@ const DialogRoot = styled.dialog `
     background-color: rgba(113, 113, 122, 0.75);
   }
 `;
-const DialogOpened = styled.div `
+const DialogContents = styled.div `
   position: relative;
   display: flex;
   flex-direction: column;
@@ -20,7 +20,7 @@ const DialogOpened = styled.div `
   border-width: 1px;
   border-color: transparent;
   border-radius: 0.5rem;
-  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 0, 0 0px 16px rgba(0, 0, 0, 0.3);
 `;
 const ModalHeaderStyled = styled.div `
   display: flex;
@@ -46,11 +46,14 @@ export function Modal(props) {
         requestCloseOnBackdrop,
         onRequestClose,
     });
-    return (_jsx(DialogRoot, { ref: ref, onClick: onClick, children: isOpen ? (_jsxs(DialogOpened, { style: {
-                maxWidth,
-                height: height || 'max-content',
-                width: width || '100%',
-            }, children: [children, hasCloseButton && _jsx(ModalCloseButton, { onClick: onRequestClose })] })) : null }));
+    if (!isOpen) {
+        return null;
+    }
+    return (_jsx(Portal, { children: _jsx(DialogRoot, { ref: ref, onClick: onClick, children: _jsxs(DialogContents, { style: {
+                    maxWidth,
+                    height: height || 'max-content',
+                    width: width || '100%',
+                }, children: [children, hasCloseButton && _jsx(ModalCloseButton, { onClick: onRequestClose })] }) }) }));
 }
 Modal.Header = function ModalHeader(props) {
     return _jsx(ModalHeaderStyled, { children: props.children });

package/lib-esm/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAcxC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;CAQ/B,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAU9B,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,MAAM,EACN,cAAc,EACd,cAAc,GAAG,IAAI,EACrB,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACjC,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,YACnC,MAAM,CAAC,CAAC,CAAC,CACR,MAAC,YAAY,IACX,KAAK,EAAE;gBACL,QAAQ;gBACR,MAAM,EAAE,MAAM,IAAI,aAAa;gBAC/B,KAAK,EAAE,KAAK,IAAI,MAAM;aACvB,aAEA,QAAQ,EACR,cAAc,IAAI,KAAC,gBAAgB,IAAC,OAAO,EAAE,cAAc,GAAI,IACnD,CAChB,CAAC,CAAC,CAAC,IAAI,GACG,CACd,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,CAAC;AACjE,CAAC,CAAC;AAEF,KAAK,CAAC,IAAI,GAAG,SAAS,SAAS,CAAC,KAA8B;IAC5D,OAAO,KAAC,eAAe,cAAE,KAAK,CAAC,QAAQ,GAAmB,CAAC;AAC7D,CAAC,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,CAAC;AACjE,CAAC,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAcxC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;CAO/B,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUhC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EACJ,MAAM,EACN,cAAc,EACd,cAAc,GAAG,IAAI,EACrB,sBAAsB,GAAG,IAAI,EAC7B,iBAAiB,GAAG,IAAI,EACxB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,GACP,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;QACjC,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,KAAC,MAAM,cACL,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,YACpC,MAAC,cAAc,IACb,KAAK,EAAE;oBACL,QAAQ;oBACR,MAAM,EAAE,MAAM,IAAI,aAAa;oBAC/B,KAAK,EAAE,KAAK,IAAI,MAAM;iBACvB,aAEA,QAAQ,EACR,cAAc,IAAI,KAAC,gBAAgB,IAAC,OAAO,EAAE,cAAc,GAAI,IACjD,GACN,GACN,CACV,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,CAAC;AACjE,CAAC,CAAC;AAEF,KAAK,CAAC,IAAI,GAAG,SAAS,SAAS,CAAC,KAA8B;IAC5D,OAAO,KAAC,eAAe,cAAE,KAAK,CAAC,QAAQ,GAAmB,CAAC;AAC7D,CAAC,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,SAAS,WAAW,CAAC,KAA8B;IAChE,OAAO,KAAC,iBAAiB,cAAE,KAAK,CAAC,QAAQ,GAAqB,CAAC;AACjE,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "description": "React components to build analysis UI",
   "exports": {
     "./app": {
@@ -50,7 +50,7 @@
     "test-only": "vitest run --coverage "
   },
   "volta": {
-    "node": "18.14.2"
+    "node": "18.15.0"
   },
   "overrides": {
     "react": "^18.2.0",
@@ -66,24 +66,24 @@
     "@headlessui/react": "^1.7.13",
     "@lukeed/uuid": "^2.0.0",
     "@popperjs/core": "^2.11.6",
-    "@tanstack/react-query": "^4.24.10",
+    "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-table": "^8.7.9",
     "biologic-converter": "^0.6.0",
     "cheminfo-types": "^1.4.0",
     "d3-scale-chromatic": "^3.0.0",
     "filelist-utils": "^1.8.0",
     "immer": "^9.0.19",
-    "jcampconverter": "^9.0.7",
+    "jcampconverter": "^9.1.0",
     "lodash": "^4.17.21",
     "ml-gsd": "^12.1.2",
     "ml-peak-shape-generator": "^4.1.2",
     "ml-signal-processing": "^1.0.2",
     "ml-spectra-processing": "^12.0.0",
-    "ms-spectrum": "^2.2.0",
+    "ms-spectrum": "^2.3.0",
     "netcdfjs": "^2.0.2",
     "react-d3-utils": "^1.0.0",
     "react-dropzone": "^14.2.3",
-    "react-error-boundary": "^3.1.4",
+    "react-error-boundary": "^4.0.2",
     "react-icons": "^4.8.0",
     "react-inspector": "^6.0.1",
     "react-kbs": "^2.1.1",
@@ -96,11 +96,11 @@
     "wdf-parser": "^0.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/eslint-parser": "^7.19.1",
-    "@ladle/react": "^2.9.0",
-    "@playwright/experimental-ct-react": "^1.31.2",
-    "@playwright/test": "^1.31.2",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
+    "@ladle/react": "^2.10.2",
+    "@playwright/experimental-ct-react": "^1.32.0",
+    "@playwright/test": "^1.32.0",
     "@types/babel__core": "^7.20.0",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/lodash": "^4.14.191",
@@ -108,19 +108,19 @@
     "@types/react-dom": "^18.0.11",
     "@types/react-inspector": "^4.0.2",
     "@vitejs/plugin-react": "^3.1.0",
-    "@vitest/coverage-c8": "^0.29.2",
+    "@vitest/coverage-c8": "^0.29.7",
     "cheminfo-font": "^1.9.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.35.0",
-    "eslint-config-zakodium": "^7.0.0",
-    "prettier": "^2.8.4",
+    "eslint": "^8.36.0",
+    "eslint-config-zakodium": "^7.1.0",
+    "prettier": "^2.8.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ocl": "^5.0.0",
-    "rimraf": "^4.3.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4",
-    "vitest": "^0.29.2"
+    "rimraf": "^4.4.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.2.1",
+    "vitest": "^0.29.7"
   },
   "repository": {
     "type": "git",

package/src/app-data/loaders/loadMeasurements.ts

@@ -42,10 +42,7 @@ function computeMinMax(measurement: MeasurementBase) {
         // TODO: should we accept empty data?
         return;
       }
-      if (
-        typeof variable.min === 'undefined' ||
-        typeof variable.max === 'undefined'
-      ) {
+      if (variable.min === undefined || variable.max === undefined) {
         const { min, max } = xMinMaxValues(variable.data);
         variable.min = min;
         variable.max = max;

package/src/components/fullscreen/FullscreenContext.tsx

@@ -29,7 +29,9 @@ interface ContextType extends FullscreenState {
 }
 const fullscreenContextInit = {
   isFullScreen: false,
-  toggle: () => {},
+  toggle: () => {
+    // empty
+  },
 };
 const FullscreenContext = createContext<ContextType>(fullscreenContextInit);
 

package/src/components/modal/ConfirmModal.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
 
 import { Button } from '..';
+import { Portal } from '../root-layout/Portal';
 
 import { useDialog } from './useDialog';
 
@@ -20,7 +21,6 @@ interface ConfirmModalProps {
 }
 
 const ConfirmModalDialog = styled.dialog`
-  display: flex;
   position: fixed;
   background-color: transparent;
 
@@ -29,7 +29,7 @@ const ConfirmModalDialog = styled.dialog`
   }
 `;
 
-const ConfirmModalOpened = styled.div<{
+const ConfirmModalContents = styled.div<{
   headerColor: string;
 }>`
   position: relative;
@@ -41,7 +41,7 @@ const ConfirmModalOpened = styled.div<{
   border-width: 1px;
   border-color: transparent;
   border-radius: 0.5rem;
-  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 0, 0 0px 16px rgba(0, 0, 0, 0.3);
   border-top: 10px solid ${({ headerColor }) => headerColor};
 `;
 
@@ -81,10 +81,14 @@ export function ConfirmModal(props: ConfirmModalProps) {
     onRequestClose,
   });
 
+  if (!isOpen) {
+    return null;
+  }
+
   return (
-    <ConfirmModalDialog ref={ref} onClick={onClick}>
-      {isOpen ? (
-        <ConfirmModalOpened headerColor={headerColor} style={{ maxWidth }}>
+    <Portal>
+      <ConfirmModalDialog ref={ref} onClick={onClick}>
+        <ConfirmModalContents headerColor={headerColor} style={{ maxWidth }}>
           <ConfirmModalChildrenRoot headerColor={headerColor}>
             {children}
           </ConfirmModalChildrenRoot>
@@ -111,8 +115,8 @@ export function ConfirmModal(props: ConfirmModalProps) {
               {cancelText}
             </Button>
           </ConfirmModalFooter>
-        </ConfirmModalOpened>
-      ) : null}
-    </ConfirmModalDialog>
+        </ConfirmModalContents>
+      </ConfirmModalDialog>
+    </Portal>
   );
 }

package/src/components/modal/Modal.tsx

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 import type { ReactElement, ReactNode } from 'react';
 
+import { Portal } from '../root-layout/Portal';
+
 import ModalCloseButton from './ModalCloseButton';
 import { useDialog } from './useDialog';
 
@@ -17,7 +19,6 @@ export interface ModalProps {
 }
 
 const DialogRoot = styled.dialog`
-  display: flex;
   position: fixed;
   background-color: transparent;
 
@@ -26,7 +27,7 @@ const DialogRoot = styled.dialog`
   }
 `;
 
-const DialogOpened = styled.div`
+const DialogContents = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -35,7 +36,7 @@ const DialogOpened = styled.div`
   border-width: 1px;
   border-color: transparent;
   border-radius: 0.5rem;
-  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 0, 0 0px 16px rgba(0, 0, 0, 0.3);
 `;
 
 const ModalHeaderStyled = styled.div`
@@ -77,10 +78,14 @@ export function Modal(props: ModalProps) {
     onRequestClose,
   });
 
+  if (!isOpen) {
+    return null;
+  }
+
   return (
-    <DialogRoot ref={ref} onClick={onClick}>
-      {isOpen ? (
-        <DialogOpened
+    <Portal>
+      <DialogRoot ref={ref} onClick={onClick}>
+        <DialogContents
           style={{
             maxWidth,
             height: height || 'max-content',
@@ -89,9 +94,9 @@ export function Modal(props: ModalProps) {
         >
           {children}
           {hasCloseButton && <ModalCloseButton onClick={onRequestClose} />}
-        </DialogOpened>
-      ) : null}
-    </DialogRoot>
+        </DialogContents>
+      </DialogRoot>
+    </Portal>
   );
 }