@jbrowse/core 2.18.0 → 3.0.1

package/ui/Menu.js

@@ -1,33 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItemEndDecoration = MenuItemEndDecoration;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ArrowRight_1 = __importDefault(require("@mui/icons-material/ArrowRight"));
 const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
 const CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
@@ -67,31 +45,31 @@ function MenuItemEndDecoration(props) {
     let icon;
     switch (type) {
         case 'subMenu': {
-            icon = react_1.default.createElement(ArrowRight_1.default, { color: "action" });
+            icon = (0, jsx_runtime_1.jsx)(ArrowRight_1.default, { color: "action" });
             break;
         }
         case 'checkbox': {
             if (checked) {
                 const color = disabled ? 'inherit' : undefined;
-                icon = react_1.default.createElement(CheckBox_1.default, { color: color });
+                icon = (0, jsx_runtime_1.jsx)(CheckBox_1.default, { color: color });
             }
             else {
-                icon = react_1.default.createElement(CheckBoxOutlineBlank_1.default, { color: "action" });
+                icon = (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { color: "action" });
             }
             break;
         }
         case 'radio': {
             if (checked) {
                 const color = disabled ? 'inherit' : undefined;
-                icon = react_1.default.createElement(RadioButtonChecked_1.default, { color: color });
+                icon = (0, jsx_runtime_1.jsx)(RadioButtonChecked_1.default, { color: color });
             }
             else {
-                icon = react_1.default.createElement(RadioButtonUnchecked_1.default, { color: "action" });
+                icon = (0, jsx_runtime_1.jsx)(RadioButtonUnchecked_1.default, { color: "action" });
             }
             break;
         }
     }
-    return react_1.default.createElement("div", { className: classes.menuItemEndDecoration }, icon);
+    return (0, jsx_runtime_1.jsx)("div", { className: classes.menuItemEndDecoration, children: icon });
 }
 function checkIfValid(m) {
     return m.type !== 'divider' && m.type !== 'subHeader' && !m.disabled;
@@ -106,7 +84,7 @@ function findNextValidIdx(menuItems, currentIdx) {
 function findPreviousValidIdx(menuItems, currentIdx) {
     return (0, util_1.findLastIndex)(menuItems.slice(0, currentIdx), checkIfValid);
 }
-const MenuPage = react_1.default.forwardRef(function MenuPage2(props, ref) {
+const MenuPage = (0, react_1.forwardRef)(function MenuPage2(props, ref) {
     const [subMenuAnchorEl, setSubMenuAnchorEl] = (0, react_1.useState)();
     const [openSubMenuIdx, setOpenSubMenuIdx] = (0, react_1.useState)();
     const [isSubMenuOpen, setIsSubMenuOpen] = (0, react_1.useState)(false);
@@ -162,94 +140,87 @@ const MenuPage = react_1.default.forwardRef(function MenuPage2(props, ref) {
             onMenuItemClick(event, callback);
         };
     }
-    const ListContents = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.MenuList, { autoFocusItem: open && !isSubMenuOpen, dense: true }, menuItems
-            .sort((a, b) => (b.priority || 0) - (a.priority || 0))
-            .map((menuItem, idx) => {
-            if (menuItem.type === 'divider') {
-                return (react_1.default.createElement(material_1.Divider, { key: `divider-${JSON.stringify(menuItem)}-${idx}`, component: "li" }));
-            }
-            if (menuItem.type === 'subHeader') {
-                return (react_1.default.createElement(material_1.ListSubheader, { key: `subHeader-${menuItem.label}-${idx}` }, menuItem.label));
-            }
-            let icon = null;
-            let endDecoration = null;
-            if (menuItem.icon) {
-                const Icon = menuItem.icon;
-                icon = (react_1.default.createElement(material_1.ListItemIcon, null,
-                    react_1.default.createElement(Icon, null)));
-            }
-            if ('subMenu' in menuItem) {
-                endDecoration = react_1.default.createElement(MenuItemEndDecoration, { type: "subMenu" });
-            }
-            else if (menuItem.type === 'checkbox' ||
-                menuItem.type === 'radio') {
-                endDecoration = (react_1.default.createElement(MenuItemEndDecoration, { type: menuItem.type, checked: menuItem.checked, disabled: menuItem.disabled }));
-            }
-            const onClick = 'onClick' in menuItem
-                ? handleClick(menuItem.onClick)
-                : undefined;
-            return (react_1.default.createElement(material_1.MenuItem, { key: menuItem.id || String(menuItem.label), style: menuItemStyle, selected: idx === selectedMenuItemIdx, onClick: onClick, onMouseMove: e => {
-                    if (e.currentTarget !== document.activeElement) {
-                        e.currentTarget.focus();
-                        setSelectedMenuItemIdx(idx);
+    const ListContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuList, { autoFocusItem: open && !isSubMenuOpen, dense: true, children: menuItems
+                    .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+                    .map((menuItem, idx) => {
+                    if (menuItem.type === 'divider') {
+                        return ((0, jsx_runtime_1.jsx)(material_1.Divider, { component: "li" }, `divider-${JSON.stringify(menuItem)}-${idx}`));
+                    }
+                    if (menuItem.type === 'subHeader') {
+                        return ((0, jsx_runtime_1.jsx)(material_1.ListSubheader, { children: menuItem.label }, `subHeader-${menuItem.label}-${idx}`));
+                    }
+                    let icon = null;
+                    let endDecoration = null;
+                    if (menuItem.icon) {
+                        const Icon = menuItem.icon;
+                        icon = ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }));
                     }
                     if ('subMenu' in menuItem) {
-                        if (openSubMenuIdx !== idx) {
-                            setSubMenuAnchorEl(e.currentTarget);
-                            setOpenSubMenuIdx(idx);
-                        }
+                        endDecoration = (0, jsx_runtime_1.jsx)(MenuItemEndDecoration, { type: "subMenu" });
                     }
-                    else {
-                        setSubMenuAnchorEl(undefined);
-                        setOpenSubMenuIdx(undefined);
+                    else if (menuItem.type === 'checkbox' ||
+                        menuItem.type === 'radio') {
+                        endDecoration = ((0, jsx_runtime_1.jsx)(MenuItemEndDecoration, { type: menuItem.type, checked: menuItem.checked, disabled: menuItem.disabled }));
                     }
-                }, onKeyDown: e => {
-                    switch (e.key) {
-                        case 'ArrowLeft':
-                        case 'Escape': {
-                            onClose === null || onClose === void 0 ? void 0 : onClose(e, 'escapeKeyDown');
-                            break;
-                        }
-                        case 'ArrowUp': {
-                            setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
-                            break;
-                        }
-                        case 'ArrowDown': {
-                            const a = findNextValidIdx(menuItems, idx);
-                            setSelectedMenuItemIdx(a);
-                            break;
-                        }
-                        default: {
-                            if ('subMenu' in menuItem &&
-                                (e.key === 'ArrowRight' || e.key === 'Enter')) {
-                                setSubMenuAnchorEl(e.currentTarget);
-                                setOpenSubMenuIdx(idx);
-                                setIsSubMenuOpen(true);
+                    const onClick = 'onClick' in menuItem
+                        ? handleClick(menuItem.onClick)
+                        : undefined;
+                    return ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { style: menuItemStyle, selected: idx === selectedMenuItemIdx, onClick: onClick, onMouseMove: e => {
+                            if (e.currentTarget !== document.activeElement) {
+                                e.currentTarget.focus();
+                                setSelectedMenuItemIdx(idx);
                             }
-                        }
-                    }
-                }, disabled: Boolean(menuItem.disabled) },
-                icon,
-                react_1.default.createElement(material_1.ListItemText, { primary: menuItem.label, secondary: menuItem.subLabel, inset: hasIcon && !menuItem.icon }),
-                endDecoration));
-        })),
-        menuItems.map((menuItem, idx) => {
-            let subMenu = null;
-            if ('subMenu' in menuItem) {
-                subMenu = (react_1.default.createElement(MenuPage, { key: menuItem.id || String(menuItem.label), anchorEl: subMenuAnchorEl, open: isSubMenuOpen && openSubMenuIdx === idx, onClose: () => {
-                        setIsSubMenuOpen(false);
-                        setSubMenuAnchorEl(undefined);
-                    }, onMenuItemClick: onMenuItemClick, menuItems: menuItem.subMenu }));
-            }
-            return subMenu;
-        })));
-    return top ? (ListContents) : (react_1.default.createElement(material_1.Grow, { in: open, style: { transformOrigin: '0 0 0' }, ref: ref },
-        react_1.default.createElement(material_1.Paper, { elevation: 8, ref: paperRef, className: classes.paper, style: { ...position } }, ListContents)));
+                            if ('subMenu' in menuItem) {
+                                if (openSubMenuIdx !== idx) {
+                                    setSubMenuAnchorEl(e.currentTarget);
+                                    setOpenSubMenuIdx(idx);
+                                }
+                            }
+                            else {
+                                setSubMenuAnchorEl(undefined);
+                                setOpenSubMenuIdx(undefined);
+                            }
+                        }, onKeyDown: e => {
+                            switch (e.key) {
+                                case 'ArrowLeft':
+                                case 'Escape': {
+                                    onClose === null || onClose === void 0 ? void 0 : onClose(e, 'escapeKeyDown');
+                                    break;
+                                }
+                                case 'ArrowUp': {
+                                    setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
+                                    break;
+                                }
+                                case 'ArrowDown': {
+                                    const a = findNextValidIdx(menuItems, idx);
+                                    setSelectedMenuItemIdx(a);
+                                    break;
+                                }
+                                default: {
+                                    if ('subMenu' in menuItem &&
+                                        (e.key === 'ArrowRight' || e.key === 'Enter')) {
+                                        setSubMenuAnchorEl(e.currentTarget);
+                                        setOpenSubMenuIdx(idx);
+                                        setIsSubMenuOpen(true);
+                                    }
+                                }
+                            }
+                        }, disabled: Boolean(menuItem.disabled), children: [icon, (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: menuItem.label, secondary: menuItem.subLabel, inset: hasIcon && !menuItem.icon }), endDecoration] }, menuItem.id || String(menuItem.label)));
+                }) }), menuItems.map((menuItem, idx) => {
+                let subMenu = null;
+                if ('subMenu' in menuItem) {
+                    subMenu = ((0, jsx_runtime_1.jsx)(MenuPage, { anchorEl: subMenuAnchorEl, open: isSubMenuOpen && openSubMenuIdx === idx, onClose: () => {
+                            setIsSubMenuOpen(false);
+                            setSubMenuAnchorEl(undefined);
+                        }, onMenuItemClick: onMenuItemClick, menuItems: menuItem.subMenu }, menuItem.id || String(menuItem.label)));
+                }
+                return subMenu;
+            })] }));
+    return top ? (ListContents) : ((0, jsx_runtime_1.jsx)(material_1.Grow, { in: open, style: { transformOrigin: '0 0 0' }, ref: ref, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { elevation: 8, ref: paperRef, className: classes.paper, style: { ...position }, children: ListContents }) }));
 });
 function Menu(props) {
     const { open, onClose, menuItems, onMenuItemClick, ...other } = props;
-    return (react_1.default.createElement(material_1.Popover, { open: open, onClose: onClose, anchorOrigin: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Popover, { open: open, onClose: onClose, anchorOrigin: {
             vertical: 'bottom',
             horizontal: 'right',
             ...other.anchorOrigin,
@@ -257,7 +228,6 @@ function Menu(props) {
             vertical: 'top',
             horizontal: 'left',
             ...other.transformOrigin,
-        }, ...other },
-        react_1.default.createElement(MenuPage, { open: open, onClose: onClose, menuItems: menuItems, onMenuItemClick: onMenuItemClick, top: true })));
+        }, ...other, children: (0, jsx_runtime_1.jsx)(MenuPage, { open: open, onClose: onClose, menuItems: menuItems, onMenuItemClick: onMenuItemClick, top: true }) }));
 }
 exports.default = Menu;

package/ui/MenuButton.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MenuItem } from '@jbrowse/core/ui';
 declare const MenuButton: ({ children, menuItems, closeAfterItemClick, stopPropagation, setOpen, ...rest }: {
     closeAfterItemClick?: boolean;
@@ -7,5 +6,5 @@ declare const MenuButton: ({ children, menuItems, closeAfterItemClick, stopPropa
     stopPropagation?: boolean;
     setOpen?: (arg: boolean) => void;
     [key: string]: unknown;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MenuButton;

package/ui/MenuButton.js

@@ -1,32 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
@@ -36,17 +14,15 @@ const MenuButton = (0, mobx_react_1.observer)(function MenuButton({ children, me
     (0, react_1.useEffect)(() => {
         setOpen === null || setOpen === void 0 ? void 0 : setOpen(isOpen);
     }, [isOpen, setOpen]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { ...rest, onClick: event => {
-                setAnchorEl(event.currentTarget);
-            } }, children),
-        react_1.default.createElement(Menu_1.default, { open: !!anchorEl, anchorEl: anchorEl, onClose: () => {
-                setAnchorEl(undefined);
-            }, onMenuItemClick: (_, callback) => {
-                callback();
-                if (closeAfterItemClick) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { ...rest, onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                }, children: children }), (0, jsx_runtime_1.jsx)(Menu_1.default, { open: !!anchorEl, anchorEl: anchorEl, onClose: () => {
                     setAnchorEl(undefined);
-                }
-            }, menuItems: menuItems })));
+                }, onMenuItemClick: (_, callback) => {
+                    callback();
+                    if (closeAfterItemClick) {
+                        setAnchorEl(undefined);
+                    }
+                }, menuItems: menuItems })] }));
 });
 exports.default = MenuButton;

package/ui/PrerenderedCanvas.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare function PrerenderedCanvas(props: {
     width: number;
     height: number;
@@ -7,5 +6,5 @@ declare function PrerenderedCanvas(props: {
     imageData?: any;
     showSoftClip?: boolean;
     blockKey?: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export default PrerenderedCanvas;

package/ui/PrerenderedCanvas.js

@@ -1,29 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const offscreenCanvasPonyfill_1 = require("../util/offscreenCanvasPonyfill");
 function PrerenderedCanvas(props) {
     const { width, height, highResolutionScaling = 1, style = {}, imageData, blockKey, showSoftClip, } = props;
@@ -44,7 +22,7 @@ function PrerenderedCanvas(props) {
         (0, offscreenCanvasPonyfill_1.drawImageOntoCanvasContext)(imageData, context);
         setDone(true);
     }, [imageData]);
-    return (react_1.default.createElement("canvas", { "data-testid": [
+    return ((0, jsx_runtime_1.jsx)("canvas", { "data-testid": [
             'prerendered_canvas',
             showSoftClip ? 'softclipped' : '',
             blockKey,

package/ui/RedErrorMessageBox.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export default function RedErrorMessageBox({ children, }: {
     children: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/ui/RedErrorMessageBox.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = RedErrorMessageBox;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     bg: {
@@ -18,5 +15,5 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 }));
 function RedErrorMessageBox({ children, }) {
     const { classes } = useStyles();
-    return react_1.default.createElement("div", { className: classes.bg }, children);
+    return (0, jsx_runtime_1.jsx)("div", { className: classes.bg, children: children });
 }

package/ui/ResizeHandle.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare function ResizeHandle({ onDrag, vertical, flexbox, className: originalClassName, onMouseDown, ...props }: {
     onDrag: (lastFrameDistance: number, totalDistance: number) => number | undefined;
     onMouseDown?: (event: React.MouseEvent) => void;
@@ -6,5 +5,5 @@ declare function ResizeHandle({ onDrag, vertical, flexbox, className: originalCl
     flexbox?: boolean;
     className?: string;
     [props: string]: unknown;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export default ResizeHandle;

package/ui/ResizeHandle.js

@@ -1,29 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()({
     horizontalHandle: {
@@ -82,7 +60,7 @@ function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: or
     else {
         className = classes.horizontalHandle;
     }
-    return (react_1.default.createElement("div", { "data-resizer": "true", onMouseDown: event => {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-resizer": "true", onMouseDown: event => {
             event.preventDefault();
             const pos = vertical ? event.clientX : event.clientY;
             initialPosition.current = pos;

package/ui/ReturnToImportFormDialog.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 declare const ReturnToImportFormDialog: ({ model, handleClose, }: {
     model: {
         clearView: () => void;
     };
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ReturnToImportFormDialog;

package/ui/ReturnToImportFormDialog.js

@@ -3,21 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const Dialog_1 = __importDefault(require("./Dialog"));
 const ReturnToImportFormDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
-    return (react_1.default.createElement(Dialog_1.default, { maxWidth: "xl", open: true, onClose: handleClose, title: "Reference sequence" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement(material_1.Typography, null, "Are you sure you want to return to the import form? This will lose your current view")),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    model.clearView();
-                    handleClose();
-                }, variant: "contained", color: "primary", autoFocus: true }, "OK"),
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    handleClose();
-                }, color: "secondary", variant: "contained" }, "Cancel"))));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { maxWidth: "xl", open: true, onClose: handleClose, title: "Reference sequence", children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Are you sure you want to return to the import form? This will lose your current view" }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                            model.clearView();
+                            handleClose();
+                        }, variant: "contained", color: "primary", autoFocus: true, children: "OK" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                            handleClose();
+                        }, color: "secondary", variant: "contained", children: "Cancel" })] })] }));
 });
 exports.default = ReturnToImportFormDialog;

package/ui/SanitizedHTML.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 export default function SanitizedHTML({ html: pre, className, }: {
     className?: string;
-    html: string;
-}): React.JSX.Element;
+    html: unknown;
+}): import("react/jsx-runtime").JSX.Element;

package/ui/SanitizedHTML.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SanitizedHTML;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const dompurify_1 = __importDefault(require("dompurify"));
 const escape_html_1 = __importDefault(require("escape-html"));
 const util_1 = require("../util");
@@ -47,7 +47,7 @@ function isHTML(str) {
     return full.test(str);
 }
 function SanitizedHTML({ html: pre, className, }) {
-    const html = (0, util_1.linkify)(pre);
+    const html = (0, util_1.linkify)(`${pre}`);
     const value = isHTML(html) ? html : (0, escape_html_1.default)(html);
     if (!added) {
         added = true;
@@ -58,7 +58,7 @@ function SanitizedHTML({ html: pre, className, }) {
             }
         });
     }
-    return (react_1.default.createElement("span", { className: className, dangerouslySetInnerHTML: {
+    return ((0, jsx_runtime_1.jsx)("span", { className: className, dangerouslySetInnerHTML: {
             __html: dompurify_1.default.sanitize(value),
         } }));
 }

package/ui/Snackbar.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { AbstractSessionModel } from '../util';
 import type { SnackbarMessage } from './SnackbarModel';
 interface SnackbarSession extends AbstractSessionModel {
@@ -7,5 +6,5 @@ interface SnackbarSession extends AbstractSessionModel {
 }
 declare const Snackbar: ({ session }: {
     session: SnackbarSession;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Snackbar;

package/ui/Snackbar.js

@@ -1,28 +1,49 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Close_1 = __importDefault(require("@mui/icons-material/Close"));
-const material_1 = require("@mui/material");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const mobx_react_1 = require("mobx-react");
+const SnackbarContents = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SnackbarContents'))));
 const Snackbar = (0, mobx_react_1.observer)(function ({ session }) {
     const { snackbarMessages } = session;
     const latestMessage = snackbarMessages.at(-1);
-    const handleClose = (_event, reason) => {
-        if (reason !== 'clickaway') {
-            session.popSnackbarMessage();
-        }
-    };
-    return latestMessage ? (react_1.default.createElement(material_1.Snackbar, { open: true, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' } },
-        react_1.default.createElement(material_1.Alert, { onClose: handleClose, action: latestMessage.action ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Button, { color: "inherit", onClick: e => {
-                        var _a;
-                        (_a = latestMessage.action) === null || _a === void 0 ? void 0 : _a.onClick();
-                        handleClose(e);
-                    } }, latestMessage.action.name),
-                react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: handleClose },
-                    react_1.default.createElement(Close_1.default, null)))) : null, severity: latestMessage.level || 'warning' }, latestMessage.message))) : null;
+    return latestMessage ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(SnackbarContents, { onClose: (_event, reason) => {
+                if (reason !== 'clickaway') {
+                    session.popSnackbarMessage();
+                }
+            }, contents: latestMessage }) })) : null;
 });
 exports.default = Snackbar;

package/ui/SnackbarContents.d.ts

@@ -0,0 +1,5 @@
+import type { SnackbarMessage } from './SnackbarModel';
+export default function SnackbarContents({ onClose, contents, }: {
+    onClose: (_event: unknown, reason?: string) => void;
+    contents: SnackbarMessage;
+}): import("react/jsx-runtime").JSX.Element;