@jbrowse/core 2.0.1 → 2.1.0

package/ui/Menu.js

@@ -1,373 +1,251 @@
 "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.MenuItemEndDecoration = MenuItemEndDecoration;
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _material = require("@mui/material");
-
-var _mui = require("tss-react/mui");
-
-var _ArrowRight = _interopRequireDefault(require("@mui/icons-material/ArrowRight"));
-
-var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
-
-var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
-
-var _RadioButtonChecked = _interopRequireDefault(require("@mui/icons-material/RadioButtonChecked"));
-
-var _RadioButtonUnchecked = _interopRequireDefault(require("@mui/icons-material/RadioButtonUnchecked"));
-
-var _util = require("../util");
-
-var _excluded = ["open", "onClose", "menuItems", "onMenuItemClick"];
-
-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; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-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, _mui.makeStyles)()({
-  paper: {
-    position: 'fixed',
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    // So we see the popover when it's empty.
-    minWidth: 16,
-    minHeight: 16,
-    maxWidth: 'calc(100% - 32px)',
-    maxHeight: 'calc(100% - 32px)',
-    top: 0,
-    left: 0,
-    // We disable the focus ring for mouse, touch and keyboard users.
-    outline: 0
-  },
-  menuItemEndDecoration: {
-    padding: 0,
-    margin: 0,
-    height: 16
-  }
+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 });
+exports.MenuItemEndDecoration = void 0;
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+// icons
+const ArrowRight_1 = __importDefault(require("@mui/icons-material/ArrowRight"));
+const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
+const CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
+const RadioButtonChecked_1 = __importDefault(require("@mui/icons-material/RadioButtonChecked"));
+const RadioButtonUnchecked_1 = __importDefault(require("@mui/icons-material/RadioButtonUnchecked"));
+// other
+const util_1 = require("../util");
+const useStyles = (0, mui_1.makeStyles)()({
+    paper: {
+        position: 'fixed',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        // So we see the popover when it's empty.
+        minWidth: 16,
+        minHeight: 16,
+        maxWidth: 'calc(100% - 32px)',
+        maxHeight: 'calc(100% - 32px)',
+        top: 0,
+        left: 0,
+        // We disable the focus ring for mouse, touch and keyboard users.
+        outline: 0,
+    },
+    menuItemEndDecoration: {
+        padding: 0,
+        margin: 0,
+        height: 16,
+    },
 });
-
 function MenuItemEndDecoration(props) {
-  var _useStyles = useStyles(),
-      classes = _useStyles.classes;
-
-  var type = props.type;
-  var checked;
-  var disabled;
-
-  if ('checked' in props) {
-    ;
-    checked = props.checked;
-    disabled = props.disabled;
-  }
-
-  var icon;
-
-  if (type === 'subMenu') {
-    icon = /*#__PURE__*/_react.default.createElement(_ArrowRight.default, {
-      color: "action"
-    });
-  } else if (type === 'checkbox') {
-    if (checked) {
-      var color = disabled ? 'inherit' : 'secondary';
-      icon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
-        color: color
-      });
-    } else {
-      icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
-        color: "action"
-      });
+    const { classes } = useStyles();
+    const { type } = props;
+    let checked;
+    let disabled;
+    if ('checked' in props) {
+        ;
+        ({ checked, disabled } = props);
     }
-  } else if (type === 'radio') {
-    if (checked) {
-      var _color = disabled ? 'inherit' : 'secondary';
-
-      icon = /*#__PURE__*/_react.default.createElement(_RadioButtonChecked.default, {
-        color: _color
-      });
-    } else {
-      icon = /*#__PURE__*/_react.default.createElement(_RadioButtonUnchecked.default, {
-        color: "action"
-      });
+    let icon;
+    if (type === 'subMenu') {
+        icon = react_1.default.createElement(ArrowRight_1.default, { color: "action" });
     }
-  }
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.menuItemEndDecoration
-  }, icon);
+    else if (type === 'checkbox') {
+        if (checked) {
+            const color = disabled ? 'inherit' : 'secondary';
+            icon = react_1.default.createElement(CheckBox_1.default, { color: color });
+        }
+        else {
+            icon = react_1.default.createElement(CheckBoxOutlineBlank_1.default, { color: "action" });
+        }
+    }
+    else if (type === 'radio') {
+        if (checked) {
+            const color = disabled ? 'inherit' : 'secondary';
+            icon = react_1.default.createElement(RadioButtonChecked_1.default, { color: color });
+        }
+        else {
+            icon = react_1.default.createElement(RadioButtonUnchecked_1.default, { color: "action" });
+        }
+    }
+    return react_1.default.createElement("div", { className: classes.menuItemEndDecoration }, icon);
 }
-
+exports.MenuItemEndDecoration = MenuItemEndDecoration;
 function findNextValidIdx(menuItems, currentIdx) {
-  var idx = menuItems.slice(currentIdx + 1).findIndex(function (menuItem) {
-    return menuItem.type !== 'divider' && menuItem.type !== 'subHeader' && !menuItem.disabled;
-  });
-
-  if (idx === -1) {
-    return idx;
-  }
-
-  return currentIdx + 1 + idx;
+    const idx = menuItems
+        .slice(currentIdx + 1)
+        .findIndex(menuItem => menuItem.type !== 'divider' &&
+        menuItem.type !== 'subHeader' &&
+        !menuItem.disabled);
+    if (idx === -1) {
+        return idx;
+    }
+    return currentIdx + 1 + idx;
 }
-
 function findPreviousValidIdx(menuItems, currentIdx) {
-  return (0, _util.findLastIndex)(menuItems.slice(0, currentIdx), function (menuItem) {
-    return menuItem.type !== 'divider' && menuItem.type !== 'subHeader' && !menuItem.disabled;
-  });
+    return (0, util_1.findLastIndex)(menuItems.slice(0, currentIdx), menuItem => menuItem.type !== 'divider' &&
+        menuItem.type !== 'subHeader' &&
+        !menuItem.disabled);
 }
-
-var MenuPage = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      subMenuAnchorEl = _useState2[0],
-      setSubMenuAnchorEl = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      openSubMenuIdx = _useState4[0],
-      setOpenSubMenuIdx = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isSubMenuOpen = _useState6[0],
-      setIsSubMenuOpen = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      selectedMenuItemIdx = _useState8[0],
-      setSelectedMenuItemIdx = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      position = _useState10[0],
-      setPosition = _useState10[1];
-
-  var paperRef = (0, _react.useRef)(null);
-
-  var _useStyles2 = useStyles(),
-      classes = _useStyles2.classes;
-
-  var menuItems = props.menuItems,
-      onMenuItemClick = props.onMenuItemClick,
-      open = props.open,
-      onClose = props.onClose,
-      anchorEl = props.anchorEl,
-      _props$top = props.top,
-      top = _props$top === void 0 ? false : _props$top;
-  (0, _react.useEffect)(function () {
-    if (!open) {
-      setSubMenuAnchorEl(undefined);
-      setOpenSubMenuIdx(undefined);
-    }
-  }, [open]);
-  (0, _react.useEffect)(function () {
-    var shouldSubMenuBeOpen = open && Boolean(subMenuAnchorEl);
-    var timer;
-
-    if (shouldSubMenuBeOpen && !isSubMenuOpen) {
-      timer = setTimeout(function () {
-        setIsSubMenuOpen(true);
-      }, 300);
-    } else if (!shouldSubMenuBeOpen && isSubMenuOpen) {
-      timer = setTimeout(function () {
-        setIsSubMenuOpen(false);
-      }, 300);
-    }
-
-    return function () {
-      clearTimeout(timer);
-    };
-  }, [isSubMenuOpen, open, subMenuAnchorEl]);
-  (0, _react.useEffect)(function () {
-    if (anchorEl) {
-      var rect = anchorEl.getBoundingClientRect();
-
-      if (position) {
-        if (rect.top !== position.top || rect.left + rect.width !== position.left) {
-          setPosition({
-            top: rect.top,
-            left: rect.left + rect.width
-          });
+const MenuPage = react_1.default.forwardRef((props, ref) => {
+    const [subMenuAnchorEl, setSubMenuAnchorEl] = (0, react_1.useState)();
+    const [openSubMenuIdx, setOpenSubMenuIdx] = (0, react_1.useState)();
+    const [isSubMenuOpen, setIsSubMenuOpen] = (0, react_1.useState)(false);
+    const [selectedMenuItemIdx, setSelectedMenuItemIdx] = (0, react_1.useState)();
+    const [position, setPosition] = (0, react_1.useState)();
+    const paperRef = (0, react_1.useRef)(null);
+    const { classes } = useStyles();
+    const { menuItems, onMenuItemClick, open, onClose, anchorEl, top = false, } = props;
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            setSubMenuAnchorEl(undefined);
+            setOpenSubMenuIdx(undefined);
         }
-      } else {
-        setPosition({
-          top: rect.top,
-          left: rect.left + rect.width
-        });
-      }
-    } else if (!position) {
-      setPosition({});
-    }
-  }, [position, anchorEl]);
-  var hasIcon = menuItems.some(function (menuItem) {
-    return 'icon' in menuItem && menuItem.icon;
-  });
-  var menuItemStyle = {};
-
-  function handleClick(callback) {
-    return function (event) {
-      onMenuItemClick(event, callback);
-    };
-  }
-
-  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(_material.Divider, {
-        key: "divider-".concat(idx),
-        component: "li"
-      });
-    }
-
-    if (menuItem.type === 'subHeader') {
-      return /*#__PURE__*/_react.default.createElement(_material.ListSubheader, {
-        key: "subHeader-".concat(menuItem.label, "-").concat(idx)
-      }, menuItem.label);
-    }
-
-    var icon = null;
-    var endDecoration = null;
-
-    if (menuItem.icon) {
-      var Icon = menuItem.icon;
-      icon = /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(Icon, null));
-    }
-
-    if ('subMenu' in menuItem) {
-      endDecoration = /*#__PURE__*/_react.default.createElement(MenuItemEndDecoration, {
-        type: "subMenu"
-      });
-    } else if (menuItem.type === 'checkbox' || menuItem.type === 'radio') {
-      endDecoration = /*#__PURE__*/_react.default.createElement(MenuItemEndDecoration, {
-        type: menuItem.type,
-        checked: menuItem.checked,
-        disabled: menuItem.disabled
-      });
-    }
-
-    var onClick = 'onClick' in menuItem ? handleClick(menuItem.onClick) : undefined;
-    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-      key: menuItem.label,
-      style: menuItemStyle,
-      selected: idx === selectedMenuItemIdx,
-      onClick: onClick,
-      onMouseMove: function onMouseMove(e) {
-        if (e.currentTarget !== document.activeElement) {
-          e.currentTarget.focus();
-          setSelectedMenuItemIdx(idx);
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        const shouldSubMenuBeOpen = open && Boolean(subMenuAnchorEl);
+        let timer;
+        if (shouldSubMenuBeOpen && !isSubMenuOpen) {
+            timer = setTimeout(() => {
+                setIsSubMenuOpen(true);
+            }, 300);
+        }
+        else if (!shouldSubMenuBeOpen && isSubMenuOpen) {
+            timer = setTimeout(() => {
+                setIsSubMenuOpen(false);
+            }, 300);
         }
-
-        if ('subMenu' in menuItem) {
-          if (openSubMenuIdx !== idx) {
-            setSubMenuAnchorEl(e.currentTarget);
-            setOpenSubMenuIdx(idx);
-          }
-        } else {
-          setSubMenuAnchorEl(undefined);
-          setOpenSubMenuIdx(undefined);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [isSubMenuOpen, open, subMenuAnchorEl]);
+    (0, react_1.useEffect)(() => {
+        if (anchorEl) {
+            const rect = anchorEl.getBoundingClientRect();
+            if (position) {
+                if (rect.top !== position.top ||
+                    rect.left + rect.width !== position.left) {
+                    setPosition({ top: rect.top, left: rect.left + rect.width });
+                }
+            }
+            else {
+                setPosition({ top: rect.top, left: rect.left + rect.width });
+            }
         }
-      },
-      onKeyDown: function onKeyDown(e) {
-        if (e.key === 'ArrowLeft' || e.key === 'Escape') {
-          onClose && onClose(e, 'escapeKeyDown');
-        } else if (e.key === 'ArrowUp') {
-          setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
-        } else if (e.key === 'ArrowDown') {
-          var a = findNextValidIdx(menuItems, idx);
-          setSelectedMenuItemIdx(a);
-        } else if ('subMenu' in menuItem) {
-          if (e.key === 'ArrowRight' || e.key === 'Enter') {
-            setSubMenuAnchorEl(e.currentTarget);
-            setOpenSubMenuIdx(idx);
-            setIsSubMenuOpen(true);
-          }
+        else if (!position) {
+            setPosition({});
         }
-      },
-      disabled: Boolean(menuItem.disabled)
-    }, icon, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
-      primary: menuItem.label,
-      secondary: menuItem.subLabel,
-      inset: hasIcon && !menuItem.icon
-    }), endDecoration);
-  })), menuItems.map(function (menuItem, idx) {
-    var subMenu = null;
-
-    if ('subMenu' in menuItem) {
-      subMenu = /*#__PURE__*/_react.default.createElement(MenuPage, {
-        key: menuItem.label,
-        anchorEl: subMenuAnchorEl,
-        open: isSubMenuOpen && openSubMenuIdx === idx,
-        onClose: function onClose() {
-          setIsSubMenuOpen(false);
-          setSubMenuAnchorEl(undefined);
-        },
-        onMenuItemClick: onMenuItemClick,
-        menuItems: menuItem.subMenu
-      });
+    }, [position, anchorEl]);
+    const hasIcon = menuItems.some(menuItem => 'icon' in menuItem && menuItem.icon);
+    const menuItemStyle = {};
+    function handleClick(callback) {
+        return (event) => {
+            onMenuItemClick(event, callback);
+        };
     }
-
-    return subMenu;
-  }));
-
-  return top ? ListContents : /*#__PURE__*/_react.default.createElement(_material.Grow, {
-    in: open,
-    style: {
-      transformOrigin: "0 0 0"
-    },
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement(_material.Paper, {
-    elevation: 8,
-    ref: paperRef,
-    className: classes.paper,
-    style: _objectSpread({}, position)
-  }, ListContents));
+    const ListContents = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.MenuList, { autoFocusItem: open && !isSubMenuOpen, dense: true }, menuItems
+            .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+            .map((menuItem, idx) => {
+            if (menuItem.type === 'divider') {
+                return react_1.default.createElement(material_1.Divider, { key: `divider-${idx}`, component: "li" });
+            }
+            if (menuItem.type === 'subHeader') {
+                return (react_1.default.createElement(material_1.ListSubheader, { key: `subHeader-${menuItem.label}-${idx}` }, menuItem.label));
+            }
+            let icon = null;
+            let endDecoration = null;
+            if (menuItem.icon) {
+                const Icon = menuItem.icon;
+                icon = (react_1.default.createElement(material_1.ListItemIcon, null,
+                    react_1.default.createElement(Icon, null)));
+            }
+            if ('subMenu' in menuItem) {
+                endDecoration = react_1.default.createElement(MenuItemEndDecoration, { type: "subMenu" });
+            }
+            else if (menuItem.type === 'checkbox' ||
+                menuItem.type === 'radio') {
+                endDecoration = (react_1.default.createElement(MenuItemEndDecoration, { type: menuItem.type, checked: menuItem.checked, disabled: menuItem.disabled }));
+            }
+            const onClick = 'onClick' in menuItem
+                ? handleClick(menuItem.onClick)
+                : undefined;
+            return (react_1.default.createElement(material_1.MenuItem, { key: menuItem.label, style: menuItemStyle, selected: idx === selectedMenuItemIdx, onClick: onClick, onMouseMove: e => {
+                    if (e.currentTarget !== document.activeElement) {
+                        e.currentTarget.focus();
+                        setSelectedMenuItemIdx(idx);
+                    }
+                    if ('subMenu' in menuItem) {
+                        if (openSubMenuIdx !== idx) {
+                            setSubMenuAnchorEl(e.currentTarget);
+                            setOpenSubMenuIdx(idx);
+                        }
+                    }
+                    else {
+                        setSubMenuAnchorEl(undefined);
+                        setOpenSubMenuIdx(undefined);
+                    }
+                }, onKeyDown: e => {
+                    if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+                        onClose && onClose(e, 'escapeKeyDown');
+                    }
+                    else if (e.key === 'ArrowUp') {
+                        setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
+                    }
+                    else if (e.key === 'ArrowDown') {
+                        const a = findNextValidIdx(menuItems, idx);
+                        setSelectedMenuItemIdx(a);
+                    }
+                    else if ('subMenu' in menuItem) {
+                        if (e.key === 'ArrowRight' || e.key === 'Enter') {
+                            setSubMenuAnchorEl(e.currentTarget);
+                            setOpenSubMenuIdx(idx);
+                            setIsSubMenuOpen(true);
+                        }
+                    }
+                }, disabled: Boolean(menuItem.disabled) },
+                icon,
+                react_1.default.createElement(material_1.ListItemText, { primary: menuItem.label, secondary: menuItem.subLabel, inset: hasIcon && !menuItem.icon }),
+                endDecoration));
+        })),
+        menuItems.map((menuItem, idx) => {
+            let subMenu = null;
+            if ('subMenu' in menuItem) {
+                subMenu = (react_1.default.createElement(MenuPage, { key: menuItem.label, anchorEl: subMenuAnchorEl, open: isSubMenuOpen && openSubMenuIdx === idx, onClose: () => {
+                        setIsSubMenuOpen(false);
+                        setSubMenuAnchorEl(undefined);
+                    }, onMenuItemClick: onMenuItemClick, menuItems: menuItem.subMenu }));
+            }
+            return subMenu;
+        })));
+    return top ? (ListContents) : (react_1.default.createElement(material_1.Grow, { in: open, style: { transformOrigin: `0 0 0` }, ref: ref },
+        react_1.default.createElement(material_1.Paper, { elevation: 8, ref: paperRef, className: classes.paper, style: { ...position } }, ListContents)));
 });
-
 function Menu(props) {
-  var open = props.open,
-      onClose = props.onClose,
-      menuItems = props.menuItems,
-      onMenuItemClick = props.onMenuItemClick,
-      other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_material.Popover, (0, _extends2.default)({
-    transitionDuration: 0,
-    open: open,
-    onClose: onClose,
-    BackdropProps: {
-      invisible: true
-    }
-  }, other), /*#__PURE__*/_react.default.createElement(MenuPage, {
-    open: open,
-    onClose: onClose,
-    menuItems: menuItems,
-    onMenuItemClick: onMenuItemClick,
-    top: true
-  }));
+    const { open, onClose, menuItems, onMenuItemClick, ...other } = props;
+    return (react_1.default.createElement(material_1.Popover, { transitionDuration: 0, open: open, onClose: onClose, BackdropProps: { invisible: true }, ...other },
+        react_1.default.createElement(MenuPage, { open: open, onClose: onClose, menuItems: menuItems, onMenuItemClick: onMenuItemClick, top: true })));
 }
-
-var _default = Menu;
-exports.default = _default;
+exports.default = Menu;