qwc2 2025.10.9 → 2025.10.14

package/components/AppMenu.js

@@ -1,8 +1,440 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2016-2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import classnames from"classnames";import{remove as removeDiacritics}from"diacritics";import isEmpty from"lodash.isempty";import isEqual from"lodash.isequal";import mousetrap from"mousetrap";import PropTypes from"prop-types";import{setCurrentTask}from"../actions/task";import{setMenuMargin}from"../actions/windows";import InputContainer from"../components/widgets/InputContainer";import ConfigUtils from"../utils/ConfigUtils";import LocaleUtils from"../utils/LocaleUtils";import MiscUtils from"../utils/MiscUtils";import Icon from"./Icon";import"./style/AppMenu.css";var AppMenu=/*#__PURE__*/function(_React$Component){function AppMenu(props){var _this;_classCallCheck(this,AppMenu);_this=_callSuper(this,AppMenu,[props]);_defineProperty(_this,"state",{menuVisible:false,filter:"",submenusVisible:[],curEntry:null,keyNav:false});_defineProperty(_this,"addKeyBindings",function(items){items.forEach(function(item){if(item.subitems){_this.addKeyBindings(item.subitems)}else if(item.shortcut){mousetrap.bind(item.shortcut,function(){_this.onMenuitemClicked(item);return false});_this.boundShortcuts.push(item.shortcut)}})});_defineProperty(_this,"onKeyPress",function(ev){if(ev.key==="Enter"||ev.key==="ArrowLeft"||ev.key==="ArrowUp"||ev.key==="ArrowRight"||ev.key==="ArrowDown"){if(!_this.state.curEntry){if(ev.key==="ArrowUp"||ev.key==="ArrowDown"){_this.setState({curEntry:[ev.key==="ArrowUp"?_this.props.menuItems.length-1:0]})}}else{var curEntry=_toConsumableArray(_this.state.curEntry);var stack=[_this.props.menuItems];_this.state.curEntry.forEach(function(entry){stack.push(stack[stack.length-1][entry].subitems)});stack.pop();var leaf=curEntry.pop();var level=stack.length-1;if(ev.key==="Enter"){if(!isEmpty(stack[stack.length-1][leaf].subitems)){_this.onSubmenuClicked(stack[stack.length-1][leaf].key,level)}else{_this.onMenuitemClicked(stack[stack.length-1][leaf])}}else if(ev.key==="ArrowLeft"){if(!isEmpty(stack[stack.length-1][leaf].subitems)&&_this.state.submenusVisible[level]===stack[stack.length-1][leaf].key){_this.onSubmenuClicked(stack[stack.length-1][leaf].key,level)}}else if(ev.key==="ArrowUp"){leaf-=1;if(leaf>=0&&!isEmpty(stack[stack.length-1][leaf].subitems)&&_this.state.submenusVisible[level]===stack[stack.length-1][leaf].key){curEntry.push(leaf);leaf=stack[stack.length-1][leaf].subitems.length-1}else{while(leaf<0&&curEntry.length>0){leaf=curEntry.pop()}if(leaf<0){leaf=_this.props.menuItems.length-1}}}else if(ev.key==="ArrowRight"){if(!isEmpty(stack[stack.length-1][leaf].subitems)&&!_this.state.submenusVisible[level]){_this.onSubmenuClicked(stack[stack.length-1][leaf].key,level)}}else if(ev.key==="ArrowDown"){if(!isEmpty(stack[stack.length-1][leaf].subitems)&&_this.state.submenusVisible[level]===stack[stack.length-1][leaf].key){curEntry.push(leaf);leaf=0}else{leaf+=1;while(leaf>stack[stack.length-1].length-1&&curEntry.length>0){leaf=curEntry.pop()+1;stack.pop()}if(leaf>_this.props.menuItems.length-1){leaf=0}}}_this.setState({curEntry:[].concat(_toConsumableArray(curEntry),[leaf]),keyNav:true})}MiscUtils.killEvent(ev)}else if(ev.key==="Escape"){_this.toggleMenu();MiscUtils.killEvent(ev)}});_defineProperty(_this,"onMouseMove",function(ev){if(_this.state.keyNav){_this.setState({keyNav:false})}MiscUtils.killEvent(ev)});_defineProperty(_this,"toggleMenu",function(){if(!_this.state.menuVisible&&_this.props.currentTaskBlocked){return}if(!_this.state.menuVisible&&_this.props.appMenuClearsTask){_this.props.setCurrentTask(null)}if(!_this.props.keepMenuOpen){if(!_this.state.menuVisible){document.addEventListener("click",_this.checkCloseMenu);document.addEventListener("keydown",_this.onKeyPress,true);document.addEventListener("mousemove",_this.onMouseMove,true)}else{document.removeEventListener("click",_this.checkCloseMenu);document.removeEventListener("keydown",_this.onKeyPress,true);document.removeEventListener("mousemove",_this.onMouseMove,true)}}_this.props.onMenuToggled(!_this.state.menuVisible);if(_this.props.menuCompact){_this.props.setMenuMargin(!_this.state.menuVisible?MiscUtils.convertEmToPx(3.75):0,0)}_this.setState(function(state){return{menuVisible:!state.menuVisible,submenusVisible:[],filter:""}})});_defineProperty(_this,"checkCloseMenu",function(ev){if(_this.menuEl&&!_this.menuEl.contains(ev.target)&&!_this.props.keepMenuOpen){_this.toggleMenu()}MiscUtils.killEvent(ev)});_defineProperty(_this,"onSubmenuClicked",function(key,level){var a=_this.state.submenusVisible[level]===key?[]:[key];_this.setState(function(state){return{submenusVisible:state.submenusVisible.slice(0,level).concat(a)}})});_defineProperty(_this,"onMenuitemClicked",function(item){if(!_this.props.keepMenuOpen&&_this.state.menuVisible){_this.toggleMenu()}if(item.url){var label=item.title?LocaleUtils.tr(item.title):LocaleUtils.tr("appmenu.items."+item.key+(item.mode||""));_this.props.openExternalUrl(item.url,item.target,label,item.icon)}else{_this.props.setCurrentTask(item.task||item.key,item.mode,item.mapClickAction||(item.identifyEnabled?"identify":null))}});_defineProperty(_this,"renderMenuItems",function(items,level,filter,path){if(items){return items.map(function(item,idx){var active=isEqual(_this.state.curEntry,[].concat(_toConsumableArray(path),[idx]));if(item.subitems){var _item$key;var subitems=_this.renderMenuItems(item.subitems,level+1,filter,[].concat(_toConsumableArray(path),[idx]));if(filter&&isEmpty(subitems)){return null}var visible=filter&&!isEmpty(subitems)||_this.state.submenusVisible[level]===item.key;var className=classnames({"appmenu-submenu":true,"appmenu-submenu-active":active,"appmenu-submenu-expanded":visible});return/*#__PURE__*/React.createElement("li",{className:className,key:(_item$key=item.key)!==null&&_item$key!==void 0?_item$key:item.title,onClick:function onClick(){return _this.onSubmenuClicked(item.key,level)},onMouseEnter:function onMouseEnter(){if(!_this.state.keyNav){_this.setState({curEntry:[].concat(_toConsumableArray(path),[idx])})}},onMouseLeave:function onMouseLeave(){if(!_this.state.keyNav){_this.setState({curEntry:null})}},ref:function ref(el){if(active&&el&&_this.state.keyNav){el.scrollIntoView(false)}}},/*#__PURE__*/React.createElement(Icon,{icon:item.icon,size:"xlarge"}),item.title?LocaleUtils.tr(item.title):LocaleUtils.tr("appmenu.items."+item.key),/*#__PURE__*/React.createElement("ul",null,subitems))}else{var trargs=item.trargs||[];var label=item.title?LocaleUtils.tr.apply(LocaleUtils,[item.title].concat(_toConsumableArray(trargs))):LocaleUtils.tr.apply(LocaleUtils,["appmenu.items."+item.key+(item.mode||"")].concat(_toConsumableArray(trargs)));var comment=item.comment?LocaleUtils.tr.apply(LocaleUtils,["appmenu.items."+item.key+(item.mode||"")+"_comment"].concat(_toConsumableArray(trargs))):"";if(!filter||removeDiacritics(label.toLowerCase()).match(filter)||comment&&removeDiacritics(comment.toLowerCase()).match(filter)){var _className=classnames({"appmenu-leaf":true,"appmenu-leaf-active":active});return/*#__PURE__*/React.createElement("li",{className:_className,key:item.key?item.key+(item.mode||""):item.title,onClick:function onClick(){return _this.onMenuitemClicked(item)},onMouseEnter:function onMouseEnter(){if(!_this.state.keyNav){_this.setState({curEntry:[].concat(_toConsumableArray(path),[idx])})}},onMouseLeave:function onMouseLeave(){if(!_this.state.keyNav){_this.setState({curEntry:null})}},ref:function ref(el){if(active&&el&&_this.state.keyNav){el.scrollIntoView(false)}}},/*#__PURE__*/React.createElement(Icon,{icon:item.icon,size:"xlarge"}),/*#__PURE__*/React.createElement("span",{className:"appmenu-leaf-label"},label,comment?/*#__PURE__*/React.createElement("div",{className:"appmenu-leaf-comment"},comment):null))}return null}}).filter(function(x){return x})}else{return null}});_defineProperty(_this,"setFilterField",function(el){_this.filterfield=el;if(_this.props.appMenuShortcut){mousetrap(el).bind(_this.props.appMenuShortcut,_this.toggleMenu)}});_this.menuEl=null;_this.filterfield=null;_this.boundShortcuts=[];return _this}_inherits(AppMenu,_React$Component);return _createClass(AppMenu,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.showOnStartup){this.toggleMenu()}this.addKeyBindings(this.props.menuItems);if(this.props.appMenuShortcut){mousetrap.bind(this.props.appMenuShortcut,this.toggleMenu)}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(this.state.menuVisible&&!prevState.menuVisible&&this.filterfield&&!this.props.menuCompact){// Need to wait until slide in transition is over
-setTimeout(function(){_this2.filterfield.focus()},400)}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.boundShortcuts.forEach(function(shortcut){return mousetrap.unbind(shortcut)});if(this.props.appMenuShortcut){mousetrap.unbind(this.props.appMenuShortcut,this.toggleMenu)}if(this.state.menuVisible){document.removeEventListener("click",this.checkCloseMenu);document.removeEventListener("keydown",this.onKeyPress,true);document.removeEventListener("mousemove",this.onMouseMove,true)}}},{key:"render",value:function render(){var _this3=this;var isMobile=ConfigUtils.isMobile();var visible=!this.props.currentTaskBlocked&&this.state.menuVisible;var showLabel=!this.props.menuCompact&&!isMobile;var className=classnames({"AppMenu":true,"appmenu-blocked":this.props.currentTaskBlocked,"appmenu-visible":visible,"appmenu-compact":this.props.menuCompact,"appmenu-nolabel":!showLabel});var filter=this.state.filter?new RegExp(removeDiacritics(this.state.filter).replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&"),"i"):null;return/*#__PURE__*/React.createElement("div",{className:className,ref:function ref(el){_this3.menuEl=el;MiscUtils.setupKillTouchEvents(el)}},/*#__PURE__*/React.createElement("div",{className:"appmenu-button",onMouseDown:this.toggleMenu,title:this.props.buttonLabel},showLabel?/*#__PURE__*/React.createElement("span",{className:"appmenu-label"},this.props.buttonLabel):null,/*#__PURE__*/React.createElement("span",{className:"appmenu-icon"},/*#__PURE__*/React.createElement(Icon,{icon:"menu-hamburger"}))),/*#__PURE__*/React.createElement("div",{className:"appmenu-menu-container"},/*#__PURE__*/React.createElement("ul",{className:"appmenu-menu"},this.props.showFilterField?/*#__PURE__*/React.createElement("li",{className:"appmenu-leaf"},/*#__PURE__*/React.createElement(Icon,{icon:"search",size:"xlarge"}),/*#__PURE__*/React.createElement(InputContainer,{className:"appmenu-filter"},/*#__PURE__*/React.createElement("input",{onChange:function onChange(ev){return _this3.setState({filter:ev.target.value,curEntry:null})},placeholder:LocaleUtils.tr("appmenu.filter"),ref:this.setFilterField,role:"input",type:"text",value:this.state.filter}),/*#__PURE__*/React.createElement(Icon,{icon:"clear",onClick:function onClick(){return _this3.setState({filter:""})},role:"suffix"}))):null,this.renderMenuItems(this.props.menuItems,0,filter,[]))))}}])}(React.Component);_defineProperty(AppMenu,"propTypes",{appMenuClearsTask:PropTypes.bool,appMenuShortcut:PropTypes.string,buttonLabel:PropTypes.string,currentTaskBlocked:PropTypes.bool,keepMenuOpen:PropTypes.bool,menuCompact:PropTypes.bool,menuItems:PropTypes.array,onMenuToggled:PropTypes.func,openExternalUrl:PropTypes.func,setCurrentTask:PropTypes.func,setMenuMargin:PropTypes.func,showFilterField:PropTypes.bool,showOnStartup:PropTypes.bool});_defineProperty(AppMenu,"defaultProps",{onMenuToggled:function onMenuToggled(){}});export default connect(function(state){return{currentTaskBlocked:state.task.blocked}},{setCurrentTask:setCurrentTask,setMenuMargin:setMenuMargin})(AppMenu);
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import { remove as removeDiacritics } from 'diacritics';
+import isEmpty from 'lodash.isempty';
+import isEqual from 'lodash.isequal';
+import mousetrap from 'mousetrap';
+import PropTypes from 'prop-types';
+import { setCurrentTask } from '../actions/task';
+import { setMenuMargin } from '../actions/windows';
+import InputContainer from '../components/widgets/InputContainer';
+import ConfigUtils from '../utils/ConfigUtils';
+import LocaleUtils from '../utils/LocaleUtils';
+import MiscUtils from '../utils/MiscUtils';
+import Icon from './Icon';
+import './style/AppMenu.css';
+var AppMenu = /*#__PURE__*/function (_React$Component) {
+  function AppMenu(props) {
+    var _this;
+    _classCallCheck(this, AppMenu);
+    _this = _callSuper(this, AppMenu, [props]);
+    _defineProperty(_this, "state", {
+      menuVisible: false,
+      filter: "",
+      submenusVisible: [],
+      curEntry: null,
+      keyNav: false
+    });
+    _defineProperty(_this, "addKeyBindings", function (items) {
+      items.forEach(function (item) {
+        if (item.subitems) {
+          _this.addKeyBindings(item.subitems);
+        } else if (item.shortcut) {
+          mousetrap.bind(item.shortcut, function () {
+            _this.onMenuitemClicked(item);
+            return false;
+          });
+          _this.boundShortcuts.push(item.shortcut);
+        }
+      });
+    });
+    _defineProperty(_this, "onKeyPress", function (ev) {
+      if (ev.key === 'Enter' || ev.key === 'ArrowLeft' || ev.key === 'ArrowUp' || ev.key === 'ArrowRight' || ev.key === 'ArrowDown') {
+        if (!_this.state.curEntry) {
+          if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
+            _this.setState({
+              curEntry: [ev.key === 'ArrowUp' ? _this.props.menuItems.length - 1 : 0]
+            });
+          }
+        } else {
+          var curEntry = _toConsumableArray(_this.state.curEntry);
+          var stack = [_this.props.menuItems];
+          _this.state.curEntry.forEach(function (entry) {
+            stack.push(stack[stack.length - 1][entry].subitems);
+          });
+          stack.pop();
+          var leaf = curEntry.pop();
+          var level = stack.length - 1;
+          if (ev.key === 'Enter') {
+            if (!isEmpty(stack[stack.length - 1][leaf].subitems)) {
+              _this.onSubmenuClicked(stack[stack.length - 1][leaf].key, level);
+            } else {
+              _this.onMenuitemClicked(stack[stack.length - 1][leaf]);
+            }
+          } else if (ev.key === 'ArrowLeft') {
+            if (!isEmpty(stack[stack.length - 1][leaf].subitems) && _this.state.submenusVisible[level] === stack[stack.length - 1][leaf].key) {
+              _this.onSubmenuClicked(stack[stack.length - 1][leaf].key, level);
+            }
+          } else if (ev.key === 'ArrowUp') {
+            leaf -= 1;
+            if (leaf >= 0 && !isEmpty(stack[stack.length - 1][leaf].subitems) && _this.state.submenusVisible[level] === stack[stack.length - 1][leaf].key) {
+              curEntry.push(leaf);
+              leaf = stack[stack.length - 1][leaf].subitems.length - 1;
+            } else {
+              while (leaf < 0 && curEntry.length > 0) {
+                leaf = curEntry.pop();
+              }
+              if (leaf < 0) {
+                leaf = _this.props.menuItems.length - 1;
+              }
+            }
+          } else if (ev.key === 'ArrowRight') {
+            if (!isEmpty(stack[stack.length - 1][leaf].subitems) && !_this.state.submenusVisible[level]) {
+              _this.onSubmenuClicked(stack[stack.length - 1][leaf].key, level);
+            }
+          } else if (ev.key === 'ArrowDown') {
+            if (!isEmpty(stack[stack.length - 1][leaf].subitems) && _this.state.submenusVisible[level] === stack[stack.length - 1][leaf].key) {
+              curEntry.push(leaf);
+              leaf = 0;
+            } else {
+              leaf += 1;
+              while (leaf > stack[stack.length - 1].length - 1 && curEntry.length > 0) {
+                leaf = curEntry.pop() + 1;
+                stack.pop();
+              }
+              if (leaf > _this.props.menuItems.length - 1) {
+                leaf = 0;
+              }
+            }
+          }
+          _this.setState({
+            curEntry: [].concat(_toConsumableArray(curEntry), [leaf]),
+            keyNav: true
+          });
+        }
+        MiscUtils.killEvent(ev);
+      } else if (ev.key === 'Escape') {
+        _this.toggleMenu();
+        MiscUtils.killEvent(ev);
+      }
+    });
+    _defineProperty(_this, "onMouseMove", function (ev) {
+      if (_this.state.keyNav) {
+        _this.setState({
+          keyNav: false
+        });
+      }
+      MiscUtils.killEvent(ev);
+    });
+    _defineProperty(_this, "toggleMenu", function () {
+      if (!_this.state.menuVisible && _this.props.currentTaskBlocked) {
+        return;
+      }
+      if (!_this.state.menuVisible && _this.props.appMenuClearsTask) {
+        _this.props.setCurrentTask(null);
+      }
+      if (!_this.props.keepMenuOpen) {
+        if (!_this.state.menuVisible) {
+          document.addEventListener('click', _this.checkCloseMenu);
+          document.addEventListener('keydown', _this.onKeyPress, true);
+          document.addEventListener('mousemove', _this.onMouseMove, true);
+        } else {
+          document.removeEventListener('click', _this.checkCloseMenu);
+          document.removeEventListener('keydown', _this.onKeyPress, true);
+          document.removeEventListener('mousemove', _this.onMouseMove, true);
+        }
+      }
+      _this.props.onMenuToggled(!_this.state.menuVisible);
+      if (_this.props.menuCompact) {
+        _this.props.setMenuMargin(!_this.state.menuVisible ? MiscUtils.convertEmToPx(3.75) : 0, 0);
+      }
+      _this.setState(function (state) {
+        return {
+          menuVisible: !state.menuVisible,
+          submenusVisible: [],
+          filter: ""
+        };
+      });
+    });
+    _defineProperty(_this, "checkCloseMenu", function (ev) {
+      if (_this.menuEl && !_this.menuEl.contains(ev.target) && !_this.props.keepMenuOpen) {
+        _this.toggleMenu();
+      }
+      MiscUtils.killEvent(ev);
+    });
+    _defineProperty(_this, "onSubmenuClicked", function (key, level) {
+      var a = _this.state.submenusVisible[level] === key ? [] : [key];
+      _this.setState(function (state) {
+        return {
+          submenusVisible: state.submenusVisible.slice(0, level).concat(a)
+        };
+      });
+    });
+    _defineProperty(_this, "onMenuitemClicked", function (item) {
+      if (!_this.props.keepMenuOpen && _this.state.menuVisible) {
+        _this.toggleMenu();
+      }
+      if (item.url) {
+        var label = item.title ? LocaleUtils.tr(item.title) : LocaleUtils.tr("appmenu.items." + item.key + (item.mode || ""));
+        _this.props.openExternalUrl(item.url, item.target, label, item.icon);
+      } else {
+        _this.props.setCurrentTask(item.task || item.key, item.mode, item.mapClickAction || (item.identifyEnabled ? "identify" : null));
+      }
+    });
+    _defineProperty(_this, "renderMenuItems", function (items, level, filter, path) {
+      if (items) {
+        return items.map(function (item, idx) {
+          var active = isEqual(_this.state.curEntry, [].concat(_toConsumableArray(path), [idx]));
+          if (item.subitems) {
+            var _item$key;
+            var subitems = _this.renderMenuItems(item.subitems, level + 1, filter, [].concat(_toConsumableArray(path), [idx]));
+            if (filter && isEmpty(subitems)) {
+              return null;
+            }
+            var visible = filter && !isEmpty(subitems) || _this.state.submenusVisible[level] === item.key;
+            var className = classnames({
+              "appmenu-submenu": true,
+              "appmenu-submenu-active": active,
+              "appmenu-submenu-expanded": visible
+            });
+            return /*#__PURE__*/React.createElement("li", {
+              className: className,
+              key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.title,
+              onClick: function onClick() {
+                return _this.onSubmenuClicked(item.key, level);
+              },
+              onMouseEnter: function onMouseEnter() {
+                if (!_this.state.keyNav) {
+                  _this.setState({
+                    curEntry: [].concat(_toConsumableArray(path), [idx])
+                  });
+                }
+              },
+              onMouseLeave: function onMouseLeave() {
+                if (!_this.state.keyNav) {
+                  _this.setState({
+                    curEntry: null
+                  });
+                }
+              },
+              ref: function ref(el) {
+                if (active && el && _this.state.keyNav) {
+                  el.scrollIntoView(false);
+                }
+              }
+            }, /*#__PURE__*/React.createElement(Icon, {
+              icon: item.icon,
+              size: "xlarge"
+            }), item.title ? LocaleUtils.tr(item.title) : LocaleUtils.tr("appmenu.items." + item.key), /*#__PURE__*/React.createElement("ul", null, subitems));
+          } else {
+            var trargs = item.trargs || [];
+            var label = item.title ? LocaleUtils.tr.apply(LocaleUtils, [item.title].concat(_toConsumableArray(trargs))) : LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "")].concat(_toConsumableArray(trargs)));
+            var comment = item.comment ? LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "") + "_comment"].concat(_toConsumableArray(trargs))) : "";
+            if (!filter || removeDiacritics(label.toLowerCase()).match(filter) || comment && removeDiacritics(comment.toLowerCase()).match(filter)) {
+              var _className = classnames({
+                "appmenu-leaf": true,
+                "appmenu-leaf-active": active
+              });
+              return /*#__PURE__*/React.createElement("li", {
+                className: _className,
+                key: item.key ? item.key + (item.mode || "") : item.title,
+                onClick: function onClick() {
+                  return _this.onMenuitemClicked(item);
+                },
+                onMouseEnter: function onMouseEnter() {
+                  if (!_this.state.keyNav) {
+                    _this.setState({
+                      curEntry: [].concat(_toConsumableArray(path), [idx])
+                    });
+                  }
+                },
+                onMouseLeave: function onMouseLeave() {
+                  if (!_this.state.keyNav) {
+                    _this.setState({
+                      curEntry: null
+                    });
+                  }
+                },
+                ref: function ref(el) {
+                  if (active && el && _this.state.keyNav) {
+                    el.scrollIntoView(false);
+                  }
+                }
+              }, /*#__PURE__*/React.createElement(Icon, {
+                icon: item.icon,
+                size: "xlarge"
+              }), /*#__PURE__*/React.createElement("span", {
+                className: "appmenu-leaf-label"
+              }, label, comment ? /*#__PURE__*/React.createElement("div", {
+                className: "appmenu-leaf-comment"
+              }, comment) : null));
+            }
+            return null;
+          }
+        }).filter(function (x) {
+          return x;
+        });
+      } else {
+        return null;
+      }
+    });
+    _defineProperty(_this, "setFilterField", function (el) {
+      _this.filterfield = el;
+      if (_this.props.appMenuShortcut) {
+        mousetrap(el).bind(_this.props.appMenuShortcut, _this.toggleMenu);
+      }
+    });
+    _this.menuEl = null;
+    _this.filterfield = null;
+    _this.boundShortcuts = [];
+    return _this;
+  }
+  _inherits(AppMenu, _React$Component);
+  return _createClass(AppMenu, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.showOnStartup) {
+        this.toggleMenu();
+      }
+      this.addKeyBindings(this.props.menuItems);
+      if (this.props.appMenuShortcut) {
+        mousetrap.bind(this.props.appMenuShortcut, this.toggleMenu);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this2 = this;
+      if (this.state.menuVisible && !prevState.menuVisible && this.filterfield && !this.props.menuCompact) {
+        // Need to wait until slide in transition is over
+        setTimeout(function () {
+          _this2.filterfield.focus();
+        }, 400);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.boundShortcuts.forEach(function (shortcut) {
+        return mousetrap.unbind(shortcut);
+      });
+      if (this.props.appMenuShortcut) {
+        mousetrap.unbind(this.props.appMenuShortcut, this.toggleMenu);
+      }
+      if (this.state.menuVisible) {
+        document.removeEventListener('click', this.checkCloseMenu);
+        document.removeEventListener('keydown', this.onKeyPress, true);
+        document.removeEventListener('mousemove', this.onMouseMove, true);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var isMobile = ConfigUtils.isMobile();
+      var visible = !this.props.currentTaskBlocked && this.state.menuVisible;
+      var showLabel = !this.props.menuCompact && !isMobile;
+      var className = classnames({
+        "AppMenu": true,
+        "appmenu-blocked": this.props.currentTaskBlocked,
+        "appmenu-visible": visible,
+        "appmenu-compact": this.props.menuCompact,
+        "appmenu-nolabel": !showLabel
+      });
+      var filter = this.state.filter ? new RegExp(removeDiacritics(this.state.filter).replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&"), "i") : null;
+      return /*#__PURE__*/React.createElement("div", {
+        className: className,
+        ref: function ref(el) {
+          _this3.menuEl = el;
+          MiscUtils.setupKillTouchEvents(el);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "appmenu-button",
+        onMouseDown: this.toggleMenu,
+        title: this.props.buttonLabel
+      }, showLabel ? /*#__PURE__*/React.createElement("span", {
+        className: "appmenu-label"
+      }, this.props.buttonLabel) : null, /*#__PURE__*/React.createElement("span", {
+        className: "appmenu-icon"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "menu-hamburger"
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "appmenu-menu-container"
+      }, /*#__PURE__*/React.createElement("ul", {
+        className: "appmenu-menu"
+      }, this.props.showFilterField ? /*#__PURE__*/React.createElement("li", {
+        className: "appmenu-leaf"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "search",
+        size: "xlarge"
+      }), /*#__PURE__*/React.createElement(InputContainer, {
+        className: "appmenu-filter"
+      }, /*#__PURE__*/React.createElement("input", {
+        onChange: function onChange(ev) {
+          return _this3.setState({
+            filter: ev.target.value,
+            curEntry: null
+          });
+        },
+        placeholder: LocaleUtils.tr("appmenu.filter"),
+        ref: this.setFilterField,
+        role: "input",
+        type: "text",
+        value: this.state.filter
+      }), /*#__PURE__*/React.createElement(Icon, {
+        icon: "clear",
+        onClick: function onClick() {
+          return _this3.setState({
+            filter: ""
+          });
+        },
+        role: "suffix"
+      }))) : null, this.renderMenuItems(this.props.menuItems, 0, filter, []))));
+    }
+  }]);
+}(React.Component);
+_defineProperty(AppMenu, "propTypes", {
+  appMenuClearsTask: PropTypes.bool,
+  appMenuShortcut: PropTypes.string,
+  buttonLabel: PropTypes.string,
+  currentTaskBlocked: PropTypes.bool,
+  keepMenuOpen: PropTypes.bool,
+  menuCompact: PropTypes.bool,
+  menuItems: PropTypes.array,
+  onMenuToggled: PropTypes.func,
+  openExternalUrl: PropTypes.func,
+  setCurrentTask: PropTypes.func,
+  setMenuMargin: PropTypes.func,
+  showFilterField: PropTypes.bool,
+  showOnStartup: PropTypes.bool
+});
+_defineProperty(AppMenu, "defaultProps", {
+  onMenuToggled: function onMenuToggled() {}
+});
+export default connect(function (state) {
+  return {
+    currentTaskBlocked: state.task.blocked
+  };
+}, {
+  setCurrentTask: setCurrentTask,
+  setMenuMargin: setMenuMargin
+})(AppMenu);