@jbrowse/core/esm/ui/Dialog.js

JBrowse 2 core libraries used by plugins

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isValidElement } from 'react';
import CloseIcon from '@mui/icons-material/Close';
import { Dialog as MUIDialog, DialogTitle, Divider, IconButton, ScopedCssBaseline, ThemeProvider, createTheme, useTheme, } from '@mui/material';
import { observer } from 'mobx-react';
import { ErrorBoundary } from "./ErrorBoundary.js";
import ErrorMessage from "./ErrorMessage.js";
import SanitizedHTML from "./SanitizedHTML.js";
import { makeStyles } from "../util/tss-react/index.js";
const useStyles = makeStyles()(theme => ({
    closeButton: {
        position: 'absolute',
        right: theme.spacing(1),
        top: theme.spacing(1),
        color: theme.palette.grey[500],
    },
    errorBox: {
        width: 800,
        margin: 40,
    },
}));
function DialogError({ error }) {
    const { classes } = useStyles();
    return (_jsx("div", { className: classes.errorBox, children: _jsx(ErrorMessage, { error: error }) }));
}
const Dialog = observer(function Dialog(props) {
    const { classes } = useStyles();
    const { titleNode, ...rest } = props;
    const { title, header, children, onClose } = rest;
    const theme = useTheme();
    return (_jsx(MUIDialog, { ...rest, children: _jsxs(ScopedCssBaseline, { children: [isValidElement(header) ? (header) : (_jsxs(DialogTitle, { children: [titleNode || _jsx(SanitizedHTML, { html: title || '' }), onClose ? (_jsx(IconButton, { className: classes.closeButton, onClick: event => {
                                onClose(event, 'backdropClick');
                            }, children: _jsx(CloseIcon, {}) })) : null] })), _jsx(Divider, {}), _jsx(ErrorBoundary, { FallbackComponent: DialogError, children: _jsx(ThemeProvider, { theme: createTheme(theme, {
                            components: {
                                MuiInputBase: {
                                    styleOverrides: {
                                        input: {
                                            boxSizing: 'content-box!important',
                                        },
                                    },
                                },
                            },
                        }), children: children }) })] }) }));
});
export default Dialog;