@bpmn-io/form-js-editor 1.11.3 → 1.13.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import Ids from 'ids';
-import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, ExpressionField, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, getScrollContainer, Importer, PathRegistry, FormLayouter, FieldFactory, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, ExpressionField, DocumentPreview, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, getScrollContainer, Importer, PathRegistry, FormLayouter, FieldFactory, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, isString, uniqueBy, isObject, get, isDefined, set as set$1, reduce, without, isNil, has } from 'min-dash';
 import classnames from 'classnames';
@@ -9,7 +9,7 @@ import { createContext, Fragment, render, createElement } from 'preact';
 import * as React from 'preact/compat';
 import { createPortal, useRef as useRef$1, useContext as useContext$1, useEffect as useEffect$1, forwardRef } from 'preact/compat';
 import dragula from '@bpmn-io/draggle';
-import { classes, query, closest, event, matches, domify } from 'min-dom';
+import { classes, query, event, domify } from 'min-dom';
 import { arrayMoveMutable } from 'array-move';
 import { FeelersEditor } from 'feelers';
 import FeelEditor from '@bpmn-io/feel-editor';
@@ -1182,7 +1182,37 @@ EditorExpressionField.config = {
   escapeGridRender: false
 };
 
-const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField];
+function EditorDocumentPreview(props) {
+  const {
+    field,
+    domId
+  } = props;
+  const {
+    label
+  } = field;
+  const Icon = iconsByType(field.type);
+  return jsxs("div", {
+    class: editorFormFieldClasses(field.type),
+    children: [jsx(Label$3, {
+      id: domId,
+      label: label
+    }), jsx("div", {
+      class: "fjs-documentPreview-placeholder",
+      id: domId,
+      children: jsxs("p", {
+        class: "fjs-documentPreview-placeholder-text",
+        children: [jsx(Icon, {
+          width: "32",
+          height: "24",
+          viewBox: "0 0 56 56"
+        }), "Document preview"]
+      })
+    })]
+  });
+}
+EditorDocumentPreview.config = DocumentPreview.config;
+
+const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField, EditorDocumentPreview];
 
 class EditorFormFields extends FormFields {
   constructor() {
@@ -2273,13 +2303,17 @@ function Element$1(props) {
       ref.current.focus();
     }
   }, [selection, field]);
-  function onClick(event) {
-    event.stopPropagation();
-    selection.toggle(field);
-
-    // properly focus on field
-    ref.current.focus();
-  }
+  const onClick = useCallback(event => {
+    // TODO(nikku): refactor this to use proper DOM delegation
+    const fieldEl = event.target.closest('[data-id]');
+    if (!fieldEl) {
+      return;
+    }
+    const id = fieldEl.dataset.id;
+    if (id === field.id) {
+      selection.toggle(field);
+    }
+  }, [field, selection]);
   const isSelected = selection.isSelected(field);
   const classString = useMemo(() => {
     const classes = [];
@@ -2671,6 +2705,34 @@ class Renderer {
       container,
       compact = false
     } = renderConfig;
+    eventBus.on('form.init', function () {
+      // emit <canvas.init> so dependent components can hook in
+      // this is required to register keyboard bindings
+      eventBus.fire('canvas.init', {
+        svg: container,
+        viewport: null
+      });
+    });
+
+    // focus container on over if no selection
+    container.addEventListener('mouseover', function () {
+      if (document.activeElement === document.body) {
+        container.focus({
+          preventScroll: true
+        });
+      }
+    });
+
+    // ensure we focus the container if the users clicks
+    // inside; this follows input focus handling closely
+    container.addEventListener('click', function (event) {
+      // force focus when clicking container
+      if (!container.contains(document.activeElement)) {
+        container.focus({
+          preventScroll: true
+        });
+      }
+    });
     const App = () => {
       const [state, setState] = useState(formEditor._getState());
       const formEditorContext = {
@@ -3108,8 +3170,8 @@ function isRedo(event) {
 
 var KEYDOWN_EVENT = 'keyboard.keydown',
   KEYUP_EVENT = 'keyboard.keyup';
-var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
 var DEFAULT_PRIORITY$2 = 1000;
+var compatMessage = 'Keyboard binding is now implicit; explicit binding to an element got removed. For more information, see https://github.com/bpmn-io/diagram-js/issues/661';
 
 /**
  * A keyboard abstraction that may be activated and
@@ -3129,16 +3191,16 @@ var DEFAULT_PRIORITY$2 = 1000;
  *
  * All events contain one field which is node.
  *
- * A default binding for the keyboard may be specified via the
- * `keyboard.bindTo` configuration option.
+ * Specify the initial keyboard binding state via the
+ * `keyboard.bind=true|false` configuration option.
  *
  * @param {Object} config
- * @param {EventTarget} [config.bindTo]
+ * @param {boolean} [config.bind]
  * @param {EventBus} eventBus
  */
 function Keyboard(config, eventBus) {
   var self = this;
-  this._config = config || {};
+  this._config = config = config || {};
   this._eventBus = eventBus;
   this._keydownHandler = this._keydownHandler.bind(this);
   this._keyupHandler = this._keyupHandler.bind(this);
@@ -3148,16 +3210,16 @@ function Keyboard(config, eventBus) {
     self._fire('destroy');
     self.unbind();
   });
-  eventBus.on('diagram.init', function () {
-    self._fire('init');
-  });
-  eventBus.on('attach', function () {
-    if (config && config.bindTo) {
-      self.bind(config.bindTo);
+  if (config.bindTo) {
+    console.error('unsupported configuration <keyboard.bindTo>', new Error(compatMessage));
+  }
+  var bind = config && config.bind !== false;
+  eventBus.on('canvas.init', function (event) {
+    self._target = event.svg;
+    if (bind) {
+      self.bind();
     }
-  });
-  eventBus.on('detach', function () {
-    self.unbind();
+    self._fire('init');
   });
 }
 Keyboard.$inject = ['config.keyboard', 'eventBus'];
@@ -3181,35 +3243,29 @@ Keyboard.prototype._keyHandler = function (event, type) {
   }
 };
 Keyboard.prototype._isEventIgnored = function (event) {
-  if (event.defaultPrevented) {
-    return true;
-  }
-  return (isInput(event.target) || isButton(event.target) && isKey([' ', 'Enter'], event)) && this._isModifiedKeyIgnored(event);
-};
-Keyboard.prototype._isModifiedKeyIgnored = function (event) {
-  if (!isCmd(event)) {
-    return true;
-  }
-  var allowedModifiers = this._getAllowedModifiers(event.target);
-  return allowedModifiers.indexOf(event.key) === -1;
-};
-Keyboard.prototype._getAllowedModifiers = function (element) {
-  var modifierContainer = closest(element, '[' + HANDLE_MODIFIER_ATTRIBUTE + ']', true);
-  if (!modifierContainer || this._node && !this._node.contains(modifierContainer)) {
-    return [];
-  }
-  return modifierContainer.getAttribute(HANDLE_MODIFIER_ATTRIBUTE).split(',');
+  return false;
 };
 
 /**
  * Bind keyboard events to the given DOM node.
  *
+ * @overlord
+ * @deprecated No longer in use since version 15.0.0.
+ *
  * @param {EventTarget} node
  */
+/**
+ * Bind keyboard events to the canvas node.
+ */
 Keyboard.prototype.bind = function (node) {
+  // legacy <node> argument provided
+  if (node) {
+    console.error('unsupported argument <node>', new Error(compatMessage));
+  }
+
   // make sure that the keyboard is only bound once to the DOM
   this.unbind();
-  this._node = node;
+  node = this._node = this._target;
 
   // bind key events
   event.bind(node, 'keydown', this._keydownHandler);
@@ -3276,15 +3332,6 @@ Keyboard.prototype.isCmd = isCmd;
 Keyboard.prototype.isShift = isShift;
 Keyboard.prototype.isKey = isKey;
 
-// helpers ///////
-
-function isInput(target) {
-  return target && (matches(target, 'input, textarea') || target.contentEditable === 'true');
-}
-function isButton(target) {
-  return target && matches(target, 'button, input[type=submit], input[type=button], a[href], [aria-role=button]');
-}
-
 var LOW_PRIORITY$1 = 500;
 
 /**
@@ -3448,7 +3495,7 @@ class FormEditorKeyboardBindings {
       const {
         keyEvent
       } = context;
-      if (isCmd(keyEvent) && !isShift(keyEvent) && isKey(KEYS_UNDO, keyEvent)) {
+      if (isUndo(keyEvent)) {
         editorActions.trigger('undo');
         return true;
       }
@@ -3461,7 +3508,7 @@ class FormEditorKeyboardBindings {
       const {
         keyEvent
       } = context;
-      if (isCmd(keyEvent) && (isKey(KEYS_REDO, keyEvent) || isKey(KEYS_UNDO, keyEvent) && isShift(keyEvent))) {
+      if (isRedo(keyEvent)) {
         editorActions.trigger('redo');
         return true;
       }
@@ -5276,6 +5323,21 @@ ArrowIcon.defaultProps = {
   width: "16",
   height: "16"
 };
+var CloseIcon = function CloseIcon(props) {
+  return jsx("svg", {
+    ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+      fill: "currentColor"
+    })
+  });
+};
+CloseIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16"
+};
 var CreateIcon = function CreateIcon(props) {
   return jsx("svg", {
     ...props,
@@ -5363,26 +5425,17 @@ FeelIcon$1.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-var HelpIcon = function HelpIcon(props) {
+var LaunchIcon = function LaunchIcon(props) {
   return jsxs("svg", {
     ...props,
     children: [jsx("path", {
-      d: "M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2Zm0 26a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z"
-    }), jsx("circle", {
-      cx: "16",
-      cy: "23.5",
-      r: "1.5"
+      d: "M26 28H6a2.003 2.003 0 0 1-2-2V6a2.003 2.003 0 0 1 2-2h10v2H6v20h20V16h2v10a2.003 2.003 0 0 1-2 2Z"
     }), jsx("path", {
-      d: "M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9Z"
-    }), jsx("path", {
-      style: {
-        fill: "none"
-      },
-      d: "M0 0h32v32H0z"
+      d: "M20 2v2h6.586L18 12.586 19.414 14 28 5.414V12h2V2H20z"
     })]
   });
 };
-HelpIcon.defaultProps = {
+LaunchIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 32 32"
 };
@@ -5404,21 +5457,6 @@ PopupIcon.defaultProps = {
   height: "16",
   viewBox: "0 0 32 32"
 };
-var CloseIcon = function CloseIcon(props) {
-  return jsx("svg", {
-    ...props,
-    children: jsx("path", {
-      fillRule: "evenodd",
-      d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
-      fill: "currentColor"
-    })
-  });
-};
-CloseIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
 function Header(props) {
   const {
     element,
@@ -5457,7 +5495,7 @@ function Header(props) {
     }), jsx("div", {
       class: "bio-properties-panel-header-actions",
       children: documentationRef ? jsx("a", {
-        rel: "noopener",
+        rel: "noreferrer",
         class: "bio-properties-panel-header-link",
         href: documentationRef,
         title: "Open documentation",
@@ -5475,19 +5513,19 @@ const ErrorsContext = createContext({
   errors: {}
 });
 
-/**
- * @typedef {Function} <propertiesPanel.showEntry> callback
- *
- * @example
- *
- * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
- *   // ...
- * });
- *
- * @param {Object} context
- * @param {boolean} [context.focus]
- *
- * @returns void
+/**
+ * @typedef {Function} <propertiesPanel.showEntry> callback
+ *
+ * @example
+ *
+ * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+ *   // ...
+ * });
+ *
+ * @param {Object} context
+ * @param {boolean} [context.focus]
+ *
+ * @returns void
  */
 
 const EventContext = createContext({
@@ -5504,20 +5542,20 @@ const TooltipContext = createContext({
   getTooltipForId: () => {}
 });
 
-/**
- * Accesses the global TooltipContext and returns a tooltip for a given id and element.
- *
- * @example
- * ```jsx
- * function TextField(props) {
- *   const tooltip = useTooltipContext('input1', element);
- * }
- * ```
- *
- * @param {string} id
- * @param {object} element
- *
- * @returns {string}
+/**
+ * Accesses the global TooltipContext and returns a tooltip for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const tooltip = useTooltipContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {object} element
+ *
+ * @returns {string}
  */
 function useTooltipContext(id, element) {
   const {
@@ -5669,20 +5707,20 @@ function prefixId$9(id) {
   return `bio-properties-panel-${id}`;
 }
 
-/**
- * Accesses the global DescriptionContext and returns a description for a given id and element.
- *
- * @example
- * ```jsx
- * function TextField(props) {
- *   const description = useDescriptionContext('input1', element);
- * }
- * ```
- *
- * @param {string} id
- * @param {object} element
- *
- * @returns {string}
+/**
+ * Accesses the global DescriptionContext and returns a description for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const description = useDescriptionContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {object} element
+ *
+ * @returns {string}
  */
 function useDescriptionContext(id, element) {
   const {
@@ -5703,11 +5741,11 @@ function useErrors() {
   return errors;
 }
 
-/**
- * Subscribe to an event immediately. Update subscription after inputs changed.
- *
- * @param {string} event
- * @param {Function} callback
+/**
+ * Subscribe to an event immediately. Update subscription after inputs changed.
+ *
+ * @param {string} event
+ * @param {Function} callback
  */
 function useEvent(event, callback, eventBus) {
   const eventContext = useContext(EventContext);
@@ -5737,20 +5775,20 @@ function useEvent(event, callback, eventBus) {
   }, [callback, event, eventBus]);
 }
 
-/**
- * Creates a state that persists in the global LayoutContext.
- *
- * @example
- * ```jsx
- * function Group(props) {
- *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
- * }
- * ```
- *
- * @param {(string|number)[]} path
- * @param {any} [defaultValue]
- *
- * @returns {[ any, Function ]}
+/**
+ * Creates a state that persists in the global LayoutContext.
+ *
+ * @example
+ * ```jsx
+ * function Group(props) {
+ *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+ * }
+ * ```
+ *
+ * @param {(string|number)[]} path
+ * @param {any} [defaultValue]
+ *
+ * @returns {[ any, Function ]}
  */
 function useLayoutState(path, defaultValue) {
   const {
@@ -5764,11 +5802,11 @@ function useLayoutState(path, defaultValue) {
   return [layoutForKey, setState];
 }
 
-/**
- * @pinussilvestrus: we need to introduce our own hook to persist the previous
- * state on updates.
- *
- * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+/**
+ * @pinussilvestrus: we need to introduce our own hook to persist the previous
+ * state on updates.
+ *
+ * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
  */
 
 function usePrevious(value) {
@@ -5779,12 +5817,12 @@ function usePrevious(value) {
   return ref.current;
 }
 
-/**
- * Subscribe to `propertiesPanel.showEntry`.
- *
- * @param {string} id
- *
- * @returns {import('preact').Ref}
+/**
+ * Subscribe to `propertiesPanel.showEntry`.
+ *
+ * @param {string} id
+ *
+ * @returns {import('preact').Ref}
  */
 function useShowEntryEvent(id) {
   const {
@@ -5815,20 +5853,20 @@ function useShowEntryEvent(id) {
   return ref;
 }
 
-/**
- * @callback setSticky
- * @param {boolean} value
+/**
+ * @callback setSticky
+ * @param {boolean} value
  */
 
-/**
- * Use IntersectionObserver to identify when DOM element is in sticky mode.
- * If sticky is observered setSticky(true) will be called.
- * If sticky mode is left, setSticky(false) will be called.
- *
- *
- * @param {Object} ref
- * @param {string} scrollContainerSelector
- * @param {setSticky} setSticky
+/**
+ * Use IntersectionObserver to identify when DOM element is in sticky mode.
+ * If sticky is observered setSticky(true) will be called.
+ * If sticky mode is left, setSticky(false) will be called.
+ *
+ *
+ * @param {Object} ref
+ * @param {string} scrollContainerSelector
+ * @param {setSticky} setSticky
  */
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
   const [scrollContainer, setScrollContainer] = useState(query(scrollContainerSelector));
@@ -5882,19 +5920,19 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
   }, [ref.current, scrollContainer, setSticky]);
 }
 
-/**
- * Creates a static function reference with changing body.
- * This is necessary when external libraries require a callback function
- * that has references to state variables.
- *
- * Usage:
- * const callback = useStaticCallback((val) => {val === currentState});
- *
- * The `callback` reference is static and can be safely used in external
- * libraries or as a prop that does not cause rerendering of children.
- *
- * @param {Function} callback function with changing reference
- * @returns {Function} static function reference
+/**
+ * Creates a static function reference with changing body.
+ * This is necessary when external libraries require a callback function
+ * that has references to state variables.
+ *
+ * Usage:
+ * const callback = useStaticCallback((val) => {val === currentState});
+ *
+ * The `callback` reference is static and can be safely used in external
+ * libraries or as a prop that does not cause rerendering of children.
+ *
+ * @param {Function} callback function with changing reference
+ * @returns {Function} static function reference
  */
 function useStaticCallback(callback) {
   const callbackRef = useRef(callback);
@@ -6035,13 +6073,13 @@ function DataMarker(props) {
   return null;
 }
 
-/**
- * @typedef { {
- *  text: (element: object) => string,
- *  icon?: (element: Object) => import('preact').Component
- * } } PlaceholderDefinition
- *
- * @param { PlaceholderDefinition } props
+/**
+ * @typedef { {
+ *  text: (element: object) => string,
+ *  icon?: (element: Object) => import('preact').Component
+ * } } PlaceholderDefinition
+ *
+ * @param { PlaceholderDefinition } props
  */
 function Placeholder(props) {
   const {
@@ -6078,9 +6116,9 @@ function Description$1(props) {
 }
 const noop$6 = () => {};
 
-/**
- * Buffer `.focus()` calls while the editor is not initialized.
- * Set Focus inside when the editor is ready.
+/**
+ * Buffer `.focus()` calls while the editor is not initialized.
+ * Set Focus inside when the editor is ready.
  */
 const useBufferedFocus$1 = function (editor, ref) {
   const [buffer, setBuffer] = useState(undefined);
@@ -6180,9 +6218,9 @@ const CodeEditor$1 = forwardRef((props, ref) => {
 });
 const noop$5 = () => {};
 
-/**
- * Buffer `.focus()` calls while the editor is not initialized.
- * Set Focus inside when the editor is ready.
+/**
+ * Buffer `.focus()` calls while the editor is not initialized.
+ * Set Focus inside when the editor is ready.
  */
 const useBufferedFocus = function (editor, ref) {
   const [buffer, setBuffer] = useState(undefined);
@@ -6231,10 +6269,10 @@ const CodeEditor = forwardRef((props, ref) => {
   useEffect(() => {
     let editor;
 
-    /* Trigger FEEL toggle when
-     *
-     * - `backspace` is pressed
-     * - AND the cursor is at the beginning of the input
+    /* Trigger FEEL toggle when
+     *
+     * - `backspace` is pressed
+     * - AND the cursor is at the beginning of the input
      */
     const onKeyDown = e => {
       if (e.key !== 'Backspace' || !editor) {
@@ -6323,10 +6361,10 @@ function FeelIndicator(props) {
 }
 const noop$4 = () => {};
 
-/**
- * @param {Object} props
- * @param {Object} props.label
- * @param {String} props.feel
+/**
+ * @param {Object} props
+ * @param {Object} props.label
+ * @param {String} props.feel
  */
 function FeelIcon(props) {
   const {
@@ -6360,22 +6398,22 @@ const FeelPopupContext = createContext({
   source: null
 });
 
-/**
- * Add a dragger that calls back the passed function with
- * { event, delta } on drag.
- *
- * @example
- *
- * function dragMove(event, delta) {
- *   // we are dragging (!!)
- * }
- *
- * domElement.addEventListener('dragstart', dragger(dragMove));
- *
- * @param {Function} fn
- * @param {Element} [dragPreview]
- *
- * @return {Function} drag start callback function
+/**
+ * Add a dragger that calls back the passed function with
+ * { event, delta } on drag.
+ *
+ * @example
+ *
+ * function dragMove(event, delta) {
+ *   // we are dragging (!!)
+ * }
+ *
+ * domElement.addEventListener('dragstart', dragger(dragMove));
+ *
+ * @param {Function} fn
+ * @param {Element} [dragPreview]
+ *
+ * @return {Function} drag start callback function
  */
 function createDragger(fn, dragPreview) {
   let self;
@@ -6429,23 +6467,23 @@ function emptyCanvas() {
 }
 const noop$3 = () => {};
 
-/**
- * A generic popup component.
- *
- * @param {Object} props
- * @param {HTMLElement} [props.container]
- * @param {string} [props.className]
- * @param {boolean} [props.delayInitialFocus]
- * @param {{x: number, y: number}} [props.position]
- * @param {number} [props.width]
- * @param {number} [props.height]
- * @param {Function} props.onClose
- * @param {Function} [props.onPostActivate]
- * @param {Function} [props.onPostDeactivate]
- * @param {boolean} [props.returnFocus]
- * @param {boolean} [props.closeOnEscape]
- * @param {string} props.title
- * @param {Ref} [ref]
+/**
+ * A generic popup component.
+ *
+ * @param {Object} props
+ * @param {HTMLElement} [props.container]
+ * @param {string} [props.className]
+ * @param {boolean} [props.delayInitialFocus]
+ * @param {{x: number, y: number}} [props.position]
+ * @param {number} [props.width]
+ * @param {number} [props.height]
+ * @param {Function} props.onClose
+ * @param {Function} [props.onPostActivate]
+ * @param {Function} [props.onPostDeactivate]
+ * @param {boolean} [props.returnFocus]
+ * @param {boolean} [props.closeOnEscape]
+ * @param {string} props.title
+ * @param {Ref} [ref]
  */
 function PopupComponent(props, globalRef) {
   const {
@@ -6663,12 +6701,12 @@ function getContainerNode(node) {
 const FEEL_POPUP_WIDTH = 700;
 const FEEL_POPUP_HEIGHT = 250;
 
-/**
- * FEEL popup component, built as a singleton. Emits lifecycle events as follows:
- *  - `feelPopup.open` - fired before the popup is mounted
- *  - `feelPopup.opened` - fired after the popup is mounted. Event context contains the DOM node of the popup
- *  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup
- *  - `feelPopup.closed` - fired after the popup is unmounted
+/**
+ * FEEL popup component, built as a singleton. Emits lifecycle events as follows:
+ *  - `feelPopup.open` - fired before the popup is mounted
+ *  - `feelPopup.opened` - fired after the popup is mounted. Event context contains the DOM node of the popup
+ *  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup
+ *  - `feelPopup.closed` - fired after the popup is unmounted
  */
 function FEELPopupRoot(props) {
   const {
@@ -6678,7 +6716,8 @@ function FEELPopupRoot(props) {
       on() {},
       off() {}
     },
-    popupContainer
+    popupContainer,
+    getPopupLinks = () => []
   } = props;
   const prevElement = usePrevious(element);
   const [popupConfig, setPopupConfig] = useState({});
@@ -6753,6 +6792,7 @@ function FEELPopupRoot(props) {
     children: [open && jsx(FeelPopupComponent, {
       onClose: handleClose,
       container: popupContainer,
+      getLinks: getPopupLinks,
       sourceElement: sourceElement,
       emit: emit,
       ...popupConfig
@@ -6762,6 +6802,7 @@ function FEELPopupRoot(props) {
 function FeelPopupComponent(props) {
   const {
     container,
+    getLinks,
     id,
     hostLanguage,
     onInput,
@@ -6832,24 +6873,24 @@ function FeelPopupComponent(props) {
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [jsxs(Popup.Title, {
+    children: [jsx(Popup.Title, {
       title: title,
       emit: emit,
       showCloseButton: true,
       closeButtonTooltip: "Save and close",
       onClose: onClose,
       draggable: true,
-      children: [type === 'feel' && jsxs("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
-        target: "_blank",
-        class: "bio-properties-panel-feel-popup__title-link",
-        children: ["Learn FEEL expressions", jsx(HelpIcon, {})]
-      }), type === 'feelers' && jsxs("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/forms/configuration/forms-config-templating-syntax/",
-        target: "_blank",
-        class: "bio-properties-panel-feel-popup__title-link",
-        children: ["Learn templating", jsx(HelpIcon, {})]
-      })]
+      children: jsx(Fragment$1, {
+        children: getLinks(type).map((link, index) => {
+          return jsxs("a", {
+            rel: "noreferrer",
+            href: link.href,
+            target: "_blank",
+            class: "bio-properties-panel-feel-popup__title-link",
+            children: [link.title, jsx(LaunchIcon, {})]
+          }, index);
+        })
+      })
     }), jsx(Popup.Body, {
       children: jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
@@ -6892,11 +6933,11 @@ function autoCompletionOpen(element) {
   return element.closest('.cm-editor').querySelector('.cm-tooltip-autocomplete');
 }
 
-/**
- * This hook behaves like useEffect, but does not trigger on the first render.
- *
- * @param {Function} effect
- * @param {Array} deps
+/**
+ * This hook behaves like useEffect, but does not trigger on the first render.
+ *
+ * @param {Function} effect
+ * @param {Array} deps
  */
 function useUpdateEffect(effect, deps) {
   const isMounted = useRef(false);
@@ -6973,19 +7014,19 @@ function ToggleSwitch(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.label
- * @param {String} props.switcherLabel
- * @param {Boolean} props.inline
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {string|import('preact').Component} props.tooltip
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {String} props.switcherLabel
+ * @param {Boolean} props.inline
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  */
 function ToggleSwitchEntry(props) {
   const {
@@ -7092,22 +7133,22 @@ function NumberField(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {String} props.step
- * @param {Function} props.validate
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {String} props.step
+ * @param {Function} props.validate
  */
 function NumberFieldEntry(props) {
   const {
@@ -7592,26 +7633,26 @@ forwardRef((props, ref) => {
   });
 });
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {string} [props.placeholder]
- * @param {string|import('preact').Component} props.tooltip
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string} [props.placeholder]
+ * @param {string|import('preact').Component} props.tooltip
  */
 function FeelEntry(props) {
   const {
@@ -7698,27 +7739,27 @@ function FeelEntry(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.max
- * @param {String} props.min
- * @param {String} props.step
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {String} props.step
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 function FeelNumberEntry(props) {
   return jsx(FeelEntry, {
@@ -7728,24 +7769,24 @@ function FeelNumberEntry(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 function FeelToggleSwitchEntry(props) {
   return jsx(FeelEntry, {
@@ -7755,26 +7796,26 @@ function FeelToggleSwitchEntry(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.hostLanguage
- * @param {Boolean} props.singleLine
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.hostLanguage
+ * @param {Boolean} props.singleLine
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 function FeelTemplatingEntry(props) {
   return jsx(FeelEntry, {
@@ -7842,84 +7883,85 @@ const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
 const DEFAULT_TOOLTIP = {};
 
-/**
- * @typedef { {
- *    component: import('preact').Component,
- *    id: String,
- *    isEdited?: Function
- * } } EntryDefinition
- *
- * @typedef { {
- *    autoFocusEntry: String,
- *    autoOpen?: Boolean,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    remove: (event: MouseEvent) => void
- * } } ListItemDefinition
- *
- * @typedef { {
- *    add: (event: MouseEvent) => void,
- *    component: import('preact').Component,
- *    element: Object,
- *    id: String,
- *    items: Array<ListItemDefinition>,
- *    label: String,
- *    shouldOpen?: Boolean
- * } } ListGroupDefinition
- *
- * @typedef { {
- *    component?: import('preact').Component,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    shouldOpen?: Boolean
- * } } GroupDefinition
- *
- *  @typedef { {
- *    [id: String]: GetDescriptionFunction
- * } } DescriptionConfig
- *
- *  @typedef { {
- *    [id: String]: GetTooltipFunction
- * } } TooltipConfig
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetDescriptionFunction
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetTooltipFunction
- *
- * @typedef { {
- *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
- *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
- * } } PlaceholderProvider
- *
+/**
+ * @typedef { {
+ *    component: import('preact').Component,
+ *    id: String,
+ *    isEdited?: Function
+ * } } EntryDefinition
+ *
+ * @typedef { {
+ *    autoFocusEntry: String,
+ *    autoOpen?: Boolean,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    remove: (event: MouseEvent) => void
+ * } } ListItemDefinition
+ *
+ * @typedef { {
+ *    add: (event: MouseEvent) => void,
+ *    component: import('preact').Component,
+ *    element: Object,
+ *    id: String,
+ *    items: Array<ListItemDefinition>,
+ *    label: String,
+ *    shouldOpen?: Boolean
+ * } } ListGroupDefinition
+ *
+ * @typedef { {
+ *    component?: import('preact').Component,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    shouldOpen?: Boolean
+ * } } GroupDefinition
+ *
+ *  @typedef { {
+ *    [id: String]: GetDescriptionFunction
+ * } } DescriptionConfig
+ *
+ *  @typedef { {
+ *    [id: String]: GetTooltipFunction
+ * } } TooltipConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetTooltipFunction
+ *
+ * @typedef { {
+ *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+ *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+ * } } PlaceholderProvider
+ *
  */
 
-/**
- * A basic properties panel component. Describes *how* content will be rendered, accepts
- * data from implementor to describe *what* will be rendered.
- *
- * @param {Object} props
- * @param {Object|Array} props.element
- * @param {import('./components/Header').HeaderProvider} props.headerProvider
- * @param {PlaceholderProvider} [props.placeholderProvider]
- * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
- * @param {Object} [props.layoutConfig]
- * @param {Function} [props.layoutChanged]
- * @param {DescriptionConfig} [props.descriptionConfig]
- * @param {Function} [props.descriptionLoaded]
- * @param {TooltipConfig} [props.tooltipConfig]
- * @param {Function} [props.tooltipLoaded]
- * @param {HTMLElement} [props.feelPopupContainer]
- * @param {Object} [props.eventBus]
+/**
+ * A basic properties panel component. Describes *how* content will be rendered, accepts
+ * data from implementor to describe *what* will be rendered.
+ *
+ * @param {Object} props
+ * @param {Object|Array} props.element
+ * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {PlaceholderProvider} [props.placeholderProvider]
+ * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+ * @param {Object} [props.layoutConfig]
+ * @param {Function} [props.layoutChanged]
+ * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {Function} [props.descriptionLoaded]
+ * @param {TooltipConfig} [props.tooltipConfig]
+ * @param {Function} [props.tooltipLoaded]
+ * @param {HTMLElement} [props.feelPopupContainer]
+ * @param {Function} [props.getFeelPopupLinks]
+ * @param {Object} [props.eventBus]
  */
 function PropertiesPanel$1(props) {
   const {
@@ -7934,6 +7976,7 @@ function PropertiesPanel$1(props) {
     tooltipConfig,
     tooltipLoaded,
     feelPopupContainer,
+    getFeelPopupLinks,
     eventBus
   } = props;
 
@@ -8038,6 +8081,7 @@ function PropertiesPanel$1(props) {
                 element: element,
                 eventBus: eventBus,
                 popupContainer: feelPopupContainer,
+                getPopupLinks: getFeelPopupLinks,
                 children: jsxs("div", {
                   class: "bio-properties-panel",
                   children: [jsx(Header, {
@@ -8090,11 +8134,11 @@ function createTooltipContext(overrides = {}) {
 
 // hooks //////////////////
 
-/**
- * This hook behaves like useLayoutEffect, but does not trigger on the first render.
- *
- * @param {Function} effect
- * @param {Array} deps
+/**
+ * This hook behaves like useLayoutEffect, but does not trigger on the first render.
+ *
+ * @param {Function} effect
+ * @param {Array} deps
  */
 function useUpdateLayoutEffect(effect, deps) {
   const isMounted = useRef(false);
@@ -8107,20 +8151,20 @@ function useUpdateLayoutEffect(effect, deps) {
   }, deps);
 }
 
-/**
- * @typedef { {
- *   [key: string]: string;
- * } } TranslateReplacements
+/**
+ * @typedef { {
+ *   [key: string]: string;
+ * } } TranslateReplacements
  */
 
-/**
- * A simple translation stub to be used for multi-language support.
- * Can be easily replaced with a more sophisticated solution.
- *
- * @param {string} template to interpolate
- * @param {TranslateReplacements} [replacements] a map with substitutes
- *
- * @return {string} the translated string
+/**
+ * A simple translation stub to be used for multi-language support.
+ * Can be easily replaced with a more sophisticated solution.
+ *
+ * @param {string} template to interpolate
+ * @param {TranslateReplacements} [replacements] a map with substitutes
+ *
+ * @return {string} the translated string
  */
 function translateFallback(template, replacements) {
   replacements = replacements || {};
@@ -8229,8 +8273,8 @@ function ListItem(props) {
 }
 const noop$1 = () => {};
 
-/**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
 function ListGroup(props) {
   const {
@@ -8421,18 +8465,18 @@ function Checkbox(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {string|import('preact').Component} props.tooltip
- * @param {boolean} [props.disabled]
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
+ * @param {boolean} [props.disabled]
  */
 function CheckboxEntry(props) {
   const {
@@ -8552,20 +8596,20 @@ function Select(props) {
   });
 }
 
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} [props.description]
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {Function} props.getOptions
- * @param {boolean} [props.disabled]
- * @param {Function} [props.validate]
- * @param {string|import('preact').Component} props.tooltip
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} [props.description]
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {Function} props.getOptions
+ * @param {boolean} [props.disabled]
+ * @param {Function} [props.validate]
+ * @param {string|import('preact').Component} props.tooltip
  */
 function SelectEntry(props) {
   const {
@@ -8856,20 +8900,20 @@ function Textfield(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {string|import('preact').Component} props.tooltip
- * @param {Function} props.validate
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
+ * @param {Function} props.validate
  */
 function TextfieldEntry(props) {
   const {
@@ -8944,20 +8988,20 @@ class FeelPopupModule {
     this._eventBus = eventBus;
   }
 
-  /**
-   * Check if the FEEL popup is open.
-   * @return {Boolean}
+  /**
+   * Check if the FEEL popup is open.
+   * @return {Boolean}
    */
   isOpen() {
     return this._eventBus.fire('feelPopup._isOpen');
   }
 
-  /**
-   * Open the FEEL popup.
-   *
-   * @param {String} entryId
-   * @param {Object} popupConfig
-   * @param {HTMLElement} sourceElement
+  /**
+   * Open the FEEL popup.
+   *
+   * @param {String} entryId
+   * @param {Object} popupConfig
+   * @param {HTMLElement} sourceElement
    */
   open(entryId, popupConfig, sourceElement) {
     return this._eventBus.fire('feelPopup._open', {
@@ -8967,8 +9011,8 @@ class FeelPopupModule {
     });
   }
 
-  /**
-   * Close the FEEL popup.
+  /**
+   * Close the FEEL popup.
    */
   close() {
     return this._eventBus.fire('feelPopup._close');
@@ -9465,7 +9509,7 @@ function isProhibitedPath(path) {
   const prohibitedSegments = ['__proto__', 'prototype', 'constructor'];
   return path.split('.').some(segment => prohibitedSegments.includes(segment));
 }
-const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
+const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table', 'documentPreview'];
 const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea', 'filepicker'];
 const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
 function hasEntryConfigured(formFieldDefinition, entryId) {
@@ -10312,7 +10356,7 @@ function LabelEntry(props) {
       return field.type === 'datetime' && (field.subtype === DATETIME_SUBTYPES.TIME || field.subtype === DATETIME_SUBTYPES.DATETIME);
     }
   });
-  const isSimplyLabled = field => {
+  const isSimplyLabeled = field => {
     return [...INPUTS.filter(input => input !== 'datetime'), ...LABELED_NON_INPUTS].includes(field.type);
   };
   entries.push({
@@ -10321,7 +10365,7 @@ function LabelEntry(props) {
     editField,
     field,
     isEdited: isEdited$6,
-    isDefaultVisible: isSimplyLabled
+    isDefaultVisible: isSimplyLabeled
   });
   return entries;
 }
@@ -10425,6 +10469,7 @@ function getLabelText(type) {
     case 'table':
       return 'Table label';
     case 'iframe':
+    case 'documentPreview':
       return 'Title';
     default:
       return 'Field label';
@@ -10481,7 +10526,7 @@ function Height(props) {
     id,
     getValue,
     setValue,
-    validate: validate$7
+    validate: validate$a
   });
 }
 
@@ -10491,7 +10536,7 @@ function Height(props) {
  * @param {number|void} value
  * @returns {string|null}
  */
-const validate$7 = value => {
+const validate$a = value => {
   if (typeof value !== 'number') {
     return 'A number is required.';
   }
@@ -10556,7 +10601,7 @@ function Url(props) {
     setValue,
     singleLine: true,
     tooltip: getTooltip$1(),
-    validate: validate$6,
+    validate: validate$9,
     variables
   });
 }
@@ -10583,7 +10628,7 @@ function getTooltip$1() {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$6 = value => {
+const validate$9 = value => {
   if (!value || value.startsWith('=')) {
     return;
   }
@@ -10674,7 +10719,7 @@ function Text(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$2,
+    description: description$4,
     element: field,
     getValue,
     id,
@@ -10684,7 +10729,7 @@ function Text(props) {
     variables
   });
 }
-const description$2 = jsxs(Fragment$1, {
+const description$4 = jsxs(Fragment$1, {
   children: ["Supports markdown and templating.", ' ', jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
     target: "_blank",
@@ -10726,13 +10771,13 @@ function Content(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$1,
+    description: description$3,
     element: field,
     getValue,
     id,
     label: 'Content',
     hostLanguage: 'html',
-    validate: validate$5,
+    validate: validate$8,
     setValue,
     variables
   });
@@ -10740,7 +10785,7 @@ function Content(props) {
 
 // helpers //////////
 
-const description$1 = jsxs(Fragment$1, {
+const description$3 = jsxs(Fragment$1, {
   children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
     target: "_blank",
@@ -10752,7 +10797,7 @@ const description$1 = jsxs(Fragment$1, {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$5 = value => {
+const validate$8 = value => {
   // allow empty state
   if (typeof value !== 'string' || value === '') {
     return null;
@@ -11591,7 +11636,7 @@ function InputValuesKey(props) {
     id,
     label: 'Input values key',
     setValue,
-    validate: validate$4
+    validate: validate$7
   });
 }
 
@@ -11601,7 +11646,7 @@ function InputValuesKey(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$4 = value => {
+const validate$7 = value => {
   if (typeof value !== 'string' || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12044,7 +12089,7 @@ function Source(props) {
     setValue,
     singleLine: true,
     variables,
-    validate: validate$3
+    validate: validate$6
   });
 }
 
@@ -12054,7 +12099,7 @@ function Source(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$3 = value => {
+const validate$6 = value => {
   if (!isString(value) || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12158,7 +12203,7 @@ function RowCount(props) {
     id,
     getValue,
     setValue,
-    validate: validate$2
+    validate: validate$5
   });
 }
 
@@ -12168,7 +12213,7 @@ function RowCount(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$2 = value => {
+const validate$5 = value => {
   if (isNil(value)) {
     return null;
   }
@@ -12342,7 +12387,7 @@ function ColumnsExpression(props) {
     setValue,
     singleLine: true,
     variables,
-    validate: validate$1
+    validate: validate$4
   });
 }
 
@@ -12352,7 +12397,7 @@ function ColumnsExpression(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$1 = value => {
+const validate$4 = value => {
   if (!isString(value) || value.length === 0 || value === '=') {
     return 'Must not be empty.';
   }
@@ -12450,7 +12495,7 @@ function Key(props) {
     id,
     label: 'Key',
     setValue,
-    validate
+    validate: validate$3
   });
 }
 
@@ -12460,7 +12505,7 @@ function Key(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-function validate(value) {
+function validate$3(value) {
   if (!isString(value) || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12598,13 +12643,13 @@ function Accept(props) {
     singleLine: true,
     setValue,
     variables,
-    description
+    description: description$2
   });
 }
 
 // helpers //////////
 
-const description = jsxs(Fragment$1, {
+const description$2 = jsxs(Fragment$1, {
   children: ["A comma-separated list of", ' ', jsx("a", {
     href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
     target: "_blank",
@@ -12658,6 +12703,236 @@ function Multiple(props) {
   });
 }
 
+function DocumentsDataSourceEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'dataSource',
+    component: DocumentsDataSource,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'documentPreview'
+  });
+  return entries;
+}
+function DocumentsDataSource(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['dataSource'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  const schema = `[
+  {
+    "documentId": "u123",
+    "metadata": {
+      "fileName": "Document.pdf",
+      "contentType": "application/pdf"
+    }
+  }
+]`;
+  const tooltip = jsxs("div", {
+    children: [jsx("p", {
+      children: "A source is a JSON object containing metadata for a document or an array of documents."
+    }), jsx("p", {
+      children: "Each entry must include a document ID, name, and MIME type."
+    }), jsx("p", {
+      children: "Additional details are optional. The expected format is as follows:"
+    }), jsx("pre", {
+      children: jsx("code", {
+        children: schema
+      })
+    })]
+  });
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Document reference',
+    feel: 'required',
+    singleLine: true,
+    setValue,
+    variables,
+    tooltip,
+    validate: validate$2
+  });
+}
+
+// helpers //////////
+
+/**
+ * @param {string|undefined} value
+ * @returns {string|null}
+ */
+const validate$2 = value => {
+  if (typeof value !== 'string' || value.length === 0) {
+    return 'The document data source is required.';
+  }
+};
+
+function EndpointKeyEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'endpointKey',
+    component: EndpointKey,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'documentPreview'
+  });
+  return entries;
+}
+function EndpointKey(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['endpointKey'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  const tooltip = jsxs("div", {
+    children: [jsx("p", {
+      children: "Enter a context key that generates a string with the API endpoint to download a document."
+    }), jsxs("p", {
+      children: ["The string must contain ", jsx("code", {
+        children: '{ documentId }'
+      }), ", which will be replaced with the document ID from the document's reference."]
+    }), jsx("p", {
+      children: "If you're using the Camunda Tasklist, this variable is automatically added to the context for you."
+    }), jsxs("p", {
+      children: ["For more details, see the", ' ', jsx("a", {
+        href: "https://docs.camunda.io",
+        rel: "noopener noreferrer",
+        target: "_blank",
+        children: "Camunda documentation"
+      })]
+    })]
+  });
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Document URL',
+    feel: 'required',
+    singleLine: true,
+    setValue,
+    variables,
+    description: description$1,
+    tooltip,
+    validate: validate$1
+  });
+}
+
+// helpers //////////
+
+/**
+ * @param {string|undefined} value
+ * @returns {string|null}
+ */
+const validate$1 = value => {
+  if (typeof value !== 'string' || value.length === 0) {
+    return 'The document reference is required.';
+  }
+};
+const description$1 = jsx(Fragment$1, {
+  children: "Define an API URL for downloading a document"
+});
+
+function MaxHeightEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'maxHeight',
+    component: MaxHeight,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$7,
+    isDefaultVisible: field => field.type === 'documentPreview'
+  });
+  return entries;
+}
+function MaxHeight(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const path = ['maxHeight'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return NumberFieldEntry({
+    debounce,
+    label: 'Max height of preview container',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate,
+    description
+  });
+}
+
+// helpers //////////
+
+/**
+ * @param {string|number|undefined} value
+ * @returns {string|null}
+ */
+const validate = value => {
+  if (value === undefined || value === '') {
+    return null;
+  }
+  if (typeof value === 'string') {
+    return 'Value must be a number.';
+  }
+  if (!Number.isInteger(value)) {
+    return 'Should be an integer.';
+  }
+  if (value < 1) {
+    return 'Should be greater than zero.';
+  }
+};
+const description = jsx(Fragment$1, {
+  children: "Documents with height that exceeds the defined value will be vertically scrollable"
+});
+
 function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
     field,
@@ -12745,6 +13020,9 @@ function GeneralGroup(field, editField, getService) {
   }), ...RowCountEntry({
     field,
     editField
+  }), ...DocumentsDataSourceEntry({
+    field,
+    editField
   })];
   if (entries.length === 0) {
     return null;
@@ -13202,6 +13480,9 @@ function AppearanceGroup(field, editField, getService) {
   }), ...LayouterAppearanceEntry({
     field,
     editField
+  }), ...MaxHeightEntry({
+    field,
+    editField
   })];
   if (!entries.length) {
     return null;
@@ -13370,6 +13651,21 @@ const TOOLTIP_TEXT = `"List of items" defines a constant, predefined set of form
 "Expression" defines options that are populated from a FEEL expression.
 `;
 
+function DownloadSettings(field, editField) {
+  const entries = [...EndpointKeyEntry({
+    field,
+    editField
+  })];
+  if (!entries.length) {
+    return null;
+  }
+  return {
+    id: 'downloadSettings',
+    label: 'Download settings',
+    entries
+  };
+}
+
 class PropertiesProvider {
   constructor(propertiesPanel, injector) {
     this._injector = injector;
@@ -13405,7 +13701,7 @@ class PropertiesProvider {
         return groups;
       }
       const getService = (type, strict = true) => this._injector.get(type, strict);
-      groups = [...groups, GeneralGroup(field, editField, getService), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
+      groups = [...groups, GeneralGroup(field, editField, getService), DownloadSettings(field, editField), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
       this._filterVisibleEntries(groups, field, getService);
 
       // contract: if a group has no entries or items, it should not be displayed at all
@@ -13568,7 +13864,7 @@ class FormEditor {
      * @type {Element}
      */
     this._container = createFormContainer();
-    this._container.setAttribute('input-handle-modified-keys', 'z,y');
+    this._container.setAttribute('tabindex', '0');
     const {
       container,
       exporter,