@bpmn-io/form-js-editor 1.3.0-alpha.0 → 1.3.1

package/dist/index.cjs

@@ -537,10 +537,10 @@ function invokeFunction(fn, args) {
   return fn.apply(null, args);
 }
 
-/**
- * A factory to create a configurable debouncer.
- *
- * @param {number|boolean} [config=true]
+/**
+ * A factory to create a configurable debouncer.
+ *
+ * @param {number|boolean} [config=true]
  */
 function DebounceFactory(config = true) {
   const timeout = typeof config === 'number' ? config : config ? 300 : 0;
@@ -553,11 +553,11 @@ function DebounceFactory(config = true) {
 DebounceFactory.$inject = ['config.debounce'];
 
 class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
-  /**
-   * Updates a form fields id.
-   *
-   * @param {Object} formField
-   * @param {string} newId
+  /**
+   * Updates a form fields id.
+   *
+   * @param {Object} formField
+   * @param {string} newId
    */
   updateId(formField, newId) {
     this._validateId(newId);
@@ -578,13 +578,13 @@ class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
     }
   }
 
-  /**
-   * Validate the suitability of the given id and signals a problem
-   * with an exception.
-   *
-   * @param {string} id
-   *
-   * @throws {Error} if id is empty or already assigned
+  /**
+   * Validate the suitability of the given id and signals a problem
+   * with an exception.
+   *
+   * @param {string} id
+   *
+   * @throws {Error} if id is empty or already assigned
    */
   _validateId(id) {
     if (!id) {
@@ -601,11 +601,11 @@ const MAX_COLUMNS = 16;
 const MIN_COLUMNS = 2;
 const MAX_FIELDS_PER_ROW = 4;
 class FormLayoutValidator {
-  /**
-   * @constructor
-   *
-   * @param { import('./FormLayouter').default } formLayouter
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   *
+   * @param { import('./FormLayouter').default } formLayouter
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formLayouter, formFieldRegistry) {
     this._formLayouter = formLayouter;
@@ -676,21 +676,21 @@ function editorFormFieldClasses(type, {
   });
 }
 
-/**
- * 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
- *
- * @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
+ *
+ * @return {Function} drag start callback function
  */
 function createDragger$1(fn) {
   let self;
@@ -731,12 +731,12 @@ function createDragger$1(fn) {
   return onDragStart;
 }
 
-/**
- * Throttle function call according UI update cycle.
- *
- * @param  {Function} fn
- *
- * @return {Function} throttled fn
+/**
+ * Throttle function call according UI update cycle.
+ *
+ * @param  {Function} fn
+ *
+ * @return {Function} throttled fn
  */
 function throttle(fn) {
   let active = false;
@@ -770,11 +770,11 @@ const DragAndDropContext = preact.createContext({
 });
 var DragAndDropContext$1 = DragAndDropContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService$1(type, strict) {}
 const FormEditorContext = preact.createContext({
@@ -1124,23 +1124,23 @@ var Slot = (props => {
   return fillsAndSeparators;
 });
 
-/**
- * Creates a Fragment for a fill.
- *
- * @param {Object} fill Fill to be rendered
- * @returns {Object} Preact Fragment containing fill's children
+/**
+ * Creates a Fragment for a fill.
+ *
+ * @param {Object} fill Fill to be rendered
+ * @returns {Object} Preact Fragment containing fill's children
  */
 const FillFragment = fill => jsxRuntime.jsx(preact.Fragment, {
   children: fill.children
 }, fill.id);
 
-/**
- * Creates an array of fills, with separators inserted between groups.
- *
- * @param {Array} groups Groups of fills
- * @param {Function} fillRenderer Function to create a fill
- * @param {Function} separatorRenderer Function to create a separator
- * @returns {Array} Array of fills and separators
+/**
+ * Creates an array of fills, with separators inserted between groups.
+ *
+ * @param {Array} groups Groups of fills
+ * @param {Function} fillRenderer Function to create a fill
+ * @param {Function} separatorRenderer Function to create a separator
+ * @returns {Array} Array of fills and separators
  */
 const buildFills = (groups, fillRenderer, separatorRenderer) => {
   const result = [];
@@ -1158,8 +1158,8 @@ const buildFills = (groups, fillRenderer, separatorRenderer) => {
   return result;
 };
 
-/**
- * Groups fills by group name property.
+/**
+ * Groups fills by group name property.
  */
 const _groupByGroupName = fills => {
   const groups = [];
@@ -1179,8 +1179,8 @@ const _groupByGroupName = fills => {
   return Object.keys(groupsById).sort().map(id => groupsById[id]);
 };
 
-/**
- * Compares fills by priority.
+/**
+ * Compares fills by priority.
  */
 const _comparePriority = (a, b) => {
   return (b.priority || 0) - (a.priority || 0);
@@ -1408,20 +1408,20 @@ const DRAG_NO_DROP_CLS = 'fjs-no-drop';
 const DRAG_NO_MOVE_CLS = 'fjs-no-move';
 const ERROR_DROP_CLS = 'fjs-error-drop';
 
-/**
- * @typedef { { id: String, components: Array<any> } } FormRow
+/**
+ * @typedef { { id: String, components: Array<any> } } FormRow
  */
 
 class Dragging {
-  /**
-   * @constructor
-   *
-   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('../../core/FormLayouter').default } formLayouter
-   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
-   * @param { import('../../core/EventBus').default } eventBus
-   * @param { import('../modeling/Modeling').default } modeling
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+  /**
+   * @constructor
+   *
+   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('../../core/FormLayouter').default } formLayouter
+   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
+   * @param { import('../../core/EventBus').default } eventBus
+   * @param { import('../modeling/Modeling').default } modeling
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
   constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling, pathRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -1432,13 +1432,13 @@ class Dragging {
     this._pathRegistry = pathRegistry;
   }
 
-  /**
-   * Calculcates position in form schema given the dropped place.
-   *
-   * @param { FormRow } targetRow
-   * @param { any } targetFormField
-   * @param { HTMLElement } sibling
-   * @returns { number }
+  /**
+   * Calculcates position in form schema given the dropped place.
+   *
+   * @param { FormRow } targetRow
+   * @param { any } targetFormField
+   * @param { HTMLElement } sibling
+   * @returns { number }
    */
   getTargetIndex(targetRow, targetFormField, sibling) {
     /** @type HTMLElement */
@@ -1579,8 +1579,8 @@ class Dragging {
     }
   }
 
-  /**
-   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+  /**
+   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
    */
   createDragulaInstance(options) {
     const {
@@ -1994,7 +1994,7 @@ function DebugColumns(props) {
     return null;
   }
   return jsxRuntime.jsx("div", {
-    style: "width: fit-content;\r padding: 2px 6px;\r height: 16px;\r background: var(--color-blue-205-100-95);\r display: flex;\r justify-content: center;\r align-items: center;\r position: absolute;\r bottom: -2px;\r z-index: 2;\r font-size: 10px;\r right: 3px;",
+    style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
     class: "fjs-debug-columns",
     children: (field.layout || {}).columns || 'auto'
   });
@@ -3065,10 +3065,10 @@ function updateRow(formField, rowId) {
 }
 
 class AddFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3129,10 +3129,10 @@ class AddFormFieldHandler {
 AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class EditFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3195,11 +3195,11 @@ class EditFormFieldHandler {
 EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class MoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
   constructor(formEditor, formFieldRegistry, pathRegistry) {
     this._formEditor = formEditor;
@@ -3304,10 +3304,10 @@ class MoveFormFieldHandler {
 MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry'];
 
 class RemoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3367,9 +3367,9 @@ class RemoveFormFieldHandler {
 RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class UpdateIdClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formFieldRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -3402,9 +3402,9 @@ class UpdateIdClaimHandler {
 UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 
 class UpdateKeyClaimHandler {
-  /**
-   * @constructor
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+  /**
+   * @constructor
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
   constructor(pathRegistry) {
     this._pathRegistry = pathRegistry;
@@ -3445,9 +3445,9 @@ class UpdateKeyClaimHandler {
 UpdateKeyClaimHandler.$inject = ['pathRegistry'];
 
 class UpdatePathClaimHandler {
-  /**
-   * @constructor
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+  /**
+   * @constructor
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
   constructor(pathRegistry) {
     this._pathRegistry = pathRegistry;
@@ -4009,8 +4009,8 @@ class ValidateBehavior extends CommandInterceptor {
   constructor(eventBus) {
     super(eventBus);
 
-    /**
-     * Remove custom validation if <validationType> is about to be added.
+    /**
+     * Remove custom validation if <validationType> is about to be added.
      */
     this.preExecute('formField.edit', function (context) {
       const {
@@ -4590,22 +4590,22 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
-/**
- * Base class for sectionable UI modules.
- *
- * @property {EventBus} _eventBus - EventBus instance used for event handling.
- * @property {string} managerType - Type of the render manager. Used to form event names.
- *
- * @class SectionModuleBase
+/**
+ * Base class for sectionable UI modules.
+ *
+ * @property {EventBus} _eventBus - EventBus instance used for event handling.
+ * @property {string} managerType - Type of the render manager. Used to form event names.
+ *
+ * @class SectionModuleBase
  */
 class SectionModuleBase {
-  /**
-   * Create a SectionModuleBase instance.
-   *
-   * @param {any} eventBus - The EventBus instance used for event handling.
-   * @param {string} sectionKey - The type of render manager. Used to form event names.
-   *
-   * @constructor
+  /**
+   * Create a SectionModuleBase instance.
+   *
+   * @param {any} eventBus - The EventBus instance used for event handling.
+   * @param {string} sectionKey - The type of render manager. Used to form event names.
+   *
+   * @constructor
    */
   constructor(eventBus, sectionKey) {
     this._eventBus = eventBus;
@@ -4618,10 +4618,10 @@ class SectionModuleBase {
     });
   }
 
-  /**
-   * Attach the managed section to a parent node.
-   *
-   * @param {HTMLElement} container - The parent node to attach to.
+  /**
+   * Attach the managed section to a parent node.
+   *
+   * @param {HTMLElement} container - The parent node to attach to.
    */
   attachTo(container) {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
@@ -4629,22 +4629,22 @@ class SectionModuleBase {
     }));
   }
 
-  /**
-   * Detach the managed section from its parent node.
+  /**
+   * Detach the managed section from its parent node.
    */
   detach() {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.detach`));
   }
 
-  /**
-   * Reset the managed section to its initial state.
+  /**
+   * Reset the managed section to its initial state.
    */
   reset() {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
   }
 
-  /**
-   * Circumvents timing issues.
+  /**
+   * Circumvents timing issues.
    */
   _onceSectionRendered(callback) {
     if (this.isSectionRendered) {
@@ -4895,18 +4895,25 @@ function Tooltip(props) {
     parent
   } = props;
   const [visible, setShow] = hooks.useState(false);
+  const [focusedViaKeyboard, setFocusedViaKeyboard] = hooks.useState(false);
   let timeout = null;
   const wrapperRef = hooks.useRef(null);
   const tooltipRef = hooks.useRef(null);
   const showTooltip = async event => {
-    const show = () => !visible && setShow(true);
-    if (event instanceof MouseEvent) {
-      timeout = setTimeout(show, 200);
-    } else {
-      show();
+    const show = () => setShow(true);
+    if (!visible && !timeout) {
+      if (event instanceof MouseEvent) {
+        timeout = setTimeout(show, 200);
+      } else {
+        show();
+        setFocusedViaKeyboard(true);
+      }
     }
   };
-  const hideTooltip = () => setShow(false);
+  const hideTooltip = () => {
+    setShow(false);
+    setFocusedViaKeyboard(false);
+  };
   const hideTooltipViaEscape = e => {
     e.code === 'Escape' && hideTooltip();
   };
@@ -4930,7 +4937,7 @@ function Tooltip(props) {
       if (visible && !isTooltipHovered({
         x: e.x,
         y: e.y
-      }) && !isFocused) {
+      }) && !(isFocused && focusedViaKeyboard)) {
         hideTooltip();
       }
     };
@@ -4938,8 +4945,8 @@ function Tooltip(props) {
       const {
         relatedTarget
       } = e;
-      const isTooltipChild = el => el && !!el.closest('.bio-properties-panel-tooltip');
-      if (visible && !isHovered(wrapperRef.current) && !isTooltipChild(relatedTarget)) {
+      const isTooltipChild = el => !!el.closest('.bio-properties-panel-tooltip');
+      if (visible && !isHovered(wrapperRef.current) && relatedTarget && !isTooltipChild(relatedTarget)) {
         hideTooltip();
       }
     };
@@ -4951,7 +4958,7 @@ function Tooltip(props) {
       document.removeEventListener('mousemove', hideHoveredTooltip);
       document.removeEventListener('focusout', hideFocusedTooltip);
     };
-  }, [wrapperRef.current, visible]);
+  }, [wrapperRef.current, visible, focusedViaKeyboard]);
   const renderTooltip = () => {
     return jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-tooltip",
@@ -4974,12 +4981,12 @@ function Tooltip(props) {
     tabIndex: "0",
     ref: wrapperRef,
     onMouseEnter: showTooltip,
-    onMouseLeave: () => clearTimeout(timeout),
+    onMouseLeave: () => {
+      clearTimeout(timeout);
+      timeout = null;
+    },
     onFocus: showTooltip,
     onKeyDown: hideTooltipViaEscape,
-    onMouseDown: e => {
-      e.preventDefault();
-    },
     children: [props.children, visible ? parent ? React.createPortal(renderTooltip(), parent.current) : renderTooltip() : null]
   });
 }
@@ -5256,20 +5263,24 @@ function Group(props) {
 
   // set edited state depending on all entries
   hooks.useEffect(() => {
-    const hasOneEditedEntry = entries.find(entry => {
-      const {
-        id,
-        isEdited
-      } = entry;
-      const entryNode = minDom.query(`[data-entry-id="${id}"]`);
-      if (!minDash.isFunction(isEdited) || !entryNode) {
-        return false;
-      }
-      const inputNode = minDom.query('.bio-properties-panel-input', entryNode);
-      return isEdited(inputNode);
+    // TODO(@barmac): replace with CSS when `:has()` is supported in all major browsers, or rewrite as in https://github.com/camunda/camunda-modeler/issues/3815#issuecomment-1733038161
+    const scheduled = requestAnimationFrame(() => {
+      const hasOneEditedEntry = entries.find(entry => {
+        const {
+          id,
+          isEdited
+        } = entry;
+        const entryNode = minDom.query(`[data-entry-id="${id}"]`);
+        if (!minDash.isFunction(isEdited) || !entryNode) {
+          return false;
+        }
+        const inputNode = minDom.query('.bio-properties-panel-input', entryNode);
+        return isEdited(inputNode);
+      });
+      setEdited(hasOneEditedEntry);
     });
-    setEdited(hasOneEditedEntry);
-  }, [entries]);
+    return () => cancelAnimationFrame(scheduled);
+  }, [entries, setEdited]);
 
   // set error state depending on all entries
   const allErrors = useErrors();
@@ -5289,7 +5300,8 @@ function Group(props) {
       class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
       children: [jsxRuntime.jsx("div", {
-        title: label,
+        title: props.tooltip ? null : label,
+        "data-title": label,
         class: "bio-properties-panel-group-header-title",
         children: jsxRuntime.jsx(TooltipWrapper, {
           value: props.tooltip,
@@ -5696,7 +5708,11 @@ function createDragger(fn, dragPreview) {
     // (2) setup drag listeners
 
     // attach drag + cleanup event
-    document.addEventListener('dragover', onDrag);
+    // we need to do this to make sure we track cursor
+    // movements before we reach other drag event handlers,
+    // e.g. in child containers.
+    document.addEventListener('dragover', onDrag, true);
+    document.addEventListener('dragenter', preventDefault, true);
     document.addEventListener('dragend', onEnd);
     document.addEventListener('drop', preventDefault);
   }
@@ -5710,7 +5726,8 @@ function createDragger(fn, dragPreview) {
     return fn.call(self, event, delta);
   }
   function onEnd() {
-    document.removeEventListener('dragover', onDrag);
+    document.removeEventListener('dragover', onDrag, true);
+    document.removeEventListener('dragenter', preventDefault, true);
     document.removeEventListener('dragend', onEnd);
     document.removeEventListener('drop', preventDefault);
   }
@@ -5731,6 +5748,7 @@ const noop$3 = () => {};
  * @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]
@@ -5738,12 +5756,15 @@ const noop$3 = () => {};
  * @param {Function} [props.onPostActivate]
  * @param {Function} [props.onPostDeactivate]
  * @param {boolean} [props.returnFocus]
+ * @param {boolean} [props.closeOnEscape]
  * @param {string} props.title
+ * @param {Ref} [ref]
  */
-function Popup(props) {
+function PopupComponent(props, globalRef) {
   const {
     container,
     className,
+    delayInitialFocus,
     position,
     width,
     height,
@@ -5751,12 +5772,16 @@ function Popup(props) {
     onPostActivate = noop$3,
     onPostDeactivate = noop$3,
     returnFocus = true,
+    closeOnEscape = true,
     title
   } = props;
   const focusTrapRef = hooks.useRef(null);
-  const popupRef = hooks.useRef(null);
-  const handleKeyPress = event => {
-    if (event.key === 'Escape') {
+  const localRef = hooks.useRef(null);
+  const popupRef = globalRef || localRef;
+  const handleKeydown = event => {
+    // do not allow keyboard events to bubble
+    event.stopPropagation();
+    if (closeOnEscape && event.key === 'Escape') {
       onClose();
     }
   };
@@ -5781,14 +5806,6 @@ function Popup(props) {
   if (height) {
     style.height = height + 'px';
   }
-  hooks.useEffect(() => {
-    if (popupRef.current) {
-      popupRef.current.addEventListener('keydown', handleKeyPress);
-    }
-    return () => {
-      popupRef.current.removeEventListener('keydown', handleKeyPress);
-    };
-  }, [popupRef]);
   hooks.useEffect(() => {
     if (popupRef.current) {
       popupRef.current.addEventListener('focusin', handleFocus);
@@ -5801,6 +5818,7 @@ function Popup(props) {
     if (popupRef.current) {
       focusTrapRef.current = focusTrap__namespace.createFocusTrap(popupRef.current, {
         clickOutsideDeactivates: true,
+        delayInitialFocus,
         fallbackFocus: popupRef.current,
         onPostActivate,
         onPostDeactivate,
@@ -5814,12 +5832,14 @@ function Popup(props) {
     "aria-label": title,
     tabIndex: -1,
     ref: popupRef,
+    onKeyDown: handleKeydown,
     role: "dialog",
     class: classnames('bio-properties-panel-popup', className),
     style: style,
     children: props.children
   }), container || document.body);
 }
+const Popup = React.forwardRef(PopupComponent);
 Popup.Title = Title;
 Popup.Body = Body;
 Popup.Footer = Footer;
@@ -5828,6 +5848,7 @@ function Title(props) {
     children,
     className,
     draggable,
+    emit = () => {},
     title,
     ...rest
   } = props;
@@ -5840,7 +5861,8 @@ function Title(props) {
   });
   const dragPreviewRef = hooks.useRef();
   const titleRef = hooks.useRef();
-  const onMove = minDash.throttle((_, delta) => {
+  const onMove = (event, delta) => {
+    cancel(event);
     const {
       x: dx,
       y: dy
@@ -5852,20 +5874,33 @@ function Title(props) {
     const popupParent = getPopupParent(titleRef.current);
     popupParent.style.top = newPosition.y + 'px';
     popupParent.style.left = newPosition.x + 'px';
-  });
+
+    // notify interested parties
+    emit('dragover', {
+      newPosition,
+      delta
+    });
+  };
   const onMoveStart = event => {
     // initialize drag handler
     const onDragStart = createDragger(onMove, dragPreviewRef.current);
     onDragStart(event);
+    event.stopPropagation();
     const popupParent = getPopupParent(titleRef.current);
     const bounds = popupParent.getBoundingClientRect();
     context.current.startPosition = {
       x: bounds.left,
       y: bounds.top
     };
+
+    // notify interested parties
+    emit('dragstart');
   };
   const onMoveEnd = () => {
     context.current.newPosition = null;
+
+    // notify interested parties
+    emit('dragend');
   };
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-popup__header', draggable && 'draggable', className),
@@ -5918,26 +5953,52 @@ function Footer(props) {
 function getPopupParent(node) {
   return node.closest('.bio-properties-panel-popup');
 }
+function cancel(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
 const FEEL_POPUP_WIDTH = 700;
 const FEEL_POPUP_HEIGHT = 250;
 
 /**
- * FEEL popup component, built as a singleton.
+ * 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 {
-    element
+    element,
+    eventBus = {
+      fire() {},
+      on() {},
+      off() {}
+    },
+    popupContainer
   } = props;
   const prevElement = usePrevious(element);
   const [popupConfig, setPopupConfig] = hooks.useState({});
   const [open, setOpen] = hooks.useState(false);
   const [source, setSource] = hooks.useState(null);
   const [sourceElement, setSourceElement] = hooks.useState(null);
-  const handleOpen = (key, config, _sourceElement) => {
-    setSource(key);
+  const emit = (type, context) => {
+    eventBus.fire('feelPopup.' + type, context);
+  };
+  const isOpen = hooks.useCallback(() => {
+    return !!open;
+  }, [open]);
+  useUpdateEffect(() => {
+    if (!open) {
+      emit('closed');
+    }
+  }, [open]);
+  const handleOpen = (entryId, config, _sourceElement) => {
+    setSource(entryId);
     setPopupConfig(config);
     setOpen(true);
     setSourceElement(_sourceElement);
+    emit('open');
   };
   const handleClose = () => {
     setOpen(false);
@@ -5951,21 +6012,47 @@ function FEELPopupRoot(props) {
 
   // close popup on element change, cf. https://github.com/bpmn-io/properties-panel/issues/270
   hooks.useEffect(() => {
-    if (element && element !== prevElement) {
+    if (element && prevElement && element !== prevElement) {
       handleClose();
     }
   }, [element]);
+
+  // allow close and open via events
+  hooks.useEffect(() => {
+    const handlePopupOpen = context => {
+      const {
+        entryId,
+        popupConfig,
+        sourceElement
+      } = context;
+      handleOpen(entryId, popupConfig, sourceElement);
+    };
+    const handleIsOpen = () => {
+      return isOpen();
+    };
+    eventBus.on('feelPopup._close', handleClose);
+    eventBus.on('feelPopup._open', handlePopupOpen);
+    eventBus.on('feelPopup._isOpen', handleIsOpen);
+    return () => {
+      eventBus.off('feelPopup._close', handleClose);
+      eventBus.off('feelPopup._open', handleOpen);
+      eventBus.off('feelPopup._isOpen', handleIsOpen);
+    };
+  }, [eventBus, isOpen]);
   return jsxRuntime.jsxs(FeelPopupContext.Provider, {
     value: feelPopupContext,
     children: [open && jsxRuntime.jsx(FeelPopupComponent, {
       onClose: handleClose,
+      container: popupContainer,
       sourceElement: sourceElement,
+      emit: emit,
       ...popupConfig
     }), props.children]
   });
 }
 function FeelPopupComponent(props) {
   const {
+    container,
     id,
     hostLanguage,
     onInput,
@@ -5977,20 +6064,45 @@ function FeelPopupComponent(props) {
     tooltipContainer,
     type,
     value,
-    variables
+    variables,
+    emit
   } = props;
   const editorRef = hooks.useRef();
+  const popupRef = hooks.useRef();
+  const isAutoCompletionOpen = hooks.useRef(false);
   const handleSetReturnFocus = () => {
     sourceElement && sourceElement.focus();
   };
-  hooks.useEffect(() => {
-    const editor = editorRef.current;
-    if (editor) {
-      editor.focus();
+  const onKeyDownCapture = event => {
+    // we use capture here to make sure we handle the event before the editor does
+    if (event.key === 'Escape') {
+      isAutoCompletionOpen.current = autoCompletionOpen(event.target);
+    }
+  };
+  const onKeyDown = event => {
+    if (event.key === 'Escape') {
+      // close popup only if auto completion is not open
+      // we need to do check this because the editor is not
+      // stop propagating the keydown event
+      // cf. https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322/5
+      if (!isAutoCompletionOpen.current) {
+        onClose();
+        isAutoCompletionOpen.current = false;
+      }
     }
-  }, [editorRef, id]);
+  };
+  hooks.useEffect(() => {
+    emit('opened', {
+      domNode: popupRef.current
+    });
+    return () => emit('close', {
+      domNode: popupRef.current
+    });
+  }, []);
   return jsxRuntime.jsxs(Popup, {
+    container: container,
     className: "bio-properties-panel-feel-popup",
+    emit: emit,
     position: position,
     title: title,
     onClose: onClose
@@ -5999,14 +6111,20 @@ function FeelPopupComponent(props) {
     ,
 
     returnFocus: false,
+    closeOnEscape: false,
+    delayInitialFocus: false,
     onPostDeactivate: handleSetReturnFocus,
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
+    ref: popupRef,
     children: [jsxRuntime.jsx(Popup.Title, {
       title: title,
+      emit: emit,
       draggable: true
     }), jsxRuntime.jsx(Popup.Body, {
       children: jsxRuntime.jsxs("div", {
+        onKeyDownCapture: onKeyDownCapture,
+        onKeyDown: onKeyDown,
         class: "bio-properties-panel-feel-popup__body",
         children: [type === 'feel' && jsxRuntime.jsx(CodeEditor, {
           enableGutters: true,
@@ -6048,6 +6166,26 @@ function FeelPopupComponent(props) {
 function prefixId$8(id) {
   return `bio-properties-panel-${id}`;
 }
+function autoCompletionOpen(element) {
+  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
+ */
+function useUpdateEffect(effect, deps) {
+  const isMounted = hooks.useRef(false);
+  hooks.useEffect(() => {
+    if (isMounted.current) {
+      return effect();
+    } else {
+      isMounted.current = true;
+    }
+  }, deps);
+}
 function ToggleSwitch(props) {
   const {
     id,
@@ -6794,7 +6932,7 @@ function FeelEntry(props) {
     setLocalError(err);
   }, []);
   const temporaryError = useError(id);
-  const error = localError || temporaryError || validationError;
+  const error = temporaryError || localError || validationError;
   return jsxRuntime.jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -6943,7 +7081,7 @@ function calculatePopupPosition(element) {
 
 // todo(pinussilvestrus): make this configurable in the future
 function getPopupTitle(element, label) {
-  let popupTitle;
+  let popupTitle = '';
   if (element && element.type) {
     popupTitle = `${element.type} / `;
   }
@@ -7030,6 +7168,7 @@ const DEFAULT_TOOLTIP = {};
  * @param {Function} [props.descriptionLoaded]
  * @param {TooltipConfig} [props.tooltipConfig]
  * @param {Function} [props.tooltipLoaded]
+ * @param {HTMLElement} [props.feelPopupContainer]
  * @param {Object} [props.eventBus]
  */
 function PropertiesPanel(props) {
@@ -7044,6 +7183,7 @@ function PropertiesPanel(props) {
     descriptionLoaded,
     tooltipConfig,
     tooltipLoaded,
+    feelPopupContainer,
     eventBus
   } = props;
 
@@ -7146,6 +7286,8 @@ function PropertiesPanel(props) {
               value: eventContext,
               children: jsxRuntime.jsx(FEELPopupRoot, {
                 element: element,
+                eventBus: eventBus,
+                popupContainer: feelPopupContainer,
                 children: jsxRuntime.jsxs("div", {
                   class: "bio-properties-panel",
                   children: [jsxRuntime.jsx(Header, {
@@ -7445,7 +7587,8 @@ function ListGroup(props) {
       class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: hasItems ? toggleOpen : noop$1,
       children: [jsxRuntime.jsx("div", {
-        title: label,
+        title: props.tooltip ? null : label,
+        "data-title": label,
         class: "bio-properties-panel-group-header-title",
         children: jsxRuntime.jsx(TooltipWrapper, {
           value: props.tooltip,
@@ -8083,12 +8226,51 @@ function isEdited(node) {
 function prefixId(id) {
   return `bio-properties-panel-${id}`;
 }
+class FeelPopupModule {
+  constructor(eventBus) {
+    this._eventBus = eventBus;
+  }
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+  /**
+   * 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(entryId, popupConfig, sourceElement) {
+    return this._eventBus.fire('feelPopup._open', {
+      entryId,
+      popupConfig,
+      sourceElement
+    });
+  }
+
+  /**
+   * Close the FEEL popup.
+   */
+  close() {
+    return this._eventBus.fire('feelPopup._close');
+  }
+}
+FeelPopupModule.$inject = ['eventBus'];
+var index = {
+  feelPopup: ['type', FeelPopupModule]
+};
+
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const PropertiesPanelContext = preact.createContext({
@@ -8185,8 +8367,8 @@ const PropertiesPanelHeaderProvider = {
   }
 };
 
-/**
- * Provide placeholders for empty and multiple state.
+/**
+ * Provide placeholders for empty and multiple state.
  */
 const PropertiesPanelPlaceholderProvider = {
   getEmpty: () => {
@@ -8258,10 +8440,10 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
-/**
- * Retrieve list of variables from the form schema.
- *
- * @returns { string[] } list of variables used in form schema
+/**
+ * Retrieve list of variables from the form schema.
+ *
+ * @returns { string[] } list of variables used in form schema
  */
 function useVariables() {
   const form = useService('formEditor');
@@ -9912,14 +10094,14 @@ function Value(props) {
 
 // helpers //////////
 
-/**
- * Returns copy of object with updated value.
- *
- * @param {Object} properties
- * @param {string} key
- * @param {string} value
- *
- * @returns {Object}
+/**
+ * Returns copy of object with updated value.
+ *
+ * @param {Object} properties
+ * @param {string} key
+ * @param {string} value
+ *
+ * @returns {Object}
  */
 function updateValue(properties, key, value) {
   return {
@@ -9928,14 +10110,14 @@ function updateValue(properties, key, value) {
   };
 }
 
-/**
- * Returns copy of object with updated key.
- *
- * @param {Object} properties
- * @param {string} oldKey
- * @param {string} newKey
- *
- * @returns {Object}
+/**
+ * Returns copy of object with updated key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ * @param {string} newKey
+ *
+ * @returns {Object}
  */
 function updateKey(properties, oldKey, newKey) {
   return Object.entries(properties).reduce((newProperties, entry) => {
@@ -10749,7 +10931,8 @@ function ValidationType(props) {
     id,
     label: 'Validation pattern',
     setValue,
-    getOptions: () => Object.values(VALIDATION_TYPE_OPTIONS)
+    getOptions: () => Object.values(VALIDATION_TYPE_OPTIONS),
+    tooltip: getValue('validationType')() === VALIDATION_TYPE_OPTIONS.phone.value ? 'The built-in phone validation pattern is based on the E.164 standard with no spaces. Ex: +491234567890' : undefined
   });
 }
 
@@ -10767,13 +10950,13 @@ function ValuesGroups(field, editField) {
   };
   const valuesSourceId = `${fieldId}-valuesSource`;
 
-  /**
-   * @type {Array<Group|ListGroup>}
+  /**
+   * @type {Array<Group|ListGroup>}
    */
   const groups = [{
     id: valuesSourceId,
     label: 'Options source',
-    tooltip: '"Static" defines a constant, predefined set of form options.\n"Dynamic" defines options that are populated dynamically, adjusting based on variable data for flexible responses to different conditions or inputs.',
+    tooltip: getValuesTooltip(),
     component: Group,
     entries: ValuesSourceSelectEntry({
       ...context,
@@ -10818,6 +11001,12 @@ function ValuesGroups(field, editField) {
   return groups;
 }
 
+// helpers //////////
+
+function getValuesTooltip() {
+  return '"Static" defines a constant, predefined set of form options.\n\n' + '"Input data" defines options that are populated dynamically, adjusting based on variable data for flexible responses to different conditions or inputs.\n\n' + '"Expression" defines options that are populated from a FEEL expression.';
+}
+
 function CustomPropertiesGroup(field, editField) {
   const {
     properties = {},
@@ -10883,13 +11072,13 @@ function CustomPropertiesGroup(field, editField) {
 
 // helpers //////////
 
-/**
- * Returns copy of object without key.
- *
- * @param {Object} properties
- * @param {string} oldKey
- *
- * @returns {Object}
+/**
+ * Returns copy of object without key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ *
+ * @returns {Object}
  */
 function removeKey(properties, oldKey) {
   return Object.entries(properties).reduce((newProperties, entry) => {
@@ -10975,6 +11164,10 @@ function FormPropertiesPanel(props) {
   const formEditor = injector.get('formEditor');
   const modeling = injector.get('modeling');
   const selectionModule = injector.get('selection');
+  const propertiesPanelConfig = injector.get('config.propertiesPanel') || {};
+  const {
+    feelPopupContainer
+  } = propertiesPanelConfig;
   const [state, setState] = hooks.useState({
     selectedFormField: selectionModule.get() || formEditor._getState().schema
   });
@@ -10992,9 +11185,9 @@ function FormPropertiesPanel(props) {
     });
   }, [eventBus, formEditor, selectionModule]);
   hooks.useLayoutEffect(() => {
-    /**
-     * TODO(pinussilvestrus): update with actual updated element,
-     * once we have a proper updater/change support
+    /**
+     * TODO(pinussilvestrus): update with actual updated element,
+     * once we have a proper updater/change support
      */
     eventBus.on('changed', refresh);
     eventBus.on('import.done', refresh);
@@ -11024,7 +11217,8 @@ function FormPropertiesPanel(props) {
         eventBus: eventBus,
         groups: getGroups(selectedFormField, editField, getService),
         headerProvider: PropertiesPanelHeaderProvider,
-        placeholderProvider: PropertiesPanelPlaceholderProvider
+        placeholderProvider: PropertiesPanelPlaceholderProvider,
+        feelPopupContainer: feelPopupContainer
       })
     })
   });
@@ -11046,10 +11240,10 @@ class PropertiesPanelRenderer {
     });
   }
 
-  /**
-   * Attach the properties panel to a parent node.
-   *
-   * @param {HTMLElement} container
+  /**
+   * Attach the properties panel to a parent node.
+   *
+   * @param {HTMLElement} container
    */
   attachTo(container) {
     if (!container) {
@@ -11069,8 +11263,8 @@ class PropertiesPanelRenderer {
     this._eventBus.fire('propertiesPanel.attach');
   }
 
-  /**
-   * Detach the properties panel from its parent node.
+  /**
+   * Detach the properties panel from its parent node.
    */
   detach() {
     const parentNode = this._container.parentNode;
@@ -11096,14 +11290,15 @@ class PropertiesPanelRenderer {
 PropertiesPanelRenderer.$inject = ['config.propertiesPanel', 'injector', 'eventBus'];
 
 var PropertiesPanelModule = {
+  __depends__: [index],
   __init__: ['propertiesPanel'],
   propertiesPanel: ['type', PropertiesPanelRenderer]
 };
 
-/**
- * Manages the rendering of visual plugins.
- * @constructor
- * @param {Object} eventBus - Event bus for the application.
+/**
+ * Manages the rendering of visual plugins.
+ * @constructor
+ * @param {Object} eventBus - Event bus for the application.
  */
 class RenderInjector extends SectionModuleBase {
   constructor(eventBus) {
@@ -11112,10 +11307,10 @@ class RenderInjector extends SectionModuleBase {
     this.registeredRenderers = [];
   }
 
-  /**
-   * Inject a new renderer into the injector.
-   * @param {string} identifier - Identifier for the renderer.
-   * @param {Function} Renderer - The renderer function.
+  /**
+   * Inject a new renderer into the injector.
+   * @param {string} identifier - Identifier for the renderer.
+   * @param {Function} Renderer - The renderer function.
    */
   attachRenderer(identifier, Renderer) {
     this.registeredRenderers = [...this.registeredRenderers, {
@@ -11124,17 +11319,17 @@ class RenderInjector extends SectionModuleBase {
     }];
   }
 
-  /**
-   * Detach a renderer from the by key injector.
-   * @param {string} identifier - Identifier for the renderer.
+  /**
+   * Detach a renderer from the by key injector.
+   * @param {string} identifier - Identifier for the renderer.
    */
   detachRenderer(identifier) {
     this.registeredRenderers = this.registeredRenderers.filter(r => r.identifier !== identifier);
   }
 
-  /**
-   * Returns the registered renderers.
-   * @returns {Array} Array of registered renderers.
+  /**
+   * Returns the registered renderers.
+   * @returns {Array} Array of registered renderers.
    */
   fetchRenderers() {
     return this.registeredRenderers;
@@ -11168,48 +11363,48 @@ var ExpressionLanguageModule = {
 
 const ids = new Ids([32, 36, 1]);
 
-/**
- * @typedef { import('./types').Injector } Injector
- * @typedef { import('./types').Module } Module
- * @typedef { import('./types').Schema } Schema
- *
- * @typedef { import('./types').FormEditorOptions } FormEditorOptions
- * @typedef { import('./types').FormEditorProperties } FormEditorProperties
- *
- * @typedef { {
- *   properties: FormEditorProperties,
- *   schema: Schema
- * } } State
- *
- * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
- * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
- * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+/**
+ * @typedef { import('./types').Injector } Injector
+ * @typedef { import('./types').Module } Module
+ * @typedef { import('./types').Schema } Schema
+ *
+ * @typedef { import('./types').FormEditorOptions } FormEditorOptions
+ * @typedef { import('./types').FormEditorProperties } FormEditorProperties
+ *
+ * @typedef { {
+ *   properties: FormEditorProperties,
+ *   schema: Schema
+ * } } State
+ *
+ * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+ * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 
-/**
- * The form editor.
+/**
+ * The form editor.
  */
 class FormEditor {
-  /**
-   * @constructor
-   * @param {FormEditorOptions} options
+  /**
+   * @constructor
+   * @param {FormEditorOptions} options
    */
   constructor(options = {}) {
-    /**
-     * @public
-     * @type {OnEventType}
+    /**
+     * @public
+     * @type {OnEventType}
      */
     this.on = this._onEvent;
 
-    /**
-     * @public
-     * @type {String}
+    /**
+     * @public
+     * @type {String}
      */
     this._id = ids.next();
 
-    /**
-     * @private
-     * @type {Element}
+    /**
+     * @private
+     * @type {Element}
      */
     this._container = formJsViewer.createFormContainer();
     this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -11220,15 +11415,15 @@ class FormEditor {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {any}
+    /**
+     * @private
+     * @type {any}
      */
     this.exporter = exporter;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       properties,
@@ -11257,10 +11452,10 @@ class FormEditor {
     this._detach(false);
   }
 
-  /**
-   * @param {Schema} schema
-   *
-   * @return {Promise<{ warnings: Array<any> }>}
+  /**
+   * @param {Schema} schema
+   *
+   * @return {Promise<{ warnings: Array<any> }>}
    */
   importSchema(schema) {
     return new Promise((resolve, reject) => {
@@ -11289,15 +11484,15 @@ class FormEditor {
     });
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   saveSchema() {
     return this.getSchema();
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   getSchema() {
     const {
@@ -11306,8 +11501,8 @@ class FormEditor {
     return exportSchema(schema, this.exporter, formJsViewer.schemaVersion);
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -11325,10 +11520,10 @@ class FormEditor {
     this._detach();
   }
 
-  /**
-   * @internal
-   *
-   * @param {boolean} [emit]
+  /**
+   * @internal
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -11342,9 +11537,9 @@ class FormEditor {
     parentNode.removeChild(container);
   }
 
-  /**
-   * @param {any} property
-   * @param {any} value
+  /**
+   * @param {any} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = minDash.set(this._getState().properties, [property], value);
@@ -11353,21 +11548,21 @@ class FormEditor {
     });
   }
 
-  /**
-   * @param {string} type
-   * @param {Function} handler
+  /**
+   * @param {string} type
+   * @param {Function} handler
    */
   off(type, handler) {
     this.get('eventBus').off(type, handler);
   }
 
-  /**
-   * @internal
-   *
-   * @param {FormEditorOptions} options
-   * @param {Element} container
-   *
-   * @returns {Injector}
+  /**
+   * @internal
+   *
+   * @param {FormEditorOptions} options
+   * @param {Element} container
+   *
+   * @returns {Injector}
    */
   _createInjector(options, container) {
     const {
@@ -11389,22 +11584,22 @@ class FormEditor {
     }, core, ...modules, ...additionalModules]);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _emit(type, data) {
     this.get('eventBus').fire(type, data);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getState() {
     return this._state;
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _setState(state) {
     this._state = {
@@ -11414,15 +11609,15 @@ class FormEditor {
     this._emit('changed', this._getState());
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getModules() {
     return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, formJsViewer.MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);