@jbrowse/core 1.7.9 → 2.0.0

package/ui/AboutDialog.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AnyConfigurationModel } from '../configuration/configurationSchema';
+import { AnyConfigurationModel } from '../configuration';
 export default function AboutDialog({ config, handleClose, }: {
     config: AnyConfigurationModel;
     handleClose: () => void;

package/ui/AboutDialog.js

@@ -17,9 +17,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@material-ui/core");
+var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
 
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _material = require("@mui/material");
+
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+
+var _mui = require("tss-react/mui");
 
 var _configuration = require("../configuration");
 
@@ -31,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',
@@ -45,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),
@@ -57,6 +63,11 @@ function AboutDialog(_ref) {
       error = _useState4[0],
       setError = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      copied = _useState6[0],
+      setCopied = _useState6[1];
+
   var session = (0, _util.getSession)(config);
   var rpcManager = session.rpcManager;
   var conf = (0, _configuration.readConfObject)(config);
@@ -112,35 +123,46 @@ function AboutDialog(_ref) {
   var trackName = (0, _configuration.readConfObject)(config, 'name');
 
   if ((0, _configuration.readConfObject)(config, 'type') === 'ReferenceSequenceTrack') {
-    trackName = 'Reference Sequence';
-    session.assemblies.forEach(function (assembly) {
-      if (assembly.sequence === config.configuration) {
-        trackName = "Reference Sequence (".concat((0, _configuration.readConfObject)(assembly, 'name'), ")");
-      }
+    var asm = session.assemblies.find(function (a) {
+      return a.sequence === config.configuration;
     });
+    trackName = asm ? "Reference Sequence (".concat((0, _configuration.readConfObject)(asm, 'name'), ")") : 'Reference Sequence';
   }
 
   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(_BaseFeatureDetail.Attributes, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "contained",
+    style: {
+      float: 'right'
+    },
+    onClick: function onClick() {
+      (0, _copyToClipboard.default)(JSON.stringify(conf, null, 2));
+      setCopied(true);
+      setTimeout(function () {
+        return setCopied(false);
+      }, 1000);
+    }
+  }, copied ? 'Copied to clipboard!' : 'Copy config'), /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.Attributes, {
     attributes: conf,
     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 ? 'Loading file data...' : /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.Attributes, {
+  }, "".concat(error)) : info === undefined ? 'Loading file data...' : /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.Attributes, {
     attributes: details
   })) : null));
 }

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.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MenuItem as JBMenuItem } from './Menu';
+import { PopupState } from 'material-ui-popup-state/hooks';
+declare function CascadingMenuChildren(props: {
+    onMenuItemClick: Function;
+    menuItems: JBMenuItem[];
+    popupState: PopupState;
+}): JSX.Element;
+export default CascadingMenuChildren;

package/ui/CascadingMenu.js

@@ -0,0 +1,207 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _material = require("@mui/material");
+
+var _Menu = require("./Menu");
+
+var _hooks = require("material-ui-popup-state/hooks");
+
+var _HoverMenu = _interopRequireDefault(require("material-ui-popup-state/HoverMenu"));
+
+var _ChevronRight = _interopRequireDefault(require("@mui/icons-material/ChevronRight"));
+
+var _excluded = ["onClick"],
+    _excluded2 = ["title", "inset", "popupId"],
+    _excluded3 = ["popupState", "onMenuItemClick", "menuItems", "classes"],
+    _excluded4 = ["popupState", "onMenuItemClick", "menuItems"],
+    _excluded5 = ["onMenuItemClick", "menuItems"];
+
+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 CascadingContext = /*#__PURE__*/_react.default.createContext({
+  parentPopupState: null,
+  rootPopupState: null
+});
+
+function CascadingMenuItem(_ref) {
+  var onClick = _ref.onClick,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(CascadingContext),
+      rootPopupState = _useContext.rootPopupState;
+
+  if (!rootPopupState) {
+    throw new Error('must be used inside a CascadingMenu');
+  }
+
+  var handleClick = (0, _react.useCallback)(function (event) {
+    rootPopupState.close();
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+  }, [rootPopupState, onClick]);
+  return /*#__PURE__*/_react.default.createElement(_material.MenuItem, (0, _extends2.default)({}, props, {
+    onClick: handleClick
+  }));
+}
+
+function CascadingSubmenu(_ref2) {
+  var title = _ref2.title,
+      inset = _ref2.inset,
+      popupId = _ref2.popupId,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+
+  var _React$useContext = _react.default.useContext(CascadingContext),
+      parentPopupState = _React$useContext.parentPopupState;
+
+  var popupState = (0, _hooks.usePopupState)({
+    popupId: popupId,
+    variant: 'popover',
+    parentPopupState: parentPopupState
+  });
+  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, {
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    popupState: popupState
+  })));
+}
+
+function CascadingSubmenuHover(_ref3) {
+  var popupState = _ref3.popupState,
+      onMenuItemClick = _ref3.onMenuItemClick,
+      menuItems = _ref3.menuItems,
+      classes = _ref3.classes,
+      props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+
+  var _useContext2 = (0, _react.useContext)(CascadingContext),
+      rootPopupState = _useContext2.rootPopupState;
+
+  var context = (0, _react.useMemo)(function () {
+    return {
+      rootPopupState: rootPopupState || popupState,
+      parentPopupState: popupState
+    };
+  }, [rootPopupState, popupState]);
+  return /*#__PURE__*/_react.default.createElement(CascadingContext.Provider, {
+    value: context
+  }, /*#__PURE__*/_react.default.createElement(_HoverMenu.default, (0, _extends2.default)({}, props, (0, _hooks.bindMenu)(popupState))));
+}
+
+function CascadingMenu(_ref4) {
+  var popupState = _ref4.popupState,
+      onMenuItemClick = _ref4.onMenuItemClick,
+      menuItems = _ref4.menuItems,
+      props = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
+
+  var _React$useContext2 = _react.default.useContext(CascadingContext),
+      rootPopupState = _React$useContext2.rootPopupState;
+
+  var context = _react.default.useMemo(function () {
+    return {
+      rootPopupState: rootPopupState || popupState,
+      parentPopupState: popupState
+    };
+  }, [rootPopupState, popupState]);
+
+  return /*#__PURE__*/_react.default.createElement(CascadingContext.Provider, {
+    value: context
+  }, /*#__PURE__*/_react.default.createElement(_material.Menu, (0, _extends2.default)({}, props, (0, _hooks.bindMenu)(popupState))));
+}
+
+function EndDecoration(_ref5) {
+  var item = _ref5.item;
+
+  if ('subMenu' in item) {
+    return /*#__PURE__*/_react.default.createElement(_Menu.MenuItemEndDecoration, {
+      type: "subMenu"
+    });
+  } else if (item.type === 'checkbox' || item.type === 'radio') {
+    return /*#__PURE__*/_react.default.createElement(_Menu.MenuItemEndDecoration, {
+      type: item.type,
+      checked: item.checked,
+      disabled: item.disabled
+    });
+  }
+
+  return null;
+}
+
+function CascadingMenuList(_ref6) {
+  var onMenuItemClick = _ref6.onMenuItemClick,
+      menuItems = _ref6.menuItems,
+      props = (0, _objectWithoutProperties2.default)(_ref6, _excluded5);
+
+  function handleClick(callback) {
+    return function (event) {
+      onMenuItemClick(event, callback);
+    };
+  }
+
+  var hasIcon = menuItems.some(function (menuItem) {
+    return 'icon' in menuItem && menuItem.icon;
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, menuItems.map(function (item, idx) {
+    return 'subMenu' in item ? /*#__PURE__*/_react.default.createElement(CascadingSubmenu, {
+      key: "subMenu-".concat(item.label, "-").concat(idx),
+      popupId: "subMenu-".concat(item.label),
+      title: item.label,
+      inset: hasIcon,
+      onMenuItemClick: onMenuItemClick,
+      menuItems: item.subMenu
+    }, /*#__PURE__*/_react.default.createElement(CascadingMenuList, (0, _extends2.default)({}, props, {
+      onMenuItemClick: onMenuItemClick,
+      menuItems: item.subMenu
+    }))) : item.type === 'divider' ? /*#__PURE__*/_react.default.createElement(_material.Divider, {
+      key: "divider-".concat(idx),
+      component: "li"
+    }) : 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(_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
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        flexGrow: 1,
+        minWidth: 10
+      }
+    }), /*#__PURE__*/_react.default.createElement(EndDecoration, {
+      item: item
+    }));
+  }));
+}
+
+function CascadingMenuChildren(props) {
+  return /*#__PURE__*/_react.default.createElement(CascadingMenu, props, /*#__PURE__*/_react.default.createElement(CascadingMenuList, props));
+}
+
+var _default = CascadingMenuChildren;
+exports.default = _default;

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