@bpmn-io/form-js-editor 1.0.0-alpha.0 → 1.0.0-alpha.10

package/dist/index.es.js

@@ -1,12 +1,13 @@
-import { FormFieldRegistry as FormFieldRegistry$1, clone, iconsByType, Text as Text$1, FormFields, formFields, FormContext, FormRenderContext, FormComponent, FormLayouter, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, FeelersTemplating, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, clone, iconsByType, Text as Text$1, FormFields, formFields, FormContext, FormRenderContext, FormComponent, FormLayouter, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
 import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, set as set$1, isString, isUndefined, without, has } from 'min-dash';
 import classnames from 'classnames';
-import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
-import { useContext, useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from 'preact/hooks';
-import { createContext, render, createElement } from 'preact';
-import React, { forwardRef } from 'preact/compat';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
+import { useContext, useState, useMemo, useEffect, useCallback, useRef as useRef$1, useLayoutEffect } from 'preact/hooks';
+import { createContext, Fragment, render, createElement } from 'preact';
+import * as React from 'preact/compat';
+import { createPortal, useRef, useContext as useContext$1, useEffect as useEffect$1, forwardRef } from 'preact/compat';
 import dragula from 'dragula';
 import { classes, query, closest, event, matches, domify } from 'min-dom';
 import { mutate } from 'array-move';
@@ -933,83 +934,91 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
+var _path$3;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var CloseIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$3({
-  width: "16",
-  height: "16",
-  fill: "currentColor",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M12 4.7l-.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"
-})));
+var SvgClose = function SvgClose(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "currentColor"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("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",
+    clipRule: "evenodd"
+  })));
+};
+var CloseIcon = SvgClose;
 
+var _path$2, _path2;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var DeleteIcon$1 = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$2({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  fill: "none"
-}, props), /*#__PURE__*/React.createElement("rect", {
-  width: "16",
-  height: "16",
-  x: ".536",
-  fill: "#fff",
-  rx: "3",
-  style: {
-    mixBlendMode: "multiply"
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "#fff",
-  d: "M.536 0h16v16h-16z",
-  style: {
-    mixBlendMode: "multiply"
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentcolor",
-  d: "M7.536 6h-1v6h1V6zm3 0h-1v6h1V6z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentcolor",
-  d: "M2.536 3v1h1v10a1 1 0 001 1h8a1 1 0 001-1V4h1V3h-12zm2 11V4h8v10h-8zm6-13h-4v1h4V1z"
-})));
+var SvgDelete = function SvgDelete(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    width: 16,
+    height: 16,
+    x: 0.536,
+    fill: "#fff",
+    rx: 3,
+    style: {
+      mixBlendMode: "multiply"
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h16v16H0z",
+    style: {
+      mixBlendMode: "multiply"
+    },
+    transform: "translate(.536)"
+  }), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M2.536 3v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3h-12Zm2 11V4h8v10h-8Zm6-13h-4v1h4V1Z"
+  })));
+};
+var DeleteIcon$1 = SvgDelete;
 
+var _path$1;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var DraggableIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$1({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  fill: "currentcolor",
-  viewBox: "0 0 32 32"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M0 0h32v32H0z",
-  fill: "none"
-})));
+var SvgDraggable = function SvgDraggable(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    width: 16,
+    height: 16,
+    fill: "currentcolor",
+    viewBox: "0 0 32 32"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h32v32H0z",
+    style: {
+      fill: "none"
+    }
+  }));
+};
+var DraggableIcon = SvgDraggable;
 
+var _path;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SearchIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: "15",
-  height: "15",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M14.5 13.793l-3.776-3.776a5.508 5.508 0 10-.707.707l3.776 3.776.707-.707zM2 6.5a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z",
-  fill: "currentColor"
-})));
+var SvgSearch = function SvgSearch(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 15,
+    height: 15,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776.707-.707ZM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
+  })));
+};
+var SearchIcon = SvgSearch;
 
 function EditorText(props) {
   const {
@@ -1070,6 +1079,228 @@ class EditorFormFields extends FormFields {
   }
 }
 
+var ModularSection = (props => {
+  const {
+    rootClass,
+    RootElement,
+    section,
+    children
+  } = props;
+  const eventBus = useService$1('eventBus');
+  const sectionConfig = useService$1(`config.${section}`);
+  const [parent, setParent] = useState(sectionConfig && sectionConfig.parent || null);
+  const [shouldRender, setShouldRender] = useState(true);
+  const ParentElement = useMemo(() => {
+    if (parent === null) {
+      return null;
+    }
+    if (typeof parent === 'string') {
+      const element = document.querySelector(parent);
+      if (!element) {
+        throw new Error(`Target root element with selector '${parent}' not found for section '${section}'`);
+      }
+      return document.querySelector(parent);
+    }
+
+    // @ts-ignore
+    if (!(parent instanceof Element)) {
+      throw new Error(`Target root element for section '${section}' must be a valid selector or DOM element`);
+    }
+    return parent;
+  }, [section, parent]);
+  useEffect(() => {
+    const onAttach = ({
+      container
+    }) => {
+      setParent(container);
+      setShouldRender(true);
+    };
+    const onDetach = () => {
+      setParent(null);
+      setShouldRender(false);
+    };
+    const onReset = () => {
+      setParent(null);
+      setShouldRender(true);
+    };
+    eventBus.on(`${section}.attach`, onAttach);
+    eventBus.on(`${section}.detach`, onDetach);
+    eventBus.on(`${section}.reset`, onReset);
+    eventBus.fire(`${section}.section.rendered`);
+    return () => {
+      eventBus.off(`${section}.attach`, onAttach);
+      eventBus.off(`${section}.detach`, onDetach);
+      eventBus.off(`${section}.reset`, onReset);
+      eventBus.fire(`${section}.section.destroyed`);
+    };
+  }, [eventBus, section]);
+  useEffect(() => {
+    if (shouldRender) {
+      eventBus.fire(`${section}.rendered`, {
+        element: ParentElement
+      });
+      return () => {
+        eventBus.fire(`${section}.destroyed`, {
+          element: ParentElement
+        });
+      };
+    }
+  }, [eventBus, section, shouldRender, ParentElement]);
+  const Root = useCallback(({
+    children
+  }) => RootElement ? jsx(RootElement, {
+    children: children
+  }) : jsx("div", {
+    className: rootClass,
+    children: children
+  }), [rootClass, RootElement]);
+  return shouldRender ? parent ? createPortal(jsx(Root, {
+    children: children
+  }), ParentElement) : jsx(Root, {
+    children: children
+  }) : null;
+});
+
+const FillContext = createContext({
+  addFill(uid, props) {
+    throw new Error('FillContext.addFill() uninitialized');
+  },
+  removeFill(uid) {
+    throw new Error('FillContext.addFill() uninitialized');
+  }
+});
+var FillContext$1 = FillContext;
+
+var Fill = (props => {
+  const uid = useRef(Symbol('fill_uid'));
+  const fillContext = useContext$1(FillContext$1);
+  useEffect$1(() => {
+    if (!fillContext) {
+      return;
+    }
+    fillContext.addFill({
+      id: uid,
+      ...props
+    });
+    return () => {
+      fillContext.removeFill(uid);
+    };
+  }, [fillContext, props]);
+  return null;
+});
+
+const SlotContext = createContext({
+  fills: []
+});
+var SlotContext$1 = SlotContext;
+
+var Slot = (props => {
+  const {
+    name,
+    fillRoot = FillFragment,
+    groupFn = _groupByGroupName,
+    separatorFn = key => null,
+    limit
+  } = props;
+  const {
+    fills
+  } = useContext(SlotContext$1);
+  const filtered = useMemo(() => fills.filter(fill => fill.slot === name), [fills, name]);
+  const cropped = useMemo(() => limit ? filtered.slice(0, limit) : filtered, [filtered, limit]);
+  const groups = useMemo(() => groupFn(cropped), [cropped, groupFn]);
+  const fillsAndSeparators = useMemo(() => {
+    return buildFills(groups, fillRoot, separatorFn);
+  }, [groups, fillRoot, separatorFn]);
+  return fillsAndSeparators;
+});
+
+/**
+ * Creates a Fragment for a fill.
+ *
+ * @param {Object} fill Fill to be rendered
+ * @returns {Object} Preact Fragment containing fill's children
+ */
+const FillFragment = fill => jsx(Fragment, {
+  children: fill.children
+}, fill.id);
+
+/**
+ * Creates an array of fills, with separators inserted between groups.
+ *
+ * @param {Array} groups Groups of fills
+ * @param {Function} fillRenderer Function to create a fill
+ * @param {Function} separatorRenderer Function to create a separator
+ * @returns {Array} Array of fills and separators
+ */
+const buildFills = (groups, fillRenderer, separatorRenderer) => {
+  const result = [];
+  groups.forEach((array, idx) => {
+    if (idx !== 0) {
+      const separator = separatorRenderer(`__separator_${idx}`);
+      if (separator) {
+        result.push(separator);
+      }
+    }
+    array.forEach(fill => {
+      result.push(fillRenderer(fill));
+    });
+  });
+  return result;
+};
+
+/**
+ * Groups fills by group name property.
+ */
+const _groupByGroupName = fills => {
+  const groups = [];
+  const groupsById = {};
+  fills.forEach(function (fill) {
+    const {
+      group: groupName = 'z_default'
+    } = fill;
+    let group = groupsById[groupName];
+    if (!group) {
+      groupsById[groupName] = group = [];
+      groups.push(group);
+    }
+    group.push(fill);
+  });
+  groups.forEach(group => group.sort(_comparePriority));
+  return Object.keys(groupsById).sort().map(id => groupsById[id]);
+};
+
+/**
+ * Compares fills by priority.
+ */
+const _comparePriority = (a, b) => {
+  return (b.priority || 0) - (a.priority || 0);
+};
+
+var SlotFillRoot = (props => {
+  const [fills, setFills] = useState([]);
+  const fillContext = useMemo(() => ({
+    addFill: fill => {
+      setFills(fills => [...fills.filter(f => f.id !== fill.id), fill]);
+      props.onSetFill && props.onSetFill(fill);
+    },
+    removeFill: id => {
+      setFills(fills => fills.filter(f => f.id !== id));
+      props.onRemoveFill && props.onRemoveFill(id);
+    }
+  }), []);
+  const slotContext = useMemo(() => ({
+    fills
+  }), [fills]);
+  return jsx(SlotContext$1.Provider, {
+    value: slotContext,
+    children: jsx(FillContext$1.Provider, {
+      /* @ts-expect-error */
+      value: fillContext,
+      children: props.children
+    })
+  });
+});
+
 const PALETTE_ENTRIES = formFields.filter(({
   config: fieldConfig
 }) => fieldConfig.type !== 'default').map(({
@@ -1097,7 +1328,7 @@ const PALETTE_GROUPS = [{
 function Palette(props) {
   const [entries, setEntries] = useState(PALETTE_ENTRIES);
   const [searchTerm, setSearchTerm] = useState('');
-  const inputRef = useRef();
+  const inputRef = useRef$1();
   const groups = groupEntries(entries);
   const simplifyString = useCallback(str => {
     return str.toLowerCase().replace(/\s+/g, '');
@@ -1187,9 +1418,19 @@ function Palette(props) {
         class: "fjs-palette-no-entries",
         children: "No components found."
       })]
+    }), jsx("div", {
+      class: "fjs-palette-footer",
+      children: jsx(Slot, {
+        name: "editor-palette__footer",
+        fillRoot: FillRoot
+      })
     })]
   });
 }
+const FillRoot = fill => jsx("div", {
+  className: "fjs-palette-footer-fill",
+  children: fill.children
+});
 
 // helpers ///////
 
@@ -1216,6 +1457,25 @@ function getIndefiniteArticle(type) {
   return 'a';
 }
 
+var InjectedRendersRoot = (() => {
+  const renderInjector = useService$1('renderInjector');
+  const injectedRenderers = renderInjector.fetchRenderers();
+  const injectedProps = useMemo(() => ({
+    useService: useService$1,
+    components: {
+      Fill,
+      Slot
+    }
+  }), []);
+  return jsx(Fragment, {
+    children: injectedRenderers.map(({
+      Renderer
+    }) => jsx(Renderer, {
+      ...injectedProps
+    }))
+  });
+});
+
 const CURSOR_CLS_PATTERN = /^fjs-cursor-.*$/;
 function set(mode) {
   const classes$1 = classes(document.body);
@@ -1538,13 +1798,13 @@ function FieldResizer(props) {
     field,
     position
   } = props;
-  const ref = useRef(null);
+  const ref = useRef$1(null);
   const formLayoutValidator = useService$1('formLayoutValidator');
   const modeling = useService$1('modeling');
 
   // we can't use state as we need to
   // manipulate this inside dragging events
-  const context = useRef({
+  const context = useRef$1({
     startColumns: 0,
     newColumns: 0
   });
@@ -1671,7 +1931,7 @@ function ContextPad(props) {
 function Empty(props) {
   return null;
 }
-function Element(props) {
+function Element$1(props) {
   const eventBus = useService$1('eventBus'),
     formEditor = useService$1('formEditor'),
     formFieldRegistry = useService$1('formFieldRegistry'),
@@ -1684,7 +1944,7 @@ function Element(props) {
     id,
     type
   } = field;
-  const ref = useRef();
+  const ref = useRef$1();
   function scrollIntoView({
     selection
   }) {
@@ -1834,8 +2094,6 @@ function FormEditor$1(props) {
     formEditor = useService$1('formEditor'),
     injector = useService$1('injector'),
     selection = useService$1('selection'),
-    palette = useService$1('palette'),
-    paletteConfig = useService$1('config.palette'),
     propertiesPanel = useService$1('propertiesPanel'),
     propertiesPanelConfig = useService$1('config.propertiesPanel');
   const {
@@ -1845,9 +2103,8 @@ function FormEditor$1(props) {
   const {
     ariaLabel
   } = properties;
-  const formContainerRef = useRef(null);
-  const paletteRef = useRef(null);
-  const propertiesPanelRef = useRef(null);
+  const formContainerRef = useRef$1(null);
+  const propertiesPanelRef = useRef$1(null);
   const [, setSelection] = useState(schema);
   useEffect(() => {
     function handleSelectionChanged(event) {
@@ -1907,7 +2164,7 @@ function FormEditor$1(props) {
       eventBus.off('drag.start', onDragStart);
       eventBus.off('drag.end', onDragEnd);
     };
-  }, []);
+  }, [dragging, eventBus]);
 
   // fire event after render to notify interested parties
   useEffect(() => {
@@ -1916,7 +2173,7 @@ function FormEditor$1(props) {
   const formRenderContext = {
     Children,
     Column,
-    Element,
+    Element: Element$1,
     Empty,
     Row
   };
@@ -1945,14 +2202,6 @@ function FormEditor$1(props) {
   const onSubmit = useCallback(() => {}, []);
   const onReset = useCallback(() => {}, []);
 
-  // attach default palette
-  const hasDefaultPalette = defaultPalette(paletteConfig);
-  useEffect(() => {
-    if (hasDefaultPalette) {
-      palette.attachTo(paletteRef.current);
-    }
-  }, [palette, paletteRef, hasDefaultPalette]);
-
   // attach default properties panel
   const hasDefaultPropertiesPanel = defaultPropertiesPanel(propertiesPanelConfig);
   useEffect(() => {
@@ -1960,31 +2209,38 @@ function FormEditor$1(props) {
       propertiesPanel.attachTo(propertiesPanelRef.current);
     }
   }, [propertiesPanelRef, propertiesPanel, hasDefaultPropertiesPanel]);
-  return jsxs("div", {
+  return jsx("div", {
     class: "fjs-form-editor",
-    children: [jsxs(DragAndDropContext$1.Provider, {
-      value: dragAndDropContext,
-      children: [hasDefaultPalette && jsx("div", {
-        class: "fjs-editor-palette-container",
-        ref: paletteRef
-      }), jsx("div", {
-        ref: formContainerRef,
-        class: "fjs-form-container",
-        children: jsx(FormContext.Provider, {
-          value: formContext,
-          children: jsx(FormRenderContext.Provider, {
-            value: formRenderContext,
-            children: jsx(FormComponent, {
-              onSubmit: onSubmit,
-              onReset: onReset
+    children: jsxs(SlotFillRoot, {
+      children: [jsxs(DragAndDropContext$1.Provider, {
+        value: dragAndDropContext,
+        children: [jsx(ModularSection, {
+          rootClass: "fjs-palette-container",
+          section: "palette",
+          children: jsx(Palette, {})
+        }), jsx("div", {
+          ref: formContainerRef,
+          class: "fjs-form-container",
+          children: jsx(FormContext.Provider, {
+            value: formContext,
+            children: jsx(FormRenderContext.Provider, {
+              value: formRenderContext,
+              children: jsx(FormComponent, {
+                onSubmit: onSubmit,
+                onReset: onReset
+              })
             })
           })
-        })
-      }), jsx(CreatePreview, {})]
-    }), hasDefaultPropertiesPanel && jsx("div", {
-      class: "fjs-editor-properties-container",
-      ref: propertiesPanelRef
-    })]
+        }), jsx(CreatePreview, {})]
+      }), hasDefaultPropertiesPanel && jsx("div", {
+        class: "fjs-editor-properties-container",
+        ref: propertiesPanelRef
+      }), jsx(ModularSection, {
+        rootClass: "fjs-render-injector-container",
+        section: "renderInjector",
+        children: jsx(InjectedRendersRoot, {})
+      })]
+    })
   });
 }
 function getFormFieldIndex(parent, formField) {
@@ -2051,15 +2307,12 @@ function CreatePreview(props) {
 
 // helper //////
 
-function defaultPalette(paletteConfig) {
-  return !(paletteConfig && paletteConfig.parent);
+function findPaletteEntry(type) {
+  return PALETTE_ENTRIES.find(entry => entry.type === type);
 }
 function defaultPropertiesPanel(propertiesPanelConfig) {
   return !(propertiesPanelConfig && propertiesPanelConfig.parent);
 }
-function findPaletteEntry(type) {
-  return PALETTE_ENTRIES.find(entry => entry.type === type);
-}
 
 class Renderer {
   constructor(renderConfig, eventBus, formEditor, injector) {
@@ -4201,69 +4454,80 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
-class PaletteRenderer {
-  constructor(paletteConfig, eventBus) {
-    const {
-      parent
-    } = paletteConfig || {};
+/**
+ * Base class for sectionable UI modules.
+ *
+ * @property {EventBus} _eventBus - EventBus instance used for event handling.
+ * @property {string} managerType - Type of the render manager. Used to form event names.
+ *
+ * @class SectionModuleBase
+ */
+class SectionModuleBase {
+  /**
+   * Create a SectionModuleBase instance.
+   *
+   * @param {any} eventBus - The EventBus instance used for event handling.
+   * @param {string} sectionKey - The type of render manager. Used to form event names.
+   *
+   * @constructor
+   */
+  constructor(eventBus, sectionKey) {
     this._eventBus = eventBus;
-    this._container = domify('<div class="fjs-palette-container"></div>');
-    if (parent) {
-      this.attachTo(parent);
-    }
-    this._eventBus.once('formEditor.rendered', 500, () => {
-      this._render();
+    this._sectionKey = sectionKey;
+    this._eventBus.on(`${this._sectionKey}.section.rendered`, () => {
+      this.isSectionRendered = true;
+    });
+    this._eventBus.on(`${this._sectionKey}.section.destroyed`, () => {
+      this.isSectionRendered = false;
     });
   }
 
   /**
-   * Attach the palette to a parent node.
+   * Attach the managed section to a parent node.
    *
-   * @param {HTMLElement} container
+   * @param {HTMLElement} container - The parent node to attach to.
    */
   attachTo(container) {
-    if (!container) {
-      throw new Error('container required');
-    }
-    if (typeof container === 'string') {
-      container = query(container);
-    }
-
-    // (1) detach from old parent
-    this.detach();
-
-    // (2) append to parent container
-    container.appendChild(this._container);
-
-    // (3) notify interested parties
-    this._eventBus.fire('palette.attach');
+    this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
+      container
+    }));
   }
 
   /**
-   * Detach the palette from its parent node.
+   * Detach the managed section from its parent node.
    */
   detach() {
-    const parentNode = this._container.parentNode;
-    if (parentNode) {
-      parentNode.removeChild(this._container);
-      this._eventBus.fire('palette.detach');
-    }
+    this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.detach`));
   }
-  _render() {
-    render(jsx(Palette, {}), this._container);
-    this._eventBus.fire('palette.rendered');
+
+  /**
+   * Reset the managed section to its initial state.
+   */
+  reset() {
+    this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
   }
-  _destroy() {
-    if (this._container) {
-      render(null, this._container);
-      this._eventBus.fire('palette.destroyed');
+
+  /**
+   * Circumvents timing issues.
+   */
+  _onceSectionRendered(callback) {
+    if (this.isSectionRendered) {
+      callback();
+    } else {
+      this._eventBus.once(`${this._sectionKey}.section.rendered`, callback);
     }
   }
 }
-PaletteRenderer.$inject = ['config.palette', 'eventBus'];
+
+let PaletteModule$1 = class PaletteModule extends SectionModuleBase {
+  constructor(eventBus) {
+    super(eventBus, 'palette');
+  }
+};
+PaletteModule$1.$inject = ['eventBus'];
 
 var PaletteModule = {
-  palette: ['type', PaletteRenderer]
+  palette: ['type', PaletteModule$1]
 };
 
 var ArrowIcon = function ArrowIcon(props) {
@@ -4461,7 +4725,7 @@ function useEvent(event, callback, eventBus) {
       eventBus
     } = eventContext);
   }
-  const didMount = useRef(false);
+  const didMount = useRef$1(false);
 
   // (1) subscribe immediately
   if (eventBus && !didMount.current) {
@@ -4517,7 +4781,7 @@ function useLayoutState(path, defaultValue) {
  */
 
 function usePrevious(value) {
-  const ref = useRef();
+  const ref = useRef$1();
   useEffect(() => {
     ref.current = value;
   });
@@ -4535,8 +4799,8 @@ function useShowEntryEvent(id) {
   const {
     onShow
   } = useContext(LayoutContext);
-  const ref = useRef();
-  const focus = useRef(false);
+  const ref = useRef$1();
+  const focus = useRef$1(false);
   const onShowEntry = useCallback(event => {
     if (event.id === id) {
       onShow();
@@ -4642,7 +4906,7 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
  * @returns {Function} static function reference
  */
 function useStaticCallback(callback) {
-  const callbackRef = useRef(callback);
+  const callbackRef = useRef$1(callback);
   callbackRef.current = callback;
   return useCallback((...args) => callbackRef.current(...args), []);
 }
@@ -4654,7 +4918,7 @@ function Group(props) {
     label,
     shouldOpen = false
   } = props;
-  const groupRef = useRef(null);
+  const groupRef = useRef$1(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
   const toggleOpen = () => setOpen(!open);
@@ -4971,7 +5235,7 @@ function createDescriptionContext(overrides = {}) {
  * @param {Array} deps
  */
 function useUpdateLayoutEffect(effect, deps) {
-  const isMounted = useRef(false);
+  const isMounted = useRef$1(false);
   useLayoutEffect(() => {
     if (isMounted.current) {
       return effect();
@@ -5090,7 +5354,7 @@ function ListGroup(props) {
     shouldOpen = true,
     shouldSort = true
   } = props;
-  const groupRef = useRef(null);
+  const groupRef = useRef$1(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
   const [sticky, setSticky] = useState(false);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
@@ -5419,7 +5683,7 @@ const CodeEditor$1 = forwardRef((props, ref) => {
     hostLanguage = null,
     singleLine = false
   } = props;
-  const inputRef = useRef();
+  const inputRef = useRef$1();
   const [editor, setEditor] = useState();
   const [localValue, setLocalValue] = useState(value || '');
   useBufferedFocus$1(editor, ref);
@@ -5498,7 +5762,7 @@ const CodeEditor = forwardRef((props, ref) => {
     tooltipContainer,
     variables
   } = props;
-  const inputRef = useRef();
+  const inputRef = useRef$1();
   const [editor, setEditor] = useState();
   const [localValue, setLocalValue] = useState(value || '');
   useBufferedFocus(editor, ref);
@@ -5727,85 +5991,244 @@ function isEdited$7(node) {
 function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
-const noop$1 = () => {};
-function FeelTextfield(props) {
+function NumberField(props) {
   const {
     debounce,
+    disabled,
+    displayLabel = true,
     id,
+    inputRef,
     label,
+    max,
+    min,
     onInput,
-    onError,
-    feel,
+    step,
     value = '',
-    disabled = false,
-    variables,
-    tooltipContainer,
-    OptionalComponent = OptionalFeelInput
+    onFocus,
+    onBlur
   } = props;
-  const [localValue, _setLocalValue] = useState(value);
-  const editorRef = useShowEntryEvent(id);
-  const containerRef = useRef();
-  const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
-  const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
-  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 [localValue, setLocalValue] = useState(value);
   const handleInputCallback = useMemo(() => {
-    return debounce(newValue => {
-      onInput(newValue);
+    return debounce(event => {
+      const {
+        validity,
+        value
+      } = event.target;
+      if (validity.valid) {
+        onInput(value ? parseFloat(value) : undefined);
+      }
     });
   }, [onInput, debounce]);
-  const setLocalValue = newValue => {
-    _setLocalValue(newValue);
-    if (!newValue || newValue === '=') {
-      handleInputCallback(undefined);
-    } else {
-      handleInputCallback(newValue);
-    }
-  };
-  const handleFeelToggle = useStaticCallback(() => {
-    if (feel === 'required') {
-      return;
-    }
-    if (!feelActive) {
-      setLocalValue('=' + localValue);
-    } else {
-      setLocalValue(feelOnlyValue);
-    }
-  });
-  const handleLocalInput = newValue => {
-    if (feelActive) {
-      newValue = '=' + newValue;
-    }
-    if (newValue === localValue) {
-      return;
-    }
-    setLocalValue(newValue);
-    if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
-      // focus is behind `=` sign that will be removed
-      setFocus(-1);
-    }
+  const handleInput = e => {
+    handleInputCallback(e);
+    setLocalValue(e.target.value);
   };
-  const handleLint = useStaticCallback(lint => {
-    if (!(lint && lint.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]);
+  return jsxs("div", {
+    class: "bio-properties-panel-numberfield",
+    children: [displayLabel && jsx("label", {
+      for: prefixId$5(id),
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsx("input", {
+      id: prefixId$5(id),
+      ref: inputRef,
+      type: "number",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      max: max,
+      min: min,
+      onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      step: step,
+      value: localValue
+    })]
+  });
+}
+
+/**
+ * @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 {
+    debounce,
+    description,
+    disabled,
+    element,
+    getValue,
+    id,
+    label,
+    max,
+    min,
+    setValue,
+    step,
+    onFocus,
+    onBlur,
+    validate
+  } = props;
+  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+    setLocalError(newValidationError);
+  };
+  if (previousValue === value && localError) {
+    value = cachedInvalidValue;
+  }
+  const error = globalError || localError;
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsx(NumberField, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onInput: onInput,
+      max: max,
+      min: min,
+      step: step,
+      value: value
+    }, element), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$6(node) {
+  return node && !!node.value;
+}
+
+// helpers /////////////////
+
+function prefixId$5(id) {
+  return `bio-properties-panel-${id}`;
+}
+const noop$1 = () => {};
+function FeelTextfield(props) {
+  const {
+    debounce,
+    id,
+    label,
+    onInput,
+    onError,
+    feel,
+    value = '',
+    disabled = false,
+    variables,
+    tooltipContainer,
+    OptionalComponent = OptionalFeelInput
+  } = props;
+  const [localValue, _setLocalValue] = useState(value);
+  const editorRef = useShowEntryEvent(id);
+  const containerRef = useRef$1();
+  const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
+  const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
+  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);
+    });
+  }, [onInput, debounce]);
+  const setLocalValue = newValue => {
+    _setLocalValue(newValue);
+    if (!newValue || newValue === '=') {
+      handleInputCallback(undefined);
+    } else {
+      handleInputCallback(newValue);
+    }
+  };
+  const handleFeelToggle = useStaticCallback(() => {
+    if (feel === 'required') {
+      return;
+    }
+    if (!feelActive) {
+      setLocalValue('=' + localValue);
+    } else {
+      setLocalValue(feelOnlyValue);
+    }
+  });
+  const handleLocalInput = newValue => {
+    if (feelActive) {
+      newValue = '=' + newValue;
+    }
+    if (newValue === localValue) {
+      return;
+    }
+    setLocalValue(newValue);
+    if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
+      // focus is behind `=` sign that will be removed
+      setFocus(-1);
+    }
+  };
+  const handleLint = useStaticCallback(lint => {
+    if (!(lint && lint.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;
@@ -5853,7 +6276,7 @@ function FeelTextfield(props) {
       'feel-active': feelActive
     }),
     children: [jsxs("label", {
-      for: prefixId$5(id),
+      for: prefixId$4(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
       children: [label, jsx(FeelIcon, {
@@ -5870,7 +6293,7 @@ function FeelTextfield(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsx(CodeEditor, {
-        id: prefixId$5(id),
+        id: prefixId$4(id),
         name: id,
         onInput: handleLocalInput,
         disabled: disabled,
@@ -5887,7 +6310,7 @@ function FeelTextfield(props) {
         ...props,
         onInput: handleLocalInput,
         contentAttributes: {
-          'id': prefixId$5(id),
+          'id': prefixId$4(id),
           'aria-label': label
         },
         value: localValue,
@@ -5905,7 +6328,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = useRef();
+  const inputRef = useRef$1();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -5925,7 +6348,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     }
   };
   return jsx("input", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -5939,6 +6362,53 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     value: value || ''
   });
 });
+const OptionalFeelNumberField = forwardRef((props, ref) => {
+  const {
+    id,
+    debounce,
+    disabled,
+    onInput,
+    value,
+    min,
+    max,
+    step,
+    onFocus,
+    onBlur
+  } = props;
+  const inputRef = useRef$1();
+
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
+  ref.current = {
+    focus: position => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+      if (typeof position === 'number' && position !== Infinity) {
+        if (position > value.length) {
+          position = value.length;
+        }
+        input.setSelectionRange(position, position);
+      }
+    }
+  };
+  return jsx(NumberField, {
+    id: id,
+    debounce: debounce,
+    disabled: disabled,
+    displayLabel: false,
+    inputRef: inputRef,
+    max: max,
+    min: min,
+    onInput: onInput,
+    step: step,
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur
+  });
+});
 forwardRef((props, ref) => {
   const {
     id,
@@ -5948,7 +6418,7 @@ forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = useRef();
+  const inputRef = useRef$1();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -5963,7 +6433,7 @@ forwardRef((props, ref) => {
     }
   };
   return jsx("textarea", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -5987,7 +6457,7 @@ const OptionalFeelToggleSwitch = forwardRef((props, ref) => {
     onBlur,
     switcherLabel
   } = props;
-  const inputRef = useRef();
+  const inputRef = useRef$1();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -6019,7 +6489,7 @@ forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = useRef();
+  const inputRef = useRef$1();
   const handleChange = ({
     target
   }) => {
@@ -6039,7 +6509,7 @@ forwardRef((props, ref) => {
   };
   return jsx("input", {
     ref: inputRef,
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     name: id,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -6079,261 +6549,30 @@ function FeelEntry(props) {
     disabled,
     feel,
     label,
-    getValue,
-    setValue,
-    tooltipContainer,
-    hostLanguage,
-    singleLine,
-    validate,
-    show = noop$1,
-    example,
-    variables,
-    onFocus,
-    onBlur
-  } = 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(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
-    "data-entry-id": id,
-    children: [jsx(FeelTextfield, {
-      debounce: debounce,
-      disabled: disabled,
-      feel: feel,
-      id: id,
-      label: label,
-      onInput: onInput,
-      onError: onError,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      example: example,
-      hostLanguage: hostLanguage,
-      singleLine: singleLine,
-      show: show,
-      value: value,
-      variables: variables,
-      tooltipContainer: tooltipContainer,
-      OptionalComponent: props.OptionalComponent
-    }, element), error && jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
-    }), jsx(Description$1, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-
-/**
- * @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 jsx(FeelEntry, {
-    class: "bio-properties-panel-feel-toggle-switch",
-    OptionalComponent: OptionalFeelToggleSwitch,
-    ...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
- */
-function FeelTemplatingEntry(props) {
-  return jsx(FeelEntry, {
-    class: "bio-properties-panel-feel-templating",
-    OptionalComponent: CodeEditor$1,
-    ...props
-  });
-}
-function isEdited$6(node) {
-  if (!node) {
-    return false;
-  }
-  if (node.type === 'checkbox') {
-    return !!node.checked || node.classList.contains('edited');
-  }
-  return !!node.value || node.classList.contains('edited');
-}
-
-// helpers /////////////////
-
-function prefixId$5(id) {
-  return `bio-properties-panel-${id}`;
-}
-function NumberField(props) {
-  const {
-    debounce,
-    disabled,
-    id,
-    label,
-    max,
-    min,
-    onInput,
-    step,
-    value = '',
-    onFocus,
-    onBlur
-  } = props;
-  const [localValue, setLocalValue] = useState(value);
-  const handleInputCallback = useMemo(() => {
-    return debounce(event => {
-      const {
-        validity,
-        value
-      } = event.target;
-      if (validity.valid) {
-        onInput(value ? parseFloat(value) : undefined);
-      }
-    });
-  }, [onInput, debounce]);
-  const handleInput = e => {
-    handleInputCallback(e);
-    setLocalValue(e.target.value);
-  };
-  useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  return jsxs("div", {
-    class: "bio-properties-panel-numberfield",
-    children: [jsx("label", {
-      for: prefixId$4(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), jsx("input", {
-      id: prefixId$4(id),
-      type: "number",
-      name: id,
-      spellCheck: "false",
-      autoComplete: "off",
-      disabled: disabled,
-      class: "bio-properties-panel-input",
-      max: max,
-      min: min,
-      onInput: handleInput,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      step: step,
-      value: localValue
-    })]
-  });
-}
-
-/**
- * @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 {
-    debounce,
-    description,
-    disabled,
-    element,
-    getValue,
-    id,
-    label,
-    max,
-    min,
+    getValue,
     setValue,
-    step,
+    tooltipContainer,
+    hostLanguage,
+    singleLine,
+    validate,
+    show = noop$1,
+    example,
+    variables,
     onFocus,
-    onBlur,
-    validate
+    onBlur
   } = props;
   const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
-  const globalError = useError(id);
+  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;
-      setLocalError(newValidationError);
+      setValidationError(newValidationError);
     }
   }, [value]);
-  const onInput = newValue => {
+  const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
@@ -6341,30 +6580,45 @@ function NumberFieldEntry(props) {
     if (newValidationError) {
       setCachedInvalidValue(newValue);
     } else {
-      setValue(newValue);
+      // don't create multiple commandStack entries for the same value
+      if (newValue !== value) {
+        setValue(newValue);
+      }
     }
-    setLocalError(newValidationError);
-  };
-  if (previousValue === value && localError) {
+    setValidationError(newValidationError);
+  });
+  const onError = useCallback(err => {
+    setLocalError(err);
+  }, []);
+  if (previousValue === value && validationError) {
     value = cachedInvalidValue;
   }
-  const error = globalError || localError;
+  const temporaryError = useError(id);
+  const error = localError || temporaryError || validationError;
   return jsxs("div", {
-    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsx(NumberField, {
+    children: [createElement(FeelTextfield, {
+      ...props,
       debounce: debounce,
       disabled: disabled,
+      feel: feel,
       id: id,
+      key: element,
       label: label,
+      onInput: onInput,
+      onError: onError,
       onFocus: onFocus,
       onBlur: onBlur,
-      onInput: onInput,
-      max: max,
-      min: min,
-      step: step,
-      value: value
-    }, element), error && jsx("div", {
+      example: example,
+      hostLanguage: hostLanguage,
+      singleLine: singleLine,
+      show: show,
+      value: value,
+      variables: variables,
+      tooltipContainer: tooltipContainer,
+      OptionalComponent: props.OptionalComponent
+    }), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsx(Description$1, {
@@ -6374,8 +6628,100 @@ function NumberFieldEntry(props) {
     })]
   });
 }
-function isEdited$4(node) {
-  return node && !!node.value;
+
+/**
+ * @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 jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-number",
+    OptionalComponent: OptionalFeelNumberField,
+    ...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
+ */
+function FeelToggleSwitchEntry(props) {
+  return jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-toggle-switch",
+    OptionalComponent: OptionalFeelToggleSwitch,
+    ...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
+ */
+function FeelTemplatingEntry(props) {
+  return jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-templating",
+    OptionalComponent: CodeEditor$1,
+    ...props
+  });
+}
+function isEdited$5(node) {
+  if (!node) {
+    return false;
+  }
+  if (node.type === 'checkbox') {
+    return !!node.checked || node.classList.contains('edited');
+  }
+  return !!node.value || node.classList.contains('edited');
 }
 
 // helpers /////////////////
@@ -7024,7 +7370,7 @@ function AltTextEntry(props) {
       component: AltText,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7046,7 +7392,7 @@ function AltText(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     feel: 'optional',
@@ -7054,6 +7400,7 @@ function AltText(props) {
     id,
     label: 'Alternative text',
     setValue,
+    singleLine: true,
     variables
   });
 }
@@ -7142,7 +7489,7 @@ function DescriptionEntry(props) {
       component: Description,
       editField: editField,
       field: field,
-      isEdited: isEdited
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7154,6 +7501,9 @@ function Description(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
   const path = ['description'];
   const getValue = () => {
     return get(field, path, '');
@@ -7161,13 +7511,15 @@ function Description(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return TextfieldEntry({
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     getValue,
     id,
     label: 'Field description',
-    setValue
+    singleLine: true,
+    setValue,
+    variables
   });
 }
 
@@ -7586,127 +7938,129 @@ function Key$1(props) {
   });
 }
 
-function simpleStringEntryFactory(options) {
-  const {
-    id,
-    label,
-    path,
-    props
-  } = options;
+function LabelEntry(props) {
   const {
-    editField,
-    field
-  } = props;
-  return {
-    id,
-    label,
-    path,
     field,
-    editField,
-    component: SimpleStringComponent,
-    isEdited: isEdited
-  };
+    editField
+  } = props;
+  const {
+    type,
+    subtype
+  } = field;
+  const entries = [];
+  if (type === 'datetime') {
+    if (subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME) {
+      entries.push({
+        id: 'date-label',
+        component: DateLabel,
+        editField,
+        field,
+        isEdited: isEdited$5
+      });
+    }
+    if (subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
+      entries.push({
+        id: 'time-label',
+        component: TimeLabel,
+        editField,
+        field,
+        isEdited: isEdited$5
+      });
+    }
+  } else if (INPUTS.includes(type) || type === 'button') {
+    entries.push({
+      id: 'label',
+      component: Label$1,
+      editField,
+      field,
+      isEdited: isEdited$5
+    });
+  }
+  return entries;
 }
-const SimpleStringComponent = props => {
+function Label$1(props) {
   const {
-    id,
-    label,
-    path,
+    editField,
     field,
-    editField
+    id
   } = props;
   const debounce = useService('debounce');
-  const getValue = () => get(field, path, '');
-  const setValue = value => editField(field, path, value);
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['label'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     getValue,
     id,
-    label,
-    setValue
+    label: 'Field label',
+    singleLine: true,
+    setValue,
+    variables
   });
-};
-
-function simpleBoolEntryFactory(options) {
-  const {
-    id,
-    label,
-    description,
-    path,
-    props
-  } = options;
+}
+function DateLabel(props) {
   const {
     editField,
-    field
-  } = props;
-  return {
-    id,
-    label,
-    path,
     field,
-    editField,
-    description,
-    component: SimpleBoolComponent,
-    isEdited: isEdited$8
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = DATE_LABEL_PATH;
+  const getValue = () => {
+    return get(field, path, '');
   };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Date label',
+    singleLine: true,
+    setValue,
+    variables
+  });
 }
-const SimpleBoolComponent = props => {
+function TimeLabel(props) {
   const {
-    id,
-    label,
-    path,
-    field,
     editField,
-    description
+    field,
+    id
   } = props;
-  const getValue = () => get(field, path, '');
-  const setValue = value => editField(field, path, value);
-  return CheckboxEntry({
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = TIME_LABEL_PATH;
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return FeelTemplatingEntry({
+    debounce,
     element: field,
     getValue,
     id,
-    label,
+    label: 'Time label',
+    singleLine: true,
     setValue,
-    description
+    variables
   });
-};
-
-function LabelEntry(props) {
-  const {
-    field
-  } = props;
-  const {
-    type,
-    subtype
-  } = field;
-  const entries = [];
-  if (type === 'datetime') {
-    if (subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME) {
-      entries.push(simpleStringEntryFactory({
-        id: 'date-label',
-        path: DATE_LABEL_PATH,
-        label: 'Date label',
-        props
-      }));
-    }
-    if (subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
-      entries.push(simpleStringEntryFactory({
-        id: 'time-label',
-        path: TIME_LABEL_PATH,
-        label: 'Time label',
-        props
-      }));
-    }
-  } else if (INPUTS.includes(type) || type === 'button') {
-    entries.push(simpleStringEntryFactory({
-      id: 'label',
-      path: ['label'],
-      label: 'Field label',
-      props
-    }));
-  }
-  return entries;
 }
 
 function SourceEntry(props) {
@@ -7724,7 +8078,7 @@ function SourceEntry(props) {
       component: Source,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7746,7 +8100,7 @@ function Source(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     description: 'Expression or static value (link/data URI)',
     element: field,
@@ -7755,6 +8109,7 @@ function Source(props) {
     id,
     label: 'Image source',
     setValue,
+    singleLine: true,
     variables
   });
 }
@@ -7779,7 +8134,7 @@ function TextEntry(props) {
     component: Text,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$5
   }];
 
   // todo: skipped to make the release without too much risk
@@ -7812,7 +8167,7 @@ function Text(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  const description = useMemo(() => jsxs(Fragment, {
+  const description = useMemo(() => jsxs(Fragment$1, {
     children: ["Supports markdown and templating. ", jsx("a", {
       href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
       target: "_blank",
@@ -7848,7 +8203,7 @@ function NumberEntries(props) {
   entries.push({
     id: id + '-decimalDigits',
     component: NumberDecimalDigits,
-    isEdited: isEdited$4,
+    isEdited: isEdited$6,
     editField,
     field
   });
@@ -8215,6 +8570,50 @@ function TimeFormatSelect(props) {
   });
 }
 
+function simpleBoolEntryFactory(options) {
+  const {
+    id,
+    label,
+    description,
+    path,
+    props
+  } = options;
+  const {
+    editField,
+    field
+  } = props;
+  return {
+    id,
+    label,
+    path,
+    field,
+    editField,
+    description,
+    component: SimpleBoolComponent,
+    isEdited: isEdited$8
+  };
+}
+const SimpleBoolComponent = props => {
+  const {
+    id,
+    label,
+    path,
+    field,
+    editField,
+    description
+  } = props;
+  const getValue = () => get(field, path, '');
+  const setValue = value => editField(field, path, value);
+  return CheckboxEntry({
+    element: field,
+    getValue,
+    id,
+    label,
+    setValue,
+    description
+  });
+};
+
 function SelectEntries(props) {
   const {
     field
@@ -8435,6 +8834,34 @@ function updateKey(properties, oldKey, newKey) {
   }, {});
 }
 
+function AutoFocusSelectEntry(props) {
+  const {
+    autoFocusEntry,
+    element,
+    getValue
+  } = props;
+  const value = getValue(element);
+  const prevValue = usePrevious(value);
+  const eventBus = useService('eventBus');
+
+  // auto focus specifc other entry when selected value changed
+  useEffect(() => {
+    if (autoFocusEntry && prevValue && value !== prevValue) {
+      // @Note(pinussilvestrus): There is an issue in the properties
+      // panel so we have to wait a bit before showing the entry.
+      // Cf. https://github.com/camunda/linting/blob/4f5328e2722f73ae60ae584c5f576eaec3999cb2/lib/modeler/Linting.js#L37
+      setTimeout(() => {
+        eventBus.fire('propertiesPanel.showEntry', {
+          id: autoFocusEntry
+        });
+      });
+    }
+  }, [value, autoFocusEntry, prevValue, eventBus]);
+  return jsx(SelectEntry, {
+    ...props
+  });
+}
+
 function ValuesSourceSelectEntry(props) {
   const {
     editField,
@@ -8473,7 +8900,8 @@ function ValuesSourceSelect(props) {
       value: valueSource
     }));
   };
-  return SelectEntry({
+  return AutoFocusSelectEntry({
+    autoFocusEntry: getAutoFocusEntryId(field),
     label: 'Type',
     element: field,
     getOptions: getValuesSourceOptions,
@@ -8483,6 +8911,20 @@ function ValuesSourceSelect(props) {
   });
 }
 
+// helpers //////////
+
+function getAutoFocusEntryId(field) {
+  const valuesSource = getValuesSource(field);
+  if (valuesSource === VALUES_SOURCES.EXPRESSION) {
+    return `${field.id}-valuesExpression-expression`;
+  } else if (valuesSource === VALUES_SOURCES.INPUT) {
+    return `${field.id}-dynamicValues-key`;
+  } else if (valuesSource === VALUES_SOURCES.STATIC) {
+    return `${field.id}-staticValues-0-label`;
+  }
+  return null;
+}
+
 function InputKeyValuesSourceEntry(props) {
   const {
     editField,
@@ -8639,7 +9081,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'prefix-adorner',
       component: PrefixAdorner,
-      isEdited: isEdited,
+      isEdited: isEdited$5,
       editField,
       field,
       onChange,
@@ -8648,7 +9090,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'suffix-adorner',
       component: SuffixAdorner,
-      isEdited: isEdited,
+      isEdited: isEdited$5,
       editField,
       field,
       onChange,
@@ -8665,13 +9107,19 @@ function PrefixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelTemplatingEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('prefixAdorner'),
     id,
     label: 'Prefix',
-    setValue: onChange('prefixAdorner')
+    setValue: onChange('prefixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 function SuffixAdorner(props) {
@@ -8682,13 +9130,18 @@ function SuffixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     getValue: getValue('suffixAdorner'),
     id,
     label: 'Suffix',
-    setValue: onChange('suffixAdorner')
+    setValue: onChange('suffixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 
@@ -8707,7 +9160,7 @@ function ReadonlyEntry(props) {
       component: Readonly,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -8751,7 +9204,7 @@ function ConditionEntry(props) {
     component: Condition,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$5
   }];
 }
 function Condition(props) {
@@ -8789,6 +9242,55 @@ function Condition(props) {
   });
 }
 
+function ValuesExpressionEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  return [{
+    id: id + '-expression',
+    component: ValuesExpression,
+    label: 'Values expression',
+    isEdited: isEdited$5,
+    editField,
+    field
+  }];
+}
+function ValuesExpression(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.EXPRESSION];
+  const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
+  const description = jsxs("div", {
+    children: ["Define an expression to populate the options from.", jsx("br", {}), jsx("br", {}), "The expression may result in an array of simple values or alternatively follow this schema:", jsx("pre", {
+      children: jsx("code", {
+        children: schema
+      })
+    })]
+  });
+  const getValue = () => get(field, path, '');
+  const setValue = value => editField(field, path, value || '');
+  return FeelEntry({
+    debounce,
+    description,
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Options expression',
+    setValue,
+    variables
+  });
+}
+
 function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
     field,
@@ -8933,14 +9435,14 @@ function ValidationGroup(field, editField) {
       component: MinLength,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     }, {
       id: 'maxLength',
       component: MaxLength,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     });
   }
@@ -8960,14 +9462,14 @@ function ValidationGroup(field, editField) {
       component: Min,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     }, {
       id: 'max',
       component: Max,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     });
   }
@@ -9000,14 +9502,19 @@ function MinLength(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('minLength'),
     id,
     label: 'Minimum length',
     min: 0,
-    setValue: onChange('minLength')
+    setValue: onChange('minLength'),
+    variables
   });
 }
 function MaxLength(props) {
@@ -9018,14 +9525,19 @@ function MaxLength(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('maxLength'),
     id,
     label: 'Maximum length',
     min: 0,
-    setValue: onChange('maxLength')
+    setValue: onChange('maxLength'),
+    variables
   });
 }
 function Pattern(props) {
@@ -9053,14 +9565,19 @@ function Min(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Minimum',
     step: 'any',
     getValue: getValue('min'),
-    setValue: onChange('min')
+    setValue: onChange('min'),
+    variables
   });
 }
 function Max(props) {
@@ -9071,14 +9588,19 @@ function Max(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Maximum',
     step: 'any',
     getValue: getValue('max'),
-    setValue: onChange('max')
+    setValue: onChange('max'),
+    variables
   });
 }
 function ValidationType(props) {
@@ -9152,6 +9674,17 @@ function ValuesGroups(field, editField) {
         id: staticValuesId
       })
     });
+  } else if (valuesSource === VALUES_SOURCES.EXPRESSION) {
+    const valuesExpressionId = `${fieldId}-valuesExpression`;
+    groups.push({
+      id: valuesExpressionId,
+      label: 'Options expression',
+      component: Group,
+      entries: ValuesExpressionEntry({
+        ...context,
+        id: valuesExpressionId
+      })
+    });
   }
   return groups;
 }
@@ -9311,47 +9844,37 @@ function FormPropertiesPanel(props) {
   } = props;
   const formEditor = injector.get('formEditor');
   const modeling = injector.get('modeling');
-  const selection = injector.get('selection');
-  const {
-    schema
-  } = formEditor._getState();
+  const selectionModule = injector.get('selection');
   const [state, setState] = useState({
-    selectedFormField: selection.get() || schema
+    selectedFormField: selectionModule.get() || formEditor._getState().schema
   });
-  const _update = field => {
+  const selectedFormField = state.selectedFormField;
+  const refresh = useCallback(field => {
+    // TODO(skaiir): rework state management, re-rendering the whole properties panel is not the way to go
+    // https://github.com/bpmn-io/form-js/issues/686
     setState({
-      ...state,
-      selectedFormField: field
+      selectedFormField: selectionModule.get() || formEditor._getState().schema
     });
 
     // notify interested parties on property panel updates
     eventBus.fire('propertiesPanel.updated', {
       formField: field
     });
-  };
-  useLayoutEffect(() => {
-    function onSelectionChange(event) {
-      _update(event.selection || schema);
-    }
-    eventBus.on('selection.changed', onSelectionChange);
-    return () => {
-      eventBus.off('selection.changed', onSelectionChange);
-    };
-  }, []);
+  }, [eventBus, formEditor, selectionModule]);
   useLayoutEffect(() => {
-    const onFieldChanged = () => {
-      /**
-       * TODO(pinussilvestrus): update with actual updated element,
-       * once we have a proper updater/change support
-       */
-      _update(selection.get() || schema);
-    };
-    eventBus.on('changed', onFieldChanged);
+    /**
+     * TODO(pinussilvestrus): update with actual updated element,
+     * once we have a proper updater/change support
+     */
+    eventBus.on('changed', refresh);
+    eventBus.on('import.done', refresh);
+    eventBus.on('selection.changed', refresh);
     return () => {
-      eventBus.off('changed', onFieldChanged);
+      eventBus.off('changed', refresh);
+      eventBus.off('import.done', refresh);
+      eventBus.off('selection.changed', refresh);
     };
-  }, []);
-  const selectedFormField = state.selectedFormField;
+  }, [eventBus, refresh]);
   const getService = (type, strict = true) => injector.get(type, strict);
   const propertiesPanelContext = {
     getService
@@ -9447,10 +9970,70 @@ var PropertiesPanelModule = {
   propertiesPanel: ['type', PropertiesPanelRenderer]
 };
 
+/**
+ * Manages the rendering of visual plugins.
+ * @constructor
+ * @param {Object} eventBus - Event bus for the application.
+ */
+class RenderInjector extends SectionModuleBase {
+  constructor(eventBus) {
+    super(eventBus, 'renderInjector');
+    this._eventBus = eventBus;
+    this.registeredRenderers = [];
+  }
+
+  /**
+   * Inject a new renderer into the injector.
+   * @param {string} identifier - Identifier for the renderer.
+   * @param {Function} Renderer - The renderer function.
+   */
+  attachRenderer(identifier, Renderer) {
+    this.registeredRenderers = [...this.registeredRenderers, {
+      identifier,
+      Renderer
+    }];
+  }
+
+  /**
+   * Detach a renderer from the by key injector.
+   * @param {string} identifier - Identifier for the renderer.
+   */
+  detachRenderer(identifier) {
+    this.registeredRenderers = this.registeredRenderers.filter(r => r.identifier !== identifier);
+  }
+
+  /**
+   * Returns the registered renderers.
+   * @returns {Array} Array of registered renderers.
+   */
+  fetchRenderers() {
+    return this.registeredRenderers;
+  }
+}
+RenderInjector.$inject = ['eventBus'];
+
+var RenderInjectionModule = {
+  __init__: ['renderInjector'],
+  renderInjector: ['type', RenderInjector]
+};
+
+class EditorTemplating {
+  // same rules as viewer templating
+  isTemplate(value) {
+    return isString(value) && (value.startsWith('=') || /{{/.test(value));
+  }
+
+  // return the template raw, as we usually just want to display that
+  evaluate(template) {
+    return template;
+  }
+}
+EditorTemplating.$inject = [];
+
 var ExpressionLanguageModule = {
   __init__: ['expressionLanguage', 'templating'],
   expressionLanguage: ['type', FeelExpressionLanguage],
-  templating: ['type', FeelersTemplating]
+  templating: ['type', EditorTemplating]
 };
 
 const ids = new Ids([32, 36, 1]);
@@ -9705,7 +10288,7 @@ class FormEditor {
    * @internal
    */
   _getModules() {
-    return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule];
+    return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
   }
 
   /**