@jbrowse/core 1.7.10 → 2.0.1

package/ui/AboutDialog.js

@@ -19,9 +19,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _mui = require("tss-react/mui");
 
 var _configuration = require("../configuration");
 
@@ -33,7 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var useStyles = (0, _core.makeStyles)(function (theme) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -47,7 +49,9 @@ var useStyles = (0, _core.makeStyles)(function (theme) {
 function AboutDialog(_ref) {
   var config = _ref.config,
       handleClose = _ref.handleClose;
-  var classes = useStyles();
+
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
 
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -128,17 +132,18 @@ function AboutDialog(_ref) {
   var details = typeof info === 'string' ? {
     header: "<pre>".concat(info.replace(/</g, '&lt;').replace(/>/g, '&gt;'), "</pre>")
   } : info || {};
-  return /*#__PURE__*/_react.default.createElement(_core.Dialog, {
+  return /*#__PURE__*/_react.default.createElement(_material.Dialog, {
     open: true,
     onClose: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_core.DialogTitle, null, trackName, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_material.DialogTitle, null, trackName, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
     className: classes.closeButton,
     onClick: function onClick() {
       return handleClose();
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Close.default, null))), /*#__PURE__*/_react.default.createElement(_core.DialogContent, null, /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.BaseCard, {
+    },
+    size: "large"
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, null))), /*#__PURE__*/_react.default.createElement(_material.DialogContent, null, /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.BaseCard, {
     title: "Configuration"
-  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
     variant: "contained",
     style: {
       float: 'right'
@@ -155,7 +160,7 @@ function AboutDialog(_ref) {
     omit: ['displays', 'baseUri', 'refNames']
   })), info !== null ? /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.BaseCard, {
     title: "File info"
-  }, error ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, error ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "error"
   }, "".concat(error)) : info === undefined ? 'Loading file data...' : /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.Attributes, {
     attributes: details

package/ui/App.js

@@ -13,9 +13,11 @@ 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 _Launch = _interopRequireDefault(require("@material-ui/icons/Launch"));
+var _mui = require("tss-react/mui");
+
+var _Launch = _interopRequireDefault(require("@mui/icons-material/Launch"));
 
 var _mobxReact = require("mobx-react");
 
@@ -40,33 +42,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // locals
-var useStyles = (0, _core.makeStyles)(function (theme) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
-    '@global': {
-      html: {
-        'font-family': 'Roboto'
-      },
-
-      /* Based on: https://www.digitalocean.com/community/tutorials/css-scrollbars */
-
-      /* The emerging W3C standard
-         that is currently Firefox-only */
-      '*': {
-        'scrollbar-width': 'auto',
-        'scrollbar-color': 'rgba(0,0,0,.5) rgba(128,128,128)'
-      },
-
-      /* Works on Chrome/Edge/Safari */
-      '*::-webkit-scrollbar': {
-        '-webkit-appearance': 'none',
-        width: '12px'
-      },
-      '*::-webkit-scrollbar-thumb': {
-        'background-color': 'rgba(0,0,0,.5)',
-        '-webkit-box-shadow': '0 0 1px rgba(255,255,255,.5)'
-      }
-    },
     root: {
+      fontFamily: 'Roboto',
       display: 'grid',
       height: '100vh',
       width: '100%'
@@ -141,7 +120,9 @@ var App = (0, _mobxReact.observer)(function (_ref2) {
   var session = _ref2.session,
       _ref2$HeaderButtons = _ref2.HeaderButtons,
       HeaderButtons = _ref2$HeaderButtons === void 0 ? /*#__PURE__*/_react.default.createElement("div", null) : _ref2$HeaderButtons;
-  var classes = useStyles();
+
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
 
   var _getEnv = (0, _mobxStateTree.getEnv)(session),
       pluginManager = _getEnv.pluginManager;
@@ -195,10 +176,10 @@ var App = (0, _mobxReact.observer)(function (_ref2) {
     className: classes.menuBarAndComponents
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.menuBar
-  }, /*#__PURE__*/_react.default.createElement(_core.AppBar, {
+  }, /*#__PURE__*/_react.default.createElement(_material.AppBar, {
     className: classes.appBar,
     position: "static"
-  }, /*#__PURE__*/_react.default.createElement(_core.Toolbar, null, menus.map(function (menu) {
+  }, /*#__PURE__*/_react.default.createElement(_material.Toolbar, null, menus.map(function (menu) {
     return /*#__PURE__*/_react.default.createElement(_DropDownMenu.default, {
       key: menu.label,
       menuTitle: menu.label,
@@ -207,7 +188,7 @@ var App = (0, _mobxReact.observer)(function (_ref2) {
     });
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.grow
-  }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+  }), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: "Rename Session",
     arrow: true
   }, /*#__PURE__*/_react.default.createElement(_EditableTypography.default, {
@@ -251,20 +232,20 @@ var App = (0, _mobxReact.observer)(function (_ref2) {
       session: session,
       getTrackType: pluginManager.getTrackType
     })));
-  }) : /*#__PURE__*/_react.default.createElement(_core.Paper, {
+  }) : /*#__PURE__*/_react.default.createElement(_material.Paper, {
     className: classes.selectPaper
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, null, "Select a view to launch"), /*#__PURE__*/_react.default.createElement(_core.Select, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, "Select a view to launch"), /*#__PURE__*/_react.default.createElement(_material.Select, {
     value: value,
     onChange: function onChange(event) {
       return setValue(event.target.value);
     }
   }, viewTypes.map(function (_ref3) {
     var name = _ref3.name;
-    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
       key: name,
       value: name
     }, name);
-  })), /*#__PURE__*/_react.default.createElement(_core.Button, {
+  })), /*#__PURE__*/_react.default.createElement(_material.Button, {
     onClick: function onClick() {
       session.addView(value, {});
     },
@@ -274,9 +255,9 @@ var App = (0, _mobxReact.observer)(function (_ref2) {
     style: {
       height: 300
     }
-  }))), activeWidgets.size > 0 && minimized ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+  }))), activeWidgets.size > 0 && minimized ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: "Open drawer widget"
-  }, /*#__PURE__*/_react.default.createElement(_core.Fab, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Fab, {
     className: drawerPosition === 'right' ? classes.fabRight : classes.fabLeft,
     color: "primary",
     "data-testid": "drawer-maximize",

package/ui/AssemblySelector.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputProps as IIP } from '@material-ui/core';
+import { InputProps as IIP } from '@mui/material';
 import { AbstractSessionModel } from '../util';
 declare const AssemblySelector: ({ session, onChange, selected, InputProps, extra, }: {
     session: AbstractSessionModel;

package/ui/AssemblySelector.js

@@ -17,13 +17,15 @@ var _mobxReact = require("mobx-react");
 
 var _configuration = require("../configuration");
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
+
+var _mui = require("tss-react/mui");
 
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var useStyles = (0, _core.makeStyles)(function () {
+var useStyles = (0, _mui.makeStyles)()(function () {
   return {
     importFormEntry: {
       minWidth: 180
@@ -72,7 +74,10 @@ var AssemblySelector = (0, _mobxReact.observer)(function (_ref) {
       InputProps = _ref.InputProps,
       _ref$extra = _ref.extra,
       extra = _ref$extra === void 0 ? 0 : _ref$extra;
-  var classes = useStyles();
+
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
+
   var assemblyNames = session.assemblyNames,
       assemblyManager = session.assemblyManager; // constructs a localstorage key based on host/path/config to help
   // remember. non-config assists usage with e.g. embedded apps
@@ -91,7 +96,7 @@ var AssemblySelector = (0, _mobxReact.observer)(function (_ref) {
     }
   }, [selection, onChange, selected]);
   var error = assemblyNames.length ? '' : 'No configured assemblies';
-  return /*#__PURE__*/_react.default.createElement(_core.TextField, {
+  return /*#__PURE__*/_react.default.createElement(_material.TextField, {
     select: true,
     label: "Assembly",
     variant: "outlined",
@@ -110,7 +115,7 @@ var AssemblySelector = (0, _mobxReact.observer)(function (_ref) {
   }, assemblyNames.map(function (name) {
     var assembly = assemblyManager.get(name);
     var displayName = assembly ? (0, _configuration.getConf)(assembly, 'displayName') : '';
-    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
       key: name,
       value: name
     }, displayName || name);

package/ui/CascadingMenu.js

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 
 var _Menu = require("./Menu");
 
@@ -23,7 +23,7 @@ var _hooks = require("material-ui-popup-state/hooks");
 
 var _HoverMenu = _interopRequireDefault(require("material-ui-popup-state/HoverMenu"));
 
-var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
 
 var _excluded = ["onClick"],
     _excluded2 = ["title", "inset", "popupId"],
@@ -52,14 +52,10 @@ function CascadingMenuItem(_ref) {
   }
 
   var handleClick = (0, _react.useCallback)(function (event) {
-    // @ts-ignore
-    rootPopupState.close(event);
-
-    if (onClick) {
-      onClick(event);
-    }
+    rootPopupState.close();
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [rootPopupState, onClick]);
-  return /*#__PURE__*/_react.default.createElement(_core.MenuItem, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_material.MenuItem, (0, _extends2.default)({}, props, {
     onClick: handleClick
   }));
 }
@@ -78,7 +74,7 @@ function CascadingSubmenu(_ref2) {
     variant: 'popover',
     parentPopupState: parentPopupState
   });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.MenuItem, (0, _extends2.default)({}, (0, _hooks.bindHover)(popupState), (0, _hooks.bindFocus)(popupState)), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.MenuItem, (0, _extends2.default)({}, (0, _hooks.bindHover)(popupState), (0, _hooks.bindFocus)(popupState)), /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
     primary: title,
     inset: inset
   }), /*#__PURE__*/_react.default.createElement(_ChevronRight.default, null)), /*#__PURE__*/_react.default.createElement(CascadingSubmenuHover, (0, _extends2.default)({}, props, {
@@ -133,7 +129,7 @@ function CascadingMenu(_ref4) {
 
   return /*#__PURE__*/_react.default.createElement(CascadingContext.Provider, {
     value: context
-  }, /*#__PURE__*/_react.default.createElement(_core.Menu, (0, _extends2.default)({}, props, (0, _hooks.bindMenu)(popupState))));
+  }, /*#__PURE__*/_react.default.createElement(_material.Menu, (0, _extends2.default)({}, props, (0, _hooks.bindMenu)(popupState))));
 }
 
 function EndDecoration(_ref5) {
@@ -179,16 +175,16 @@ function CascadingMenuList(_ref6) {
     }, /*#__PURE__*/_react.default.createElement(CascadingMenuList, (0, _extends2.default)({}, props, {
       onMenuItemClick: onMenuItemClick,
       menuItems: item.subMenu
-    }))) : item.type === 'divider' ? /*#__PURE__*/_react.default.createElement(_core.Divider, {
+    }))) : item.type === 'divider' ? /*#__PURE__*/_react.default.createElement(_material.Divider, {
       key: "divider-".concat(idx),
       component: "li"
-    }) : item.type === 'subHeader' ? /*#__PURE__*/_react.default.createElement(_core.ListSubheader, {
+    }) : item.type === 'subHeader' ? /*#__PURE__*/_react.default.createElement(_material.ListSubheader, {
       key: "subHeader-".concat(item.label, "-").concat(idx)
     }, item.label) : /*#__PURE__*/_react.default.createElement(CascadingMenuItem, {
       key: "".concat(item.label, "-").concat(idx),
       onClick: 'onClick' in item ? handleClick(item.onClick) : undefined,
       disabled: Boolean(item.disabled)
-    }, item.icon ? /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(item.icon, null)) : null, ' ', /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+    }, item.icon ? /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(item.icon, null)) : null, ' ', /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
       primary: item.label,
       secondary: item.subLabel,
       inset: hasIcon && !item.icon

package/ui/Drawer.js

@@ -9,15 +9,15 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _material = require("@mui/material");
 
-var _styles = require("@material-ui/core/styles");
+var _mui = require("tss-react/mui");
 
 var _mobxReact = require("mobx-react");
 
 var _ResizeHandle = _interopRequireDefault(require("./ResizeHandle"));
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
     paper: {
       overflowY: 'auto',
@@ -40,8 +40,11 @@ function Drawer(_ref) {
       session = _ref.session;
   var drawerPosition = session.drawerPosition,
       drawerWidth = session.drawerWidth;
-  var classes = useStyles();
-  return /*#__PURE__*/_react.default.createElement(_Paper.default, {
+
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
+
+  return /*#__PURE__*/_react.default.createElement(_material.Paper, {
     className: classes.paper,
     elevation: 16,
     square: true

package/ui/DrawerWidget.js

@@ -13,19 +13,21 @@ 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 _mui = require("tss-react/mui");
 
 var _mobxReact = require("mobx-react");
 
 var _mobxStateTree = require("mobx-state-tree");
 
-var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
 
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 
-var _Minimize = _interopRequireDefault(require("@material-ui/icons/Minimize"));
+var _Minimize = _interopRequireDefault(require("@mui/icons-material/Minimize"));
 
-var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
+var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
 
 var _Drawer = _interopRequireDefault(require("./Drawer"));
 
@@ -35,29 +37,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // icons
 // locals
-var useStyles = (0, _core.makeStyles)(function (theme) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
-    drawerActions: {
-      float: 'right',
-      '&:hover': {
-        backgroundColor: (0, _core.alpha)(theme.palette.secondary.contrastText, theme.palette.action.hoverOpacity),
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
-    drawerToolbar: {
-      paddingLeft: theme.spacing(2)
+    formControl: {
+      margin: 0
     },
     spacer: {
       flexGrow: 1
     },
     drawerSelect: {
+      margin: 0,
       color: theme.palette.secondary.contrastText
     },
-    drawerLoading: {
-      margin: theme.spacing(2)
-    },
     dropDownIcon: {
       color: theme.palette.secondary.contrastText
     },
@@ -76,23 +67,26 @@ var DrawerHeader = (0, _mobxReact.observer)(function (_ref) {
   var visibleWidget = session.visibleWidget,
       activeWidgets = session.activeWidgets,
       drawerPosition = session.drawerPosition;
-  var classes = useStyles();
+
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
 
   var _React$useState = _react.default.useState(null),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       anchorEl = _React$useState2[0],
       setAnchorEl = _React$useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_core.AppBar, {
+  return /*#__PURE__*/_react.default.createElement(_material.AppBar, {
     position: "sticky",
     className: classes.header,
     ref: function ref(_ref2) {
       return setToolbarHeight((_ref2 === null || _ref2 === void 0 ? void 0 : _ref2.getBoundingClientRect().height) || 0);
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.Toolbar, {
-    disableGutters: true,
-    className: classes.drawerToolbar
-  }, /*#__PURE__*/_react.default.createElement(_core.Select, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
+    disableGutters: true
+  }, /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+    className: classes.formControl
+  }, /*#__PURE__*/_react.default.createElement(_material.Select, {
     value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id,
     "data-testid": "widget-drawer-selects",
     className: classes.drawerSelect,
@@ -103,7 +97,7 @@ var DrawerHeader = (0, _mobxReact.observer)(function (_ref) {
       var widget = session.activeWidgets.get(widgetId);
 
       if (!widget) {
-        return /*#__PURE__*/_react.default.createElement(_core.Typography, {
+        return /*#__PURE__*/_react.default.createElement(_material.Typography, {
           variant: "h6",
           color: "inherit"
         }, "Unknown widget");
@@ -114,7 +108,7 @@ var DrawerHeader = (0, _mobxReact.observer)(function (_ref) {
           heading = widgetType.heading;
       return HeadingComponent ? /*#__PURE__*/_react.default.createElement(HeadingComponent, {
         model: widget
-      }) : /*#__PURE__*/_react.default.createElement(_core.Typography, {
+      }) : /*#__PURE__*/_react.default.createElement(_material.Typography, {
         variant: "h6",
         color: "inherit"
       }, heading);
@@ -123,65 +117,65 @@ var DrawerHeader = (0, _mobxReact.observer)(function (_ref) {
       var w = session.activeWidgets.get(e.target.value);
 
       if (!w) {
-        session.notify('Widget not found ' + e.target.value, 'warning');
+        session.notify("Widget not found ".concat(e.target.value), 'warning');
+      } else {
+        session.showWidget(w);
       }
-
-      session.showWidget(w);
     }
   }, Array.from(activeWidgets.values()).map(function (widget) {
     var widgetType = pluginManager.getWidgetType(widget.type);
     var HeadingComponent = widgetType.HeadingComponent,
         heading = widgetType.heading;
-    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
       "data-testid": "widget-drawer-selects-item-".concat(widget.type),
       key: widget.id,
       value: widget.id
     }, HeadingComponent ? /*#__PURE__*/_react.default.createElement(HeadingComponent, {
       model: widget
-    }) : /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    }) : /*#__PURE__*/_react.default.createElement(_material.Typography, {
       variant: "h6",
       color: "inherit"
-    }, heading), /*#__PURE__*/_react.default.createElement(_core.ListItemSecondaryAction, null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    }, heading), /*#__PURE__*/_react.default.createElement(_material.IconButton, {
       "data-testid": "".concat(widget.type, "-drawer-delete"),
       color: "inherit",
       "aria-label": "Delete",
       onClick: function onClick() {
-        session.hideWidget(widget);
+        return session.hideWidget(widget);
       }
-    }, /*#__PURE__*/_react.default.createElement(_Delete.default, null))));
-  })), /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement(_Delete.default, null)));
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.spacer
-  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
     "data-testid": "drawer-close",
     color: "inherit",
     onClick: function onClick(event) {
       return setAnchorEl(event.currentTarget);
     }
-  }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null)), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+  }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null)), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: "Minimize drawer"
-  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
     "data-testid": "drawer-minimize",
     color: "inherit",
     onClick: function onClick() {
       session.notify("Drawer minimized, click button on ".concat(drawerPosition, " side of screen to re-open"), 'info');
       session.minimizeWidgetDrawer();
     }
-  }, /*#__PURE__*/_react.default.createElement(_Minimize.default, null))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+  }, /*#__PURE__*/_react.default.createElement(_Minimize.default, null))), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: "Close drawer"
-  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+  }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
     "data-testid": "drawer-close",
     color: "inherit",
     onClick: function onClick() {
-      session.hideWidget(visibleWidget);
+      return session.hideWidget(visibleWidget);
     }
-  }, /*#__PURE__*/_react.default.createElement(_Close.default, null))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
+  }, /*#__PURE__*/_react.default.createElement(_Close.default, null))))), /*#__PURE__*/_react.default.createElement(_material.Menu, {
     anchorEl: anchorEl,
     open: Boolean(anchorEl),
     onClose: function onClose() {
       return setAnchorEl(null);
     }
   }, ['left', 'right'].map(function (option) {
-    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
       key: option,
       selected: drawerPosition === 'option',
       onClick: function onClick() {

package/ui/DropDownMenu.d.ts

@@ -1,17 +1,9 @@
 /// <reference types="react" />
-import PropTypes from 'prop-types';
 import { MenuItem } from './Menu';
 declare function DropDownMenu({ menuTitle, session, menuItems, }: {
     menuTitle: string;
     session: any;
     menuItems: MenuItem[];
 }): JSX.Element;
-declare namespace DropDownMenu {
-    var propTypes: {
-        menuTitle: PropTypes.Validator<string>;
-        menuItems: PropTypes.Validator<any>;
-        session: PropTypes.Validator<any>;
-    };
-}
 declare const _default: typeof DropDownMenu;
 export default _default;

package/ui/DropDownMenu.js

@@ -13,15 +13,13 @@ 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 _styles = require("@material-ui/core/styles");
-
-var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+var _mui = require("tss-react/mui");
 
 var _mobxReact = require("mobx-react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
 
 var _Menu = _interopRequireDefault(require("./Menu"));
 
@@ -29,14 +27,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
     root: {
       display: 'flex'
     },
     buttonRoot: {
       '&:hover': {
-        backgroundColor: (0, _styles.alpha)(theme.palette.primary.contrastText, theme.palette.action.hoverOpacity),
+        backgroundColor: (0, _material.alpha)(theme.palette.primary.contrastText, theme.palette.action.hoverOpacity),
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
@@ -56,7 +54,9 @@ function DropDownMenu(_ref) {
       setOpen = _useState2[1];
 
   var anchorEl = (0, _react.useRef)(null);
-  var classes = useStyles();
+
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
 
   function handleToggle() {
     setOpen(!open);
@@ -73,7 +73,7 @@ function DropDownMenu(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.root
-  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
     ref: anchorEl,
     onClick: handleToggle,
     color: "inherit",
@@ -94,12 +94,6 @@ function DropDownMenu(_ref) {
   }));
 }
 
-DropDownMenu.propTypes = {
-  menuTitle: _propTypes.default.string.isRequired,
-  menuItems: _mobxReact.PropTypes.arrayOrObservableArray.isRequired,
-  session: _mobxReact.PropTypes.objectOrObservableObject.isRequired
-};
-
 var _default = (0, _mobxReact.observer)(DropDownMenu);
 
 exports.default = _default;

package/ui/EditableTypography.d.ts

@@ -1,5 +1,5 @@
-import { TypographyProps } from '@material-ui/core/Typography';
 import React from 'react';
+import { TypographyProps } from '@mui/material';
 declare type Variant = TypographyProps['variant'];
 declare type EditableTypographyClassKey = 'input' | 'inputBase' | 'inputRoot' | 'inputFocused';
 interface EditableTypographyPropTypes {