@bpmn-io/properties-panel 1.4.0 → 1.5.0

package/dist/index.js

@@ -10,6 +10,7 @@ var jsxRuntime = require('../preact/jsx-runtime');
 var minDom = require('min-dom');
 var preact = require('../preact');
 var FeelEditor = require('@bpmn-io/feel-editor');
+var feelers = require('feelers');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -175,19 +176,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({
   eventBus: null
@@ -200,20 +201,20 @@ const LayoutContext = preact.createContext({
   setLayoutForKey: () => {}
 });
 
-/**
- * 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 {
@@ -229,11 +230,11 @@ function useError(id) {
   return errors[id];
 }
 
-/**
- * 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);
@@ -265,24 +266,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);
@@ -297,20 +298,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 {
@@ -318,22 +319,17 @@ function useLayoutState(path, defaultValue) {
     setLayoutForKey
   } = hooks.useContext(LayoutContext);
   const layoutForKey = getLayoutForKey(path, defaultValue);
-  const [value, set] = hooks.useState(layoutForKey);
-  const setState = newValue => {
-    // (1) set component state
-    set(newValue);
-
-    // (2) set context
+  const setState = hooks.useCallback(newValue => {
     setLayoutForKey(path, newValue);
-  };
-  return [value, setState];
+  }, [setLayoutForKey]);
+  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) {
@@ -344,12 +340,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 {
@@ -380,20 +376,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) {
   hooks.useEffect(() => {
@@ -432,19 +428,19 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
   }, [ref, scrollContainerSelector, 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);
@@ -537,13 +533,13 @@ function DataMarker() {
   });
 }
 
-/**
- * @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 {
@@ -569,72 +565,72 @@ const DEFAULT_LAYOUT = {
 };
 const DEFAULT_DESCRIPTION = {};
 
-/**
- * @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,
- *    shouldSort?: Boolean,
- *    shouldOpen?: Boolean
- * } } ListGroupDefinition
- *
- * @typedef { {
- *    component?: import('preact').Component,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    shouldOpen?: Boolean
- * } } GroupDefinition
- *
- *  @typedef { {
- *    [id: String]: GetDescriptionFunction
- * } } DescriptionConfig
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetDescriptionFunction
- *
- * @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,
+ *    shouldSort?: Boolean,
+ *    shouldOpen?: Boolean
+ * } } ListGroupDefinition
+ *
+ * @typedef { {
+ *    component?: import('preact').Component,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    shouldOpen?: Boolean
+ * } } GroupDefinition
+ *
+ *  @typedef { {
+ *    [id: String]: GetDescriptionFunction
+ * } } DescriptionConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ * @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 {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 {Object} [props.eventBus]
  */
 function PropertiesPanel(props) {
   const {
@@ -651,6 +647,12 @@ function PropertiesPanel(props) {
 
   // set-up layout context
   const [layout, setLayout] = hooks.useState(createLayout(layoutConfig));
+
+  // react to external changes in the layout config
+  hooks.useEffect(() => {
+    const newLayout = createLayout(layoutConfig);
+    setLayout(newLayout);
+  }, [layoutConfig]);
   hooks.useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
@@ -750,9 +752,9 @@ function PropertiesPanel(props) {
 
 // helpers //////////////////
 
-function createLayout(overrides) {
+function createLayout(overrides, defaults = DEFAULT_LAYOUT) {
   return {
-    ...DEFAULT_LAYOUT,
+    ...defaults,
     ...overrides
   };
 }
@@ -824,15 +826,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))) {
@@ -961,10 +963,10 @@ function ListItem(props) {
   });
 }
 
-const noop$2 = () => {};
+const noop$3 = () => {};
 
-/**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
 function ListGroup(props) {
   const {
@@ -1070,7 +1072,7 @@ function ListGroup(props) {
     ref: groupRef,
     children: [jsxRuntime.jsxs("div", {
       class: classnames__default["default"]('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
-      onClick: hasItems ? toggleOpen : noop$2,
+      onClick: hasItems ? toggleOpen : noop$3,
       children: [jsxRuntime.jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
@@ -1127,8 +1129,8 @@ function ListGroup(props) {
 
 // helpers ////////////////////
 
-/**
- * Sorts given items alphanumeric by label
+/**
+ * Sorts given items alphanumeric by label
  */
 function sortItems(items) {
   return minDash.sortBy(items, i => i.label.toLowerCase());
@@ -1204,17 +1206,17 @@ 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 {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 {boolean} [props.disabled]
  */
 function CheckboxEntry(props) {
   const {
@@ -1251,7 +1253,7 @@ function CheckboxEntry(props) {
     })]
   });
 }
-function isEdited$7(node) {
+function isEdited$8(node) {
   return node && !!node.checked;
 }
 
@@ -1261,7 +1263,7 @@ function prefixId$7(id) {
   return `bio-properties-panel-${id}`;
 }
 
-const useBufferedFocus = function (editor, ref) {
+const useBufferedFocus$1 = function (editor, ref) {
   const [buffer, setBuffer] = hooks.useState(undefined);
   ref.current = hooks.useMemo(() => ({
     focus: offset => {
@@ -1282,7 +1284,7 @@ const useBufferedFocus = function (editor, ref) {
     }
   }, [editor, buffer]);
 };
-const CodeEditor = compat.forwardRef((props, ref) => {
+const CodeEditor$1 = compat.forwardRef((props, ref) => {
   const {
     value,
     onInput,
@@ -1295,7 +1297,7 @@ const CodeEditor = compat.forwardRef((props, ref) => {
   const inputRef = hooks.useRef();
   const [editor, setEditor] = hooks.useState();
   const [localValue, setLocalValue] = hooks.useState(value || '');
-  useBufferedFocus(editor, ref);
+  useBufferedFocus$1(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
@@ -1303,10 +1305,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) {
@@ -1377,12 +1379,12 @@ function FeelIndicator(props) {
   });
 }
 
-const noop$1 = () => {};
+const noop$2 = () => {};
 
-/**
- * @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 {
@@ -1390,7 +1392,7 @@ function FeelIcon(props) {
     feel = false,
     active,
     disabled = false,
-    onClick = noop$1
+    onClick = noop$2
   } = props;
   const feelRequiredLabel = ' must be a FEEL expression';
   const feelOptionalLabel = ' can optionally be a FEEL expression';
@@ -1411,7 +1413,7 @@ function FeelIcon(props) {
   });
 }
 
-const noop = () => {};
+const noop$1 = () => {};
 function FeelTextfield(props) {
   const {
     debounce,
@@ -1551,7 +1553,7 @@ function FeelTextfield(props) {
         active: feelActive,
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
-      }), feelActive ? jsxRuntime.jsx(CodeEditor, {
+      }), feelActive ? jsxRuntime.jsx(CodeEditor$1, {
         id: prefixId$6(id),
         name: id,
         onInput: handleLocalInput,
@@ -1657,17 +1659,24 @@ const OptionalFeelTextArea = 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 {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @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 {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 FeelEntry(props) {
   const {
@@ -1682,7 +1691,7 @@ function FeelEntry(props) {
     setValue,
     tooltipContainer,
     validate,
-    show = noop,
+    show = noop$1,
     example,
     variables,
     onFocus,
@@ -1752,19 +1761,24 @@ 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.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @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 {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 FeelTextArea(props) {
   return jsxRuntime.jsx(FeelEntry, {
@@ -1773,7 +1787,7 @@ function FeelTextArea(props) {
     ...props
   });
 }
-function isEdited$6(node) {
+function isEdited$7(node) {
   return node && (!!node.value || node.classList.contains('edited'));
 }
 
@@ -1783,6 +1797,260 @@ function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
 
+const useBufferedFocus = function (editor, ref) {
+  const [buffer, setBuffer] = hooks.useState(undefined);
+  ref.current = hooks.useMemo(() => ({
+    focus: offset => {
+      if (editor) {
+        editor.focus(offset);
+      } else {
+        if (typeof offset === 'undefined') {
+          offset = Infinity;
+        }
+        setBuffer(offset);
+      }
+    }
+  }), [editor]);
+  hooks.useEffect(() => {
+    if (typeof buffer !== 'undefined' && editor) {
+      editor.focus(buffer);
+      setBuffer(false);
+    }
+  }, [editor, buffer]);
+};
+const CodeEditor = compat.forwardRef((props, ref) => {
+  const {
+    value,
+    onInput,
+    onLint = () => {},
+    contentAttributes = {},
+    disabled,
+    tooltipContainer,
+    useGutters = false,
+    darkMode = false
+  } = props;
+  const inputRef = hooks.useRef();
+  const [editor, setEditor] = hooks.useState();
+  const [localValue, setLocalValue] = hooks.useState(value || '');
+  useBufferedFocus(editor, ref);
+  const handleInput = useStaticCallback(newValue => {
+    onInput(newValue);
+    setLocalValue(newValue);
+  });
+  hooks.useEffect(() => {
+    let editor;
+    editor = new feelers.FeelersEditor({
+      container: inputRef.current,
+      onChange: handleInput,
+      onLint: onLint,
+      contentAttributes: contentAttributes,
+      tooltipContainer: tooltipContainer,
+      value: localValue,
+      darkMode: darkMode,
+      enableGutters: useGutters
+    });
+    setEditor(editor);
+    return () => {
+      onLint([]);
+      inputRef.current.innerHTML = '';
+      setEditor(null);
+    };
+  }, []);
+  hooks.useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    if (value === localValue) {
+      return;
+    }
+    editor.setValue(value);
+    setLocalValue(value);
+  }, [value]);
+  const handleClick = () => {
+    ref.current.focus();
+  };
+  return jsxRuntime.jsx("div", {
+    name: props.name,
+    class: classnames__default["default"]('bio-properties-panel-feelers-editor bio-properties-panel-input', localValue ? 'edited' : null, disabled ? 'disabled' : null),
+    ref: inputRef,
+    onClick: handleClick
+  });
+});
+
+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
+ */
+function FeelTemplatingEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    debounce,
+    disabled,
+    label,
+    getValue,
+    setValue,
+    tooltipContainer,
+    validate,
+    show = noop
+  } = props;
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
+  const [validationError, setValidationError] = hooks.useState(null);
+  const [localError, setLocalError] = hooks.useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  hooks.useEffect(() => {
+    if (minDash.isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setValidationError(newValidationError);
+    }
+  }, [value]);
+  const onInput = useStaticCallback(newValue => {
+    let newValidationError = null;
+    if (minDash.isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      // don't create multiple commandStack entries for the same value
+      if (newValue !== value) {
+        setValue(newValue);
+      }
+    }
+    setValidationError(newValidationError);
+  });
+  const onError = hooks.useCallback(err => {
+    setLocalError(err);
+  }, []);
+  if (previousValue === value && validationError) {
+    value = cachedInvalidValue;
+  }
+  const temporaryError = useError(id);
+  const error = localError || temporaryError || validationError;
+  return jsxRuntime.jsxs("div", {
+    class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsxRuntime.jsx(FeelTemplating, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onInput: onInput,
+      onError: onError,
+      show: show,
+      value: value,
+      tooltipContainer: tooltipContainer
+    }, element), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsxRuntime.jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function FeelTemplating(props) {
+  const {
+    debounce,
+    id,
+    label,
+    onInput,
+    onError,
+    value = '',
+    disabled = false,
+    tooltipContainer
+  } = props;
+  const [localValue, setLocalValue] = hooks.useState(value);
+  const editorRef = useShowEntryEvent(id);
+  const containerRef = hooks.useRef();
+  const [focus, _setFocus] = hooks.useState(undefined);
+  const setFocus = (offset = 0) => {
+    const hasFocus = containerRef.current.contains(document.activeElement);
+
+    // Keep caret position if it is already focused, otherwise focus at the end
+    const position = hasFocus ? document.activeElement.selectionStart : Infinity;
+    _setFocus(position + offset);
+  };
+  const handleInputCallback = hooks.useMemo(() => {
+    return debounce(newValue => onInput(newValue.length ? newValue : undefined));
+  }, [onInput, debounce]);
+  const handleInput = newValue => {
+    handleInputCallback(newValue);
+    setLocalValue(newValue);
+  };
+  const handleLint = useStaticCallback(lint => {
+    const errors = lint && lint.length && lint.filter(e => e.severity === 'error') || [];
+    if (!errors.length) {
+      onError(undefined);
+      return;
+    }
+    const error = lint[0];
+    const message = `${error.source}: ${error.message}`;
+    onError(message);
+  });
+  hooks.useEffect(() => {
+    if (typeof focus !== 'undefined') {
+      editorRef.current.focus(focus);
+      _setFocus(undefined);
+    }
+  }, [focus]);
+  hooks.useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+    setLocalValue(value ? value : '');
+  }, [value]);
+  return jsxRuntime.jsxs("div", {
+    class: "bio-properties-panel-feelers",
+    children: [jsxRuntime.jsx("label", {
+      id: prefixIdLabel(id),
+      class: "bio-properties-panel-label",
+      onClick: () => setFocus(),
+      children: label
+    }), jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-feelers-input",
+      ref: containerRef,
+      children: jsxRuntime.jsx(CodeEditor, {
+        name: id,
+        onInput: handleInput,
+        contentAttributes: {
+          'aria-labelledby': prefixIdLabel(id)
+        },
+        disabled: disabled,
+        onLint: handleLint,
+        value: localValue,
+        useGutters: false,
+        ref: editorRef,
+        tooltipContainer: tooltipContainer
+      })
+    })]
+  });
+}
+function isEdited$6(node) {
+  return node && (!!node.value || node.classList.contains('edited'));
+}
+
+// helpers /////////////////
+
+function prefixIdLabel(id) {
+  return `bio-properties-panel-feelers-${id}-label`;
+}
+
 function List(props) {
   const {
     id,
@@ -1811,8 +2079,8 @@ function List(props) {
     }
   }, [open, hasItems]);
 
-  /**
-   * @param {MouseEvent} event
+  /**
+   * @param {MouseEvent} event
    */
   function addItem(event) {
     event.stopPropagation();
@@ -1924,14 +2192,14 @@ function ItemsList(props) {
   });
 }
 
-/**
- * Place new items in the beginning of the list and sort the rest with provided function.
- *
- * @template Item
- * @param {Item[]} currentItems
- * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items
- * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook
- * @returns {Item[]}
+/**
+ * Place new items in the beginning of the list and sort the rest with provided function.
+ *
+ * @template Item
+ * @param {Item[]} currentItems
+ * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items
+ * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook
+ * @returns {Item[]}
  */
 function useSortedItems(currentItems, compareFn, shouldReset = false) {
   const itemsRef = hooks.useRef(currentItems.slice());
@@ -2027,22 +2295,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 {
@@ -2188,18 +2456,18 @@ 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 {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]
  */
 function SelectEntry(props) {
   const {
@@ -2370,20 +2638,20 @@ function TextArea(props) {
   });
 }
 
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} props.description
- * @param {boolean} props.debounce
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {number} props.rows
- * @param {boolean} props.monospace
- * @param {boolean} [props.disabled]
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} props.description
+ * @param {boolean} props.debounce
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {number} props.rows
+ * @param {boolean} props.monospace
+ * @param {boolean} [props.disabled]
  */
 function TextAreaEntry(props) {
   const {
@@ -2489,19 +2757,19 @@ 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 {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 {Function} props.validate
  */
 function TextfieldEntry(props) {
   const {
@@ -2630,17 +2898,17 @@ 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 {Function} props.getValue
- * @param {Function} props.setValue
- * @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.label
+ * @param {String} props.switcherLabel
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 function ToggleSwitchEntry(props) {
   const {
@@ -2715,6 +2983,7 @@ exports.ExternalLinkIcon = ExternalLinkIcon;
 exports.FeelEntry = FeelEntry;
 exports.FeelOptionalIcon = FeelOptionalIcon;
 exports.FeelRequiredIcon = FeelRequiredIcon;
+exports.FeelTemplatingEntry = FeelTemplatingEntry;
 exports.FeelTextAreaEntry = FeelTextArea;
 exports.Group = Group;
 exports.Header = Header;
@@ -2732,8 +3001,9 @@ exports.SimpleEntry = Simple;
 exports.TextAreaEntry = TextAreaEntry;
 exports.TextFieldEntry = TextfieldEntry;
 exports.ToggleSwitchEntry = ToggleSwitchEntry;
-exports.isCheckboxEntryEdited = isEdited$7;
-exports.isFeelEntryEdited = isEdited$6;
+exports.isCheckboxEntryEdited = isEdited$8;
+exports.isFeelEntryEdited = isEdited$7;
+exports.isFeelTemplatingEntryEdited = isEdited$6;
 exports.isNumberFieldEntryEdited = isEdited$5;
 exports.isSelectEntryEdited = isEdited$4;
 exports.isSimpleEntryEdited = isEdited$3;