react-science 0.24.1 → 0.24.3

package/README.md

@@ -1,6 +1,6 @@
 # react-science
 
-React components to build analysis UI.
+React components to build scientific applications UI.
 
 <h3 align="center">
 

package/lib/components/hooks/useOnClickOutside.js

@@ -14,6 +14,8 @@ function useOnClickOutside(ref, handler) {
             }
             handler(event);
         };
+        if (shadowElement === null)
+            return;
         shadowElement.addEventListener('mousedown', listener);
         shadowElement.addEventListener('touchstart', listener);
         return () => {

package/lib/components/modal/ConfirmModal.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("react");
 const __1 = require("..");
 const Portal_1 = require("../root-layout/Portal");
+const RootLayoutContext_1 = require("../root-layout/RootLayoutContext");
 const useDialog_1 = require("./useDialog");
 const ConfirmModalDialog = styled_1.default.dialog `
   background-color: transparent;
@@ -42,21 +44,28 @@ const ConfirmModalFooter = styled_1.default.div `
 `;
 function ConfirmModal(props) {
     const { isOpen, saveText = 'Save', cancelText = 'Cancel', headerColor, maxWidth, onRequestClose, onCancel = onRequestClose, onConfirm, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, } = props;
+    const dialogRef = (0, react_1.useRef)(null);
     const dialogProps = (0, useDialog_1.useDialog)({
+        dialogRef,
         isOpen,
         requestCloseOnEsc,
         requestCloseOnBackdrop,
         onRequestClose,
     });
+    const [portalDomNode, setPortalDomNode] = (0, react_1.useState)(null);
+    const dialogCallbackRef = (0, react_1.useCallback)((node) => {
+        setPortalDomNode(node);
+    }, []);
+    (0, react_1.useImperativeHandle)(dialogCallbackRef, () => dialogRef.current);
     if (!isOpen) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(ConfirmModalDialog, { ...dialogProps, 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 })] })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(ConfirmModalDialog, { ...dialogProps, ref: dialogRef, children: (0, jsx_runtime_1.jsx)(RootLayoutContext_1.RootLayoutProvider, { innerRef: portalDomNode, 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,7 +6,9 @@ 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 react_1 = require("react");
 const Portal_1 = require("../root-layout/Portal");
+const RootLayoutContext_1 = require("../root-layout/RootLayoutContext");
 const ModalCloseButton_1 = __importDefault(require("./ModalCloseButton"));
 const useDialog_1 = require("./useDialog");
 const DialogRoot = styled_1.default.dialog `
@@ -44,20 +46,27 @@ const ModalFooterStyled = styled_1.default.div `
 `;
 function Modal(props) {
     const { isOpen, onRequestClose, hasCloseButton = true, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, width, maxWidth, height, } = props;
+    const dialogRef = (0, react_1.useRef)(null);
     const dialogProps = (0, useDialog_1.useDialog)({
+        dialogRef,
         isOpen,
         requestCloseOnEsc,
         requestCloseOnBackdrop,
         onRequestClose,
     });
+    const [portalDomNode, setPortalDomNode] = (0, react_1.useState)(null);
+    const dialogCallbackRef = (0, react_1.useCallback)((node) => {
+        setPortalDomNode(node);
+    }, []);
+    (0, react_1.useImperativeHandle)(dialogCallbackRef, () => dialogRef.current);
     if (!isOpen) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(DialogRoot, { ...dialogProps, 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 })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(DialogRoot, { ...dialogProps, ref: dialogRef, children: (0, jsx_runtime_1.jsx)(RootLayoutContext_1.RootLayoutProvider, { innerRef: portalDomNode, 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/components/modal/useDialog.js

@@ -3,16 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialog = void 0;
 const react_1 = require("react");
 const react_kbs_1 = require("react-kbs");
-function useDialog({ isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onRequestClose, }) {
+function useDialog({ dialogRef, isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onRequestClose, }) {
     (0, react_kbs_1.useKbsDisableGlobal)(isOpen);
-    const dialogRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const dialog = dialogRef.current;
         if (dialog && isOpen) {
             dialog.showModal();
             return () => dialog.close();
         }
-    }, [isOpen]);
+    }, [dialogRef, isOpen]);
     const onCancel = (0, react_1.useCallback)((event) => {
         event.preventDefault();
         if (requestCloseOnEsc && onRequestClose) {
@@ -20,13 +19,23 @@ function useDialog({ isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onReques
         }
     }, [onRequestClose, requestCloseOnEsc]);
     const onClick = (0, react_1.useCallback)((event) => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        // Ref: https://stackoverflow.com/questions/25864259/how-to-close-the-new-html-dialog-tag-by-clicking-on-its-backdrop
+        const rect = dialog.getBoundingClientRect();
+        const isInDialog = rect.top <= event.clientY &&
+            event.clientY <= rect.top + rect.height &&
+            rect.left <= event.clientX &&
+            event.clientX <= rect.left + rect.width;
         event.stopPropagation();
         // Since the dialog has no size of itself, this condition is only
         // `true` when we click on the backdrop.
-        if (event.target === event.currentTarget && requestCloseOnBackdrop) {
+        if (!isInDialog && requestCloseOnBackdrop) {
             onRequestClose?.();
         }
-    }, [requestCloseOnBackdrop, onRequestClose]);
-    return { ref: dialogRef, onClick, onCancel };
+    }, [dialogRef, requestCloseOnBackdrop, onRequestClose]);
+    return { onClick, onCancel };
 }
 exports.useDialog = useDialog;

package/lib/components/root-layout/Portal.js

@@ -5,6 +5,9 @@ const react_dom_1 = require("react-dom");
 const RootLayoutContext_1 = require("./RootLayoutContext");
 function Portal(props) {
     const element = (0, RootLayoutContext_1.useRootLayoutContext)();
+    if (element === null) {
+        return null;
+    }
     return (0, react_dom_1.createPortal)(props.children, element);
 }
 exports.Portal = Portal;

package/lib/components/root-layout/RootLayoutContext.js

@@ -3,12 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RootLayoutProvider = exports.useRootLayoutContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const rootLayoutContext = (0, react_1.createContext)(null);
+const defaultPortalContext = typeof document === 'undefined' ? null : document.body;
+const rootLayoutContext = (0, react_1.createContext)(defaultPortalContext);
 function useRootLayoutContext() {
     const context = (0, react_1.useContext)(rootLayoutContext);
-    if (!context) {
-        throw new Error('RootLayoutContext was not found');
-    }
     return context;
 }
 exports.useRootLayoutContext = useRootLayoutContext;

package/lib/components/split-pane/SplitPane.js

@@ -86,6 +86,7 @@ function SplitPane(props) {
             display: 'flex',
             height: '100%',
             width: '100%',
+            [direction === 'horizontal' ? 'minWidth' : 'minHeight']: 0,
             flexDirection: direction === 'horizontal' ? 'row' : 'column',
         }, children: [(0, jsx_runtime_1.jsx)(SplitSide, { style: getSplitSideStyle('start'), children: children[0] }), (0, jsx_runtime_1.jsx)(Splitter, { onDoubleClick: handleToggle, onMouseDown: isFinalClosed ? undefined : onMouseDown, isFinalClosed: isFinalClosed, direction: direction, splitterRef: splitterRef }), (0, jsx_runtime_1.jsx)(SplitSide, { style: getSplitSideStyle('end'), children: children[1] })] }));
 }

package/lib-esm/components/hooks/useOnClickOutside.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7C,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,EACrD,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,QAuBhC"}
+{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7C,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,EACrD,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,QAyBhC"}

package/lib-esm/components/hooks/useOnClickOutside.js

@@ -11,6 +11,8 @@ export function useOnClickOutside(ref, handler) {
             }
             handler(event);
         };
+        if (shadowElement === null)
+            return;
         shadowElement.addEventListener('mousedown', listener);
         shadowElement.addEventListener('touchstart', listener);
         return () => {

package/lib-esm/components/hooks/useOnClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOnClickOutside.js","sourceRoot":"","sources":["../../../src/components/hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE,MAAM,UAAU,iBAAiB,CAC/B,GAAiB,EACjB,OAA+B;IAE/B,MAAM,aAAa,GAAG,oBAAoB,EAAE,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,8DAA8D;QAC9D,MAAM,QAAQ,GAAG,CAAC,KAAU,EAAE,EAAE;YAC9B,8DAA8D;YAC9D,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACtD,OAAO;aACR;YAED,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,CAAC;QAEF,aAAa,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACtD,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAEvD,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;YACzD,aAAa,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AACpC,CAAC"}
+{"version":3,"file":"useOnClickOutside.js","sourceRoot":"","sources":["../../../src/components/hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE,MAAM,UAAU,iBAAiB,CAC/B,GAAiB,EACjB,OAA+B;IAE/B,MAAM,aAAa,GAAG,oBAAoB,EAAE,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,8DAA8D;QAC9D,MAAM,QAAQ,GAAG,CAAC,KAAU,EAAE,EAAE;YAC9B,8DAA8D;YAC9D,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACtD,OAAO;aACR;YAED,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,CAAC;QAEF,IAAI,aAAa,KAAK,IAAI;YAAE,OAAO;QAEnC,aAAa,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACtD,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAEvD,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;YACzD,aAAa,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC5D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AACpC,CAAC"}

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;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;AAuCD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDA4DpD"}
+{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,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,kDA0EpD"}

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@emotion/styled';
+import { useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { Button } from '..';
 import { Portal } from '../root-layout/Portal';
+import { RootLayoutProvider } from '../root-layout/RootLayoutContext';
 import { useDialog } from './useDialog';
 const ConfirmModalDialog = styled.dialog `
   background-color: transparent;
@@ -36,21 +38,28 @@ const ConfirmModalFooter = styled.div `
 `;
 export function ConfirmModal(props) {
     const { isOpen, saveText = 'Save', cancelText = 'Cancel', headerColor, maxWidth, onRequestClose, onCancel = onRequestClose, onConfirm, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, } = props;
+    const dialogRef = useRef(null);
     const dialogProps = useDialog({
+        dialogRef,
         isOpen,
         requestCloseOnEsc,
         requestCloseOnBackdrop,
         onRequestClose,
     });
+    const [portalDomNode, setPortalDomNode] = useState(null);
+    const dialogCallbackRef = useCallback((node) => {
+        setPortalDomNode(node);
+    }, []);
+    useImperativeHandle(dialogCallbackRef, () => dialogRef.current);
     if (!isOpen) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(ConfirmModalDialog, { ...dialogProps, 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 })] })] }) }) }));
+    return (_jsx(Portal, { children: _jsx(ConfirmModalDialog, { ...dialogProps, ref: dialogRef, children: _jsx(RootLayoutProvider, { innerRef: portalDomNode, 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;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;;;;;;CAMvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAErC;;;;;;;;;;2BAUyB,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,WAAW,GAAG,SAAS,CAAC;QAC5B,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,OAAK,WAAW,YACjC,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"}
+{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../src/components/modal/ConfirmModal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgBxC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;CAMvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAErC;;;;;;;;;;2BAUyB,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;AAIF,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,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,SAAS,CAAC;QAC5B,SAAS;QACT,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IACH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACrC,QAAQ,CAAyB,IAAI,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,IAA4B,EAAE,EAAE;QACrE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,mBAAmB,CACjB,iBAAiB,EACjB,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CACxB,CAAC;IAEF,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,KAAC,MAAM,cACL,KAAC,kBAAkB,OAAK,WAAW,EAAE,GAAG,EAAE,SAAS,YACjD,KAAC,kBAAkB,IAAC,QAAQ,EAAE,aAAa,YACzC,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;wCACf,KAAK,EAAE,2BAA2B;wCAClC,KAAK,EAAE,2BAA2B;qCACnC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,QAAQ,GACF,EACT,KAAC,MAAM,IACL,OAAO,EAAE,QAAQ,EACjB,eAAe,EAAE;wCACf,KAAK,EAAE,yBAAyB;wCAChC,KAAK,EAAE,yBAAyB;qCACjC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,UAAU,GACJ,IACU,IACA,GACJ,GACF,GACd,CACV,CAAC;AACJ,CAAC"}

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;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;AAwCD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,kDAwCtC;yBAxCe,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;AASrD,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,kDAsDtC;yBAtDe,KAAK"}

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

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@emotion/styled';
+import { useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { Portal } from '../root-layout/Portal';
+import { RootLayoutProvider } from '../root-layout/RootLayoutContext';
 import ModalCloseButton from './ModalCloseButton';
 import { useDialog } from './useDialog';
 const DialogRoot = styled.dialog `
@@ -38,20 +40,27 @@ const ModalFooterStyled = styled.div `
 `;
 export function Modal(props) {
     const { isOpen, onRequestClose, hasCloseButton = true, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, width, maxWidth, height, } = props;
+    const dialogRef = useRef(null);
     const dialogProps = useDialog({
+        dialogRef,
         isOpen,
         requestCloseOnEsc,
         requestCloseOnBackdrop,
         onRequestClose,
     });
+    const [portalDomNode, setPortalDomNode] = useState(null);
+    const dialogCallbackRef = useCallback((node) => {
+        setPortalDomNode(node);
+    }, []);
+    useImperativeHandle(dialogCallbackRef, () => dialogRef.current);
     if (!isOpen) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DialogRoot, { ...dialogProps, children: _jsxs(DialogContents, { style: {
-                    maxWidth,
-                    height: height || 'max-content',
-                    width: width || '100%',
-                }, children: [children, hasCloseButton && _jsx(ModalCloseButton, { onClick: onRequestClose })] }) }) }));
+    return (_jsx(Portal, { children: _jsx(DialogRoot, { ...dialogProps, ref: dialogRef, children: _jsx(RootLayoutProvider, { innerRef: portalDomNode, 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,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;;;;;;CAM/B,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAShC,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,WAAW,GAAG,SAAS,CAAC;QAC5B,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,OAAK,WAAW,YACzB,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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAcxC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;CAM/B,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAShC,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;AAIF,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,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,SAAS,CAAC;QAC5B,SAAS;QACT,MAAM;QACN,iBAAiB;QACjB,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IACH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACrC,QAAQ,CAAyB,IAAI,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,IAA4B,EAAE,EAAE;QACrE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,mBAAmB,CACjB,iBAAiB,EACjB,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CACxB,CAAC;IAEF,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,KAAC,MAAM,cACL,KAAC,UAAU,OAAK,WAAW,EAAE,GAAG,EAAE,SAAS,YACzC,KAAC,kBAAkB,IAAC,QAAQ,EAAE,aAAa,YACzC,MAAC,cAAc,IACb,KAAK,EAAE;wBACL,QAAQ;wBACR,MAAM,EAAE,MAAM,IAAI,aAAa;wBAC/B,KAAK,EAAE,KAAK,IAAI,MAAM;qBACvB,aAEA,QAAQ,EACR,cAAc,IAAI,KAAC,gBAAgB,IAAC,OAAO,EAAE,cAAc,GAAI,IACjD,GACE,GACV,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/lib-esm/components/modal/useDialog.d.ts

@@ -1,11 +1,11 @@
-import { MouseEventHandler, ReactEventHandler } from 'react';
-export declare function useDialog({ isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onRequestClose, }: {
+import { MouseEventHandler, ReactEventHandler, RefObject } from 'react';
+export declare function useDialog({ dialogRef, isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onRequestClose, }: {
+    dialogRef: RefObject<HTMLDialogElement>;
     isOpen: boolean;
     requestCloseOnEsc: boolean;
     requestCloseOnBackdrop: boolean;
     onRequestClose?: () => void;
 }): {
-    ref: import("react").RefObject<HTMLDialogElement>;
     onClick: MouseEventHandler<HTMLDialogElement>;
     onCancel: ReactEventHandler<HTMLDialogElement>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useDialog.d.ts","sourceRoot":"","sources":["../../../src/components/modal/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAGf,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,GACf,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,sBAAsB,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;;;;EAoCA"}
+{"version":3,"file":"useDialog.d.ts","sourceRoot":"","sources":["../../../src/components/modal/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EAGV,MAAM,OAAO,CAAC;AAGf,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,MAAM,EACN,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,GACf,EAAE;IACD,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,sBAAsB,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;;;EA+CA"}

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

@@ -1,15 +1,14 @@
-import { useCallback, useEffect, useRef, } from 'react';
+import { useCallback, useEffect, } from 'react';
 import { useKbsDisableGlobal } from 'react-kbs';
-export function useDialog({ isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onRequestClose, }) {
+export function useDialog({ dialogRef, isOpen, requestCloseOnEsc, requestCloseOnBackdrop, onRequestClose, }) {
     useKbsDisableGlobal(isOpen);
-    const dialogRef = useRef(null);
     useEffect(() => {
         const dialog = dialogRef.current;
         if (dialog && isOpen) {
             dialog.showModal();
             return () => dialog.close();
         }
-    }, [isOpen]);
+    }, [dialogRef, isOpen]);
     const onCancel = useCallback((event) => {
         event.preventDefault();
         if (requestCloseOnEsc && onRequestClose) {
@@ -17,13 +16,23 @@ export function useDialog({ isOpen, requestCloseOnEsc, requestCloseOnBackdrop, o
         }
     }, [onRequestClose, requestCloseOnEsc]);
     const onClick = useCallback((event) => {
+        const dialog = dialogRef.current;
+        if (!dialog) {
+            return;
+        }
+        // Ref: https://stackoverflow.com/questions/25864259/how-to-close-the-new-html-dialog-tag-by-clicking-on-its-backdrop
+        const rect = dialog.getBoundingClientRect();
+        const isInDialog = rect.top <= event.clientY &&
+            event.clientY <= rect.top + rect.height &&
+            rect.left <= event.clientX &&
+            event.clientX <= rect.left + rect.width;
         event.stopPropagation();
         // Since the dialog has no size of itself, this condition is only
         // `true` when we click on the backdrop.
-        if (event.target === event.currentTarget && requestCloseOnBackdrop) {
+        if (!isInDialog && requestCloseOnBackdrop) {
             onRequestClose?.();
         }
-    }, [requestCloseOnBackdrop, onRequestClose]);
-    return { ref: dialogRef, onClick, onCancel };
+    }, [dialogRef, requestCloseOnBackdrop, onRequestClose]);
+    return { onClick, onCancel };
 }
 //# sourceMappingURL=useDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useDialog.js","sourceRoot":"","sources":["../../../src/components/modal/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,SAAS,EACT,MAAM,GACP,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,EACN,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,GAMf;IACC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAE5B,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,MAAM,IAAI,MAAM,EAAE;YACpB,MAAM,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAK,EAAE,EAAE;QACR,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,iBAAiB,IAAI,cAAc,EAAE;YACvC,cAAc,EAAE,CAAC;SAClB;IACH,CAAC,EACD,CAAC,cAAc,EAAE,iBAAiB,CAAC,CACpC,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAK,EAAE,EAAE;QACR,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,iEAAiE;QACjE,wCAAwC;QACxC,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,IAAI,sBAAsB,EAAE;YAClE,cAAc,EAAE,EAAE,CAAC;SACpB;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,cAAc,CAAC,CACzC,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;AAC/C,CAAC"}
+{"version":3,"file":"useDialog.js","sourceRoot":"","sources":["../../../src/components/modal/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,WAAW,EACX,SAAS,GACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,EACT,MAAM,EACN,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,GAOf;IACC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,MAAM,IAAI,MAAM,EAAE;YACpB,MAAM,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAExB,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAK,EAAE,EAAE;QACR,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,iBAAiB,IAAI,cAAc,EAAE;YACvC,cAAc,EAAE,CAAC;SAClB;IACH,CAAC,EACD,CAAC,cAAc,EAAE,iBAAiB,CAAC,CACpC,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QAED,qHAAqH;QACrH,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,UAAU,GACd,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO;YACzB,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;YACvC,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO;YAC1B,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;QAE1C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,iEAAiE;QACjE,wCAAwC;QACxC,IAAI,CAAC,UAAU,IAAI,sBAAsB,EAAE;YACzC,cAAc,EAAE,EAAE,CAAC;SACpB;IACH,CAAC,EACD,CAAC,SAAS,EAAE,sBAAsB,EAAE,cAAc,CAAC,CACpD,CAAC;IAEF,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;AAC/B,CAAC"}

package/lib-esm/components/root-layout/Portal.d.ts

@@ -2,6 +2,6 @@ import type { ReactNode } from 'react';
 interface PortalProps {
     children: ReactNode;
 }
-export declare function Portal(props: PortalProps): import("react").ReactPortal;
+export declare function Portal(props: PortalProps): import("react").ReactPortal | null;
 export {};
 //# sourceMappingURL=Portal.d.ts.map

package/lib-esm/components/root-layout/Portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../src/components/root-layout/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAGxC"}
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../src/components/root-layout/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,sCAMxC"}

package/lib-esm/components/root-layout/Portal.js

@@ -2,6 +2,9 @@ import { createPortal } from 'react-dom';
 import { useRootLayoutContext } from './RootLayoutContext';
 export function Portal(props) {
     const element = useRootLayoutContext();
+    if (element === null) {
+        return null;
+    }
     return createPortal(props.children, element);
 }
 //# sourceMappingURL=Portal.js.map

package/lib-esm/components/root-layout/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../src/components/root-layout/Portal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,OAAO,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC/C,CAAC"}
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../src/components/root-layout/Portal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM3D,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,IAAI,CAAC;KACb;IACD,OAAO,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC/C,CAAC"}

package/lib-esm/components/root-layout/RootLayoutContext.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare function useRootLayoutContext(): HTMLElement;
+export declare function useRootLayoutContext(): HTMLElement | null;
 export declare function RootLayoutProvider(props: {
     children: ReactNode;
     innerRef: HTMLElement | null;

package/lib-esm/components/root-layout/RootLayoutContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RootLayoutContext.d.ts","sourceRoot":"","sources":["../../../src/components/root-layout/RootLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAI7D,wBAAgB,oBAAoB,gBAOnC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B,2CAMA"}
+{"version":3,"file":"RootLayoutContext.d.ts","sourceRoot":"","sources":["../../../src/components/root-layout/RootLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAS7D,wBAAgB,oBAAoB,uBAGnC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B,2CAMA"}

package/lib-esm/components/root-layout/RootLayoutContext.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-const rootLayoutContext = createContext(null);
+const defaultPortalContext = typeof document === 'undefined' ? null : document.body;
+const rootLayoutContext = createContext(defaultPortalContext);
 export function useRootLayoutContext() {
     const context = useContext(rootLayoutContext);
-    if (!context) {
-        throw new Error('RootLayoutContext was not found');
-    }
     return context;
 }
 export function RootLayoutProvider(props) {

package/lib-esm/components/root-layout/RootLayoutContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"RootLayoutContext.js","sourceRoot":"","sources":["../../../src/components/root-layout/RootLayoutContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,iBAAiB,GAAG,aAAa,CAAqB,IAAI,CAAC,CAAC;AAElE,MAAM,UAAU,oBAAoB;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;KACpD;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,KAGlC;IACC,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,YAC9C,KAAK,CAAC,QAAQ,GACY,CAC9B,CAAC;AACJ,CAAC"}
+{"version":3,"file":"RootLayoutContext.js","sourceRoot":"","sources":["../../../src/components/root-layout/RootLayoutContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,oBAAoB,GACxB,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAEzD,MAAM,iBAAiB,GAAG,aAAa,CACrC,oBAAoB,CACrB,CAAC;AAEF,MAAM,UAAU,oBAAoB;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,KAGlC;IACC,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,YAC9C,KAAK,CAAC,QAAQ,GACY,CAC9B,CAAC;AACJ,CAAC"}

package/lib-esm/components/split-pane/SplitPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../../src/components/split-pane/SplitPane.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,SAAS,EAOV,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,MAAM,IAAI,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,IAAI,CAAC;AAEvC,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;CAClC;AAID,wBAAgB,mBAAmB,YAElC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,oDAoH9C"}
+{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../../src/components/split-pane/SplitPane.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,SAAS,EAOV,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,MAAM,IAAI,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,IAAI,CAAC;AAEvC,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;CAClC;AAID,wBAAgB,mBAAmB,YAElC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,oDAqH9C"}

package/lib-esm/components/split-pane/SplitPane.js

@@ -79,6 +79,7 @@ export function SplitPane(props) {
             display: 'flex',
             height: '100%',
             width: '100%',
+            [direction === 'horizontal' ? 'minWidth' : 'minHeight']: 0,
             flexDirection: direction === 'horizontal' ? 'row' : 'column',
         }, children: [_jsx(SplitSide, { style: getSplitSideStyle('start'), children: children[0] }), _jsx(Splitter, { onDoubleClick: handleToggle, onMouseDown: isFinalClosed ? undefined : onMouseDown, isFinalClosed: isFinalClosed, direction: direction, splitterRef: splitterRef }), _jsx(SplitSide, { style: getSplitSideStyle('end'), children: children[1] })] }));
 }

package/lib-esm/components/split-pane/SplitPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.js","sourceRoot":"","sources":["../../../src/components/split-pane/SplitPane.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SplitPane.js","sourceRoot":"","sources":["../../../src/components/split-pane/SplitPane.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAEL,aAAa,EAGb,UAAU,EACV,MAAM,EACN,QAAQ,EAER,UAAU,EACV,SAAS,GACV,MAAM,OAAO,CAAC;AACf,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAqDtD,MAAM,gBAAgB,GAAG,aAAa,CAAU,KAAK,CAAC,CAAC;AAEvD,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,SAAS,GAAG,YAAY,EACxB,cAAc,GAAG,OAAO,EACxB,IAAI,GAAG,KAAK,EACZ,MAAM,GAAG,KAAK,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IAE/D,2EAA2E;IAC3E,6EAA6E;IAC7E,MAAM,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAClD,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAC7C,CAAC;IAEF,yDAAyD;IACzD,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAE1D,MAAM,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,MAAM,KAAK,SAAS,EAAE;YAC/B,IAAI,MAAM,EAAE;gBACV,SAAS,EAAE,CAAC;aACb;iBAAM;gBACL,QAAQ,EAAE,CAAC;aACZ;SACF;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAElC,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,EAAE,WAAW,EAAE,GAAG,gBAAgB,CAAC;QACvC,cAAc;QACd,SAAS;QACT,WAAW;QACX,QAAQ;QACR,YAAY,CAAC,KAAK;YAChB,KAAK,EAAE,CAAC;YACR,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;QACD,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,iBAAiB,EAAkB,CAAC;IAErD,IAAI,aAAa,GAAG,YAAY,CAAC;IACjC,IACE,CAAC,aAAa;QACd,WAAW,KAAK,IAAI;QACpB,CAAC,UAAU;QACX,QAAQ,CAAC,KAAK,KAAK,SAAS;QAC5B,QAAQ,CAAC,MAAM,KAAK,SAAS,EAC7B;QACA,IAAI,SAAS,KAAK,YAAY,EAAE;YAC9B,aAAa,GAAG,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC;SAC9C;aAAM;YACL,aAAa,GAAG,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC;SAC/C;KACF;IAED,SAAS,YAAY;QACnB,KAAK,EAAE,CAAC;QACR,IAAI,aAAa,EAAE;YACjB,QAAQ,EAAE,CAAC;YACX,IAAI,YAAY,IAAI,QAAQ,EAAE;gBAC5B,QAAQ,CAAC,KAAK,CAAC,CAAC;aACjB;SACF;aAAM;YACL,SAAS,EAAE,CAAC;YACZ,IAAI,CAAC,YAAY,IAAI,QAAQ,EAAE;gBAC7B,QAAQ,CAAC,IAAI,CAAC,CAAC;aAChB;SACF;IACH,CAAC;IAED,SAAS,iBAAiB,CAAC,IAAmB;QAC5C,OAAO,YAAY,CACjB,aAAa,EACb,cAAc,KAAK,IAAI,EACvB,SAAS,EACT,SAAS,EACT,QAAQ,CACT,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eACE,GAAG,EAAE,QAAQ,CAAC,GAAG,EACjB,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;YACb,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC;YAC1D,aAAa,EAAE,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;SAC7D,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,YAAG,QAAQ,CAAC,CAAC,CAAC,GAAa,EAEvE,KAAC,QAAQ,IACP,aAAa,EAAE,YAAY,EAC3B,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EACpD,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,GACxB,EAEF,KAAC,SAAS,IAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,YAAG,QAAQ,CAAC,CAAC,CAAC,GAAa,IACjE,CACP,CAAC;AACJ,CAAC;AAUD,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,GACzE,KAAK,CAAC;IACR,OAAO,CACL,cACE,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,iBAAiB,CAAC,SAAS,EAAE,CAAC,aAAa,CAAC,EACjD,GAAG,EAAE,WAAW,YAEhB,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,YAChC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,oCAAc,CAAC,CAAC,CAAC,oCAAc,GACzD,GACF,CACP,CAAC;AACJ,CAAC;AAOD,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAElC,OAAO,cAAK,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAO,CAAC;AAC7C,CAAC;AAED,SAAS,SAAS,CAAC,IAAY;IAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACtC,0CAA0C;IAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAkB,CAAC;IAE1D,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AACvB,CAAC;AAED,MAAM,QAAQ,GAAG,GAAG,CAAC;AACrB,SAAS,aAAa,CAAC,OAAe;IACpC,OAAO,IAAI,GAAG,CAAC;IACf,OAAO,CAAC,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG,OAAO,CAAC;AACnD,CAAC;AAED,SAAS,YAAY,CACnB,QAAiB,EACjB,gBAAyB,EACzB,SAA6B,EAC7B,IAAY,EACZ,IAAmB;IAEnB,MAAM,YAAY,GAAG,SAAS,KAAK,YAAY,CAAC;IAChD,IAAI,QAAQ,EAAE;QACZ,OAAO,gBAAgB;YACrB,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE;YACrB,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;KACzC;SAAM,IAAI,IAAI,KAAK,GAAG,EAAE;QACvB,OAAO,gBAAgB;YACrB,CAAC,CAAC;gBACE,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,MAAM;aAChB;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO;gBACnC,OAAO,EAAE,MAAM;gBACf,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC;aAC7C,CAAC;KACP;SAAM;QACL,OAAO,gBAAgB;YACrB,CAAC,CAAC;gBACE,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI;gBACzC,OAAO,EAAE,MAAM;aAChB;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,MAAM;gBACf,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC;aAC7C,CAAC;KACP;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,SAA6B,EAAE,OAAgB;IACxE,OAAO,GAAG,CAAC;QACT,SAAS,KAAK,YAAY,IAAI;YAC5B,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;YACzC,KAAK,EAAE,MAAM;SACd;QACD,SAAS,KAAK,UAAU,IAAI;YAC1B,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;SAC1C;QACD;YACE,eAAe,EAAE,oBAAoB;YACrC,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,MAAM;YAClB,QAAQ,EAAE,EAAE;YACZ,QAAQ,EAAE;gBACR,eAAe,EAAE,oBAAoB;aACtC;SACF;KACF,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-science",
-  "version": "0.24.1",
-  "description": "React components to build analysis UI",
+  "version": "0.24.3",
+  "description": "React components to build scientific applications UI",
   "exports": {
     "./app": {
       "types": "./lib-esm/app/index.d.ts",

package/src/components/hooks/useOnClickOutside.ts

@@ -19,6 +19,8 @@ export function useOnClickOutside<T extends Node = Node>(
       handler(event);
     };
 
+    if (shadowElement === null) return;
+
     shadowElement.addEventListener('mousedown', listener);
     shadowElement.addEventListener('touchstart', listener);
 

package/src/components/modal/ConfirmModal.tsx

@@ -1,8 +1,10 @@
 import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
+import { useCallback, useImperativeHandle, useRef, useState } from 'react';
 
 import { Button } from '..';
 import { Portal } from '../root-layout/Portal';
+import { RootLayoutProvider } from '../root-layout/RootLayoutContext';
 
 import { useDialog } from './useDialog';
 
@@ -57,6 +59,8 @@ const ConfirmModalFooter = styled.div`
   gap: 10px;
 `;
 
+type MaybeHTMLDialogElement = HTMLDialogElement | null;
+
 export function ConfirmModal(props: ConfirmModalProps) {
   const {
     isOpen,
@@ -72,12 +76,24 @@ export function ConfirmModal(props: ConfirmModalProps) {
     children,
   } = props;
 
+  const dialogRef = useRef<HTMLDialogElement>(null);
   const dialogProps = useDialog({
+    dialogRef,
     isOpen,
     requestCloseOnEsc,
     requestCloseOnBackdrop,
     onRequestClose,
   });
+  const [portalDomNode, setPortalDomNode] =
+    useState<MaybeHTMLDialogElement>(null);
+  const dialogCallbackRef = useCallback((node: MaybeHTMLDialogElement) => {
+    setPortalDomNode(node);
+  }, []);
+
+  useImperativeHandle<MaybeHTMLDialogElement, MaybeHTMLDialogElement>(
+    dialogCallbackRef,
+    () => dialogRef.current,
+  );
 
   if (!isOpen) {
     return null;
@@ -85,35 +101,37 @@ export function ConfirmModal(props: ConfirmModalProps) {
 
   return (
     <Portal>
-      <ConfirmModalDialog {...dialogProps}>
-        <ConfirmModalContents headerColor={headerColor} style={{ maxWidth }}>
-          <ConfirmModalChildrenRoot headerColor={headerColor}>
-            {children}
-          </ConfirmModalChildrenRoot>
+      <ConfirmModalDialog {...dialogProps} ref={dialogRef}>
+        <RootLayoutProvider innerRef={portalDomNode}>
+          <ConfirmModalContents headerColor={headerColor} style={{ maxWidth }}>
+            <ConfirmModalChildrenRoot headerColor={headerColor}>
+              {children}
+            </ConfirmModalChildrenRoot>
 
-          <ConfirmModalFooter>
-            <Button
-              onClick={onConfirm}
-              backgroundColor={{
-                basic: 'hsla(243deg, 75%, 58%, 1)',
-                hover: 'hsla(245deg, 58%, 50%, 1)',
-              }}
-              color={{ basic: 'white' }}
-            >
-              {saveText}
-            </Button>
-            <Button
-              onClick={onCancel}
-              backgroundColor={{
-                basic: 'hsla(0deg, 72%, 50%, 1)',
-                hover: 'hsla(0deg, 73%, 42%, 1)',
-              }}
-              color={{ basic: 'white' }}
-            >
-              {cancelText}
-            </Button>
-          </ConfirmModalFooter>
-        </ConfirmModalContents>
+            <ConfirmModalFooter>
+              <Button
+                onClick={onConfirm}
+                backgroundColor={{
+                  basic: 'hsla(243deg, 75%, 58%, 1)',
+                  hover: 'hsla(245deg, 58%, 50%, 1)',
+                }}
+                color={{ basic: 'white' }}
+              >
+                {saveText}
+              </Button>
+              <Button
+                onClick={onCancel}
+                backgroundColor={{
+                  basic: 'hsla(0deg, 72%, 50%, 1)',
+                  hover: 'hsla(0deg, 73%, 42%, 1)',
+                }}
+                color={{ basic: 'white' }}
+              >
+                {cancelText}
+              </Button>
+            </ConfirmModalFooter>
+          </ConfirmModalContents>
+        </RootLayoutProvider>
       </ConfirmModalDialog>
     </Portal>
   );

package/src/components/modal/Modal.tsx

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 import type { ReactElement, ReactNode } from 'react';
+import { useCallback, useImperativeHandle, useRef, useState } from 'react';
 
 import { Portal } from '../root-layout/Portal';
+import { RootLayoutProvider } from '../root-layout/RootLayoutContext';
 
 import ModalCloseButton from './ModalCloseButton';
 import { useDialog } from './useDialog';
@@ -56,6 +58,8 @@ const ModalFooterStyled = styled.div`
   padding: 10px 20px 10px 20px;
 `;
 
+type MaybeHTMLDialogElement = HTMLDialogElement | null;
+
 export function Modal(props: ModalProps) {
   const {
     isOpen,
@@ -69,12 +73,24 @@ export function Modal(props: ModalProps) {
     height,
   } = props;
 
+  const dialogRef = useRef<HTMLDialogElement>(null);
   const dialogProps = useDialog({
+    dialogRef,
     isOpen,
     requestCloseOnEsc,
     requestCloseOnBackdrop,
     onRequestClose,
   });
+  const [portalDomNode, setPortalDomNode] =
+    useState<MaybeHTMLDialogElement>(null);
+  const dialogCallbackRef = useCallback((node: MaybeHTMLDialogElement) => {
+    setPortalDomNode(node);
+  }, []);
+
+  useImperativeHandle<MaybeHTMLDialogElement, MaybeHTMLDialogElement>(
+    dialogCallbackRef,
+    () => dialogRef.current,
+  );
 
   if (!isOpen) {
     return null;
@@ -82,17 +98,19 @@ export function Modal(props: ModalProps) {
 
   return (
     <Portal>
-      <DialogRoot {...dialogProps}>
-        <DialogContents
-          style={{
-            maxWidth,
-            height: height || 'max-content',
-            width: width || '100%',
-          }}
-        >
-          {children}
-          {hasCloseButton && <ModalCloseButton onClick={onRequestClose} />}
-        </DialogContents>
+      <DialogRoot {...dialogProps} ref={dialogRef}>
+        <RootLayoutProvider innerRef={portalDomNode}>
+          <DialogContents
+            style={{
+              maxWidth,
+              height: height || 'max-content',
+              width: width || '100%',
+            }}
+          >
+            {children}
+            {hasCloseButton && <ModalCloseButton onClick={onRequestClose} />}
+          </DialogContents>
+        </RootLayoutProvider>
       </DialogRoot>
     </Portal>
   );

package/src/components/modal/useDialog.ts

@@ -1,18 +1,20 @@
 import {
   MouseEventHandler,
   ReactEventHandler,
+  RefObject,
   useCallback,
   useEffect,
-  useRef,
 } from 'react';
 import { useKbsDisableGlobal } from 'react-kbs';
 
 export function useDialog({
+  dialogRef,
   isOpen,
   requestCloseOnEsc,
   requestCloseOnBackdrop,
   onRequestClose,
 }: {
+  dialogRef: RefObject<HTMLDialogElement>;
   isOpen: boolean;
   requestCloseOnEsc: boolean;
   requestCloseOnBackdrop: boolean;
@@ -20,15 +22,13 @@ export function useDialog({
 }) {
   useKbsDisableGlobal(isOpen);
 
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   useEffect(() => {
     const dialog = dialogRef.current;
     if (dialog && isOpen) {
       dialog.showModal();
       return () => dialog.close();
     }
-  }, [isOpen]);
+  }, [dialogRef, isOpen]);
 
   const onCancel = useCallback<ReactEventHandler<HTMLDialogElement>>(
     (event) => {
@@ -42,15 +42,28 @@ export function useDialog({
 
   const onClick = useCallback<MouseEventHandler<HTMLDialogElement>>(
     (event) => {
+      const dialog = dialogRef.current;
+      if (!dialog) {
+        return;
+      }
+
+      // Ref: https://stackoverflow.com/questions/25864259/how-to-close-the-new-html-dialog-tag-by-clicking-on-its-backdrop
+      const rect = dialog.getBoundingClientRect();
+      const isInDialog =
+        rect.top <= event.clientY &&
+        event.clientY <= rect.top + rect.height &&
+        rect.left <= event.clientX &&
+        event.clientX <= rect.left + rect.width;
+
       event.stopPropagation();
       // Since the dialog has no size of itself, this condition is only
       // `true` when we click on the backdrop.
-      if (event.target === event.currentTarget && requestCloseOnBackdrop) {
+      if (!isInDialog && requestCloseOnBackdrop) {
         onRequestClose?.();
       }
     },
-    [requestCloseOnBackdrop, onRequestClose],
+    [dialogRef, requestCloseOnBackdrop, onRequestClose],
   );
 
-  return { ref: dialogRef, onClick, onCancel };
+  return { onClick, onCancel };
 }

package/src/components/root-layout/Portal.tsx

@@ -9,5 +9,8 @@ interface PortalProps {
 
 export function Portal(props: PortalProps) {
   const element = useRootLayoutContext();
+  if (element === null) {
+    return null;
+  }
   return createPortal(props.children, element);
 }

package/src/components/root-layout/RootLayoutContext.tsx

@@ -1,13 +1,14 @@
 import { createContext, ReactNode, useContext } from 'react';
 
-const rootLayoutContext = createContext<HTMLElement | null>(null);
+const defaultPortalContext =
+  typeof document === 'undefined' ? null : document.body;
+
+const rootLayoutContext = createContext<HTMLElement | null>(
+  defaultPortalContext,
+);
 
 export function useRootLayoutContext() {
   const context = useContext(rootLayoutContext);
-  if (!context) {
-    throw new Error('RootLayoutContext was not found');
-  }
-
   return context;
 }
 

package/src/components/split-pane/SplitPane.tsx

@@ -175,6 +175,7 @@ export function SplitPane(props: SplitPaneProps) {
         display: 'flex',
         height: '100%',
         width: '100%',
+        [direction === 'horizontal' ? 'minWidth' : 'minHeight']: 0,
         flexDirection: direction === 'horizontal' ? 'row' : 'column',
       }}
     >