camunda-bpmn-js 4.3.2 → 4.4.0

package/dist/base-modeler.development.js

@@ -2305,16 +2305,19 @@
    * @typedef { import('./index.js').ModuleDeclaration } ModuleDeclaration
    * @typedef { import('./index.js').ModuleDefinition } ModuleDefinition
    * @typedef { import('./index.js').InjectorContext } InjectorContext
+   *
+   * @typedef { import('./index.js').TypedDeclaration<any, any> } TypedDeclaration
    */
 
   /**
    * Create a new injector with the given modules.
    *
    * @param {ModuleDefinition[]} modules
-   * @param {InjectorContext} [parent]
+   * @param {InjectorContext} [_parent]
    */
-  function Injector(modules, parent) {
-    parent = parent || {
+  function Injector(modules, _parent) {
+
+    const parent = _parent || /** @type InjectorContext */ ({
       get: function(name, strict) {
         currentlyResolving.push(name);
 
@@ -2324,7 +2327,7 @@
           throw error(`No provider for "${ name }"!`);
         }
       }
-    };
+    });
 
     const currentlyResolving = [];
     const providers = this._providers = Object.create(parent._providers || null);
@@ -2347,12 +2350,13 @@
      * @return {any}
      */
     function get(name, strict) {
-      if (!providers[name] && name.indexOf('.') !== -1) {
+      if (!providers[name] && name.includes('.')) {
+
         const parts = name.split('.');
-        let pivot = get(parts.shift());
+        let pivot = get(/** @type { string } */ (parts.shift()));
 
         while (parts.length) {
-          pivot = pivot[parts.shift()];
+          pivot = pivot[/** @type { string } */ (parts.shift())];
         }
 
         return pivot;
@@ -2392,6 +2396,9 @@
         }
       }
 
+      /**
+       * @type {string[]}
+       */
       const inject = fn.$inject || parseAnnotations(fn);
       const dependencies = inject.map(dep => {
         if (hasOwnProp(locals, dep)) {
@@ -2403,7 +2410,7 @@
 
       return {
         fn: fn,
-        dependencies: dependencies
+        dependencies
       };
     }
 
@@ -2423,7 +2430,7 @@
       } = fnDef(type);
 
       // instantiate var args constructor
-      const Constructor = Function.prototype.bind.apply(fn, [ null ].concat(dependencies));
+      const Constructor = Function.prototype.bind.call(fn, null, ...dependencies);
 
       return new Constructor();
     }
@@ -2603,13 +2610,17 @@
           return;
         }
 
-        if (moduleDefinition[key][2] === 'private') {
-          providers[key] = moduleDefinition[key];
+        const typeDeclaration = /** @type { TypedDeclaration } */ (
+          moduleDefinition[key]
+        );
+
+        if (typeDeclaration[2] === 'private') {
+          providers[key] = typeDeclaration;
           return;
         }
 
-        const type = moduleDefinition[key][0];
-        const value = moduleDefinition[key][1];
+        const type = typeDeclaration[0];
+        const value = typeDeclaration[1];
 
         providers[key] = [ factoryMap[type], arrayUnwrap(type, value), type ];
       });
@@ -4670,7 +4681,7 @@
    * @typedef {import('../core/Types').ConnectionLike} Connection
    *
    * @typedef {import('../util/Types').DirectionTRBL} DirectionTRBL
-   * @typedef {import('../util/Types').Intersect} Intersect
+   * @typedef {import('../util/Types').Intersection} Intersection
    * @typedef {import('../util/Types').Point} Point
    * @typedef {import('../util/Types').Rect} Rect
    * @typedef {import('../util/Types').RectTRBL} RectTRBL
@@ -4840,7 +4851,7 @@
    * @param {Rect} reference
    * @param {Point|number} padding
    *
-   * @return {DirectionTRBL|Intersect} the orientation; one of top, top-left, left, ..., bottom, right or intersect.
+   * @return {DirectionTRBL|Intersection} the orientation; one of top, top-left, left, ..., bottom, right or intersect.
    */
   function getOrientation(rect, reference, padding) {
 
@@ -4998,6 +5009,7 @@
    * @typedef {import('../util/Types').Point} Point
    * @typedef {import('../util/Types').Rect} Rect
    * @typedef {import('../util/Types').RectTRBL} RectTRBL
+   * @typedef {import('../util/Types').ScrollDelta} ScrollDelta
    */
 
   function round$c(number, resolution) {
@@ -5698,7 +5710,7 @@
   Canvas.prototype.setRootElement = function(rootElement) {
 
     if (rootElement === this._rootElement) {
-      return;
+      return rootElement;
     }
 
     let plane;
@@ -6133,7 +6145,7 @@
   /**
    * Gets or sets the scroll of the canvas.
    *
-   * @param {Point} [delta] The scroll to be set.
+   * @param {ScrollDelta} [delta] The scroll to be set.
    *
    * @return {Point}
    */
@@ -7515,6 +7527,8 @@
    * var sum = eventBus.fire('sum', 1, 2);
    * console.log(sum); // 3
    * ```
+   *
+   * @template [EventMap=null]
    */
   function EventBus() {
 
@@ -7528,8 +7542,9 @@
     this.on('diagram.destroy', 1, this._destroy, this);
   }
 
-
   /**
+   * @overlord
+   *
    * Register an event listener for events with the given name.
    *
    * The callback will be invoked with `event, ...additionalArguments`
@@ -7548,6 +7563,25 @@
    * @param {EventBusEventCallback<T>} callback
    * @param {any} [that] callback context
    */
+  /**
+   * Register an event listener for events with the given name.
+   *
+   * The callback will be invoked with `event, ...additionalArguments`
+   * that have been passed to {@link EventBus#fire}.
+   *
+   * Returning false from a listener will prevent the events default action
+   * (if any is specified). To stop an event from being processed further in
+   * other listeners execute {@link Event#stopPropagation}.
+   *
+   * Returning anything but `undefined` from a listener will stop the listener propagation.
+   *
+   * @template {keyof EventMap} EventName
+   *
+   * @param {EventName} events to subscribe to
+   * @param {number} [priority=1000] listen priority
+   * @param {EventBusEventCallback<EventMap[EventName]>} callback
+   * @param {any} [that] callback context
+   */
   EventBus.prototype.on = function(events, priority, callback, that) {
 
     events = isArray$4(events) ? events : [ events ];
@@ -7585,6 +7619,8 @@
   };
 
   /**
+   * @overlord
+   *
    * Register an event listener that is called only once.
    *
    * @template T
@@ -7594,6 +7630,16 @@
    * @param {EventBusEventCallback<T>} callback
    * @param {any} [that] callback context
    */
+  /**
+   * Register an event listener that is called only once.
+   *
+   * @template {keyof EventMap} EventName
+   *
+   * @param {EventName} events to subscribe to
+   * @param {number} [priority=1000] listen priority
+   * @param {EventBusEventCallback<EventMap[EventName]>} callback
+   * @param {any} [that] callback context
+   */
   EventBus.prototype.once = function(events, priority, callback, that) {
     var self = this;
 
@@ -8031,7 +8077,7 @@
    * @param {number} x
    * @param {number} y
    */
-  function translate$2(gfx, x, y) {
+  function translate$1(gfx, x, y) {
     var translate = createTransform();
     translate.setTranslate(x, y);
 
@@ -8300,7 +8346,7 @@
       this.drawShape(visual, element);
 
       // update positioning
-      translate$2(gfx, element.x, element.y);
+      translate$1(gfx, element.x, element.y);
     } else if (type === 'connection') {
       this.drawConnection(visual, element);
     } else {
@@ -8364,6 +8410,16 @@
    * } & Record<string, any> } DiagramOptions
    */
 
+  /**
+   * @template T
+   * @typedef {import('didi').FactoryFunction<T>} FactoryFunction
+   */
+
+  /**
+   * @template T
+   * @typedef {import('didi').ArrayFunc<T>} ArrayFunc
+   */
+
   /**
    * Bootstrap an injector from a list of modules, instantiating a number of default components
    *
@@ -8382,9 +8438,10 @@
   /**
    * Creates an injector from passed options.
    *
+   * @template ServiceMap
    * @param {DiagramOptions} [options]
    *
-   * @return {Injector}
+   * @return {Injector<ServiceMap>}
    */
   function createInjector(options) {
 
@@ -8411,6 +8468,7 @@
    *
    * @class
    * @constructor
+   * @template [ServiceMap=null]
    *
    * @example Creating a plug-in that logs whenever a shape is added to the canvas.
    *
@@ -8449,44 +8507,17 @@
    * ```
    *
    * @param {DiagramOptions} [options]
-   * @param {Injector} [injector] An (optional) injector to bootstrap the diagram with.
+   * @param {Injector<ServiceMap>} [injector] An (optional) injector to bootstrap the diagram with.
    */
   function Diagram(options, injector) {
 
-    this._injector = injector = injector || createInjector(options);
-
-    // API
-
     /**
-     * Resolves a diagram service.
-     *
-     * @template T
-     *
-     * @param {string} name The name of the service to get.
-     * @param {boolean} [strict=true] If false, resolve missing services to null.
-     *
-     * @return {T|null}
-     */
-    this.get = injector.get;
-
-    /**
-     * Executes a function with its dependencies injected.
-     *
-     * @template T
-     *
-     * @param {Function} func function to be invoked
-     * @param {InjectionContext} [context] context of the invocation
-     * @param {LocalsMap} [locals] locals provided
-     *
-     * @return {T|null}
+     * @type {Injector<ServiceMap>}
      */
-    this.invoke = injector.invoke;
+    this._injector = injector || createInjector(options);
 
     // init
 
-    // indicate via event
-
-
     /**
      * An event indicating that all plug-ins are loaded.
      *
@@ -8509,6 +8540,82 @@
     this.get('eventBus').fire('diagram.init');
   }
 
+  /**
+   * @overlord
+   *
+   * Resolves a diagram service.
+   *
+   * @template T
+   *
+   * @param {string} name The name of the service to get.
+   *
+   * @return {T}
+   */
+  /**
+   * @overlord
+   *
+   * Resolves a diagram service.
+   *
+   * @template T
+   *
+   * @param {string} name The name of the service to get.
+   * @param {true} strict If false, resolve missing services to null.
+   *
+   * @return {T}
+   */
+  /**
+   * @overlord
+   *
+   * Resolves a diagram service.
+   *
+   * @template T
+   *
+   * @param {string} name The name of the service to get.
+   * @param {boolean} strict If false, resolve missing services to null.
+   *
+   * @return {T|null}
+   */
+  /**
+   * Resolves a diagram service.
+   *
+   * @template {keyof ServiceMap} Name
+   *
+   * @param {Name} name The name of the service to get.
+   *
+   * @return {ServiceMap[Name]}
+   */
+  Diagram.prototype.get = function(name, strict) {
+    return this._injector.get(name, strict);
+  };
+
+  /**
+   * @overlord
+   *
+   * Invoke the given function, injecting dependencies. Return the result.
+   *
+   * @template T
+   *
+   * @param {FactoryFunction<T>} func
+   * @param {InjectionContext} [context]
+   * @param {LocalsMap} [locals]
+   *
+   * @return {T}
+   */
+  /**
+   * Invoke the given function, injecting dependencies provided in
+   * array notation. Return the result.
+   *
+   * @template T
+   *
+   * @param {ArrayFunc<T>} func function to be invoked
+   * @param {InjectionContext} [context] context of the invocation
+   * @param {LocalsMap} [locals] locals provided
+   *
+   * @return {T}
+   */
+  Diagram.prototype.invoke = function(func, context, locals) {
+    return this._injector.invoke(func, context, locals);
+  };
 
   /**
    * Destroys the diagram
@@ -19167,7 +19274,7 @@
           stroke: getStrokeColor$1(element, defaultStrokeColor, attrs.stroke)
         });
 
-        translate$2(markerRect, element.width / 2 - 7.5, element.height - 20);
+        translate$1(markerRect, element.width / 2 - 7.5, element.height - 20);
 
         var markerPath = pathMap.getScaledPath('MARKER_SUB_PROCESS', {
           xScaleFactor: 1.5,
@@ -20699,8 +20806,8 @@
    * @typedef { number | Partial<Padding> } PaddingConfig
    *
    * @typedef { {
-   *   horizontal: 'center' | 'left';
-   *   vertical: 'top' | 'center';
+   *   horizontal: 'center' | 'left' | 'right';
+   *   vertical: 'top' | 'middle';
    * } } Alignment
    *
    *  @typedef { 'center-middle' | 'center-top' } AlignmentConfig
@@ -20964,7 +21071,7 @@
   /**
    * Creates a new label utility
    *
-   * @param {TextConfig} config
+   * @param {TextConfig} [config]
    */
   function Text$1(config) {
 
@@ -21766,7 +21873,7 @@
    *
    * @return {string} the translated string
    */
-  function translate$1(template, replacements) {
+  function translate(template, replacements) {
 
     replacements = replacements || {};
 
@@ -21778,8 +21885,8 @@
   /**
    * @type { import('didi').ModuleDeclaration }
    */
-  var translate = {
-    translate: [ 'value', translate$1 ]
+  var TranslateModule = {
+    translate: [ 'value', translate ]
   };
 
   /**
@@ -22136,7 +22243,7 @@
 
   var ImportModule = {
     __depends__: [
-      translate
+      TranslateModule
     ],
     bpmnImporter: [ 'type', BpmnImporter ]
   };
@@ -22208,7 +22315,7 @@
    *
    * @return {boolean}
    */
-  function isButton(event, button) {
+  function isButton$1(event, button) {
     return (getOriginal$1(event) || event).button === button;
   }
 
@@ -22220,7 +22327,7 @@
   function isPrimaryButton(event) {
 
     // button === 0 -> left áka primary mouse button
-    return isButton(event, 0);
+    return isButton$1(event, 0);
   }
 
   /**
@@ -22231,7 +22338,7 @@
   function isAuxiliaryButton(event) {
 
     // button === 1 -> auxiliary áka wheel button
-    return isButton(event, 1);
+    return isButton$1(event, 1);
   }
 
   /**
@@ -22773,6 +22880,7 @@
   /**
    * @typedef {import('../../model/Types').Element} Element
    *
+   * @typedef {import('./OutlineProvider').default} OutlineProvider
    * @typedef {import('../../core/EventBus').default} EventBus
    * @typedef {import('../../draw/Styles').default} Styles
    */
@@ -22931,7 +23039,7 @@
    * Returns the outline for an element.
    *
    * @param {Element} element
-   **/
+   */
   Outline.prototype.getOutline = function(element) {
     var outline;
     var providers = this._getProviders();
@@ -23512,7 +23620,7 @@
     }, config && config.defaults);
 
     /**
-     * @type {Map<string, Overlay>}
+     * @type {Record<string, Overlay>}
      */
     this._overlays = {};
 
@@ -25330,7 +25438,7 @@
   // modules the viewer is composed of
   Viewer.prototype._modules = [
     CoreModule,
-    translate,
+    TranslateModule,
     SelectionModule,
     OverlaysModule,
     DrilldownModdule
@@ -25524,7 +25632,11 @@
       return true;
     }
 
-    return isInput$1(event.target) && this._isModifiedKeyIgnored(event);
+    return (
+      isInput$1(event.target) || (
+        isButton(event.target) && isKey([ ' ', 'Enter' ], event)
+      )
+    ) && this._isModifiedKeyIgnored(event);
   };
 
   Keyboard.prototype._isModifiedKeyIgnored = function(event) {
@@ -25635,6 +25747,10 @@
     return target && (matches$1(target, 'input, textarea') || target.contentEditable === 'true');
   }
 
+  function isButton(target) {
+    return target && matches$1(target, 'button, input[type=submit], input[type=button], a[href], [aria-role=button]');
+  }
+
   var LOW_PRIORITY$n = 500;
 
 
@@ -25965,7 +26081,7 @@
   }
 
   /**
-   * @typedef {import('../core/EventBus').EventBus} EventBus
+   * @typedef {import('../core/EventBus').default} EventBus
    */
 
   var TRAP_PRIORITY = 5000;
@@ -26190,6 +26306,7 @@
    * @typedef {import('../../core/EventBus').default} EventBus
    *
    * @typedef {import('../../util/Types').Point} Point
+   * @typedef {import('../../util/Types').ScrollDelta} ScrollDelta
    */
 
   var sign$1 = Math.sign || function(n) {
@@ -26244,7 +26361,7 @@
   ];
 
   /**
-   * @param {Point} delta
+   * @param {ScrollDelta} delta
    */
   ZoomScroll.prototype.scroll = function scroll(delta) {
     this._canvas.scroll(delta);
@@ -26344,7 +26461,7 @@
    * Zoom with fixed step size.
    *
    * @param {number} delta Zoom delta (1 for zooming in, -1 for zooming out).
-   * @param {Point} position
+   * @param {Point} [position]
    */
   ZoomScroll.prototype.stepZoom = function stepZoom(delta, position) {
 
@@ -26358,7 +26475,7 @@
    * Zoom in/out given a step size.
    *
    * @param {number} delta
-   * @param {Point} position
+   * @param {Point} [position]
    * @param {number} stepSize
    */
   ZoomScroll.prototype._zoom = function(delta, position, stepSize) {
@@ -27145,7 +27262,7 @@
    *
    * @param {ContextPadTarget} target
    *
-   * @return {Rect}
+   * @return {{ position: { left: number; top: number; }}}
    */
   ContextPad.prototype._getPosition = function(target) {
 
@@ -27239,10 +27356,14 @@
       class=${ clsx('entry', { selected }) }
       data-id=${ entry.id }
       title=${ entry.title || entry.label }
+      tabIndex="0"
       onClick=${ onAction }
+      onFocus=${ onMouseEnter }
+      onBlur=${ onMouseLeave }
       onMouseEnter=${ onMouseEnter }
       onMouseLeave=${ onMouseLeave }
       onDragStart=${ (event) => onAction(event, entry, 'dragstart') }
+      aria-role="button"
       draggable=${ true }
     >
       <div class="djs-popup-entry-content">
@@ -27438,8 +27559,6 @@
       return originalEntries.length > 5;
     }, [ search, originalEntries ]);
 
-    const inputRef = _$2();
-
     const [ value, setValue ] = p$2('');
 
     const filterEntries = T$3((originalEntries, value) => {
@@ -27491,28 +27610,6 @@
       updateEntries(filterEntries(originalEntries, value));
     }, [ value, originalEntries ]);
 
-    // register global <Escape> handler
-    h$2(() => {
-      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$2(() => {
-      inputRef.current && inputRef.current.focus();
-    }, []);
-
     // handle keyboard seleciton
     const keyboardSelect = T$3(direction => {
       const idx = entries.indexOf(selectedEntry);
@@ -27535,20 +27632,20 @@
         return onSelect(event, selectedEntry);
       }
 
-      // ARROW_UP or SHIFT + TAB navigation
-      if (event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {
+      // ARROW_UP
+      if (event.key === 'ArrowUp') {
         keyboardSelect(-1);
 
         return event.preventDefault();
       }
 
-      // ARROW_DOWN or TAB navigation
-      if (event.key === 'ArrowDown' || event.key === 'Tab') {
+      // ARROW_DOWN
+      if (event.key === 'ArrowDown') {
         keyboardSelect(1);
 
         return event.preventDefault();
       }
-    }, [ onSelect, onClose, selectedEntry, keyboardSelect ]);
+    }, [ onSelect, selectedEntry, keyboardSelect ]);
 
     const handleKey = T$3(event => {
       if (matches$1(event.target, 'input')) {
@@ -27580,13 +27677,15 @@
         <div class="djs-popup-header">
           <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
           ${ headerEntries.map(entry => m$3`
-            <span
+            <${ entry.action ? 'button' : 'span' }
               class=${ getHeaderClasses(entry, entry === selectedEntry) }
               onClick=${ event => onSelect(event, entry) }
               title=${ entry.title || entry.label }
               data-id=${ entry.id }
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
+              onFocus=${ () => setSelectedEntry(entry) }
+              onBlur=${ () => setSelectedEntry(null) }
             >
             ${(entry.imageUrl && m$3`<img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />`) ||
             (entry.imageHtml && m$3`<div class="djs-popup-entry-icon" dangerouslySetInnerHTML=${ { __html: entry.imageHtml } } />`)}
@@ -27594,7 +27693,7 @@
               ${ entry.label ? m$3`
                 <span class="djs-popup-label">${ entry.label }</span>
               ` : null }
-            </span>
+            </${ entry.action ? 'button' : 'span' }>
           `) }
         </div>
       ` }
@@ -27606,10 +27705,7 @@
             <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"
-              />
+            <input type="text" aria-label="${ title }" />
           </div>
           ` }
 
@@ -27620,10 +27716,10 @@
             onAction=${ onSelect }
           />
         </div>
-        ${ emptyPlaceholder && entries.length === 0 && m$3`
-          <div class="djs-popup-no-results">${ isFunction$1(emptyPlaceholder) ? emptyPlaceholder(value) : emptyPlaceholder }</div>
-        ` }
       ` }
+    ${ emptyPlaceholder && entries.length === 0 && m$3`
+      <div class="djs-popup-no-results">${ isFunction$1(emptyPlaceholder) ? emptyPlaceholder(value) : emptyPlaceholder }</div>
+    ` }
     </${PopupMenuWrapper}>
   `;
   }
@@ -27645,17 +27741,7 @@
 
     const popupRef = _$2();
 
-    const checkClose = T$3((event) => {
-
-      const popup = closest(event.target, '.djs-popup', true);
-
-      if (popup) {
-        return;
-      }
-
-      onClose();
-    }, [ onClose ]);
-
+    // initial position
     s$2(() => {
       if (typeof positionGetter !== 'function') {
         return;
@@ -27668,26 +27754,58 @@
       popupEl.style.top = `${position.y}px`;
     }, [ popupRef.current, positionGetter ]);
 
-    // focus popup initially, on mount
+    // initial focus
     s$2(() => {
-      popupRef.current && popupRef.current.focus();
+      const popupEl = popupRef.current;
+
+      if (!popupEl) {
+        return;
+      }
+
+      const inputEl = popupEl.querySelector('input');
+
+      (inputEl || popupEl).focus();
+    }, []);
+
+    // global <Escape> / blur handlers
+    h$2(() => {
+      const handleKeyDown = event => {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+
+          return onClose();
+        }
+      };
+
+      const handleClick = event => {
+        const popup = closest(event.target, '.djs-popup', true);
+
+        if (popup) {
+          return;
+        }
+
+        return onClose();
+      };
+
+      document.documentElement.addEventListener('keydown', handleKeyDown);
+      document.body.addEventListener('click', handleClick);
+
+      return () => {
+        document.documentElement.removeEventListener('keydown', handleKeyDown);
+        document.body.removeEventListener('click', handleClick);
+      };
     }, []);
 
     return m$3`
     <div
-      class="djs-popup-backdrop"
-      onClick=${ checkClose }
+      class=${ clsx('djs-popup', className) }
+      style=${ getPopupStyle(props) }
+      onKeydown=${ onKeydown }
+      onKeyup=${ onKeyup }
+      ref=${ popupRef }
+      tabIndex="-1"
     >
-      <div
-        class=${ clsx('djs-popup', className) }
-        style=${ getPopupStyle(props) }
-        onKeydown=${ onKeydown }
-        onKeyup=${ onKeyup }
-        ref=${ popupRef }
-        tabIndex="-1"
-      >
-        ${ children }
-      </div>
+      ${ children }
     </div>
   `;
   }
@@ -29052,6 +29170,7 @@
      *
      * @param {Shape} source
      * @param {Shape} shape
+     * @param {any} [hints={}]
      *
      * @return {Shape} appended shape
      */
@@ -31128,7 +31247,7 @@
     classes(groupGfx).add(SEGMENT_DRAGGER_CLS);
     classes(groupGfx).add(alignment === 'h' ? 'horizontal' : 'vertical');
 
-    translate$2(groupGfx, mid.x, mid.y);
+    translate$1(groupGfx, mid.x, mid.y);
 
     return groupGfx;
   }
@@ -31329,7 +31448,7 @@
 
         append(gfx, bendpoint);
 
-        translate$2(bendpoint, p.x, p.y);
+        translate$1(bendpoint, p.x, p.y);
       });
 
       // add floating bendpoint
@@ -31405,7 +31524,7 @@
         return;
       }
 
-      translate$2(floating, point.x, point.y);
+      translate$1(floating, point.x, point.y);
 
     }
 
@@ -31439,7 +31558,7 @@
         };
       }
 
-      translate$2(draggerVisual, relativePosition.x, relativePosition.y);
+      translate$1(draggerVisual, relativePosition.x, relativePosition.y);
     }
 
     eventBus.on('connection.changed', function(event) {
@@ -31994,7 +32113,7 @@
         connectionPreview.drawPreview(context, allowed, drawPreviewHints);
       }
 
-      translate$2(draggerGfx, event.x, event.y);
+      translate$1(draggerGfx, event.x, event.y);
     }, this);
 
     eventBus.on([
@@ -32235,7 +32354,7 @@
       var draggerPosition = axisFenced(event, segmentStart, segmentEnd, axis);
 
       // update dragger
-      translate$2(context.draggerGfx, draggerPosition.x, draggerPosition.y);
+      translate$1(context.draggerGfx, draggerPosition.x, draggerPosition.y);
     }
 
     /**
@@ -33735,7 +33854,7 @@
 
           this._graphicsFactory.drawShape(getVisual(gfx), element);
 
-          translate$2(gfx, element.x, element.y);
+          translate$1(gfx, element.x, element.y);
         }
 
         this._previewSupport.addDragger(element, layer, gfx);
@@ -33752,9 +33871,9 @@
         const dragger = this._previewSupport.addDragger(element, layer);
 
         if (isConnection$1(element)) {
-          translate$2(dragger, delta.x, delta.y);
+          translate$1(dragger, delta.x, delta.y);
         } else {
-          translate$2(dragger, element.x + delta.x, element.y + delta.y);
+          translate$1(dragger, element.x + delta.x, element.y + delta.y);
         }
       });
 
@@ -33782,7 +33901,7 @@
           height: bounds.height
         });
 
-        translate$2(gfx, bounds.x, bounds.y);
+        translate$1(gfx, bounds.x, bounds.y);
 
         this._previewSupport.addDragger(shape, layer, gfx);
       });
@@ -42141,7 +42260,7 @@
 
   var OrderingModule = {
     __depends__: [
-      translate
+      TranslateModule
     ],
     __init__: [ 'bpmnOrderingProvider' ],
     bpmnOrderingProvider: [ 'type', BpmnOrderingProvider ]
@@ -42435,6 +42554,11 @@
 
     // API //////////
 
+    /**
+     * @param event
+     * @param elements
+     * @param {any} [context={}]
+     */
     this.start = function(event, elements, context) {
       if (!isArray$4(elements)) {
         elements = [ elements ];
@@ -42590,7 +42714,7 @@
 
           graphicsFactory.drawShape(getVisual(gfx), element);
 
-          translate$2(gfx, element.x, element.y);
+          translate$1(gfx, element.x, element.y);
         }
 
         // add preview
@@ -42621,7 +42745,7 @@
           append(activeLayer, dragGroup);
         }
 
-        translate$2(dragGroup, event.x, event.y);
+        translate$1(dragGroup, event.x, event.y);
       } else {
         remove$2(dragGroup);
       }
@@ -45222,7 +45346,7 @@
     eventBus.on('spaceTool.selection.move', function(event) {
       var crosshairGroup = event.context.crosshairGroup;
 
-      translate$2(crosshairGroup, event.x, event.y);
+      translate$1(crosshairGroup, event.x, event.y);
     });
 
     // remove crosshair
@@ -45357,7 +45481,7 @@
       delta[ opposite[ context.axis ] ] = 0;
 
       // update move previews
-      translate$2(context.dragGroup, delta.x, delta.y);
+      translate$1(context.dragGroup, delta.x, delta.y);
 
       // update resize previews
       forEach$2(context.frames, function(frame) {
@@ -51402,36 +51526,41 @@
       throw new Error(translate('more than {count} child lanes', { count: newLanesCount }));
     }
 
-    var newLanesHeight = Math.round(shape.height / newLanesCount);
+    var isHorizontalLane = isHorizontal$3(shape);
+
+    var laneBaseSize = isHorizontalLane ? shape.height : shape.width;
+    var newLanesSize = Math.round(laneBaseSize / newLanesCount);
 
-    // Iterate from top to bottom in child lane order,
+    // Iterate from first to last in child lane order,
     // resizing existing lanes and creating new ones
     // so that they split the parent proportionally.
     //
-    // Due to rounding related errors, the bottom lane
+    // Due to rounding related errors, the last lane
     // needs to take up all the remaining space.
-    var laneY,
-        laneHeight,
+    var laneSize,
         laneBounds,
         newLaneAttrs,
         idx;
 
     for (idx = 0; idx < newLanesCount; idx++) {
 
-      laneY = shape.y + idx * newLanesHeight;
-
-      // if bottom lane
+      // if last lane
       if (idx === newLanesCount - 1) {
-        laneHeight = shape.height - (newLanesHeight * idx);
+        laneSize = laneBaseSize - (newLanesSize * idx);
       } else {
-        laneHeight = newLanesHeight;
+        laneSize = newLanesSize;
       }
 
-      laneBounds = {
+      laneBounds = isHorizontalLane ? {
         x: shape.x + LANE_INDENTATION,
-        y: laneY,
+        y: shape.y + idx * newLanesSize,
         width: shape.width - LANE_INDENTATION,
-        height: laneHeight
+        height: laneSize
+      } : {
+        x: shape.x + idx * newLanesSize,
+        y: shape.y + LANE_INDENTATION,
+        width: laneSize,
+        height: shape.height - LANE_INDENTATION
       };
 
       if (idx < existingLanesCount) {
@@ -51442,7 +51571,8 @@
 
         // create a new lane at position
         newLaneAttrs = {
-          type: 'bpmn:Lane'
+          type: 'bpmn:Lane',
+          isHorizontal: isHorizontalLane
         };
 
         modeling.createShape(newLaneAttrs, laneBounds, shape);
@@ -56394,7 +56524,7 @@
 
       if (childLanes.length < 2) {
 
-        if (element.height >= 120) {
+        if (isHorizontal$3(element) ? element.height >= 120 : element.width >= 120) {
           assign$2(actions, {
             'lane-divide-two': {
               group: 'lane-divide',
@@ -56407,7 +56537,7 @@
           });
         }
 
-        if (element.height >= 180) {
+        if (isHorizontal$3(element) ? element.height >= 180 : element.width >= 180) {
           assign$2(actions, {
             'lane-divide-three': {
               group: 'lane-divide',
@@ -57323,9 +57453,9 @@
   };
 
   /**
-   * Returns the number of actions that are currently registered
+   * Returns the identifiers of all currently registered editor actions
    *
-   * @return {number}
+   * @return {string[]}
    */
   EditorActions.prototype.getActions = function() {
     return Object.keys(this._actions);
@@ -60053,7 +60183,7 @@
 
         append(defaultLayer, gfx);
 
-        translate$2(gfx, element.x, element.y);
+        translate$1(gfx, element.x, element.y);
       }
 
       if (is$5(element, 'bpmn:TextAnnotation') ||
@@ -60996,7 +61126,7 @@
         }
       }
 
-      translate$2(dragGroup, event.dx, event.dy);
+      translate$1(dragGroup, event.dx, event.dy);
     });
 
     eventBus.on([ 'shape.move.out', 'shape.move.cleanup' ], function(event) {
@@ -62218,7 +62348,12 @@
     'mouse'
   ];
 
-
+  /**
+   *
+   * @param event
+   * @param {boolean} [autoActivate]
+   * @param {object} [context]
+   */
   HandTool.prototype.activateMove = function(event, autoActivate, context) {
     if (typeof autoActivate === 'object') {
       context = autoActivate;
@@ -62234,6 +62369,12 @@
     });
   };
 
+  /**
+   *
+   * @param event
+   * @param {boolean} [autoActivate]
+   * @param {boolean} [reactivate]
+   */
   HandTool.prototype.activateHand = function(event, autoActivate, reactivate) {
     this._dragging.init(event, 'hand', {
       trapClick: false,
@@ -62664,7 +62805,7 @@
       LassoToolModule,
       HandToolModule,
       GlobalConnectModule,
-      translate
+      TranslateModule
     ],
     __init__: [ 'paletteProvider' ],
     paletteProvider: [ 'type', PaletteProvider ]
@@ -64033,6 +64174,7 @@
    * @typedef {import('../../core/EventBus').default} EventBus
    * @typedef {import('../overlays/Overlays').default} Overlays
    * @typedef {import('../selection/Selection').default} Selection
+   * @typedef {import('../../i18n/translate/translate.js').default} Translate
    *
    * @typedef {import('../overlays/Overlays').OverlayAttrs} OverlayAttrs
    *
@@ -64050,8 +64192,9 @@
    * @param {EventBus} eventBus
    * @param {Overlays} overlays
    * @param {Selection} selection
+   * @param {Translate} translate
    */
-  function SearchPad(canvas, eventBus, overlays, selection) {
+  function SearchPad(canvas, eventBus, overlays, selection, translate) {
     this._open = false;
     this._results = [];
     this._eventMaps = [];
@@ -64060,9 +64203,10 @@
     this._eventBus = eventBus;
     this._overlays = overlays;
     this._selection = selection;
+    this._translate = translate;
 
     // setup elements
-    this._container = domify$1(SearchPad.BOX_HTML);
+    this._container = this._getBoxHtml();
     this._searchInput = query(SearchPad.INPUT_SELECTOR, this._container);
     this._resultsContainer = query(SearchPad.RESULTS_CONTAINER_SELECTOR, this._container);
 
@@ -64078,7 +64222,8 @@
     'canvas',
     'eventBus',
     'overlays',
-    'selection'
+    'selection',
+    'translate'
   ];
 
 
@@ -64459,6 +64604,17 @@
     }
   };
 
+  SearchPad.prototype._getBoxHtml = function() {
+    const box = domify$1(SearchPad.BOX_HTML);
+    const input = query(SearchPad.INPUT_SELECTOR, box);
+
+    if (input) {
+      input.setAttribute('aria-label', this._translate('Search in diagram'));
+    }
+
+    return box;
+  };
+
 
   /**
    * Construct overlay object for the given bounding box.
@@ -64565,6 +64721,7 @@
    */
   var SearchPadModule = {
     __depends__: [
+      TranslateModule,
       OverlaysModule,
       SelectionModule
     ],
@@ -97451,6 +97608,7 @@
   function FeelEditor({
     extensions: editorExtensions = [],
     container,
+    contentAttributes = {},
     tooltipContainer,
     onChange = () => {},
     onKeyDown = () => {},
@@ -97502,6 +97660,7 @@
       bracketMatching(),
       changeHandler,
       closeBrackets(),
+      EditorView.contentAttributes.of(contentAttributes),
       indentOnInput(),
       keyHandler,
       keymap.of([
@@ -99949,6 +100108,7 @@
   };
   const CodeEditor = N((props, ref) => {
     const {
+      contentAttributes,
       enableGutters,
       value,
       onInput,
@@ -99994,7 +100154,8 @@
         tooltipContainer: tooltipContainer,
         value: localValue,
         variables: variables,
-        extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping]
+        extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping],
+        contentAttributes
       });
       setEditor(editor);
       return () => {