camunda-bpmn-js 5.6.0 → 5.6.1

package/dist/camunda-cloud-modeler.development.js

@@ -46255,6 +46255,7 @@
 
   /**
    * @typedef {import('didi').Injector} Injector
+   * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
    *
    * @typedef {import('../../model/Types').Shape} Shape
    *
@@ -46264,13 +46265,17 @@
 
   /**
    * @param {Injector} injector
+   * @param {Canvas} canvas
    */
-  function BpmnSpaceTool(injector) {
+  function BpmnSpaceTool(injector, canvas) {
     injector.invoke(SpaceTool, this);
+
+    this._canvas = canvas;
   }
 
   BpmnSpaceTool.$inject = [
-    'injector'
+    'injector',
+    'canvas'
   ];
 
   e$7(BpmnSpaceTool, SpaceTool);
@@ -46284,7 +46289,26 @@
    * @return {Object}
    */
   BpmnSpaceTool.prototype.calculateAdjustments = function(elements, axis, delta, start) {
-    var adjustments = SpaceTool.prototype.calculateAdjustments.call(this, elements, axis, delta, start);
+
+    var canvasRoot = this._canvas.getRootElement(),
+        spaceRoot = elements[0] === canvasRoot ? null : elements[0],
+        enclosedArtifacts = [];
+
+    // ensure
+    if (spaceRoot) {
+      enclosedArtifacts = values(
+        getEnclosedElements(
+          canvasRoot.children.filter(
+            (child) => is$5(child, 'bpmn:Artifact')
+          ),
+          getBBox(spaceRoot)
+        )
+      );
+    }
+
+    const elementsToMove = [ ...elements, ...enclosedArtifacts ];
+
+    var adjustments = SpaceTool.prototype.calculateAdjustments.call(this, elementsToMove, axis, delta, start);
 
     // do not resize:
     //
@@ -109407,19 +109431,19 @@
     errors: {}
   });
 
-  /**
-   * @typedef {Function} <propertiesPanel.showEntry> callback
-   *
-   * @example
-   *
-   * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
-   *   // ...
-   * });
-   *
-   * @param {Object} context
-   * @param {boolean} [context.focus]
-   *
-   * @returns void
+  /**
+   * @typedef {Function} <propertiesPanel.showEntry> callback
+   *
+   * @example
+   *
+   * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+   *   // ...
+   * });
+   *
+   * @param {Object} context
+   * @param {boolean} [context.focus]
+   *
+   * @returns void
    */
 
   const EventContext = F$3({
@@ -109438,20 +109462,20 @@
     getTooltipForId: () => {}
   });
 
-  /**
-   * Accesses the global TooltipContext and returns a tooltip for a given id and element.
-   *
-   * @example
-   * ```jsx
-   * function TextField(props) {
-   *   const tooltip = useTooltipContext('input1', element);
-   * }
-   * ```
-   *
-   * @param {string} id
-   * @param {object} element
-   *
-   * @returns {string}
+  /**
+   * Accesses the global TooltipContext and returns a tooltip for a given id and element.
+   *
+   * @example
+   * ```jsx
+   * function TextField(props) {
+   *   const tooltip = useTooltipContext('input1', element);
+   * }
+   * ```
+   *
+   * @param {string} id
+   * @param {object} element
+   *
+   * @returns {string}
    */
   function useTooltipContext(id, element) {
     const {
@@ -109473,7 +109497,7 @@
     return u(Tooltip, {
       ...props,
       value: value,
-      forId: prefixId$9(forId)
+      forId: `bio-properties-panel-${forId}`
     });
   }
   function Tooltip(props) {
@@ -109484,71 +109508,52 @@
       direction = 'right',
       position
     } = props;
-    const [visible, setShow] = h(false);
-    const [focusedViaKeyboard, setFocusedViaKeyboard] = h(false);
+    const [visible, setVisible] = h(false);
+
+    // Tooltip will be shown after SHOW_DELAY ms from hovering over the source element.
+    const SHOW_DELAY = 200;
     let timeout = null;
     const wrapperRef = _$1(null);
     const tooltipRef = _$1(null);
-    const showTooltip = async event => {
-      const show = () => setShow(true);
-      if (!visible && !timeout) {
-        if (event instanceof MouseEvent) {
-          timeout = setTimeout(show, 200);
-        } else {
-          show();
-          setFocusedViaKeyboard(true);
-        }
+    const show = (_, delay) => {
+      if (visible) return;
+      if (delay) {
+        timeout = setTimeout(() => {
+          setVisible(true);
+        }, SHOW_DELAY);
+      } else {
+        setVisible(true);
       }
     };
-    const hideTooltip = () => {
-      setShow(false);
-      setFocusedViaKeyboard(false);
-    };
-    const hideTooltipViaEscape = e => {
-      e.code === 'Escape' && hideTooltip();
+    const hide = () => {
+      clearTimeout(timeout);
+      setVisible(false);
     };
-    const isTooltipHovered = ({
-      x,
-      y
+    const handleMouseLeave = ({
+      relatedTarget
     }) => {
-      const tooltip = tooltipRef.current;
-      const wrapper = wrapperRef.current;
-      return tooltip && (inBounds(x, y, wrapper.getBoundingClientRect()) || inBounds(x, y, tooltip.getBoundingClientRect()));
+      // Don't hide the tooltip when moving mouse between the wrapper and the tooltip.
+      if (relatedTarget === wrapperRef.current || relatedTarget === tooltipRef.current || relatedTarget?.parentElement === tooltipRef.current) {
+        return;
+      }
+      hide();
     };
-    p$1(() => {
+    const handleFocusOut = e => {
       const {
-        current
-      } = wrapperRef;
-      if (!current) {
+        target
+      } = e;
+
+      // Don't hide the tooltip if the wrapper or the tooltip itself is clicked.
+      const isHovered = target.matches(':hover') || tooltipRef.current?.matches(':hover');
+      if (target === wrapperRef.current && isHovered) {
+        e.stopPropagation();
         return;
       }
-      const hideHoveredTooltip = e => {
-        const isFocused = document.activeElement === wrapperRef.current || document.activeElement.closest('.bio-properties-panel-tooltip');
-        if (visible && !isTooltipHovered({
-          x: e.x,
-          y: e.y
-        }) && !(isFocused && focusedViaKeyboard)) {
-          hideTooltip();
-        }
-      };
-      const hideFocusedTooltip = e => {
-        const {
-          relatedTarget
-        } = e;
-        const isTooltipChild = el => !!el.closest('.bio-properties-panel-tooltip');
-        if (visible && !isHovered(wrapperRef.current) && relatedTarget && !isTooltipChild(relatedTarget)) {
-          hideTooltip();
-        }
-      };
-      document.addEventListener('wheel', hideHoveredTooltip);
-      document.addEventListener('focusout', hideFocusedTooltip);
-      document.addEventListener('mousemove', hideHoveredTooltip);
-      return () => {
-        document.removeEventListener('wheel', hideHoveredTooltip);
-        document.removeEventListener('mousemove', hideHoveredTooltip);
-        document.removeEventListener('focusout', hideFocusedTooltip);
-      };
-    }, [wrapperRef.current, visible, focusedViaKeyboard]);
+      hide();
+    };
+    const hideTooltipViaEscape = e => {
+      e.code === 'Escape' && hide();
+    };
     const renderTooltip = () => {
       return u("div", {
         class: `bio-properties-panel-tooltip ${direction}`,
@@ -109558,6 +109563,7 @@
         style: position || getTooltipPosition(wrapperRef.current),
         ref: tooltipRef,
         onClick: e => e.stopPropagation(),
+        onMouseLeave: handleMouseLeave,
         children: [u("div", {
           class: "bio-properties-panel-tooltip-content",
           children: value
@@ -109570,54 +109576,38 @@
       class: "bio-properties-panel-tooltip-wrapper",
       tabIndex: "0",
       ref: wrapperRef,
-      onMouseEnter: showTooltip,
-      onMouseLeave: () => {
-        clearTimeout(timeout);
-        timeout = null;
-      },
-      onFocus: showTooltip,
+      onMouseEnter: e => show(e, true),
+      onMouseLeave: handleMouseLeave,
+      onFocus: show,
+      onBlur: handleFocusOut,
       onKeyDown: hideTooltipViaEscape,
       children: [props.children, visible ? parent ? j(renderTooltip(), parent.current) : renderTooltip() : null]
     });
   }
 
   // helper
-  function inBounds(x, y, bounds) {
-    const {
-      top,
-      right,
-      bottom,
-      left
-    } = bounds;
-    return x >= left && x <= right && y >= top && y <= bottom;
-  }
+
   function getTooltipPosition(refElement) {
     const refPosition = refElement.getBoundingClientRect();
     const right = `calc(100% - ${refPosition.x}px)`;
     const top = `${refPosition.top - 10}px`;
     return `right: ${right}; top: ${top};`;
   }
-  function isHovered(element) {
-    return element.matches(':hover');
-  }
-  function prefixId$9(id) {
-    return `bio-properties-panel-${id}`;
-  }
 
-  /**
-   * Accesses the global DescriptionContext and returns a description for a given id and element.
-   *
-   * @example
-   * ```jsx
-   * function TextField(props) {
-   *   const description = useDescriptionContext('input1', element);
-   * }
-   * ```
-   *
-   * @param {string} id
-   * @param {object} element
-   *
-   * @returns {string}
+  /**
+   * Accesses the global DescriptionContext and returns a description for a given id and element.
+   *
+   * @example
+   * ```jsx
+   * function TextField(props) {
+   *   const description = useDescriptionContext('input1', element);
+   * }
+   * ```
+   *
+   * @param {string} id
+   * @param {object} element
+   *
+   * @returns {string}
    */
   function useDescriptionContext(id, element) {
     const {
@@ -109639,11 +109629,11 @@
     return errors;
   }
 
-  /**
-   * Subscribe to an event immediately. Update subscription after inputs changed.
-   *
-   * @param {string} event
-   * @param {Function} callback
+  /**
+   * Subscribe to an event immediately. Update subscription after inputs changed.
+   *
+   * @param {string} event
+   * @param {Function} callback
    */
   function useEvent(event, callback, eventBus) {
     const eventContext = q$1(EventContext);
@@ -109673,20 +109663,20 @@
     }, [callback, event, eventBus]);
   }
 
-  /**
-   * Creates a state that persists in the global LayoutContext.
-   *
-   * @example
-   * ```jsx
-   * function Group(props) {
-   *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
-   * }
-   * ```
-   *
-   * @param {(string|number)[]} path
-   * @param {any} [defaultValue]
-   *
-   * @returns {[ any, Function ]}
+  /**
+   * Creates a state that persists in the global LayoutContext.
+   *
+   * @example
+   * ```jsx
+   * function Group(props) {
+   *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+   * }
+   * ```
+   *
+   * @param {(string|number)[]} path
+   * @param {any} [defaultValue]
+   *
+   * @returns {[ any, Function ]}
    */
   function useLayoutState(path, defaultValue) {
     const {
@@ -109700,11 +109690,11 @@
     return [layoutForKey, setState];
   }
 
-  /**
-   * @pinussilvestrus: we need to introduce our own hook to persist the previous
-   * state on updates.
-   *
-   * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+  /**
+   * @pinussilvestrus: we need to introduce our own hook to persist the previous
+   * state on updates.
+   *
+   * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
    */
 
   function usePrevious$1(value) {
@@ -109715,12 +109705,12 @@
     return ref.current;
   }
 
-  /**
-   * Subscribe to `propertiesPanel.showEntry`.
-   *
-   * @param {string} id
-   *
-   * @returns {import('preact').Ref}
+  /**
+   * Subscribe to `propertiesPanel.showEntry`.
+   *
+   * @param {string} id
+   *
+   * @returns {import('preact').Ref}
    */
   function useShowEntryEvent(id) {
     const {
@@ -109751,20 +109741,20 @@
     return ref;
   }
 
-  /**
-   * @callback setSticky
-   * @param {boolean} value
+  /**
+   * @callback setSticky
+   * @param {boolean} value
    */
 
-  /**
-   * Use IntersectionObserver to identify when DOM element is in sticky mode.
-   * If sticky is observered setSticky(true) will be called.
-   * If sticky mode is left, setSticky(false) will be called.
-   *
-   *
-   * @param {Object} ref
-   * @param {string} scrollContainerSelector
-   * @param {setSticky} setSticky
+  /**
+   * Use IntersectionObserver to identify when DOM element is in sticky mode.
+   * If sticky is observered setSticky(true) will be called.
+   * If sticky mode is left, setSticky(false) will be called.
+   *
+   *
+   * @param {Object} ref
+   * @param {string} scrollContainerSelector
+   * @param {setSticky} setSticky
    */
   function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
     const [scrollContainer, setScrollContainer] = h(query$1(scrollContainerSelector));
@@ -109818,19 +109808,19 @@
     }, [ref.current, scrollContainer, setSticky]);
   }
 
-  /**
-   * Creates a static function reference with changing body.
-   * This is necessary when external libraries require a callback function
-   * that has references to state variables.
-   *
-   * Usage:
-   * const callback = useStaticCallback((val) => {val === currentState});
-   *
-   * The `callback` reference is static and can be safely used in external
-   * libraries or as a prop that does not cause rerendering of children.
-   *
-   * @param {Function} callback function with changing reference
-   * @returns {Function} static function reference
+  /**
+   * Creates a static function reference with changing body.
+   * This is necessary when external libraries require a callback function
+   * that has references to state variables.
+   *
+   * Usage:
+   * const callback = useStaticCallback((val) => {val === currentState});
+   *
+   * The `callback` reference is static and can be safely used in external
+   * libraries or as a prop that does not cause rerendering of children.
+   *
+   * @param {Function} callback function with changing reference
+   * @returns {Function} static function reference
    */
   function useStaticCallback(callback) {
     const callbackRef = _$1(callback);
@@ -109973,13 +109963,13 @@
     return null;
   }
 
-  /**
-   * @typedef { {
-   *  text: (element: object) => string,
-   *  icon?: (element: Object) => import('preact').Component
-   * } } PlaceholderDefinition
-   *
-   * @param { PlaceholderDefinition } props
+  /**
+   * @typedef { {
+   *  text: (element: object) => string,
+   *  icon?: (element: Object) => import('preact').Component
+   * } } PlaceholderDefinition
+   *
+   * @param { PlaceholderDefinition } props
    */
   function Placeholder(props) {
     const {
@@ -110018,9 +110008,9 @@
 
   const noop$6 = () => {};
 
-  /**
-   * Buffer `.focus()` calls while the editor is not initialized.
-   * Set Focus inside when the editor is ready.
+  /**
+   * Buffer `.focus()` calls while the editor is not initialized.
+   * Set Focus inside when the editor is ready.
    */
   const useBufferedFocus$1 = function (editor, ref) {
     const [buffer, setBuffer] = h(undefined);
@@ -110121,9 +110111,9 @@
 
   const noop$5 = () => {};
 
-  /**
-   * Buffer `.focus()` calls while the editor is not initialized.
-   * Set Focus inside when the editor is ready.
+  /**
+   * Buffer `.focus()` calls while the editor is not initialized.
+   * Set Focus inside when the editor is ready.
    */
   const useBufferedFocus = function (editor, ref) {
     const [buffer, setBuffer] = h(undefined);
@@ -110172,10 +110162,10 @@
     p$1(() => {
       let editor;
 
-      /* Trigger FEEL toggle when
-       *
-       * - `backspace` is pressed
-       * - AND the cursor is at the beginning of the input
+      /* Trigger FEEL toggle when
+       *
+       * - `backspace` is pressed
+       * - AND the cursor is at the beginning of the input
        */
       const onKeyDown = e => {
         if (e.key !== 'Backspace' || !editor) {
@@ -110266,10 +110256,10 @@
 
   const noop$4 = () => {};
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.label
-   * @param {String} props.feel
+  /**
+   * @param {Object} props
+   * @param {Object} props.label
+   * @param {String} props.feel
    */
   function FeelIcon(props) {
     const {
@@ -110304,22 +110294,22 @@
     source: null
   });
 
-  /**
-   * Add a dragger that calls back the passed function with
-   * { event, delta } on drag.
-   *
-   * @example
-   *
-   * function dragMove(event, delta) {
-   *   // we are dragging (!!)
-   * }
-   *
-   * domElement.addEventListener('dragstart', dragger(dragMove));
-   *
-   * @param {Function} fn
-   * @param {Element} [dragPreview]
-   *
-   * @return {Function} drag start callback function
+  /**
+   * Add a dragger that calls back the passed function with
+   * { event, delta } on drag.
+   *
+   * @example
+   *
+   * function dragMove(event, delta) {
+   *   // we are dragging (!!)
+   * }
+   *
+   * domElement.addEventListener('dragstart', dragger(dragMove));
+   *
+   * @param {Function} fn
+   * @param {Element} [dragPreview]
+   *
+   * @return {Function} drag start callback function
    */
   function createDragger(fn, dragPreview) {
     let self;
@@ -110374,23 +110364,23 @@
 
   const noop$3 = () => {};
 
-  /**
-   * A generic popup component.
-   *
-   * @param {Object} props
-   * @param {HTMLElement} [props.container]
-   * @param {string} [props.className]
-   * @param {boolean} [props.delayInitialFocus]
-   * @param {{x: number, y: number}} [props.position]
-   * @param {number} [props.width]
-   * @param {number} [props.height]
-   * @param {Function} props.onClose
-   * @param {Function} [props.onPostActivate]
-   * @param {Function} [props.onPostDeactivate]
-   * @param {boolean} [props.returnFocus]
-   * @param {boolean} [props.closeOnEscape]
-   * @param {string} props.title
-   * @param {Ref} [ref]
+  /**
+   * A generic popup component.
+   *
+   * @param {Object} props
+   * @param {HTMLElement} [props.container]
+   * @param {string} [props.className]
+   * @param {boolean} [props.delayInitialFocus]
+   * @param {{x: number, y: number}} [props.position]
+   * @param {number} [props.width]
+   * @param {number} [props.height]
+   * @param {Function} props.onClose
+   * @param {Function} [props.onPostActivate]
+   * @param {Function} [props.onPostDeactivate]
+   * @param {boolean} [props.returnFocus]
+   * @param {boolean} [props.closeOnEscape]
+   * @param {string} props.title
+   * @param {Ref} [ref]
    */
   function PopupComponent(props, globalRef) {
     const {
@@ -110609,12 +110599,12 @@
   const FEEL_POPUP_WIDTH = 700;
   const FEEL_POPUP_HEIGHT = 250;
 
-  /**
-   * FEEL popup component, built as a singleton. Emits lifecycle events as follows:
-   *  - `feelPopup.open` - fired before the popup is mounted
-   *  - `feelPopup.opened` - fired after the popup is mounted. Event context contains the DOM node of the popup
-   *  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup
-   *  - `feelPopup.closed` - fired after the popup is unmounted
+  /**
+   * FEEL popup component, built as a singleton. Emits lifecycle events as follows:
+   *  - `feelPopup.open` - fired before the popup is mounted
+   *  - `feelPopup.opened` - fired after the popup is mounted. Event context contains the DOM node of the popup
+   *  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup
+   *  - `feelPopup.closed` - fired after the popup is unmounted
    */
   function FEELPopupRoot(props) {
     const {
@@ -110840,11 +110830,11 @@
     return element.closest('.cm-editor').querySelector('.cm-tooltip-autocomplete');
   }
 
-  /**
-   * This hook behaves like useEffect, but does not trigger on the first render.
-   *
-   * @param {Function} effect
-   * @param {Array} deps
+  /**
+   * This hook behaves like useEffect, but does not trigger on the first render.
+   *
+   * @param {Function} effect
+   * @param {Array} deps
    */
   function useUpdateEffect(effect, deps) {
     const isMounted = _$1(false);
@@ -110922,19 +110912,19 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {String} props.label
-   * @param {String} props.switcherLabel
-   * @param {Boolean} props.inline
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string|import('preact').Component} props.tooltip
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {String} props.label
+   * @param {String} props.switcherLabel
+   * @param {Boolean} props.inline
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
    */
   function ToggleSwitchEntry(props) {
     const {
@@ -111042,22 +111032,22 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Boolean} props.debounce
-   * @param {String} props.description
-   * @param {Boolean} props.disabled
-   * @param {Object} props.element
-   * @param {Function} props.getValue
-   * @param {String} props.id
-   * @param {String} props.label
-   * @param {String} props.max
-   * @param {String} props.min
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {String} props.step
-   * @param {Function} props.validate
+  /**
+   * @param {Object} props
+   * @param {Boolean} props.debounce
+   * @param {String} props.description
+   * @param {Boolean} props.disabled
+   * @param {Object} props.element
+   * @param {Function} props.getValue
+   * @param {String} props.id
+   * @param {String} props.label
+   * @param {String} props.max
+   * @param {String} props.min
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {String} props.step
+   * @param {Function} props.validate
    */
   function NumberFieldEntry(props) {
     const {
@@ -111543,26 +111533,26 @@
     });
   });
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {Boolean} props.feel
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.tooltipContainer
-   * @param {Function} props.validate
-   * @param {Function} props.show
-   * @param {Function} props.example
-   * @param {Function} props.variables
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string} [props.placeholder]
-   * @param {string|import('preact').Component} props.tooltip
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {Boolean} props.feel
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.tooltipContainer
+   * @param {Function} props.validate
+   * @param {Function} props.show
+   * @param {Function} props.example
+   * @param {Function} props.variables
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string} [props.placeholder]
+   * @param {string|import('preact').Component} props.tooltip
    */
   function FeelEntry$2(props) {
     const {
@@ -111649,27 +111639,27 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {String} props.max
-   * @param {String} props.min
-   * @param {String} props.step
-   * @param {Boolean} props.feel
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.tooltipContainer
-   * @param {Function} props.validate
-   * @param {Function} props.show
-   * @param {Function} props.example
-   * @param {Function} props.variables
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {String} props.max
+   * @param {String} props.min
+   * @param {String} props.step
+   * @param {Boolean} props.feel
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.tooltipContainer
+   * @param {Function} props.validate
+   * @param {Function} props.show
+   * @param {Function} props.example
+   * @param {Function} props.variables
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
    */
   function FeelNumberEntry(props) {
     return u(FeelEntry$2, {
@@ -111679,25 +111669,25 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {Boolean} props.feel
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.tooltipContainer
-   * @param {Function} props.validate
-   * @param {Function} props.show
-   * @param {Function} props.example
-   * @param {Function} props.variables
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string} [props.placeholder]
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {Boolean} props.feel
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.tooltipContainer
+   * @param {Function} props.validate
+   * @param {Function} props.show
+   * @param {Function} props.example
+   * @param {Function} props.variables
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string} [props.placeholder]
    */
   function FeelTextAreaEntry$1(props) {
     return u(FeelEntry$2, {
@@ -111707,24 +111697,24 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {Boolean} props.feel
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.tooltipContainer
-   * @param {Function} props.validate
-   * @param {Function} props.show
-   * @param {Function} props.example
-   * @param {Function} props.variables
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {Boolean} props.feel
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.tooltipContainer
+   * @param {Function} props.validate
+   * @param {Function} props.show
+   * @param {Function} props.example
+   * @param {Function} props.variables
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
    */
   function FeelCheckboxEntry(props) {
     return u(FeelEntry$2, {
@@ -111793,85 +111783,85 @@
   const DEFAULT_DESCRIPTION = {};
   const DEFAULT_TOOLTIP = {};
 
-  /**
-   * @typedef { {
-   *    component: import('preact').Component,
-   *    id: String,
-   *    isEdited?: Function
-   * } } EntryDefinition
-   *
-   * @typedef { {
-   *    autoFocusEntry: String,
-   *    autoOpen?: Boolean,
-   *    entries: Array<EntryDefinition>,
-   *    id: String,
-   *    label: String,
-   *    remove: (event: MouseEvent) => void
-   * } } ListItemDefinition
-   *
-   * @typedef { {
-   *    add: (event: MouseEvent) => void,
-   *    component: import('preact').Component,
-   *    element: Object,
-   *    id: String,
-   *    items: Array<ListItemDefinition>,
-   *    label: String,
-   *    shouldOpen?: Boolean
-   * } } ListGroupDefinition
-   *
-   * @typedef { {
-   *    component?: import('preact').Component,
-   *    entries: Array<EntryDefinition>,
-   *    id: String,
-   *    label: String,
-   *    shouldOpen?: Boolean
-   * } } GroupDefinition
-   *
-   *  @typedef { {
-   *    [id: String]: GetDescriptionFunction
-   * } } DescriptionConfig
-   *
-   *  @typedef { {
-   *    [id: String]: GetTooltipFunction
-   * } } TooltipConfig
-   *
-   * @callback { {
-   * @param {string} id
-   * @param {Object} element
-   * @returns {string}
-   * } } GetDescriptionFunction
-   *
-   * @callback { {
-   * @param {string} id
-   * @param {Object} element
-   * @returns {string}
-   * } } GetTooltipFunction
-   *
-   * @typedef { {
-   *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
-   *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
-   * } } PlaceholderProvider
-   *
+  /**
+   * @typedef { {
+   *    component: import('preact').Component,
+   *    id: String,
+   *    isEdited?: Function
+   * } } EntryDefinition
+   *
+   * @typedef { {
+   *    autoFocusEntry: String,
+   *    autoOpen?: Boolean,
+   *    entries: Array<EntryDefinition>,
+   *    id: String,
+   *    label: String,
+   *    remove: (event: MouseEvent) => void
+   * } } ListItemDefinition
+   *
+   * @typedef { {
+   *    add: (event: MouseEvent) => void,
+   *    component: import('preact').Component,
+   *    element: Object,
+   *    id: String,
+   *    items: Array<ListItemDefinition>,
+   *    label: String,
+   *    shouldOpen?: Boolean
+   * } } ListGroupDefinition
+   *
+   * @typedef { {
+   *    component?: import('preact').Component,
+   *    entries: Array<EntryDefinition>,
+   *    id: String,
+   *    label: String,
+   *    shouldOpen?: Boolean
+   * } } GroupDefinition
+   *
+   *  @typedef { {
+   *    [id: String]: GetDescriptionFunction
+   * } } DescriptionConfig
+   *
+   *  @typedef { {
+   *    [id: String]: GetTooltipFunction
+   * } } TooltipConfig
+   *
+   * @callback { {
+   * @param {string} id
+   * @param {Object} element
+   * @returns {string}
+   * } } GetDescriptionFunction
+   *
+   * @callback { {
+   * @param {string} id
+   * @param {Object} element
+   * @returns {string}
+   * } } GetTooltipFunction
+   *
+   * @typedef { {
+   *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+   *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+   * } } PlaceholderProvider
+   *
    */
 
-  /**
-   * A basic properties panel component. Describes *how* content will be rendered, accepts
-   * data from implementor to describe *what* will be rendered.
-   *
-   * @param {Object} props
-   * @param {Object|Array} props.element
-   * @param {import('./components/Header').HeaderProvider} props.headerProvider
-   * @param {PlaceholderProvider} [props.placeholderProvider]
-   * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
-   * @param {Object} [props.layoutConfig]
-   * @param {Function} [props.layoutChanged]
-   * @param {DescriptionConfig} [props.descriptionConfig]
-   * @param {Function} [props.descriptionLoaded]
-   * @param {TooltipConfig} [props.tooltipConfig]
-   * @param {Function} [props.tooltipLoaded]
-   * @param {HTMLElement} [props.feelPopupContainer]
-   * @param {Function} [props.getFeelPopupLinks]
-   * @param {Object} [props.eventBus]
+  /**
+   * A basic properties panel component. Describes *how* content will be rendered, accepts
+   * data from implementor to describe *what* will be rendered.
+   *
+   * @param {Object} props
+   * @param {Object|Array} props.element
+   * @param {import('./components/Header').HeaderProvider} props.headerProvider
+   * @param {PlaceholderProvider} [props.placeholderProvider]
+   * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+   * @param {Object} [props.layoutConfig]
+   * @param {Function} [props.layoutChanged]
+   * @param {DescriptionConfig} [props.descriptionConfig]
+   * @param {Function} [props.descriptionLoaded]
+   * @param {TooltipConfig} [props.tooltipConfig]
+   * @param {Function} [props.tooltipLoaded]
+   * @param {HTMLElement} [props.feelPopupContainer]
+   * @param {Function} [props.getFeelPopupLinks]
+   * @param {Object} [props.eventBus]
    */
   function PropertiesPanel(props) {
     const {
@@ -112044,11 +112034,11 @@
 
   // hooks //////////////////
 
-  /**
-   * This hook behaves like useLayoutEffect, but does not trigger on the first render.
-   *
-   * @param {Function} effect
-   * @param {Array} deps
+  /**
+   * This hook behaves like useLayoutEffect, but does not trigger on the first render.
+   *
+   * @param {Function} effect
+   * @param {Array} deps
    */
   function useUpdateLayoutEffect(effect, deps) {
     const isMounted = _$1(false);
@@ -112123,15 +112113,15 @@
     });
   }
 
-  /**
-   *
-   * @param {Array<null | Element>} ignoredElements
-   * @param {Function} callback
+  /**
+   *
+   * @param {Array<null | Element>} ignoredElements
+   * @param {Function} callback
    */
   function useGlobalClick(ignoredElements, callback) {
     p$1(() => {
-      /**
-       * @param {MouseEvent} event
+      /**
+       * @param {MouseEvent} event
        */
       function listener(event) {
         if (ignoredElements.some(element => element && element.contains(event.target))) {
@@ -112164,20 +112154,20 @@
     });
   }
 
-  /**
-   * @typedef { {
-   *   [key: string]: string;
-   * } } TranslateReplacements
+  /**
+   * @typedef { {
+   *   [key: string]: string;
+   * } } TranslateReplacements
    */
 
-  /**
-   * A simple translation stub to be used for multi-language support.
-   * Can be easily replaced with a more sophisticated solution.
-   *
-   * @param {string} template to interpolate
-   * @param {TranslateReplacements} [replacements] a map with substitutes
-   *
-   * @return {string} the translated string
+  /**
+   * A simple translation stub to be used for multi-language support.
+   * Can be easily replaced with a more sophisticated solution.
+   *
+   * @param {string} template to interpolate
+   * @param {TranslateReplacements} [replacements] a map with substitutes
+   *
+   * @return {string} the translated string
    */
   function translateFallback(template, replacements) {
     replacements = replacements || {};
@@ -112289,8 +112279,8 @@
 
   const noop$1$1 = () => {};
 
-  /**
-   * @param {import('../PropertiesPanel').ListGroupDefinition} props
+  /**
+   * @param {import('../PropertiesPanel').ListGroupDefinition} props
    */
   function ListGroup(props) {
     const {
@@ -112482,18 +112472,18 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string|import('preact').Component} props.tooltip
-   * @param {boolean} [props.disabled]
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
+   * @param {boolean} [props.disabled]
    */
   function CheckboxEntry(props) {
     const {
@@ -112614,20 +112604,20 @@
     });
   }
 
-  /**
-   * @param {object} props
-   * @param {object} props.element
-   * @param {string} props.id
-   * @param {string} [props.description]
-   * @param {string} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {Function} props.getOptions
-   * @param {boolean} [props.disabled]
-   * @param {Function} [props.validate]
-   * @param {string|import('preact').Component} props.tooltip
+  /**
+   * @param {object} props
+   * @param {object} props.element
+   * @param {string} props.id
+   * @param {string} [props.description]
+   * @param {string} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {Function} props.getOptions
+   * @param {boolean} [props.disabled]
+   * @param {Function} [props.validate]
+   * @param {string|import('preact').Component} props.tooltip
    */
   function SelectEntry(props) {
     const {
@@ -112920,20 +112910,20 @@
     });
   }
 
-  /**
-   * @param {Object} props
-   * @param {Object} props.element
-   * @param {String} props.id
-   * @param {String} props.description
-   * @param {Boolean} props.debounce
-   * @param {Boolean} props.disabled
-   * @param {String} props.label
-   * @param {Function} props.getValue
-   * @param {Function} props.setValue
-   * @param {Function} props.onFocus
-   * @param {Function} props.onBlur
-   * @param {string|import('preact').Component} props.tooltip
-   * @param {Function} props.validate
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.id
+   * @param {String} props.description
+   * @param {Boolean} props.debounce
+   * @param {Boolean} props.disabled
+   * @param {String} props.label
+   * @param {Function} props.getValue
+   * @param {Function} props.setValue
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {string|import('preact').Component} props.tooltip
+   * @param {Function} props.validate
    */
   function TextfieldEntry(props) {
     const {
@@ -113026,20 +113016,20 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * Check if the FEEL popup is open.
-     * @return {Boolean}
+    /**
+     * Check if the FEEL popup is open.
+     * @return {Boolean}
      */
     isOpen() {
       return this._eventBus.fire('feelPopup._isOpen');
     }
 
-    /**
-     * Open the FEEL popup.
-     *
-     * @param {String} entryId
-     * @param {Object} popupConfig
-     * @param {HTMLElement} sourceElement
+    /**
+     * Open the FEEL popup.
+     *
+     * @param {String} entryId
+     * @param {Object} popupConfig
+     * @param {HTMLElement} sourceElement
      */
     open(entryId, popupConfig, sourceElement) {
       return this._eventBus.fire('feelPopup._open', {
@@ -113049,8 +113039,8 @@
       });
     }
 
-    /**
-     * Close the FEEL popup.
+    /**
+     * Close the FEEL popup.
      */
     close() {
       return this._eventBus.fire('feelPopup._close');
@@ -121991,9 +121981,10 @@
   }
 
   // ensure types are in logical order
-  const EVENT_TYPE = ['assigning', 'completing'];
+  const EVENT_TYPE = ['assigning', 'updating', 'completing'];
   const EVENT_TO_LABEL$1 = {
     assigning: 'Assigning',
+    updating: 'Updating',
     completing: 'Completing'
   };
   function TaskListenerEntries(props) {
@@ -123886,6 +123877,22 @@
           children: translate('Learn more.')
         })]
       });
+    },
+    'messageSubscriptionCorrelationKey': element => {
+      const translate = useService$1('translate');
+      return u("div", {
+        children: u("p", {
+          children: [translate('Identifier computed from the process context that is used to correlate an incoming message (e.g. '), u("code", {
+            children: "= orderId"
+          }), translate('). '), u("a", {
+            href: "https://docs.camunda.io/docs/8.7/components/modeler/bpmn/message-events/#messages",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            title: translate('Subscription correlation key documentation'),
+            children: translate('Learn more.')
+          }), "        "]
+        })
+      });
     }
   };
 
@@ -129161,7 +129168,7 @@
   }
 
   // eslint-disable-next-line no-undef
-  const packageVersion = "2.5.2";
+  const packageVersion = "2.5.3";
 
   /**
    * Registry for element templates.
@@ -131061,7 +131068,7 @@
         });
       }
       const unusedLinkedResources = linkedResources.get('values').slice();
-      const unusedResourceProperties = oldTemplate?.properties.slice() || [];
+      const unusedResourceProperties = (oldTemplate?.properties.slice() || []).filter(property => property.binding.type === ZEEBE_LINKED_RESOURCE_PROPERTY);
       newLinkedResources.forEach(newLinkedResource => {
         const oldProperty = findOldProperty$1(oldTemplate, newLinkedResource),
           oldLinkedResource = findBusinessObject(extensionElements, newLinkedResource),
@@ -131426,8 +131433,8 @@
     return eventDefinition.$type;
   }
 
-  class RemoveElementTemplateHandler {
-    constructor(modeling, elementFactory, elementRegistry, canvas, bpmnFactory, replace, commandStack) {
+  let RemoveElementTemplateHandler$1 = class RemoveElementTemplateHandler {
+    constructor(modeling, elementFactory, elementRegistry, canvas, bpmnFactory, replace, commandStack, moddleCopy) {
       this._modeling = modeling;
       this._elementFactory = elementFactory;
       this._elementRegistry = elementRegistry;
@@ -131435,6 +131442,7 @@
       this._bpmnFactory = bpmnFactory;
       this._replace = replace;
       this._commandStack = commandStack;
+      this._moddleCopy = moddleCopy;
     }
     preExecute(context) {
       const {
@@ -131451,7 +131459,7 @@
       const businessObject = getBusinessObject$2(element);
       const type = businessObject.$type,
         eventDefinitionType = this._getEventDefinitionType(businessObject);
-      const newBusinessObject = this._createBlankBusinessObject(element);
+      const newBusinessObject = this._createNewBusinessObject(element);
       return replace.replaceElement(element, {
         type: type,
         businessObject: newBusinessObject,
@@ -131485,7 +131493,7 @@
       }
       const businessObject = getBusinessObject$2(element);
       const type = businessObject.$type;
-      const newBusinessObject = this._createBlankBusinessObject(element);
+      const newBusinessObject = this._createNewBusinessObject(element);
       const newRoot = elementFactory.create('root', {
         type: type,
         businessObject: newBusinessObject
@@ -131510,11 +131518,15 @@
       }
       return eventDefinition.$type;
     }
-    _createBlankBusinessObject(element) {
+    _createNewBusinessObject(element) {
       const bpmnFactory = this._bpmnFactory;
       const bo = getBusinessObject$2(element),
         newBo = bpmnFactory.create(bo.$type),
         label = getLabel(element);
+
+      // Make we we keep general properties unrelated to the template.
+      this._copyProperties(bo, newBo, ['documentation']);
+      this._copyExtensionElements(bo, newBo, ['zeebe:ExecutionListeners']);
       if (!label) {
         return newBo;
       }
@@ -131526,8 +131538,47 @@
       }, label);
       return newBo;
     }
-  }
-  RemoveElementTemplateHandler.$inject = ['modeling', 'elementFactory', 'elementRegistry', 'canvas', 'bpmnFactory', 'replace', 'commandStack'];
+
+    /**
+     * Copy specified properties to the target business object.
+     *
+     * @param {ModdleElement} source
+     * @param {ModdleElement} target
+     * @param {Array<string>} properties
+     */
+    _copyProperties(source, target, properties) {
+      const copy = this._moddleCopy;
+      properties.forEach(propertyName => {
+        const property = source.get(propertyName);
+        if (property) {
+          const propertyCopy = copy.copyProperty(property, target, propertyName);
+          target.set(propertyName, propertyCopy);
+        }
+      });
+    }
+
+    /**
+     * Copy extension elements of specified types to the target business object.
+     *
+     * @param {ModdleElement} source
+     * @param {ModdleElement} target
+     * @param {Array<string>} extensionElements
+     */
+    _copyExtensionElements(source, target, extensionElements) {
+      const bpmnFactory = this._bpmnFactory;
+
+      // No extension elements in the source business object.
+      if (!source.extensionElements || !source.extensionElements.values) return;
+      const newExtensionElements = source.extensionElements.values.filter(value => extensionElements.some(extensionElement => is$5(value, extensionElement)));
+
+      // Nothing to copy.
+      if (!newExtensionElements.length) return;
+      target.extensionElements = bpmnFactory.create('bpmn:ExtensionElements', {
+        values: newExtensionElements
+      });
+    }
+  };
+  RemoveElementTemplateHandler$1.$inject = ['modeling', 'elementFactory', 'elementRegistry', 'canvas', 'bpmnFactory', 'replace', 'commandStack', 'moddleCopy'];
 
   /**
    * A handler that combines and executes multiple commands.
@@ -131555,7 +131606,7 @@
     constructor(commandStack, elementTemplates, eventBus) {
       commandStack.registerHandler('element-templates.multi-command-executor', MultiCommandHandler);
       commandStack.registerHandler('propertiesPanel.zeebe.changeTemplate', ChangeElementTemplateHandler$1);
-      commandStack.registerHandler('propertiesPanel.removeTemplate', RemoveElementTemplateHandler);
+      commandStack.registerHandler('propertiesPanel.removeTemplate', RemoveElementTemplateHandler$1);
 
       // apply default element templates on shape creation
       eventBus.on(['commandStack.shape.create.postExecuted'], function (event) {