bpmn-js 18.30.1 → 18.31.0

package/dist/assets/diagram-js.css

@@ -1019,11 +1019,10 @@
 
 /**
  * The footer holds the keyboard/assistive-technology reachable documentation
- * link. Mouse users get the per-entry `.djs-popup-entry-docs` affordance on
- * hover instead, so the (redundant) footer link is hidden while the results
- * list is hovered and shown during keyboard navigation.
+ * link. Pointer interaction switches the popup to the per-entry
+ * `.djs-popup-entry-docs` affordance instead.
  */
-.djs-popup-results:hover ~ .djs-popup-footer {
+.djs-popup--pointer .djs-popup-footer {
   display: none;
 }
 
@@ -1042,7 +1041,7 @@
   transition: background-color .12s ease, border-color .12s ease, color .12s ease;
 }
 
-.djs-popup-body .entry:hover .djs-popup-entry-docs {
+.djs-popup--pointer .djs-popup-body .entry:hover .djs-popup-entry-docs {
   visibility: visible;
 }
 

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.30.1
+ * bpmn-js - bpmn-modeler v18.31.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-09-24
+ * Date: 2026-10-01
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -8411,7 +8411,7 @@
 	function prependTo(newNode, parentNode, siblingNode) {
 	  var node = siblingNode || parentNode.firstChild;
 
-	  // do not prepend node to itself to prevent IE from crashing
+	  // do not prepend node to itself
 	  // https://github.com/bpmn-io/bpmn-js/issues/746
 	  if (newNode === node) {
 	    return;
@@ -26538,6 +26538,13 @@
 	/**
 	 * Checks if key pressed is one of provided keys.
 	 *
+	 * Keys are matched against the logical key (`KeyboardEvent#key`) first,
+	 * respecting Latin keyboard layouts such as QWERTZ or AZERTY.
+	 *
+	 * If a non-Latin layout (e.g. Cyrillic, Arabic) is active, letter keys
+	 * are matched by their physical location (`KeyboardEvent#code`), assuming
+	 * a US (QWERTY) layout. This applies to shortcuts with and without modifiers.
+	 *
 	 * @param {string|string[]} keys
 	 * @param {KeyboardEvent} event
 	 * @return {boolean}
@@ -26545,7 +26552,51 @@
 	function isKey(keys, event) {
 	  keys = isArray$2(keys) ? keys : [ keys ];
 
-	  return keys.indexOf(event.key) !== -1 || keys.indexOf(event.code) !== -1;
+	  return (
+	    keys.indexOf(event.key) !== -1 ||
+	    keys.indexOf(event.code) !== -1 ||
+	    keys.indexOf(getPhysicalLetter(event)) !== -1
+	  );
+	}
+
+	// letters of a specific, non-Latin script; excludes letters shared with Latin
+	// orthographies, e.g. U+02BC (ʼ) or U+02BB (ʻ)
+	var NON_LATIN_LETTER = /^(?!\p{Script_Extensions=Latin}|\p{Script=Common})\p{Letter}$/u;
+
+	var NON_LETTER = /^\P{Letter}$/u;
+
+	/**
+	 * Returns the (US layout) letter of the physical key pressed,
+	 * if the logical key is a non-Latin letter.
+	 *
+	 * With <Shift>, some non-Latin layouts (e.g. Arabic) produce symbols on letter
+	 * keys. As a symbol does not reveal the layout, we additionally require the
+	 * legacy `KeyboardEvent#keyCode` to agree: the operating system maps it to the
+	 * US letter on non-Latin layouts only, but not on Latin ones (e.g. Dvorak).
+	 *
+	 * @param {KeyboardEvent} event
+	 *
+	 * @return {string|null}
+	 */
+	function getPhysicalLetter(event) {
+	  var key = event.key,
+	      match = /^Key([A-Z])$/.exec(event.code || '');
+
+	  if (!match || typeof key !== 'string') {
+	    return null;
+	  }
+
+	  var letter = match[1];
+
+	  if (NON_LATIN_LETTER.test(key)) {
+	    return event.shiftKey ? letter : letter.toLowerCase();
+	  }
+
+	  if (event.shiftKey && NON_LETTER.test(key) && event.keyCode === letter.charCodeAt(0)) {
+	    return letter;
+	  }
+
+	  return null;
 	}
 
 	/**
@@ -26943,7 +26994,7 @@
 
 	    // quirk: it has to be triggered by `=` as well to work on international keyboard layout
 	    // cf: https://github.com/bpmn-io/bpmn-js/issues/1362#issuecomment-722989754
-	    if (isKey([ '+', 'Add', '=' ], event) && isCmd(event)) {
+	    if (isKey([ '+', '=' ], event) && isCmd(event)) {
 	      editorActions.trigger('stepZoom', { value: 1 });
 
 	      return true;
@@ -26956,7 +27007,7 @@
 
 	    var event = context.keyEvent;
 
-	    if (isKey([ '-', 'Subtract' ], event) && isCmd(event)) {
+	    if (isKey('-', event) && isCmd(event)) {
 	      editorActions.trigger('stepZoom', { value: -1 });
 
 	      return true;
@@ -26982,7 +27033,7 @@
 
 	    var event = context.keyEvent;
 
-	    if (isKey([ 'Backspace', 'Delete', 'Del' ], event)) {
+	    if (isKey([ 'Backspace', 'Delete' ], event)) {
 	      editorActions.trigger('removeSelection');
 
 	      return true;
@@ -27042,10 +27093,10 @@
 	    }
 
 	    if (keyboard.isKey([
-	      'ArrowLeft', 'Left',
-	      'ArrowUp', 'Up',
-	      'ArrowDown', 'Down',
-	      'ArrowRight', 'Right'
+	      'ArrowLeft',
+	      'ArrowUp',
+	      'ArrowDown',
+	      'ArrowRight'
 	    ], event)) {
 
 	      var speed = (
@@ -27058,19 +27109,15 @@
 
 	      switch (event.key) {
 	      case 'ArrowLeft':
-	      case 'Left':
 	        direction = 'left';
 	        break;
 	      case 'ArrowUp':
-	      case 'Up':
 	        direction = 'up';
 	        break;
 	      case 'ArrowRight':
-	      case 'Right':
 	        direction = 'right';
 	        break;
 	      case 'ArrowDown':
-	      case 'Down':
 	        direction = 'down';
 	        break;
 	      }
@@ -27249,6 +27296,12 @@
 	    }
 	  });
 
+	  eventBus.on('diagram.destroy', function() {
+	    if (context) {
+	      handleEnd();
+	    }
+	  });
+
 
 	  function handleMove(event) {
 
@@ -28935,6 +28988,7 @@
 	 * @param {PopupMenuEntry} props.entry
 	 * @param {boolean} props.selected
 	 * @param {(event: MouseEvent) => void} props.onMouseEnter
+	 * @param {(event: MouseEvent) => void} props.onMouseMove
 	 * @param {(event: MouseEvent) => void} props.onMouseLeave
 	 * @param {(event: MouseEvent, entry?: PopupMenuEntry, action?: string) => void} props.onAction
 	 */
@@ -28944,6 +28998,7 @@
 	    entry,
 	    selected,
 	    onMouseEnter,
+	    onMouseMove,
 	    onMouseLeave,
 	    onAction
 	  } = props;
@@ -28970,6 +29025,7 @@
       aria-disabled=${ entry.disabled || undefined }
       onClick=${ handleClick }
       onMouseEnter=${ onMouseEnter }
+      onMouseMove=${ onMouseMove }
       onMouseLeave=${ onMouseLeave }
       onDragStart=${ (event) => draggable && handleClick(event, 'dragstart') }
       draggable=${ draggable }
@@ -29039,6 +29095,7 @@
 	 * @param {PopupMenuEntry} props.selectedEntry
 	 * @param {(entry: PopupMenuEntry | null) => void} props.setSelectedEntry
 	 * @param {import('@bpmn-io/diagram-js-ui').Ref<boolean>} props.keyboardSelection
+	 * @param {() => void} props.onPointerInteraction
 	 * @param {string} props.idPrefix
 	 * @param {string} props.id
 	 * @param {string} [props.ariaLabel]
@@ -29051,6 +29108,7 @@
 	    setSelectedEntry,
 	    groupedEntries,
 	    keyboardSelection,
+	    onPointerInteraction,
 	    idPrefix,
 	    id,
 	    ariaLabel,
@@ -29081,6 +29139,13 @@
 
 	  const handleMouseMove = () => {
 	    keyboardSelection.current = false;
+	    onPointerInteraction();
+	  };
+
+	  const handleEntryMouseMove = (entry) => {
+	    if (entry !== selectedEntry) {
+	      setSelectedEntry(entry);
+	    }
 	  };
 
 	  const handleEntryMouseEnter = (entry) => {
@@ -29132,6 +29197,7 @@
               entry=${ entry }
               selected=${ entry === selectedEntry }
               onMouseEnter=${ () => handleEntryMouseEnter(entry) }
+              onMouseMove=${ () => handleEntryMouseMove(entry) }
               onMouseLeave=${ handleEntryMouseLeave }
               ...${ restProps }
             />
@@ -29457,6 +29523,16 @@
 	   */
 	  const keyboardSelection = A(false);
 
+	  const [ interactionMode, setInteractionMode ] = d('keyboard');
+
+	  const handleKeyboardInteraction = q(() => {
+	    setInteractionMode('keyboard');
+	  }, []);
+
+	  const handlePointerInteraction = q(() => {
+	    setInteractionMode('pointer');
+	  }, []);
+
 	  // per instance basis to generate field IDs
 	  const idPrefix = T(() => ids$1.next(), []);
 
@@ -29677,6 +29753,8 @@
       width=${ width }
       scale=${ scale }
       navigationStack=${ navigationStack }
+      interactionMode=${ interactionMode }
+      onKeyboardInteraction=${ handleKeyboardInteraction }
     >
       ${ displayHeader && m$1`
         <${PopupMenuHeader}
@@ -29762,6 +29840,7 @@
             selectedEntry=${ selectedEntry }
             setSelectedEntry=${ setSelectedEntry }
             keyboardSelection=${ keyboardSelection }
+            onPointerInteraction=${ handlePointerInteraction }
             onAction=${ handleEntryAction }
             idPrefix=${ idPrefix }
             id=${ resultsId }
@@ -29819,9 +29898,11 @@
 	    onClose,
 	    onKeydown,
 	    onKeyup,
+	    onKeyboardInteraction,
 	    className,
 	    children,
 	    navigationStack,
+	    interactionMode,
 	    position: positionGetter
 	  } = props;
 
@@ -29889,10 +29970,15 @@
 	    };
 	  }, []);
 
+	  const popupClassName = clsx('djs-popup', className, {
+	    'djs-popup--pointer': interactionMode === 'pointer'
+	  });
+
 	  return m$1`
     <div
-      class=${ clsx('djs-popup', className) }
+      class=${ popupClassName }
       style=${ getPopupStyle(props) }
+      onKeydownCapture=${ onKeyboardInteraction }
       onKeydown=${ onKeydown }
       onKeyup=${ onKeyup }
       ref=${ popupRef }
@@ -50824,6 +50910,33 @@
 	      di.set('label', undefined);
 	    }
 	  }
+
+	  // remove BPMNLabel on external label removal
+	  this.executed('shape.delete', ifBpmn(function(event) {
+	    const context = event.context,
+	          labelTarget = context.labelTarget,
+	          di = labelTarget && getDi(labelTarget),
+	          diLabel = di && di.get('label');
+
+	    if (!diLabel) {
+	      return;
+	    }
+
+	    context.oldDiLabel = diLabel;
+
+	    di.set('label', undefined);
+	  }));
+
+	  this.reverted('shape.delete', ifBpmn(function(event) {
+	    const {
+	      labelTarget,
+	      oldDiLabel
+	    } = event.context;
+
+	    if (oldDiLabel) {
+	      getDi(labelTarget).set('label', oldDiLabel);
+	    }
+	  }));
 	}
 
 	e$3(BpmnUpdater, CommandInterceptor);
@@ -58147,6 +58260,67 @@
 	  appendPreview: [ 'type', AppendPreview ]
 	};
 
+	/**
+	 * @typedef { {
+	 *   x: number;
+	 *   y: number;
+	 *   width?: number;
+	 *   height?: number;
+	 *   maxWidth?: number;
+	 *   maxHeight?: number;
+	 *   minWidth?: number;
+	 *   minHeight?: number;
+	 * } } TextBoxBounds
+	 *
+	 * @typedef { {
+	 *   width?: string | number;
+	 *   height?: string | number;
+	 *   maxWidth?: string | number;
+	 *   maxHeight?: string | number;
+	 *   minWidth?: string | number;
+	 *   minHeight?: string | number;
+	 *   left?: string | number;
+	 *   top?: string | number;
+	 *   backgroundColor?: string | null;
+	 *   position?: string;
+	 *   overflow?: string;
+	 *   border?: string | null;
+	 *   wordWrap?: string;
+	 *   textAlign?: string;
+	 *   outline?: string;
+	 *   transform?: string | null;
+	 *   fontFamily?: string;
+	 *   fontSize?: string | number;
+	 *   fontWeight?: string | number;
+	 *   lineHeight?: string | number;
+	 *   padding?: string | number;
+	 *   paddingTop?: string | number;
+	 *   paddingRight?: string | number;
+	 *   paddingBottom?: string | number;
+	 *   paddingLeft?: string | number;
+	 * } } TextBoxStyle
+	 *
+	 * @typedef { {
+	 *   autoResize?: boolean;
+	 *   resizable?: boolean;
+	 *   centerVertically?: boolean;
+	 * } } TextBoxOptions
+	 *
+	 * @typedef { {
+	 *   width: number;
+	 *   height: number;
+	 *   dx: number;
+	 *   dy: number;
+	 * } } TextBoxResizeEvent
+	 *
+	 * @typedef { {
+	 *   container: HTMLElement;
+	 *   keyHandler?: (event: KeyboardEvent) => void;
+	 *   resizeHandler?: (event: TextBoxResizeEvent) => void;
+	 *   focusoutHandler?: (event: FocusEvent) => void;
+	 * } } TextBoxConfig
+	 */
+
 	var min = Math.min,
 	    max = Math.max;
 
@@ -58176,11 +58350,7 @@
 	 *     content
 	 *     resize-handle
 	 *
-	 * @param {object} options
-	 * @param {DOMElement} options.container The DOM element to append the contentContainer to
-	 * @param {Function} options.keyHandler Handler for key events
-	 * @param {Function} options.resizeHandler Handler for resize events
-	 * @param {Function} [options.focusoutHandler] Handler for focusout events
+	 * @param {TextBoxConfig} options
 	 */
 	function TextBox(options) {
 	  this.container = options.container;
@@ -58191,7 +58361,10 @@
 	    '</div>'
 	  );
 
-	  this.content = query('[contenteditable]', this.parent);
+	  /**
+	   * @type {HTMLElement}
+	   */
+	  this.content = /** @type {HTMLElement} */ (query('[contenteditable]', this.parent));
 
 	  this.keyHandler = options.keyHandler || function() {};
 	  this.resizeHandler = options.resizeHandler || function() {};
@@ -58205,19 +58378,12 @@
 	/**
 	 * Create a text box with the given position, size, style and text content
 	 *
-	 * @param {Object} bounds
-	 * @param {Number} bounds.x absolute x position
-	 * @param {Number} bounds.y absolute y position
-	 * @param {Number} [bounds.width] fixed width value
-	 * @param {Number} [bounds.height] fixed height value
-	 * @param {Number} [bounds.maxWidth] maximum width value
-	 * @param {Number} [bounds.maxHeight] maximum height value
-	 * @param {Number} [bounds.minWidth] minimum width value
-	 * @param {Number} [bounds.minHeight] minimum height value
-	 * @param {Object} [style]
-	 * @param {String} value text content
+	 * @param {TextBoxBounds} bounds
+	 * @param {TextBoxStyle|undefined} style
+	 * @param {string} value text content
+	 * @param {TextBoxOptions} [options]
 	 *
-	 * @return {DOMElement} The created content DOM element
+	 * @return {HTMLElement} The created parent DOM element
 	 */
 	TextBox.prototype.create = function(bounds, style, value, options) {
 	  var self = this;
@@ -58320,6 +58486,8 @@
 
 	/**
 	 * Intercept paste events to remove formatting from pasted text.
+	 *
+	 * @param {ClipboardEvent} e
 	 */
 	TextBox.prototype.handlePaste = function(e) {
 	  var options = this.options,
@@ -58350,6 +58518,9 @@
 	  }
 	};
 
+	/**
+	 * @param {string} text
+	 */
 	TextBox.prototype.insertText = function(text) {
 	  text = normalizeEndOfLineSequences(text);
 
@@ -58565,11 +58736,17 @@
 	};
 
 
+	/**
+	 * @return {string}
+	 */
 	TextBox.prototype.getValue = function() {
 	  return this.content.innerText.trim();
 	};
 
 
+	/**
+	 * @return {Range}
+	 */
 	TextBox.prototype.getSelection = function() {
 	  var selection = window.getSelection(),
 	      range = selection.getRangeAt(0);
@@ -58578,6 +58755,10 @@
 	};
 
 
+	/**
+	 * @param {Node|null} container
+	 * @param {number} [offset]
+	 */
 	TextBox.prototype.setSelection = function(container, offset) {
 	  var range = document.createRange();
 
@@ -58600,19 +58781,71 @@
 	  return string.replace(/\r\n|\r|\n/g, '\n');
 	}
 
+	/**
+	 * @typedef {import('diagram-js/lib/core/Canvas.js').default} Canvas
+	 * @typedef {import('diagram-js/lib/core/EventBus.js').default} EventBus
+	 *
+	 * @typedef {import('diagram-js/lib/model/Types.js').Element} Element
+	 *
+	 * @typedef {import('diagram-js/lib/util/Types.js').Rect} Rect
+	 *
+	 * @typedef {import('./TextBox.js').TextBoxBounds} TextBoxBounds
+	 * @typedef {import('./TextBox.js').TextBoxStyle} TextBoxStyle
+	 * @typedef {import('./TextBox.js').TextBoxOptions} TextBoxOptions
+	 * @typedef {import('./TextBox.js').TextBoxResizeEvent} TextBoxResizeEvent
+	 */
+
+	/**
+	 * The context returned by a {@link DirectEditingProvider} to activate
+	 * direct editing for an element.
+	 *
+	 * @typedef { {
+	 *   bounds: TextBoxBounds;
+	 *   text: string;
+	 *   style?: TextBoxStyle;
+	 *   options?: TextBoxOptions;
+	 * } } DirectEditingContext
+	 */
+
+	/**
+	 * A provider that enables direct editing for elements.
+	 *
+	 * @typedef { {
+	 *   activate: (element: Element) => DirectEditingContext | null | undefined;
+	 *   update: (element: Element, newText: string, previousText: string, bounds: Rect) => void;
+	 * } } DirectEditingProvider
+	 */
+
+	/**
+	 * @typedef { {
+	 *   element: Element;
+	 *   context: DirectEditingContext;
+	 *   provider: DirectEditingProvider;
+	 * } } DirectEditingActive
+	 */
+
 	/**
 	 * A direct editing component that allows users
 	 * to edit an elements text directly in the diagram
 	 *
-	 * @param {EventBus} eventBus the event bus
-	 * @param {Canvas} canvas the canvas
+	 * @param {EventBus} eventBus
+	 * @param {Canvas} canvas
 	 */
 	function DirectEditing(eventBus, canvas) {
 
 	  this._eventBus = eventBus;
 	  this._canvas = canvas;
 
+	  /**
+	   * @type {DirectEditingProvider[]}
+	   */
 	  this._providers = [];
+
+	  /**
+	   * @type {DirectEditingActive | null}
+	   */
+	  this._active = null;
+
 	  this._textbox = new TextBox({
 	    container: canvas.getContainer(),
 	    keyHandler: bind$1(this._handleKey, this),
@@ -58627,13 +58860,17 @@
 
 
 	/**
-	 * Register a direct editing provider
-
-	 * @param {Object} provider the provider, must expose an #activate(element) method that returns
-	 *                          an activation context ({ bounds: {x, y, width, height }, text }) if
-	 *                          direct editing is available for the given element.
-	 *                          Additionally the provider must expose a #update(element, value) method
-	 *                          to receive direct editing updates.
+	 * Register a direct editing provider.
+	 *
+	 * A provider must expose an `#activate(element)` method that returns
+	 * an activation context (`{ bounds: { x, y, width, height }, text }`) if
+	 * direct editing is available for the given element.
+	 *
+	 * Additionally the provider must expose an
+	 * `#update(element, newText, previousText, bounds)` method to receive
+	 * direct editing updates.
+	 *
+	 * @param {DirectEditingProvider} provider
 	 */
 	DirectEditing.prototype.registerProvider = function(provider) {
 	  this._providers.push(provider);
@@ -58643,7 +58880,7 @@
 	/**
 	 * Returns true if direct editing is currently active
 	 *
-	 * @param {djs.model.Base} [element]
+	 * @param {Element} [element]
 	 *
 	 * @return {boolean}
 	 */
@@ -58665,10 +58902,17 @@
 	};
 
 
+	/**
+	 * @param {string} event
+	 * @param {Object} [context]
+	 */
 	DirectEditing.prototype._fire = function(event, context) {
 	  this._eventBus.fire('directEditing.' + event, context || { active: this._active });
 	};
 
+	/**
+	 * Close direct editing, if it is currently active.
+	 */
 	DirectEditing.prototype.close = function() {
 	  this._fire('deactivate');
 
@@ -58690,6 +58934,10 @@
 	  this.resizable = undefined;
 	};
 
+	/**
+	 * Complete direct editing, updating the element via the
+	 * active provider if the text or bounds changed.
+	 */
 	DirectEditing.prototype.complete = function() {
 
 	  var active = this._active;
@@ -58725,11 +58973,19 @@
 	};
 
 
+	/**
+	 * Returns the current text value.
+	 *
+	 * @return {string}
+	 */
 	DirectEditing.prototype.getValue = function() {
 	  return this._textbox.getValue();
 	};
 
 
+	/**
+	 * @param {KeyboardEvent} e
+	 */
 	DirectEditing.prototype._handleKey = function(e) {
 
 	  // stop bubble
@@ -58751,11 +59007,17 @@
 	};
 
 
+	/**
+	 * @param {TextBoxResizeEvent} event
+	 */
 	DirectEditing.prototype._handleResize = function(event) {
 	  this._fire('resize', event);
 	};
 
 
+	/**
+	 * @param {FocusEvent} event
+	 */
 	DirectEditing.prototype._handleFocusout = function(event) {
 
 	  // ignore focus moves within the textbox (e.g. to the resize handle)
@@ -58770,8 +59032,9 @@
 	/**
 	 * Activate direct editing on the given element
 	 *
-	 * @param {Object} ElementDescriptor the descriptor for a shape or connection
-	 * @return {Boolean} true if the activation was possible
+	 * @param {Element} element
+	 *
+	 * @return {boolean} true if the activation was possible
 	 */
 	DirectEditing.prototype.activate = function(element) {
 	  if (this.isActive()) {
@@ -63117,13 +63380,9 @@
 
 	var KEY_TO_DIRECTION = {
 	  ArrowLeft: LEFT,
-	  Left: LEFT,
 	  ArrowUp: UP,
-	  Up: UP,
 	  ArrowRight: RIGHT,
-	  Right: RIGHT,
-	  ArrowDown: DOWN,
-	  Down: DOWN
+	  ArrowDown: DOWN
 	};
 
 	var DIRECTIONS_DELTA = {