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

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]
   });
 }
@@ -5289,7 +5296,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,
@@ -5731,6 +5739,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 +5747,14 @@ const noop$3 = () => {};
  * @param {Function} [props.onPostActivate]
  * @param {Function} [props.onPostDeactivate]
  * @param {boolean} [props.returnFocus]
+ * @param {boolean} [props.closeOnEscape]
  * @param {string} props.title
  */
 function Popup(props) {
   const {
     container,
     className,
+    delayInitialFocus,
     position,
     width,
     height,
@@ -5751,12 +5762,15 @@ 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 handleKeydown = event => {
+    // do not allow keyboard events to bubble
+    event.stopPropagation();
+    if (closeOnEscape && event.key === 'Escape') {
       onClose();
     }
   };
@@ -5781,14 +5795,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 +5807,7 @@ function Popup(props) {
     if (popupRef.current) {
       focusTrapRef.current = focusTrap__namespace.createFocusTrap(popupRef.current, {
         clickOutsideDeactivates: true,
+        delayInitialFocus,
         fallbackFocus: popupRef.current,
         onPostActivate,
         onPostDeactivate,
@@ -5814,6 +5821,7 @@ function Popup(props) {
     "aria-label": title,
     tabIndex: -1,
     ref: popupRef,
+    onKeyDown: handleKeydown,
     role: "dialog",
     class: classnames('bio-properties-panel-popup', className),
     style: style,
@@ -5926,22 +5934,36 @@ const FEEL_POPUP_HEIGHT = 250;
  */
 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]);
+  const handleOpen = (entryId, config, _sourceElement) => {
+    setSource(entryId);
     setPopupConfig(config);
     setOpen(true);
     setSourceElement(_sourceElement);
+    emit('opened');
   };
   const handleClose = () => {
     setOpen(false);
     setSource(null);
+    emit('closed');
   };
   const feelPopupContext = {
     open: handleOpen,
@@ -5951,14 +5973,38 @@ 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,
       ...popupConfig
     }), props.children]
@@ -5966,6 +6012,7 @@ function FEELPopupRoot(props) {
 }
 function FeelPopupComponent(props) {
   const {
+    container,
     id,
     hostLanguage,
     onInput,
@@ -5980,16 +6027,30 @@ function FeelPopupComponent(props) {
     variables
   } = props;
   const editorRef = 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]);
+  };
   return jsxRuntime.jsxs(Popup, {
+    container: container,
     className: "bio-properties-panel-feel-popup",
     position: position,
     title: title,
@@ -5999,6 +6060,8 @@ function FeelPopupComponent(props) {
     ,
 
     returnFocus: false,
+    closeOnEscape: false,
+    delayInitialFocus: false,
     onPostDeactivate: handleSetReturnFocus,
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
@@ -6007,6 +6070,8 @@ function FeelPopupComponent(props) {
       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 +6113,9 @@ function FeelPopupComponent(props) {
 function prefixId$8(id) {
   return `bio-properties-panel-${id}`;
 }
+function autoCompletionOpen(element) {
+  return element.closest('.cm-editor').querySelector('.cm-tooltip-autocomplete');
+}
 function ToggleSwitch(props) {
   const {
     id,
@@ -6794,7 +6862,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,
@@ -7030,6 +7098,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 +7113,7 @@ function PropertiesPanel(props) {
     descriptionLoaded,
     tooltipConfig,
     tooltipLoaded,
+    feelPopupContainer,
     eventBus
   } = props;
 
@@ -7146,6 +7216,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 +7517,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 +8156,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 +8297,8 @@ const PropertiesPanelHeaderProvider = {
   }
 };
 
-/**
- * Provide placeholders for empty and multiple state.
+/**
+ * Provide placeholders for empty and multiple state.
  */
 const PropertiesPanelPlaceholderProvider = {
   getEmpty: () => {
@@ -8258,10 +8370,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 +10024,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 +10040,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 +10861,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 +10880,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 +10931,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 +11002,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 +11094,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 +11115,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 +11147,8 @@ function FormPropertiesPanel(props) {
         eventBus: eventBus,
         groups: getGroups(selectedFormField, editField, getService),
         headerProvider: PropertiesPanelHeaderProvider,
-        placeholderProvider: PropertiesPanelPlaceholderProvider
+        placeholderProvider: PropertiesPanelPlaceholderProvider,
+        feelPopupContainer: feelPopupContainer
       })
     })
   });
@@ -11046,10 +11170,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 +11193,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 +11220,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 +11237,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 +11249,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 +11293,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 +11345,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 +11382,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 +11414,15 @@ class FormEditor {
     });
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   saveSchema() {
     return this.getSchema();
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   getSchema() {
     const {
@@ -11306,8 +11431,8 @@ class FormEditor {
     return exportSchema(schema, this.exporter, formJsViewer.schemaVersion);
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -11325,10 +11450,10 @@ class FormEditor {
     this._detach();
   }
 
-  /**
-   * @internal
-   *
-   * @param {boolean} [emit]
+  /**
+   * @internal
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -11342,9 +11467,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 +11478,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 +11514,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 +11539,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);