@jbrowse/core 2.17.0 → 3.0.0

package/ui/Logo.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.Logomark = Logomark;
 exports.LogoFull = LogoFull;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 function getColors(variant) {
     if (variant === 'black') {
         return {
@@ -34,31 +31,16 @@ function getColors(variant) {
     };
 }
 function Logomark({ variant }) {
-    return (react_1.default.createElement("svg", { viewBox: "0 0 175 175" },
-        react_1.default.createElement(Icon, { variant: variant })));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 175 175", children: (0, jsx_runtime_1.jsx)(Icon, { variant: variant }) }));
 }
 function LogoFull({ variant }) {
-    return (react_1.default.createElement("svg", { viewBox: "0 0 641 175" },
-        react_1.default.createElement(Text, { variant: variant }),
-        react_1.default.createElement(Icon, { variant: variant })));
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 641 175", children: [(0, jsx_runtime_1.jsx)(Text, { variant: variant }), (0, jsx_runtime_1.jsx)(Icon, { variant: variant })] }));
 }
 function Icon({ variant }) {
     const colors = getColors(variant);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("path", { style: { fill: colors.midnight }, d: "M120.5,57.5c.168,0,.333.012.5.013V40.506c-.167,0-.333-.006-.5-.006a98.325,98.325,0,0,0-77.4,37.565q-2.664,3.378-5.023,6.994l14.206,9.327Q54.043,91.709,56,89.179A81.363,81.363,0,0,1,120.5,57.5Z" }),
-        react_1.default.createElement("path", { style: { fill: colors.forrest }, d: "M148.668,86.223c.308.133.6.283.908.42l6.746-15.618c-.153-.067-.3-.143-.454-.21a81.36,81.36,0,0,0-71.777,3.5q-2.8,1.544-5.469,3.309l9.249,14.054A63.93,63.93,0,0,1,148.668,86.223Z" }),
-        react_1.default.createElement("path", { style: { fill: colors.grape }, d: "M170.894,109.37A63.929,63.929,0,0,0,113.4,88.861l2.336,15.474a48.456,48.456,0,0,1,44.322,15.42c.111.125.214.255.324.381l11.16-10C171.323,109.879,171.118,109.62,170.894,109.37Z" }),
-        react_1.default.createElement("path", { style: { fill: colors.mandarin }, d: "M150.921,150.314c.04.163.07.326.107.489l16.509-4.058c-.039-.163-.067-.326-.107-.489A48.457,48.457,0,0,0,135.575,111.8l-5.515,15.591A32.466,32.466,0,0,1,150.921,150.314Z" }),
-        react_1.default.createElement("path", { style: { fill: colors.gray }, d: "M134.1,138.129l-9.779,13.213a32.486,32.486,0,0,1,7.823,14.463l15.147.852c.012-.166.032-.331.041-.5A32.464,32.464,0,0,0,134.1,138.129Z" })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { style: { fill: colors.midnight }, d: "M120.5,57.5c.168,0,.333.012.5.013V40.506c-.167,0-.333-.006-.5-.006a98.325,98.325,0,0,0-77.4,37.565q-2.664,3.378-5.023,6.994l14.206,9.327Q54.043,91.709,56,89.179A81.363,81.363,0,0,1,120.5,57.5Z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: colors.forrest }, d: "M148.668,86.223c.308.133.6.283.908.42l6.746-15.618c-.153-.067-.3-.143-.454-.21a81.36,81.36,0,0,0-71.777,3.5q-2.8,1.544-5.469,3.309l9.249,14.054A63.93,63.93,0,0,1,148.668,86.223Z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: colors.grape }, d: "M170.894,109.37A63.929,63.929,0,0,0,113.4,88.861l2.336,15.474a48.456,48.456,0,0,1,44.322,15.42c.111.125.214.255.324.381l11.16-10C171.323,109.879,171.118,109.62,170.894,109.37Z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: colors.mandarin }, d: "M150.921,150.314c.04.163.07.326.107.489l16.509-4.058c-.039-.163-.067-.326-.107-.489A48.457,48.457,0,0,0,135.575,111.8l-5.515,15.591A32.466,32.466,0,0,1,150.921,150.314Z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: colors.gray }, d: "M134.1,138.129l-9.779,13.213a32.486,32.486,0,0,1,7.823,14.463l15.147.852c.012-.166.032-.331.041-.5A32.464,32.464,0,0,0,134.1,138.129Z" })] }));
 }
 function Text({ variant }) {
     const colors = getColors(variant);
-    return (react_1.default.createElement("g", { "aria-label": "JBrowse", transform: "translate(213.084 144.241)", style: { fill: colors.midnight } },
-        react_1.default.createElement("path", { d: "m 26.355,-71.505 v 54.075 2.835 q 0,6.825 -0.42,10.185 -0.735,5.67 -2.835,9.135 -3.255,5.355 -8.505,8.4 -4.83,2.73 -11.55,3.57 L 1.47,11.76 Q 7.35,10.185 9.24,4.2 10.605,-0.105 10.605,-9.975 v -5.565 -55.965 q 1.785,0 4.62,0.315 2.835,0.21 3.255,0.21 1.785,0 2.94,-0.105 4.515,-0.42 4.935,-0.42 z" }),
-        react_1.default.createElement("path", { d: "m 60.68836,-65.415 v 24.78 h 3.255 q 2.94,0 4.935,-0.525 2.1,-0.525 3.885,-2.1 2.31,-1.995 3.36,-4.83 1.155,-2.835 1.155,-6.09 0,-5.565 -2.94,-8.61 -2.94,-3.045 -8.295,-3.045 -2.52,0 -5.355,0.42 z m 0,30.87 V -6.09 h 5.25 q 4.725,0 8.505,-3.675 3.885,-3.78 3.885,-10.08 0,-8.19 -4.62,-11.655 -4.095,-3.045 -13.02,-3.045 z M 44.93836,0 v -71.505 h 27.09 q 9.135,0 14.385,3.255 6.51,3.99 6.51,12.6 0,7.035 -5.25,11.655 -4.62,4.095 -11.97,5.145 v 0.945 q 7.56,0.735 12.285,3.99 6.615,4.62 6.615,13.335 0,10.185 -7.98,15.75 -6.93,4.83 -17.43,4.83 z" }),
-        react_1.default.createElement("path", { d: "M 109.44281,0.525 V -50.4 q 1.785,0.21 3.99,0.42 2.31,0.105 3.255,0.105 2.31,0 4.2,-0.21 1.89,-0.21 3.045,-0.315 v 13.02 q 1.89,-6.51 5.46,-9.87 4.41,-4.095 11.655,-4.095 -0.315,2.73 -0.42,6.825 -0.105,3.99 -0.105,7.455 l -0.945,0.84 q -0.945,-0.735 -2.415,-1.05 -1.47,-0.315 -2.94,-0.315 -3.57,0 -6.195,1.89 -2.52,1.785 -3.465,5.04 -0.42,1.155 -0.525,3.15 -0.105,1.89 -0.105,4.515 v 4.515 19.005 q -1.785,-0.21 -2.625,-0.21 -3.675,-0.315 -4.62,-0.315 -2.31,0 -4.2,0.21 -1.89,0.21 -3.045,0.315 z" }),
-        react_1.default.createElement("path", { d: "m 173.77337,1.47 q -11.655,0 -18.585,-6.825 -6.93,-6.825 -6.93,-18.48 0,-12.6 6.72,-20.055 6.825,-7.455 18.9,-7.455 11.97,0 18.9,6.72 6.93,6.72 6.93,18.48 0,12.285 -6.72,19.74 -7.14,7.875 -19.215,7.875 z m 0.735,-48.09 q -5.88,0 -8.505,6.51 -2.205,5.565 -2.205,15.96 0,8.19 1.47,12.915 2.415,7.98 8.505,7.98 5.565,0 8.19,-7.875 2.205,-6.51 2.205,-16.695 0,-8.505 -2.1,-13.23 -2.52,-5.565 -7.56,-5.565 z" }),
-        react_1.default.createElement("path", { d: "m 222.03563,-50.4 10.5,36.015 q 3.675,-11.235 5.67,-17.85 2.415,-8.085 5.04,-18.165 1.05,0.105 3.045,0.315 2.1,0.21 2.835,0.21 1.995,0 3.15,-0.105 1.26,-0.21 2.73,-0.42 l 10.71,36.015 q 5.88,-17.43 10.71,-36.015 l 4.2,0.315 4.095,-0.315 q -5.145,13.125 -9.135,24.57 -5.04,14.28 -8.505,26.355 -1.89,-0.21 -3.36,-0.42 -1.365,-0.105 -2.205,-0.105 -1.89,0 -3.36,0.21 -1.365,0.21 -2.31,0.315 l -10.605,-34.755 q -4.41,13.65 -6.72,21.105 -2.31,7.35 -4.095,13.65 -1.89,-0.21 -3.36,-0.42 -1.365,-0.105 -2.31,-0.105 -1.995,0 -3.465,0.21 -1.365,0.21 -2.31,0.315 -3.78,-12.81 -5.04,-17.01 -2.205,-7.245 -5.46,-17.01 -2.835,-8.4 -5.88,-16.905 1.575,0 4.305,0.315 2.73,0.21 3.36,0.21 1.47,0 4.305,-0.21 2.835,-0.315 3.465,-0.315 z" }),
-        react_1.default.createElement("path", { d: "m 292.84172,-12.81 h 2.625 q 1.47,4.095 4.62,6.51 3.15,2.415 7.35,2.415 2.94,0 5.46,-1.785 2.625,-1.89 2.625,-4.62 0,-3.885 -6.195,-6.615 -10.395,-4.62 -11.655,-5.46 -6.405,-4.515 -6.405,-12.285 0,-7.77 5.25,-12.18 5.25,-4.515 12.81,-4.515 3.99,0 8.085,1.365 4.095,1.26 7.14,3.57 l -2.52,9.24 h -2.94 q -0.63,-3.57 -3.57,-6.195 -2.835,-2.625 -6.405,-2.625 -3.15,0 -5.46,1.575 -2.31,1.47 -2.31,4.515 0,3.885 6.405,6.51 10.185,4.095 11.865,5.25 6.405,4.41 6.405,12.81 0,7.455 -5.46,12.18 -5.355,4.62 -14.805,4.62 -8.19,0 -14.49,-4.305 z" }),
-        react_1.default.createElement("path", { d: "m 349.61228,-29.925 h 15.54 q 0,-6.51 -1.05,-10.395 -1.68,-6.3 -5.88,-6.3 -5.04,0 -7.14,6.195 -1.47,4.305 -1.47,10.5 z m 30.03,5.04 h -30.03 q 0,9.135 3.045,13.86 3.57,5.67 11.55,5.67 3.255,0 6.405,-1.26 3.15,-1.26 5.88,-3.465 l 1.26,0.945 -2.31,5.88 q -6.72,4.725 -15.015,4.725 -12.915,0 -19.635,-7.245 -6.72,-7.245 -6.72,-20.37 0,-11.235 6.405,-18.165 6.51,-7.035 17.64,-7.035 11.655,0 16.905,7.56 4.62,6.615 4.62,18.9 z" })));
+    return ((0, jsx_runtime_1.jsxs)("g", { "aria-label": "JBrowse", transform: "translate(213.084 144.241)", style: { fill: colors.midnight }, children: [(0, jsx_runtime_1.jsx)("path", { d: "m 26.355,-71.505 v 54.075 2.835 q 0,6.825 -0.42,10.185 -0.735,5.67 -2.835,9.135 -3.255,5.355 -8.505,8.4 -4.83,2.73 -11.55,3.57 L 1.47,11.76 Q 7.35,10.185 9.24,4.2 10.605,-0.105 10.605,-9.975 v -5.565 -55.965 q 1.785,0 4.62,0.315 2.835,0.21 3.255,0.21 1.785,0 2.94,-0.105 4.515,-0.42 4.935,-0.42 z" }), (0, jsx_runtime_1.jsx)("path", { d: "m 60.68836,-65.415 v 24.78 h 3.255 q 2.94,0 4.935,-0.525 2.1,-0.525 3.885,-2.1 2.31,-1.995 3.36,-4.83 1.155,-2.835 1.155,-6.09 0,-5.565 -2.94,-8.61 -2.94,-3.045 -8.295,-3.045 -2.52,0 -5.355,0.42 z m 0,30.87 V -6.09 h 5.25 q 4.725,0 8.505,-3.675 3.885,-3.78 3.885,-10.08 0,-8.19 -4.62,-11.655 -4.095,-3.045 -13.02,-3.045 z M 44.93836,0 v -71.505 h 27.09 q 9.135,0 14.385,3.255 6.51,3.99 6.51,12.6 0,7.035 -5.25,11.655 -4.62,4.095 -11.97,5.145 v 0.945 q 7.56,0.735 12.285,3.99 6.615,4.62 6.615,13.335 0,10.185 -7.98,15.75 -6.93,4.83 -17.43,4.83 z" }), (0, jsx_runtime_1.jsx)("path", { d: "M 109.44281,0.525 V -50.4 q 1.785,0.21 3.99,0.42 2.31,0.105 3.255,0.105 2.31,0 4.2,-0.21 1.89,-0.21 3.045,-0.315 v 13.02 q 1.89,-6.51 5.46,-9.87 4.41,-4.095 11.655,-4.095 -0.315,2.73 -0.42,6.825 -0.105,3.99 -0.105,7.455 l -0.945,0.84 q -0.945,-0.735 -2.415,-1.05 -1.47,-0.315 -2.94,-0.315 -3.57,0 -6.195,1.89 -2.52,1.785 -3.465,5.04 -0.42,1.155 -0.525,3.15 -0.105,1.89 -0.105,4.515 v 4.515 19.005 q -1.785,-0.21 -2.625,-0.21 -3.675,-0.315 -4.62,-0.315 -2.31,0 -4.2,0.21 -1.89,0.21 -3.045,0.315 z" }), (0, jsx_runtime_1.jsx)("path", { d: "m 173.77337,1.47 q -11.655,0 -18.585,-6.825 -6.93,-6.825 -6.93,-18.48 0,-12.6 6.72,-20.055 6.825,-7.455 18.9,-7.455 11.97,0 18.9,6.72 6.93,6.72 6.93,18.48 0,12.285 -6.72,19.74 -7.14,7.875 -19.215,7.875 z m 0.735,-48.09 q -5.88,0 -8.505,6.51 -2.205,5.565 -2.205,15.96 0,8.19 1.47,12.915 2.415,7.98 8.505,7.98 5.565,0 8.19,-7.875 2.205,-6.51 2.205,-16.695 0,-8.505 -2.1,-13.23 -2.52,-5.565 -7.56,-5.565 z" }), (0, jsx_runtime_1.jsx)("path", { d: "m 222.03563,-50.4 10.5,36.015 q 3.675,-11.235 5.67,-17.85 2.415,-8.085 5.04,-18.165 1.05,0.105 3.045,0.315 2.1,0.21 2.835,0.21 1.995,0 3.15,-0.105 1.26,-0.21 2.73,-0.42 l 10.71,36.015 q 5.88,-17.43 10.71,-36.015 l 4.2,0.315 4.095,-0.315 q -5.145,13.125 -9.135,24.57 -5.04,14.28 -8.505,26.355 -1.89,-0.21 -3.36,-0.42 -1.365,-0.105 -2.205,-0.105 -1.89,0 -3.36,0.21 -1.365,0.21 -2.31,0.315 l -10.605,-34.755 q -4.41,13.65 -6.72,21.105 -2.31,7.35 -4.095,13.65 -1.89,-0.21 -3.36,-0.42 -1.365,-0.105 -2.31,-0.105 -1.995,0 -3.465,0.21 -1.365,0.21 -2.31,0.315 -3.78,-12.81 -5.04,-17.01 -2.205,-7.245 -5.46,-17.01 -2.835,-8.4 -5.88,-16.905 1.575,0 4.305,0.315 2.73,0.21 3.36,0.21 1.47,0 4.305,-0.21 2.835,-0.315 3.465,-0.315 z" }), (0, jsx_runtime_1.jsx)("path", { d: "m 292.84172,-12.81 h 2.625 q 1.47,4.095 4.62,6.51 3.15,2.415 7.35,2.415 2.94,0 5.46,-1.785 2.625,-1.89 2.625,-4.62 0,-3.885 -6.195,-6.615 -10.395,-4.62 -11.655,-5.46 -6.405,-4.515 -6.405,-12.285 0,-7.77 5.25,-12.18 5.25,-4.515 12.81,-4.515 3.99,0 8.085,1.365 4.095,1.26 7.14,3.57 l -2.52,9.24 h -2.94 q -0.63,-3.57 -3.57,-6.195 -2.835,-2.625 -6.405,-2.625 -3.15,0 -5.46,1.575 -2.31,1.47 -2.31,4.515 0,3.885 6.405,6.51 10.185,4.095 11.865,5.25 6.405,4.41 6.405,12.81 0,7.455 -5.46,12.18 -5.355,4.62 -14.805,4.62 -8.19,0 -14.49,-4.305 z" }), (0, jsx_runtime_1.jsx)("path", { d: "m 349.61228,-29.925 h 15.54 q 0,-6.51 -1.05,-10.395 -1.68,-6.3 -5.88,-6.3 -5.04,0 -7.14,6.195 -1.47,4.305 -1.47,10.5 z m 30.03,5.04 h -30.03 q 0,9.135 3.045,13.86 3.57,5.67 11.55,5.67 3.255,0 6.405,-1.26 3.15,-1.26 5.88,-3.465 l 1.26,0.945 -2.31,5.88 q -6.72,4.725 -15.015,4.725 -12.915,0 -19.635,-7.245 -6.72,-7.245 -6.72,-20.37 0,-11.235 6.405,-18.165 6.51,-7.035 17.64,-7.035 11.655,0 16.905,7.56 4.62,6.615 4.62,18.9 z" })] }));
 }

package/ui/Menu.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { PopoverProps, SvgIconProps } from '@mui/material';
+import type { PopoverProps, SvgIconProps } from '@mui/material';
 interface MenuItemEndDecorationSubMenuProps {
     type: 'subMenu';
 }
@@ -9,7 +8,7 @@ interface MenuItemEndDecorationSelectorProps {
     disabled?: boolean;
 }
 type MenuItemEndDecorationProps = MenuItemEndDecorationSubMenuProps | MenuItemEndDecorationSelectorProps;
-export declare function MenuItemEndDecoration(props: MenuItemEndDecorationProps): React.JSX.Element;
+export declare function MenuItemEndDecoration(props: MenuItemEndDecorationProps): import("react/jsx-runtime").JSX.Element;
 export interface MenuDivider {
     priority?: number;
     type: 'divider';
@@ -50,5 +49,5 @@ interface MenuProps extends PopoverProps {
     menuItems: MenuItem[];
     onMenuItemClick: (event: React.MouseEvent<HTMLLIElement>, callback: (...args: any[]) => void) => void;
 }
-declare function Menu(props: MenuProps): React.JSX.Element;
+declare function Menu(props: MenuProps): import("react/jsx-runtime").JSX.Element;
 export default Menu;

package/ui/Menu.js

@@ -1,56 +1,30 @@
 "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 material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-// icons
+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"));
 const RadioButtonChecked_1 = __importDefault(require("@mui/icons-material/RadioButtonChecked"));
 const RadioButtonUnchecked_1 = __importDefault(require("@mui/icons-material/RadioButtonUnchecked"));
-// other
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
 const util_1 = require("../util");
 const useStyles = (0, mui_1.makeStyles)()({
     paper: {
         position: 'fixed',
         overflowY: 'auto',
         overflowX: 'hidden',
-        // So we see the popover when it's empty.
         minWidth: 16,
         minHeight: 16,
         maxWidth: 'calc(100% - 32px)',
         maxHeight: 'calc(100% - 32px)',
         top: 0,
         left: 0,
-        // We disable the focus ring for mouse, touch and keyboard users.
         outline: 0,
     },
     menuItemEndDecoration: {
@@ -71,32 +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;
         }
-        // No default
     }
-    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;
@@ -111,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);
@@ -167,96 +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) : (
-    // Grow is required for cascading sub-menus
-    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,
@@ -264,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,5 +1,4 @@
-import React from 'react';
-import { MenuItem } from '@jbrowse/core/ui';
+import type { MenuItem } from '@jbrowse/core/ui';
 declare const MenuButton: ({ children, menuItems, closeAfterItemClick, stopPropagation, setOpen, ...rest }: {
     closeAfterItemClick?: boolean;
     children?: React.ReactElement;
@@ -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: {
@@ -36,11 +14,11 @@ const useStyles = (0, mui_1.makeStyles)()({
     },
     flexbox_verticalHandle: {
         cursor: 'col-resize',
-        alignSelf: 'stretch', // the height: 100% is actually unable to function inside flexbox
+        alignSelf: 'stretch',
     },
     flexbox_horizontalHandle: {
         cursor: 'row-resize',
-        alignSelf: 'stretch', // similar to above
+        alignSelf: 'stretch',
     },
 });
 function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: originalClassName, onMouseDown, ...props }) {
@@ -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;