@jbrowse/core 1.7.11 → 2.1.0

package/ui/DrawerWidget.js

@@ -1,224 +1,124 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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;
 });
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _core = require("@material-ui/core");
-
-var _mobxReact = require("mobx-react");
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
-
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-
-var _Minimize = _interopRequireDefault(require("@material-ui/icons/Minimize"));
-
-var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
-
-var _Drawer = _interopRequireDefault(require("./Drawer"));
-
-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 __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 material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
 // icons
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
+const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
 // locals
-var useStyles = (0, _core.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)
+const Drawer_1 = __importDefault(require("./Drawer"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    formControl: {
+        margin: 0,
     },
     spacer: {
-      flexGrow: 1
+        flexGrow: 1,
     },
     drawerSelect: {
-      color: theme.palette.secondary.contrastText
-    },
-    drawerLoading: {
-      margin: theme.spacing(2)
+        margin: 0,
+        color: theme.palette.secondary.contrastText,
     },
     dropDownIcon: {
-      color: theme.palette.secondary.contrastText
+        color: theme.palette.secondary.contrastText,
     },
     header: {
-      background: theme.palette.secondary.main
-    }
-  };
-});
-var DrawerHeader = (0, _mobxReact.observer)(function (_ref) {
-  var session = _ref.session,
-      setToolbarHeight = _ref.setToolbarHeight;
-
-  var _getEnv = (0, _mobxStateTree.getEnv)(session),
-      pluginManager = _getEnv.pluginManager;
-
-  var visibleWidget = session.visibleWidget,
-      activeWidgets = session.activeWidgets,
-      drawerPosition = session.drawerPosition;
-  var classes = useStyles();
-
-  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, {
-    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, {
-    value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id,
-    "data-testid": "widget-drawer-selects",
-    className: classes.drawerSelect,
-    classes: {
-      icon: classes.dropDownIcon
+        background: theme.palette.secondary.main,
     },
-    renderValue: function renderValue(widgetId) {
-      var widget = session.activeWidgets.get(widgetId);
-
-      if (!widget) {
-        return /*#__PURE__*/_react.default.createElement(_core.Typography, {
-          variant: "h6",
-          color: "inherit"
-        }, "Unknown widget");
-      }
-
-      var widgetType = pluginManager.getWidgetType(widget.type);
-      var HeadingComponent = widgetType.HeadingComponent,
-          heading = widgetType.heading;
-      return HeadingComponent ? /*#__PURE__*/_react.default.createElement(HeadingComponent, {
-        model: widget
-      }) : /*#__PURE__*/_react.default.createElement(_core.Typography, {
-        variant: "h6",
-        color: "inherit"
-      }, heading);
-    },
-    onChange: function onChange(e) {
-      var w = session.activeWidgets.get(e.target.value);
-
-      if (!w) {
-        session.notify('Widget not found ' + e.target.value, 'warning');
-      }
-
-      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, {
-      "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, {
-      variant: "h6",
-      color: "inherit"
-    }, heading), /*#__PURE__*/_react.default.createElement(_core.ListItemSecondaryAction, null, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-      "data-testid": "".concat(widget.type, "-drawer-delete"),
-      color: "inherit",
-      "aria-label": "Delete",
-      onClick: function onClick() {
-        session.hideWidget(widget);
-      }
-    }, /*#__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, {
-    "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, {
-    title: "Minimize drawer"
-  }, /*#__PURE__*/_react.default.createElement(_core.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, {
-    title: "Close drawer"
-  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    "data-testid": "drawer-close",
-    color: "inherit",
-    onClick: function onClick() {
-      session.hideWidget(visibleWidget);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Close.default, null))))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
-    anchorEl: anchorEl,
-    open: Boolean(anchorEl),
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    }
-  }, ['left', 'right'].map(function (option) {
-    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-      key: option,
-      selected: drawerPosition === 'option',
-      onClick: function onClick() {
-        session.setDrawerPosition(option);
-        setAnchorEl(null);
-      }
-    }, option);
-  })));
+}));
+const DrawerHeader = (0, mobx_react_1.observer)(({ session, setToolbarHeight, }) => {
+    const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
+    const { visibleWidget, activeWidgets, drawerPosition } = session;
+    const { classes } = useStyles();
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    return (react_1.default.createElement(material_1.AppBar, { position: "sticky", className: classes.header, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
+        react_1.default.createElement(material_1.Toolbar, { disableGutters: true },
+            react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+                react_1.default.createElement(material_1.Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
+                        const widget = session.activeWidgets.get(widgetId);
+                        if (!widget) {
+                            return (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
+                        }
+                        const widgetType = pluginManager.getWidgetType(widget.type);
+                        const { HeadingComponent, heading } = widgetType;
+                        return HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading));
+                    }, onChange: e => {
+                        const w = session.activeWidgets.get(e.target.value);
+                        if (!w) {
+                            session.notify(`Widget not found ${e.target.value}`, 'warning');
+                        }
+                        else {
+                            session.showWidget(w);
+                        }
+                    } }, Array.from(activeWidgets.values()).map(widget => {
+                    const widgetType = pluginManager.getWidgetType(widget.type);
+                    const { HeadingComponent, heading } = widgetType;
+                    return (react_1.default.createElement(material_1.MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
+                        HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading)),
+                        react_1.default.createElement(material_1.IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
+                            react_1.default.createElement(Delete_1.default, null))));
+                }))),
+            react_1.default.createElement("div", { className: classes.spacer }),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(material_1.IconButton, { "data-testid": "drawer-close", color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
+                    react_1.default.createElement(MoreVert_1.default, null)),
+                react_1.default.createElement(material_1.Tooltip, { title: "Minimize drawer" },
+                    react_1.default.createElement(material_1.IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
+                            session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
+                            session.minimizeWidgetDrawer();
+                        } },
+                        react_1.default.createElement(Minimize_1.default, null))),
+                react_1.default.createElement(material_1.Tooltip, { title: "Close drawer" },
+                    react_1.default.createElement(material_1.IconButton, { "data-testid": "drawer-close", color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
+                        react_1.default.createElement(Close_1.default, null))))),
+        react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (react_1.default.createElement(material_1.MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
+                session.setDrawerPosition(option);
+                setAnchorEl(null);
+            } }, option))))));
 });
-var DrawerWidget = (0, _mobxReact.observer)(function (_ref3) {
-  var session = _ref3.session;
-  var visibleWidget = session.visibleWidget;
-
-  var _getEnv2 = (0, _mobxStateTree.getEnv)(session),
-      pluginManager = _getEnv2.pluginManager;
-
-  var DrawerComponent = visibleWidget ? pluginManager.getWidgetType(visibleWidget.type).ReactComponent : null; // we track the toolbar height because components that use virtualized
-  // height want to be able to fill the contained, minus the toolbar height
-  // (the position static/sticky is included in AutoSizer estimates)
-
-  var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      toolbarHeight = _useState2[0],
-      setToolbarHeight = _useState2[1];
-
-  return /*#__PURE__*/_react.default.createElement(_Drawer.default, {
-    session: session
-  }, /*#__PURE__*/_react.default.createElement(DrawerHeader, {
-    session: session,
-    setToolbarHeight: setToolbarHeight
-  }), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-    fallback: /*#__PURE__*/_react.default.createElement("div", null, "Loading...")
-  }, /*#__PURE__*/_react.default.createElement(DrawerComponent, {
-    model: visibleWidget,
-    session: session,
-    toolbarHeight: toolbarHeight
-  })));
+const DrawerWidget = (0, mobx_react_1.observer)(({ session }) => {
+    const { visibleWidget } = session;
+    const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
+    const DrawerComponent = visibleWidget
+        ? pluginManager.getWidgetType(visibleWidget.type).ReactComponent
+        : null;
+    // we track the toolbar height because components that use virtualized
+    // height want to be able to fill the contained, minus the toolbar height
+    // (the position static/sticky is included in AutoSizer estimates)
+    const [toolbarHeight, setToolbarHeight] = (0, react_1.useState)(0);
+    return (react_1.default.createElement(Drawer_1.default, { session: session },
+        react_1.default.createElement(DrawerHeader, { session: session, setToolbarHeight: setToolbarHeight }),
+        react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null, "Loading...") },
+            react_1.default.createElement(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }))));
 });
-var _default = DrawerWidget;
-exports.default = _default;
+exports.default = DrawerWidget;

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

@@ -1,105 +1,68 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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;
 });
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _core = require("@material-ui/core");
-
-var _styles = require("@material-ui/core/styles");
-
-var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
-
-var _mobxReact = require("mobx-react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Menu = _interopRequireDefault(require("./Menu"));
-
-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, _styles.makeStyles)(function (theme) {
-  return {
+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 material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
+const Menu_1 = __importDefault(require("./Menu"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
-      display: 'flex'
+        display: 'flex',
     },
     buttonRoot: {
-      '&:hover': {
-        backgroundColor: (0, _styles.alpha)(theme.palette.primary.contrastText, theme.palette.action.hoverOpacity),
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
+        '&:hover': {
+            backgroundColor: (0, material_1.alpha)(theme.palette.primary.contrastText, theme.palette.action.hoverOpacity),
+            '@media (hover: none)': {
+                backgroundColor: 'transparent',
+            },
+        },
+    },
+}));
+function DropDownMenu({ menuTitle, session, menuItems, }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const anchorEl = (0, react_1.useRef)(null);
+    const { classes } = useStyles();
+    function handleToggle() {
+        setOpen(!open);
     }
-  };
-});
-
-function DropDownMenu(_ref) {
-  var menuTitle = _ref.menuTitle,
-      session = _ref.session,
-      menuItems = _ref.menuItems;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var anchorEl = (0, _react.useRef)(null);
-  var classes = useStyles();
-
-  function handleToggle() {
-    setOpen(!open);
-  }
-
-  function handleMenuItemClick(_event, callback) {
-    callback(session);
-    handleClose();
-  }
-
-  function handleClose() {
-    setOpen(false);
-  }
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
-    ref: anchorEl,
-    onClick: handleToggle,
-    color: "inherit",
-    "data-testid": "dropDownMenuButton",
-    classes: {
-      root: classes.buttonRoot
+    function handleMenuItemClick(_event, callback) {
+        callback(session);
+        handleClose();
     }
-  }, menuTitle, /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null)), /*#__PURE__*/_react.default.createElement(_Menu.default, {
-    anchorEl: anchorEl.current,
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'left'
-    },
-    onMenuItemClick: handleMenuItemClick,
-    open: open,
-    onClose: handleClose,
-    menuItems: menuItems
-  }));
+    function handleClose() {
+        setOpen(false);
+    }
+    return (react_1.default.createElement("div", { className: classes.root },
+        react_1.default.createElement(material_1.Button, { ref: anchorEl, onClick: handleToggle, color: "inherit", "data-testid": "dropDownMenuButton", classes: { root: classes.buttonRoot } },
+            menuTitle,
+            react_1.default.createElement(ArrowDropDown_1.default, null)),
+        react_1.default.createElement(Menu_1.default, { anchorEl: anchorEl.current, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: menuItems })));
 }
-
-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;
+exports.default = (0, mobx_react_1.observer)(DropDownMenu);

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 {