@bpmn-io/properties-panel 3.24.1 → 3.25.0

package/dist/index.js

@@ -45,6 +45,21 @@ ArrowIcon.defaultProps = {
   width: "16",
   height: "16"
 };
+var CloseIcon = function CloseIcon(props) {
+  return jsxRuntime.jsx("svg", {
+    ...props,
+    children: jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+      fill: "currentColor"
+    })
+  });
+};
+CloseIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16"
+};
 var CreateIcon = function CreateIcon(props) {
   return jsxRuntime.jsx("svg", {
     ...props,
@@ -132,26 +147,17 @@ FeelIcon$1.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-var HelpIcon = function HelpIcon(props) {
+var LaunchIcon = function LaunchIcon(props) {
   return jsxRuntime.jsxs("svg", {
     ...props,
     children: [jsxRuntime.jsx("path", {
-      d: "M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2Zm0 26a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z"
-    }), jsxRuntime.jsx("circle", {
-      cx: "16",
-      cy: "23.5",
-      r: "1.5"
+      d: "M26 28H6a2.003 2.003 0 0 1-2-2V6a2.003 2.003 0 0 1 2-2h10v2H6v20h20V16h2v10a2.003 2.003 0 0 1-2 2Z"
     }), jsxRuntime.jsx("path", {
-      d: "M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9Z"
-    }), jsxRuntime.jsx("path", {
-      style: {
-        fill: "none"
-      },
-      d: "M0 0h32v32H0z"
+      d: "M20 2v2h6.586L18 12.586 19.414 14 28 5.414V12h2V2H20z"
     })]
   });
 };
-HelpIcon.defaultProps = {
+LaunchIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 32 32"
 };
@@ -173,21 +179,6 @@ PopupIcon.defaultProps = {
   height: "16",
   viewBox: "0 0 32 32"
 };
-var CloseIcon = function CloseIcon(props) {
-  return jsxRuntime.jsx("svg", {
-    ...props,
-    children: jsxRuntime.jsx("path", {
-      fillRule: "evenodd",
-      d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
-      fill: "currentColor"
-    })
-  });
-};
-CloseIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
 
 function Header(props) {
   const {
@@ -227,7 +218,7 @@ function Header(props) {
     }), jsxRuntime.jsx("div", {
       class: "bio-properties-panel-header-actions",
       children: documentationRef ? jsxRuntime.jsx("a", {
-        rel: "noopener",
+        rel: "noreferrer",
         class: "bio-properties-panel-header-link",
         href: documentationRef,
         title: "Open documentation",
@@ -247,19 +238,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({
@@ -278,20 +269,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 {
@@ -444,20 +435,20 @@ function prefixId$9(id) {
   return `bio-properties-panel-${id}`;
 }
 
-/**
- * Accesses the global DescriptionContext and returns a description for a given id and element.
- *
- * @example
- * ```jsx
- * function TextField(props) {
- *   const description = useDescriptionContext('input1', element);
- * }
- * ```
- *
- * @param {string} id
- * @param {object} element
- *
- * @returns {string}
+/**
+ * Accesses the global DescriptionContext and returns a description for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const description = useDescriptionContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {object} element
+ *
+ * @returns {string}
  */
 function useDescriptionContext(id, element) {
   const {
@@ -479,11 +470,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);
@@ -515,24 +506,24 @@ function useEvent(event, callback, eventBus) {
 
 const KEY_LENGTH = 6;
 
-/**
- * Create a persistent key factory for plain objects without id.
- *
- * @example
- * ```jsx
- * function List({ objects }) {
- *   const getKey = useKeyFactory();
- *   return (<ol>{
- *     objects.map(obj => {
- *       const key = getKey(obj);
- *       return <li key={key}>obj.name</li>
- *     })
- *   }</ol>);
- * }
- * ```
- *
- * @param {any[]} dependencies
- * @returns {(element: object) => string}
+/**
+ * Create a persistent key factory for plain objects without id.
+ *
+ * @example
+ * ```jsx
+ * function List({ objects }) {
+ *   const getKey = useKeyFactory();
+ *   return (<ol>{
+ *     objects.map(obj => {
+ *       const key = getKey(obj);
+ *       return <li key={key}>obj.name</li>
+ *     })
+ *   }</ol>);
+ * }
+ * ```
+ *
+ * @param {any[]} dependencies
+ * @returns {(element: object) => string}
  */
 function useKeyFactory(dependencies = []) {
   const map = hooks.useMemo(() => new Map(), dependencies);
@@ -547,20 +538,20 @@ function useKeyFactory(dependencies = []) {
   return getKey;
 }
 
-/**
- * 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 {
@@ -574,11 +565,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) {
@@ -589,12 +580,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 {
@@ -625,20 +616,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));
@@ -692,19 +683,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);
@@ -847,13 +838,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 {
@@ -892,9 +883,9 @@ function Description(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);
@@ -995,9 +986,9 @@ const CodeEditor$1 = compat.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);
@@ -1046,10 +1037,10 @@ const CodeEditor = compat.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) {
@@ -1140,10 +1131,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 {
@@ -1178,22 +1169,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;
@@ -1248,23 +1239,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 {
@@ -1483,12 +1474,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 {
@@ -1498,7 +1489,8 @@ function FEELPopupRoot(props) {
       on() {},
       off() {}
     },
-    popupContainer
+    popupContainer,
+    getPopupLinks = () => []
   } = props;
   const prevElement = usePrevious(element);
   const [popupConfig, setPopupConfig] = hooks.useState({});
@@ -1573,6 +1565,7 @@ function FEELPopupRoot(props) {
     children: [open && jsxRuntime.jsx(FeelPopupComponent, {
       onClose: handleClose,
       container: popupContainer,
+      getLinks: getPopupLinks,
       sourceElement: sourceElement,
       emit: emit,
       ...popupConfig
@@ -1582,6 +1575,7 @@ function FEELPopupRoot(props) {
 function FeelPopupComponent(props) {
   const {
     container,
+    getLinks,
     id,
     hostLanguage,
     onInput,
@@ -1651,24 +1645,24 @@ function FeelPopupComponent(props) {
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [jsxRuntime.jsxs(Popup.Title, {
+    children: [jsxRuntime.jsx(Popup.Title, {
       title: title,
       emit: emit,
       showCloseButton: true,
       closeButtonTooltip: "Save and close",
       onClose: onClose,
       draggable: true,
-      children: [type === 'feel' && jsxRuntime.jsxs("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
-        target: "_blank",
-        class: "bio-properties-panel-feel-popup__title-link",
-        children: ["Learn FEEL expressions", jsxRuntime.jsx(HelpIcon, {})]
-      }), type === 'feelers' && jsxRuntime.jsxs("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/forms/configuration/forms-config-templating-syntax/",
-        target: "_blank",
-        class: "bio-properties-panel-feel-popup__title-link",
-        children: ["Learn templating", jsxRuntime.jsx(HelpIcon, {})]
-      })]
+      children: jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: getLinks(type).map((link, index) => {
+          return jsxRuntime.jsxs("a", {
+            rel: "noreferrer",
+            href: link.href,
+            target: "_blank",
+            class: "bio-properties-panel-feel-popup__title-link",
+            children: [link.title, jsxRuntime.jsx(LaunchIcon, {})]
+          }, index);
+        })
+      })
     }), jsxRuntime.jsx(Popup.Body, {
       children: jsxRuntime.jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
@@ -1711,11 +1705,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);
@@ -1793,19 +1787,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 {
@@ -1913,22 +1907,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 {
@@ -2414,26 +2408,26 @@ const OptionalFeelCheckbox = compat.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 {
@@ -2520,27 +2514,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, {
@@ -2550,25 +2544,25 @@ 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 {string} [props.placeholder]
+/**
+ * @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]
  */
 function FeelTextAreaEntry(props) {
   return jsxRuntime.jsx(FeelEntry, {
@@ -2578,24 +2572,24 @@ function FeelTextAreaEntry(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, {
@@ -2605,24 +2599,24 @@ function FeelToggleSwitchEntry(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 FeelCheckboxEntry(props) {
   return jsxRuntime.jsx(FeelEntry, {
@@ -2632,26 +2626,26 @@ function FeelCheckboxEntry(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, {
@@ -2720,84 +2714,85 @@ const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
 const DEFAULT_TOOLTIP = {};
 
-/**
- * @typedef { {
- *    component: import('preact').Component,
- *    id: String,
- *    isEdited?: Function
- * } } EntryDefinition
- *
- * @typedef { {
- *    autoFocusEntry: String,
- *    autoOpen?: Boolean,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    remove: (event: MouseEvent) => void
- * } } ListItemDefinition
- *
- * @typedef { {
- *    add: (event: MouseEvent) => void,
- *    component: import('preact').Component,
- *    element: Object,
- *    id: String,
- *    items: Array<ListItemDefinition>,
- *    label: String,
- *    shouldOpen?: Boolean
- * } } ListGroupDefinition
- *
- * @typedef { {
- *    component?: import('preact').Component,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    shouldOpen?: Boolean
- * } } GroupDefinition
- *
- *  @typedef { {
- *    [id: String]: GetDescriptionFunction
- * } } DescriptionConfig
- *
- *  @typedef { {
- *    [id: String]: GetTooltipFunction
- * } } TooltipConfig
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetDescriptionFunction
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetTooltipFunction
- *
- * @typedef { {
- *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
- *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
- * } } PlaceholderProvider
- *
+/**
+ * @typedef { {
+ *    component: import('preact').Component,
+ *    id: String,
+ *    isEdited?: Function
+ * } } EntryDefinition
+ *
+ * @typedef { {
+ *    autoFocusEntry: String,
+ *    autoOpen?: Boolean,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    remove: (event: MouseEvent) => void
+ * } } ListItemDefinition
+ *
+ * @typedef { {
+ *    add: (event: MouseEvent) => void,
+ *    component: import('preact').Component,
+ *    element: Object,
+ *    id: String,
+ *    items: Array<ListItemDefinition>,
+ *    label: String,
+ *    shouldOpen?: Boolean
+ * } } ListGroupDefinition
+ *
+ * @typedef { {
+ *    component?: import('preact').Component,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    shouldOpen?: Boolean
+ * } } GroupDefinition
+ *
+ *  @typedef { {
+ *    [id: String]: GetDescriptionFunction
+ * } } DescriptionConfig
+ *
+ *  @typedef { {
+ *    [id: String]: GetTooltipFunction
+ * } } TooltipConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetTooltipFunction
+ *
+ * @typedef { {
+ *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+ *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+ * } } PlaceholderProvider
+ *
  */
 
-/**
- * A basic properties panel component. Describes *how* content will be rendered, accepts
- * data from implementor to describe *what* will be rendered.
- *
- * @param {Object} props
- * @param {Object|Array} props.element
- * @param {import('./components/Header').HeaderProvider} props.headerProvider
- * @param {PlaceholderProvider} [props.placeholderProvider]
- * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
- * @param {Object} [props.layoutConfig]
- * @param {Function} [props.layoutChanged]
- * @param {DescriptionConfig} [props.descriptionConfig]
- * @param {Function} [props.descriptionLoaded]
- * @param {TooltipConfig} [props.tooltipConfig]
- * @param {Function} [props.tooltipLoaded]
- * @param {HTMLElement} [props.feelPopupContainer]
- * @param {Object} [props.eventBus]
+/**
+ * A basic properties panel component. Describes *how* content will be rendered, accepts
+ * data from implementor to describe *what* will be rendered.
+ *
+ * @param {Object} props
+ * @param {Object|Array} props.element
+ * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {PlaceholderProvider} [props.placeholderProvider]
+ * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+ * @param {Object} [props.layoutConfig]
+ * @param {Function} [props.layoutChanged]
+ * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {Function} [props.descriptionLoaded]
+ * @param {TooltipConfig} [props.tooltipConfig]
+ * @param {Function} [props.tooltipLoaded]
+ * @param {HTMLElement} [props.feelPopupContainer]
+ * @param {Function} [props.getFeelPopupLinks]
+ * @param {Object} [props.eventBus]
  */
 function PropertiesPanel(props) {
   const {
@@ -2812,6 +2807,7 @@ function PropertiesPanel(props) {
     tooltipConfig,
     tooltipLoaded,
     feelPopupContainer,
+    getFeelPopupLinks,
     eventBus
   } = props;
 
@@ -2916,6 +2912,7 @@ function PropertiesPanel(props) {
                 element: element,
                 eventBus: eventBus,
                 popupContainer: feelPopupContainer,
+                getPopupLinks: getFeelPopupLinks,
                 children: jsxRuntime.jsxs("div", {
                   class: "bio-properties-panel",
                   children: [jsxRuntime.jsx(Header, {
@@ -2968,11 +2965,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);
@@ -3047,15 +3044,15 @@ function MenuItem({
   });
 }
 
-/**
- *
- * @param {Array<null | Element>} ignoredElements
- * @param {Function} callback
+/**
+ *
+ * @param {Array<null | Element>} ignoredElements
+ * @param {Function} callback
  */
 function useGlobalClick(ignoredElements, callback) {
   hooks.useEffect(() => {
-    /**
-     * @param {MouseEvent} event
+    /**
+     * @param {MouseEvent} event
      */
     function listener(event) {
       if (ignoredElements.some(element => element && element.contains(event.target))) {
@@ -3088,20 +3085,20 @@ function HeaderButton(props) {
   });
 }
 
-/**
- * @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 || {};
@@ -3213,8 +3210,8 @@ function ListItem(props) {
 
 const noop$1 = () => {};
 
-/**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
 function ListGroup(props) {
   const {
@@ -3406,18 +3403,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 {
@@ -3469,19 +3466,19 @@ function prefixId$4(id) {
 
 const noop = () => {};
 
-/**
- * @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.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
+/**
+ * @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.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
  */
 function TemplatingEntry(props) {
   const {
@@ -3656,8 +3653,8 @@ function List(props) {
     }
   }, [open, hasItems]);
 
-  /**
-   * @param {MouseEvent} event
+  /**
+   * @param {MouseEvent} event
    */
   function addItem(event) {
     event.stopPropagation();
@@ -3849,20 +3846,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 {
@@ -4209,20 +4206,20 @@ function Textfield(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {string|import('preact').Component} props.tooltip
- * @param {Function} props.validate
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
+ * @param {Function} props.validate
  */
 function TextfieldEntry(props) {
   const {
@@ -4315,20 +4312,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', {
@@ -4338,8 +4335,8 @@ class FeelPopupModule {
     });
   }
 
-  /**
-   * Close the FEEL popup.
+  /**
+   * Close the FEEL popup.
    */
   close() {
     return this._eventBus.fire('feelPopup._close');
@@ -4376,7 +4373,7 @@ exports.FeelToggleSwitchEntry = FeelToggleSwitchEntry;
 exports.Group = Group;
 exports.Header = Header;
 exports.HeaderButton = HeaderButton;
-exports.HelpIcon = HelpIcon;
+exports.LaunchIcon = LaunchIcon;
 exports.LayoutContext = LayoutContext;
 exports.ListEntry = List;
 exports.ListGroup = ListGroup;