@deephaven/components 0.5.2-beta.0 → 0.6.1-demo.8

package/dist/context-actions/ContextMenu.js

@@ -1,83 +1,62 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import Log from '@deephaven/log';
 import { PromiseUtils } from '@deephaven/utils';
-import ContextActionUtils from './ContextActionUtils';
-import ContextMenuItem from './ContextMenuItem';
-import LoadingSpinner from '../LoadingSpinner';
+import ContextActionUtils from "./ContextActionUtils.js";
+import ContextMenuItem from "./ContextMenuItem.js";
+import LoadingSpinner from "../LoadingSpinner.js";
 var log = Log.module('ContextMenu');
 
 /** Do not use this class directly. Use ContextMenuRoot and ContextActions instead. */
-var ContextMenu = /*#__PURE__*/function (_PureComponent) {
-  _inherits(ContextMenu, _PureComponent);
-
-  var _super = _createSuper(ContextMenu);
-
-  function ContextMenu(props) {
-    var _this;
+class ContextMenu extends PureComponent {
+  static handleContextMenu(e) {
+    if (e.metaKey) {
+      return;
+    }
 
-    _classCallCheck(this, ContextMenu);
+    e.stopPropagation();
+    e.preventDefault();
+  }
 
-    _this = _super.call(this, props);
+  constructor(props) {
+    super(props);
 
-    _defineProperty(_assertThisInitialized(_this), "container", void 0);
+    _defineProperty(this, "container", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "oldFocus", void 0);
+    _defineProperty(this, "oldFocus", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "activeSubMenuRef", void 0);
+    _defineProperty(this, "activeSubMenuRef", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "subMenuTimer", void 0);
+    _defineProperty(this, "subMenuTimer", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "rAF", void 0);
+    _defineProperty(this, "rAF", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "initialPosition", void 0);
+    _defineProperty(this, "initialPosition", void 0);
 
-    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
-    _this.handleCloseSubMenu = _this.handleCloseSubMenu.bind(_assertThisInitialized(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleMenuItemClick = _this.handleMenuItemClick.bind(_assertThisInitialized(_this));
-    _this.handleMenuItemContextMenu = _this.handleMenuItemContextMenu.bind(_assertThisInitialized(_this));
-    _this.handleMenuItemMouseMove = _this.handleMenuItemMouseMove.bind(_assertThisInitialized(_this));
-    _this.handleMouseLeave = _this.handleMouseLeave.bind(_assertThisInitialized(_this));
-    _this.handleWindowResize = _this.handleWindowResize.bind(_assertThisInitialized(_this));
-    _this.container = /*#__PURE__*/React.createRef();
-    _this.oldFocus = document.activeElement;
-    _this.activeSubMenuRef = /*#__PURE__*/React.createRef();
-    _this.subMenuTimer = 0;
-    _this.rAF = 0;
-    _this.initialPosition = {
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleCloseSubMenu = this.handleCloseSubMenu.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
+    this.handleMenuItemContextMenu = this.handleMenuItemContextMenu.bind(this);
+    this.handleMenuItemMouseMove = this.handleMenuItemMouseMove.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+    this.container = /*#__PURE__*/React.createRef();
+    this.oldFocus = document.activeElement;
+    this.activeSubMenuRef = /*#__PURE__*/React.createRef();
+    this.subMenuTimer = 0;
+    this.rAF = 0;
+    this.initialPosition = {
       top: props.top,
       left: props.left
     };
-    _this.state = {
+    this.state = {
       menuItems: [],
       pendingItems: [],
       activeSubMenu: null,
@@ -89,580 +68,567 @@ var ContextMenu = /*#__PURE__*/function (_PureComponent) {
       keyboardIndex: -1,
       mouseIndex: -1
     };
-    return _this;
   }
 
-  _createClass(ContextMenu, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
+  componentDidMount() {
+    this.initMenu();
+    this.verifyPosition();
+    window.addEventListener('resize', this.handleWindowResize); // rAF is needed to wait for a submenus popper to be created before
+    // attempting to set focus, however on a quick mount/unmount when
+    // mousing past an item, the submenu could be unmounted before the
+    // async rAF finishes, so it is cancelled in willUnmount()
+
+    this.rAF = window.requestAnimationFrame(() => {
+      var _this$container$curre;
+
+      (_this$container$curre = this.container.current) === null || _this$container$curre === void 0 ? void 0 : _this$container$curre.focus();
+      var {
+        onMenuOpened
+      } = this.props;
+      onMenuOpened(this);
+    });
+  }
 
-      this.initMenu();
-      this.verifyPosition();
-      window.addEventListener('resize', this.handleWindowResize); // rAF is needed to wait for a submenus popper to be created before
-      // attempting to set focus, however on a quick mount/unmount when
-      // mousing past an item, the submenu could be unmounted before the
-      // async rAF finishes, so it is cancelled in willUnmount()
-
-      this.rAF = window.requestAnimationFrame(function () {
-        var _this2$container$curr;
-
-        (_this2$container$curr = _this2.container.current) === null || _this2$container$curr === void 0 ? void 0 : _this2$container$curr.focus();
-        var onMenuOpened = _this2.props.onMenuOpened;
-        onMenuOpened(_this2);
-      });
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var actions = this.props.actions;
-      var activeSubMenu = this.state.activeSubMenu;
-
-      if (activeSubMenu !== prevState.activeSubMenu) {
-        if (activeSubMenu == null) {
-          var _this$container$curre;
-
-          // close sub menu, refocus parent menu
-          (_this$container$curre = this.container.current) === null || _this$container$curre === void 0 ? void 0 : _this$container$curre.focus();
-        } else {
-          // open sub menu, set its initial position
-          this.setActiveSubMenuPosition();
-        }
-      }
+  componentDidUpdate(prevProps, prevState) {
+    var {
+      actions
+    } = this.props;
+    var {
+      activeSubMenu
+    } = this.state;
 
-      if (prevProps.actions !== actions) {
+    if (activeSubMenu !== prevState.activeSubMenu) {
+      if (activeSubMenu == null) {
         var _this$container$curre2;
 
-        this.initMenu();
-
-        if (!((_this$container$curre2 = this.container.current) !== null && _this$container$curre2 !== void 0 && _this$container$curre2.contains(document.activeElement))) {
-          var _this$container$curre3;
-
-          (_this$container$curre3 = this.container.current) === null || _this$container$curre3 === void 0 ? void 0 : _this$container$curre3.focus();
-        }
+        // close sub menu, refocus parent menu
+        (_this$container$curre2 = this.container.current) === null || _this$container$curre2 === void 0 ? void 0 : _this$container$curre2.focus();
+      } else {
+        // open sub menu, set its initial position
+        this.setActiveSubMenuPosition();
       }
-
-      this.verifyPosition();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.cancelPromises();
-      window.removeEventListener('resize', this.handleWindowResize);
-      cancelAnimationFrame(this.rAF);
     }
-  }, {
-    key: "getKeyboardIndex",
-    value: function getKeyboardIndex() {
-      var options = this.props.options;
-
-      if (options.separateKeyboardMouse) {
-        var keyboardIndex = this.state.keyboardIndex;
-        return keyboardIndex;
-      }
 
-      return this.getMouseIndex();
-    }
-  }, {
-    key: "setKeyboardIndex",
-    value: function setKeyboardIndex(index) {
-      var options = this.props.options;
+    if (prevProps.actions !== actions) {
+      var _this$container$curre3;
 
-      if (options.separateKeyboardMouse) {
-        this.setState({
-          keyboardIndex: index
-        });
-      } else {
-        this.setMouseIndex(index);
+      this.initMenu();
+
+      if (!((_this$container$curre3 = this.container.current) !== null && _this$container$curre3 !== void 0 && _this$container$curre3.contains(document.activeElement))) {
+        var _this$container$curre4;
+
+        (_this$container$curre4 = this.container.current) === null || _this$container$curre4 === void 0 ? void 0 : _this$container$curre4.focus();
       }
     }
-  }, {
-    key: "getMouseIndex",
-    value: function getMouseIndex() {
-      var mouseIndex = this.state.mouseIndex;
-      return mouseIndex;
-    }
-  }, {
-    key: "setMouseIndex",
-    value: function setMouseIndex(index) {
-      this.setState({
-        mouseIndex: index
-      });
-    }
-  }, {
-    key: "initMenu",
-    value: function initMenu() {
-      // cancel any pending close and promises
-      this.cancelPromises();
-      cancelAnimationFrame(this.rAF);
-      var options = this.props.options;
-      var keyboardIndex = options.initialKeyboardIndex;
-
-      if (keyboardIndex === undefined) {
-        keyboardIndex = -1;
-      }
 
-      var actions = this.props.actions;
-      var menuItems = ContextActionUtils.getMenuItems(actions);
-      var nonPromiseItems = [];
+    this.verifyPosition();
+  }
 
-      for (var i = menuItems.length - 1; i >= 0; i -= 1) {
-        var menuItem = menuItems[i];
+  componentWillUnmount() {
+    this.cancelPromises();
+    window.removeEventListener('resize', this.handleWindowResize);
+    cancelAnimationFrame(this.rAF);
+  }
 
-        if (menuItem instanceof Promise) {
-          this.initMenuPromise(menuItem);
-        } else {
-          nonPromiseItems.push(menuItem);
-        }
-      }
+  getKeyboardIndex() {
+    var {
+      options
+    } = this.props;
 
-      this.setState({
-        mouseIndex: -1,
-        keyboardIndex: keyboardIndex,
-        activeSubMenu: null,
-        menuItems: ContextActionUtils.sortActions(nonPromiseItems)
-      });
+    if (options.separateKeyboardMouse) {
+      var {
+        keyboardIndex
+      } = this.state;
+      return keyboardIndex;
     }
-  }, {
-    key: "initMenuPromise",
-    value: function initMenuPromise(promise) {
-      var _this3 = this;
-
-      // make all promises cancellable
-      var cancellablePromise = PromiseUtils.makeCancelable(promise);
-      this.setState(function (state) {
-        return {
-          pendingItems: state.pendingItems.concat(cancellablePromise)
-        };
-      });
-      cancellablePromise.then(function (resolvedMenuItems) {
-        _this3.setState(function (state) {
-          var index = state.pendingItems.indexOf(cancellablePromise);
 
-          if (index >= 0) {
-            var pendingItems = state.pendingItems.slice();
-            pendingItems.splice(index, 1);
-            return {
-              menuItems: ContextActionUtils.sortActions(state.menuItems.concat(resolvedMenuItems)),
-              pendingItems: pendingItems
-            };
-          } // This item is stale, don't update the menu
+    return this.getMouseIndex();
+  }
 
+  setKeyboardIndex(index) {
+    var {
+      options
+    } = this.props;
 
-          return null;
-        });
-      }, function (error) {
-        if (PromiseUtils.isCanceled(error)) {
-          return; // Canceled promise is ignored
-        } // remove failed item from pending list
+    if (options.separateKeyboardMouse) {
+      this.setState({
+        keyboardIndex: index
+      });
+    } else {
+      this.setMouseIndex(index);
+    }
+  }
 
+  getMouseIndex() {
+    var {
+      mouseIndex
+    } = this.state;
+    return mouseIndex;
+  }
 
-        _this3.setState(function (state) {
-          var index = state.pendingItems.indexOf(cancellablePromise);
+  setMouseIndex(index) {
+    this.setState({
+      mouseIndex: index
+    });
+  }
 
-          if (index >= 0) {
-            var pendingItems = state.pendingItems.slice();
-            pendingItems.splice(index, 1);
-            return {
-              pendingItems: pendingItems
-            };
-          }
+  initMenu() {
+    // cancel any pending close and promises
+    this.cancelPromises();
+    cancelAnimationFrame(this.rAF);
+    var {
+      options
+    } = this.props;
+    var keyboardIndex = options.initialKeyboardIndex;
+
+    if (keyboardIndex === undefined) {
+      keyboardIndex = -1;
+    }
 
-          return null;
-        }); // Log the error
+    var {
+      actions
+    } = this.props;
+    var menuItems = ContextActionUtils.getMenuItems(actions);
+    var nonPromiseItems = [];
 
+    for (var i = menuItems.length - 1; i >= 0; i -= 1) {
+      var menuItem = menuItems[i];
 
-        log.error(error);
-      });
-    }
-  }, {
-    key: "cancelPromises",
-    value: function cancelPromises() {
-      var pendingItems = this.state.pendingItems;
-      pendingItems.map(function (item) {
-        return item.cancel();
-      });
+      if (menuItem instanceof Promise) {
+        this.initMenuPromise(menuItem);
+      } else {
+        nonPromiseItems.push(menuItem);
+      }
     }
-    /**
-     * Sets the unverfied start position of a submenu. Submenu then self-verfies
-     * its own position and potentially reports back a new position.
-     */
 
-  }, {
-    key: "setActiveSubMenuPosition",
-    value: function setActiveSubMenuPosition() {
-      if (this.activeSubMenuRef.current === null) return;
-      var parentRect = this.activeSubMenuRef.current.getBoundingClientRect(); // intentionally rect.right, we want the sub menu to start at the right edge of the current menu
+    this.setState({
+      mouseIndex: -1,
+      keyboardIndex,
+      activeSubMenu: null,
+      menuItems: ContextActionUtils.sortActions(nonPromiseItems)
+    });
+  }
 
-      this.setState({
-        subMenuTop: parentRect.top,
-        subMenuLeft: parentRect.right,
-        subMenuParentHeight: parentRect.height,
-        subMenuParentWidth: parentRect.width
+  initMenuPromise(promise) {
+    // make all promises cancellable
+    var cancellablePromise = PromiseUtils.makeCancelable(promise);
+    this.setState(state => ({
+      pendingItems: state.pendingItems.concat(cancellablePromise)
+    }));
+    cancellablePromise.then(resolvedMenuItems => {
+      this.setState(state => {
+        var index = state.pendingItems.indexOf(cancellablePromise);
+
+        if (index >= 0) {
+          var pendingItems = state.pendingItems.slice();
+          pendingItems.splice(index, 1);
+          return {
+            menuItems: ContextActionUtils.sortActions(state.menuItems.concat(resolvedMenuItems)),
+            pendingItems
+          };
+        } // This item is stale, don't update the menu
+
+
+        return null;
       });
-    }
-    /**
-     * Verifies the position of this menu in relation to the parent to make sure it's on screen.
-     * Will update the top left state (updatePosition) if necessary (causing a re-render)
-     * By default it tries to top-align with parent, at the right side of the parent.
-     * Because we aren't a native context menu and can't escape window bounds, we also do
-     * somethings to better fit on screen, such as the "nudge" offset position, and further
-     * allow overflow scrolling for large menus in a small window.
-     */
-
-  }, {
-    key: "verifyPosition",
-    value: function verifyPosition() {
-      var _this$container$curre4, _this$container$curre5, _this$container$curre6, _this$container$curre7;
-
-      var _this$props = this.props,
-          options = _this$props.options,
-          updatePosition = _this$props.updatePosition,
-          subMenuParentWidth = _this$props.subMenuParentWidth,
-          subMenuParentHeight = _this$props.subMenuParentHeight,
-          oldTop = _this$props.top,
-          oldLeft = _this$props.left;
-
-      if (!this.container.current || options.doNotVerifyPosition) {
-        return;
-      } // initial position is used rather than current position,
-      // as the number of menu items can change (actions can bubble)
-      // and menu should always be positioned relative to spawn point
-
-
-      var _this$initialPosition = this.initialPosition,
-          top = _this$initialPosition.top,
-          left = _this$initialPosition.left;
-
-      var _ref = (_this$container$curre4 = (_this$container$curre5 = this.container.current) === null || _this$container$curre5 === void 0 ? void 0 : _this$container$curre5.getBoundingClientRect()) !== null && _this$container$curre4 !== void 0 ? _this$container$curre4 : {
-        width: 0,
-        height: 0
-      },
-          width = _ref.width,
-          height = _ref.height;
-
-      var hasOverflow = ((_this$container$curre6 = (_this$container$curre7 = this.container.current) === null || _this$container$curre7 === void 0 ? void 0 : _this$container$curre7.scrollHeight) !== null && _this$container$curre6 !== void 0 ? _this$container$curre6 : 0) > window.innerHeight;
+    }, error => {
+      if (PromiseUtils.isCanceled(error)) {
+        return; // Canceled promise is ignored
+      } // remove failed item from pending list
 
-      if (height === 0 || width === 0) {
-        // We don't have a height or width yet, don't bother doing anything
-        return;
-      } // does it fit below?
 
+      this.setState(state => {
+        var index = state.pendingItems.indexOf(cancellablePromise);
 
-      if (top + height > window.innerHeight) {
-        // can it be flipped to above? include offset if submenu (defaults to 0 if not submenu)
-        if (top - height - subMenuParentHeight > 0) {
-          // flip like a native menu would
-          top -= height - subMenuParentHeight;
-        } else {
-          // still doesnt fit? okay, position at bottom edge
-          top = window.innerHeight - height;
+        if (index >= 0) {
+          var pendingItems = state.pendingItems.slice();
+          pendingItems.splice(index, 1);
+          return {
+            pendingItems
+          };
         }
-      }
 
-      if (left + width > window.innerWidth) {
-        // less picky about left right positioning, just keep it going off to right
-        left = left - width - subMenuParentWidth;
-      }
+        return null;
+      }); // Log the error
 
-      if (oldLeft !== left || oldTop !== top) {
-        // parent owns positioning as single source of truth, ask to update props
-        this.setState({
-          hasOverflow: hasOverflow
-        });
-        updatePosition(top, left);
-      }
-    } // since window resize doesn't trigger blur, listen and close the menu
+      log.error(error);
+    });
+  }
+
+  cancelPromises() {
+    var {
+      pendingItems
+    } = this.state;
+    pendingItems.map(item => item.cancel());
+  }
+  /**
+   * Sets the unverfied start position of a submenu. Submenu then self-verfies
+   * its own position and potentially reports back a new position.
+   */
+
+
+  setActiveSubMenuPosition() {
+    if (this.activeSubMenuRef.current === null) return;
+    var parentRect = this.activeSubMenuRef.current.getBoundingClientRect(); // intentionally rect.right, we want the sub menu to start at the right edge of the current menu
+
+    this.setState({
+      subMenuTop: parentRect.top,
+      subMenuLeft: parentRect.right,
+      subMenuParentHeight: parentRect.height,
+      subMenuParentWidth: parentRect.width
+    });
+  }
+  /**
+   * Verifies the position of this menu in relation to the parent to make sure it's on screen.
+   * Will update the top left state (updatePosition) if necessary (causing a re-render)
+   * By default it tries to top-align with parent, at the right side of the parent.
+   * Because we aren't a native context menu and can't escape window bounds, we also do
+   * somethings to better fit on screen, such as the "nudge" offset position, and further
+   * allow overflow scrolling for large menus in a small window.
+   */
+
+
+  verifyPosition() {
+    var _this$container$curre5, _this$container$curre6, _this$container$curre7, _this$container$curre8;
+
+    var {
+      options,
+      updatePosition,
+      subMenuParentWidth,
+      subMenuParentHeight,
+      top: oldTop,
+      left: oldLeft
+    } = this.props;
+
+    if (!this.container.current || options.doNotVerifyPosition) {
+      return;
+    } // initial position is used rather than current position,
+    // as the number of menu items can change (actions can bubble)
+    // and menu should always be positioned relative to spawn point
+
+
+    var {
+      top,
+      left
+    } = this.initialPosition;
+    var {
+      width,
+      height
+    } = (_this$container$curre5 = (_this$container$curre6 = this.container.current) === null || _this$container$curre6 === void 0 ? void 0 : _this$container$curre6.getBoundingClientRect()) !== null && _this$container$curre5 !== void 0 ? _this$container$curre5 : {
+      width: 0,
+      height: 0
+    };
+    var hasOverflow = ((_this$container$curre7 = (_this$container$curre8 = this.container.current) === null || _this$container$curre8 === void 0 ? void 0 : _this$container$curre8.scrollHeight) !== null && _this$container$curre7 !== void 0 ? _this$container$curre7 : 0) > window.innerHeight;
+
+    if (height === 0 || width === 0) {
+      // We don't have a height or width yet, don't bother doing anything
+      return;
+    } // does it fit below?
 
-  }, {
-    key: "handleWindowResize",
-    value: function handleWindowResize() {
-      if (!this.container.current) {
-        return;
+
+    if (top + height > window.innerHeight) {
+      // can it be flipped to above? include offset if submenu (defaults to 0 if not submenu)
+      if (top - height - subMenuParentHeight > 0) {
+        // flip like a native menu would
+        top -= height - subMenuParentHeight;
+      } else {
+        // still doesnt fit? okay, position at bottom edge
+        top = window.innerHeight - height;
       }
+    }
 
-      this.closeMenu(true);
+    if (left + width > window.innerWidth) {
+      // less picky about left right positioning, just keep it going off to right
+      left = left - width - subMenuParentWidth;
     }
-  }, {
-    key: "handleBlur",
-    value: function handleBlur(e) {
-      if (!this.container.current) {
-        log.warn('Container is null!');
-        return;
-      }
 
-      if (!this.container.current.contains(e.relatedTarget)) {
-        var element = e.relatedTarget;
-        var isContextMenuChild = false;
+    if (oldLeft !== left || oldTop !== top) {
+      // parent owns positioning as single source of truth, ask to update props
+      this.setState({
+        hasOverflow
+      });
+      updatePosition(top, left);
+    }
+  } // since window resize doesn't trigger blur, listen and close the menu
 
-        while (element && !isContextMenuChild) {
-          isContextMenuChild = element.hasAttribute('data-dh-context-menu');
-          element = element.parentElement;
-        }
 
-        if (!isContextMenuChild) {
-          // close all submenus on blur
-          this.closeMenu(true);
-        }
-      }
+  handleWindowResize() {
+    if (!this.container.current) {
+      return;
     }
-    /** Returns whether the specified key should remove the menu. Depends on the side the parent is on. */
 
-  }, {
-    key: "isEscapeKey",
-    value: function isEscapeKey(key) {
-      var left = this.props.left;
-      return key === 'Escape' || left < 0 && key === 'ArrowRight' || key === 'ArrowLeft';
+    this.closeMenu(true);
+  }
+
+  handleBlur(e) {
+    if (!this.container.current) {
+      log.warn('Container is null!');
+      return;
     }
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(e) {
-      var menuItems = this.state.menuItems;
-      var oldFocus = this.getKeyboardIndex();
-      var newFocus = oldFocus;
-      var openSubMenu = false;
-
-      if (e.key === 'Enter' || e.key === ' ') {
-        if (oldFocus >= 0 && oldFocus < menuItems.length) {
-          this.handleMenuItemClick(menuItems[oldFocus], e);
-        }
 
-        return;
-      }
+    if (!this.container.current.contains(e.relatedTarget)) {
+      var element = e.relatedTarget;
+      var isContextMenuChild = false;
 
-      if (e.key === 'ArrowRight') {
-        if (oldFocus >= 0 && oldFocus <= menuItems.length) {
-          openSubMenu = true;
-        } else {
-          newFocus = 0;
-        }
-      } else if (this.isEscapeKey(e.key)) {
-        newFocus = null;
-      } else if (e.key === 'ArrowUp' || e.shiftKey && e.key === 'Tab') {
-        newFocus = ContextActionUtils.getNextMenuItem(newFocus, -1, menuItems);
-      } else if (e.key === 'ArrowDown' || e.key === 'Tab') {
-        newFocus = ContextActionUtils.getNextMenuItem(newFocus, 1, menuItems);
+      while (element && !isContextMenuChild) {
+        isContextMenuChild = element.hasAttribute('data-dh-context-menu');
+        element = element.parentElement;
       }
 
-      if (openSubMenu) {
-        this.openSubMenu(oldFocus);
-        e.preventDefault();
-        e.stopPropagation();
-        return;
+      if (!isContextMenuChild) {
+        // close all submenus on blur
+        this.closeMenu(true);
       }
+    }
+  }
+  /** Returns whether the specified key should remove the menu. Depends on the side the parent is on. */
 
-      if (oldFocus !== newFocus) {
-        if (newFocus !== null) {
-          this.setKeyboardIndex(newFocus);
-        } else {
-          this.closeMenu();
 
-          if (this.oldFocus instanceof HTMLElement) {
-            this.oldFocus.focus();
-          }
-        }
+  isEscapeKey(key) {
+    var {
+      left
+    } = this.props;
+    return key === 'Escape' || left < 0 && key === 'ArrowRight' || key === 'ArrowLeft';
+  }
 
-        e.preventDefault();
-        e.stopPropagation();
+  handleKeyDown(e) {
+    var {
+      menuItems
+    } = this.state;
+    var oldFocus = this.getKeyboardIndex();
+    var newFocus = oldFocus;
+    var openSubMenu = false;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (oldFocus >= 0 && oldFocus < menuItems.length) {
+        this.handleMenuItemClick(menuItems[oldFocus], e);
       }
+
+      return;
     }
-  }, {
-    key: "openSubMenu",
-    value: function openSubMenu(index) {
-      var _this$state = this.state,
-          menuItems = _this$state.menuItems,
-          activeSubMenu = _this$state.activeSubMenu;
-      var newSubMenu = menuItems[index].actions ? index : null;
-      if (activeSubMenu === newSubMenu) return;
-      this.setState({
-        activeSubMenu: newSubMenu,
-        subMenuTop: null,
-        subMenuLeft: null
-      });
-    }
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
-      var _this4 = this;
-
-      var closeAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var _this$props2 = this.props,
-          closeMenu = _this$props2.closeMenu,
-          onMenuClosed = _this$props2.onMenuClosed;
-      cancelAnimationFrame(this.rAF);
-      this.rAF = window.requestAnimationFrame(function () {
-        closeMenu(closeAll);
-        onMenuClosed(_this4);
-      });
-    }
-  }, {
-    key: "closeSubMenu",
-    value: function closeSubMenu() {
-      this.setState({
-        activeSubMenu: null
-      });
-    }
-  }, {
-    key: "handleCloseSubMenu",
-    value: function handleCloseSubMenu(closeAllMenus) {
-      if (closeAllMenus) {
-        this.closeMenu(true);
+
+    if (e.key === 'ArrowRight') {
+      if (oldFocus >= 0 && oldFocus <= menuItems.length) {
+        openSubMenu = true;
       } else {
-        this.closeSubMenu();
+        newFocus = 0;
       }
+    } else if (this.isEscapeKey(e.key)) {
+      newFocus = null;
+    } else if (e.key === 'ArrowUp' || e.shiftKey && e.key === 'Tab') {
+      newFocus = ContextActionUtils.getNextMenuItem(newFocus, -1, menuItems);
+    } else if (e.key === 'ArrowDown' || e.key === 'Tab') {
+      newFocus = ContextActionUtils.getNextMenuItem(newFocus, 1, menuItems);
     }
-  }, {
-    key: "handleMenuItemClick",
-    value: function handleMenuItemClick(menuItem, e) {
+
+    if (openSubMenu) {
+      this.openSubMenu(oldFocus);
       e.preventDefault();
       e.stopPropagation();
-      var menuItems = this.state.menuItems;
-
-      if (menuItem != null && !menuItem.disabled) {
-        if (menuItem.actions != null) {
-          this.openSubMenu(menuItems.indexOf(menuItem));
-        } else if (menuItem.action != null) {
-          menuItem.action();
-          this.closeMenu(true);
+      return;
+    }
+
+    if (oldFocus !== newFocus) {
+      if (newFocus !== null) {
+        this.setKeyboardIndex(newFocus);
+      } else {
+        this.closeMenu();
+
+        if (this.oldFocus instanceof HTMLElement) {
+          this.oldFocus.focus();
         }
       }
+
+      e.preventDefault();
+      e.stopPropagation();
     }
-  }, {
-    key: "handleMenuItemContextMenu",
-    value: function handleMenuItemContextMenu(menuItem, e) {
-      if (e.metaKey) {
-        return;
-      }
+  }
+
+  openSubMenu(index) {
+    var {
+      menuItems,
+      activeSubMenu
+    } = this.state;
+    var newSubMenu = menuItems[index].actions ? index : null;
+    if (activeSubMenu === newSubMenu) return;
+    this.setState({
+      activeSubMenu: newSubMenu,
+      subMenuTop: null,
+      subMenuLeft: null
+    });
+  }
+
+  closeMenu() {
+    var closeAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var {
+      closeMenu,
+      onMenuClosed
+    } = this.props;
+    cancelAnimationFrame(this.rAF);
+    this.rAF = window.requestAnimationFrame(() => {
+      closeMenu(closeAll);
+      onMenuClosed(this);
+    });
+  }
+
+  closeSubMenu() {
+    this.setState({
+      activeSubMenu: null
+    });
+  }
 
-      this.handleMenuItemClick(menuItem, e);
+  handleCloseSubMenu(closeAllMenus) {
+    if (closeAllMenus) {
+      this.closeMenu(true);
+    } else {
+      this.closeSubMenu();
     }
-  }, {
-    key: "handleMenuItemMouseMove",
-    value: function handleMenuItemMouseMove(menuItem) {
-      var menuItems = this.state.menuItems;
-      var focusIndex = menuItems.indexOf(menuItem);
-      this.setMouseIndex(focusIndex);
-
-      if (focusIndex >= 0 && focusIndex < menuItems.length && !menuItem.disabled) {
-        this.openSubMenu(focusIndex);
+  }
+
+  handleMenuItemClick(menuItem, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var {
+      menuItems
+    } = this.state;
+
+    if (menuItem != null && !menuItem.disabled) {
+      if (menuItem.actions != null) {
+        this.openSubMenu(menuItems.indexOf(menuItem));
+      } else if (menuItem.action != null) {
+        menuItem.action();
+        this.closeMenu(true);
       }
     }
-  }, {
-    key: "handleMouseLeave",
-    value: function handleMouseLeave() {
-      this.setMouseIndex(-1);
+  }
+
+  handleMenuItemContextMenu(menuItem, e) {
+    if (e.metaKey) {
+      return;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this5 = this;
-
-      var menuItemElements = [];
-      var _this$props3 = this.props,
-          top = _this$props3.top,
-          left = _this$props3.left;
-      var _this$state2 = this.state,
-          activeSubMenu = _this$state2.activeSubMenu,
-          hasOverflow = _this$state2.hasOverflow,
-          keyboardIndex = _this$state2.keyboardIndex,
-          menuItems = _this$state2.menuItems,
-          mouseIndex = _this$state2.mouseIndex,
-          pendingItems = _this$state2.pendingItems,
-          subMenuTop = _this$state2.subMenuTop,
-          subMenuLeft = _this$state2.subMenuLeft,
-          subMenuParentWidth = _this$state2.subMenuParentWidth,
-          subMenuParentHeight = _this$state2.subMenuParentHeight;
-
-      for (var i = 0; i < menuItems.length; i += 1) {
-        var menuItem = menuItems[i];
-
-        if (i > 0 && menuItem.group !== menuItems[i - 1].group) {
-          menuItemElements.push( /*#__PURE__*/React.createElement("hr", {
-            key: "".concat(i, ".separator")
-          }));
-        }
 
-        var menuItemElement = /*#__PURE__*/React.createElement(ContextMenuItem, {
-          key: i,
-          ref: activeSubMenu === i ? this.activeSubMenuRef : null,
-          isKeyboardSelected: keyboardIndex === i,
-          isMouseSelected: mouseIndex === i,
-          menuItem: menuItem,
-          closeMenu: this.handleCloseSubMenu,
-          onMenuItemClick: this.handleMenuItemClick,
-          onMenuItemMouseMove: this.handleMenuItemMouseMove,
-          onMenuItemContextMenu: this.handleMenuItemContextMenu
-        });
-        menuItemElements.push(menuItemElement);
-      }
+    this.handleMenuItemClick(menuItem, e);
+  }
 
-      var pendingElement = null;
+  handleMenuItemMouseMove(menuItem) {
+    var {
+      menuItems
+    } = this.state;
+    var focusIndex = menuItems.indexOf(menuItem);
+    this.setMouseIndex(focusIndex);
 
-      if (pendingItems.length > 0) {
-        pendingElement = /*#__PURE__*/React.createElement("div", {
-          className: "loading"
-        }, /*#__PURE__*/React.createElement(LoadingSpinner, null));
+    if (focusIndex >= 0 && focusIndex < menuItems.length && !menuItem.disabled) {
+      this.openSubMenu(focusIndex);
+    }
+  }
+
+  handleMouseLeave() {
+    this.setMouseIndex(-1);
+  }
+
+  render() {
+    var menuItemElements = [];
+    var {
+      top,
+      left
+    } = this.props;
+    var {
+      activeSubMenu,
+      hasOverflow,
+      keyboardIndex,
+      menuItems,
+      mouseIndex,
+      pendingItems,
+      subMenuTop,
+      subMenuLeft,
+      subMenuParentWidth,
+      subMenuParentHeight
+    } = this.state;
+
+    for (var i = 0; i < menuItems.length; i += 1) {
+      var menuItem = menuItems[i];
+
+      if (i > 0 && menuItem.group !== menuItems[i - 1].group) {
+        menuItemElements.push( /*#__PURE__*/React.createElement("hr", {
+          key: "".concat(i, ".separator")
+        }));
       }
 
-      var menuStyle = this.props.menuStyle; // don't show submenu until it has an position initialized
-
-      var showSubmenu = activeSubMenu !== null && subMenuTop !== null && subMenuLeft !== null;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: classNames({
-          'has-overflow': hasOverflow
-        }, 'context-menu-container'),
-        style: _objectSpread({
-          top: top,
-          left: left
-        }, menuStyle),
-        ref: this.container,
-        "data-dh-context-menu": true,
-        onBlur: this.handleBlur,
-        onKeyDown: this.handleKeyDown,
-        onMouseLeave: this.handleMouseLeave,
-        onContextMenu: ContextMenu.handleContextMenu,
-        role: "menuitem",
-        tabIndex: 0
-      }, menuItemElements, pendingElement), showSubmenu && activeSubMenu !== null && subMenuTop !== null && subMenuLeft !== null && /*#__PURE__*/React.createElement(ContextMenu, {
-        key: "sub-".concat(activeSubMenu),
-        actions: menuItems[activeSubMenu].actions || [],
+      var menuItemElement = /*#__PURE__*/React.createElement(ContextMenuItem, {
+        key: i,
+        ref: activeSubMenu === i ? this.activeSubMenuRef : null,
+        isKeyboardSelected: keyboardIndex === i,
+        isMouseSelected: mouseIndex === i,
+        menuItem: menuItem,
         closeMenu: this.handleCloseSubMenu,
-        top: subMenuTop,
-        left: subMenuLeft,
-        updatePosition: function updatePosition(verifiedTop, verifiedLeft) {
-          _this5.setState({
-            subMenuTop: verifiedTop,
-            subMenuLeft: verifiedLeft
-          });
-        },
-        subMenuParentWidth: subMenuParentWidth,
-        subMenuParentHeight: subMenuParentHeight
-      }));
+        onMenuItemClick: this.handleMenuItemClick,
+        onMenuItemMouseMove: this.handleMenuItemMouseMove,
+        onMenuItemContextMenu: this.handleMenuItemContextMenu
+      });
+      menuItemElements.push(menuItemElement);
     }
-  }], [{
-    key: "handleContextMenu",
-    value: function handleContextMenu(e) {
-      if (e.metaKey) {
-        return;
-      }
 
-      e.stopPropagation();
-      e.preventDefault();
+    var pendingElement = null;
+
+    if (pendingItems.length > 0) {
+      pendingElement = /*#__PURE__*/React.createElement("div", {
+        className: "loading"
+      }, /*#__PURE__*/React.createElement(LoadingSpinner, null));
     }
-  }]);
 
-  return ContextMenu;
-}(PureComponent);
+    var {
+      menuStyle
+    } = this.props; // don't show submenu until it has an position initialized
+
+    var showSubmenu = activeSubMenu !== null && subMenuTop !== null && subMenuLeft !== null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classNames({
+        'has-overflow': hasOverflow
+      }, 'context-menu-container'),
+      style: _objectSpread({
+        top,
+        left
+      }, menuStyle),
+      ref: this.container,
+      "data-dh-context-menu": true,
+      onBlur: this.handleBlur,
+      onKeyDown: this.handleKeyDown,
+      onMouseLeave: this.handleMouseLeave,
+      onContextMenu: ContextMenu.handleContextMenu,
+      role: "menuitem",
+      tabIndex: 0
+    }, menuItemElements, pendingElement), showSubmenu && activeSubMenu !== null && subMenuTop !== null && subMenuLeft !== null && /*#__PURE__*/React.createElement(ContextMenu, {
+      key: "sub-".concat(activeSubMenu),
+      actions: menuItems[activeSubMenu].actions || [],
+      closeMenu: this.handleCloseSubMenu,
+      top: subMenuTop,
+      left: subMenuLeft,
+      updatePosition: (verifiedTop, verifiedLeft) => {
+        this.setState({
+          subMenuTop: verifiedTop,
+          subMenuLeft: verifiedLeft
+        });
+      },
+      subMenuParentWidth: subMenuParentWidth,
+      subMenuParentHeight: subMenuParentHeight
+    }));
+  }
+
+}
 
 _defineProperty(ContextMenu, "defaultProps", {
   subMenuParentWidth: 0,
   subMenuParentHeight: 0,
-  closeMenu: function closeMenu() {// no-op
+
+  closeMenu() {// no-op
   },
-  onMenuOpened: function onMenuOpened() {// no-op
+
+  onMenuOpened() {// no-op
   },
-  onMenuClosed: function onMenuClosed() {// no-op
+
+  onMenuClosed() {// no-op
   },
+
   options: {},
   menuStyle: {}
 });