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

package/dist/form-playground.umd.js

@@ -41257,11 +41257,11 @@
           moveY = 0;
         if (y == "nearest") {
           if (rect.top < bounding.top) {
-            moveY = -(bounding.top - rect.top + yMargin);
-            if (side > 0 && rect.bottom > bounding.bottom + moveY) moveY = rect.bottom - bounding.bottom + moveY + yMargin;
+            moveY = rect.top - (bounding.top + yMargin);
+            if (side > 0 && rect.bottom > bounding.bottom + moveY) moveY = rect.bottom - bounding.bottom + yMargin;
           } else if (rect.bottom > bounding.bottom) {
             moveY = rect.bottom - bounding.bottom + yMargin;
-            if (side < 0 && rect.top - moveY < bounding.top) moveY = -(bounding.top + moveY - rect.top + yMargin);
+            if (side < 0 && rect.top - moveY < bounding.top) moveY = rect.top - (bounding.top + yMargin);
           }
         } else {
           let rectHeight = rect.bottom - rect.top,
@@ -41271,11 +41271,11 @@
         }
         if (x == "nearest") {
           if (rect.left < bounding.left) {
-            moveX = -(bounding.left - rect.left + xMargin);
-            if (side > 0 && rect.right > bounding.right + moveX) moveX = rect.right - bounding.right + moveX + xMargin;
+            moveX = rect.left - (bounding.left + xMargin);
+            if (side > 0 && rect.right > bounding.right + moveX) moveX = rect.right - bounding.right + xMargin;
           } else if (rect.right > bounding.right) {
             moveX = rect.right - bounding.right + xMargin;
-            if (side < 0 && rect.left < bounding.left + moveX) moveX = -(bounding.left + moveX - rect.left + xMargin);
+            if (side < 0 && rect.left < bounding.left + moveX) moveX = rect.left - (bounding.left + xMargin);
           }
         } else {
           let targetLeft = x == "center" ? rect.left + (rect.right - rect.left) / 2 - (bounding.right - bounding.left) / 2 : x == "start" == ltr ? rect.left - xMargin : rect.right - (bounding.right - bounding.left) + xMargin;
@@ -41308,6 +41308,12 @@
           }
         }
         if (top) break;
+        if (rect.top < bounding.top || rect.bottom > bounding.bottom || rect.left < bounding.left || rect.right > bounding.right) rect = {
+          left: Math.max(rect.left, bounding.left),
+          right: Math.min(rect.right, bounding.right),
+          top: Math.max(rect.top, bounding.top),
+          bottom: Math.min(rect.bottom, bounding.bottom)
+        };
         cur = cur.assignedSlot || cur.parentNode;
       } else if (cur.nodeType == 11) {
         // A shadow root
@@ -45249,7 +45255,7 @@
     handleEvent(event) {
       if (!eventBelongsToEditor(this.view, event) || this.ignoreDuringComposition(event)) return;
       if (event.type == "keydown" && this.keydown(event)) return;
-      this.runHandlers(event.type, event);
+      if (this.view.updateState != 0 /* UpdateState.Idle */) Promise.resolve().then(() => this.runHandlers(event.type, event));else this.runHandlers(event.type, event);
     }
     runHandlers(type, event) {
       let handlers = this.handlers[type];
@@ -48386,8 +48392,9 @@
       return !abort;
     }
     update(update) {
-      let reverted = this.pendingContextChange;
-      if (this.composing && (this.composing.drifted || update.transactions.some(tr => !tr.isUserEvent("input.type") && tr.changes.touchesRange(this.from, this.to)))) {
+      let reverted = this.pendingContextChange,
+        startSel = update.startState.selection.main;
+      if (this.composing && (this.composing.drifted || !update.changes.touchesRange(startSel.from, startSel.to) && update.transactions.some(tr => !tr.isUserEvent("input.type") && tr.changes.touchesRange(this.from, this.to)))) {
         this.composing.drifted = true;
         this.composing.editorBase = update.changes.mapPos(this.composing.editorBase);
       } else if (!this.applyEdits(update) || !this.rangeIsValid(update.state)) {
@@ -50794,14 +50801,12 @@
     return tooltipConfig.of(config);
   }
   function windowSpace(view) {
-    let {
-      win
-    } = view;
+    let docElt = view.dom.ownerDocument.documentElement;
     return {
       top: 0,
       left: 0,
-      bottom: win.innerHeight,
-      right: win.innerWidth
+      bottom: docElt.clientHeight,
+      right: docElt.clientWidth
     };
   }
   const tooltipConfig = /*@__PURE__*/Facet.define({
@@ -70025,10 +70030,15 @@
   };
   const type$k = 'documentPreview';
 
+  /**
+   * @typedef DocumentEndpointBuilder
+   * @property {(document: DocumentMetadata) => string} buildUrl
+   */
+
   /**
    * @typedef DocumentMetadata
    * @property {string} documentId
-   * @property {string} contentHash
+   * @property {string} endpoint
    * @property {Object} metadata
    * @property {string|undefined} [metadata.contentType]
    * @property {string} metadata.fileName
@@ -70037,7 +70047,6 @@
    * @property {string} id
    * @property {string} [title]
    * @property {string} [dataSource]
-   * @property {string} [endpointKey]
    * @property {number} [maxHeight]
    * @property {string} [label]
    *
@@ -70049,18 +70058,18 @@
    * @returns {import("preact").JSX.Element}
    */
   function DocumentPreview(props) {
+    /** @type {DocumentEndpointBuilder | null} */
+    const documentEndpointBuilder = useService$2('documentEndpointBuilder', false);
     const {
       field,
       domId
     } = props;
     const {
       dataSource,
-      endpointKey,
       maxHeight,
       label
     } = field;
     const errorMessageId = `${domId}-error-message`;
-    const endpoint = useExpressionEvaluation(endpointKey || '');
     const data = useValidDocumentData(dataSource || '');
     const evaluatedLabel = useSingleLineTemplateEvaluation(label, {
       debug: true
@@ -70073,18 +70082,19 @@
       }), o("div", {
         class: `fjs-${type$k}-document-container`,
         id: domId,
-        children: isValidDocumentEndpoint(endpoint) ? data.map((document, index) => o(DocumentRenderer, {
-          documentMetadata: document,
-          endpoint: endpoint,
-          maxHeight: maxHeight,
-          domId: `${domId}-${index}`
-        }, document.documentId)) : null
+        children: data.map((document, index) => {
+          const finalEndpoint = tryCatch(() => documentEndpointBuilder?.buildUrl(document)) ?? document.endpoint;
+          return isValidDocumentEndpoint(finalEndpoint) ? o(DocumentRenderer, {
+            documentMetadata: document,
+            endpoint: finalEndpoint,
+            maxHeight: maxHeight,
+            domId: `${domId}-${index}`
+          }, document.documentId) : null;
+        })
       }), o(Errors, {
         id: errorMessageId,
         errors: getErrors({
-          dataSource,
-          endpoint,
-          endpointKey
+          dataSource
         })
       })]
     });
@@ -70096,43 +70106,27 @@
     name: 'Document preview',
     create: (options = {}) => ({
       label: 'Document preview',
-      endpointKey: DEFAULT_ENDPOINT_KEY,
       ...options
     })
   };
 
   // helpers /////////////////////////////
 
-  const DOCUMENT_ID_PLACEHOLDER = '{documentId}';
-  const DEFAULT_ENDPOINT_KEY = '=defaultDocumentsEndpointKey';
-
   /**
    * @typedef GetErrorOptions
    * @property {string|undefined} dataSource
-   * @property {string|undefined} endpointKey
-   * @property {string|null} endpoint
    *
    * @param {GetErrorOptions} options
    * @returns {string[]}
    */
   function getErrors(options) {
     const {
-      dataSource,
-      endpointKey,
-      endpoint
+      dataSource
     } = options;
     let errors = [];
     if (!isString$3(dataSource) || dataSource.length < 1) {
       errors.push('Document reference is not defined.');
     }
-    if (!isString$3(endpointKey) || endpointKey.length < 1) {
-      errors.push('Endpoint key is not defined.');
-    }
-    if (endpointKey !== DEFAULT_ENDPOINT_KEY && !URL.canParse(endpoint)) {
-      errors.push(`If you change the endpoint key from "${DEFAULT_ENDPOINT_KEY}", the document preview won't work with Camunda Tasklist and you must provide a valid URL.`);
-    } else if (endpointKey !== DEFAULT_ENDPOINT_KEY && !isValidDocumentEndpoint(endpoint)) {
-      errors.push('Endpoint must contain "{documentId}".');
-    }
     return errors;
   }
 
@@ -70142,7 +70136,7 @@
    * @returns boolean
    */
   function isValidDocumentEndpoint(endpoint) {
-    return typeof endpoint === 'string' && URL.canParse(endpoint) && endpoint.includes(DOCUMENT_ID_PLACEHOLDER);
+    return typeof endpoint === 'string' && URL.canParse(endpoint);
   }
 
   /**
@@ -70179,9 +70173,11 @@
       onError,
       errorMessageId
     } = props;
+    /** @type {ReturnType<typeof import("preact/hooks").useState<null | string>>} */
     const [pdfObjectUrl, setPdfObjectUrl] = h(null);
     const [hasError, setHasError] = h(false);
     p(() => {
+      /** @type {null | string} */
       let objectUrl = null;
       const fetchPdf = async () => {
         try {
@@ -70207,7 +70203,7 @@
       };
     }, [url, onError]);
     return o(k$2, {
-      children: [pdfObjectUrl ? o("embed", {
+      children: [pdfObjectUrl !== null ? o("embed", {
         src: pdfObjectUrl,
         type: "application/pdf",
         class: `fjs-${type$k}-pdf-viewer`
@@ -70241,11 +70237,6 @@
     const [hasError, setHasError] = h(false);
     const ref = _$1(null);
     const isInViewport = useInViewport(ref);
-    const fullUrl = buildUrl({
-      baseUrl: endpoint,
-      documentId: documentMetadata.documentId,
-      contentHash: documentMetadata.contentHash
-    });
     const singleDocumentContainerClassName = `fjs-${type$k}-single-document-container`;
     const errorMessageId = `${domId}-error-message`;
     const errorMessage = 'Unable to download document';
@@ -70258,11 +70249,11 @@
         },
         "aria-describedby": hasError ? errorMessageId : undefined,
         children: [o("img", {
-          src: fullUrl,
+          src: endpoint,
           alt: metadata.fileName,
           class: `fjs-${type$k}-image`
         }), o(DownloadButton, {
-          endpoint: fullUrl,
+          endpoint: endpoint,
           fileName: metadata.fileName,
           onDownloadError: () => {
             setHasError(true);
@@ -70281,7 +70272,7 @@
         },
         "aria-describedby": hasError ? errorMessageId : undefined,
         children: o(PdfRenderer, {
-          url: fullUrl,
+          url: endpoint,
           fileName: metadata.fileName,
           onError: () => setHasError(true),
           errorMessageId: errorMessageId
@@ -70301,7 +70292,7 @@
           errors: [errorMessage]
         }) : null]
       }), o(DownloadButton, {
-        endpoint: fullUrl,
+        endpoint: endpoint,
         fileName: metadata.fileName,
         onDownloadError: () => {
           setHasError(true);
@@ -70381,27 +70372,18 @@
   }
 
   /**
-   * This solution should be a temporary fix, we should try to remove it via: https://github.com/bpmn-io/form-js/issues/1341
-   *
-   * @param {Object} options
-   * @param {string} options.baseUrl
-   * @param {string} options.documentId
-   * @param {string} [options.contentHash]
-   *
-   * @returns {string}
+   * @template T
+   * @param {() => T} fn - Function to execute
+   * @returns {T | null}
    */
-  function buildUrl(options) {
-    const {
-      baseUrl,
-      documentId,
-      contentHash
-    } = options;
-    const finalUrl = new URL(baseUrl.replace(DOCUMENT_ID_PLACEHOLDER, documentId));
-    if (contentHash !== undefined) {
-      finalUrl.searchParams.set('contentHash', contentHash);
+  const tryCatch = fn => {
+    try {
+      return fn();
+    } catch (error) {
+      console.error(error);
+      return null;
     }
-    return decodeURI(finalUrl.toString());
-  }
+  };
 
   /**
    * This file must not be changed or exchanged.
@@ -70556,7 +70538,7 @@
       return this._formFields[type];
     }
   }
-  const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression', 'multiple', 'accept', 'endpointKey', 'title'];
+  const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression', 'multiple', 'accept', 'title'];
   const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url', 'title'];
 
   /**
@@ -83489,19 +83471,19 @@
     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 = G({
@@ -83518,20 +83500,20 @@
     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 {
@@ -83552,7 +83534,7 @@
     return o(Tooltip, {
       ...props,
       value: value,
-      forId: prefixId$9(forId)
+      forId: `bio-properties-panel-${forId}`
     });
   }
   function Tooltip(props) {
@@ -83563,71 +83545,52 @@
       direction = 'right',
       position
     } = props;
-    const [visible, setShow] = h(false);
-    const [focusedViaKeyboard, setFocusedViaKeyboard] = h(false);
+    const [visible, setVisible] = h(false);
+
+    // Tooltip will be shown after SHOW_DELAY ms from hovering over the source element.
+    const SHOW_DELAY = 200;
     let timeout = null;
     const wrapperRef = _$1(null);
     const tooltipRef = _$1(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();
     };
-    p(() => {
+    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 o("div", {
         class: `bio-properties-panel-tooltip ${direction}`,
@@ -83637,6 +83600,7 @@
         style: position || getTooltipPosition(wrapperRef.current),
         ref: tooltipRef,
         onClick: e => e.stopPropagation(),
+        onMouseLeave: handleMouseLeave,
         children: [o("div", {
           class: "bio-properties-panel-tooltip-content",
           children: value
@@ -83649,54 +83613,38 @@
       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 ? z$1(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 {
@@ -83717,11 +83665,11 @@
     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 = q$1(EventContext);
@@ -83751,20 +83699,20 @@
     }, [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 {
@@ -83778,11 +83726,11 @@
     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) {
@@ -83793,12 +83741,12 @@
     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 {
@@ -83829,20 +83777,20 @@
     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] = h(query(scrollContainerSelector));
@@ -83896,19 +83844,19 @@
     }, [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 = _$1(callback);
@@ -84049,13 +83997,13 @@
     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 {
@@ -84092,9 +84040,9 @@
   }
   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] = h(undefined);
@@ -84194,9 +84142,9 @@
   });
   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] = h(undefined);
@@ -84245,10 +84193,10 @@
     p(() => {
       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) {
@@ -84337,10 +84285,10 @@
   }
   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 {
@@ -84374,22 +84322,22 @@
     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;
@@ -84443,23 +84391,23 @@
   }
   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 {
@@ -84677,12 +84625,12 @@
   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 {
@@ -84909,11 +84857,11 @@
     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 = _$1(false);
@@ -84990,19 +84938,19 @@
     });
   }
 
-  /**
-   * @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 {
@@ -85109,22 +85057,22 @@
     });
   }
 
-  /**
-   * @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 {
@@ -85204,6 +85152,7 @@
       label,
       hostLanguage,
       onInput,
+      onBlur,
       onError,
       placeholder,
       feel,
@@ -85269,6 +85218,12 @@
         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) {
@@ -85390,6 +85345,7 @@
           ...props,
           popupOpen: popuOpen,
           onInput: handleLocalInput,
+          onBlur: handleOnBlur,
           contentAttributes: {
             'id': prefixId$5(id),
             'aria-label': label
@@ -85609,26 +85565,26 @@
     });
   });
 
-  /**
-   * @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 {
@@ -85715,27 +85671,27 @@
     });
   }
 
-  /**
-   * @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 o(FeelEntry, {
@@ -85745,24 +85701,24 @@
     });
   }
 
-  /**
-   * @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 o(FeelEntry, {
@@ -85772,26 +85728,26 @@
     });
   }
 
-  /**
-   * @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 o(FeelEntry, {
@@ -85859,85 +85815,85 @@
   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 {
@@ -86110,11 +86066,11 @@
 
   // 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 = _$1(false);
@@ -86127,20 +86083,20 @@
     }, 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 || {};
@@ -86249,8 +86205,8 @@
   }
   const noop$1 = () => {};
 
-  /**
-   * @param {import('../PropertiesPanel').ListGroupDefinition} props
+  /**
+   * @param {import('../PropertiesPanel').ListGroupDefinition} props
    */
   function ListGroup(props) {
     const {
@@ -86441,18 +86397,18 @@
     });
   }
 
-  /**
-   * @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 {
@@ -86572,20 +86528,20 @@
     });
   }
 
-  /**
-   * @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 {
@@ -86688,6 +86644,12 @@
       autoResize && resizeToContents(e.target);
       setLocalValue(e.target.value);
     };
+    const handleOnBlur = e => {
+      if (onBlur) {
+        onBlur(e);
+      }
+      setLocalValue(e.target.value.trim());
+    };
     y(() => {
       autoResize && resizeToContents(ref.current);
     }, []);
@@ -86719,7 +86681,7 @@
         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,
@@ -86837,6 +86799,12 @@
     const handleInputCallback = F$1(() => {
       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);
@@ -86869,27 +86837,27 @@
         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 {
@@ -86964,20 +86932,20 @@
       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', {
@@ -86987,8 +86955,8 @@
       });
     }
 
-    /**
-     * Close the FEEL popup.
+    /**
+     * Close the FEEL popup.
      */
     close() {
       return this._eventBus.fire('feelPopup._close');
@@ -88483,7 +88451,7 @@
       id,
       getValue,
       setValue,
-      validate: validate$a
+      validate: validate$9
     });
   }
 
@@ -88493,7 +88461,7 @@
    * @param {number|void} value
    * @returns {string|null}
    */
-  const validate$a = value => {
+  const validate$9 = value => {
     if (typeof value !== 'number') {
       return 'A number is required.';
     }
@@ -88555,7 +88523,7 @@
       setValue,
       singleLine: true,
       tooltip: getTooltip$1(),
-      validate: validate$9,
+      validate: validate$8,
       variables
     });
   }
@@ -88583,7 +88551,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  const validate$9 = value => {
+  const validate$8 = value => {
     if (!value || value.startsWith('=')) {
       return;
     }
@@ -88672,7 +88640,7 @@
     };
     return FeelTemplatingEntry({
       debounce,
-      description: description$4,
+      description: description$3,
       element: field,
       getValue,
       id,
@@ -88682,7 +88650,7 @@
       variables
     });
   }
-  const description$4 = o(k$2, {
+  const description$3 = o(k$2, {
     children: ["Supports markdown and templating.", ' ', o("a", {
       href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
       target: "_blank",
@@ -88724,13 +88692,13 @@
     };
     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
     });
@@ -88738,7 +88706,7 @@
 
   // helpers //////////
 
-  const description$3 = o(k$2, {
+  const description$2 = o(k$2, {
     children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', o("a", {
       href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
       target: "_blank",
@@ -88751,7 +88719,7 @@
    * @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;
@@ -89578,7 +89546,7 @@
       id,
       label: 'Input values key',
       setValue,
-      validate: validate$7
+      validate: validate$6
     });
   }
 
@@ -89588,7 +89556,7 @@
    * @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.';
     }
@@ -89613,7 +89581,14 @@
       editField(field, OPTIONS_SOURCES_PATHS[OPTIONS_SOURCES.STATIC], arrayAdd(values, values.length, entry));
     };
     const removeEntry = entry => {
-      editField(field, OPTIONS_SOURCES_PATHS[OPTIONS_SOURCES.STATIC], without(values, entry));
+      if (field.defaultValue === entry.value) {
+        editField(field, {
+          values: without(values, entry),
+          defaultValue: undefined
+        });
+      } else {
+        editField(field, OPTIONS_SOURCES_PATHS[OPTIONS_SOURCES.STATIC], without(values, entry));
+      }
     };
     const validateFactory = (key, getValue) => {
       return value => {
@@ -90022,7 +89997,7 @@
       setValue,
       singleLine: true,
       variables,
-      validate: validate$6
+      validate: validate$5
     });
   }
 
@@ -90032,7 +90007,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  const validate$6 = value => {
+  const validate$5 = value => {
     if (!isString$3(value) || value.length === 0) {
       return 'Must not be empty.';
     }
@@ -90134,7 +90109,7 @@
       id,
       getValue,
       setValue,
-      validate: validate$5
+      validate: validate$4
     });
   }
 
@@ -90144,7 +90119,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  const validate$5 = value => {
+  const validate$4 = value => {
     if (isNil(value)) {
       return null;
     }
@@ -90316,7 +90291,7 @@
       setValue,
       singleLine: true,
       variables,
-      validate: validate$4
+      validate: validate$3
     });
   }
 
@@ -90326,7 +90301,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  const validate$4 = value => {
+  const validate$3 = value => {
     if (!isString$3(value) || value.length === 0 || value === '=') {
       return 'Must not be empty.';
     }
@@ -90423,7 +90398,7 @@
       id,
       label: 'Key',
       setValue,
-      validate: validate$3
+      validate: validate$2
     });
   }
 
@@ -90433,7 +90408,7 @@
    * @param {string|void} value
    * @returns {string|null}
    */
-  function validate$3(value) {
+  function validate$2(value) {
     if (!isString$3(value) || value.length === 0) {
       return 'Must not be empty.';
     }
@@ -90568,13 +90543,13 @@
       singleLine: true,
       setValue,
       variables,
-      description: description$2
+      description: description$1
     });
   }
 
   // helpers //////////
 
-  const description$2 = o(k$2, {
+  const description$1 = o(k$2, {
     children: ["A comma-separated list of", ' ', o("a", {
       href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
       target: "_blank",
@@ -90663,6 +90638,7 @@
     const schema = `[
   {
     "documentId": "u123",
+    "endpoint": "https://api.example.com/documents/u123",
     "metadata": {
       "fileName": "Document.pdf",
       "contentType": "application/pdf"
@@ -90680,83 +90656,15 @@
         children: o("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$1(field, path, '');
-    };
-    const setValue = value => {
-      return editField(field, path, value);
-    };
-    const tooltip = o("div", {
-      children: [o("p", {
-        children: "Enter a context key that generates a string with the API endpoint to download a document."
       }), o("p", {
-        children: ["The string must contain ", o("code", {
-          children: '{ documentId }'
-        }), ", which will be replaced with the document ID from the document\u2018s reference."]
+        children: "When using Camunda Tasklist UI, additional document reference attributes are automatically handled. Modifying the document reference may affect the document preview functionality."
       }), o("p", {
-        children: "If you\u2018re using the Camunda Tasklist, this variable is automatically added to the context for you."
-      }), o("p", {
-        children: ["For more details, see the", ' ', o("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", ' ', o("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({
@@ -90764,12 +90672,11 @@
       element: field,
       getValue,
       id,
-      label: 'Document URL',
+      label: 'Document reference',
       feel: 'required',
       singleLine: true,
       setValue,
       variables,
-      description: description$1,
       tooltip,
       validate: validate$1
     });
@@ -90783,12 +90690,9 @@
    */
   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 = o(k$2, {
-    children: "Define an API URL for downloading a document"
-  });
   function MaxHeightEntry(props) {
     const {
       editField,
@@ -91559,20 +91463,6 @@
 
 "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;
@@ -91608,7 +91498,7 @@
           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