@jbrowse/core 2.18.0 → 3.0.1

package/ui/AppLogo.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { AnyConfigurationModel } from '../configuration';
 declare const Logo: ({ session, }: {
     session: {
         configuration: AnyConfigurationModel;
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Logo;

package/ui/AppLogo.js

@@ -1,15 +1,12 @@
 "use strict";
-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 mobx_react_1 = require("mobx-react");
 const configuration_1 = require("../configuration");
 const Logo_1 = require("./Logo");
 const Logo = (0, mobx_react_1.observer)(function ({ session, }) {
     const { configuration } = session;
     const logoPath = (0, configuration_1.readConfObject)(configuration, 'logoPath');
-    return (logoPath === null || logoPath === void 0 ? void 0 : logoPath.uri) ? (react_1.default.createElement("img", { src: logoPath.uri, alt: "Custom logo" })) : (react_1.default.createElement(Logo_1.LogoFull, { variant: "white" }));
+    return (logoPath === null || logoPath === void 0 ? void 0 : logoPath.uri) ? ((0, jsx_runtime_1.jsx)("img", { src: logoPath.uri, alt: "Custom logo" })) : ((0, jsx_runtime_1.jsx)(Logo_1.LogoFull, { variant: "white" }));
 });
 exports.default = Logo;

package/ui/AssemblySelector.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
 import type { AbstractSessionModel } from '../util';
 import type { InputProps as IIP, TextFieldProps as TFP } from '@mui/material';
-declare const AssemblySelector: ({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText, }: {
+declare const AssemblySelector: ({ session, onChange, label, selected, InputProps, TextFieldProps, localStorageKey, helperText, }: {
     session: AbstractSessionModel;
+    label?: string;
     helperText?: string;
     onChange: (arg: string) => void;
     selected?: string;
     localStorageKey?: string;
     InputProps?: IIP;
     TextFieldProps?: TFP;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default AssemblySelector;

package/ui/AssemblySelector.js

@@ -1,40 +1,17 @@
 "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 material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const configuration_1 = require("../configuration");
 const util_1 = require("../util");
 const useStyles = (0, mui_1.makeStyles)()({
     importFormEntry: {
         minWidth: 180,
     },
 });
-const AssemblySelector = (0, mobx_react_1.observer)(function ({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText = 'Select assembly to view', }) {
+const AssemblySelector = (0, mobx_react_1.observer)(function ({ session, onChange, label = 'Assembly', selected, InputProps, TextFieldProps, localStorageKey, helperText = 'Select assembly to view', }) {
     const { classes } = useStyles();
     const { assemblyNames, assemblyManager } = session;
     const config = new URLSearchParams(window.location.search).get('config');
@@ -54,15 +31,16 @@ const AssemblySelector = (0, mobx_react_1.observer)(function ({ session, onChang
         }
     }, [selection, onChange, selected]);
     const error = assemblyNames.length ? '' : 'No configured assemblies';
-    return (react_1.default.createElement(material_1.TextField, { select: true, label: "Assembly", variant: "outlined", helperText: error || helperText, value: selection || '', onChange: event => {
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { select: true, "data-testid": "assembly-selector-textfield", label: label, variant: "outlined", helperText: error || helperText, value: selection || '', onChange: event => {
             setLastSelected(event.target.value);
         }, error: !!error, disabled: !!error, className: classes.importFormEntry, ...TextFieldProps, slotProps: {
             input: InputProps,
-            htmlInput: { 'data-testid': 'assembly-selector' },
-        } }, assemblyNames.map(name => {
-        const assembly = assemblyManager.get(name);
-        const displayName = assembly ? (0, configuration_1.getConf)(assembly, 'displayName') : '';
-        return (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, displayName || name));
-    })));
+            htmlInput: {
+                'data-testid': 'assembly-selector',
+            },
+        }, children: assemblyNames.map(name => {
+            var _a;
+            return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: name, children: ((_a = assemblyManager.get(name)) === null || _a === void 0 ? void 0 : _a.displayName) || name }, name));
+        }) }));
 });
 exports.default = AssemblySelector;

package/ui/BaseTooltip.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export default function BaseTooltip({ clientPoint: clientPointCoords, children, placement, }: {
     placement?: 'left' | 'right';
     clientPoint?: {
@@ -6,4 +5,4 @@ export default function BaseTooltip({ clientPoint: clientPointCoords, children,
         y: number;
     };
     children: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/ui/BaseTooltip.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = BaseTooltip;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@floating-ui/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@floating-ui/react");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 function round(value) {
@@ -20,7 +17,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         color: theme.palette.common.white,
         fontFamily: theme.typography.fontFamily,
         padding: '4px 8px',
-        fontSize: theme.typography.pxToRem(12),
+        fontSize: theme.typography.fontSize,
         lineHeight: `${round(14 / 10)}em`,
         maxWidth: 300,
         wordWrap: 'break-word',
@@ -31,19 +28,19 @@ function BaseTooltip({ clientPoint: clientPointCoords, children, placement = 'ri
     const theme = (0, material_1.useTheme)();
     const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
     const { classes } = useStyles();
-    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
+    const { refs, floatingStyles, context } = (0, react_1.useFloating)({
         placement,
         strategy: 'fixed',
+        middleware: [(0, react_1.offset)(5)],
     });
-    const clientPoint = (0, react_2.useClientPoint)(context, clientPointCoords);
-    const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
-    return (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
-        react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+    const clientPoint = (0, react_1.useClientPoint)(context, clientPointCoords);
+    const { getFloatingProps } = (0, react_1.useInteractions)([clientPoint]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container, children: (0, jsx_runtime_1.jsx)("div", { className: classes.tooltip, ref: refs.setFloating, style: {
                 ...floatingStyles,
                 zIndex: 100000,
                 visibility: floatingStyles.transform === 'translate(0px, 0px)'
                     ? 'hidden'
                     : undefined,
                 pointerEvents: 'none',
-            }, ...getFloatingProps() }, children)));
+            }, ...getFloatingProps(), children: children }) }));
 }

package/ui/CascadingMenu.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MenuItem as JBMenuItem } from './Menu';
 import type { PopupState } from 'material-ui-popup-state/hooks';
 declare function CascadingMenuChildren(props: {
@@ -6,5 +5,5 @@ declare function CascadingMenuChildren(props: {
     closeAfterItemClick?: boolean;
     menuItems: JBMenuItem[];
     popupState: PopupState;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export default CascadingMenuChildren;

package/ui/CascadingMenu.js

@@ -1,38 +1,16 @@
 "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 ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
 const material_1 = require("@mui/material");
 const HoverMenu_1 = __importDefault(require("material-ui-popup-state/HoverMenu"));
 const hooks_1 = require("material-ui-popup-state/hooks");
 const Menu_1 = require("./Menu");
-const CascadingContext = react_1.default.createContext({
+const CascadingContext = (0, react_1.createContext)({
     parentPopupState: null,
     rootPopupState: null,
 });
@@ -41,7 +19,7 @@ function CascadingMenuItem({ onClick, closeAfterItemClick, ...props }) {
     if (!rootPopupState) {
         throw new Error('must be used inside a CascadingMenu');
     }
-    return (react_1.default.createElement(material_1.MenuItem, { ...props, onClick: event => {
+    return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { ...props, onClick: event => {
             if (closeAfterItemClick) {
                 rootPopupState.close();
             }
@@ -55,13 +33,7 @@ function CascadingSubmenu({ title, Icon, inset, popupId, ...props }) {
         variant: 'popover',
         parentPopupState,
     });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.MenuItem, { ...(0, hooks_1.bindHover)(popupState), ...(0, hooks_1.bindFocus)(popupState) },
-            Icon ? (react_1.default.createElement(material_1.ListItemIcon, null,
-                react_1.default.createElement(Icon, null))) : null,
-            react_1.default.createElement(material_1.ListItemText, { primary: title, inset: inset }),
-            react_1.default.createElement(ChevronRight_1.default, null)),
-        react_1.default.createElement(CascadingSubmenuHover, { ...props, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, popupState: popupState })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { ...(0, hooks_1.bindHover)(popupState), ...(0, hooks_1.bindFocus)(popupState), children: [Icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: title, inset: inset }), (0, jsx_runtime_1.jsx)(ChevronRight_1.default, {})] }), (0, jsx_runtime_1.jsx)(CascadingSubmenuHover, { ...props, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, popupState: popupState })] }));
 }
 function CascadingSubmenuHover({ popupState, onMenuItemClick, menuItems, classes, ...props }) {
     const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
@@ -69,8 +41,7 @@ function CascadingSubmenuHover({ popupState, onMenuItemClick, menuItems, classes
         rootPopupState: rootPopupState || popupState,
         parentPopupState: popupState,
     }), [rootPopupState, popupState]);
-    return (react_1.default.createElement(CascadingContext.Provider, { value: context },
-        react_1.default.createElement(HoverMenu_1.default, { ...props, ...(0, hooks_1.bindMenu)(popupState) })));
+    return ((0, jsx_runtime_1.jsx)(CascadingContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(HoverMenu_1.default, { ...props, ...(0, hooks_1.bindMenu)(popupState) }) }));
 }
 function CascadingMenu({ popupState, onMenuItemClick, menuItems, ...props }) {
     const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
@@ -78,15 +49,14 @@ function CascadingMenu({ popupState, onMenuItemClick, menuItems, ...props }) {
         rootPopupState: rootPopupState || popupState,
         parentPopupState: popupState,
     }), [rootPopupState, popupState]);
-    return (react_1.default.createElement(CascadingContext.Provider, { value: context },
-        react_1.default.createElement(material_1.Menu, { ...props, ...(0, hooks_1.bindMenu)(popupState) })));
+    return ((0, jsx_runtime_1.jsx)(CascadingContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(material_1.Menu, { ...props, ...(0, hooks_1.bindMenu)(popupState) }) }));
 }
 function EndDecoration({ item }) {
     if ('subMenu' in item) {
-        return react_1.default.createElement(Menu_1.MenuItemEndDecoration, { type: "subMenu" });
+        return (0, jsx_runtime_1.jsx)(Menu_1.MenuItemEndDecoration, { type: "subMenu" });
     }
     else if (item.type === 'checkbox' || item.type === 'radio') {
-        return (react_1.default.createElement(Menu_1.MenuItemEndDecoration, { type: item.type, checked: item.checked, disabled: item.disabled }));
+        return ((0, jsx_runtime_1.jsx)(Menu_1.MenuItemEndDecoration, { type: item.type, checked: item.checked, disabled: item.disabled }));
     }
     return null;
 }
@@ -97,22 +67,14 @@ function CascadingMenuList({ onMenuItemClick, closeAfterItemClick, menuItems, ..
         };
     }
     const hasIcon = menuItems.some(m => 'icon' in m && m.icon);
-    return (react_1.default.createElement(react_1.default.Fragment, null, menuItems
-        .sort((a, b) => (b.priority || 0) - (a.priority || 0))
-        .map((item, idx) => {
-        return 'subMenu' in item ? (react_1.default.createElement(CascadingSubmenu, { key: `subMenu-${item.label}-${idx}`, popupId: `subMenu-${item.label}`, title: item.label, Icon: item.icon, inset: hasIcon && !item.icon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu },
-            react_1.default.createElement(CascadingMenuList, { ...props, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }))) : item.type === 'divider' ? (react_1.default.createElement(material_1.Divider, { key: `divider-${JSON.stringify(item)}-${idx}`, component: "li" })) : item.type === 'subHeader' ? (react_1.default.createElement(material_1.ListSubheader, { key: `subHeader-${item.label}-${idx}` }, item.label)) : (react_1.default.createElement(CascadingMenuItem, { key: `${item.label}-${idx}`, closeAfterItemClick: closeAfterItemClick, onClick: 'onClick' in item ? handleClick(item.onClick) : undefined, disabled: Boolean(item.disabled) },
-            item.icon ? (react_1.default.createElement(material_1.ListItemIcon, null,
-                react_1.default.createElement(item.icon, null))) : null,
-            ' ',
-            react_1.default.createElement(material_1.ListItemText, { primary: item.label, secondary: item.subLabel, inset: hasIcon && !item.icon }),
-            react_1.default.createElement("div", { style: { flexGrow: 1, minWidth: 10 } }),
-            react_1.default.createElement(EndDecoration, { item: item })));
-    })));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: menuItems
+            .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+            .map((item, idx) => {
+            return 'subMenu' in item ? ((0, jsx_runtime_1.jsx)(CascadingSubmenu, { popupId: `subMenu-${item.label}`, title: item.label, Icon: item.icon, inset: hasIcon && !item.icon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu, children: (0, jsx_runtime_1.jsx)(CascadingMenuList, { ...props, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }) }, `subMenu-${item.label}-${idx}`)) : item.type === 'divider' ? ((0, jsx_runtime_1.jsx)(material_1.Divider, { component: "li" }, `divider-${JSON.stringify(item)}-${idx}`)) : item.type === 'subHeader' ? ((0, jsx_runtime_1.jsx)(material_1.ListSubheader, { children: item.label }, `subHeader-${item.label}-${idx}`)) : ((0, jsx_runtime_1.jsxs)(CascadingMenuItem, { closeAfterItemClick: closeAfterItemClick, onClick: 'onClick' in item ? handleClick(item.onClick) : undefined, disabled: Boolean(item.disabled), children: [item.icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(item.icon, {}) })) : null, ' ', (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: item.label, secondary: item.subLabel, inset: hasIcon && !item.icon }), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1, minWidth: 10 } }), (0, jsx_runtime_1.jsx)(EndDecoration, { item: item })] }, `${item.label}-${idx}`));
+        }) }));
 }
 function CascadingMenuChildren(props) {
     const { closeAfterItemClick = true, ...rest } = props;
-    return (react_1.default.createElement(CascadingMenu, { ...rest },
-        react_1.default.createElement(CascadingMenuList, { ...rest, closeAfterItemClick: closeAfterItemClick })));
+    return ((0, jsx_runtime_1.jsx)(CascadingMenu, { ...rest, children: (0, jsx_runtime_1.jsx)(CascadingMenuList, { ...rest, closeAfterItemClick: closeAfterItemClick }) }));
 }
 exports.default = CascadingMenuChildren;

package/ui/CascadingMenuButton.d.ts

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

package/ui/CascadingMenuButton.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 CascadingMenu_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenu"));
 const material_1 = require("@mui/material");
 const hooks_1 = require("material-ui-popup-state/hooks");
@@ -41,22 +19,20 @@ const CascadingMenuButton = (0, mobx_react_1.observer)(function CascadingMenuBut
     (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, { onClick: event => {
-                if (stopPropagation) {
-                    event.stopPropagation();
-                }
-                onClick(event);
-                onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
-            }, onTouchStart: event => {
-                if (stopPropagation) {
-                    event.stopPropagation();
-                }
-                onTouchStart(event);
-                onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
-            }, ...rest2, ...rest, disabled: menuItems.length === 0 }, children),
-        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_, callback) => {
-                callback();
-            }, menuItems: menuItems, closeAfterItemClick: closeAfterItemClick, popupState: popupState })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: event => {
+                    if (stopPropagation) {
+                        event.stopPropagation();
+                    }
+                    onClick(event);
+                    onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
+                }, onTouchStart: event => {
+                    if (stopPropagation) {
+                        event.stopPropagation();
+                    }
+                    onTouchStart(event);
+                    onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
+                }, ...rest2, ...rest, disabled: menuItems.length === 0, children: children }), (0, jsx_runtime_1.jsx)(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_, callback) => {
+                    callback();
+                }, menuItems: menuItems, closeAfterItemClick: closeAfterItemClick, popupState: popupState })] }));
 });
 exports.default = CascadingMenuButton;

package/ui/ColorPicker.d.ts

@@ -1,16 +1,15 @@
-import React from 'react';
 export declare const PopoverPicker: ({ color, onChange, }: {
     color: string;
     onChange: (color: string) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare function ColorPopover({ anchorEl, onChange, onClose, color, }: {
     color: string;
     anchorEl: HTMLElement | null;
     onChange: (val: string) => void;
     onClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ColorPicker({ onChange, color, }: {
     color: string;
     onChange: (val: string) => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export default PopoverPicker;

package/ui/ColorPicker.js

@@ -15,18 +15,29 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __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 });
 exports.PopoverPicker = void 0;
 exports.ColorPopover = ColorPopover;
 exports.ColorPicker = ColorPicker;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colord_1 = require("@jbrowse/core/util/colord");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
@@ -53,18 +64,15 @@ const useStyles = (0, mui_1.makeStyles)()({
 const PopoverPicker = ({ color, onChange, }) => {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const { classes } = useStyles();
-    return (react_1.default.createElement("div", { className: classes.picker },
-        react_1.default.createElement("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: event => {
-                setAnchorEl(event.currentTarget);
-            } }),
-        react_1.default.createElement(ColorPopover, { anchorEl: anchorEl, onClose: () => {
-                setAnchorEl(null);
-            }, color: color, onChange: onChange })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.picker, children: [(0, jsx_runtime_1.jsx)("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                } }), (0, jsx_runtime_1.jsx)(ColorPopover, { anchorEl: anchorEl, onClose: () => {
+                    setAnchorEl(null);
+                }, color: color, onChange: onChange })] }));
 };
 exports.PopoverPicker = PopoverPicker;
 function ColorPopover({ anchorEl, onChange, onClose, color, }) {
-    return (react_1.default.createElement(material_1.Popover, { open: !!anchorEl, anchorEl: anchorEl, onClose: onClose },
-        react_1.default.createElement(ColorPicker, { color: color, onChange: onChange })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Popover, { open: !!anchorEl, anchorEl: anchorEl, onClose: onClose, children: (0, jsx_runtime_1.jsx)(ColorPicker, { color: color, onChange: onChange }) }));
 }
 function ColorPicker({ onChange, color, }) {
     const { classes } = useStyles();
@@ -81,19 +89,13 @@ function ColorPicker({ onChange, color, }) {
         }
         catch (e) { }
     };
-    return (react_1.default.createElement("div", { style: { display: 'flex', padding: 10 } },
-        react_1.default.createElement("div", { style: { width: 200, margin: 5 } },
-            react_1.default.createElement(react_colorful_1.RgbaStringColorPicker, { color: rgbDebounced, onChange: handleChange })),
-        react_1.default.createElement("div", { style: { width: 200, margin: 5 } },
-            react_1.default.createElement(material_1.Select, { value: val, onChange: event => {
-                    const pal = event.target.value;
-                    setVal(pal);
-                } }, palettes.map(p => (react_1.default.createElement(material_1.MenuItem, { value: p, key: p }, p)))),
-            react_1.default.createElement("div", { className: classes.swatches }, presetColors.map((presetColor, idx) => (react_1.default.createElement("button", { type: "button", key: `${presetColor}-${idx}`, className: classes.swatch, style: { background: presetColor }, onClick: () => {
-                    handleChange(presetColor);
-                } })))),
-            react_1.default.createElement(material_1.TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => {
-                    handleChange(event.target.value);
-                } }))));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', padding: 10 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 200, margin: 5 }, children: (0, jsx_runtime_1.jsx)(react_colorful_1.RgbaStringColorPicker, { color: rgbDebounced, onChange: handleChange }) }), (0, jsx_runtime_1.jsxs)("div", { style: { width: 200, margin: 5 }, children: [(0, jsx_runtime_1.jsx)(material_1.Select, { value: val, onChange: event => {
+                            const pal = event.target.value;
+                            setVal(pal);
+                        }, children: palettes.map(p => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: p, children: p }, p))) }), (0, jsx_runtime_1.jsx)("div", { className: classes.swatches, children: presetColors.map((presetColor, idx) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: classes.swatch, style: { background: presetColor }, onClick: () => {
+                                handleChange(presetColor);
+                            } }, `${presetColor}-${idx}`))) }), (0, jsx_runtime_1.jsx)(material_1.TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => {
+                            handleChange(event.target.value);
+                        } })] })] }));
 }
 exports.default = exports.PopoverPicker;

package/ui/Dialog.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { DialogProps } from '@mui/material';
 interface Props extends DialogProps {
     header?: React.ReactNode;
 }
-declare const Dialog: (props: Props) => React.JSX.Element;
+declare const Dialog: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Dialog;

package/ui/Dialog.js

@@ -3,7 +3,8 @@ 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 react_1 = require("react");
 const ErrorBoundary_1 = require("@jbrowse/core/ui/ErrorBoundary");
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const material_1 = require("@mui/material");
@@ -20,33 +21,24 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 function DialogError({ error }) {
-    return (react_1.default.createElement("div", { style: { width: 800, margin: 40 } },
-        react_1.default.createElement(ErrorMessage_1.default, { error: error })));
+    return ((0, jsx_runtime_1.jsx)("div", { style: { width: 800, margin: 40 }, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error }) }));
 }
 const Dialog = (0, mobx_react_1.observer)(function (props) {
     const { classes } = useStyles();
     const { title, header, children, onClose } = props;
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement(material_1.Dialog, { ...props },
-        react_1.default.createElement(material_1.ScopedCssBaseline, null,
-            react_1.default.isValidElement(header) ? (header) : (react_1.default.createElement(material_1.DialogTitle, null,
-                react_1.default.createElement(SanitizedHTML_1.default, { html: title || '' }),
-                onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
-                        onClose();
-                    } },
-                    react_1.default.createElement(Close_1.default, null))) : null)),
-            react_1.default.createElement(material_1.Divider, null),
-            react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: DialogError },
-                react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)(theme, {
-                        components: {
-                            MuiInputBase: {
-                                styleOverrides: {
-                                    input: {
-                                        boxSizing: 'content-box!important',
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { ...props, children: (0, jsx_runtime_1.jsxs)(material_1.ScopedCssBaseline, { children: [(0, react_1.isValidElement)(header) ? (header) : ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { children: [(0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: title || '' }), onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.closeButton, onClick: () => {
+                                onClose();
+                            }, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: DialogError, children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: (0, material_1.createTheme)(theme, {
+                            components: {
+                                MuiInputBase: {
+                                    styleOverrides: {
+                                        input: {
+                                            boxSizing: 'content-box!important',
+                                        },
                                     },
                                 },
                             },
-                        },
-                    }) }, children)))));
+                        }), children: children }) })] }) }));
 });
 exports.default = Dialog;

package/ui/DraggableDialog.d.ts

@@ -0,0 +1,5 @@
+import type { DialogProps } from '@mui/material';
+declare const DraggableDialog: (props: DialogProps & {
+    title: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DraggableDialog;

package/ui/DraggableDialog.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const react_draggable_1 = __importDefault(require("react-draggable"));
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+}));
+function PaperComponent(props) {
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(react_draggable_1.default, { nodeRef: ref, cancel: '[class*="MuiDialogContent-root"]', onStart: arg => { var _a; return `${(_a = arg.target) === null || _a === void 0 ? void 0 : _a.className}`.includes('MuiDialogTitle'); }, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { ref: ref, ...props }) }));
+}
+const DraggableDialog = (0, mobx_react_1.observer)(function DraggableDialog(props) {
+    const { classes } = useStyles();
+    const { title, children, onClose } = props;
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { ...props, PaperComponent: PaperComponent, children: (0, jsx_runtime_1.jsxs)(material_1.ScopedCssBaseline, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { style: { cursor: 'move' }, children: [title, onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.closeButton, onClick: () => {
+                                onClose();
+                            }, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), children] }) }));
+});
+exports.default = DraggableDialog;