bpmn-js 10.3.0 → 11.0.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v10.3.0
+ * bpmn-js - bpmn-modeler v11.0.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2022-11-11
+ * Date: 2022-11-24
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -16,7 +16,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.BpmnJS = factory());
 })(this, (function () { 'use strict';
 
-  function e(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}));}
+  function e$3(e,t){t&&(e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}));}
 
   function createCommonjsModule(fn, module) {
   	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -2961,7 +2961,7 @@
     this.FRAME_STYLE = styles.style([ 'no-fill' ], { stroke: 'fuchsia', strokeDasharray: 4, strokeWidth: 2 });
   }
 
-  e(DefaultRenderer, BaseRenderer);
+  e$3(DefaultRenderer, BaseRenderer);
 
 
   DefaultRenderer.prototype.canRender = function() {
@@ -4592,7 +4592,7 @@
     // this way we can always get the correct container size
     // (this is impossible for <svg> elements at the moment)
     const parent = document.createElement('div');
-    parent.setAttribute('class', 'djs-container');
+    parent.setAttribute('class', 'djs-container djs-parent');
 
     assign(parent, {
       position: 'relative',
@@ -6013,7 +6013,7 @@
   /**
    * Removes an element from the registry.
    *
-   * @param {djs.model.Base} element
+   * @param {string|djs.model.Base} element
    */
   ElementRegistry.prototype.remove = function(element) {
     var elements = this._elements,
@@ -6036,7 +6036,7 @@
   /**
    * Update the id of an element
    *
-   * @param {djs.model.Base} element
+   * @param {string|djs.model.Base} element
    * @param {string} newId
    */
   ElementRegistry.prototype.updateId = function(element, newId) {
@@ -6065,7 +6065,7 @@
   /**
    * Update the graphics of an element
    *
-   * @param {djs.model.Base} element
+   * @param {string|djs.model.Base} element
    * @param {SVGElement} gfx
    * @param {boolean} [secondary=false] whether to update the secondary connected element
    */
@@ -6675,7 +6675,7 @@
     attacherRefs.bind(this, 'attachers');
   }
 
-  e(Shape, Base$1);
+  e$3(Shape, Base$1);
 
 
   /**
@@ -6690,7 +6690,7 @@
     Shape.call(this);
   }
 
-  e(Root, Shape);
+  e$3(Root, Shape);
 
 
   /**
@@ -6713,7 +6713,7 @@
     labelRefs.bind(this, 'labelTarget');
   }
 
-  e(Label, Shape);
+  e$3(Label, Shape);
 
 
   /**
@@ -6744,7 +6744,7 @@
     incomingRefs.bind(this, 'target');
   }
 
-  e(Connection, Base$1);
+  e$3(Connection, Base$1);
 
 
   var types$6 = {
@@ -16245,7 +16245,7 @@
     this._init(this._container, this._moddle, options);
   }
 
-  e(BaseViewer, Diagram);
+  e$3(BaseViewer, Diagram);
 
   /**
   * The importXML result.
@@ -16944,7 +16944,7 @@
     }, this);
   }
 
-  e(BaseModeler, BaseViewer);
+  e$3(BaseModeler, BaseViewer);
 
 
   /**
@@ -19069,7 +19069,7 @@
   }
 
 
-  e(BpmnRenderer, BaseRenderer);
+  e$3(BpmnRenderer, BaseRenderer);
 
   BpmnRenderer.$inject = [
     'config.bpmnRenderer',
@@ -22025,7 +22025,7 @@
     ].join(',') +
     ')';
 
-    setTransform$1(this._overlayRoot, matrix);
+    setTransform(this._overlayRoot, matrix);
   };
 
 
@@ -22147,7 +22147,7 @@
       transform = 'scale(' + scale + ',' + scale + ')';
     }
 
-    setTransform$1(htmlContainer, transform);
+    setTransform(htmlContainer, transform);
   };
 
 
@@ -22278,7 +22278,7 @@
     el.style.display = visible === false ? 'none' : '';
   }
 
-  function setTransform$1(el, transform) {
+  function setTransform(el, transform) {
 
     el.style['transform-origin'] = 'top left';
 
@@ -22527,7 +22527,7 @@
     });
   }
 
-  e(RootElementsBehavior, CommandInterceptor);
+  e$3(RootElementsBehavior, CommandInterceptor);
 
   RootElementsBehavior.$inject = [ 'canvas', 'injector' ];
 
@@ -22849,7 +22849,7 @@
   function DrilldownCentering(eventBus, canvas) {
 
     var currentRoot = null;
-    var positionMap = new Map();
+    var positionMap = new Map$1();
 
     eventBus.on('root.set', function(event) {
       var newRoot = event.element;
@@ -22899,7 +22899,7 @@
   /**
    * ES5 Map implementation. Works.
    */
-  function Map() {
+  function Map$1() {
 
     this._entries = [];
 
@@ -23255,7 +23255,7 @@
 
   }
 
-  e(DrilldownOverlayBehavior, CommandInterceptor);
+  e$3(DrilldownOverlayBehavior, CommandInterceptor);
 
   DrilldownOverlayBehavior.prototype.updateDrilldownOverlay = function(shape) {
     var canvas = this._canvas;
@@ -23405,7 +23405,7 @@
     BaseViewer.call(this, options);
   }
 
-  e(Viewer, BaseViewer);
+  e$3(Viewer, BaseViewer);
 
   // modules the viewer is composed of
   Viewer.prototype._modules = [
@@ -23419,15 +23419,10 @@
   // default moddle extensions the viewer is composed of
   Viewer.prototype._moddleExtensions = {};
 
-  var KEYCODE_C = 67;
-  var KEYCODE_V = 86;
-  var KEYCODE_Y = 89;
-  var KEYCODE_Z = 90;
-
-  var KEYS_COPY = [ 'c', 'C', KEYCODE_C ];
-  var KEYS_PASTE = [ 'v', 'V', KEYCODE_V ];
-  var KEYS_REDO = [ 'y', 'Y', KEYCODE_Y ];
-  var KEYS_UNDO = [ 'z', 'Z', KEYCODE_Z ];
+  var KEYS_COPY = [ 'c', 'C', 'KeyC' ];
+  var KEYS_PASTE = [ 'v', 'V', 'KeyV' ];
+  var KEYS_REDO = [ 'y', 'Y', 'KeyY' ];
+  var KEYS_UNDO = [ 'z', 'Z', 'KeyZ' ];
 
   /**
    * Returns true if event was triggered with any modifier
@@ -23460,7 +23455,7 @@
   function isKey(keys, event) {
     keys = isArray$3(keys) ? keys : [ keys ];
 
-    return keys.indexOf(event.key) !== -1 || keys.indexOf(event.keyCode) !== -1;
+    return keys.indexOf(event.key) !== -1 || keys.indexOf(event.code) !== -1;
   }
 
   /**
@@ -23499,7 +23494,7 @@
 
   /**
    * A keyboard abstraction that may be activated and
-   * deactivated by users at will, consuming key events
+   * deactivated by users at will, consuming global key events
    * and triggering diagram actions.
    *
    * For keys pressed down, keyboard fires `keyboard.keydown` event.
@@ -23584,6 +23579,10 @@
   };
 
   Keyboard.prototype._isEventIgnored = function(event) {
+    if (event.defaultPrevented) {
+      return true;
+    }
+
     return isInput(event.target) && this._isModifiedKeyIgnored(event);
   };
 
@@ -23614,8 +23613,8 @@
     this._node = node;
 
     // bind key events
-    event.bind(node, 'keydown', this._keydownHandler, true);
-    event.bind(node, 'keyup', this._keyupHandler, true);
+    event.bind(node, 'keydown', this._keydownHandler);
+    event.bind(node, 'keyup', this._keyupHandler);
 
     this._fire('bind');
   };
@@ -23631,8 +23630,8 @@
       this._fire('unbind');
 
       // unbind key events
-      event.unbind(node, 'keydown', this._keydownHandler, true);
-      event.unbind(node, 'keyup', this._keyupHandler, true);
+      event.unbind(node, 'keydown', this._keydownHandler);
+      event.unbind(node, 'keyup', this._keyupHandler);
     }
 
     this._node = null;
@@ -24407,7 +24406,7 @@
     Viewer.call(this, options);
   }
 
-  e(NavigatedViewer, Viewer);
+  e$3(NavigatedViewer, Viewer);
 
 
   NavigatedViewer.prototype._navigationModules = [
@@ -28096,6 +28095,483 @@
     contextPad: [ 'type', ContextPad ]
   };
 
+  var n$1,l$1,u$1,t$2,o$1,f$1={},e$2=[],c$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function s$1(n,l){for(var u in l)n[u]=l[u];return n}function a$1(n){var l=n.parentNode;l&&l.removeChild(n);}function h$1(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n$1.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return v$1(l,f,t,o,null)}function v$1(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u$1:r};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function p$1(n){return n.children}function d$1(n,l){this.props=n,this.context=l;}function _$1(n,l){if(null==l)return n.__?_$1(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?_$1(n):null}function k$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return k$1(n)}}function b$1(n){(!n.__d&&(n.__d=!0)&&t$2.push(n)&&!g$1.__r++||o$1!==l$1.debounceRendering)&&((o$1=l$1.debounceRendering)||setTimeout)(g$1);}function g$1(){for(var n;g$1.__r=t$2.length;)n=t$2.sort(function(n,l){return n.__v.__b-l.__v.__b}),t$2=[],n.some(function(n){var l,u,i,t,o,r;n.__d&&(o=(t=(l=n).__v).__e,(r=l.__P)&&(u=[],(i=s$1({},t)).__v=t.__v+1,j$1(r,t,i,l.__n,void 0!==r.ownerSVGElement,null!=t.__h?[o]:null,u,null==o?_$1(t):o,t.__h),z$1(u,t),t.__e!=o&&k$1(t)));});}function w$1(n,l,u,i,t,o,r,c,s,a){var h,y,d,k,b,g,w,x=i&&i.__k||e$2,C=x.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(k=u.__k[h]=null==(k=l[h])||"boolean"==typeof k?null:"string"==typeof k||"number"==typeof k||"bigint"==typeof k?v$1(null,k,null,null,k):Array.isArray(k)?v$1(p$1,{children:k},null,null,null):k.__b>0?v$1(k.type,k.props,k.key,k.ref?k.ref:null,k.__v):k)){if(k.__=u,k.__b=u.__b+1,null===(d=x[h])||d&&k.key==d.key&&k.type===d.type)x[h]=void 0;else for(y=0;y<C;y++){if((d=x[y])&&k.key==d.key&&k.type===d.type){x[y]=void 0;break}d=null;}j$1(n,k,d=d||f$1,t,o,r,c,s,a),b=k.__e,(y=k.ref)&&d.ref!=y&&(w||(w=[]),d.ref&&w.push(d.ref,null,k),w.push(y,k.__c||b,k)),null!=b?(null==g&&(g=b),"function"==typeof k.type&&k.__k===d.__k?k.__d=s=m$2(k,s,n):s=A(n,k,d,x,b,s),"function"==typeof u.type&&(u.__d=s)):s&&d.__e==s&&s.parentNode!=n&&(s=_$1(d));}for(u.__e=g,h=C;h--;)null!=x[h]&&N(x[h],x[h]);if(w)for(h=0;h<w.length;h++)M(w[h],w[++h],w[++h]);}function m$2(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?m$2(i,l,u):A(u,i,i,t,i.__e,l));return l}function A(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else {for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=1)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function C(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||H(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||H(n,o,l[o],u[o],i);}function $(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]=null==u?"":"number"!=typeof u||c$1.test(l)?u:u+"px";}function H(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||$(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||$(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?T$1:I,o):n.removeEventListener(l,o?T$1:I,o);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&-1==l.indexOf("-")?n.removeAttribute(l):n.setAttribute(l,u));}}function I(n){this.l[n.type+!1](l$1.event?l$1.event(n):n);}function T$1(n){this.l[n.type+!0](l$1.event?l$1.event(n):n);}function j$1(n,u,i,t,o,r,f,e,c){var a,h,v,y,_,k,b,g,m,x,A,C,$,H,I,T=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(a=l$1.__b)&&a(u);try{n:if("function"==typeof T){if(g=u.props,m=(a=T.contextType)&&t[a.__c],x=a?m?m.props.value:a.__:t,i.__c?b=(h=u.__c=i.__c).__=h.__E:("prototype"in T&&T.prototype.render?u.__c=h=new T(g,x):(u.__c=h=new d$1(g,x),h.constructor=T,h.render=O),m&&m.sub(h),h.props=g,h.state||(h.state={}),h.context=x,h.__n=t,v=h.__d=!0,h.__h=[],h._sb=[]),null==h.__s&&(h.__s=h.state),null!=T.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=s$1({},h.__s)),s$1(h.__s,T.getDerivedStateFromProps(g,h.__s))),y=h.props,_=h.state,v)null==T.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(null==T.getDerivedStateFromProps&&g!==y&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(g,x),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(g,h.__s,x)||u.__v===i.__v){for(h.props=g,h.state=h.__s,u.__v!==i.__v&&(h.__d=!1),h.__v=u,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),A=0;A<h._sb.length;A++)h.__h.push(h._sb[A]);h._sb=[],h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(g,h.__s,x),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(y,_,k);});}if(h.context=x,h.props=g,h.__v=u,h.__P=n,C=l$1.__r,$=0,"prototype"in T&&T.prototype.render){for(h.state=h.__s,h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),H=0;H<h._sb.length;H++)h.__h.push(h._sb[H]);h._sb=[];}else do{h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++$<25);h.state=h.__s,null!=h.getChildContext&&(t=s$1(s$1({},t),h.getChildContext())),v||null==h.getSnapshotBeforeUpdate||(k=h.getSnapshotBeforeUpdate(y,_)),I=null!=a&&a.type===p$1&&null==a.key?a.props.children:a,w$1(n,Array.isArray(I)?I:[I],u,i,t,o,r,f,e,c),h.base=u.__e,u.__h=null,h.__h.length&&f.push(h),b&&(h.__E=h.__=null),h.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=L(i.__e,u,i,t,o,r,f,c);(a=l$1.diffed)&&a(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$1.__e(n,u,i);}}function z$1(n,u){l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function L(l,u,i,t,o,r,e,c){var s,h,v,y=i.props,p=u.props,d=u.type,k=0;if("svg"===d&&(o=!0),null!=r)for(;k<r.length;k++)if((s=r[k])&&"setAttribute"in s==!!d&&(d?s.localName===d:3===s.nodeType)){l=s,r[k]=null;break}if(null==l){if(null===d)return document.createTextNode(p);l=o?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),r=null,c=!1;}if(null===d)y===p||c&&l.data===p||(l.data=p);else {if(r=r&&n$1.call(l.childNodes),h=(y=i.props||f$1).dangerouslySetInnerHTML,v=p.dangerouslySetInnerHTML,!c){if(null!=r)for(y={},k=0;k<l.attributes.length;k++)y[l.attributes[k].name]=l.attributes[k].value;(v||h)&&(v&&(h&&v.__html==h.__html||v.__html===l.innerHTML)||(l.innerHTML=v&&v.__html||""));}if(C(l,p,y,o,c),v)u.__k=[];else if(k=u.props.children,w$1(l,Array.isArray(k)?k:[k],u,i,t,o&&"foreignObject"!==d,r,e,r?r[0]:i.__k&&_$1(i,0),c),null!=r)for(k=r.length;k--;)null!=r[k]&&a$1(r[k]);c||("value"in p&&void 0!==(k=p.value)&&(k!==l.value||"progress"===d&&!k||"option"===d&&k!==y.value)&&H(l,"value",k,y.value,!1),"checked"in p&&void 0!==(k=p.checked)&&k!==l.checked&&H(l,"checked",k,y.checked,!1));}return l}function M(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,i);}}function N(n,u,i){var t,o;if(l$1.unmount&&l$1.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||M(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$1.__e(n,u);}t.base=t.__P=null,n.__c=void 0;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&N(t[o],u,i||"function"!=typeof n.type);i||null==n.__e||a$1(n.__e),n.__=n.__e=n.__d=void 0;}function O(n,l,u){return this.constructor(n,u)}function P(u,i,t){var o,r,e;l$1.__&&l$1.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,e=[],j$1(i,u=(!o&&t||i).__k=h$1(p$1,null,[u]),r||f$1,f$1,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n$1.call(i.childNodes):null,e,!o&&t?t:r?r.__e:i.firstChild,o),z$1(e,u);}n$1=e$2.slice,l$1={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u$1=0,d$1.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=s$1({},this.state),"function"==typeof n&&(n=n(s$1({},u),this.props)),n&&s$1(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),b$1(this));},d$1.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),b$1(this));},d$1.prototype.render=p$1,t$2=[],g$1.__r=0;
+
+  var t$1,r$1,u,i,o=0,f=[],c=[],e$1=l$1.__b,a=l$1.__r,v=l$1.diffed,l=l$1.__c,m$1=l$1.unmount;function d(t,u){l$1.__h&&l$1.__h(r$1,t,o||u),o=0;var i=r$1.__H||(r$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c}),i.__[t]}function p(n){return o=1,y(B,n)}function y(n,u,i){var o=d(t$1++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r$1,!r$1.u)){r$1.u=!0;var f=r$1.shouldComponentUpdate;r$1.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !f||f.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!(!i&&o.__c.props===n)&&(!f||f.call(this,n,t,r))};}return o.__N||o.__}function h(u,i){var o=d(t$1++,3);!l$1.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r$1.__H.__h.push(o));}function s(u,i){var o=d(t$1++,4);!l$1.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r$1.__h.push(o));}function _(n){return o=5,F(function(){return {current:n}},[])}function F(n,r){var u=d(t$1++,7);return z(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T(n,t){return o=8,F(function(){return n},t)}function b(){for(var t;t=f.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k),t.__H.__h.forEach(w),t.__H.__h=[];}catch(r){t.__H.__h=[],l$1.__e(r,t.__v);}}l$1.__b=function(n){r$1=null,e$1&&e$1(n);},l$1.__r=function(n){a&&a(n),t$1=0;var i=(r$1=n.__c).__H;i&&(u===r$1?(i.__h=[],r$1.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.i=void 0;})):(i.__h.forEach(k),i.__h.forEach(w),i.__h=[])),u=r$1;},l$1.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f.push(o)&&i===l$1.requestAnimationFrame||((i=l$1.requestAnimationFrame)||j)(b)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c&&(n.__=n.__V),n.i=void 0,n.__V=c;})),u=r$1=null;},l$1.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k),t.__h=t.__h.filter(function(n){return !n.__||w(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$1.__e(u,t.__v);}}),l&&l(t,r);},l$1.unmount=function(t){m$1&&m$1(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$1.__e(r,u.__v));};var g="function"==typeof requestAnimationFrame;function j(n){var t,r=function(){clearTimeout(u),g&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g&&(t=requestAnimationFrame(r));}function k(n){var t=r$1,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r$1=t;}function w(n){var t=r$1;n.__c=n.__(),r$1=t;}function z(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B(n,t){return "function"==typeof t?t(n):t}
+
+  var n=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a);}return e},t=new Map;function e(s){var r=t.get(this);return r||(r=new Map,t.set(this,r)),(r=n(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e="";},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0]);}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}
+
+  var m=e.bind(h$1);
+
+  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+  /**
+   * Component that renders a popup menu entry.
+   *
+   * @param {string} key
+   * @param {Object} entry
+   * @param {boolean} selected
+   * @param {function} onMouseEnter
+   * @param {function} onMouseLeave
+   * @param {function} onClick
+   */
+  function PopupMenuItem(props) {
+    const {
+      entry,
+      selected,
+      onMouseEnter,
+      onMouseLeave,
+      onClick
+    } = props;
+
+    const createImage = imageUrl => {
+      return m`<img src=${ imageUrl } class="djs-popup-entry-icon" />`;
+    };
+
+    return m`
+    <li
+      class=${ clsx('entry', { selected }) }
+      data-id=${ entry.id }
+      onClick=${ onClick }
+      onMouseEnter=${ onMouseEnter }
+      onMouseLeave=${ onMouseLeave }
+    >
+      <div class="djs-popup-entry-content">
+        <span
+          class=${ clsx('djs-popup-entry-name', entry.className) }
+          title=${ entry.label || entry.name }
+        >
+          ${ entry.imageUrl ? createImage(entry.imageUrl) : null }
+          ${ entry.label || entry.name }
+        </span>
+        ${ entry.description && m`
+          <span
+            class="djs-popup-entry-description"
+            title=${ entry.description }
+          >
+            ${ entry.description }
+          </span>
+        ` }
+      </div>
+      ${ entry.documentationRef && m`
+        <div class="djs-popup-entry-docs">
+          <a
+            href="${ entry.documentationRef }"
+            onClick=${ (event) => event.stopPropagation() }
+            title="Open element documentation"
+            target="_blank"
+            rel="noopener"
+          >
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6368 10.6375V5.91761H11.9995V10.6382C11.9995 10.9973 11.8623 11.3141 11.5878 11.5885C11.3134 11.863 10.9966 12.0002 10.6375 12.0002H1.36266C0.982345 12.0002 0.660159 11.8681 0.396102 11.6041C0.132044 11.34 1.52588e-05 11.0178 1.52588e-05 10.6375V1.36267C1.52588e-05 0.98236 0.132044 0.660173 0.396102 0.396116C0.660159 0.132058 0.982345 2.95639e-05 1.36266 2.95639e-05H5.91624V1.36267H1.36266V10.6375H10.6368ZM12 0H7.2794L7.27873 1.36197H9.68701L3.06507 7.98391L4.01541 8.93425L10.6373 2.31231V4.72059H12V0Z" fill="#818798"/>
+            </svg>
+          </a>
+        </div>
+      ` }
+    </li>
+  `;
+  }
+
+  /**
+   * Component that renders a popup menu entry list.
+   *
+   * @param {Array} entries
+   * @param {Object} selectedEntry
+   * @param {function} setSelectedEntry
+   * @param {function} onClick
+   * @param {Object} resultsRef
+   */
+
+  function PopupMenuList(props) {
+    const {
+      selectedEntry,
+      setSelectedEntry,
+      onClick,
+      entries
+    } = props;
+
+    const resultsRef = _();
+
+    const groups = F(() => groupEntries(entries), [ entries ]);
+
+    // scroll to selected result
+    s(() => {
+      const containerEl = resultsRef.current;
+
+      if (!containerEl)
+        return;
+
+      const selectedEl = containerEl.querySelector('.selected');
+
+      if (selectedEl) {
+        scrollIntoView(selectedEl);
+      }
+    }, [ selectedEntry ]);
+
+    return m`
+    <div class="djs-popup-results" ref=${ resultsRef }>
+      ${ groups.map(group => m`
+        ${ group.name && m`
+          <div key=${ group.id } class="entry-header">
+            ${ group.name }
+          </div>
+        ` }
+        <ul class="djs-popup-group" data-group=${ group.id }>
+          ${ group.entries.map(entry => m`
+            <${PopupMenuItem}
+              key=${ entry.id }
+              entry=${ entry }
+              selected=${ entry === selectedEntry }
+              onMouseEnter=${ () => setSelectedEntry(entry) }
+              onMouseLeave=${ () => setSelectedEntry(null) }
+              onClick=${ onClick }
+            />
+          `) }
+        </ul>
+      `) }
+    </div>
+  `;
+  }
+
+
+  // helpers
+  function groupEntries(entries) {
+    const groups = [];
+
+    const getGroup = group => groups.find(elem => group.id === elem.id);
+
+    const containsGroup = group => !!getGroup(group);
+
+    // legacy support for provider built for the old popUp menu
+    const formatGroup = group =>
+      typeof group === 'string' ? { id: group } : group;
+
+    entries.forEach(entry => {
+
+      // assume a default group when none is provided
+      const group = entry.group ? formatGroup(entry.group) : { id: 'default' };
+
+      if (!containsGroup(group)) {
+        groups.push({ ...group, entries: [ entry ] });
+      } else {
+        getGroup(group).entries.push(entry);
+      }
+    });
+
+    return groups;
+  }
+
+  // helpers ////////////////
+
+  function scrollIntoView(el) {
+    if (typeof el.scrollIntoViewIfNeeded === 'function') {
+      el.scrollIntoViewIfNeeded();
+    } else {
+      el.scrollIntoView({
+        scrollMode: 'if-needed',
+        block: 'nearest'
+      });
+    }
+  }
+
+  /**
+   * A component that renders the popup menus.
+   *
+   * @param {function} onClose
+   * @param {function} position
+   * @param {string} className
+   * @param {Array} entries
+   * @param {Array} headerEntries
+   * @param {number} scale
+   * @param {string} [title]
+   * @param {boolean} [search]
+   * @param {number} [width]
+   */
+  function PopupMenuComponent(props) {
+    const {
+      onClose,
+      onSelect,
+      className,
+      headerEntries,
+      position,
+      title,
+      width,
+      scale,
+      search,
+      entries: originalEntries
+    } = props;
+
+    const searchable = F(() => {
+      if (!isDefined(search)) {
+        return false;
+      }
+
+      return originalEntries.length > 5;
+    }, [ search, originalEntries ]);
+
+    const inputRef = _();
+
+    const [ value, setValue ] = p('');
+
+    const [ entries, setEntries ] = p(originalEntries);
+    const [ selectedEntry, setSelectedEntry ] = p(entries[0]);
+
+    const updateEntries = T((newEntries) => {
+
+      // select first entry if non is selected
+      if (!selectedEntry || !newEntries.includes(selectedEntry)) {
+        setSelectedEntry(newEntries[0]);
+      }
+
+      setEntries(newEntries);
+    }, [ selectedEntry, setEntries, setSelectedEntry ]);
+
+    // filter entries on value change
+    h(() => {
+      if (!searchable) {
+        return;
+      }
+
+      const filter = entry => {
+        if (!value) {
+          return true;
+        }
+
+        const search = [
+          entry.name,
+          entry.description || '',
+          entry.label || '',
+          entry.id || ''
+        ]
+          .join('---')
+          .toLowerCase();
+
+        return value
+          .toLowerCase()
+          .split(/\s/g)
+          .every(term => search.includes(term));
+      };
+
+      const entries = originalEntries.filter(filter);
+
+      updateEntries(entries);
+    }, [ value, originalEntries, searchable ]);
+
+    // register global <Escape> handler
+    h(() => {
+      const handleKeyDown = event => {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+
+          return onClose();
+        }
+      };
+
+      document.documentElement.addEventListener('keydown', handleKeyDown);
+
+      return () => {
+        document.documentElement.removeEventListener('keydown', handleKeyDown);
+      };
+    }, []);
+
+    // focus input on initial mount
+    s(() => {
+      inputRef.current && inputRef.current.focus();
+    }, []);
+
+    // handle keyboard seleciton
+    const keyboardSelect = T(direction => {
+      const idx = entries.indexOf(selectedEntry);
+
+      let nextIdx = idx + direction;
+
+      if (nextIdx < 0) {
+        nextIdx = entries.length - 1;
+      }
+
+      if (nextIdx >= entries.length) {
+        nextIdx = 0;
+      }
+
+      setSelectedEntry(entries[nextIdx]);
+    }, [ entries, selectedEntry, setSelectedEntry ]);
+
+    const handleKeyDown = T(event => {
+      if (event.key === 'Enter' && selectedEntry) {
+        return onSelect(event, selectedEntry);
+      }
+
+      if (event.key === 'Escape') {
+        return onClose();
+      }
+
+      // ARROW_UP or SHIFT + TAB navigation
+      if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {
+        keyboardSelect(-1);
+
+        return event.preventDefault();
+      }
+
+      // ARROW_DOWN or TAB navigation
+      if (event.key === 'ArrowDown' || event.key === 'Tab') {
+        keyboardSelect(1);
+
+        return event.preventDefault();
+      }
+    }, [ onSelect, onClose, selectedEntry, keyboardSelect ]);
+
+    const handleKey = T(event => {
+      if (matches(event.target, 'input')) {
+        setValue(() => event.target.value);
+      }
+    }, [ setValue ]);
+
+    const displayHeader = F(() => title || headerEntries.length > 0, [ title, headerEntries ]);
+
+    return m`
+    <${PopupMenuWrapper}
+      onClose=${ onClose }
+      onKeyup=${ handleKey }
+      onKeydown=${ handleKeyDown }
+      className=${ className }
+      position=${position}
+      width=${ width }
+      scale=${ scale }
+    >
+      ${ displayHeader && m`
+        <div class="djs-popup-header">
+          <h3 class="djs-popup-title">${ title }</h3>
+          ${ headerEntries.map(entry => m`
+            <span
+              class=${ getHeaderClasses(entry, entry === selectedEntry) }
+              onClick=${ event => onSelect(event, entry) }
+              title=${ entry.title }
+              data-id=${ entry.id }
+              onMouseEnter=${ () => setSelectedEntry(entry) }
+              onMouseLeave=${ () => setSelectedEntry(null) }
+            >
+              ${ entry.imageUrl ? m`<img src=${ entry.imageUrl } />` : null }
+              ${ entry.label ? entry.label : null }
+            </span>
+          `) }
+        </div>
+      ` }
+      ${ originalEntries.length > 0 && m`
+        <div class="djs-popup-body">
+
+          ${ searchable && m`
+          <div class="djs-popup-search">
+            <svg class="djs-popup-search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
+            </svg>
+            <input
+                ref=${ inputRef }
+                type="text"
+              />
+          </div>
+          ` }
+
+          <${PopupMenuList}
+            entries=${ entries }
+            selectedEntry=${ selectedEntry }
+            setSelectedEntry=${ setSelectedEntry }
+            onClick=${ onSelect }
+          />
+        </div>
+        ${ entries.length === 0 && m`
+          <div class="djs-popup-no-results">No matching entries found.</div>
+        ` }
+      ` }
+    </${PopupMenuWrapper}>
+  `;
+  }
+
+  /**
+   * A component that wraps the popup menu.
+   *
+   * @param {any} props
+   */
+  function PopupMenuWrapper(props) {
+    const {
+      onClose,
+      onKeydown,
+      onKeyup,
+      className,
+      children,
+      position: positionGetter
+    } = props;
+
+    const popupRef = _();
+
+    const checkClose = T((event) => {
+
+      const overlay = closest(event.target, '.djs-popup .djs-popup-overlay', true);
+
+      if (overlay) {
+        return;
+      }
+
+      onClose();
+    }, [ onClose ]);
+
+    const overlayRef = _();
+
+    s(() => {
+      if (typeof positionGetter !== 'function') {
+        return;
+      }
+
+      const overlayEl = overlayRef.current;
+      const position = positionGetter(overlayEl);
+
+      overlayEl.style.left = `${position.x}px`;
+      overlayEl.style.top = `${position.y}px`;
+    }, [ overlayRef.current, positionGetter ]);
+
+    // focus popup initially, on mount
+    s(() => {
+      popupRef.current && popupRef.current.focus();
+    }, []);
+
+    return m`
+    <div
+      class=${ clsx('djs-popup', className) }
+      onClick=${ checkClose }
+      onKeydown=${ onKeydown }
+      onKeyup=${ onKeyup }
+      ref=${ popupRef }
+      tabIndex="-1"
+    >
+      <div
+        class="djs-popup-overlay"
+        ref=${ overlayRef }
+        style=${ getOverlayStyle(props) }
+      >
+        ${children}
+      </div>
+    </div>
+  `;
+  }
+
+  // helpers //////////////////////
+
+  function getOverlayStyle(props) {
+    return {
+      transform: `scale(${props.scale})`,
+      width: `${props.width}px`
+    };
+  }
+
+  function getHeaderClasses(entry, selected) {
+    return clsx(
+      'entry',
+      entry.className,
+      entry.active ? 'active' : '',
+      entry.disabled ? 'disabled' : '',
+      selected ? 'selected' : ''
+    );
+  }
+
   var DATA_REF = 'data-id';
 
   var CLOSE_EVENTS = [
@@ -28121,6 +28597,9 @@
    * @constructor
    */
   function PopupMenu(config, eventBus, canvas) {
+    this._eventBus = eventBus;
+    this._canvas = canvas;
+    this._current = {};
 
     var scale = isDefined(config && config.scale) ? config.scale : {
       min: 1,
@@ -28131,10 +28610,20 @@
       scale: scale
     };
 
-    this._eventBus = eventBus;
-    this._canvas = canvas;
-    this._providers = {};
-    this._current = {};
+
+    eventBus.on('diagram.destroy', () => {
+      this._destroy();
+    });
+
+    eventBus.on('element.changed', event => {
+
+      const element = this.isOpen() && this._current.element;
+
+      if (event.element === element) {
+        this._render();
+      }
+    });
+
   }
 
   PopupMenu.$inject = [
@@ -28143,65 +28632,51 @@
     'canvas'
   ];
 
-  /**
-   * Registers a popup menu provider
-   *
-   * @param  {string} id
-   * @param {number} [priority=1000]
-   * @param  {Object} provider
-   *
-   * @example
-   * const popupMenuProvider = {
-   *   getPopupMenuEntries: function(element) {
-   *     return {
-   *       'entry-1': {
-   *         label: 'My Entry',
-   *         action: function() { alert("I have been clicked!"); }
-   *       }
-   *     }
-   *   }
-   * };
-   *
-   * popupMenu.registerProvider('myMenuID', popupMenuProvider);
-   */
-  PopupMenu.prototype.registerProvider = function(id, priority, provider) {
-    if (!provider) {
-      provider = priority;
-      priority = DEFAULT_PRIORITY$1;
-    }
-
-    this._eventBus.on('popupMenu.getProviders.' + id, priority, function(event) {
-      event.providers.push(provider);
-    });
-  };
-
-  /**
-   * Determine if the popup menu has entries.
-   *
-   * @return {boolean} true if empty
-   */
-  PopupMenu.prototype.isEmpty = function(element, providerId) {
-    if (!element) {
-      throw new Error('element parameter is missing');
-    }
-
-    if (!providerId) {
-      throw new Error('providerId parameter is missing');
-    }
+  PopupMenu.prototype._render = function() {
 
-    var providers = this._getProviders(providerId);
+    const {
+      position: _position,
+      className,
+      entries,
+      headerEntries,
+      options
+    } = this._current;
 
-    if (!providers) {
-      return true;
-    }
+    const entriesArray = [
+      ...Object.entries(entries).map(
+        ([ key, value ]) => ({ id: key, ...value })
+      )
+    ];
 
-    var entries = this._getEntries(element, providers),
-        headerEntries = this._getHeaderEntries(element, providers);
+    const headerEntriesArray = [
+      ...Object.entries(headerEntries).map(
+        ([ key, value ]) => ({ id: key, ...value })
+      )
+    ];
 
-    var hasEntries = size(entries) > 0,
-        hasHeaderEntries = headerEntries && size(headerEntries) > 0;
+    const position = _position && (
+      (container) => this._ensureVisible(container, _position)
+    );
 
-    return !hasEntries && !hasHeaderEntries;
+    const scale = this._updateScale(this._current.container);
+
+    const onClose = result => this.close(result);
+    const onSelect = (event, entry) => this.trigger(event, entry);
+
+    P(m`
+    <${PopupMenuComponent}
+      onClose=${ onClose }
+      onSelect=${ onSelect }
+      position=${ position }
+      className=${ className }
+      entries=${ entriesArray }
+      headerEntries=${ headerEntriesArray }
+      scale=${ scale }
+      ...${{ ...options }}
+    />
+  `,
+    this._current.container
+    );
   };
 
 
@@ -28214,16 +28689,13 @@
    *
    * @return {Object} popup menu instance
    */
-  PopupMenu.prototype.open = function(element, id, position) {
-
-    var providers = this._getProviders(id);
-
+  PopupMenu.prototype.open = function(element, providerId, position, options) {
     if (!element) {
       throw new Error('Element is missing');
     }
 
-    if (!providers || !providers.length) {
-      throw new Error('No registered providers for: ' + id);
+    if (!providerId) {
+      throw new Error('No registered providers for: ' + providerId);
     }
 
     if (!position) {
@@ -28233,45 +28705,52 @@
     if (this.isOpen()) {
       this.close();
     }
+    const {
+      entries,
+      headerEntries
+    } = this._getContext(element, providerId);
+
+    this._current = {
+      position,
+      className: providerId,
+      element,
+      entries,
+      headerEntries,
+      container: this._createContainer({ provider: providerId }),
+      options
+    };
 
     this._emit('open');
 
-    var current = this._current = {
-      className: id,
-      element: element,
-      position: position
-    };
+    this._bindAutoClose();
+
+    this._render();
 
-    var entries = this._getEntries(element, providers),
-        headerEntries = this._getHeaderEntries(element, providers);
 
-    current.entries = assign$1({}, entries, headerEntries);
+  };
 
-    current.container = this._createContainer(id);
 
-    if (size(headerEntries)) {
-      current.container.appendChild(
-        this._createEntries(headerEntries, 'djs-popup-header')
-      );
-    }
+  PopupMenu.prototype._getContext = function(element, provider) {
 
-    if (size(entries)) {
-      current.container.appendChild(
-        this._createEntries(entries, 'djs-popup-body')
-      );
+    const providers = this._getProviders(provider);
+
+    if (!providers || !providers.length) {
+      throw new Error('No registered providers for: ' + provider);
     }
 
-    var canvas = this._canvas,
-        parent = canvas.getContainer();
+    const entries = this._getEntries(element, providers);
+    const headerEntries = this._getHeaderEntries(element, providers);
 
-    this._attachContainer(current.container, parent, position.cursor);
-    this._bindAutoClose();
+    return {
+      entries,
+      headerEntries,
+      empty: !(
+        Object.keys(entries).length ||
+            Object.keys(headerEntries).length
+      )
+    };
   };
 
-
-  /**
-   * Removes the popup menu and unbinds the event handlers.
-   */
   PopupMenu.prototype.close = function() {
 
     if (!this.isOpen()) {
@@ -28280,44 +28759,179 @@
 
     this._emit('close');
 
-    this._unbindAutoClose();
-    remove$2(this._current.container);
+    this.reset();
+
     this._current.container = null;
   };
 
+  PopupMenu.prototype.reset = function() {
+    P(null, this._current.container);
+  };
+
+  PopupMenu.prototype._emit = function(event, payload) {
+    this._eventBus.fire(`popupMenu.${ event }`, payload);
+  };
+
+  PopupMenu.prototype._createContainer = function(config) {
+
+    let parent = config && config.parent || 'body';
+
+    if (typeof parent === 'string') {
+      parent = document.querySelector(parent);
+    }
+
+    const container = domify$1(`<div class="djs-popup-parent djs-parent" data-popup=${config.provider}></div>`);
+
+    parent.appendChild(container);
+
+    return container;
+  };
 
   /**
-   * Determine if an open popup menu exist.
-   *
-   * @return {boolean} true if open
+   * Set up listener to close popup automatically on certain events.
    */
-  PopupMenu.prototype.isOpen = function() {
-    return !!this._current.container;
+  PopupMenu.prototype._bindAutoClose = function() {
+    this._eventBus.once(CLOSE_EVENTS, this.close, this);
   };
 
 
   /**
-   * Trigger an action associated with an entry.
-   *
-   * @param {Object} event
+   * Remove the auto-closing listener.
+  */
+  PopupMenu.prototype._unbindAutoClose = function() {
+    this._eventBus.off(CLOSE_EVENTS, this.close, this);
+  };
+
+
+  PopupMenu.prototype._destroy = function() {
+    this._current.container && remove$2(this._current.container);
+  };
+
+
+  /**
+   * Updates popup style.transform with respect to the config and zoom level.
    *
-   * @return the result of the action callback, if any
+   * @param {Object} container
    */
-  PopupMenu.prototype.trigger = function(event) {
+  PopupMenu.prototype._updateScale = function(container) {
+    var zoom = this._canvas.zoom();
 
-    // silence other actions
-    event.preventDefault();
+    var scaleConfig = this._config.scale,
+        minScale,
+        maxScale,
+        scale = zoom;
 
-    var element = event.delegateTarget || event.target,
-        entryId = attr$1(element, DATA_REF);
+    if (scaleConfig !== true) {
 
-    var entry = this._getEntry(entryId);
+      if (scaleConfig === false) {
+        minScale = 1;
+        maxScale = 1;
+      } else {
+        minScale = scaleConfig.min;
+        maxScale = scaleConfig.max;
+      }
 
-    if (entry.action) {
-      return entry.action.call(null, event, entry);
+      if (isDefined(minScale) && zoom < minScale) {
+        scale = minScale;
+      }
+
+      if (isDefined(maxScale) && zoom > maxScale) {
+        scale = maxScale;
+      }
+
+    }
+
+    return scale;
+
+  };
+
+  PopupMenu.prototype._ensureVisible = function(container, position) {
+    var documentBounds = document.documentElement.getBoundingClientRect();
+    var containerBounds = container.getBoundingClientRect();
+
+    var overAxis = {},
+        left = position.x,
+        top = position.y;
+
+    if (position.x + containerBounds.width > documentBounds.width) {
+      overAxis.x = true;
+    }
+
+    if (position.y + containerBounds.height > documentBounds.height) {
+      overAxis.y = true;
+    }
+
+    if (overAxis.x && overAxis.y) {
+      left = position.x - containerBounds.width;
+      top = position.y - containerBounds.height;
+    } else if (overAxis.x) {
+      left = position.x - containerBounds.width;
+      top = position.y;
+    } else if (overAxis.y && position.y < containerBounds.height) {
+      left = position.x;
+      top = 10;
+    } else if (overAxis.y) {
+      left = position.x;
+      top = position.y - containerBounds.height;
+    }
+
+    return {
+      x: left,
+      y: top
+    };
+  };
+
+  PopupMenu.prototype.isEmpty = function(element, providerId) {
+    if (!element) {
+      throw new Error('element parameter is missing');
+    }
+
+    if (!providerId) {
+      throw new Error('providerId parameter is missing');
+    }
+
+    const providers = this._getProviders(providerId);
+
+    if (!providers || !providers.length) {
+      return true;
+    }
+
+    return this._getContext(element, providerId).empty;
+  };
+
+  /**
+   * Registers a popup menu provider
+   *
+   * @param  {string} id
+   * @param {number} [priority=1000]
+   * @param  {Object} provider
+   *
+   * @example
+   * const popupMenuProvider = {
+   *   getPopupMenuEntries: function(element) {
+   *     return {
+   *       'entry-1': {
+   *         label: 'My Entry',
+   *         action: function() { alert("I have been clicked!"); }
+   *       }
+   *     }
+   *   }
+   * };
+   *
+   * popupMenu.registerProvider('myMenuID', popupMenuProvider);
+   */
+  PopupMenu.prototype.registerProvider = function(id, priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$1;
     }
+
+    this._eventBus.on('popupMenu.getProviders.' + id, priority, function(event) {
+      event.providers.push(provider);
+    });
   };
 
+
   PopupMenu.prototype._getProviders = function(id) {
 
     var event = this._eventBus.createEvent({
@@ -28406,282 +29020,61 @@
 
   };
 
-  /**
-   * Gets an entry instance (either entry or headerEntry) by id.
-   *
-   * @param  {string} entryId
-   *
-   * @return {Object} entry instance
-   */
-  PopupMenu.prototype._getEntry = function(entryId) {
-
-    var entry = this._current.entries[entryId];
-
-    if (!entry) {
-      throw new Error('entry not found');
-    }
-
-    return entry;
-  };
-
-  PopupMenu.prototype._emit = function(eventName) {
-    this._eventBus.fire('popupMenu.' + eventName);
-  };
-
-  /**
-   * Creates the popup menu container.
-   *
-   * @return {Object} a DOM container
-   */
-  PopupMenu.prototype._createContainer = function(id) {
-    var container = domify$1('<div class="djs-popup">'),
-        position = this._current.position,
-        className = this._current.className;
-
-    assign(container, {
-      position: 'absolute',
-      left: position.x + 'px',
-      top: position.y + 'px',
-      visibility: 'hidden'
-    });
-
-    classes$1(container).add(className);
-
-    attr$1(container, 'data-popup', id);
-
-    return container;
-  };
-
 
   /**
-   * Attaches the container to the DOM.
-   *
-   * @param {Object} container
-   * @param {Object} parent
-   */
-  PopupMenu.prototype._attachContainer = function(container, parent, cursor) {
-    var self = this;
-
-    // Event handler
-    delegate.bind(container, '.entry' ,'click', function(event) {
-      self.trigger(event);
-    });
-
-    this._updateScale(container);
-
-    // Attach to DOM
-    parent.appendChild(container);
-
-    if (cursor) {
-      this._assureIsInbounds(container, cursor);
-    }
-
-    // display after position adjustment to avoid flickering
-    assign(container, { visibility: 'visible' });
-  };
-
-
-  /**
-   * Updates popup style.transform with respect to the config and zoom level.
-   *
-   * @method _updateScale
+   * Determine if an open popup menu exist.
    *
-   * @param {Object} container
+   * @return {boolean} true if open
    */
-  PopupMenu.prototype._updateScale = function(container) {
-    var zoom = this._canvas.zoom();
-
-    var scaleConfig = this._config.scale,
-        minScale,
-        maxScale,
-        scale = zoom;
-
-    if (scaleConfig !== true) {
-
-      if (scaleConfig === false) {
-        minScale = 1;
-        maxScale = 1;
-      } else {
-        minScale = scaleConfig.min;
-        maxScale = scaleConfig.max;
-      }
-
-      if (isDefined(minScale) && zoom < minScale) {
-        scale = minScale;
-      }
-
-      if (isDefined(maxScale) && zoom > maxScale) {
-        scale = maxScale;
-      }
-
-    }
-
-    setTransform(container, 'scale(' + scale + ')');
+  PopupMenu.prototype.isOpen = function() {
+    return !!this._current.container;
   };
 
 
   /**
-   * Make sure that the menu is always fully shown
+   * Trigger an action associated with an entry.
    *
-   * @method function
+   * @param {Object} event
+   * @param {Object} entry
    *
-   * @param  {Object} container
-   * @param  {Position} cursor {x, y}
+   * @return the result of the action callback, if any
    */
-  PopupMenu.prototype._assureIsInbounds = function(container, cursor) {
-    var canvas = this._canvas,
-        clientRect = canvas._container.getBoundingClientRect();
+  PopupMenu.prototype.trigger = function(event, entry) {
 
-    var containerX = container.offsetLeft,
-        containerY = container.offsetTop,
-        containerWidth = container.scrollWidth,
-        containerHeight = container.scrollHeight,
-        overAxis = {},
-        left, top;
-
-    var cursorPosition = {
-      x: cursor.x - clientRect.left,
-      y: cursor.y - clientRect.top
-    };
+    // silence other actions
+    event.preventDefault();
 
-    if (containerX + containerWidth > clientRect.width) {
-      overAxis.x = true;
-    }
+    if (!entry) {
+      let element = closest(event.delegateTarget || event.target, '.entry', true);
+      let entryId = attr$1(element, DATA_REF);
 
-    if (containerY + containerHeight > clientRect.height) {
-      overAxis.y = true;
+      entry = this._getEntry(entryId);
     }
 
-    if (overAxis.x && overAxis.y) {
-      left = cursorPosition.x - containerWidth + 'px';
-      top = cursorPosition.y - containerHeight + 'px';
-    } else if (overAxis.x) {
-      left = cursorPosition.x - containerWidth + 'px';
-      top = cursorPosition.y + 'px';
-    } else if (overAxis.y && cursorPosition.y < containerHeight) {
-      left = cursorPosition.x + 'px';
-      top = 10 + 'px';
-    } else if (overAxis.y) {
-      left = cursorPosition.x + 'px';
-      top = cursorPosition.y - containerHeight + 'px';
+    if (entry.action) {
+      return entry.action.call(null, event, entry);
     }
-
-    assign(container, { left: left, top: top }, { 'zIndex': 1000 });
   };
 
-
   /**
-   * Creates a list of entries and returns them as a DOM container.
-   *
-   * @param {Array<Object>} entries an array of entry objects
-   * @param {string} className the class name of the entry container
-   *
-   * @return {Object} a DOM container
-   */
-  PopupMenu.prototype._createEntries = function(entries, className) {
-
-    var entriesContainer = domify$1('<div>'),
-        self = this;
-
-    classes$1(entriesContainer).add(className);
-
-    forEach$1(entries, function(entry, id) {
-      var entryContainer = self._createEntry(entry, id),
-          grouping = entry.group || 'default',
-          groupContainer = query('[data-group=' + cssEscape(grouping) + ']', entriesContainer);
-
-      if (!groupContainer) {
-        groupContainer = domify$1('<div class="group"></div>');
-        attr$1(groupContainer, 'data-group', grouping);
-
-        entriesContainer.appendChild(groupContainer);
-      }
-
-      groupContainer.appendChild(entryContainer);
-    });
-
-    return entriesContainer;
-  };
-
-
-  /**
-   * Creates a single entry and returns it as a DOM container.
+   * Gets an entry instance (either entry or headerEntry) by id.
    *
-   * @param  {Object} entry
+   * @param  {string} entryId
    *
-   * @return {Object} a DOM container
+   * @return {Object} entry instance
    */
-  PopupMenu.prototype._createEntry = function(entry, id) {
-
-    var entryContainer = domify$1('<div>'),
-        entryClasses = classes$1(entryContainer);
-
-    entryClasses.add('entry');
-
-    if (entry.className) {
-      entry.className.split(' ').forEach(function(className) {
-        entryClasses.add(className);
-      });
-    }
-
-    attr$1(entryContainer, DATA_REF, id);
-
-    if (entry.label) {
-      var label = domify$1('<span>');
-      label.textContent = entry.label;
-      entryContainer.appendChild(label);
-    }
-
-    if (entry.imageUrl) {
-      var image = domify$1('<img>');
-      attr$1(image, 'src', entry.imageUrl);
-
-      entryContainer.appendChild(image);
-    }
+  PopupMenu.prototype._getEntry = function(entryId) {
 
-    if (entry.active === true) {
-      entryClasses.add('active');
-    }
+    var entry = this._current.entries[entryId] || this._current.headerEntries[entryId];
 
-    if (entry.disabled === true) {
-      entryClasses.add('disabled');
-    }
 
-    if (entry.title) {
-      entryContainer.title = entry.title;
+    if (!entry) {
+      throw new Error('entry not found');
     }
 
-    return entryContainer;
-  };
-
-
-  /**
-   * Set up listener to close popup automatically on certain events.
-   */
-  PopupMenu.prototype._bindAutoClose = function() {
-    this._eventBus.once(CLOSE_EVENTS, this.close, this);
-  };
-
-
-  /**
-   * Remove the auto-closing listener.
-   */
-  PopupMenu.prototype._unbindAutoClose = function() {
-    this._eventBus.off(CLOSE_EVENTS, this.close, this);
+    return entry;
   };
 
-
-
-  // helpers /////////////////////////////
-
-  function setTransform(element, transform) {
-    element.style['transform-origin'] = 'top left';
-
-    [ '', '-ms-', '-webkit-' ].forEach(function(prefix) {
-      element.style[prefix + 'transform'] = transform;
-    });
-  }
-
   var PopupMenuModule$1 = {
     __init__: [ 'popupMenu' ],
     popupMenu: [ 'type', PopupMenu ]
@@ -28768,18 +29161,13 @@
   AlignElementsContextPadProvider.prototype._getMenuPosition = function(elements) {
     var Y_OFFSET = 5;
 
-    var diagramContainer = this._canvas.getContainer(),
-        pad = this._contextPad.getPad(elements).html;
+    var pad = this._contextPad.getPad(elements).html;
 
-    var diagramRect = diagramContainer.getBoundingClientRect(),
-        padRect = pad.getBoundingClientRect();
-
-    var top = padRect.top - diagramRect.top;
-    var left = padRect.left - diagramRect.left;
+    var padRect = pad.getBoundingClientRect();
 
     var pos = {
-      x: left,
-      y: top + padRect.height + Y_OFFSET
+      x: padRect.left,
+      y: padRect.bottom + Y_OFFSET
     };
 
     return pos;
@@ -28867,7 +29255,7 @@
 
   RuleProvider.$inject = [ 'eventBus' ];
 
-  e(RuleProvider, CommandInterceptor);
+  e$3(RuleProvider, CommandInterceptor);
 
 
   /**
@@ -28944,7 +29332,7 @@
 
   BpmnAlignElements.$inject = [ 'eventBus' ];
 
-  e(BpmnAlignElements, RuleProvider);
+  e$3(BpmnAlignElements, RuleProvider);
 
   BpmnAlignElements.prototype.init = function() {
     this.addRule('elements.align', function(context) {
@@ -29664,7 +30052,7 @@
     'rules'
   ];
 
-  e(AutoResize, CommandInterceptor);
+  e$3(AutoResize, CommandInterceptor);
 
 
   /**
@@ -29844,7 +30232,7 @@
     'injector'
   ];
 
-  e(BpmnAutoResize, AutoResize);
+  e$3(BpmnAutoResize, AutoResize);
 
 
   /**
@@ -29879,7 +30267,7 @@
 
   AutoResizeProvider.$inject = [ 'eventBus' ];
 
-  e(AutoResizeProvider, RuleProvider);
+  e$3(AutoResizeProvider, RuleProvider);
 
   /**
    * Needs to be implemented by sub classes to allow actual auto resize
@@ -29902,7 +30290,7 @@
     this._modeling = modeling;
   }
 
-  e(BpmnAutoResizeProvider, AutoResizeProvider);
+  e$3(BpmnAutoResizeProvider, AutoResizeProvider);
 
   BpmnAutoResizeProvider.$inject = [
     'eventBus',
@@ -30370,7 +30758,7 @@
 
     function checkCancel(event) {
 
-      if (event.which === 27) {
+      if (isKey('Escape', event)) {
         preventDefault$1(event);
 
         cancel();
@@ -38214,7 +38602,6 @@
         connect = this._connect,
         create = this._create,
         popupMenu = this._popupMenu,
-        canvas = this._canvas,
         rules = this._rules,
         autoPlace = this._autoPlace,
         translate = this._translate;
@@ -38239,18 +38626,13 @@
 
       var Y_OFFSET = 5;
 
-      var diagramContainer = canvas.getContainer(),
-          pad = contextPad.getPad(element).html;
+      var pad = contextPad.getPad(element).html;
 
-      var diagramRect = diagramContainer.getBoundingClientRect(),
-          padRect = pad.getBoundingClientRect();
-
-      var top = padRect.top - diagramRect.top;
-      var left = padRect.left - diagramRect.left;
+      var padRect = pad.getBoundingClientRect();
 
       var pos = {
-        x: left,
-        y: top + padRect.height + Y_OFFSET
+        x: padRect.left,
+        y: padRect.bottom + Y_OFFSET
       };
 
       return pos;
@@ -38473,7 +38855,11 @@
                 cursor: { x: event.x, y: event.y }
               });
 
-              popupMenu.open(element, 'bpmn-replace', position);
+              popupMenu.open(element, 'bpmn-replace', position, {
+                title: translate('Change element'),
+                width: 300,
+                search: true
+              });
             }
           }
         }
@@ -38828,7 +39214,7 @@
 
   BpmnDistributeElements.$inject = [ 'distributeElements', 'eventBus', 'rules' ];
 
-  e(BpmnDistributeElements, RuleProvider);
+  e$3(BpmnDistributeElements, RuleProvider);
 
   BpmnDistributeElements.prototype.init = function() {
     this.addRule('elements.distribute', function(context) {
@@ -39220,7 +39606,7 @@
     injector.invoke(EditorActions, this);
   }
 
-  e(BpmnEditorActions, EditorActions);
+  e$3(BpmnEditorActions, EditorActions);
 
   BpmnEditorActions.$inject = [
     'injector'
@@ -39782,7 +40168,7 @@
     'modeling'
   ];
 
-  e(ResizeBehavior$1, CommandInterceptor);
+  e$3(ResizeBehavior$1, CommandInterceptor);
 
   /**
    * Snap width and height in relation to center.
@@ -40105,7 +40491,7 @@
     'modeling'
   ];
 
-  e(GridSnappingLayoutConnectionBehavior, CommandInterceptor);
+  e$3(GridSnappingLayoutConnectionBehavior, CommandInterceptor);
 
   /**
    * Snap middle segments of a given connection.
@@ -40349,7 +40735,7 @@
     injector.invoke(KeyboardBindings, this);
   }
 
-  e(BpmnKeyboardBindings, KeyboardBindings);
+  e$3(BpmnKeyboardBindings, KeyboardBindings);
 
   BpmnKeyboardBindings.$inject = [
     'injector'
@@ -41881,7 +42267,7 @@
 
   }
 
-  e(AdaptiveLabelPositioningBehavior, CommandInterceptor);
+  e$3(AdaptiveLabelPositioningBehavior, CommandInterceptor);
 
   AdaptiveLabelPositioningBehavior.$inject = [
     'eventBus',
@@ -42024,7 +42410,7 @@
     }, true);
   }
 
-  e(AppendBehavior, CommandInterceptor);
+  e$3(AppendBehavior, CommandInterceptor);
 
   AppendBehavior.$inject = [
     'eventBus',
@@ -42049,7 +42435,7 @@
     }, true);
   }
 
-  e(AssociationBehavior, CommandInterceptor);
+  e$3(AssociationBehavior, CommandInterceptor);
 
   AssociationBehavior.$inject = [
     'injector',
@@ -42113,7 +42499,7 @@
     'injector'
   ];
 
-  e(AttachEventBehavior, CommandInterceptor);
+  e$3(AttachEventBehavior, CommandInterceptor);
 
   AttachEventBehavior.prototype.replaceShape = function(shape, host) {
     var eventDefinition = getEventDefinition$1(shape);
@@ -42200,7 +42586,7 @@
     'modeling'
   ];
 
-  e(BoundaryEventBehavior, CommandInterceptor);
+  e$3(BoundaryEventBehavior, CommandInterceptor);
 
   function CreateBehavior(injector) {
     injector.invoke(CommandInterceptor, this);
@@ -42220,7 +42606,7 @@
 
   CreateBehavior.$inject = [ 'injector' ];
 
-  e(CreateBehavior, CommandInterceptor);
+  e$3(CreateBehavior, CommandInterceptor);
 
   /**
    * BPMN specific create data object behavior
@@ -42252,7 +42638,7 @@
     'moddle'
   ];
 
-  e(CreateDataObjectBehavior, CommandInterceptor);
+  e$3(CreateDataObjectBehavior, CommandInterceptor);
 
   var HORIZONTAL_PARTICIPANT_PADDING = 20,
       VERTICAL_PARTICIPANT_PADDING = 20;
@@ -42426,7 +42812,7 @@
     'modeling'
   ];
 
-  e(CreateParticipantBehavior, CommandInterceptor);
+  e$3(CreateParticipantBehavior, CommandInterceptor);
 
   // helpers //////////
 
@@ -42588,7 +42974,7 @@
     'bpmnFactory'
   ];
 
-  e(DataInputAssociationBehavior, CommandInterceptor);
+  e$3(DataInputAssociationBehavior, CommandInterceptor);
 
 
   /**
@@ -42813,7 +43199,7 @@
     'eventBus',
   ];
 
-  e(DataStoreBehavior, CommandInterceptor);
+  e$3(DataStoreBehavior, CommandInterceptor);
 
 
   // helpers //////////
@@ -42940,7 +43326,7 @@
     'spaceTool'
   ];
 
-  e(DeleteLaneBehavior, CommandInterceptor);
+  e$3(DeleteLaneBehavior, CommandInterceptor);
 
   var LOW_PRIORITY$b = 500;
 
@@ -42988,7 +43374,7 @@
     'injector'
   ];
 
-  e(DetachEventBehavior, CommandInterceptor);
+  e$3(DetachEventBehavior, CommandInterceptor);
 
   DetachEventBehavior.prototype.replaceShape = function(shape) {
     var eventDefinition = getEventDefinition(shape),
@@ -43194,7 +43580,7 @@
     }, true);
   }
 
-  e(DropOnFlowBehavior, CommandInterceptor);
+  e$3(DropOnFlowBehavior, CommandInterceptor);
 
   DropOnFlowBehavior.$inject = [
     'eventBus',
@@ -43302,7 +43688,7 @@
     'modeling'
   ];
 
-  e(EventBasedGatewayBehavior, CommandInterceptor);
+  e$3(EventBasedGatewayBehavior, CommandInterceptor);
 
   // helpers //////////
 
@@ -43792,7 +44178,7 @@
     'moddleCopy'
   ];
 
-  e(GroupBehavior, CommandInterceptor);
+  e$3(GroupBehavior, CommandInterceptor);
 
   /**
    * Returns the intersection between two line segments a and b.
@@ -43937,7 +44323,7 @@
 
   IsHorizontalFix.$inject = [ 'eventBus' ];
 
-  e(IsHorizontalFix, CommandInterceptor);
+  e$3(IsHorizontalFix, CommandInterceptor);
 
   var sqrt = Math.sqrt,
       min$1 = Math.min,
@@ -44775,7 +45161,7 @@
 
   }
 
-  e(LabelBehavior, CommandInterceptor);
+  e$3(LabelBehavior, CommandInterceptor);
 
   LabelBehavior.$inject = [
     'eventBus',
@@ -45011,7 +45397,7 @@
 
   }
 
-  e(LayoutConnectionBehavior, CommandInterceptor);
+  e$3(LayoutConnectionBehavior, CommandInterceptor);
 
   LayoutConnectionBehavior.$inject = [
     'eventBus',
@@ -45154,7 +45540,7 @@
 
   MessageFlowBehavior.$inject = [ 'eventBus', 'modeling' ];
 
-  e(MessageFlowBehavior, CommandInterceptor);
+  e$3(MessageFlowBehavior, CommandInterceptor);
 
   // helpers //////////
 
@@ -45251,7 +45637,7 @@
     }, true);
   }
 
-  e(RemoveEmbeddedLabelBoundsBehavior, CommandInterceptor);
+  e$3(RemoveEmbeddedLabelBoundsBehavior, CommandInterceptor);
 
   RemoveEmbeddedLabelBoundsBehavior.$inject = [
     'eventBus',
@@ -45295,7 +45681,7 @@
 
   }
 
-  e(RemoveElementBehavior, CommandInterceptor);
+  e$3(RemoveElementBehavior, CommandInterceptor);
 
   RemoveElementBehavior.$inject = [
     'eventBus',
@@ -45372,7 +45758,7 @@
 
   RemoveParticipantBehavior.$inject = [ 'eventBus', 'modeling' ];
 
-  e(RemoveParticipantBehavior, CommandInterceptor);
+  e$3(RemoveParticipantBehavior, CommandInterceptor);
 
   function ReplaceConnectionBehavior(eventBus, modeling, bpmnRules, injector) {
 
@@ -45537,7 +45923,7 @@
     });
   }
 
-  e(ReplaceConnectionBehavior, CommandInterceptor);
+  e$3(ReplaceConnectionBehavior, CommandInterceptor);
 
   ReplaceConnectionBehavior.$inject = [
     'eventBus',
@@ -45634,7 +46020,7 @@
     });
   }
 
-  e(ReplaceElementBehaviour, CommandInterceptor);
+  e$3(ReplaceElementBehaviour, CommandInterceptor);
 
   ReplaceElementBehaviour.prototype.replaceElements = function(elements, newElements) {
     var elementRegistry = this._elementRegistry,
@@ -46031,7 +46417,7 @@
     'bpmnFactory'
   ];
 
-  e(RootElementReferenceBehavior, CommandInterceptor);
+  e$3(RootElementReferenceBehavior, CommandInterceptor);
 
   // helpers //////////
 
@@ -46534,7 +46920,7 @@
 
   }
 
-  e(SubProcessPlaneBehavior, CommandInterceptor);
+  e$3(SubProcessPlaneBehavior, CommandInterceptor);
 
   /**
    * Moves the child elements from source to target.
@@ -46741,7 +47127,7 @@
     'modeling'
   ];
 
-  e(SubProcessStartEventBehavior, CommandInterceptor);
+  e$3(SubProcessStartEventBehavior, CommandInterceptor);
 
   // helpers //////////
 
@@ -46803,7 +47189,7 @@
 
   }
 
-  e(ToggleCollapseConnectionBehaviour, CommandInterceptor);
+  e$3(ToggleCollapseConnectionBehaviour, CommandInterceptor);
 
   ToggleCollapseConnectionBehaviour.$inject = [
     'eventBus',
@@ -46929,7 +47315,7 @@
   }
 
 
-  e(ToggleElementCollapseBehaviour, CommandInterceptor);
+  e$3(ToggleElementCollapseBehaviour, CommandInterceptor);
 
   ToggleElementCollapseBehaviour.$inject = [
     'eventBus',
@@ -46992,7 +47378,7 @@
     });
   }
 
-  e(UnclaimIdBehavior, CommandInterceptor);
+  e$3(UnclaimIdBehavior, CommandInterceptor);
 
   UnclaimIdBehavior.$inject = [ 'canvas', 'injector', 'moddle', 'modeling' ];
 
@@ -47022,7 +47408,7 @@
     });
   }
 
-  e(DeleteSequenceFlowBehavior, CommandInterceptor);
+  e$3(DeleteSequenceFlowBehavior, CommandInterceptor);
 
   DeleteSequenceFlowBehavior.$inject = [
     'eventBus',
@@ -47166,7 +47552,7 @@
     'translate'
   ];
 
-  e(UpdateFlowNodeRefsBehavior, CommandInterceptor);
+  e$3(UpdateFlowNodeRefsBehavior, CommandInterceptor);
 
 
   function UpdateContext() {
@@ -47294,7 +47680,7 @@
     RuleProvider.call(this, eventBus);
   }
 
-  e(BpmnRules, RuleProvider);
+  e$3(BpmnRules, RuleProvider);
 
   BpmnRules.$inject = [ 'eventBus' ];
 
@@ -48314,7 +48700,7 @@
     return null;
   };
 
-  e(OrderingProvider, CommandInterceptor);
+  e$3(OrderingProvider, CommandInterceptor);
 
   /**
    * a simple ordering provider that makes sure:
@@ -48482,7 +48868,7 @@
 
   BpmnOrderingProvider.$inject = [ 'eventBus', 'canvas', 'translate' ];
 
-  e(BpmnOrderingProvider, OrderingProvider);
+  e$3(BpmnOrderingProvider, OrderingProvider);
 
   var OrderingModule = {
     __depends__: [
@@ -49645,7 +50031,7 @@
     'injector'
   ];
 
-  e(BpmnSpaceTool, SpaceTool);
+  e$3(BpmnSpaceTool, SpaceTool);
 
   BpmnSpaceTool.prototype.calculateAdjustments = function(elements, axis, delta, start) {
     var adjustments = SpaceTool.prototype.calculateAdjustments.call(this, elements, axis, delta, start);
@@ -50703,7 +51089,7 @@
 
   }
 
-  e(LabelSupport, CommandInterceptor);
+  e$3(LabelSupport, CommandInterceptor);
 
   LabelSupport.$inject = [
     'injector',
@@ -50980,7 +51366,7 @@
     });
   }
 
-  e(AttachSupport, CommandInterceptor);
+  e$3(AttachSupport, CommandInterceptor);
 
   AttachSupport.$inject = [
     'injector',
@@ -51417,7 +51803,7 @@
     this.reverted([ 'element.updateAttachment' ], ifBpmn(updateAttachment));
   }
 
-  e(BpmnUpdater, CommandInterceptor);
+  e$3(BpmnUpdater, CommandInterceptor);
 
   BpmnUpdater.$inject = [
     'eventBus',
@@ -51915,7 +52301,7 @@
     this._translate = translate;
   }
 
-  e(ElementFactory, ElementFactory$1);
+  e$3(ElementFactory, ElementFactory$1);
 
   ElementFactory.$inject = [
     'bpmnFactory',
@@ -52533,7 +52919,7 @@
     CreateShapeHandler.call(this, canvas);
   }
 
-  e(CreateLabelHandler, CreateShapeHandler);
+  e$3(CreateLabelHandler, CreateShapeHandler);
 
   CreateLabelHandler.$inject = [ 'canvas' ];
 
@@ -55699,7 +56085,7 @@
     this._bpmnRules = bpmnRules;
   }
 
-  e(Modeling, Modeling$1);
+  e$3(Modeling, Modeling$1);
 
   Modeling.$inject = [
     'eventBus',
@@ -56654,7 +57040,7 @@
 
   function BpmnLayouter() {}
 
-  e(BpmnLayouter, BaseLayouter);
+  e$3(BpmnLayouter, BaseLayouter);
 
 
   BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
@@ -58484,7 +58870,7 @@
   // helpers //////////
 
   function isSpace(keyEvent) {
-    return isKey(' ', keyEvent);
+    return isKey('Space', keyEvent);
   }
 
   var HandToolModule = {
@@ -58956,7 +59342,7 @@
     'previewSupport'
   ];
 
-  e(BpmnReplacePreview, CommandInterceptor);
+  e$3(BpmnReplacePreview, CommandInterceptor);
 
   var ReplacePreviewModule = {
     __depends__: [
@@ -59551,7 +59937,7 @@
     });
   }
 
-  e(BpmnCreateMoveSnapping, CreateMoveSnapping);
+  e$3(BpmnCreateMoveSnapping, CreateMoveSnapping);
 
   BpmnCreateMoveSnapping.$inject = [
     'eventBus',
@@ -60135,13 +60521,11 @@
     // navigate results
     listen(this._container, SearchPad.INPUT_SELECTOR, 'keydown', function(e) {
 
-      // up
-      if (e.keyCode === 38) {
+      if (isKey('ArrowUp', e)) {
         e.preventDefault();
       }
 
-      // down
-      if (e.keyCode === 40) {
+      if (isKey('ArrowDown', e)) {
         e.preventDefault();
       }
     });
@@ -60149,31 +60533,26 @@
     // handle keyboard input
     listen(this._container, SearchPad.INPUT_SELECTOR, 'keyup', function(e) {
 
-      // escape
-      if (e.keyCode === 27) {
+      if (isKey('Escape', e)) {
         return self.close();
       }
 
-      // enter
-      if (e.keyCode === 13) {
+      if (isKey('Enter', e)) {
         var selected = self._getCurrentResult();
 
         return selected ? self._select(selected) : self.close();
       }
 
-      // up
-      if (e.keyCode === 38) {
+      if (isKey('ArrowUp', e)) {
         return self._scrollToDirection(true);
       }
 
-      // down
-      if (e.keyCode === 40) {
+      if (isKey('ArrowDown', e)) {
         return self._scrollToDirection();
       }
 
-      // left && right
       // do not search while navigating text input
-      if (e.keyCode === 37 || e.keyCode === 39) {
+      if (isKey([ 'ArrowLeft', 'ArrowRight' ], e)) {
         return;
       }
 
@@ -60808,7 +61187,7 @@
     BaseModeler.call(this, options);
   }
 
-  e(Modeler, BaseModeler);
+  e$3(Modeler, BaseModeler);
 
 
   Modeler.Viewer = Viewer;