camunda-bpmn-js 5.6.0 → 5.6.2

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

@@ -40735,6 +40735,7 @@
 
       if (
         !is$5(newShape, 'bpmn:SubProcess') ||
+        is$5(newShape,'bpmn:AdHocSubProcess') ||
         ! (is$5(oldShape, 'bpmn:Task') || is$5(oldShape, 'bpmn:CallActivity')) ||
         !isExpanded$1(newShape)
       ) {
@@ -46255,6 +46256,7 @@
 
   /**
    * @typedef {import('didi').Injector} Injector
+   * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
    *
    * @typedef {import('../../model/Types').Shape} Shape
    *
@@ -46264,13 +46266,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 +46290,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:
     //
@@ -61627,6 +61652,7 @@
    */
 
   var COLLAB_ERR_MSG = 'flow elements must be children of pools/participants';
+  var DATA_OBJECT_ERR_MSG = 'Data object must be placed within a pool/participant.';
 
   /**
    * @param {EventBus} eventBus
@@ -61652,8 +61678,12 @@
           shape = context.shape,
           target = context.target;
 
-      if (is$5(target, 'bpmn:Collaboration') && is$5(shape, 'bpmn:FlowNode')) {
-        showError(event, translate(COLLAB_ERR_MSG));
+      if (is$5(target, 'bpmn:Collaboration')) {
+        if (is$5(shape, 'bpmn:FlowNode')) {
+          showError(event, translate(COLLAB_ERR_MSG));
+        } else if (is$5(shape, 'bpmn:DataObjectReference')) {
+          showError(event, translate(DATA_OBJECT_ERR_MSG));
+        }
       }
     });
 
@@ -99503,19 +99533,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$2({
@@ -99534,20 +99564,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 {
@@ -99569,7 +99599,7 @@
     return u(Tooltip, {
       ...props,
       value: value,
-      forId: prefixId$9(forId)
+      forId: `bio-properties-panel-${forId}`
     });
   }
   function Tooltip(props) {
@@ -99580,71 +99610,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 = _(null);
     const tooltipRef = _(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}`,
@@ -99654,6 +99665,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
@@ -99666,54 +99678,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 {
@@ -99735,11 +99731,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);
@@ -99771,24 +99767,24 @@
 
   const KEY_LENGTH = 6;
 
-  /**
-   * Create a persistent key factory for plain objects without id.
-   *
-   * @example
-   * ```jsx
-   * function List({ objects }) {
-   *   const getKey = useKeyFactory();
-   *   return (<ol>{
-   *     objects.map(obj => {
-   *       const key = getKey(obj);
-   *       return <li key={key}>obj.name</li>
-   *     })
-   *   }</ol>);
-   * }
-   * ```
-   *
-   * @param {any[]} dependencies
-   * @returns {(element: object) => string}
+  /**
+   * Create a persistent key factory for plain objects without id.
+   *
+   * @example
+   * ```jsx
+   * function List({ objects }) {
+   *   const getKey = useKeyFactory();
+   *   return (<ol>{
+   *     objects.map(obj => {
+   *       const key = getKey(obj);
+   *       return <li key={key}>obj.name</li>
+   *     })
+   *   }</ol>);
+   * }
+   * ```
+   *
+   * @param {any[]} dependencies
+   * @returns {(element: object) => string}
    */
   function useKeyFactory(dependencies = []) {
     const map = F$1(() => new Map(), dependencies);
@@ -99803,20 +99799,20 @@
     return getKey;
   }
 
-  /**
-   * 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 {
@@ -99830,11 +99826,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(value) {
@@ -99845,12 +99841,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 {
@@ -99881,20 +99877,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));
@@ -99948,19 +99944,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 = _(callback);
@@ -100103,13 +100099,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 {
@@ -100148,9 +100144,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);
@@ -100251,9 +100247,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);
@@ -100302,10 +100298,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) {
@@ -100387,22 +100383,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;
@@ -100457,23 +100453,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 {
@@ -100692,12 +100688,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 {
@@ -100923,11 +100919,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 = _(false);
@@ -101005,19 +101001,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 {
@@ -101343,85 +101339,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 {
@@ -101594,11 +101590,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 = _(false);
@@ -101673,15 +101669,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))) {
@@ -101714,20 +101710,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 || {};
@@ -101839,8 +101835,8 @@
 
   const noop$1 = () => {};
 
-  /**
-   * @param {import('../PropertiesPanel').ListGroupDefinition} props
+  /**
+   * @param {import('../PropertiesPanel').ListGroupDefinition} props
    */
   function ListGroup(props) {
     const {
@@ -102032,18 +102028,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 {
@@ -102117,8 +102113,8 @@
       }
     }, [open, hasItems]);
 
-    /**
-     * @param {MouseEvent} event
+    /**
+     * @param {MouseEvent} event
      */
     function addItem(event) {
       event.stopPropagation();
@@ -102310,20 +102306,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 {
@@ -102641,7 +102637,7 @@
     return u("div", {
       class: "bio-properties-panel-textfield",
       children: [u("label", {
-        for: prefixId$a(id),
+        for: prefixId$9(id),
         class: "bio-properties-panel-label",
         children: u(TooltipWrapper, {
           value: tooltip,
@@ -102651,7 +102647,7 @@
         })
       }), u("input", {
         ref: ref,
-        id: prefixId$a(id),
+        id: prefixId$9(id),
         type: "text",
         name: id,
         spellCheck: "false",
@@ -102667,20 +102663,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 {
@@ -102747,7 +102743,7 @@
 
   // helpers /////////////////
 
-  function prefixId$a(id) {
+  function prefixId$9(id) {
     return `bio-properties-panel-${id}`;
   }
 
@@ -102773,20 +102769,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', {
@@ -102796,8 +102792,8 @@
       });
     }
 
-    /**
-     * Close the FEEL popup.
+    /**
+     * Close the FEEL popup.
      */
     close() {
       return this._eventBus.fire('feelPopup._close');
@@ -121636,7 +121632,7 @@
   }
 
   // eslint-disable-next-line no-undef
-  const packageVersion = "2.5.2";
+  const packageVersion = "2.5.3";
 
   /**
    * Registry for element templates.
@@ -122616,109 +122612,6 @@
     return bo;
   }
 
-  class RemoveElementTemplateHandler {
-    constructor(modeling, elementFactory, elementRegistry, canvas, bpmnFactory, replace, commandStack) {
-      this._modeling = modeling;
-      this._elementFactory = elementFactory;
-      this._elementRegistry = elementRegistry;
-      this._canvas = canvas;
-      this._bpmnFactory = bpmnFactory;
-      this._replace = replace;
-      this._commandStack = commandStack;
-    }
-    preExecute(context) {
-      const {
-        element
-      } = context;
-      if (element.parent) {
-        context.newElement = this._removeTemplate(element);
-      } else {
-        context.newElement = this._removeRootTemplate(element);
-      }
-    }
-    _removeTemplate(element) {
-      const replace = this._replace;
-      const businessObject = getBusinessObject$1(element);
-      const type = businessObject.$type,
-        eventDefinitionType = this._getEventDefinitionType(businessObject);
-      const newBusinessObject = this._createBlankBusinessObject(element);
-      return replace.replaceElement(element, {
-        type: type,
-        businessObject: newBusinessObject,
-        eventDefinitionType: eventDefinitionType
-      }, {
-        createElementsBehavior: false
-      });
-    }
-
-    /**
-     * Remove template from a given element.
-     *
-     * @param {djs.model.Base} element
-     *
-     * @return {djs.model.Base} the updated element
-     */
-    _removeRootTemplate(element) {
-      var modeling = this._modeling,
-        elementFactory = this._elementFactory,
-        elementRegistry = this._elementRegistry,
-        canvas = this._canvas;
-
-      // We are inside a collapsed subprocess, move up to the parent before replacing the collapsed object
-      if (isPlane$1(element)) {
-        const shapeId = getShapeIdFromPlane(element);
-        const shape = elementRegistry.get(shapeId);
-        if (shape && shape !== element) {
-          canvas.setRootElement(canvas.findRoot(shape));
-          return this._removeTemplate(shape);
-        }
-      }
-      const businessObject = getBusinessObject$1(element);
-      const type = businessObject.$type;
-      const newBusinessObject = this._createBlankBusinessObject(element);
-      const newRoot = elementFactory.create('root', {
-        type: type,
-        businessObject: newBusinessObject
-      });
-      this._commandStack.execute('canvas.updateRoot', {
-        newRoot: newRoot,
-        oldRoot: element
-      });
-      modeling.moveElements(element.children, {
-        x: 0,
-        y: 0
-      }, newRoot);
-      return newRoot;
-    }
-    _getEventDefinitionType(businessObject) {
-      if (!businessObject.eventDefinitions) {
-        return null;
-      }
-      const eventDefinition = businessObject.eventDefinitions[0];
-      if (!eventDefinition) {
-        return null;
-      }
-      return eventDefinition.$type;
-    }
-    _createBlankBusinessObject(element) {
-      const bpmnFactory = this._bpmnFactory;
-      const bo = getBusinessObject$1(element),
-        newBo = bpmnFactory.create(bo.$type),
-        label = getLabel(element);
-      if (!label) {
-        return newBo;
-      }
-      if (is$5(element, 'bpmn:Group')) {
-        newBo.categoryValueRef = bpmnFactory.create('bpmn:CategoryValue');
-      }
-      setLabel({
-        businessObject: newBo
-      }, label);
-      return newBo;
-    }
-  }
-  RemoveElementTemplateHandler.$inject = ['modeling', 'elementFactory', 'elementRegistry', 'canvas', 'bpmnFactory', 'replace', 'commandStack'];
-
   /**
    * A handler that combines and executes multiple commands.
    *
@@ -126154,6 +126047,109 @@
     return array;
   }
 
+  class RemoveElementTemplateHandler {
+    constructor(modeling, elementFactory, elementRegistry, canvas, bpmnFactory, replace, commandStack) {
+      this._modeling = modeling;
+      this._elementFactory = elementFactory;
+      this._elementRegistry = elementRegistry;
+      this._canvas = canvas;
+      this._bpmnFactory = bpmnFactory;
+      this._replace = replace;
+      this._commandStack = commandStack;
+    }
+    preExecute(context) {
+      const {
+        element
+      } = context;
+      if (element.parent) {
+        context.newElement = this._removeTemplate(element);
+      } else {
+        context.newElement = this._removeRootTemplate(element);
+      }
+    }
+    _removeTemplate(element) {
+      const replace = this._replace;
+      const businessObject = getBusinessObject$1(element);
+      const type = businessObject.$type,
+        eventDefinitionType = this._getEventDefinitionType(businessObject);
+      const newBusinessObject = this._createBlankBusinessObject(element);
+      return replace.replaceElement(element, {
+        type: type,
+        businessObject: newBusinessObject,
+        eventDefinitionType: eventDefinitionType
+      }, {
+        createElementsBehavior: false
+      });
+    }
+
+    /**
+     * Remove template from a given element.
+     *
+     * @param {djs.model.Base} element
+     *
+     * @return {djs.model.Base} the updated element
+     */
+    _removeRootTemplate(element) {
+      var modeling = this._modeling,
+        elementFactory = this._elementFactory,
+        elementRegistry = this._elementRegistry,
+        canvas = this._canvas;
+
+      // We are inside a collapsed subprocess, move up to the parent before replacing the collapsed object
+      if (isPlane$1(element)) {
+        const shapeId = getShapeIdFromPlane(element);
+        const shape = elementRegistry.get(shapeId);
+        if (shape && shape !== element) {
+          canvas.setRootElement(canvas.findRoot(shape));
+          return this._removeTemplate(shape);
+        }
+      }
+      const businessObject = getBusinessObject$1(element);
+      const type = businessObject.$type;
+      const newBusinessObject = this._createBlankBusinessObject(element);
+      const newRoot = elementFactory.create('root', {
+        type: type,
+        businessObject: newBusinessObject
+      });
+      this._commandStack.execute('canvas.updateRoot', {
+        newRoot: newRoot,
+        oldRoot: element
+      });
+      modeling.moveElements(element.children, {
+        x: 0,
+        y: 0
+      }, newRoot);
+      return newRoot;
+    }
+    _getEventDefinitionType(businessObject) {
+      if (!businessObject.eventDefinitions) {
+        return null;
+      }
+      const eventDefinition = businessObject.eventDefinitions[0];
+      if (!eventDefinition) {
+        return null;
+      }
+      return eventDefinition.$type;
+    }
+    _createBlankBusinessObject(element) {
+      const bpmnFactory = this._bpmnFactory;
+      const bo = getBusinessObject$1(element),
+        newBo = bpmnFactory.create(bo.$type),
+        label = getLabel(element);
+      if (!label) {
+        return newBo;
+      }
+      if (is$5(element, 'bpmn:Group')) {
+        newBo.categoryValueRef = bpmnFactory.create('bpmn:CategoryValue');
+      }
+      setLabel({
+        businessObject: newBo
+      }, label);
+      return newBo;
+    }
+  }
+  RemoveElementTemplateHandler.$inject = ['modeling', 'elementFactory', 'elementRegistry', 'canvas', 'bpmnFactory', 'replace', 'commandStack'];
+
   class ElementTemplatesCommands {
     constructor(commandStack, elementTemplates, eventBus) {
       commandStack.registerHandler('element-templates.multi-command-executor', MultiCommandHandler);