camunda-bpmn-js 4.12.0 → 4.13.0

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

@@ -82,9 +82,9 @@
    *
    * @param {Seed} seed
    */
-  function Ids(seed) {
-    if (!(this instanceof Ids)) {
-      return new Ids(seed);
+  function Ids$1(seed) {
+    if (!(this instanceof Ids$1)) {
+      return new Ids$1(seed);
     }
     seed = seed || [128, 36, 1];
     this._seed = seed.length ? hat_1.rack(seed[0], seed[1], seed[2]) : seed;
@@ -97,7 +97,7 @@
    *
    * @return {String} id
    */
-  Ids.prototype.next = function (element) {
+  Ids$1.prototype.next = function (element) {
     return this._seed(element || true);
   };
 
@@ -108,7 +108,7 @@
    *
    * @return {String} id
    */
-  Ids.prototype.nextPrefixed = function (prefix, element) {
+  Ids$1.prototype.nextPrefixed = function (prefix, element) {
     var id;
     do {
       id = prefix + this.next(true);
@@ -127,7 +127,7 @@
    * @param {String} id
    * @param {String} [element] element the id is claimed by
    */
-  Ids.prototype.claim = function (id, element) {
+  Ids$1.prototype.claim = function (id, element) {
     this._seed.set(id, element || true);
   };
 
@@ -137,7 +137,7 @@
    * @param  {String} id
    * @return {Boolean}
    */
-  Ids.prototype.assigned = function (id) {
+  Ids$1.prototype.assigned = function (id) {
     return this._seed.get(id) || false;
   };
 
@@ -146,14 +146,14 @@
    *
    * @param  {String} id the id to unclaim
    */
-  Ids.prototype.unclaim = function (id) {
+  Ids$1.prototype.unclaim = function (id) {
     delete this._seed.hats[id];
   };
 
   /**
    * Clear all claimed ids.
    */
-  Ids.prototype.clear = function () {
+  Ids$1.prototype.clear = function () {
     var hats = this._seed.hats,
       id;
     for (id in hats) {
@@ -5449,6 +5449,8 @@
       element = this._elementRegistry.get(element);
     }
 
+    element.markers = element.markers || new Set();
+
     // we need to access all
     container = this._elementRegistry._elements[element.id];
 
@@ -5461,8 +5463,10 @@
 
         // invoke either addClass or removeClass based on mode
         if (add) {
+          element.markers.add(marker);
           classes(gfx).add(marker);
         } else {
+          element.markers.delete(marker);
           classes(gfx).remove(marker);
         }
       }
@@ -5530,9 +5534,11 @@
       element = this._elementRegistry.get(element);
     }
 
-    const gfx = this.getGraphics(element);
+    if (!element.markers) {
+      return false;
+    }
 
-    return classes(gfx).has(marker);
+    return element.markers.has(marker);
   };
 
   /**
@@ -17890,7 +17896,7 @@
 
     // attach ids to moddle to be able to track and validated ids in the BPMN 2.0
     // XML document tree
-    moddle.ids = new Ids([ 32, 36, 1 ]);
+    moddle.ids = new Ids$1([ 32, 36, 1 ]);
 
     return moddle;
   };
@@ -18508,7 +18514,7 @@
     return has$3(overrides, 'height') ? overrides.height : bounds.height;
   }
 
-  var markerIds = new Ids();
+  var markerIds = new Ids$1();
 
   var ELEMENT_LABEL_DISTANCE$1 = 10,
       INNER_OUTER_DIST = 3,
@@ -23963,6 +23969,7 @@
    * @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
    * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
    * @typedef {import('diagram-js/lib/features/overlays/Overlays').default} Overlays
+   * @typedef {import('diagram-js/lib/i18n/translate/translate').default} Translate
    *
    * @typedef {import('../../model/Types').Element} Element
    * @typedef {import('../../model/Types').Parent} Parent
@@ -23979,9 +23986,10 @@
    * @param {EventBus} eventBus
    * @param {ElementRegistry} elementRegistry
    * @param {Overlays} overlays
+   * @param {Translate} translate
    */
   function DrilldownOverlayBehavior(
-      canvas, eventBus, elementRegistry, overlays
+      canvas, eventBus, elementRegistry, overlays, translate
   ) {
     CommandInterceptor$1.call(this, eventBus);
 
@@ -23989,6 +23997,7 @@
     this._eventBus = eventBus;
     this._elementRegistry = elementRegistry;
     this._overlays = overlays;
+    this._translate = translate;
 
     var self = this;
 
@@ -24122,7 +24131,8 @@
    */
   DrilldownOverlayBehavior.prototype._addOverlay = function(element) {
     var canvas = this._canvas,
-        overlays = this._overlays;
+        overlays = this._overlays,
+        bo = getBusinessObject$2(element);
 
     var existingOverlays = overlays.get({ element: element, type: 'drilldown' });
 
@@ -24130,7 +24140,10 @@
       this._removeOverlay(element);
     }
 
-    var button = domify$1('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
+    var button = domify$1('<button type="button" class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>'),
+        elementName = bo.get('name') || bo.get('id'),
+        title = this._translate('Open {element}', { element: elementName });
+    button.setAttribute('title', title);
 
     button.addEventListener('click', function() {
       canvas.setRootElement(canvas.findRoot(getPlaneIdFromShape(element)));
@@ -24160,7 +24173,8 @@
     'canvas',
     'eventBus',
     'elementRegistry',
-    'overlays'
+    'overlays',
+    'translate'
   ];
 
   var DrilldownModdule = {
@@ -26955,6 +26969,133 @@
     alignElements: [ 'type', AlignElements$1 ]
   };
 
+  const Ids = new IdGenerator();
+
+
+  /**
+   * @typedef { {
+   *   promise: Promise<unknown>,
+   *   executionId: number
+   * } } ScheduledTask
+   */
+
+  /**
+   * A utility that allows you to schedule async tasks.
+   *
+   * @class
+   * @constructor
+   *
+   * @param { import('../core/EventBus').default } eventBus
+   */
+  function Scheduler(eventBus) {
+
+    /**
+     * @type { Record<string, ScheduledTask> }
+     */
+    this._scheduled = {};
+
+    eventBus.on('diagram.destroy', () => {
+      Object.keys(this._scheduled).forEach(id => {
+        this.cancel(id);
+      });
+    });
+  }
+
+  Scheduler.$inject = [ 'eventBus' ];
+
+  /**
+   * Schedule execution of a task in the next tick.
+   *
+   * Call with an id to ensure only the latest call will be executed.
+   *
+   * @template T
+
+   * @param {(...args: any[]) => T} taskFn function to be executed
+   * @param {string} [id] identifying the task to ensure uniqueness
+   *
+   * @return Promise<T> result of the executed task
+   */
+  Scheduler.prototype.schedule = function(taskFn, id = Ids.next()) {
+
+    this.cancel(id);
+
+    const newScheduled = this._schedule(taskFn, id);
+
+    this._scheduled[id] = newScheduled;
+
+    return newScheduled.promise;
+  };
+
+  Scheduler.prototype._schedule = function(taskFn, id) {
+
+    const {
+      promise,
+      resolve,
+      reject
+    } = defer();
+
+    const executionId = requestAnimationFrame(() => {
+      try {
+        resolve(taskFn());
+      } catch (error) {
+        reject(error);
+      }
+    });
+
+    return {
+      executionId,
+      promise
+    };
+  };
+
+  /**
+   * Cancel a previously scheduled task.
+   *
+   * @param {string} id
+   */
+  Scheduler.prototype.cancel = function(id) {
+
+    const scheduled = this._scheduled[id];
+
+    if (scheduled) {
+      this._cancel(scheduled);
+
+      this._scheduled[id] = null;
+    }
+  };
+
+  Scheduler.prototype._cancel = function(scheduled) {
+    cancelAnimationFrame(scheduled.executionId);
+  };
+
+  /**
+   * @return { {
+   *   promise: Promise,
+   *   resolve: Function,
+   *   reject: Function
+   * } }
+   */
+  function defer() {
+
+    let resolve;
+    let reject;
+
+    const promise = new Promise((_resolve, _reject) => {
+      resolve = _resolve;
+      reject = _reject;
+    });
+
+    return {
+      promise,
+      resolve,
+      reject
+    };
+  }
+
+  var SchedulerModule = {
+    scheduler: [ 'type', Scheduler ]
+  };
+
   var MARKER_HIDDEN$1 = 'djs-element-hidden';
 
   /**
@@ -26966,6 +27107,7 @@
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/ElementRegistry').default} ElementRegistry
    * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../../scheduler/Scheduler').default} Scheduler
    *
    * @typedef {import('./ContextPadProvider').default} ContextPadProvider
    * @typedef {import('./ContextPadProvider').ContextPadEntries} ContextPadEntries
@@ -26991,12 +27133,14 @@
    * @param {Canvas} canvas
    * @param {ElementRegistry} elementRegistry
    * @param {EventBus} eventBus
+   * @param {Scheduler} scheduler
    */
-  function ContextPad(canvas, elementRegistry, eventBus) {
+  function ContextPad(canvas, elementRegistry, eventBus, scheduler) {
 
     this._canvas = canvas;
     this._elementRegistry = elementRegistry;
     this._eventBus = eventBus;
+    this._scheduler = scheduler;
 
     this._current = null;
 
@@ -27006,7 +27150,8 @@
   ContextPad.$inject = [
     'canvas',
     'elementRegistry',
-    'eventBus'
+    'eventBus',
+    'scheduler'
   ];
 
 
@@ -27041,12 +27186,12 @@
         return;
       }
 
-      var { target } = current;
+      var target = current.target;
 
       var targets = isArray$5(target) ? target : [ target ];
 
       var targetsChanged = targets.filter(function(element) {
-        return includes$8(elements, element);
+        return elements.includes(element);
       });
 
       if (targetsChanged.length) {
@@ -27067,11 +27212,25 @@
       }
     });
 
-    this._eventBus.on('canvas.viewbox.changed', () => {
-      this._updatePosition();
+    this._eventBus.on('canvas.viewbox.changed', function() {
+      self._updatePosition();
     });
 
     this._eventBus.on('element.marker.update', function(event) {
+      if (!self.isOpen()) {
+        return;
+      }
+
+      var element = event.element;
+
+      var current = self._current;
+
+      var targets = isArray$5(current.target) ? current.target : [ current.target ];
+
+      if (!targets.includes(element)) {
+        return;
+      }
+
       self._updateVisibility();
     });
 
@@ -27079,7 +27238,7 @@
   };
 
   ContextPad.prototype._createContainer = function() {
-    const container = domify$1('<div class="djs-context-pad-parent"></div>');
+    var container = domify$1('<div class="djs-context-pad-parent"></div>');
 
     this._canvas.getContainer().appendChild(container);
 
@@ -27163,6 +27322,7 @@
    * @param {boolean} [autoActivate=false]
    */
   ContextPad.prototype.trigger = function(action, event, autoActivate) {
+    var self = this;
 
     var entry,
         originalEvent,
@@ -27176,8 +27336,8 @@
     originalEvent = event.originalEvent || event;
 
     if (action === 'mouseover') {
-      this._timeout = setTimeout(() => {
-        this._mouseout = this.triggerEntry(entry, 'hover', originalEvent, autoActivate);
+      this._timeout = setTimeout(function() {
+        self._mouseout = self.triggerEntry(entry, 'hover', originalEvent, autoActivate);
       }, HOVER_DELAY);
 
       return;
@@ -27438,7 +27598,7 @@
       return (
         target.length === currentTarget.length &&
         every$1(target, function(element) {
-          return includes$8(currentTarget, element);
+          return currentTarget.includes(element);
         })
       );
     } else {
@@ -27498,12 +27658,12 @@
    */
   ContextPad.prototype._getPosition = function(target) {
     if (!isArray$5(target) && isConnection$2(target)) {
-      const viewbox = this._canvas.viewbox();
+      var viewbox = this._canvas.viewbox();
 
-      const lastWaypoint = getLastWaypoint(target);
+      var lastWaypoint = getLastWaypoint(target);
 
-      const x = lastWaypoint.x * viewbox.scale - viewbox.x * viewbox.scale,
-            y = lastWaypoint.y * viewbox.scale - viewbox.y * viewbox.scale;
+      var x = lastWaypoint.x * viewbox.scale - viewbox.x * viewbox.scale,
+          y = lastWaypoint.y * viewbox.scale - viewbox.y * viewbox.scale;
 
       return {
         left: x + CONTEXT_PAD_MARGIN * this._canvas.zoom(),
@@ -27557,25 +27717,30 @@
    * using the `djs-element-hidden` or `djs-label-hidden` markers.
    */
   ContextPad.prototype._updateVisibility = function() {
-    if (!this.isOpen()) {
-      return;
-    }
 
-    var self = this;
+    const updateFn = () => {
+      if (!this.isOpen()) {
+        return;
+      }
 
-    var target = this._current.target;
+      var self = this;
 
-    var targets = isArray$5(target) ? target : [ target ];
+      var target = this._current.target;
 
-    var isHidden = targets.some(function(target) {
-      return self._canvas.hasMarker(target, MARKER_HIDDEN$1);
-    });
+      var targets = isArray$5(target) ? target : [ target ];
 
-    if (isHidden) {
-      self.hide();
-    } else {
-      self.show();
-    }
+      var isHidden = targets.some(function(target) {
+        return self._canvas.hasMarker(target, MARKER_HIDDEN$1);
+      });
+
+      if (isHidden) {
+        self.hide();
+      } else {
+        self.show();
+      }
+    };
+
+    this._scheduler.schedule(updateFn, 'ContextPad#_updateVisibility');
   };
 
   /**
@@ -27586,13 +27751,15 @@
    * @returns {Rect & RectTRBL}
    */
   ContextPad.prototype._getTargetBounds = function(target) {
+    var self = this;
+
     var elements = isArray$5(target) ? target : [ target ];
 
-    var elementsGfx = elements.map((element) => {
-      return this._canvas.getGraphics(element);
+    var elementsGfx = elements.map(function(element) {
+      return self._canvas.getGraphics(element);
     });
 
-    return elementsGfx.reduce((bounds, elementGfx) => {
+    return elementsGfx.reduce(function(bounds, elementGfx) {
       const elementBounds = elementGfx.getBoundingClientRect();
 
       bounds.top = Math.min(bounds.top, elementBounds.top);
@@ -27627,16 +27794,6 @@
     });
   }
 
-  /**
-   * @param {any[]} array
-   * @param {any} item
-   *
-   * @return {boolean}
-   */
-  function includes$8(array, item) {
-    return array.indexOf(item) !== -1;
-  }
-
   function getLastWaypoint(connection) {
     return connection.waypoints[connection.waypoints.length - 1];
   }
@@ -27663,6 +27820,7 @@
   var ContextPadModule$1 = {
     __depends__: [
       InteractionEventsModule$1,
+      SchedulerModule,
       OverlaysModule
     ],
     contextPad: [ 'type', ContextPad ]
@@ -27802,7 +27960,6 @@
       onMouseEnter=${ onMouseEnter }
       onMouseLeave=${ onMouseLeave }
       onDragStart=${ (event) => onAction(event, entry, 'dragstart') }
-      aria-role="button"
       draggable=${ true }
     >
       <div class="djs-popup-entry-content">
@@ -36413,7 +36570,7 @@
       shapes.forEach(function(shape, index) {
         var host = shape.host;
 
-        if (shouldReplace(shape, includes$7(shapes, host) ? host : newHost)) {
+        if (shouldReplace(shape, includes$6(shapes, host) ? host : newHost)) {
           shapes[ index ] = self._replaceShape(shape);
         }
       });
@@ -36459,7 +36616,7 @@
     return !isLabel$2(shape) && is$6(shape, 'bpmn:BoundaryEvent') && !host;
   }
 
-  function includes$7(array, item) {
+  function includes$6(array, item) {
     return array.indexOf(item) !== -1;
   }
 
@@ -42363,7 +42520,7 @@
    *
    * @return {boolean}
    */
-  function includes$6(elements, element) {
+  function includes$5(elements, element) {
     return (elements && element) && elements.indexOf(element) !== -1;
   }
 
@@ -42378,7 +42535,7 @@
       return true;
     }
 
-    if (is$6(element, 'bpmn:Lane') && !includes$6(elements, element.parent)) {
+    if (is$6(element, 'bpmn:Lane') && !includes$5(elements, element.parent)) {
       return false;
     }
 
@@ -45058,12 +45215,12 @@
         var source = connection.source,
             target = connection.target;
 
-        if (includes$5(movingShapes, source) ||
-          includes$5(movingShapes, target) ||
-          includes$5(resizingShapes, source) ||
-          includes$5(resizingShapes, target)) {
+        if (includes$4(movingShapes, source) ||
+          includes$4(movingShapes, target) ||
+          includes$4(resizingShapes, source) ||
+          includes$4(resizingShapes, target)) {
 
-          if (!includes$5(waypointsUpdatingConnections, connection)) {
+          if (!includes$4(waypointsUpdatingConnections, connection)) {
             waypointsUpdatingConnections.push(connection);
           }
         }
@@ -45073,7 +45230,7 @@
     return waypointsUpdatingConnections;
   }
 
-  function includes$5(array, item) {
+  function includes$4(array, item) {
     return array.indexOf(item) !== -1;
   }
 
@@ -45477,7 +45634,7 @@
     forEach$3(attachers, function(attacher) {
       var host = attacher.host;
 
-      if (includes$4(allShapes, host)) {
+      if (includes$3(allShapes, host)) {
         moveShape(attacher);
       }
     });
@@ -45490,8 +45647,8 @@
           target = connection.target,
           label = connection.label;
 
-      if (includes$4(allShapes, source)
-        && includes$4(allShapes, target)
+      if (includes$3(allShapes, source)
+        && includes$3(allShapes, target)
         && label) {
         moveShape(label);
       }
@@ -45596,13 +45753,13 @@
       var nonMovingResizingChildren = filter$1(children, function(child) {
         return !isConnection$2(child) &&
           !isLabel$2(child) &&
-          !includes$4(movingShapes, child) &&
-          !includes$4(resizingShapes, child);
+          !includes$3(movingShapes, child) &&
+          !includes$3(resizingShapes, child);
       });
 
       // find children that are moving
       var movingChildren = filter$1(children, function(child) {
-        return !isConnection$2(child) && !isLabel$2(child) && includes$4(movingShapes, child);
+        return !isConnection$2(child) && !isLabel$2(child) && includes$3(movingShapes, child);
       });
 
       var minOrMax,
@@ -45653,7 +45810,7 @@
 
       if (attachers && attachers.length) {
         attachers.forEach(function(attacher) {
-          if (includes$4(movingShapes, attacher)) {
+          if (includes$3(movingShapes, attacher)) {
             movingAttachers.push(attacher);
           } else {
             nonMovingAttachers.push(attacher);
@@ -45728,7 +45885,7 @@
     return spaceToolConstraints;
   }
 
-  function includes$4(array, item) {
+  function includes$3(array, item) {
     return array.indexOf(item) !== -1;
   }
 
@@ -46999,7 +47156,7 @@
         attachers = filter$1(shapes, function(shape) {
           var host = shape.host;
 
-          return isAttacher(shape) && !includes$3(shapes, host);
+          return isAttacher(shape) && !includes$2(shapes, host);
         });
       }
 
@@ -47195,7 +47352,7 @@
     return !!shape.host;
   }
 
-  function includes$3(array, item) {
+  function includes$2(array, item) {
     return array.indexOf(item) !== -1;
   }
 
@@ -50288,7 +50445,7 @@
           axis = getAxisFromDirection(direction),
           layoutHints = {};
 
-      if (includes$2(affectedShapes, source) && includes$2(affectedShapes, target)) {
+      if (includes$1(affectedShapes, source) && includes$1(affectedShapes, target)) {
 
         // move waypoints
         waypoints = map$3(waypoints, function(waypoint) {
@@ -50310,18 +50467,18 @@
         self._modeling.updateWaypoints(connection, waypoints, {
           labelBehavior: false
         });
-      } else if (includes$2(affectedShapes, source) || includes$2(affectedShapes, target)) {
+      } else if (includes$1(affectedShapes, source) || includes$1(affectedShapes, target)) {
 
         // re-layout connection with moved start/end
-        if (includes$2(movingShapes, source)) {
+        if (includes$1(movingShapes, source)) {
           layoutHints.connectionStart = getMovedSourceAnchor(connection, source, delta);
-        } else if (includes$2(movingShapes, target)) {
+        } else if (includes$1(movingShapes, target)) {
           layoutHints.connectionEnd = getMovedTargetAnchor(connection, target, delta);
-        } else if (includes$2(resizingShapes, source)) {
+        } else if (includes$1(resizingShapes, source)) {
           layoutHints.connectionStart = getResizedSourceAnchor(
             connection, source, oldBounds[source.id]
           );
-        } else if (includes$2(resizingShapes, target)) {
+        } else if (includes$1(resizingShapes, target)) {
           layoutHints.connectionEnd = getResizedTargetAnchor(
             connection, target, oldBounds[target.id]
           );
@@ -50375,7 +50532,7 @@
     }
   }
 
-  function includes$2(array, item) {
+  function includes$1(array, item) {
     return array.indexOf(item) !== -1;
   }
 
@@ -56875,9 +57032,7 @@
     });
 
     if (isArray$5(baseAllowed)) {
-      return every$1(baseAllowed, function(element) {
-        return includes$1(baseAllowed, element);
-      });
+      return every$1(elements, el => baseAllowed.includes(el));
     }
 
     return baseAllowed;
@@ -56895,7 +57050,6 @@
         connect = this._connect,
         create = this._create,
         popupMenu = this._popupMenu,
-        rules = this._rules,
         autoPlace = this._autoPlace,
         translate = this._translate,
         appendPreview = this._appendPreview;
@@ -56903,6 +57057,10 @@
     var actions = {};
 
     if (element.type === 'label') {
+      if (this._isDeleteAllowed([ element ])) {
+        assign$3(actions, deleteAction());
+      }
+
       return actions;
     }
 
@@ -56916,6 +57074,19 @@
       modeling.removeElements([ element ]);
     }
 
+    function deleteAction() {
+      return {
+        'delete': {
+          group: 'edit',
+          className: 'bpmn-icon-trash',
+          title: translate('Delete'),
+          action: {
+            click: removeElement
+          }
+        }
+      };
+    }
+
     function getReplaceMenuPosition(element) {
 
       var Y_OFFSET = 5;
@@ -57240,26 +57411,8 @@
       });
     }
 
-    // delete element entry, only show if allowed by rules
-    var deleteAllowed = rules.allowed('elements.delete', { elements: [ element ] });
-
-    if (isArray$5(deleteAllowed)) {
-
-      // was the element returned as a deletion candidate?
-      deleteAllowed = deleteAllowed[0] === element;
-    }
-
-    if (deleteAllowed) {
-      assign$3(actions, {
-        'delete': {
-          group: 'edit',
-          className: 'bpmn-icon-trash',
-          title: translate('Delete'),
-          action: {
-            click: removeElement
-          }
-        }
-      });
+    if (this._isDeleteAllowed([ element ])) {
+      assign$3(actions, deleteAction());
     }
 
     return actions;
@@ -57290,10 +57443,6 @@
     return isType && isDefinition;
   }
 
-  function includes$1(array, item) {
-    return array.indexOf(item) !== -1;
-  }
-
   var ContextPadModule = {
     __depends__: [
       AppendPreviewModule,
@@ -98413,6 +98562,24 @@
     return T$1((...args) => callbackRef.current(...args), []);
   }
 
+  function useElementVisible(element) {
+    const [visible, setVisible] = h(!!element && !!element.clientHeight);
+    y(() => {
+      if (!element) return;
+      const resizeObserver = new ResizeObserver(([entry]) => {
+        requestAnimationFrame(() => {
+          const newVisible = !!entry.contentRect.height;
+          if (newVisible !== visible) {
+            setVisible(newVisible);
+          }
+        });
+      });
+      resizeObserver.observe(element);
+      return () => resizeObserver.disconnect();
+    }, [element, visible]);
+    return visible;
+  }
+
   function Group(props) {
     const {
       element,
@@ -100890,6 +101057,7 @@
     } = props;
     const [localValue, setLocalValue] = h(value);
     const ref = useShowEntryEvent(id);
+    const visible = useElementVisible(ref.current);
     const handleInputCallback = F$1(() => {
       return debounce(target => onInput(target.value.length ? target.value : undefined));
     }, [onInput, debounce]);
@@ -100901,6 +101069,9 @@
     y(() => {
       autoResize && resizeToContents(ref.current);
     }, []);
+    y(() => {
+      visible && autoResize && resizeToContents(ref.current);
+    }, [visible]);
     p$1(() => {
       if (value === localValue) {
         return;
@@ -105886,7 +106057,7 @@
    * generate a semantic id with given prefix
    */
   function nextId$1(prefix) {
-    const ids = new Ids([32, 32, 1]);
+    const ids = new Ids$1([32, 32, 1]);
     return ids.nextPrefixed(prefix);
   }
   function getRoot$1(businessObject) {
@@ -111278,13 +111449,14 @@
     const getValue = field => {
       return field.string || field.stringValue || field.expression;
     };
-    return TextfieldEntry({
+    return TextAreaEntry({
       element: field,
       id: idPrefix + '-value',
       label: translate('Value'),
       getValue,
       setValue,
-      debounce
+      debounce,
+      autoResize: true
     });
   }
 
@@ -119620,7 +119792,7 @@
    * generate a semantic id with given prefix
    */
   function nextId(prefix) {
-    const ids = new Ids([32, 32, 1]);
+    const ids = new Ids$1([32, 32, 1]);
     return ids.nextPrefixed(prefix);
   }
   function getRoot(businessObject) {