@bpmn-io/properties-panel 1.3.1 → 1.5.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { useContext, useRef, useEffect, useMemo, useState, useCallback, useLayoutEffect } from '../preact/hooks';
+import { useContext, useRef, useEffect, useMemo, useCallback, useState, useLayoutEffect } from '../preact/hooks';
 import { isFunction, isArray, get, assign, set, sortBy, find, isNumber, debounce } from 'min-dash';
 import classnames from 'classnames';
 import { forwardRef } from '../preact/compat';
@@ -6,6 +6,7 @@ import { jsx, jsxs } from '../preact/jsx-runtime';
 import { query } from 'min-dom';
 import { createContext, createElement } from '../preact';
 import FeelEditor from '@bpmn-io/feel-editor';
+import { FeelersEditor } from 'feelers';
 
 var ArrowIcon = function ArrowIcon(props) {
   return jsx("svg", {
@@ -166,19 +167,19 @@ const ErrorsContext = createContext({
   errors: {}
 });
 
-/**
- * @typedef {Function} <propertiesPanel.showEntry> callback
- *
- * @example
- *
- * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
- *   // ...
- * });
- *
- * @param {Object} context
- * @param {boolean} [context.focus]
- *
- * @returns void
+/**
+ * @typedef {Function} <propertiesPanel.showEntry> callback
+ *
+ * @example
+ *
+ * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+ *   // ...
+ * });
+ *
+ * @param {Object} context
+ * @param {boolean} [context.focus]
+ *
+ * @returns void
  */
 const EventContext = createContext({
   eventBus: null
@@ -191,20 +192,20 @@ const LayoutContext = 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 {
@@ -220,11 +221,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 = useContext(EventContext);
@@ -256,24 +257,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 = useMemo(() => new Map(), dependencies);
@@ -288,20 +289,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 {
@@ -309,22 +310,17 @@ function useLayoutState(path, defaultValue) {
     setLayoutForKey
   } = useContext(LayoutContext);
   const layoutForKey = getLayoutForKey(path, defaultValue);
-  const [value, set] = useState(layoutForKey);
-  const setState = newValue => {
-    // (1) set component state
-    set(newValue);
-
-    // (2) set context
+  const setState = 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) {
@@ -335,12 +331,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 {
@@ -371,20 +367,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) {
   useEffect(() => {
@@ -423,19 +419,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 = useRef(callback);
@@ -528,13 +524,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 {
@@ -560,72 +556,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 {
@@ -642,6 +638,12 @@ function PropertiesPanel(props) {
 
   // set-up layout context
   const [layout, setLayout] = useState(createLayout(layoutConfig));
+
+  // react to external changes in the layout config
+  useEffect(() => {
+    const newLayout = createLayout(layoutConfig);
+    setLayout(newLayout);
+  }, [layoutConfig]);
   useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
@@ -741,9 +743,9 @@ function PropertiesPanel(props) {
 
 // helpers //////////////////
 
-function createLayout(overrides) {
+function createLayout(overrides, defaults = DEFAULT_LAYOUT) {
   return {
-    ...DEFAULT_LAYOUT,
+    ...defaults,
     ...overrides
   };
 }
@@ -815,15 +817,15 @@ function MenuItem({
   });
 }
 
-/**
- *
- * @param {Array<null | Element>} ignoredElements
- * @param {Function} callback
+/**
+ *
+ * @param {Array<null | Element>} ignoredElements
+ * @param {Function} callback
  */
 function useGlobalClick(ignoredElements, callback) {
   useEffect(() => {
-    /**
-     * @param {MouseEvent} event
+    /**
+     * @param {MouseEvent} event
      */
     function listener(event) {
       if (ignoredElements.some(element => element && element.contains(event.target))) {
@@ -952,10 +954,10 @@ function ListItem(props) {
   });
 }
 
-const noop$2 = () => {};
+const noop$3 = () => {};
 
-/**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
 function ListGroup(props) {
   const {
@@ -1061,7 +1063,7 @@ function ListGroup(props) {
     ref: groupRef,
     children: [jsxs("div", {
       class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
-      onClick: hasItems ? toggleOpen : noop$2,
+      onClick: hasItems ? toggleOpen : noop$3,
       children: [jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
@@ -1118,8 +1120,8 @@ function ListGroup(props) {
 
 // helpers ////////////////////
 
-/**
- * Sorts given items alphanumeric by label
+/**
+ * Sorts given items alphanumeric by label
  */
 function sortItems(items) {
   return sortBy(items, i => i.label.toLowerCase());
@@ -1195,17 +1197,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 {
@@ -1242,7 +1244,7 @@ function CheckboxEntry(props) {
     })]
   });
 }
-function isEdited$7(node) {
+function isEdited$8(node) {
   return node && !!node.checked;
 }
 
@@ -1252,7 +1254,7 @@ function prefixId$7(id) {
   return `bio-properties-panel-${id}`;
 }
 
-const useBufferedFocus = function (editor, ref) {
+const useBufferedFocus$1 = function (editor, ref) {
   const [buffer, setBuffer] = useState(undefined);
   ref.current = useMemo(() => ({
     focus: offset => {
@@ -1273,7 +1275,7 @@ const useBufferedFocus = function (editor, ref) {
     }
   }, [editor, buffer]);
 };
-const CodeEditor = forwardRef((props, ref) => {
+const CodeEditor$1 = forwardRef((props, ref) => {
   const {
     value,
     onInput,
@@ -1286,7 +1288,7 @@ const CodeEditor = forwardRef((props, ref) => {
   const inputRef = useRef();
   const [editor, setEditor] = useState();
   const [localValue, setLocalValue] = useState(value || '');
-  useBufferedFocus(editor, ref);
+  useBufferedFocus$1(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
@@ -1294,10 +1296,10 @@ const CodeEditor = forwardRef((props, ref) => {
   useEffect(() => {
     let editor;
 
-    /* Trigger FEEL toggle when
-     *
-     * - `backspace` is pressed
-     * - AND the cursor is at the beginning of the input
+    /* Trigger FEEL toggle when
+     *
+     * - `backspace` is pressed
+     * - AND the cursor is at the beginning of the input
      */
     const onKeyDown = e => {
       if (e.key !== 'Backspace' || !editor) {
@@ -1368,12 +1370,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 {
@@ -1381,7 +1383,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';
@@ -1402,7 +1404,7 @@ function FeelIcon(props) {
   });
 }
 
-const noop = () => {};
+const noop$1 = () => {};
 function FeelTextfield(props) {
   const {
     debounce,
@@ -1542,7 +1544,7 @@ function FeelTextfield(props) {
         active: feelActive,
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
-      }), feelActive ? jsx(CodeEditor, {
+      }), feelActive ? jsx(CodeEditor$1, {
         id: prefixId$6(id),
         name: id,
         onInput: handleLocalInput,
@@ -1648,17 +1650,24 @@ const OptionalFeelTextArea = 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 {
@@ -1673,7 +1682,7 @@ function FeelEntry(props) {
     setValue,
     tooltipContainer,
     validate,
-    show = noop,
+    show = noop$1,
     example,
     variables,
     onFocus,
@@ -1743,19 +1752,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 jsx(FeelEntry, {
@@ -1764,7 +1778,7 @@ function FeelTextArea(props) {
     ...props
   });
 }
-function isEdited$6(node) {
+function isEdited$7(node) {
   return node && (!!node.value || node.classList.contains('edited'));
 }
 
@@ -1774,6 +1788,260 @@ function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
 
+const useBufferedFocus = function (editor, ref) {
+  const [buffer, setBuffer] = useState(undefined);
+  ref.current = useMemo(() => ({
+    focus: offset => {
+      if (editor) {
+        editor.focus(offset);
+      } else {
+        if (typeof offset === 'undefined') {
+          offset = Infinity;
+        }
+        setBuffer(offset);
+      }
+    }
+  }), [editor]);
+  useEffect(() => {
+    if (typeof buffer !== 'undefined' && editor) {
+      editor.focus(buffer);
+      setBuffer(false);
+    }
+  }, [editor, buffer]);
+};
+const CodeEditor = forwardRef((props, ref) => {
+  const {
+    value,
+    onInput,
+    onLint = () => {},
+    contentAttributes = {},
+    disabled,
+    tooltipContainer,
+    useGutters = false,
+    darkMode = false
+  } = props;
+  const inputRef = useRef();
+  const [editor, setEditor] = useState();
+  const [localValue, setLocalValue] = useState(value || '');
+  useBufferedFocus(editor, ref);
+  const handleInput = useStaticCallback(newValue => {
+    onInput(newValue);
+    setLocalValue(newValue);
+  });
+  useEffect(() => {
+    let editor;
+    editor = new 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);
+    };
+  }, []);
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    if (value === localValue) {
+      return;
+    }
+    editor.setValue(value);
+    setLocalValue(value);
+  }, [value]);
+  const handleClick = () => {
+    ref.current.focus();
+  };
+  return jsx("div", {
+    name: props.name,
+    class: classnames('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] = useState(null);
+  const [validationError, setValidationError] = useState(null);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setValidationError(newValidationError);
+    }
+  }, [value]);
+  const onInput = useStaticCallback(newValue => {
+    let newValidationError = null;
+    if (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 = useCallback(err => {
+    setLocalError(err);
+  }, []);
+  if (previousValue === value && validationError) {
+    value = cachedInvalidValue;
+  }
+  const temporaryError = useError(id);
+  const error = localError || temporaryError || validationError;
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsx(FeelTemplating, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onInput: onInput,
+      onError: onError,
+      show: show,
+      value: value,
+      tooltipContainer: tooltipContainer
+    }, element), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), 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] = useState(value);
+  const editorRef = useShowEntryEvent(id);
+  const containerRef = useRef();
+  const [focus, _setFocus] = 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 = 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);
+  });
+  useEffect(() => {
+    if (typeof focus !== 'undefined') {
+      editorRef.current.focus(focus);
+      _setFocus(undefined);
+    }
+  }, [focus]);
+  useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+    setLocalValue(value ? value : '');
+  }, [value]);
+  return jsxs("div", {
+    class: "bio-properties-panel-feelers",
+    children: [jsx("label", {
+      id: prefixIdLabel(id),
+      class: "bio-properties-panel-label",
+      onClick: () => setFocus(),
+      children: label
+    }), jsx("div", {
+      class: "bio-properties-panel-feelers-input",
+      ref: containerRef,
+      children: 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,
@@ -1802,8 +2070,8 @@ function List(props) {
     }
   }, [open, hasItems]);
 
-  /**
-   * @param {MouseEvent} event
+  /**
+   * @param {MouseEvent} event
    */
   function addItem(event) {
     event.stopPropagation();
@@ -1915,14 +2183,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 = useRef(currentItems.slice());
@@ -2018,22 +2286,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 {
@@ -2159,6 +2427,16 @@ function Select(props) {
       value: localValue,
       disabled: disabled,
       children: options.map((option, idx) => {
+        if (option.children) {
+          return jsx("optgroup", {
+            label: option.label,
+            children: option.children.map((child, idx) => jsx("option", {
+              value: child.value,
+              disabled: child.disabled,
+              children: child.label
+            }, idx))
+          }, idx);
+        }
         return jsx("option", {
           value: option.value,
           disabled: option.disabled,
@@ -2169,18 +2447,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 {
@@ -2351,20 +2629,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 {
@@ -2470,19 +2748,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 {
@@ -2611,17 +2889,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 {
@@ -2681,5 +2959,5 @@ var index = {
   debounceInput: ['factory', debounceInput]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelEntry, FeelOptionalIcon, FeelRequiredIcon, FeelTextArea as FeelTextAreaEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$7 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useError, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelEntry, FeelOptionalIcon, FeelRequiredIcon, FeelTemplatingEntry, FeelTextArea as FeelTextAreaEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$8 as isCheckboxEntryEdited, isEdited$7 as isFeelEntryEdited, isEdited$6 as isFeelTemplatingEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useError, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver };
 //# sourceMappingURL=index.esm.js.map