@jbrowse/core 1.7.10 → 2.0.1

package/ui/EditableTypography.js

@@ -17,13 +17,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _material = require("@mui/material");
 
-var _react = _interopRequireWildcard(require("react"));
+var _mui = require("tss-react/mui");
 
 var _excluded = ["value", "setValue", "variant"];
 
@@ -35,7 +33,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
     input: {},
     inputBase: {},
@@ -51,7 +49,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     inputFocused: {
       borderStyle: 'solid',
-      borderRadius: theme.shape.borderRadius,
       borderWidth: 2
     }
   };
@@ -94,42 +91,20 @@ var EditableTypography = /*#__PURE__*/_react.default.forwardRef(function (props,
       inputNode && inputNode.blur();
       setBlur(false);
     }
-  }, [blur, inputNode]);
-  var classes = useStyles(props);
-  var theme = (0, _styles.useTheme)();
-  var clientWidth = sizerNode && sizerNode.clientWidth;
-
-  if (clientWidth && clientWidth !== width) {
-    setWidth(clientWidth);
-  }
+  }, [blur, inputNode]); // possibly tss-react does not understand the passing of props to
+  // useStyles, but it appears to work
+  // @ts-ignore
 
-  var sizerRef = function sizerRef(node) {
-    setSizerNode(node);
-  };
-
-  var inputRef = function inputRef(node) {
-    setInputNode(node);
-  };
+  var _useStyles = useStyles(props, {
+    props: props
+  }),
+      classes = _useStyles.classes;
 
-  function handleBlur() {
-    if (editedValue && editedValue !== value) {
-      setValue(editedValue);
-    }
+  var theme = (0, _material.useTheme)();
+  var clientWidth = sizerNode === null || sizerNode === void 0 ? void 0 : sizerNode.clientWidth;
 
-    setEditedValue(undefined);
-  }
-
-  function handleKeyDown(event) {
-    if (event.key === 'Enter') {
-      inputNode && inputNode.blur();
-    } else if (event.key === 'Escape') {
-      setEditedValue(undefined);
-      setBlur(true);
-    }
-  }
-
-  function handleChange(event) {
-    setEditedValue(event.target.value);
+  if (clientWidth && clientWidth !== width) {
+    setWidth(clientWidth);
   }
 
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, other, {
@@ -138,18 +113,22 @@ var EditableTypography = /*#__PURE__*/_react.default.forwardRef(function (props,
     style: {
       position: 'relative'
     }
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    ref: sizerRef,
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    ref: function ref(node) {
+      return setSizerNode(node);
+    },
     component: "span",
     variant: variant,
     className: classes.typography
-  }, editedValue === undefined ? value : editedValue)), /*#__PURE__*/_react.default.createElement(_InputBase.default, {
-    inputRef: inputRef,
+  }, editedValue === undefined ? value : editedValue)), /*#__PURE__*/_react.default.createElement(_material.InputBase, {
+    inputRef: function inputRef(node) {
+      return setInputNode(node);
+    },
     className: classes.inputBase,
     inputProps: {
       style: _objectSpread({
         width: width
-      }, variant && variant !== 'inherit' && variant !== 'srOnly' ? theme.typography[variant] : {})
+      }, variant && variant !== 'inherit' ? theme.typography[variant] : {})
     },
     classes: {
       input: classes.input,
@@ -157,9 +136,24 @@ var EditableTypography = /*#__PURE__*/_react.default.forwardRef(function (props,
       focused: classes.inputFocused
     },
     value: editedValue === undefined ? value : editedValue,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    onBlur: handleBlur
+    onChange: function onChange(event) {
+      return setEditedValue(event.target.value);
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter') {
+        inputNode && inputNode.blur();
+      } else if (event.key === 'Escape') {
+        setEditedValue(undefined);
+        setBlur(true);
+      }
+    },
+    onBlur: function onBlur() {
+      if (editedValue && editedValue !== value) {
+        setValue(editedValue);
+      }
+
+      setEditedValue(undefined);
+    }
   }));
 });
 

package/ui/ErrorMessage.js

@@ -9,29 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@material-ui/core");
-
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  return {
-    message: {
-      border: '1px solid black',
-      background: '#f88',
-      overflow: 'auto',
-      maxHeight: 200,
-      margin: theme.spacing(1),
-      padding: theme.spacing(1)
-    },
-    errorBox: {
-      background: 'lightgrey',
-      border: '1px solid black',
-      margin: 20
-    }
-  };
-});
-
 var ErrorMessage = function ErrorMessage(_ref) {
   var error = _ref.error;
-  var classes = useStyles();
   var snapshotError = '';
   var str = "".concat(error);
   var findStr = 'is not assignable';
@@ -59,9 +38,20 @@ var ErrorMessage = function ErrorMessage(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.message
+    style: {
+      padding: 4,
+      margin: 4,
+      overflow: 'auto',
+      maxHeight: 200,
+      background: '#f88',
+      border: '1px solid black'
+    }
   }, str.slice(0, 10000), snapshotError ? /*#__PURE__*/_react.default.createElement("pre", {
-    className: classes.errorBox
+    style: {
+      background: 'lightgrey',
+      border: '1px solid black',
+      margin: 20
+    }
   }, JSON.stringify(JSON.parse(snapshotError), null, 2)) : null);
 };
 

package/ui/FactoryResetDialog.js

@@ -7,17 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 
-var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
 
-var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
 
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 
 var _react = _interopRequireDefault(require("react"));
 

package/ui/FatalErrorDialog.js

@@ -11,15 +11,15 @@ exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 
-var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 
-var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
 
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/ui/FileSelector/FileSelector.js

@@ -21,20 +21,18 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@material-ui/core");
-
-var _lab = require("@material-ui/lab");
-
 var _mobxReact = require("mobx-react");
 
-var _types = require("../../util/types");
+var _material = require("@mui/material");
 
-var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+var _types = require("../../util/types");
 
 var _LocalFileChooser = _interopRequireDefault(require("./LocalFileChooser"));
 
 var _UrlChooser = _interopRequireDefault(require("./UrlChooser"));
 
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
+
 var _excluded = ["title", "children"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -49,9 +47,9 @@ function ToggleButtonWithTooltip(props) {
   var title = props.title,
       children = props.children,
       other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+  return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: title || ''
-  }, /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, other, children));
+  }, /*#__PURE__*/_react.default.createElement(_material.ToggleButton, other, children));
 }
 
 function shorten(str, len) {
@@ -124,14 +122,14 @@ var FileSelector = (0, _mobxReact.observer)(function (props) {
     }));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Box, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex"
-  }, /*#__PURE__*/_react.default.createElement(_core.InputLabel, {
+  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
     shrink: true
-  }, name)), /*#__PURE__*/_react.default.createElement(_core.Box, {
+  }, name)), /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex",
     flexDirection: "row"
-  }, /*#__PURE__*/_react.default.createElement(_core.Box, null, /*#__PURE__*/_react.default.createElement(_lab.ToggleButtonGroup, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_material.ToggleButtonGroup, {
     value: toggleButtonValue,
     exclusive: true,
     onChange: function onChange(_event, newState) {
@@ -144,10 +142,10 @@ var FileSelector = (0, _mobxReact.observer)(function (props) {
       }
     },
     "aria-label": "file, url, or account picker"
-  }, new URLSearchParams(window.location.search).get('adminKey') ? null : /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, {
+  }, new URLSearchParams(window.location.search).get('adminKey') ? null : /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
     value: "file",
     "aria-label": "local file"
-  }, "File"), /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, {
+  }, "File"), /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
     value: "url",
     "aria-label": "url"
   }, "URL"), shownAccts.map(function (_ref) {
@@ -160,18 +158,20 @@ var FileSelector = (0, _mobxReact.observer)(function (props) {
       "aria-label": name,
       title: name
     }, typeof toggleContents === 'string' ? shorten(toggleContents, 5) : toggleContents || shorten(name, 5));
-  }), hiddenAccts.length ? /*#__PURE__*/_react.default.createElement(_lab.ToggleButton, {
+  }), hiddenAccts.length ?
+  /*#__PURE__*/
+  // @ts-ignore
+  _react.default.createElement(_material.ToggleButton, {
     onClick: function onClick(event) {
       return setAnchorEl(event.target);
     },
     selected: false
-  }, "More", /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null)) : null), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+  }, "More", /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null)) : null), /*#__PURE__*/_react.default.createElement(_material.Menu, {
     open: Boolean(anchorEl),
     anchorEl: anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
     },
-    getContentAnchorEl: null,
     anchorOrigin: {
       vertical: 'bottom',
       horizontal: 'center'
@@ -181,7 +181,7 @@ var FileSelector = (0, _mobxReact.observer)(function (props) {
       horizontal: 'center'
     }
   }, hiddenAccts === null || hiddenAccts === void 0 ? void 0 : hiddenAccts.map(function (acct, idx) {
-    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
       key: acct.internetAccountId,
       value: acct.internetAccountId,
       onClick: function onClick() {
@@ -192,7 +192,7 @@ var FileSelector = (0, _mobxReact.observer)(function (props) {
         setAnchorEl(null);
       }
     }, acct.name);
-  })))), locationInput, /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, description));
+  })))), locationInput, /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, description));
 });
 var _default = FileSelector;
 exports.default = _default;

package/ui/FileSelector/LocalFileChooser.js

@@ -9,7 +9,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
+
+var _mui = require("tss-react/mui");
 
 var _util = require("../../util");
 
@@ -23,7 +25,7 @@ function isBlobLocation(location) {
   return 'blobId' in location;
 }
 
-var useStyles = (0, _core.makeStyles)(function (theme) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
     filename: {
       marginLeft: theme.spacing(1)
@@ -32,18 +34,20 @@ var useStyles = (0, _core.makeStyles)(function (theme) {
 });
 
 function LocalFileChooser(props) {
-  var classes = useStyles();
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
+
   var location = props.location,
       setLocation = props.setLocation;
   var filename = location && (isBlobLocation(location) && location.name || isLocalPathLocation(location) && location.localPath);
   var needToReload = location && isBlobLocation(location) && !(0, _tracks.getBlob)(location.blobId);
-  return /*#__PURE__*/_react.default.createElement(_core.Box, {
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex",
     flexDirection: "row",
     alignItems: "center"
-  }, /*#__PURE__*/_react.default.createElement(_core.Box, null, /*#__PURE__*/_react.default.createElement(_core.FormControl, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_material.FormControl, {
     fullWidth: true
-  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
     variant: "outlined",
     component: "label"
   }, "Choose File", /*#__PURE__*/_react.default.createElement("input", {
@@ -66,11 +70,11 @@ function LocalFileChooser(props) {
         }
       }
     }
-  })))), /*#__PURE__*/_react.default.createElement(_core.Box, null, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  })))), /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     component: "span",
     className: classes.filename,
     color: filename ? 'initial' : 'textSecondary'
-  }, filename || 'No file chosen'), needToReload ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, filename || 'No file chosen'), needToReload ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "error"
   }, "(need to reload)") : null));
 }

package/ui/FileSelector/UrlChooser.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 
 var _mobxReact = require("mobx-react");
 
@@ -19,7 +19,7 @@ function UrlChooser(props) {
   var location = props.location,
       setLocation = props.setLocation,
       label = props.label;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.TextField, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.TextField, {
     fullWidth: true,
     variant: "outlined",
     inputProps: {

package/ui/Icons.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { SvgIconProps } from '@mui/material/SvgIcon';
 export declare function ContentCopy(props: SvgIconProps): JSX.Element;
 export declare function Indexing(props: SvgIconProps): JSX.Element;
 export declare function ContentCut(props: SvgIconProps): JSX.Element;

package/ui/Icons.js

@@ -15,7 +15,7 @@ exports.Save = Save;
 exports.SaveAs = SaveAs;
 exports.TrackSelector = TrackSelector;
 
-var _SvgIcon = _interopRequireDefault(require("@material-ui/core/SvgIcon"));
+var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
 
 var _react = _interopRequireDefault(require("react"));
 

package/ui/Menu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopoverProps, SvgIconProps } from '@material-ui/core';
+import { PopoverProps, SvgIconProps } from '@mui/material';
 interface MenuItemEndDecorationSubMenuProps {
     type: 'subMenu';
 }

package/ui/Menu.js

@@ -20,17 +20,19 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 
-var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
+var _mui = require("tss-react/mui");
 
-var _CheckBox = _interopRequireDefault(require("@material-ui/icons/CheckBox"));
+var _ArrowRight = _interopRequireDefault(require("@mui/icons-material/ArrowRight"));
 
-var _CheckBoxOutlineBlank = _interopRequireDefault(require("@material-ui/icons/CheckBoxOutlineBlank"));
+var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
 
-var _RadioButtonChecked = _interopRequireDefault(require("@material-ui/icons/RadioButtonChecked"));
+var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
 
-var _RadioButtonUnchecked = _interopRequireDefault(require("@material-ui/icons/RadioButtonUnchecked"));
+var _RadioButtonChecked = _interopRequireDefault(require("@mui/icons-material/RadioButtonChecked"));
+
+var _RadioButtonUnchecked = _interopRequireDefault(require("@mui/icons-material/RadioButtonUnchecked"));
 
 var _util = require("../util");
 
@@ -44,7 +46,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var useStyles = (0, _core.makeStyles)({
+var useStyles = (0, _mui.makeStyles)()({
   paper: {
     position: 'fixed',
     overflowY: 'auto',
@@ -67,7 +69,9 @@ var useStyles = (0, _core.makeStyles)({
 });
 
 function MenuItemEndDecoration(props) {
-  var classes = useStyles();
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
+
   var type = props.type;
   var checked;
   var disabled;
@@ -158,8 +162,11 @@ var MenuPage = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       position = _useState10[0],
       setPosition = _useState10[1];
 
-  var paperRef = (0, _react.useRef)();
-  var classes = useStyles();
+  var paperRef = (0, _react.useRef)(null);
+
+  var _useStyles2 = useStyles(),
+      classes = _useStyles2.classes;
+
   var menuItems = props.menuItems,
       onMenuItemClick = props.onMenuItemClick,
       open = props.open,
@@ -223,20 +230,21 @@ var MenuPage = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     };
   }
 
-  var ListContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.MenuList, {
-    autoFocusItem: open && !isSubMenuOpen
+  var ListContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.MenuList, {
+    autoFocusItem: open && !isSubMenuOpen,
+    dense: true
   }, menuItems.sort(function (a, b) {
     return (b.priority || 0) - (a.priority || 0);
   }).map(function (menuItem, idx) {
     if (menuItem.type === 'divider') {
-      return /*#__PURE__*/_react.default.createElement(_core.Divider, {
+      return /*#__PURE__*/_react.default.createElement(_material.Divider, {
         key: "divider-".concat(idx),
         component: "li"
       });
     }
 
     if (menuItem.type === 'subHeader') {
-      return /*#__PURE__*/_react.default.createElement(_core.ListSubheader, {
+      return /*#__PURE__*/_react.default.createElement(_material.ListSubheader, {
         key: "subHeader-".concat(menuItem.label, "-").concat(idx)
       }, menuItem.label);
     }
@@ -246,7 +254,7 @@ var MenuPage = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     if (menuItem.icon) {
       var Icon = menuItem.icon;
-      icon = /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(Icon, null));
+      icon = /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(Icon, null));
     }
 
     if ('subMenu' in menuItem) {
@@ -262,7 +270,7 @@ var MenuPage = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     var onClick = 'onClick' in menuItem ? handleClick(menuItem.onClick) : undefined;
-    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
       key: menuItem.label,
       style: menuItemStyle,
       selected: idx === selectedMenuItemIdx,
@@ -300,15 +308,10 @@ var MenuPage = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         }
       },
       disabled: Boolean(menuItem.disabled)
-    }, icon, /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+    }, icon, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
       primary: menuItem.label,
       secondary: menuItem.subLabel,
       inset: hasIcon && !menuItem.icon
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        flexGrow: 1,
-        minWidth: 10
-      }
     }), endDecoration);
   })), menuItems.map(function (menuItem, idx) {
     var subMenu = null;
@@ -330,17 +333,13 @@ var MenuPage = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return subMenu;
   }));
 
-  if (top) {
-    return ListContents;
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_core.Grow, {
+  return top ? ListContents : /*#__PURE__*/_react.default.createElement(_material.Grow, {
     in: open,
     style: {
       transformOrigin: "0 0 0"
     },
     ref: ref
-  }, /*#__PURE__*/_react.default.createElement(_core.Paper, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Paper, {
     elevation: 8,
     ref: paperRef,
     className: classes.paper,
@@ -354,7 +353,7 @@ function Menu(props) {
       menuItems = props.menuItems,
       onMenuItemClick = props.onMenuItemClick,
       other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_core.Popover, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_material.Popover, (0, _extends2.default)({
     transitionDuration: 0,
     open: open,
     onClose: onClose,

package/ui/PrerenderedCanvas.js

@@ -11,6 +11,8 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -33,6 +35,12 @@ function PrerenderedCanvas(props) {
       imageData = props.imageData,
       blockKey = props.blockKey,
       showSoftClip = props.showSoftClip;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      done = _useState2[0],
+      setDone = _useState2[1];
+
   var featureCanvas = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (!imageData) {
@@ -52,10 +60,11 @@ function PrerenderedCanvas(props) {
     }
 
     (0, _offscreenCanvasPonyfill.drawImageOntoCanvasContext)(imageData, context);
+    setDone(true);
   }, [imageData]);
   var softClipString = showSoftClip ? '_softclipped' : '';
   var blockKeyStr = blockKey ? '_' + blockKey : '';
-  var testId = "prerendered_canvas".concat(softClipString).concat(blockKeyStr);
+  var testId = "prerendered_canvas".concat(softClipString).concat(blockKeyStr).concat(done ? '_done' : '');
   return /*#__PURE__*/_react.default.createElement("canvas", {
     "data-testid": testId,
     ref: featureCanvas,