@bpmn-io/form-js-editor 1.1.0 → 1.2.0

package/dist/index.es.js

@@ -8,7 +8,7 @@ import { useContext, useState, useMemo, useEffect, useCallback, useRef as useRef
 import { createContext, Fragment, render, createElement } from 'preact';
 import * as React from 'preact/compat';
 import { createPortal, useRef, useContext as useContext$1, useEffect as useEffect$1, forwardRef } from 'preact/compat';
-import dragula from 'dragula';
+import dragula from '@bpmn-io/draggle';
 import { classes, query, closest, event, matches, domify } from 'min-dom';
 import { mutate } from 'array-move';
 import { FeelersEditor } from 'feelers';
@@ -515,10 +515,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;
@@ -531,11 +531,11 @@ function DebounceFactory(config = true) {
 DebounceFactory.$inject = ['config.debounce'];
 
 class FieldFactory {
-  /**
-   * @constructor
-   *
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
-   * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
+  /**
+   * @constructor
+   *
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+   * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
    */
   constructor(formFieldRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
@@ -598,11 +598,11 @@ class FieldFactory {
 FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
 
 class FormFieldRegistry extends FormFieldRegistry$1 {
-  /**
-   * 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);
@@ -623,13 +623,13 @@ class FormFieldRegistry extends FormFieldRegistry$1 {
     }
   }
 
-  /**
-   * 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) {
@@ -646,11 +646,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;
@@ -710,11 +710,11 @@ function calculateMaxColumnsWithAuto(autoCols) {
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('../core/FieldFactory').default } fieldFactory
-   * @param { import('../core/FormLayouter').default } formLayouter
+  /**
+   * @constructor
+   * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('../core/FieldFactory').default } fieldFactory
+   * @param { import('../core/FormLayouter').default } formLayouter
    */
   constructor(formFieldRegistry, fieldFactory, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
@@ -722,21 +722,21 @@ class Importer {
     this._formLayouter = formLayouter;
   }
 
-  /**
-   * Import schema creating rows, fields, attaching additional
-   * information to each field and adding fields to the
-   * field registry.
-   *
-   * Additional information attached:
-   *
-   *   * `id` (unless present)
-   *   * `_parent`
-   *   * `_path`
-   *
-   * @param {any} schema
-   *
-   * @typedef {{ warnings: Error[], schema: any }} ImportResult
-   * @returns {ImportResult}
+  /**
+   * Import schema creating rows, fields, attaching additional
+   * information to each field and adding fields to the
+   * field registry.
+   *
+   * Additional information attached:
+   *
+   *   * `id` (unless present)
+   *   * `_parent`
+   *   * `_path`
+   *
+   * @param {any} schema
+   *
+   * @typedef {{ warnings: Error[], schema: any }} ImportResult
+   * @returns {ImportResult}
    */
   importSchema(schema) {
     // TODO: Add warnings
@@ -754,12 +754,12 @@ class Importer {
     }
   }
 
-  /**
-   * @param {{[x: string]: any}} fieldAttrs
-   * @param {String} [parentId]
-   * @param {number} [index]
-   *
-   * @return {any} field
+  /**
+   * @param {{[x: string]: any}} fieldAttrs
+   * @param {String} [parentId]
+   * @param {number} [index]
+   *
+   * @return {any} field
    */
   importFormField(fieldAttrs, parentId, index) {
     const {
@@ -796,11 +796,11 @@ class Importer {
     return field;
   }
 
-  /**
-   * @param {Array<any>} components
-   * @param {string} parentId
-   *
-   * @return {Array<any>} imported components
+  /**
+   * @param {Array<any>} components
+   * @param {string} parentId
+   *
+   * @return {Array<any>} imported components
    */
   importFormFields(components, parentId) {
     return components.map((component, index) => {
@@ -825,22 +825,22 @@ 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
- * @param {Element} dragPreview
- *
- * @return {Function} drag start callback function
+/**
+ * Add a dragger that calls back the passed function with
+ * { event, delta } on drag.
+ *
+ * @example
+ *
+ * function dragMove(event, delta) {
+ *   // we are dragging (!!)
+ * }
+ *
+ * domElement.addEventListener('dragstart', dragger(dragMove));
+ *
+ * @param {Function} fn
+ * @param {Element} dragPreview
+ *
+ * @return {Function} drag start callback function
  */
 function createDragger(fn, dragPreview) {
   let self;
@@ -881,12 +881,12 @@ function createDragger(fn, dragPreview) {
   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;
@@ -915,11 +915,11 @@ const DragAndDropContext = 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 = createContext({
@@ -1269,23 +1269,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 => jsx(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 = [];
@@ -1303,8 +1303,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 = [];
@@ -1324,8 +1324,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);
@@ -1553,19 +1553,19 @@ 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
+  /**
+   * @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
    */
   constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
     this._formFieldRegistry = formFieldRegistry;
@@ -1575,13 +1575,13 @@ class Dragging {
     this._modeling = modeling;
   }
 
-  /**
-   * 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 */
@@ -1683,17 +1683,21 @@ class Dragging {
     }
   }
 
-  /**
-   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+  /**
+   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
    */
   createDragulaInstance(options) {
     const {
       container,
-      direction,
       mirrorContainer
     } = options || {};
-    const dragulaInstance = dragula({
-      direction,
+    let dragulaOptions = {
+      direction: function (el, target) {
+        if (isRow(target)) {
+          return 'horizontal';
+        }
+        return 'vertical';
+      },
       mirrorContainer,
       isContainer(el) {
         return container.some(cls => el.classList.contains(cls));
@@ -1724,7 +1728,8 @@ class Dragging {
       },
       slideFactorX: 10,
       slideFactorY: 5
-    });
+    };
+    const dragulaInstance = dragula(dragulaOptions);
 
     // bind life cycle events
     dragulaInstance.on('drag', (element, source) => {
@@ -2093,7 +2098,7 @@ function DebugColumns(props) {
     return null;
   }
   return jsx("div", {
-    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;",
+    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;",
     class: "fjs-debug-columns",
     children: (field.layout || {}).columns || 'auto'
   });
@@ -2190,7 +2195,6 @@ function FormEditor$1(props) {
   useEffect(() => {
     let dragulaInstance = dragging.createDragulaInstance({
       container: [DRAG_CONTAINER_CLS, DROP_CONTAINER_VERTICAL_CLS, DROP_CONTAINER_HORIZONTAL_CLS],
-      direction: 'vertical',
       mirrorContainer: formContainerRef.current
     });
     setDrake(dragulaInstance);
@@ -2204,7 +2208,6 @@ function FormEditor$1(props) {
       onDetach();
       dragulaInstance = dragging.createDragulaInstance({
         container: [DRAG_CONTAINER_CLS, DROP_CONTAINER_VERTICAL_CLS, DROP_CONTAINER_HORIZONTAL_CLS],
-        direction: 'vertical',
         mirrorContainer: formContainerRef.current
       });
       setDrake(dragulaInstance);
@@ -3152,10 +3155,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;
@@ -3216,10 +3219,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;
@@ -3282,10 +3285,10 @@ class EditFormFieldHandler {
 EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class MoveFormFieldHandler {
-  /**
-   * @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;
@@ -3374,10 +3377,10 @@ class MoveFormFieldHandler {
 MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 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;
@@ -3437,9 +3440,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;
@@ -3472,9 +3475,9 @@ class UpdateIdClaimHandler {
 UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 
 class UpdateKeyClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formFieldRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -3940,8 +3943,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.
      */
     // @ts-ignore-next-line
     this.preExecute('formField.edit', function (context) {
@@ -4521,22 +4524,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;
@@ -4549,10 +4552,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`, {
@@ -4560,22 +4563,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) {
@@ -4750,6 +4753,166 @@ const LayoutContext = createContext({
   getLayoutForKey: () => {},
   setLayoutForKey: () => {}
 });
+const TooltipContext = createContext({
+  tooltip: {},
+  getTooltipForId: () => {}
+});
+
+/**
+ * Accesses the global TooltipContext and returns a tooltip for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const tooltip = useTooltipContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {object} element
+ *
+ * @returns {string}
+ */
+function useTooltipContext(id, element) {
+  const {
+    getTooltipForId
+  } = useContext(TooltipContext);
+  return getTooltipForId(id, element);
+}
+function TooltipWrapper(props) {
+  const {
+    forId,
+    element
+  } = props;
+  const contextDescription = useTooltipContext(forId, element);
+  const value = props.value || contextDescription;
+  if (!value) {
+    return props.children;
+  }
+  return jsx(Tooltip, {
+    ...props,
+    value: value,
+    forId: prefixId$8(forId)
+  });
+}
+function Tooltip(props) {
+  const {
+    forId,
+    value,
+    parent
+  } = props;
+  const [visible, setShow] = useState(false);
+  let timeout = null;
+  const wrapperRef = useRef$1(null);
+  const tooltipRef = useRef$1(null);
+  const showTooltip = async event => {
+    const show = () => !visible && setShow(true);
+    if (event instanceof MouseEvent) {
+      timeout = setTimeout(show, 200);
+    } else {
+      show();
+    }
+  };
+  const hideTooltip = () => setShow(false);
+  const hideTooltipViaEscape = e => {
+    e.code === 'Escape' && hideTooltip();
+  };
+  const isTooltipHovered = ({
+    x,
+    y
+  }) => {
+    const tooltip = tooltipRef.current;
+    const wrapper = wrapperRef.current;
+    return tooltip && (inBounds(x, y, wrapper.getBoundingClientRect()) || inBounds(x, y, tooltip.getBoundingClientRect()));
+  };
+  useEffect(() => {
+    const {
+      current
+    } = wrapperRef;
+    if (!current) {
+      return;
+    }
+    const hideHoveredTooltip = e => {
+      const isFocused = document.activeElement === wrapperRef.current || document.activeElement.closest('.bio-properties-panel-tooltip');
+      if (visible && !isTooltipHovered({
+        x: e.x,
+        y: e.y
+      }) && !isFocused) {
+        hideTooltip();
+      }
+    };
+    const hideFocusedTooltip = e => {
+      const {
+        relatedTarget
+      } = e;
+      const isTooltipChild = el => el && !!el.closest('.bio-properties-panel-tooltip');
+      if (visible && !isHovered(wrapperRef.current) && !isTooltipChild(relatedTarget)) {
+        hideTooltip();
+      }
+    };
+    document.addEventListener('wheel', hideHoveredTooltip);
+    document.addEventListener('focusout', hideFocusedTooltip);
+    document.addEventListener('mousemove', hideHoveredTooltip);
+    return () => {
+      document.removeEventListener('wheel', hideHoveredTooltip);
+      document.removeEventListener('mousemove', hideHoveredTooltip);
+      document.removeEventListener('focusout', hideFocusedTooltip);
+    };
+  }, [wrapperRef.current, visible]);
+  const renderTooltip = () => {
+    return jsxs("div", {
+      class: "bio-properties-panel-tooltip",
+      role: "tooltip",
+      id: "bio-properties-panel-tooltip",
+      "aria-labelledby": forId,
+      style: getTooltipPosition(wrapperRef.current),
+      ref: tooltipRef,
+      onClick: e => e.stopPropagation(),
+      children: [jsx("div", {
+        class: "bio-properties-panel-tooltip-content",
+        children: value
+      }), jsx("div", {
+        class: "bio-properties-panel-tooltip-arrow"
+      })]
+    });
+  };
+  return jsxs("div", {
+    class: "bio-properties-panel-tooltip-wrapper",
+    tabIndex: "0",
+    ref: wrapperRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: () => clearTimeout(timeout),
+    onFocus: showTooltip,
+    onKeyDown: hideTooltipViaEscape,
+    onMouseDown: e => {
+      e.preventDefault();
+    },
+    children: [props.children, visible ? parent ? createPortal(renderTooltip(), parent.current) : renderTooltip() : null]
+  });
+}
+
+// helper
+function inBounds(x, y, bounds) {
+  const {
+    top,
+    right,
+    bottom,
+    left
+  } = bounds;
+  return x >= left && x <= right && y >= top && y <= bottom;
+}
+function getTooltipPosition(refElement) {
+  const refPosition = refElement.getBoundingClientRect();
+  const right = `calc(100% - ${refPosition.x}px)`;
+  const top = `${refPosition.top - 10}px`;
+  return `right: ${right}; top: ${top};`;
+}
+function isHovered(element) {
+  return element.matches(':hover');
+}
+function prefixId$8(id) {
+  return `bio-properties-panel-${id}`;
+}
 
 /**
  * Accesses the global DescriptionContext and returns a description for a given id and element.
@@ -4778,6 +4941,12 @@ function useError(id) {
   } = useContext(ErrorsContext);
   return errors[id];
 }
+function useErrors() {
+  const {
+    errors
+  } = useContext(ErrorsContext);
+  return errors;
+}
 
 /**
  * Subscribe to an event immediately. Update subscription after inputs changed.
@@ -5009,6 +5178,10 @@ function Group(props) {
     setEdited(hasOneEditedEntry);
   }, [entries]);
 
+  // set error state depending on all entries
+  const allErrors = useErrors();
+  const hasErrors = entries.some(entry => allErrors[entry.id]);
+
   // set css class when group is sticky to top
   useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
   const propertiesPanelContext = {
@@ -5025,10 +5198,19 @@ function Group(props) {
       children: [jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
-        children: label
+        children: jsx(TooltipWrapper, {
+          value: props.tooltip,
+          forId: 'group-' + id,
+          element: element,
+          parent: groupRef,
+          children: label
+        })
       }), jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
-        children: [edited && jsx(DataMarker, {}), jsx("button", {
+        children: [jsx(DataMarker, {
+          edited: edited,
+          hasErrors: hasErrors
+        }), jsx("button", {
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsx(ArrowIcon, {
@@ -5055,11 +5237,24 @@ function Group(props) {
     })]
   });
 }
-function DataMarker() {
-  return jsx("div", {
-    title: "Section contains data",
-    class: "bio-properties-panel-dot"
-  });
+function DataMarker(props) {
+  const {
+    edited,
+    hasErrors
+  } = props;
+  if (hasErrors) {
+    return jsx("div", {
+      title: "Section contains an error",
+      class: "bio-properties-panel-dot bio-properties-panel-dot--error"
+    });
+  }
+  if (edited) {
+    return jsx("div", {
+      title: "Section contains data",
+      class: "bio-properties-panel-dot"
+    });
+  }
+  return null;
 }
 
 /**
@@ -5090,6 +5285,7 @@ function Placeholder(props) {
 }
 const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
+const DEFAULT_TOOLTIP = {};
 
 /**
  * @typedef { {
@@ -5130,12 +5326,22 @@ const DEFAULT_DESCRIPTION = {};
  *    [id: String]: GetDescriptionFunction
  * } } DescriptionConfig
  *
+ *  @typedef { {
+ *    [id: String]: GetTooltipFunction
+ * } } TooltipConfig
+ *
  * @callback { {
  * @param {string} id
  * @param {Object} element
  * @returns {string}
  * } } GetDescriptionFunction
  *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetTooltipFunction
+ *
  * @typedef { {
  *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
  *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
@@ -5156,6 +5362,8 @@ const DEFAULT_DESCRIPTION = {};
  * @param {Function} [props.layoutChanged]
  * @param {DescriptionConfig} [props.descriptionConfig]
  * @param {Function} [props.descriptionLoaded]
+ * @param {TooltipConfig} [props.tooltipConfig]
+ * @param {Function} [props.tooltipLoaded]
  * @param {Object} [props.eventBus]
  */
 function PropertiesPanel(props) {
@@ -5168,6 +5376,8 @@ function PropertiesPanel(props) {
     layoutChanged,
     descriptionConfig,
     descriptionLoaded,
+    tooltipConfig,
+    tooltipLoaded,
     eventBus
   } = props;
 
@@ -5213,6 +5423,21 @@ function PropertiesPanel(props) {
     description,
     getDescriptionForId
   };
+
+  // set-up tooltip context
+  const tooltip = useMemo(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
+  useEffect(() => {
+    if (typeof tooltipLoaded === 'function') {
+      tooltipLoaded(tooltip);
+    }
+  }, [tooltip, tooltipLoaded]);
+  const getTooltipForId = (id, element) => {
+    return tooltip[id] && tooltip[id](element);
+  };
+  const tooltipContext = {
+    tooltip,
+    getTooltipForId
+  };
   const [errors, setErrors] = useState({});
   const onSetErrors = ({
     errors
@@ -5247,29 +5472,32 @@ function PropertiesPanel(props) {
       value: errorsContext,
       children: jsx(DescriptionContext.Provider, {
         value: descriptionContext,
-        children: jsx(LayoutContext.Provider, {
-          value: layoutContext,
-          children: jsx(EventContext.Provider, {
-            value: eventContext,
-            children: jsxs("div", {
-              class: "bio-properties-panel",
-              children: [jsx(Header, {
-                element: element,
-                headerProvider: headerProvider
-              }), jsx("div", {
-                class: "bio-properties-panel-scroll-container",
-                children: groups.map(group => {
-                  const {
-                    component: Component = Group,
-                    id
-                  } = group;
-                  return createElement(Component, {
-                    ...group,
-                    key: id,
-                    element: element
-                  });
-                })
-              })]
+        children: jsx(TooltipContext.Provider, {
+          value: tooltipContext,
+          children: jsx(LayoutContext.Provider, {
+            value: layoutContext,
+            children: jsx(EventContext.Provider, {
+              value: eventContext,
+              children: jsxs("div", {
+                class: "bio-properties-panel",
+                children: [jsx(Header, {
+                  element: element,
+                  headerProvider: headerProvider
+                }), jsx("div", {
+                  class: "bio-properties-panel-scroll-container",
+                  children: groups.map(group => {
+                    const {
+                      component: Component = Group,
+                      id
+                    } = group;
+                    return createElement(Component, {
+                      ...group,
+                      key: id,
+                      element: element
+                    });
+                  })
+                })]
+              })
             })
           })
         })
@@ -5292,6 +5520,12 @@ function createDescriptionContext(overrides = {}) {
     ...overrides
   };
 }
+function createTooltipContext(overrides = {}) {
+  return {
+    ...DEFAULT_TOOLTIP,
+    ...overrides
+  };
+}
 
 // hooks //////////////////
 
@@ -5522,6 +5756,18 @@ function ListGroup(props) {
     setAddTriggered(true);
     add(e);
   };
+  const allErrors = useErrors();
+  const hasError = items.some(item => {
+    if (allErrors[item.id]) {
+      return true;
+    }
+    if (!item.entries) {
+      return;
+    }
+
+    // also check if the error is nested, e.g. for name-value entries
+    return item.entries.some(entry => allErrors[entry.id]);
+  });
   return jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
@@ -5532,7 +5778,13 @@ function ListGroup(props) {
       children: [jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
-        children: label
+        children: jsx(TooltipWrapper, {
+          value: props.tooltip,
+          forId: 'group-' + id,
+          element: element,
+          parent: groupRef,
+          children: label
+        })
       }), jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
         children: [add ? jsxs("button", {
@@ -5545,7 +5797,7 @@ function ListGroup(props) {
           }) : null]
         }) : null, hasItems ? jsx("div", {
           title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
-          class: "bio-properties-panel-list-badge",
+          class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
         }) : null, hasItems ? jsx("button", {
           title: "Toggle section",
@@ -5621,7 +5873,8 @@ function Checkbox(props) {
     disabled,
     value = false,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const handleChangeCallback = ({
@@ -5656,7 +5909,12 @@ function Checkbox(props) {
     }), jsx("label", {
       for: prefixId$7(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
     })]
   });
 }
@@ -5671,6 +5929,7 @@ function Checkbox(props) {
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  * @param {boolean} [props.disabled]
  */
 function CheckboxEntry(props) {
@@ -5683,7 +5942,8 @@ function CheckboxEntry(props) {
     setValue,
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -5697,7 +5957,9 @@ function CheckboxEntry(props) {
       onChange: setValue,
       onFocus: onFocus,
       onBlur: onBlur,
-      value: value
+      value: value,
+      tooltip: tooltip,
+      element: element
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -5954,7 +6216,8 @@ function ToggleSwitch(props) {
     inline,
     onFocus,
     onBlur,
-    inputRef
+    inputRef,
+    tooltip
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const handleInputCallback = async () => {
@@ -5977,7 +6240,12 @@ function ToggleSwitch(props) {
     children: [jsx("label", {
       class: "bio-properties-panel-label",
       for: prefixId$6(id),
-      children: label
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
     }), jsxs("div", {
       class: "bio-properties-panel-field-wrapper",
       children: [jsxs("label", {
@@ -6015,6 +6283,7 @@ function ToggleSwitch(props) {
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  */
 function ToggleSwitchEntry(props) {
   const {
@@ -6027,7 +6296,8 @@ function ToggleSwitchEntry(props) {
     getValue,
     setValue,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const value = getValue(element);
   return jsxs("div", {
@@ -6041,7 +6311,9 @@ function ToggleSwitchEntry(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       switcherLabel: switcherLabel,
-      inline: inline
+      inline: inline,
+      tooltip: tooltip,
+      element: element
     }), jsx(Description$1, {
       forId: id,
       element: element,
@@ -6221,7 +6493,8 @@ function FeelTextfield(props) {
     disabled = false,
     variables,
     tooltipContainer,
-    OptionalComponent = OptionalFeelInput
+    OptionalComponent = OptionalFeelInput,
+    tooltip
   } = props;
   const [localValue, _setLocalValue] = useState(value);
   const editorRef = useShowEntryEvent(id);
@@ -6337,7 +6610,12 @@ function FeelTextfield(props) {
       for: prefixId$4(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
-      children: [label, jsx(FeelIcon, {
+      children: [jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      }), jsx(FeelIcon, {
         label: label,
         feel: feel,
         onClick: handleFeelToggle,
@@ -6597,6 +6875,7 @@ forwardRef((props, ref) => {
  * @param {Function} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  */
 function FeelEntry(props) {
   const {
@@ -6617,7 +6896,8 @@ function FeelEntry(props) {
     example,
     variables,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
@@ -6667,7 +6947,8 @@ function FeelEntry(props) {
       value: value,
       variables: variables,
       tooltipContainer: tooltipContainer,
-      OptionalComponent: props.OptionalComponent
+      OptionalComponent: props.OptionalComponent,
+      tooltip: tooltip
     }), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -6788,7 +7069,8 @@ function Select(props) {
     value = '',
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const ref = useShowEntryEvent(id);
   const [localValue, setLocalValue] = useState(value);
@@ -6812,7 +7094,12 @@ function Select(props) {
     children: [jsx("label", {
       for: prefixId$3(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
     }), jsx("select", {
       ref: ref,
       id: prefixId$3(id),
@@ -6857,6 +7144,7 @@ function Select(props) {
  * @param {Function} props.getOptions
  * @param {boolean} [props.disabled]
  * @param {Function} [props.validate]
+ * @param {string|import('preact').Component} props.tooltip
  */
 function SelectEntry(props) {
   const {
@@ -6870,7 +7158,8 @@ function SelectEntry(props) {
     disabled,
     onFocus,
     onBlur,
-    validate
+    validate,
+    tooltip
   } = props;
   const options = getOptions(element);
   const globalError = useError(id);
@@ -6902,7 +7191,9 @@ function SelectEntry(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       options: options,
-      disabled: disabled
+      disabled: disabled,
+      tooltip: tooltip,
+      element: element
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -6941,7 +7232,8 @@ function TextArea(props) {
     onFocus,
     onBlur,
     autoResize,
-    rows = autoResize ? 1 : 2
+    rows = autoResize ? 1 : 2,
+    tooltip
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
@@ -6969,7 +7261,12 @@ function TextArea(props) {
     children: [jsx("label", {
       for: prefixId$1(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
     }), jsx("textarea", {
       ref: ref,
       id: prefixId$1(id),
@@ -7018,7 +7315,8 @@ function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
-    autoResize
+    autoResize,
+    tooltip
   } = props;
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
@@ -7052,7 +7350,9 @@ function TextAreaEntry(props) {
       debounce: debounce,
       monospace: monospace,
       disabled: disabled,
-      autoResize: autoResize
+      autoResize: autoResize,
+      tooltip: tooltip,
+      element: element
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -7081,7 +7381,8 @@ function Textfield(props) {
     onInput,
     onFocus,
     onBlur,
-    value = ''
+    value = '',
+    tooltip
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
   const ref = useShowEntryEvent(id);
@@ -7105,7 +7406,12 @@ function Textfield(props) {
     children: [jsx("label", {
       for: prefixId(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
     }), jsx("input", {
       ref: ref,
       id: prefixId(id),
@@ -7135,6 +7441,7 @@ function Textfield(props) {
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  * @param {Function} props.validate
  */
 function TextfieldEntry(props) {
@@ -7149,7 +7456,8 @@ function TextfieldEntry(props) {
     setValue,
     validate,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
@@ -7180,7 +7488,9 @@ function TextfieldEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
-      value: value
+      value: value,
+      tooltip: tooltip,
+      element: element
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -7201,11 +7511,11 @@ function prefixId(id) {
   return `bio-properties-panel-${id}`;
 }
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const PropertiesPanelContext = createContext({
@@ -7295,8 +7605,8 @@ const PropertiesPanelHeaderProvider = {
   }
 };
 
-/**
- * Provide placeholders for empty and multiple state.
+/**
+ * Provide placeholders for empty and multiple state.
  */
 const PropertiesPanelPlaceholderProvider = {
   getEmpty: () => {
@@ -7368,10 +7678,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');
@@ -7423,6 +7733,7 @@ function AltText(props) {
     getValue,
     id,
     label: 'Alternative text',
+    tooltip: 'Descriptive text for screen reader accessibility.',
     setValue,
     singleLine: true,
     variables
@@ -7826,6 +8137,7 @@ function Disabled(props) {
     getValue,
     id,
     label: 'Disabled',
+    tooltip: 'Field cannot be edited by the end-user, and the data is not submitted.',
     inline: true,
     setValue
   });
@@ -7969,6 +8281,7 @@ function Key$1(props) {
     getValue,
     id,
     label: 'Key',
+    tooltip: 'Use a unique "key" to link the form element and the related input/output data. When dealing with nested data, break it down in the user task\'s input mapping before using it.',
     setValue,
     validate
   });
@@ -8029,7 +8342,7 @@ function Label$1(props) {
     return get(field, path, '');
   };
   const setValue = value => {
-    return editField(field, path, value);
+    return editField(field, path, value || '');
   };
   return FeelTemplatingEntry({
     debounce,
@@ -8057,7 +8370,7 @@ function DateLabel(props) {
     return get(field, path, '');
   };
   const setValue = value => {
-    return editField(field, path, value);
+    return editField(field, path, value || '');
   };
   return FeelTemplatingEntry({
     debounce,
@@ -8085,7 +8398,7 @@ function TimeLabel(props) {
     return get(field, path, '');
   };
   const setValue = value => {
-    return editField(field, path, value);
+    return editField(field, path, value || '');
   };
   return FeelTemplatingEntry({
     debounce,
@@ -8144,6 +8457,7 @@ function Source(props) {
     getValue,
     id,
     label: 'Image source',
+    tooltip: 'Link referring to a hosted image, or use a data URI directly to embed image data into the form.',
     setValue,
     singleLine: true,
     variables
@@ -8905,14 +9219,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 {
@@ -8921,14 +9235,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) => {
@@ -9300,6 +9614,7 @@ function Readonly(props) {
     getValue,
     id,
     label: 'Read only',
+    tooltip: 'Field cannot be edited by the end-user, but the data will still be submitted.',
     setValue,
     variables
   });
@@ -9753,12 +10068,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.',
     component: Group,
     entries: ValuesSourceSelectEntry({
       ...context,
@@ -9803,7 +10119,7 @@ function ValuesGroups(field, editField) {
   return groups;
 }
 
-function CustomValuesGroup(field, editField) {
+function CustomPropertiesGroup(field, editField) {
   const {
     properties = {},
     type
@@ -9861,19 +10177,20 @@ function CustomValuesGroup(field, editField) {
     id: 'custom-values',
     items,
     label: 'Custom properties',
+    tooltip: 'Add properties directly to the form schema, useful to configure functionality in custom-built task applications and form renderers.',
     shouldSort: false
   };
 }
 
 // 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) => {
@@ -9946,7 +10263,7 @@ function getGroups(field, editField, getService) {
   if (!field) {
     return [];
   }
-  const groups = [GeneralGroup(field, editField, getService), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomValuesGroup(field, editField)];
+  const groups = [GeneralGroup(field, editField, getService), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)];
 
   // contract: if a group returns null, it should not be displayed at all
   return groups.filter(group => group !== null);
@@ -9976,9 +10293,9 @@ function FormPropertiesPanel(props) {
     });
   }, [eventBus, formEditor, selectionModule]);
   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);
@@ -10030,10 +10347,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) {
@@ -10053,8 +10370,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;
@@ -10084,10 +10401,10 @@ var PropertiesPanelModule = {
   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) {
@@ -10096,10 +10413,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, {
@@ -10108,17 +10425,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;
@@ -10152,48 +10469,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 = createFormContainer();
     this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -10204,15 +10521,15 @@ class FormEditor {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {any}
+    /**
+     * @private
+     * @type {any}
      */
     this.exporter = exporter;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       properties,
@@ -10241,10 +10558,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) => {
@@ -10273,15 +10590,15 @@ class FormEditor {
     });
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   saveSchema() {
     return this.getSchema();
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   getSchema() {
     const {
@@ -10290,8 +10607,8 @@ class FormEditor {
     return exportSchema(schema, this.exporter, schemaVersion);
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -10309,10 +10626,10 @@ class FormEditor {
     this._detach();
   }
 
-  /**
-   * @internal
-   *
-   * @param {boolean} [emit]
+  /**
+   * @internal
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -10326,9 +10643,9 @@ class FormEditor {
     parentNode.removeChild(container);
   }
 
-  /**
-   * @param {any} property
-   * @param {any} value
+  /**
+   * @param {any} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = set$1(this._getState().properties, [property], value);
@@ -10337,21 +10654,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 {
@@ -10373,22 +10690,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 = {
@@ -10398,15 +10715,15 @@ class FormEditor {
     this._emit('changed', this._getState());
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getModules() {
     return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);