@jbrowse/embedded-core 2.14.0 → 2.15.0

package/dist/ui/ViewMenu.js

@@ -1,48 +1,24 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
 const mobx_react_1 = require("mobx-react");
 const ui_1 = require("@jbrowse/core/ui");
+const hooks_1 = require("material-ui-popup-state/hooks");
 const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps, IconProps, }) {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
+    const popupState = (0, hooks_1.usePopupState)({
+        popupId: 'viewMenu',
+        variant: 'popover',
+    });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, "aria-label": "more", "aria-controls": "view-menu", "aria-haspopup": "true", onClick: event => {
-                setAnchorEl(event.currentTarget);
-            }, "data-testid": "view_menu_icon" },
+        react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, ...(0, hooks_1.bindTrigger)(popupState), "data-testid": "view_menu_icon" },
             react_1.default.createElement(Menu_1.default, { ...IconProps })),
-        react_1.default.createElement(ui_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onMenuItemClick: (_, callback) => {
+        react_1.default.createElement(ui_1.CascadingMenu, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_event, callback) => {
                 callback();
-                setAnchorEl(undefined);
-            }, onClose: () => {
-                setAnchorEl(undefined);
-            }, menuItems: model.menuItems() })));
+            }, menuItems: model.menuItems(), popupState: popupState })));
 });
 exports.default = ViewMenu;

package/esm/ui/ViewMenu.js

@@ -1,20 +1,19 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { IconButton, } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import { observer } from 'mobx-react';
-import { Menu } from '@jbrowse/core/ui';
+import { CascadingMenu } from '@jbrowse/core/ui';
+import { bindTrigger, bindPopover, usePopupState, } from 'material-ui-popup-state/hooks';
 const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
-    const [anchorEl, setAnchorEl] = useState();
+    const popupState = usePopupState({
+        popupId: 'viewMenu',
+        variant: 'popover',
+    });
     return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { ...IconButtonProps, "aria-label": "more", "aria-controls": "view-menu", "aria-haspopup": "true", onClick: event => {
-                setAnchorEl(event.currentTarget);
-            }, "data-testid": "view_menu_icon" },
+        React.createElement(IconButton, { ...IconButtonProps, ...bindTrigger(popupState), "data-testid": "view_menu_icon" },
             React.createElement(MenuIcon, { ...IconProps })),
-        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onMenuItemClick: (_, callback) => {
+        React.createElement(CascadingMenu, { ...bindPopover(popupState), onMenuItemClick: (_event, callback) => {
                 callback();
-                setAnchorEl(undefined);
-            }, onClose: () => {
-                setAnchorEl(undefined);
-            }, menuItems: model.menuItems() })));
+            }, menuItems: model.menuItems(), popupState: popupState })));
 });
 export default ViewMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/embedded-core",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "JBrowse 2 code shared between embedded products",
   "keywords": [
     "jbrowse",
@@ -42,10 +42,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@jbrowse/core": "^2.14.0",
-    "@jbrowse/product-core": "^2.14.0",
-    "@mui/icons-material": "^5.0.0",
-    "@mui/material": "^5.10.17",
+    "@jbrowse/core": "^2.15.0",
+    "@jbrowse/product-core": "^2.15.0",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
     "copy-to-clipboard": "^3.3.1",
     "react-error-boundary": "^4.0.3"
   },
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9fb8231d932db40adf0a283081765431756c66ff"
+  "gitHead": "87eeb1fbf8311dbf88d5e75b5a265f03beffdda8"
 }