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

package/dist/index.cjs

@@ -5535,19 +5535,19 @@ const ErrorsContext = preact.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 = preact.createContext({
@@ -5564,20 +5564,20 @@ const TooltipContext = preact.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 {
@@ -5598,7 +5598,7 @@ function TooltipWrapper(props) {
   return jsxRuntime.jsx(Tooltip, {
     ...props,
     value: value,
-    forId: prefixId$9(forId)
+    forId: `bio-properties-panel-${forId}`
   });
 }
 function Tooltip(props) {
@@ -5609,71 +5609,52 @@ function Tooltip(props) {
     direction = 'right',
     position
   } = props;
-  const [visible, setShow] = hooks.useState(false);
-  const [focusedViaKeyboard, setFocusedViaKeyboard] = hooks.useState(false);
+  const [visible, setVisible] = hooks.useState(false);
+
+  // Tooltip will be shown after SHOW_DELAY ms from hovering over the source element.
+  const SHOW_DELAY = 200;
   let timeout = null;
   const wrapperRef = hooks.useRef(null);
   const tooltipRef = hooks.useRef(null);
-  const showTooltip = async event => {
-    const show = () => setShow(true);
-    if (!visible && !timeout) {
-      if (event instanceof MouseEvent) {
-        timeout = setTimeout(show, 200);
-      } else {
-        show();
-        setFocusedViaKeyboard(true);
-      }
+  const show = (_, delay) => {
+    if (visible) return;
+    if (delay) {
+      timeout = setTimeout(() => {
+        setVisible(true);
+      }, SHOW_DELAY);
+    } else {
+      setVisible(true);
     }
   };
-  const hideTooltip = () => {
-    setShow(false);
-    setFocusedViaKeyboard(false);
-  };
-  const hideTooltipViaEscape = e => {
-    e.code === 'Escape' && hideTooltip();
+  const hide = () => {
+    clearTimeout(timeout);
+    setVisible(false);
   };
-  const isTooltipHovered = ({
-    x,
-    y
+  const handleMouseLeave = ({
+    relatedTarget
   }) => {
-    const tooltip = tooltipRef.current;
-    const wrapper = wrapperRef.current;
-    return tooltip && (inBounds(x, y, wrapper.getBoundingClientRect()) || inBounds(x, y, tooltip.getBoundingClientRect()));
+    // Don't hide the tooltip when moving mouse between the wrapper and the tooltip.
+    if (relatedTarget === wrapperRef.current || relatedTarget === tooltipRef.current || relatedTarget?.parentElement === tooltipRef.current) {
+      return;
+    }
+    hide();
   };
-  hooks.useEffect(() => {
+  const handleFocusOut = e => {
     const {
-      current
-    } = wrapperRef;
-    if (!current) {
+      target
+    } = e;
+
+    // Don't hide the tooltip if the wrapper or the tooltip itself is clicked.
+    const isHovered = target.matches(':hover') || tooltipRef.current?.matches(':hover');
+    if (target === wrapperRef.current && isHovered) {
+      e.stopPropagation();
       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 && focusedViaKeyboard)) {
-        hideTooltip();
-      }
-    };
-    const hideFocusedTooltip = e => {
-      const {
-        relatedTarget
-      } = e;
-      const isTooltipChild = el => !!el.closest('.bio-properties-panel-tooltip');
-      if (visible && !isHovered(wrapperRef.current) && relatedTarget && !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, focusedViaKeyboard]);
+    hide();
+  };
+  const hideTooltipViaEscape = e => {
+    e.code === 'Escape' && hide();
+  };
   const renderTooltip = () => {
     return jsxRuntime.jsxs("div", {
       class: `bio-properties-panel-tooltip ${direction}`,
@@ -5683,6 +5664,7 @@ function Tooltip(props) {
       style: position || getTooltipPosition(wrapperRef.current),
       ref: tooltipRef,
       onClick: e => e.stopPropagation(),
+      onMouseLeave: handleMouseLeave,
       children: [jsxRuntime.jsx("div", {
         class: "bio-properties-panel-tooltip-content",
         children: value
@@ -5695,54 +5677,38 @@ function Tooltip(props) {
     class: "bio-properties-panel-tooltip-wrapper",
     tabIndex: "0",
     ref: wrapperRef,
-    onMouseEnter: showTooltip,
-    onMouseLeave: () => {
-      clearTimeout(timeout);
-      timeout = null;
-    },
-    onFocus: showTooltip,
+    onMouseEnter: e => show(e, true),
+    onMouseLeave: handleMouseLeave,
+    onFocus: show,
+    onBlur: handleFocusOut,
     onKeyDown: hideTooltipViaEscape,
     children: [props.children, visible ? parent ? React.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$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 {
@@ -5763,11 +5729,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 = hooks.useContext(EventContext);
@@ -5797,20 +5763,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 {
@@ -5824,11 +5790,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) {
@@ -5839,12 +5805,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 {
@@ -5875,20 +5841,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] = hooks.useState(minDom.query(scrollContainerSelector));
@@ -5942,19 +5908,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 = hooks.useRef(callback);
@@ -6095,13 +6061,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 {
@@ -6138,9 +6104,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] = hooks.useState(undefined);
@@ -6240,9 +6206,9 @@ const CodeEditor$1 = React.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] = hooks.useState(undefined);
@@ -6291,10 +6257,10 @@ const CodeEditor = React.forwardRef((props, ref) => {
   hooks.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) {
@@ -6383,10 +6349,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 {
@@ -6420,22 +6386,22 @@ const FeelPopupContext = preact.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;
@@ -6489,23 +6455,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 {
@@ -6723,12 +6689,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 {
@@ -6955,11 +6921,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 = hooks.useRef(false);
@@ -7036,19 +7002,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 {
@@ -7155,22 +7121,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 {
@@ -7250,6 +7216,7 @@ function FeelTextfieldComponent(props) {
     label,
     hostLanguage,
     onInput,
+    onBlur,
     onError,
     placeholder,
     feel,
@@ -7315,6 +7282,12 @@ function FeelTextfieldComponent(props) {
       setFocus(-1);
     }
   };
+  const handleOnBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+    setLocalValue(e.target.value.trim());
+  };
   const handleLint = useStaticCallback((lint = []) => {
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
     if (syntaxError) {
@@ -7436,6 +7409,7 @@ function FeelTextfieldComponent(props) {
         ...props,
         popupOpen: popuOpen,
         onInput: handleLocalInput,
+        onBlur: handleOnBlur,
         contentAttributes: {
           'id': prefixId$5(id),
           'aria-label': label
@@ -7655,26 +7629,26 @@ React.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 {
@@ -7761,27 +7735,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 jsxRuntime.jsx(FeelEntry, {
@@ -7791,24 +7765,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 jsxRuntime.jsx(FeelEntry, {
@@ -7818,26 +7792,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 jsxRuntime.jsx(FeelEntry, {
@@ -7905,85 +7879,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 {Function} [props.getFeelPopupLinks]
- * @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 {
@@ -8156,11 +8130,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 = hooks.useRef(false);
@@ -8173,20 +8147,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 || {};
@@ -8295,8 +8269,8 @@ function ListItem(props) {
 }
 const noop$1 = () => {};
 
-/**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
 function ListGroup(props) {
   const {
@@ -8487,18 +8461,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 {
@@ -8618,20 +8592,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 {
@@ -8734,6 +8708,12 @@ function TextArea(props) {
     autoResize && resizeToContents(e.target);
     setLocalValue(e.target.value);
   };
+  const handleOnBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+    setLocalValue(e.target.value.trim());
+  };
   hooks.useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
   }, []);
@@ -8765,7 +8745,7 @@ function TextArea(props) {
       class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
       onInput: handleInput,
       onFocus: onFocus,
-      onBlur: onBlur,
+      onBlur: handleOnBlur,
       placeholder: placeholder,
       rows: rows,
       value: localValue,
@@ -8883,6 +8863,12 @@ function Textfield(props) {
   const handleInputCallback = hooks.useMemo(() => {
     return debounce(target => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
+  const handleOnBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+    setLocalValue(e.target.value.trim());
+  };
   const handleInput = e => {
     handleInputCallback(e.target);
     setLocalValue(e.target.value);
@@ -8915,27 +8901,27 @@ function Textfield(props) {
       class: "bio-properties-panel-input",
       onInput: handleInput,
       onFocus: onFocus,
-      onBlur: onBlur,
+      onBlur: handleOnBlur,
       placeholder: placeholder,
       value: localValue
     })]
   });
 }
 
-/**
- * @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 {
@@ -9010,20 +8996,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', {
@@ -9033,8 +9019,8 @@ class FeelPopupModule {
     });
   }
 
-  /**
-   * Close the FEEL popup.
+  /**
+   * Close the FEEL popup.
    */
   close() {
     return this._eventBus.fire('feelPopup._close');
@@ -10549,7 +10535,7 @@ function Height(props) {
     id,
     getValue,
     setValue,
-    validate: validate$a
+    validate: validate$9
   });
 }
 
@@ -10559,7 +10545,7 @@ function Height(props) {
  * @param {number|void} value
  * @returns {string|null}
  */
-const validate$a = value => {
+const validate$9 = value => {
   if (typeof value !== 'number') {
     return 'A number is required.';
   }
@@ -10623,7 +10609,7 @@ function Url(props) {
     setValue,
     singleLine: true,
     tooltip: getTooltip$1(),
-    validate: validate$9,
+    validate: validate$8,
     variables
   });
 }
@@ -10651,7 +10637,7 @@ function getTooltip$1() {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$9 = value => {
+const validate$8 = value => {
   if (!value || value.startsWith('=')) {
     return;
   }
@@ -10742,7 +10728,7 @@ function Text(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$4,
+    description: description$3,
     element: field,
     getValue,
     id,
@@ -10752,7 +10738,7 @@ function Text(props) {
     variables
   });
 }
-const description$4 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+const description$3 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["Supports markdown and templating.", ' ', jsxRuntime.jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
     target: "_blank",
@@ -10795,13 +10781,13 @@ function Content(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$3,
+    description: description$2,
     element: field,
     getValue,
     id,
     label: 'Content',
     hostLanguage: 'html',
-    validate: validate$8,
+    validate: validate$7,
     setValue,
     variables
   });
@@ -10809,7 +10795,7 @@ function Content(props) {
 
 // helpers //////////
 
-const description$3 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+const description$2 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', jsxRuntime.jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
     target: "_blank",
@@ -10822,7 +10808,7 @@ const description$3 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$8 = value => {
+const validate$7 = value => {
   // allow empty state
   if (typeof value !== 'string' || value === '') {
     return null;
@@ -11661,7 +11647,7 @@ function InputValuesKey(props) {
     id,
     label: 'Input values key',
     setValue,
-    validate: validate$7
+    validate: validate$6
   });
 }
 
@@ -11671,7 +11657,7 @@ function InputValuesKey(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$7 = value => {
+const validate$6 = value => {
   if (typeof value !== 'string' || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -11697,7 +11683,14 @@ function StaticOptionsSourceEntry(props) {
     editField(field, formJsViewer.OPTIONS_SOURCES_PATHS[formJsViewer.OPTIONS_SOURCES.STATIC], arrayAdd(values, values.length, entry));
   };
   const removeEntry = entry => {
-    editField(field, formJsViewer.OPTIONS_SOURCES_PATHS[formJsViewer.OPTIONS_SOURCES.STATIC], minDash.without(values, entry));
+    if (field.defaultValue === entry.value) {
+      editField(field, {
+        values: minDash.without(values, entry),
+        defaultValue: undefined
+      });
+    } else {
+      editField(field, formJsViewer.OPTIONS_SOURCES_PATHS[formJsViewer.OPTIONS_SOURCES.STATIC], minDash.without(values, entry));
+    }
   };
   const validateFactory = (key, getValue) => {
     return value => {
@@ -12113,7 +12106,7 @@ function Source(props) {
     setValue,
     singleLine: true,
     variables,
-    validate: validate$6
+    validate: validate$5
   });
 }
 
@@ -12123,7 +12116,7 @@ function Source(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$6 = value => {
+const validate$5 = value => {
   if (!minDash.isString(value) || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12227,7 +12220,7 @@ function RowCount(props) {
     id,
     getValue,
     setValue,
-    validate: validate$5
+    validate: validate$4
   });
 }
 
@@ -12237,7 +12230,7 @@ function RowCount(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$5 = value => {
+const validate$4 = value => {
   if (minDash.isNil(value)) {
     return null;
   }
@@ -12411,7 +12404,7 @@ function ColumnsExpression(props) {
     setValue,
     singleLine: true,
     variables,
-    validate: validate$4
+    validate: validate$3
   });
 }
 
@@ -12421,7 +12414,7 @@ function ColumnsExpression(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$4 = value => {
+const validate$3 = value => {
   if (!minDash.isString(value) || value.length === 0 || value === '=') {
     return 'Must not be empty.';
   }
@@ -12519,7 +12512,7 @@ function Key(props) {
     id,
     label: 'Key',
     setValue,
-    validate: validate$3
+    validate: validate$2
   });
 }
 
@@ -12529,7 +12522,7 @@ function Key(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-function validate$3(value) {
+function validate$2(value) {
   if (!minDash.isString(value) || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12667,13 +12660,13 @@ function Accept(props) {
     singleLine: true,
     setValue,
     variables,
-    description: description$2
+    description: description$1
   });
 }
 
 // helpers //////////
 
-const description$2 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+const description$1 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["A comma-separated list of", ' ', jsxRuntime.jsx("a", {
     href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
     target: "_blank",
@@ -12764,6 +12757,7 @@ function DocumentsDataSource(props) {
   const schema = `[
   {
     "documentId": "u123",
+    "endpoint": "https://api.example.com/documents/u123",
     "metadata": {
       "fileName": "Document.pdf",
       "contentType": "application/pdf"
@@ -12781,84 +12775,15 @@ function DocumentsDataSource(props) {
       children: jsxRuntime.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 minDash.get(field, path, '');
-  };
-  const setValue = value => {
-    return editField(field, path, value);
-  };
-  const tooltip = jsxRuntime.jsxs("div", {
-    children: [jsxRuntime.jsx("p", {
-      children: "Enter a context key that generates a string with the API endpoint to download a document."
-    }), jsxRuntime.jsxs("p", {
-      children: ["The string must contain ", jsxRuntime.jsx("code", {
-        children: '{ documentId }'
-      }), ", which will be replaced with the document ID from the document\u2018s reference."]
     }), jsxRuntime.jsx("p", {
-      children: "If you\u2018re using the Camunda Tasklist, this variable is automatically added to the context for you."
+      children: "When using Camunda Tasklist UI, additional document reference attributes are automatically handled. Modifying the document reference may affect the document preview functionality."
     }), jsxRuntime.jsxs("p", {
-      children: ["For more details, see the", ' ', jsxRuntime.jsx("a", {
-        href: "https://docs.camunda.io/docs/next/components/modeler/forms/form-element-library/forms-element-library-document-preview/",
-        rel: "noopener noreferrer",
+      children: ["Learn more in our", ' ', jsxRuntime.jsx("a", {
+        href: "https://docs.camunda.io/docs/8.7/components/modeler/forms/form-element-library/forms-element-library-document-preview/",
         target: "_blank",
-        children: "Camunda documentation"
-      })]
+        rel: "noopener noreferrer",
+        children: "documentation"
+      }), "."]
     })]
   });
   return FeelTemplatingEntry({
@@ -12866,12 +12791,11 @@ function EndpointKey(props) {
     element: field,
     getValue,
     id,
-    label: 'Document URL',
+    label: 'Document reference',
     feel: 'required',
     singleLine: true,
     setValue,
     variables,
-    description: description$1,
     tooltip,
     validate: validate$1
   });
@@ -12885,12 +12809,9 @@ function EndpointKey(props) {
  */
 const validate$1 = value => {
   if (typeof value !== 'string' || value.length === 0) {
-    return 'The document reference is required.';
+    return 'The document data source is required.';
   }
 };
-const description$1 = jsxRuntime.jsx(jsxRuntime.Fragment, {
-  children: "Define an API URL for downloading a document"
-});
 
 function MaxHeightEntry(props) {
   const {
@@ -13672,21 +13593,6 @@ 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;
@@ -13722,7 +13628,7 @@ class PropertiesProvider {
         return groups;
       }
       const getService = (type, strict = true) => this._injector.get(type, strict);
-      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);
+      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);
       this._filterVisibleEntries(groups, field, getService);
 
       // contract: if a group has no entries or items, it should not be displayed at all