@bpmn-io/properties-panel 3.2.1 → 3.3.0

package/dist/index.js

@@ -11,11 +11,32 @@ var classnames = require('classnames');
 var minDom = require('min-dom');
 var feelers = require('feelers');
 var FeelEditor = require('@bpmn-io/feel-editor');
+var view = require('@codemirror/view');
+var focusTrap = require('focus-trap');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var FeelEditor__default = /*#__PURE__*/_interopDefaultLegacy(FeelEditor);
+var focusTrap__namespace = /*#__PURE__*/_interopNamespace(focusTrap);
 
 var ArrowIcon = function ArrowIcon(props) {
   return jsxRuntime.jsx("svg", {
@@ -59,6 +80,33 @@ DeleteIcon.defaultProps = {
   width: "16",
   height: "16"
 };
+var DragIcon = function DragIcon(props) {
+  return jsxRuntime.jsxs("svg", {
+    ...props,
+    children: [jsxRuntime.jsx("path", {
+      fill: "#fff",
+      style: {
+        mixBlendMode: "multiply"
+      },
+      d: "M0 0h16v16H0z"
+    }), jsxRuntime.jsx("path", {
+      fill: "#fff",
+      style: {
+        mixBlendMode: "multiply"
+      },
+      d: "M0 0h16v16H0z"
+    }), jsxRuntime.jsx("path", {
+      d: "M7 3H5v2h2V3zm4 0H9v2h2V3zM7 7H5v2h2V7zm4 0H9v2h2V7zm-4 4H5v2h2v-2zm4 0H9v2h2v-2z",
+      fill: "#161616"
+    })]
+  });
+};
+DragIcon.defaultProps = {
+  width: "16",
+  height: "16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
 var ExternalLinkIcon = function ExternalLinkIcon(props) {
   return jsxRuntime.jsx("svg", {
     ...props,
@@ -66,7 +114,7 @@ var ExternalLinkIcon = function ExternalLinkIcon(props) {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M12.637 12.637v-4.72h1.362v4.721c0 .36-.137.676-.411.95-.275.275-.591.412-.95.412H3.362c-.38 0-.703-.132-.967-.396A1.315 1.315 0 0 1 2 12.638V3.362c0-.38.132-.703.396-.967S2.982 2 3.363 2h4.553v1.363H3.363v9.274h9.274ZM14 2H9.28l-.001 1.362h2.408L5.065 9.984l.95.95 6.622-6.622v2.409H14V2Z",
-      fill: "#818798"
+      fill: "currentcolor"
     })
   });
 };
@@ -215,7 +263,7 @@ function TooltipWrapper(props) {
   return jsxRuntime.jsx(Tooltip, {
     ...props,
     value: value,
-    forId: prefixId$8(forId)
+    forId: prefixId$9(forId)
   });
 }
 function Tooltip(props) {
@@ -333,7 +381,7 @@ function getTooltipPosition(refElement) {
 function isHovered(element) {
   return element.matches(':hover');
 }
-function prefixId$8(id) {
+function prefixId$9(id) {
   return `bio-properties-panel-${id}`;
 }
 
@@ -743,713 +791,704 @@ function Placeholder(props) {
   });
 }
 
-const DEFAULT_LAYOUT = {};
-const DEFAULT_DESCRIPTION = {};
-const DEFAULT_TOOLTIP = {};
+function Description(props) {
+  const {
+    element,
+    forId,
+    value
+  } = props;
+  const contextDescription = useDescriptionContext(forId, element);
+  const description = value || contextDescription;
+  if (description) {
+    return jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-description",
+      children: 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
- *
- *  @typedef { {
- *    [id: String]: GetTooltipFunction
- * } } TooltipConfig
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetDescriptionFunction
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetTooltipFunction
- *
- * @typedef { {
- *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
- *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
- * } } PlaceholderProvider
- *
- */
+const noop$6 = () => {};
 
 /**
- * A basic properties panel component. Describes *how* content will be rendered, accepts
- * data from implementor to describe *what* will be rendered.
- *
- * @param {Object} props
- * @param {Object|Array} props.element
- * @param {import('./components/Header').HeaderProvider} props.headerProvider
- * @param {PlaceholderProvider} [props.placeholderProvider]
- * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
- * @param {Object} [props.layoutConfig]
- * @param {Function} [props.layoutChanged]
- * @param {DescriptionConfig} [props.descriptionConfig]
- * @param {Function} [props.descriptionLoaded]
- * @param {TooltipConfig} [props.tooltipConfig]
- * @param {Function} [props.tooltipLoaded]
- * @param {Object} [props.eventBus]
+ * Buffer `.focus()` calls while the editor is not initialized.
+ * Set Focus inside when the editor is ready.
  */
-function PropertiesPanel(props) {
+const useBufferedFocus$1 = function (editor, ref) {
+  const [buffer, setBuffer] = hooks.useState(undefined);
+  ref.current = hooks.useMemo(() => ({
+    focus: offset => {
+      if (editor) {
+        editor.focus(offset);
+      } else {
+        if (typeof offset === 'undefined') {
+          offset = Infinity;
+        }
+        setBuffer(offset);
+      }
+    }
+  }), [editor]);
+  hooks.useEffect(() => {
+    if (typeof buffer !== 'undefined' && editor) {
+      editor.focus(buffer);
+      setBuffer(false);
+    }
+  }, [editor, buffer]);
+};
+const CodeEditor$1 = compat.forwardRef((props, ref) => {
   const {
-    element,
-    headerProvider,
-    placeholderProvider,
-    groups,
-    layoutConfig,
-    layoutChanged,
-    descriptionConfig,
-    descriptionLoaded,
-    tooltipConfig,
-    tooltipLoaded,
-    eventBus
+    onInput,
+    disabled,
+    tooltipContainer,
+    enableGutters,
+    value,
+    onLint = noop$6,
+    onPopupOpen = noop$6,
+    popupOpen,
+    contentAttributes = {},
+    hostLanguage = null,
+    singleLine = false
   } = props;
-
-  // set-up layout context
-  const [layout, setLayout] = hooks.useState(createLayout(layoutConfig));
-
-  // react to external changes in the layout config
-  useUpdateLayoutEffect(() => {
-    const newLayout = createLayout(layoutConfig);
-    setLayout(newLayout);
-  }, [layoutConfig]);
+  const inputRef = hooks.useRef();
+  const [editor, setEditor] = hooks.useState();
+  const [localValue, setLocalValue] = hooks.useState(value || '');
+  useBufferedFocus$1(editor, ref);
+  const handleInput = useStaticCallback(newValue => {
+    onInput(newValue);
+    setLocalValue(newValue);
+  });
   hooks.useEffect(() => {
-    if (typeof layoutChanged === 'function') {
-      layoutChanged(layout);
+    let editor;
+    editor = new feelers.FeelersEditor({
+      container: inputRef.current,
+      onChange: handleInput,
+      value: localValue,
+      onLint,
+      contentAttributes,
+      tooltipContainer,
+      enableGutters,
+      hostLanguage,
+      singleLine
+    });
+    setEditor(editor);
+    return () => {
+      onLint([]);
+      inputRef.current.innerHTML = '';
+      setEditor(null);
+    };
+  }, []);
+  hooks.useEffect(() => {
+    if (!editor) {
+      return;
     }
-  }, [layout, layoutChanged]);
-  const getLayoutForKey = (key, defaultValue) => {
-    return minDash.get(layout, key, defaultValue);
-  };
-  const setLayoutForKey = (key, config) => {
-    const newLayout = minDash.assign({}, layout);
-    minDash.set(newLayout, key, config);
-    setLayout(newLayout);
-  };
-  const layoutContext = {
-    layout,
-    setLayout,
-    getLayoutForKey,
-    setLayoutForKey
+    if (value === localValue) {
+      return;
+    }
+    editor.setValue(value);
+    setLocalValue(value);
+  }, [value]);
+  const handleClick = () => {
+    ref.current.focus();
   };
+  return jsxRuntime.jsxs("div", {
+    class: classnames__default["default"]('bio-properties-panel-feelers-editor-container', popupOpen ? 'popupOpen' : null),
+    children: [jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-feelers-editor__open-popup-placeholder",
+      children: "Opened in editor"
+    }), jsxRuntime.jsx("div", {
+      name: props.name,
+      class: classnames__default["default"]('bio-properties-panel-feelers-editor bio-properties-panel-input', localValue ? 'edited' : null, disabled ? 'disabled' : null),
+      ref: inputRef,
+      onClick: handleClick
+    }), jsxRuntime.jsx("button", {
+      title: "Open pop-up editor",
+      class: "bio-properties-panel-open-feel-popup",
+      onClick: () => onPopupOpen('feelers'),
+      children: jsxRuntime.jsx(ExternalLinkIcon, {})
+    })]
+  });
+});
 
-  // set-up description context
-  const description = hooks.useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
+const noop$5 = () => {};
+
+/**
+ * Buffer `.focus()` calls while the editor is not initialized.
+ * Set Focus inside when the editor is ready.
+ */
+const useBufferedFocus = function (editor, ref) {
+  const [buffer, setBuffer] = hooks.useState(undefined);
+  ref.current = hooks.useMemo(() => ({
+    focus: offset => {
+      if (editor) {
+        editor.focus(offset);
+      } else {
+        if (typeof offset === 'undefined') {
+          offset = Infinity;
+        }
+        setBuffer(offset);
+      }
+    }
+  }), [editor]);
   hooks.useEffect(() => {
-    if (typeof descriptionLoaded === 'function') {
-      descriptionLoaded(description);
+    if (typeof buffer !== 'undefined' && editor) {
+      editor.focus(buffer);
+      setBuffer(false);
     }
-  }, [description, descriptionLoaded]);
-  const getDescriptionForId = (id, element) => {
-    return description[id] && description[id](element);
-  };
-  const descriptionContext = {
-    description,
-    getDescriptionForId
-  };
+  }, [editor, buffer]);
+};
+const CodeEditor = compat.forwardRef((props, ref) => {
+  const {
+    enableGutters,
+    value,
+    onInput,
+    onFeelToggle = noop$5,
+    onLint = noop$5,
+    onPopupOpen = noop$5,
+    popupOpen,
+    disabled,
+    tooltipContainer,
+    variables
+  } = props;
+  const inputRef = hooks.useRef();
+  const [editor, setEditor] = hooks.useState();
+  const [localValue, setLocalValue] = hooks.useState(value || '');
+  useBufferedFocus(editor, ref);
+  const handleInput = useStaticCallback(newValue => {
+    onInput(newValue);
+    setLocalValue(newValue);
+  });
+  hooks.useEffect(() => {
+    let editor;
 
-  // set-up tooltip context
-  const tooltip = hooks.useMemo(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
+    /* 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) {
+        return;
+      }
+      const selection = editor.getSelection();
+      const range = selection.ranges[selection.mainIndex];
+      if (range.from === 0 && range.to === 0) {
+        onFeelToggle();
+      }
+    };
+    editor = new FeelEditor__default["default"]({
+      container: inputRef.current,
+      onChange: handleInput,
+      onKeyDown: onKeyDown,
+      onLint: onLint,
+      tooltipContainer: tooltipContainer,
+      value: localValue,
+      variables: variables,
+      extensions: [...(enableGutters ? [view.lineNumbers()] : [])]
+    });
+    setEditor(editor);
+    return () => {
+      onLint([]);
+      inputRef.current.innerHTML = '';
+      setEditor(null);
+    };
+  }, []);
   hooks.useEffect(() => {
-    if (typeof tooltipLoaded === 'function') {
-      tooltipLoaded(tooltip);
+    if (!editor) {
+      return;
     }
-  }, [tooltip, tooltipLoaded]);
-  const getTooltipForId = (id, element) => {
-    return tooltip[id] && tooltip[id](element);
-  };
-  const tooltipContext = {
-    tooltip,
-    getTooltipForId
-  };
-  const [errors, setErrors] = hooks.useState({});
-  const onSetErrors = ({
-    errors
-  }) => setErrors(errors);
-  useEvent('propertiesPanel.setErrors', onSetErrors, eventBus);
-  const errorsContext = {
-    errors
-  };
-  const eventContext = {
-    eventBus
-  };
-  const propertiesPanelContext = {
-    element
+    if (value === localValue) {
+      return;
+    }
+    editor.setValue(value);
+    setLocalValue(value);
+  }, [value]);
+  hooks.useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setVariables(variables);
+  }, [variables]);
+  const handleClick = () => {
+    ref.current.focus();
   };
+  return jsxRuntime.jsxs("div", {
+    class: classnames__default["default"]('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null, popupOpen ? 'popupOpen' : null),
+    children: [jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-feel-editor__open-popup-placeholder",
+      children: "Opened in editor"
+    }), jsxRuntime.jsx("div", {
+      name: props.name,
+      class: classnames__default["default"]('bio-properties-panel-input', localValue ? 'edited' : null),
+      ref: inputRef,
+      onClick: handleClick
+    }), jsxRuntime.jsx("button", {
+      title: "Open pop-up editor",
+      class: "bio-properties-panel-open-feel-popup",
+      onClick: () => onPopupOpen(),
+      children: jsxRuntime.jsx(ExternalLinkIcon, {})
+    })]
+  });
+});
 
-  // empty state
-  if (placeholderProvider && !element) {
-    return jsxRuntime.jsx(Placeholder, {
-      ...placeholderProvider.getEmpty()
-    });
-  }
-
-  // multiple state
-  if (placeholderProvider && minDash.isArray(element)) {
-    return jsxRuntime.jsx(Placeholder, {
-      ...placeholderProvider.getMultiple()
-    });
+function FeelIndicator(props) {
+  const {
+    active
+  } = props;
+  if (!active) {
+    return null;
   }
-  return jsxRuntime.jsx(LayoutContext.Provider, {
-    value: propertiesPanelContext,
-    children: jsxRuntime.jsx(ErrorsContext.Provider, {
-      value: errorsContext,
-      children: jsxRuntime.jsx(DescriptionContext.Provider, {
-        value: descriptionContext,
-        children: jsxRuntime.jsx(TooltipContext.Provider, {
-          value: tooltipContext,
-          children: jsxRuntime.jsx(LayoutContext.Provider, {
-            value: layoutContext,
-            children: jsxRuntime.jsx(EventContext.Provider, {
-              value: eventContext,
-              children: jsxRuntime.jsxs("div", {
-                class: "bio-properties-panel",
-                children: [jsxRuntime.jsx(Header, {
-                  element: element,
-                  headerProvider: headerProvider
-                }), jsxRuntime.jsx("div", {
-                  class: "bio-properties-panel-scroll-container",
-                  children: groups.map(group => {
-                    const {
-                      component: Component = Group,
-                      id
-                    } = group;
-                    return preact.createElement(Component, {
-                      ...group,
-                      key: id,
-                      element: element
-                    });
-                  })
-                })]
-              })
-            })
-          })
-        })
-      })
-    })
+  return jsxRuntime.jsx("span", {
+    class: "bio-properties-panel-feel-indicator",
+    children: "="
   });
 }
 
-// helpers //////////////////
+const noop$4 = () => {};
 
-function createLayout(overrides = {}, defaults = DEFAULT_LAYOUT) {
-  return {
-    ...defaults,
-    ...overrides
-  };
-}
-function createDescriptionContext(overrides = {}) {
-  return {
-    ...DEFAULT_DESCRIPTION,
-    ...overrides
-  };
-}
-function createTooltipContext(overrides = {}) {
-  return {
-    ...DEFAULT_TOOLTIP,
-    ...overrides
+/**
+ * @param {Object} props
+ * @param {Object} props.label
+ * @param {String} props.feel
+ */
+function FeelIcon(props) {
+  const {
+    feel = false,
+    active,
+    disabled = false,
+    onClick = noop$4
+  } = props;
+  const feelRequiredLabel = 'FEEL expression is mandatory';
+  const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
+  const handleClick = e => {
+    onClick(e);
+
+    // when pointer event was created from keyboard, keep focus on button
+    if (!e.pointerType) {
+      e.stopPropagation();
+    }
   };
+  return jsxRuntime.jsx("button", {
+    class: classnames__default["default"]('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
+    onClick: handleClick,
+    disabled: feel === 'required' || disabled,
+    title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
+    children: jsxRuntime.jsx(FeelIcon$1, {})
+  });
 }
 
-// hooks //////////////////
+const FeelPopupContext = preact.createContext({
+  open: () => {},
+  close: () => {},
+  source: null
+});
 
 /**
- * This hook behaves like useLayoutEffect, but does not trigger on the first render.
+ * Add a dragger that calls back the passed function with
+ * { event, delta } on drag.
  *
- * @param {Function} effect
- * @param {Array} deps
+ * @example
+ *
+ * function dragMove(event, delta) {
+ *   // we are dragging (!!)
+ * }
+ *
+ * domElement.addEventListener('dragstart', dragger(dragMove));
+ *
+ * @param {Function} fn
+ * @param {Element} [dragPreview]
+ *
+ * @return {Function} drag start callback function
  */
-function useUpdateLayoutEffect(effect, deps) {
-  const isMounted = hooks.useRef(false);
-  hooks.useLayoutEffect(() => {
-    if (isMounted.current) {
-      return effect();
-    } else {
-      isMounted.current = true;
+function createDragger(fn, dragPreview) {
+  let self;
+  let startX, startY;
+
+  /** drag start */
+  function onDragStart(event) {
+    self = this;
+    startX = event.clientX;
+    startY = event.clientY;
+
+    // (1) prevent preview image
+    if (event.dataTransfer) {
+      event.dataTransfer.setDragImage(dragPreview || emptyCanvas(), 0, 0);
     }
-  }, deps);
+
+    // (2) setup drag listeners
+
+    // attach drag + cleanup event
+    document.addEventListener('dragover', onDrag);
+    document.addEventListener('dragend', onEnd);
+    document.addEventListener('drop', preventDefault);
+  }
+  function onDrag(event) {
+    const delta = {
+      x: event.clientX - startX,
+      y: event.clientY - startY
+    };
+
+    // call provided fn with event, delta
+    return fn.call(self, event, delta);
+  }
+  function onEnd() {
+    document.removeEventListener('dragover', onDrag);
+    document.removeEventListener('dragend', onEnd);
+    document.removeEventListener('drop', preventDefault);
+  }
+  return onDragStart;
+}
+function preventDefault(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function emptyCanvas() {
+  return minDom.domify('<canvas width="0" height="0" />');
 }
 
-function DropdownButton(props) {
+const noop$3 = () => {};
+
+/**
+ * A generic popup component.
+ *
+ * @param {Object} props
+ * @param {HTMLElement} [props.container]
+ * @param {string} [props.className]
+ * @param {{x: number, y: number}} [props.position]
+ * @param {number} [props.width]
+ * @param {number} [props.height]
+ * @param {Function} props.onClose
+ * @param {Function} [props.onPostActivate]
+ * @param {Function} [props.onPostDeactivate]
+ * @param {boolean} [props.returnFocus]
+ * @param {string} props.title
+ */
+function Popup(props) {
   const {
-    class: className,
-    children,
-    menuItems = []
+    container,
+    className,
+    position,
+    width,
+    height,
+    onClose,
+    onPostActivate = noop$3,
+    onPostDeactivate = noop$3,
+    returnFocus = true,
+    title
   } = props;
-  const dropdownRef = hooks.useRef(null);
-  const menuRef = hooks.useRef(null);
-  const [open, setOpen] = hooks.useState(false);
-  const close = () => setOpen(false);
-  function onDropdownToggle(event) {
-    if (menuRef.current && menuRef.current.contains(event.target)) {
-      return;
+  const focusTrapRef = hooks.useRef(null);
+  const popupRef = hooks.useRef(null);
+  const handleKeyPress = event => {
+    if (event.key === 'Escape') {
+      onClose();
     }
-    event.stopPropagation();
-    setOpen(open => !open);
+  };
+
+  // re-activate focus trap on focus
+  const handleFocus = () => {
+    if (focusTrapRef.current) {
+      focusTrapRef.current.activate();
+    }
+  };
+  let style = {};
+  if (position) {
+    style = {
+      ...style,
+      top: position.top + 'px',
+      left: position.left + 'px'
+    };
   }
-  function onActionClick(event, action) {
-    event.stopPropagation();
-    close();
-    action();
+  if (width) {
+    style.width = width + 'px';
   }
-  useGlobalClick([dropdownRef.current], () => close());
-  return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-dropdown-button', {
-      open
-    }, className),
-    onClick: onDropdownToggle,
-    ref: dropdownRef,
-    children: [children, jsxRuntime.jsx("div", {
-      class: "bio-properties-panel-dropdown-button__menu",
-      ref: menuRef,
-      children: menuItems.map((item, index) => jsxRuntime.jsx(MenuItem, {
-        onClick: onActionClick,
-        item: item
-      }, index))
-    })]
-  });
-}
-function MenuItem({
-  item,
-  onClick
-}) {
-  if (item.separator) {
-    return jsxRuntime.jsx("div", {
-      class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator"
-    });
-  }
-  if (item.action) {
-    return jsxRuntime.jsx("button", {
-      class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable",
-      onClick: event => onClick(event, item.action),
-      children: item.entry
-    });
+  if (height) {
+    style.height = height + 'px';
   }
-  return jsxRuntime.jsx("div", {
-    class: "bio-properties-panel-dropdown-button__menu-item",
-    children: item.entry
-  });
-}
-
-/**
- *
- * @param {Array<null | Element>} ignoredElements
- * @param {Function} callback
- */
-function useGlobalClick(ignoredElements, callback) {
   hooks.useEffect(() => {
-    /**
-     * @param {MouseEvent} event
-     */
-    function listener(event) {
-      if (ignoredElements.some(element => element && element.contains(event.target))) {
-        return;
-      }
-      callback();
+    if (popupRef.current) {
+      popupRef.current.addEventListener('keydown', handleKeyPress);
     }
-    document.addEventListener('click', listener, {
-      capture: true
-    });
-    return () => document.removeEventListener('click', listener, {
-      capture: true
-    });
-  }, [...ignoredElements, callback]);
+    return () => {
+      popupRef.current.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [popupRef]);
+  hooks.useEffect(() => {
+    if (popupRef.current) {
+      popupRef.current.addEventListener('focusin', handleFocus);
+    }
+    return () => {
+      popupRef.current.removeEventListener('focusin', handleFocus);
+    };
+  }, [popupRef]);
+  hooks.useEffect(() => {
+    if (popupRef.current) {
+      focusTrapRef.current = focusTrap__namespace.createFocusTrap(popupRef.current, {
+        clickOutsideDeactivates: true,
+        fallbackFocus: popupRef.current,
+        onPostActivate,
+        onPostDeactivate,
+        returnFocusOnDeactivate: returnFocus
+      });
+      focusTrapRef.current.activate();
+    }
+    return () => focusTrapRef.current && focusTrapRef.current.deactivate();
+  }, [popupRef]);
+  return compat.createPortal(jsxRuntime.jsx("div", {
+    "aria-label": title,
+    tabIndex: -1,
+    ref: popupRef,
+    role: "dialog",
+    class: classnames__default["default"]('bio-properties-panel-popup', className),
+    style: style,
+    children: props.children
+  }), container || document.body);
 }
-
-function HeaderButton(props) {
+Popup.Title = Title;
+Popup.Body = Body;
+Popup.Footer = Footer;
+function Title(props) {
   const {
-    children = null,
-    class: classname,
-    onClick = () => {},
-    ...otherProps
+    children,
+    className,
+    draggable,
+    title,
+    ...rest
   } = props;
-  return jsxRuntime.jsx("button", {
-    ...otherProps,
-    onClick: onClick,
-    class: classnames__default["default"]('bio-properties-panel-group-header-button', classname),
-    children: children
-  });
-}
 
-function CollapsibleEntry(props) {
-  const {
-    element,
-    entries = [],
-    id,
-    label,
-    open: shouldOpen,
-    remove
-  } = props;
-  const [open, setOpen] = hooks.useState(shouldOpen);
-  const toggleOpen = () => setOpen(!open);
-  const {
-    onShow
-  } = hooks.useContext(LayoutContext);
-  const propertiesPanelContext = {
-    ...hooks.useContext(LayoutContext),
-    onShow: hooks.useCallback(() => {
-      setOpen(true);
-      if (minDash.isFunction(onShow)) {
-        onShow();
-      }
-    }, [onShow, setOpen])
+  // we can't use state as we need to
+  // manipulate this inside dragging events
+  const context = hooks.useRef({
+    startPosition: null,
+    newPosition: null
+  });
+  const dragPreviewRef = hooks.useRef();
+  const titleRef = hooks.useRef();
+  const onMove = minDash.throttle((_, delta) => {
+    const {
+      x: dx,
+      y: dy
+    } = delta;
+    const newPosition = {
+      x: context.current.startPosition.x + dx,
+      y: context.current.startPosition.y + dy
+    };
+    const popupParent = getPopupParent(titleRef.current);
+    popupParent.style.top = newPosition.y + 'px';
+    popupParent.style.left = newPosition.x + 'px';
+  });
+  const onMoveStart = event => {
+    // initialize drag handler
+    const onDragStart = createDragger(onMove, dragPreviewRef.current);
+    onDragStart(event);
+    const popupParent = getPopupParent(titleRef.current);
+    const bounds = popupParent.getBoundingClientRect();
+    context.current.startPosition = {
+      x: bounds.left,
+      y: bounds.top
+    };
+  };
+  const onMoveEnd = () => {
+    context.current.newPosition = null;
   };
-
-  // todo(pinussilvestrus): translate once we have a translate mechanism for the core
-  const placeholderLabel = '<empty>';
   return jsxRuntime.jsxs("div", {
-    "data-entry-id": id,
-    class: classnames__default["default"]('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
-    children: [jsxRuntime.jsxs("div", {
-      class: "bio-properties-panel-collapsible-entry-header",
-      onClick: toggleOpen,
+    class: classnames__default["default"]('bio-properties-panel-popup__header', draggable && 'draggable', className),
+    ref: titleRef,
+    draggable: draggable,
+    onDragStart: onMoveStart,
+    onDragEnd: onMoveEnd,
+    ...rest,
+    children: [draggable && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx("div", {
-        title: label || placeholderLabel,
-        class: classnames__default["default"]('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
-        children: label || placeholderLabel
-      }), jsxRuntime.jsx("button", {
-        title: "Toggle list item",
-        class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
-        children: jsxRuntime.jsx(ArrowIcon, {
-          class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
-        })
-      }), remove ? jsxRuntime.jsx("button", {
-        title: "Delete item",
-        class: "bio-properties-panel-remove-entry",
-        onClick: remove,
-        children: jsxRuntime.jsx(DeleteIcon, {})
-      }) : null]
+        ref: dragPreviewRef,
+        class: "bio-properties-panel-popup__drag-preview"
+      }), jsxRuntime.jsx("div", {
+        class: "bio-properties-panel-popup__drag-handle",
+        children: jsxRuntime.jsx(DragIcon, {})
+      })]
     }), jsxRuntime.jsx("div", {
-      class: classnames__default["default"]('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
-      children: jsxRuntime.jsx(LayoutContext.Provider, {
-        value: propertiesPanelContext,
-        children: entries.map(entry => {
-          const {
-            component: Component,
-            id
-          } = entry;
-          return preact.createElement(Component, {
-            ...entry,
-            element: element,
-            key: id
-          });
-        })
-      })
-    })]
+      class: "bio-properties-panel-popup__title",
+      children: title
+    }), children]
   });
 }
-
-function ListItem(props) {
+function Body(props) {
   const {
-    autoFocusEntry,
-    autoOpen
+    children,
+    className,
+    ...rest
   } = props;
-
-  // focus specified entry on auto open
-  hooks.useEffect(() => {
-    if (autoOpen && autoFocusEntry) {
-      const entry = minDom.query(`[data-entry-id="${autoFocusEntry}"]`);
-      const focusableInput = minDom.query('.bio-properties-panel-input', entry);
-      if (focusableInput) {
-        if (minDash.isFunction(focusableInput.select)) {
-          focusableInput.select();
-        } else if (minDash.isFunction(focusableInput.focus)) {
-          focusableInput.focus();
-        }
-      }
-    }
-  }, [autoOpen, autoFocusEntry]);
   return jsxRuntime.jsx("div", {
-    class: "bio-properties-panel-list-item",
-    children: jsxRuntime.jsx(CollapsibleEntry, {
-      ...props,
-      open: autoOpen
-    })
+    class: classnames__default["default"]('bio-properties-panel-popup__body', className),
+    ...rest,
+    children: children
+  });
+}
+function Footer(props) {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsxRuntime.jsx("div", {
+    class: classnames__default["default"]('bio-properties-panel-popup__footer', className),
+    ...rest,
+    children: props.children
   });
 }
 
-const noop$3 = () => {};
+// helpers //////////////////////
+
+function getPopupParent(node) {
+  return node.closest('.bio-properties-panel-popup');
+}
+
+const FEEL_POPUP_WIDTH = 700;
+const FEEL_POPUP_HEIGHT = 250;
 
 /**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+ * FEEL popup component, built as a singleton.
  */
-function ListGroup(props) {
+function FEELPopupRoot(props) {
   const {
-    add,
-    element,
-    id,
-    items,
-    label,
-    shouldOpen = true,
-    shouldSort = true
+    element
   } = props;
-  const groupRef = hooks.useRef(null);
-  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
-  const [sticky, setSticky] = hooks.useState(false);
-  const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
-  const [ordering, setOrdering] = hooks.useState([]);
-  const [newItemAdded, setNewItemAdded] = hooks.useState(false);
-
-  // Flag to mark that add button was clicked in the last render cycle
-  const [addTriggered, setAddTriggered] = hooks.useState(false);
-  const prevItems = usePrevious(items);
   const prevElement = usePrevious(element);
-  const elementChanged = element !== prevElement;
-  const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen);
-
-  // reset initial ordering when element changes (before first render)
-  if (elementChanged) {
-    setOrdering(createOrdering(shouldSort ? sortItems(items) : items));
-  }
-
-  // keep ordering in sync to items - and open changes
+  const [popupConfig, setPopupConfig] = hooks.useState({});
+  const [open, setOpen] = hooks.useState(false);
+  const [source, setSource] = hooks.useState(null);
+  const [sourceElement, setSourceElement] = hooks.useState(null);
+  const handleOpen = (key, config, _sourceElement) => {
+    setSource(key);
+    setPopupConfig(config);
+    setOpen(true);
+    setSourceElement(_sourceElement);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setSource(null);
+  };
+  const feelPopupContext = {
+    open: handleOpen,
+    close: handleClose,
+    source
+  };
 
-  // (0) set initial ordering from given items
+  // close popup on element change, cf. https://github.com/bpmn-io/properties-panel/issues/270
   hooks.useEffect(() => {
-    if (!prevItems || !shouldSort) {
-      setOrdering(createOrdering(items));
+    if (element && element !== prevElement) {
+      handleClose();
     }
-  }, [items, element]);
-
-  // (1) items were added
+  }, [element]);
+  return jsxRuntime.jsxs(FeelPopupContext.Provider, {
+    value: feelPopupContext,
+    children: [open && jsxRuntime.jsx(FeelPopupComponent, {
+      onClose: handleClose,
+      sourceElement: sourceElement,
+      ...popupConfig
+    }), props.children]
+  });
+}
+function FeelPopupComponent(props) {
+  const {
+    id,
+    hostLanguage,
+    onInput,
+    onClose,
+    position,
+    singleLine,
+    sourceElement,
+    title,
+    tooltipContainer,
+    type,
+    value,
+    variables
+  } = props;
+  const editorRef = hooks.useRef();
+  const handleSetReturnFocus = () => {
+    sourceElement && sourceElement.focus();
+  };
   hooks.useEffect(() => {
-    // reset addTriggered flag
-    setAddTriggered(false);
-    if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
-      let add = [];
-      items.forEach(item => {
-        if (!ordering.includes(item.id)) {
-          add.push(item.id);
-        }
-      });
-      let newOrdering = ordering;
+    const editor = editorRef.current;
+    if (editor) {
+      editor.focus();
+    }
+  }, [editorRef, id]);
+  return jsxRuntime.jsxs(Popup, {
+    className: "bio-properties-panel-feel-popup",
+    position: position,
+    title: title,
+    onClose: onClose
+
+    // handle focus manually on deactivate
+    ,
+    returnFocus: false,
+    onPostDeactivate: handleSetReturnFocus,
+    height: FEEL_POPUP_HEIGHT,
+    width: FEEL_POPUP_WIDTH,
+    children: [jsxRuntime.jsx(Popup.Title, {
+      title: title,
+      draggable: true
+    }), jsxRuntime.jsx(Popup.Body, {
+      children: jsxRuntime.jsxs("div", {
+        class: "bio-properties-panel-feel-popup__body",
+        children: [type === 'feel' && jsxRuntime.jsx(CodeEditor, {
+          enableGutters: true,
+          id: prefixId$8(id),
+          name: id,
+          onInput: onInput,
+          value: value,
+          variables: variables,
+          ref: editorRef,
+          tooltipContainer: tooltipContainer
+        }), type === 'feelers' && jsxRuntime.jsx(CodeEditor$1, {
+          id: prefixId$8(id),
+          contentAttributes: {
+            'aria-label': title
+          },
+          enableGutters: true,
+          hostLanguage: hostLanguage,
+          name: id,
+          onInput: onInput,
+          value: value,
+          ref: editorRef,
+          singleLine: singleLine,
+          tooltipContainer: tooltipContainer
+        })]
+      })
+    }), jsxRuntime.jsx(Popup.Footer, {
+      children: jsxRuntime.jsx("button", {
+        onClick: onClose,
+        title: "Close pop-up editor",
+        class: "bio-properties-panel-feel-popup__close-btn",
+        children: "Close"
+      })
+    })]
+  });
+}
 
-      // open if not open, configured and triggered by add button
-      //
-      // TODO(marstamm): remove once we refactor layout handling for listGroups.
-      // Ideally, opening should be handled as part of the `add` callback and
-      // not be a concern for the ListGroup component.
-      if (addTriggered && !open && shouldOpen) {
-        toggleOpen();
-      }
+// helpers /////////////////
 
-      // filter when not open and configured
-      if (!open && shouldSort) {
-        newOrdering = createOrdering(sortItems(items));
-      }
-
-      // add new items on top or bottom depending on sorting behavior
-      newOrdering = newOrdering.filter(item => !add.includes(item));
-      if (shouldSort) {
-        newOrdering.unshift(...add);
-      } else {
-        newOrdering.push(...add);
-      }
-      setOrdering(newOrdering);
-      setNewItemAdded(addTriggered);
-    } else {
-      setNewItemAdded(false);
-    }
-  }, [items, open, shouldHandleEffects, addTriggered]);
-
-  // (2) sort items on open if shouldSort is set
-  hooks.useEffect(() => {
-    if (shouldSort && open && !newItemAdded) {
-      setOrdering(createOrdering(sortItems(items)));
-    }
-  }, [open, shouldSort]);
-
-  // (3) items were deleted
-  hooks.useEffect(() => {
-    if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
-      let keep = [];
-      ordering.forEach(o => {
-        if (getItem(items, o)) {
-          keep.push(o);
-        }
-      });
-      setOrdering(keep);
-    }
-  }, [items, shouldHandleEffects]);
-
-  // set css class when group is sticky to top
-  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
-  const toggleOpen = () => setOpen(!open);
-  const hasItems = !!items.length;
-  const propertiesPanelContext = {
-    ...hooks.useContext(LayoutContext),
-    onShow
-  };
-  const handleAddClick = e => {
-    setAddTriggered(true);
-    add(e);
-  };
-  const allErrors = useErrors();
-  const hasError = items.some(item => {
-    if (allErrors[item.id]) {
-      return true;
-    }
-    if (!item.entries) {
-      return;
-    }
-
-    // also check if the error is nested, e.g. for name-value entries
-    return item.entries.some(entry => allErrors[entry.id]);
-  });
-  return jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-group",
-    "data-group-id": 'group-' + id,
-    ref: groupRef,
-    children: [jsxRuntime.jsxs("div", {
-      class: classnames__default["default"]('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
-      onClick: hasItems ? toggleOpen : noop$3,
-      children: [jsxRuntime.jsx("div", {
-        title: label,
-        class: "bio-properties-panel-group-header-title",
-        children: jsxRuntime.jsx(TooltipWrapper, {
-          value: props.tooltip,
-          forId: 'group-' + id,
-          element: element,
-          parent: groupRef,
-          children: label
-        })
-      }), jsxRuntime.jsxs("div", {
-        class: "bio-properties-panel-group-header-buttons",
-        children: [add ? jsxRuntime.jsxs("button", {
-          title: "Create new list item",
-          class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
-          onClick: handleAddClick,
-          children: [jsxRuntime.jsx(CreateIcon, {}), !hasItems ? jsxRuntime.jsx("span", {
-            class: "bio-properties-panel-add-entry-label",
-            children: "Create"
-          }) : null]
-        }) : null, hasItems ? jsxRuntime.jsx("div", {
-          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
-          class: classnames__default["default"]('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
-          children: items.length
-        }) : null, hasItems ? jsxRuntime.jsx("button", {
-          title: "Toggle section",
-          class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
-          children: jsxRuntime.jsx(ArrowIcon, {
-            class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
-          })
-        }) : null]
-      })]
-    }), jsxRuntime.jsx("div", {
-      class: classnames__default["default"]('bio-properties-panel-list', open && hasItems ? 'open' : ''),
-      children: jsxRuntime.jsx(LayoutContext.Provider, {
-        value: propertiesPanelContext,
-        children: ordering.map((o, index) => {
-          const item = getItem(items, o);
-          if (!item) {
-            return;
-          }
-          const {
-            id
-          } = item;
-
-          // if item was added, open it
-          // Existing items will not be affected as autoOpen is only applied on first render
-          const autoOpen = newItemAdded;
-          return preact.createElement(ListItem, {
-            ...item,
-            autoOpen: autoOpen,
-            element: element,
-            index: index,
-            key: id
-          });
-        })
-      })
-    })]
-  });
-}
-
-// helpers ////////////////////
-
-/**
- * Sorts given items alphanumeric by label
- */
-function sortItems(items) {
-  return minDash.sortBy(items, i => i.label.toLowerCase());
-}
-function getItem(items, id) {
-  return minDash.find(items, i => i.id === id);
-}
-function createOrdering(items) {
-  return items.map(i => i.id);
-}
-
-function Description(props) {
-  const {
-    element,
-    forId,
-    value
-  } = props;
-  const contextDescription = useDescriptionContext(forId, element);
-  const description = value || contextDescription;
-  if (description) {
-    return jsxRuntime.jsx("div", {
-      class: "bio-properties-panel-description",
-      children: description
-    });
-  }
+function prefixId$8(id) {
+  return `bio-properties-panel-${id}`;
 }
 
-function Checkbox(props) {
+function ToggleSwitch(props) {
   const {
     id,
     label,
-    onChange,
-    disabled,
-    value = false,
+    onInput,
+    value,
+    switcherLabel,
+    inline,
     onFocus,
     onBlur,
+    inputRef,
     tooltip
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
-  const handleChangeCallback = ({
-    target
-  }) => {
-    onChange(target.checked);
+  const handleInputCallback = async () => {
+    onInput(!value);
   };
-  const handleChange = e => {
-    handleChangeCallback(e);
+  const handleInput = e => {
+    handleInputCallback();
     setLocalValue(e.target.value);
   };
   hooks.useEffect(() => {
@@ -1458,29 +1497,40 @@ function Checkbox(props) {
     }
     setLocalValue(value);
   }, [value]);
-  const ref = useShowEntryEvent(id);
   return jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-checkbox",
-    children: [jsxRuntime.jsx("input", {
-      ref: ref,
-      id: prefixId$7(id),
-      name: id,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      type: "checkbox",
-      class: "bio-properties-panel-input",
-      onChange: handleChange,
-      checked: localValue,
-      disabled: disabled
-    }), jsxRuntime.jsx("label", {
-      for: prefixId$7(id),
+    class: classnames__default["default"]('bio-properties-panel-toggle-switch', {
+      inline
+    }),
+    children: [jsxRuntime.jsx("label", {
       class: "bio-properties-panel-label",
+      for: prefixId$7(id),
       children: jsxRuntime.jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
         element: props.element,
         children: label
       })
+    }), jsxRuntime.jsxs("div", {
+      class: "bio-properties-panel-field-wrapper",
+      children: [jsxRuntime.jsxs("label", {
+        class: "bio-properties-panel-toggle-switch__switcher",
+        children: [jsxRuntime.jsx("input", {
+          ref: inputRef,
+          id: prefixId$7(id),
+          class: "bio-properties-panel-input",
+          type: "checkbox",
+          onFocus: onFocus,
+          onBlur: onBlur,
+          name: id,
+          onInput: handleInput,
+          checked: !!localValue
+        }), jsxRuntime.jsx("span", {
+          class: "bio-properties-panel-toggle-switch__slider"
+        })]
+      }), switcherLabel && jsxRuntime.jsx("p", {
+        class: "bio-properties-panel-toggle-switch__label",
+        children: switcherLabel
+      })]
     })]
   });
 }
@@ -1491,44 +1541,43 @@ function Checkbox(props) {
  * @param {String} props.id
  * @param {String} props.description
  * @param {String} props.label
+ * @param {String} props.switcherLabel
+ * @param {Boolean} props.inline
  * @param {Function} props.getValue
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  * @param {string|import('preact').Component} props.tooltip
- * @param {boolean} [props.disabled]
  */
-function CheckboxEntry(props) {
+function ToggleSwitchEntry(props) {
   const {
     element,
     id,
     description,
     label,
+    switcherLabel,
+    inline,
     getValue,
     setValue,
-    disabled,
     onFocus,
     onBlur,
     tooltip
   } = props;
   const value = getValue(element);
-  const error = useError(id);
   return jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
+    class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
     "data-entry-id": id,
-    children: [jsxRuntime.jsx(Checkbox, {
-      disabled: disabled,
+    children: [jsxRuntime.jsx(ToggleSwitch, {
       id: id,
       label: label,
-      onChange: setValue,
+      value: value,
+      onInput: setValue,
       onFocus: onFocus,
       onBlur: onBlur,
-      value: value,
+      switcherLabel: switcherLabel,
+      inline: inline,
       tooltip: tooltip,
       element: element
-    }, element), error && jsxRuntime.jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
     }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
@@ -1546,450 +1595,94 @@ function prefixId$7(id) {
   return `bio-properties-panel-${id}`;
 }
 
-const useBufferedFocus$1 = function (editor, ref) {
-  const [buffer, setBuffer] = hooks.useState(undefined);
-  ref.current = hooks.useMemo(() => ({
-    focus: offset => {
-      if (editor) {
-        editor.focus(offset);
-      } else {
-        if (typeof offset === 'undefined') {
-          offset = Infinity;
-        }
-        setBuffer(offset);
-      }
-    }
-  }), [editor]);
-  hooks.useEffect(() => {
-    if (typeof buffer !== 'undefined' && editor) {
-      editor.focus(buffer);
-      setBuffer(false);
-    }
-  }, [editor, buffer]);
-};
-const CodeEditor$1 = compat.forwardRef((props, ref) => {
+function NumberField(props) {
   const {
-    onInput,
+    debounce,
     disabled,
-    tooltipContainer,
-    enableGutters,
-    value,
-    onLint = () => {},
-    contentAttributes = {},
-    hostLanguage = null,
-    singleLine = false
-  } = props;
-  const inputRef = hooks.useRef();
-  const [editor, setEditor] = hooks.useState();
-  const [localValue, setLocalValue] = hooks.useState(value || '');
-  useBufferedFocus$1(editor, ref);
-  const handleInput = useStaticCallback(newValue => {
-    onInput(newValue);
-    setLocalValue(newValue);
-  });
-  hooks.useEffect(() => {
-    let editor;
-    editor = new feelers.FeelersEditor({
-      container: inputRef.current,
-      onChange: handleInput,
-      value: localValue,
-      onLint,
-      contentAttributes,
-      tooltipContainer,
-      enableGutters,
-      hostLanguage,
-      singleLine
-    });
-    setEditor(editor);
-    return () => {
-      onLint([]);
-      inputRef.current.innerHTML = '';
-      setEditor(null);
-    };
-  }, []);
-  hooks.useEffect(() => {
-    if (!editor) {
-      return;
-    }
-    if (value === localValue) {
-      return;
-    }
-    editor.setValue(value);
-    setLocalValue(value);
-  }, [value]);
-  const handleClick = () => {
-    ref.current.focus();
-  };
-  return jsxRuntime.jsx("div", {
-    name: props.name,
-    class: classnames__default["default"]('bio-properties-panel-feelers-editor bio-properties-panel-input', localValue ? 'edited' : null, disabled ? 'disabled' : null),
-    ref: inputRef,
-    onClick: handleClick
-  });
-});
-
-const useBufferedFocus = function (editor, ref) {
-  const [buffer, setBuffer] = hooks.useState(undefined);
-  ref.current = hooks.useMemo(() => ({
-    focus: offset => {
-      if (editor) {
-        editor.focus(offset);
-      } else {
-        if (typeof offset === 'undefined') {
-          offset = Infinity;
-        }
-        setBuffer(offset);
-      }
-    }
-  }), [editor]);
-  hooks.useEffect(() => {
-    if (typeof buffer !== 'undefined' && editor) {
-      editor.focus(buffer);
-      setBuffer(false);
-    }
-  }, [editor, buffer]);
-};
-const CodeEditor = compat.forwardRef((props, ref) => {
-  const {
-    value,
+    displayLabel = true,
+    id,
+    inputRef,
+    label,
+    max,
+    min,
     onInput,
-    onFeelToggle,
-    onLint = () => {},
-    disabled,
-    tooltipContainer,
-    variables
+    step,
+    value = '',
+    onFocus,
+    onBlur
   } = props;
-  const inputRef = hooks.useRef();
-  const [editor, setEditor] = hooks.useState();
-  const [localValue, setLocalValue] = hooks.useState(value || '');
-  useBufferedFocus(editor, ref);
-  const handleInput = useStaticCallback(newValue => {
-    onInput(newValue);
-    setLocalValue(newValue);
-  });
-  hooks.useEffect(() => {
-    let editor;
-
-    /* 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) {
-        return;
-      }
-      const selection = editor.getSelection();
-      const range = selection.ranges[selection.mainIndex];
-      if (range.from === 0 && range.to === 0) {
-        onFeelToggle();
+  const [localValue, setLocalValue] = hooks.useState(value);
+  const handleInputCallback = hooks.useMemo(() => {
+    return debounce(event => {
+      const {
+        validity,
+        value
+      } = event.target;
+      if (validity.valid) {
+        onInput(value ? parseFloat(value) : undefined);
       }
-    };
-    editor = new FeelEditor__default["default"]({
-      container: inputRef.current,
-      onChange: handleInput,
-      onKeyDown: onKeyDown,
-      onLint: onLint,
-      tooltipContainer: tooltipContainer,
-      value: localValue,
-      variables: variables
     });
-    setEditor(editor);
-    return () => {
-      onLint([]);
-      inputRef.current.innerHTML = '';
-      setEditor(null);
-    };
-  }, []);
+  }, [onInput, debounce]);
+  const handleInput = e => {
+    handleInputCallback(e);
+    setLocalValue(e.target.value);
+  };
   hooks.useEffect(() => {
-    if (!editor) {
-      return;
-    }
     if (value === localValue) {
       return;
     }
-    editor.setValue(value);
     setLocalValue(value);
   }, [value]);
-  hooks.useEffect(() => {
-    if (!editor) {
-      return;
-    }
-    editor.setVariables(variables);
-  }, [variables]);
-  const handleClick = () => {
-    ref.current.focus();
-  };
-  return jsxRuntime.jsx("div", {
-    class: classnames__default["default"]('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null),
-    children: jsxRuntime.jsx("div", {
-      name: props.name,
-      class: classnames__default["default"]('bio-properties-panel-input', localValue ? 'edited' : null),
+  return jsxRuntime.jsxs("div", {
+    class: "bio-properties-panel-numberfield",
+    children: [displayLabel && jsxRuntime.jsx("label", {
+      for: prefixId$6(id),
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsxRuntime.jsx("input", {
+      id: prefixId$6(id),
       ref: inputRef,
-      onClick: handleClick
-    })
-  });
-});
-
-function FeelIndicator(props) {
-  const {
-    active
-  } = props;
-  if (!active) {
-    return null;
-  }
-  return jsxRuntime.jsx("span", {
-    class: "bio-properties-panel-feel-indicator",
-    children: "="
+      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
+    })]
   });
 }
 
-const noop$2 = () => {};
-
 /**
  * @param {Object} props
- * @param {Object} props.label
- * @param {String} props.feel
+ * @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 FeelIcon(props) {
-  const {
-    feel = false,
-    active,
-    disabled = false,
-    onClick = noop$2
-  } = props;
-  const feelRequiredLabel = 'FEEL expression is mandatory';
-  const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
-  const handleClick = e => {
-    onClick(e);
-
-    // when pointer event was created from keyboard, keep focus on button
-    if (!e.pointerType) {
-      e.stopPropagation();
-    }
-  };
-  return jsxRuntime.jsx("button", {
-    class: classnames__default["default"]('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
-    onClick: handleClick,
-    disabled: feel === 'required' || disabled,
-    title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
-    children: jsxRuntime.jsx(FeelIcon$1, {})
-  });
-}
-
-function ToggleSwitch(props) {
+function NumberFieldEntry(props) {
   const {
-    id,
-    label,
-    onInput,
-    value,
-    switcherLabel,
-    inline,
-    onFocus,
-    onBlur,
-    inputRef,
-    tooltip
-  } = props;
-  const [localValue, setLocalValue] = hooks.useState(value);
-  const handleInputCallback = async () => {
-    onInput(!value);
-  };
-  const handleInput = e => {
-    handleInputCallback();
-    setLocalValue(e.target.value);
-  };
-  hooks.useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-toggle-switch', {
-      inline
-    }),
-    children: [jsxRuntime.jsx("label", {
-      class: "bio-properties-panel-label",
-      for: prefixId$6(id),
-      children: jsxRuntime.jsx(TooltipWrapper, {
-        value: tooltip,
-        forId: id,
-        element: props.element,
-        children: label
-      })
-    }), jsxRuntime.jsxs("div", {
-      class: "bio-properties-panel-field-wrapper",
-      children: [jsxRuntime.jsxs("label", {
-        class: "bio-properties-panel-toggle-switch__switcher",
-        children: [jsxRuntime.jsx("input", {
-          ref: inputRef,
-          id: prefixId$6(id),
-          class: "bio-properties-panel-input",
-          type: "checkbox",
-          onFocus: onFocus,
-          onBlur: onBlur,
-          name: id,
-          onInput: handleInput,
-          checked: !!localValue
-        }), jsxRuntime.jsx("span", {
-          class: "bio-properties-panel-toggle-switch__slider"
-        })]
-      }), switcherLabel && jsxRuntime.jsx("p", {
-        class: "bio-properties-panel-toggle-switch__label",
-        children: switcherLabel
-      })]
-    })]
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.label
- * @param {String} props.switcherLabel
- * @param {Boolean} props.inline
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {string|import('preact').Component} props.tooltip
- */
-function ToggleSwitchEntry(props) {
-  const {
-    element,
-    id,
-    description,
-    label,
-    switcherLabel,
-    inline,
-    getValue,
-    setValue,
-    onFocus,
-    onBlur,
-    tooltip
-  } = props;
-  const value = getValue(element);
-  return jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
-    "data-entry-id": id,
-    children: [jsxRuntime.jsx(ToggleSwitch, {
-      id: id,
-      label: label,
-      value: value,
-      onInput: setValue,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      switcherLabel: switcherLabel,
-      inline: inline,
-      tooltip: tooltip,
-      element: element
-    }), jsxRuntime.jsx(Description, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-function isEdited$7(node) {
-  return node && !!node.checked;
-}
-
-// helpers /////////////////
-
-function prefixId$6(id) {
-  return `bio-properties-panel-${id}`;
-}
-
-function NumberField(props) {
-  const {
-    debounce,
-    disabled,
-    displayLabel = true,
-    id,
-    inputRef,
-    label,
-    max,
-    min,
-    onInput,
-    step,
-    value = '',
-    onFocus,
-    onBlur
-  } = props;
-  const [localValue, setLocalValue] = hooks.useState(value);
-  const handleInputCallback = hooks.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);
-  };
-  hooks.useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  return jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-numberfield",
-    children: [displayLabel && jsxRuntime.jsx("label", {
-      for: prefixId$5(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), jsxRuntime.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,
+    debounce,
+    description,
+    disabled,
+    element,
+    getValue,
     id,
     label,
     max,
@@ -2043,28 +1736,31 @@ function NumberFieldEntry(props) {
     })]
   });
 }
-function isEdited$6(node) {
+function isEdited$7(node) {
   return node && !!node.value;
 }
 
 // helpers /////////////////
 
-function prefixId$5(id) {
+function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
 
-const noop$1 = () => {};
+const noop$2 = () => {};
 function FeelTextfield(props) {
   const {
     debounce,
     id,
+    element,
     label,
+    hostLanguage,
     onInput,
     onError,
     feel,
     value = '',
     disabled = false,
     variables,
+    singleLine,
     tooltipContainer,
     OptionalComponent = OptionalFeelInput,
     tooltip
@@ -2075,6 +1771,11 @@ function FeelTextfield(props) {
   const feelActive = minDash.isString(localValue) && localValue.startsWith('=') || feel === 'required';
   const feelOnlyValue = minDash.isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
   const [focus, _setFocus] = hooks.useState(undefined);
+  const {
+    open: openPopup,
+    source: popupSource
+  } = hooks.useContext(FeelPopupContext);
+  const popuOpen = popupSource === id;
   const setFocus = (offset = 0) => {
     const hasFocus = containerRef.current.contains(document.activeElement);
 
@@ -2127,6 +1828,21 @@ function FeelTextfield(props) {
     const message = `${error.source}: ${error.message}`;
     onError(message);
   });
+  const handlePopupOpen = (type = 'feel') => {
+    const popupOptions = {
+      id,
+      hostLanguage,
+      onInput: handleLocalInput,
+      position: calculatePopupPosition(containerRef.current),
+      singleLine,
+      title: getPopupTitle(element, label),
+      tooltipContainer,
+      type,
+      value: feelOnlyValue,
+      variables
+    };
+    openPopup(id, popupOptions, editorRef.current);
+  };
   hooks.useEffect(() => {
     if (typeof focus !== 'undefined') {
       editorRef.current.focus(focus);
@@ -2155,7 +1871,7 @@ function FeelTextfield(props) {
       event.clipboardData.setData('application/FEEL', event.clipboardData.getData('text'));
     };
     const pasteHandler = event => {
-      if (feelActive) {
+      if (feelActive || popuOpen) {
         return;
       }
       const data = event.clipboardData.getData('application/FEEL');
@@ -2180,7 +1896,7 @@ function FeelTextfield(props) {
       'feel-active': feelActive
     }),
     children: [jsxRuntime.jsxs("label", {
-      for: prefixId$4(id),
+      for: prefixId$5(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
       children: [jsxRuntime.jsx(TooltipWrapper, {
@@ -2202,28 +1918,33 @@ function FeelTextfield(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsxRuntime.jsx(CodeEditor, {
-        id: prefixId$4(id),
+        id: prefixId$5(id),
         name: id,
         onInput: handleLocalInput,
         disabled: disabled,
+        popupOpen: popuOpen,
         onFeelToggle: () => {
           handleFeelToggle();
           setFocus(true);
         },
         onLint: handleLint,
+        onPopupOpen: handlePopupOpen,
         value: feelOnlyValue,
         variables: variables,
         ref: editorRef,
         tooltipContainer: tooltipContainer
       }) : jsxRuntime.jsx(OptionalComponent, {
         ...props,
+        popupOpen: popuOpen,
         onInput: handleLocalInput,
         contentAttributes: {
-          'id': prefixId$4(id),
+          'id': prefixId$5(id),
           'aria-label': label
         },
         value: localValue,
-        ref: editorRef
+        ref: editorRef,
+        onPopupOpen: handlePopupOpen,
+        containerRef: containerRef
       })]
     })]
   });
@@ -2257,7 +1978,7 @@ const OptionalFeelInput = compat.forwardRef((props, ref) => {
     }
   };
   return jsxRuntime.jsx("input", {
-    id: prefixId$4(id),
+    id: prefixId$5(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -2342,7 +2063,7 @@ const OptionalFeelTextArea = compat.forwardRef((props, ref) => {
     }
   };
   return jsxRuntime.jsx("textarea", {
-    id: prefixId$4(id),
+    id: prefixId$5(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -2418,7 +2139,7 @@ const OptionalFeelCheckbox = compat.forwardRef((props, ref) => {
   };
   return jsxRuntime.jsx("input", {
     ref: inputRef,
-    id: prefixId$4(id),
+    id: prefixId$5(id),
     name: id,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -2428,101 +2149,1056 @@ const OptionalFeelCheckbox = compat.forwardRef((props, ref) => {
     checked: value,
     disabled: disabled
   });
-});
+});
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
+ */
+function FeelEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    debounce,
+    disabled,
+    feel,
+    label,
+    getValue,
+    setValue,
+    tooltipContainer,
+    hostLanguage,
+    singleLine,
+    validate,
+    show = noop$2,
+    example,
+    variables,
+    onFocus,
+    onBlur,
+    tooltip
+  } = props;
+  const [validationError, setValidationError] = hooks.useState(null);
+  const [localError, setLocalError] = hooks.useState(null);
+  let value = getValue(element);
+  hooks.useEffect(() => {
+    if (minDash.isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setValidationError(newValidationError);
+    }
+  }, [value]);
+  const onInput = useStaticCallback(newValue => {
+    let newValidationError = null;
+    if (minDash.isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+
+    // don't create multiple commandStack entries for the same value
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
+    }
+    setValidationError(newValidationError);
+  });
+  const onError = hooks.useCallback(err => {
+    setLocalError(err);
+  }, []);
+  const temporaryError = useError(id);
+  const error = localError || temporaryError || validationError;
+  return jsxRuntime.jsxs("div", {
+    class: classnames__default["default"](props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [preact.createElement(FeelTextfield, {
+      ...props,
+      debounce: debounce,
+      disabled: disabled,
+      feel: feel,
+      id: id,
+      key: element,
+      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,
+      tooltip: tooltip
+    }), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsxRuntime.jsx(Description, {
+      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 {String} props.max
+ * @param {String} props.min
+ * @param {String} props.step
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelNumberEntry(props) {
+  return jsxRuntime.jsx(FeelEntry, {
+    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 FeelTextAreaEntry(props) {
+  return jsxRuntime.jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-textarea",
+    OptionalComponent: OptionalFeelTextArea,
+    ...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 jsxRuntime.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 {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelCheckboxEntry(props) {
+  return jsxRuntime.jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-checkbox",
+    OptionalComponent: OptionalFeelCheckbox,
+    ...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 jsxRuntime.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 calculatePopupPosition(element) {
+  const {
+    top,
+    left
+  } = element.getBoundingClientRect();
+  return {
+    left: left - FEEL_POPUP_WIDTH - 20,
+    top: top
+  };
+}
+
+// todo(pinussilvestrus): make this configurable in the future
+function getPopupTitle(element, label) {
+  let popupTitle;
+  if (element && element.type) {
+    popupTitle = `${element.type} / `;
+  }
+  return `${popupTitle}${label}`;
+}
+
+const DEFAULT_LAYOUT = {};
+const DEFAULT_DESCRIPTION = {};
+const DEFAULT_TOOLTIP = {};
+
+/**
+ * @typedef { {
+ *    component: import('preact').Component,
+ *    id: String,
+ *    isEdited?: Function
+ * } } EntryDefinition
+ *
+ * @typedef { {
+ *    autoFocusEntry: String,
+ *    autoOpen?: Boolean,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    remove: (event: MouseEvent) => void
+ * } } ListItemDefinition
+ *
+ * @typedef { {
+ *    add: (event: MouseEvent) => void,
+ *    component: import('preact').Component,
+ *    element: Object,
+ *    id: String,
+ *    items: Array<ListItemDefinition>,
+ *    label: String,
+ *    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
+ *
+ *  @typedef { {
+ *    [id: String]: GetTooltipFunction
+ * } } TooltipConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetTooltipFunction
+ *
+ * @typedef { {
+ *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+ *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+ * } } PlaceholderProvider
+ *
+ */
+
+/**
+ * A basic properties panel component. Describes *how* content will be rendered, accepts
+ * data from implementor to describe *what* will be rendered.
+ *
+ * @param {Object} props
+ * @param {Object|Array} props.element
+ * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {PlaceholderProvider} [props.placeholderProvider]
+ * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+ * @param {Object} [props.layoutConfig]
+ * @param {Function} [props.layoutChanged]
+ * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {Function} [props.descriptionLoaded]
+ * @param {TooltipConfig} [props.tooltipConfig]
+ * @param {Function} [props.tooltipLoaded]
+ * @param {Object} [props.eventBus]
+ */
+function PropertiesPanel(props) {
+  const {
+    element,
+    headerProvider,
+    placeholderProvider,
+    groups,
+    layoutConfig,
+    layoutChanged,
+    descriptionConfig,
+    descriptionLoaded,
+    tooltipConfig,
+    tooltipLoaded,
+    eventBus
+  } = props;
+
+  // set-up layout context
+  const [layout, setLayout] = hooks.useState(createLayout(layoutConfig));
+
+  // react to external changes in the layout config
+  useUpdateLayoutEffect(() => {
+    const newLayout = createLayout(layoutConfig);
+    setLayout(newLayout);
+  }, [layoutConfig]);
+  hooks.useEffect(() => {
+    if (typeof layoutChanged === 'function') {
+      layoutChanged(layout);
+    }
+  }, [layout, layoutChanged]);
+  const getLayoutForKey = (key, defaultValue) => {
+    return minDash.get(layout, key, defaultValue);
+  };
+  const setLayoutForKey = (key, config) => {
+    const newLayout = minDash.assign({}, layout);
+    minDash.set(newLayout, key, config);
+    setLayout(newLayout);
+  };
+  const layoutContext = {
+    layout,
+    setLayout,
+    getLayoutForKey,
+    setLayoutForKey
+  };
+
+  // set-up description context
+  const description = hooks.useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
+  hooks.useEffect(() => {
+    if (typeof descriptionLoaded === 'function') {
+      descriptionLoaded(description);
+    }
+  }, [description, descriptionLoaded]);
+  const getDescriptionForId = (id, element) => {
+    return description[id] && description[id](element);
+  };
+  const descriptionContext = {
+    description,
+    getDescriptionForId
+  };
+
+  // set-up tooltip context
+  const tooltip = hooks.useMemo(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
+  hooks.useEffect(() => {
+    if (typeof tooltipLoaded === 'function') {
+      tooltipLoaded(tooltip);
+    }
+  }, [tooltip, tooltipLoaded]);
+  const getTooltipForId = (id, element) => {
+    return tooltip[id] && tooltip[id](element);
+  };
+  const tooltipContext = {
+    tooltip,
+    getTooltipForId
+  };
+  const [errors, setErrors] = hooks.useState({});
+  const onSetErrors = ({
+    errors
+  }) => setErrors(errors);
+  useEvent('propertiesPanel.setErrors', onSetErrors, eventBus);
+  const errorsContext = {
+    errors
+  };
+  const eventContext = {
+    eventBus
+  };
+  const propertiesPanelContext = {
+    element
+  };
+
+  // empty state
+  if (placeholderProvider && !element) {
+    return jsxRuntime.jsx(Placeholder, {
+      ...placeholderProvider.getEmpty()
+    });
+  }
+
+  // multiple state
+  if (placeholderProvider && minDash.isArray(element)) {
+    return jsxRuntime.jsx(Placeholder, {
+      ...placeholderProvider.getMultiple()
+    });
+  }
+  return jsxRuntime.jsx(LayoutContext.Provider, {
+    value: propertiesPanelContext,
+    children: jsxRuntime.jsx(ErrorsContext.Provider, {
+      value: errorsContext,
+      children: jsxRuntime.jsx(DescriptionContext.Provider, {
+        value: descriptionContext,
+        children: jsxRuntime.jsx(TooltipContext.Provider, {
+          value: tooltipContext,
+          children: jsxRuntime.jsx(LayoutContext.Provider, {
+            value: layoutContext,
+            children: jsxRuntime.jsx(EventContext.Provider, {
+              value: eventContext,
+              children: jsxRuntime.jsx(FEELPopupRoot, {
+                element: element,
+                children: jsxRuntime.jsxs("div", {
+                  class: "bio-properties-panel",
+                  children: [jsxRuntime.jsx(Header, {
+                    element: element,
+                    headerProvider: headerProvider
+                  }), jsxRuntime.jsx("div", {
+                    class: "bio-properties-panel-scroll-container",
+                    children: groups.map(group => {
+                      const {
+                        component: Component = Group,
+                        id
+                      } = group;
+                      return preact.createElement(Component, {
+                        ...group,
+                        key: id,
+                        element: element
+                      });
+                    })
+                  })]
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+}
+
+// helpers //////////////////
+
+function createLayout(overrides = {}, defaults = DEFAULT_LAYOUT) {
+  return {
+    ...defaults,
+    ...overrides
+  };
+}
+function createDescriptionContext(overrides = {}) {
+  return {
+    ...DEFAULT_DESCRIPTION,
+    ...overrides
+  };
+}
+function createTooltipContext(overrides = {}) {
+  return {
+    ...DEFAULT_TOOLTIP,
+    ...overrides
+  };
+}
+
+// hooks //////////////////
+
+/**
+ * This hook behaves like useLayoutEffect, but does not trigger on the first render.
+ *
+ * @param {Function} effect
+ * @param {Array} deps
+ */
+function useUpdateLayoutEffect(effect, deps) {
+  const isMounted = hooks.useRef(false);
+  hooks.useLayoutEffect(() => {
+    if (isMounted.current) {
+      return effect();
+    } else {
+      isMounted.current = true;
+    }
+  }, deps);
+}
+
+function DropdownButton(props) {
+  const {
+    class: className,
+    children,
+    menuItems = []
+  } = props;
+  const dropdownRef = hooks.useRef(null);
+  const menuRef = hooks.useRef(null);
+  const [open, setOpen] = hooks.useState(false);
+  const close = () => setOpen(false);
+  function onDropdownToggle(event) {
+    if (menuRef.current && menuRef.current.contains(event.target)) {
+      return;
+    }
+    event.stopPropagation();
+    setOpen(open => !open);
+  }
+  function onActionClick(event, action) {
+    event.stopPropagation();
+    close();
+    action();
+  }
+  useGlobalClick([dropdownRef.current], () => close());
+  return jsxRuntime.jsxs("div", {
+    class: classnames__default["default"]('bio-properties-panel-dropdown-button', {
+      open
+    }, className),
+    onClick: onDropdownToggle,
+    ref: dropdownRef,
+    children: [children, jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-dropdown-button__menu",
+      ref: menuRef,
+      children: menuItems.map((item, index) => jsxRuntime.jsx(MenuItem, {
+        onClick: onActionClick,
+        item: item
+      }, index))
+    })]
+  });
+}
+function MenuItem({
+  item,
+  onClick
+}) {
+  if (item.separator) {
+    return jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator"
+    });
+  }
+  if (item.action) {
+    return jsxRuntime.jsx("button", {
+      class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable",
+      onClick: event => onClick(event, item.action),
+      children: item.entry
+    });
+  }
+  return jsxRuntime.jsx("div", {
+    class: "bio-properties-panel-dropdown-button__menu-item",
+    children: item.entry
+  });
+}
+
+/**
+ *
+ * @param {Array<null | Element>} ignoredElements
+ * @param {Function} callback
+ */
+function useGlobalClick(ignoredElements, callback) {
+  hooks.useEffect(() => {
+    /**
+     * @param {MouseEvent} event
+     */
+    function listener(event) {
+      if (ignoredElements.some(element => element && element.contains(event.target))) {
+        return;
+      }
+      callback();
+    }
+    document.addEventListener('click', listener, {
+      capture: true
+    });
+    return () => document.removeEventListener('click', listener, {
+      capture: true
+    });
+  }, [...ignoredElements, callback]);
+}
+
+function HeaderButton(props) {
+  const {
+    children = null,
+    class: classname,
+    onClick = () => {},
+    ...otherProps
+  } = props;
+  return jsxRuntime.jsx("button", {
+    ...otherProps,
+    onClick: onClick,
+    class: classnames__default["default"]('bio-properties-panel-group-header-button', classname),
+    children: children
+  });
+}
+
+function CollapsibleEntry(props) {
+  const {
+    element,
+    entries = [],
+    id,
+    label,
+    open: shouldOpen,
+    remove
+  } = props;
+  const [open, setOpen] = hooks.useState(shouldOpen);
+  const toggleOpen = () => setOpen(!open);
+  const {
+    onShow
+  } = hooks.useContext(LayoutContext);
+  const propertiesPanelContext = {
+    ...hooks.useContext(LayoutContext),
+    onShow: hooks.useCallback(() => {
+      setOpen(true);
+      if (minDash.isFunction(onShow)) {
+        onShow();
+      }
+    }, [onShow, setOpen])
+  };
+
+  // todo(pinussilvestrus): translate once we have a translate mechanism for the core
+  const placeholderLabel = '<empty>';
+  return jsxRuntime.jsxs("div", {
+    "data-entry-id": id,
+    class: classnames__default["default"]('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
+    children: [jsxRuntime.jsxs("div", {
+      class: "bio-properties-panel-collapsible-entry-header",
+      onClick: toggleOpen,
+      children: [jsxRuntime.jsx("div", {
+        title: label || placeholderLabel,
+        class: classnames__default["default"]('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
+        children: label || placeholderLabel
+      }), jsxRuntime.jsx("button", {
+        title: "Toggle list item",
+        class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
+        children: jsxRuntime.jsx(ArrowIcon, {
+          class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+        })
+      }), remove ? jsxRuntime.jsx("button", {
+        title: "Delete item",
+        class: "bio-properties-panel-remove-entry",
+        onClick: remove,
+        children: jsxRuntime.jsx(DeleteIcon, {})
+      }) : null]
+    }), jsxRuntime.jsx("div", {
+      class: classnames__default["default"]('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
+      children: jsxRuntime.jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: entries.map(entry => {
+          const {
+            component: Component,
+            id
+          } = entry;
+          return preact.createElement(Component, {
+            ...entry,
+            element: element,
+            key: id
+          });
+        })
+      })
+    })]
+  });
+}
+
+function ListItem(props) {
+  const {
+    autoFocusEntry,
+    autoOpen
+  } = props;
+
+  // focus specified entry on auto open
+  hooks.useEffect(() => {
+    if (autoOpen && autoFocusEntry) {
+      const entry = minDom.query(`[data-entry-id="${autoFocusEntry}"]`);
+      const focusableInput = minDom.query('.bio-properties-panel-input', entry);
+      if (focusableInput) {
+        if (minDash.isFunction(focusableInput.select)) {
+          focusableInput.select();
+        } else if (minDash.isFunction(focusableInput.focus)) {
+          focusableInput.focus();
+        }
+      }
+    }
+  }, [autoOpen, autoFocusEntry]);
+  return jsxRuntime.jsx("div", {
+    class: "bio-properties-panel-list-item",
+    children: jsxRuntime.jsx(CollapsibleEntry, {
+      ...props,
+      open: autoOpen
+    })
+  });
+}
+
+const noop$1 = () => {};
+
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
+ */
+function ListGroup(props) {
+  const {
+    add,
+    element,
+    id,
+    items,
+    label,
+    shouldOpen = true,
+    shouldSort = true
+  } = props;
+  const groupRef = hooks.useRef(null);
+  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const [sticky, setSticky] = hooks.useState(false);
+  const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
+  const [ordering, setOrdering] = hooks.useState([]);
+  const [newItemAdded, setNewItemAdded] = hooks.useState(false);
+
+  // Flag to mark that add button was clicked in the last render cycle
+  const [addTriggered, setAddTriggered] = hooks.useState(false);
+  const prevItems = usePrevious(items);
+  const prevElement = usePrevious(element);
+  const elementChanged = element !== prevElement;
+  const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen);
+
+  // reset initial ordering when element changes (before first render)
+  if (elementChanged) {
+    setOrdering(createOrdering(shouldSort ? sortItems(items) : items));
+  }
+
+  // keep ordering in sync to items - and open changes
+
+  // (0) set initial ordering from given items
+  hooks.useEffect(() => {
+    if (!prevItems || !shouldSort) {
+      setOrdering(createOrdering(items));
+    }
+  }, [items, element]);
+
+  // (1) items were added
+  hooks.useEffect(() => {
+    // reset addTriggered flag
+    setAddTriggered(false);
+    if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
+      let add = [];
+      items.forEach(item => {
+        if (!ordering.includes(item.id)) {
+          add.push(item.id);
+        }
+      });
+      let newOrdering = ordering;
+
+      // open if not open, configured and triggered by add button
+      //
+      // TODO(marstamm): remove once we refactor layout handling for listGroups.
+      // Ideally, opening should be handled as part of the `add` callback and
+      // not be a concern for the ListGroup component.
+      if (addTriggered && !open && shouldOpen) {
+        toggleOpen();
+      }
+
+      // filter when not open and configured
+      if (!open && shouldSort) {
+        newOrdering = createOrdering(sortItems(items));
+      }
+
+      // add new items on top or bottom depending on sorting behavior
+      newOrdering = newOrdering.filter(item => !add.includes(item));
+      if (shouldSort) {
+        newOrdering.unshift(...add);
+      } else {
+        newOrdering.push(...add);
+      }
+      setOrdering(newOrdering);
+      setNewItemAdded(addTriggered);
+    } else {
+      setNewItemAdded(false);
+    }
+  }, [items, open, shouldHandleEffects, addTriggered]);
+
+  // (2) sort items on open if shouldSort is set
+  hooks.useEffect(() => {
+    if (shouldSort && open && !newItemAdded) {
+      setOrdering(createOrdering(sortItems(items)));
+    }
+  }, [open, shouldSort]);
+
+  // (3) items were deleted
+  hooks.useEffect(() => {
+    if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
+      let keep = [];
+      ordering.forEach(o => {
+        if (getItem(items, o)) {
+          keep.push(o);
+        }
+      });
+      setOrdering(keep);
+    }
+  }, [items, shouldHandleEffects]);
+
+  // set css class when group is sticky to top
+  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
+  const toggleOpen = () => setOpen(!open);
+  const hasItems = !!items.length;
+  const propertiesPanelContext = {
+    ...hooks.useContext(LayoutContext),
+    onShow
+  };
+  const handleAddClick = e => {
+    setAddTriggered(true);
+    add(e);
+  };
+  const allErrors = useErrors();
+  const hasError = items.some(item => {
+    if (allErrors[item.id]) {
+      return true;
+    }
+    if (!item.entries) {
+      return;
+    }
+
+    // also check if the error is nested, e.g. for name-value entries
+    return item.entries.some(entry => allErrors[entry.id]);
+  });
+  return jsxRuntime.jsxs("div", {
+    class: "bio-properties-panel-group",
+    "data-group-id": 'group-' + id,
+    ref: groupRef,
+    children: [jsxRuntime.jsxs("div", {
+      class: classnames__default["default"]('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
+      onClick: hasItems ? toggleOpen : noop$1,
+      children: [jsxRuntime.jsx("div", {
+        title: label,
+        class: "bio-properties-panel-group-header-title",
+        children: jsxRuntime.jsx(TooltipWrapper, {
+          value: props.tooltip,
+          forId: 'group-' + id,
+          element: element,
+          parent: groupRef,
+          children: label
+        })
+      }), jsxRuntime.jsxs("div", {
+        class: "bio-properties-panel-group-header-buttons",
+        children: [add ? jsxRuntime.jsxs("button", {
+          title: "Create new list item",
+          class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
+          onClick: handleAddClick,
+          children: [jsxRuntime.jsx(CreateIcon, {}), !hasItems ? jsxRuntime.jsx("span", {
+            class: "bio-properties-panel-add-entry-label",
+            children: "Create"
+          }) : null]
+        }) : null, hasItems ? jsxRuntime.jsx("div", {
+          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
+          class: classnames__default["default"]('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
+          children: items.length
+        }) : null, hasItems ? jsxRuntime.jsx("button", {
+          title: "Toggle section",
+          class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
+          children: jsxRuntime.jsx(ArrowIcon, {
+            class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+          })
+        }) : null]
+      })]
+    }), jsxRuntime.jsx("div", {
+      class: classnames__default["default"]('bio-properties-panel-list', open && hasItems ? 'open' : ''),
+      children: jsxRuntime.jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: ordering.map((o, index) => {
+          const item = getItem(items, o);
+          if (!item) {
+            return;
+          }
+          const {
+            id
+          } = item;
+
+          // if item was added, open it
+          // Existing items will not be affected as autoOpen is only applied on first render
+          const autoOpen = newItemAdded;
+          return preact.createElement(ListItem, {
+            ...item,
+            autoOpen: autoOpen,
+            element: element,
+            index: index,
+            key: id
+          });
+        })
+      })
+    })]
+  });
+}
+
+// helpers ////////////////////
+
+/**
+ * Sorts given items alphanumeric by label
+ */
+function sortItems(items) {
+  return minDash.sortBy(items, i => i.label.toLowerCase());
+}
+function getItem(items, id) {
+  return minDash.find(items, i => i.id === id);
+}
+function createOrdering(items) {
+  return items.map(i => i.id);
+}
+
+function Checkbox(props) {
+  const {
+    id,
+    label,
+    onChange,
+    disabled,
+    value = false,
+    onFocus,
+    onBlur,
+    tooltip
+  } = props;
+  const [localValue, setLocalValue] = hooks.useState(value);
+  const handleChangeCallback = ({
+    target
+  }) => {
+    onChange(target.checked);
+  };
+  const handleChange = e => {
+    handleChangeCallback(e);
+    setLocalValue(e.target.value);
+  };
+  hooks.useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+    setLocalValue(value);
+  }, [value]);
+  const ref = useShowEntryEvent(id);
+  return jsxRuntime.jsxs("div", {
+    class: "bio-properties-panel-checkbox",
+    children: [jsxRuntime.jsx("input", {
+      ref: ref,
+      id: prefixId$4(id),
+      name: id,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      type: "checkbox",
+      class: "bio-properties-panel-input",
+      onChange: handleChange,
+      checked: localValue,
+      disabled: disabled
+    }), jsxRuntime.jsx("label", {
+      for: prefixId$4(id),
+      class: "bio-properties-panel-label",
+      children: jsxRuntime.jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
+    })]
+  });
+}
 
 /**
  * @param {Object} props
  * @param {Object} props.element
  * @param {String} props.id
  * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  * @param {string|import('preact').Component} props.tooltip
+ * @param {boolean} [props.disabled]
  */
-function FeelEntry(props) {
+function CheckboxEntry(props) {
   const {
     element,
     id,
     description,
-    debounce,
-    disabled,
-    feel,
     label,
     getValue,
     setValue,
-    tooltipContainer,
-    hostLanguage,
-    singleLine,
-    validate,
-    show = noop$1,
-    example,
-    variables,
+    disabled,
     onFocus,
     onBlur,
     tooltip
   } = props;
-  const [validationError, setValidationError] = hooks.useState(null);
-  const [localError, setLocalError] = hooks.useState(null);
-  let value = getValue(element);
-  hooks.useEffect(() => {
-    if (minDash.isFunction(validate)) {
-      const newValidationError = validate(value) || null;
-      setValidationError(newValidationError);
-    }
-  }, [value]);
-  const onInput = useStaticCallback(newValue => {
-    let newValidationError = null;
-    if (minDash.isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
-
-    // don't create multiple commandStack entries for the same value
-    if (newValue !== value) {
-      setValue(newValue, newValidationError);
-    }
-    setValidationError(newValidationError);
-  });
-  const onError = hooks.useCallback(err => {
-    setLocalError(err);
-  }, []);
-  const temporaryError = useError(id);
-  const error = localError || temporaryError || validationError;
+  const value = getValue(element);
+  const error = useError(id);
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"](props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
     "data-entry-id": id,
-    children: [preact.createElement(FeelTextfield, {
-      ...props,
-      debounce: debounce,
+    children: [jsxRuntime.jsx(Checkbox, {
       disabled: disabled,
-      feel: feel,
       id: id,
-      key: element,
       label: label,
-      onInput: onInput,
-      onError: onError,
+      onChange: setValue,
       onFocus: onFocus,
       onBlur: onBlur,
-      example: example,
-      hostLanguage: hostLanguage,
-      singleLine: singleLine,
-      show: show,
       value: value,
-      variables: variables,
-      tooltipContainer: tooltipContainer,
-      OptionalComponent: props.OptionalComponent,
-      tooltip: tooltip
-    }), error && jsxRuntime.jsx("div", {
+      tooltip: tooltip,
+      element: element
+    }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsxRuntime.jsx(Description, {
@@ -2532,154 +3208,8 @@ function FeelEntry(props) {
     })]
   });
 }
-
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.max
- * @param {String} props.min
- * @param {String} props.step
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- */
-function FeelNumberEntry(props) {
-  return jsxRuntime.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 FeelTextAreaEntry(props) {
-  return jsxRuntime.jsx(FeelEntry, {
-    class: "bio-properties-panel-feel-textarea",
-    OptionalComponent: OptionalFeelTextArea,
-    ...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 jsxRuntime.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 {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- */
-function FeelCheckboxEntry(props) {
-  return jsxRuntime.jsx(FeelEntry, {
-    class: "bio-properties-panel-feel-checkbox",
-    OptionalComponent: OptionalFeelCheckbox,
-    ...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 jsxRuntime.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');
+  return node && !!node.checked;
 }
 
 // helpers /////////////////
@@ -3570,6 +4100,7 @@ exports.DebounceInputModule = index;
 exports.DeleteIcon = DeleteIcon;
 exports.DescriptionContext = DescriptionContext;
 exports.DescriptionEntry = Description;
+exports.DragIcon = DragIcon;
 exports.DropdownButton = DropdownButton;
 exports.ErrorsContext = ErrorsContext;
 exports.EventContext = EventContext;
@@ -3590,6 +4121,7 @@ exports.ListGroup = ListGroup;
 exports.ListItem = ListItem;
 exports.NumberFieldEntry = NumberFieldEntry;
 exports.Placeholder = Placeholder;
+exports.Popup = Popup;
 exports.PropertiesPanel = PropertiesPanel;
 exports.PropertiesPanelContext = LayoutContext;
 exports.SelectEntry = SelectEntry;
@@ -3599,15 +4131,15 @@ exports.TextAreaEntry = TextAreaEntry;
 exports.TextFieldEntry = TextfieldEntry;
 exports.ToggleSwitchEntry = ToggleSwitchEntry;
 exports.TooltipContext = TooltipContext;
-exports.isCheckboxEntryEdited = isEdited$8;
-exports.isFeelEntryEdited = isEdited$5;
-exports.isNumberFieldEntryEdited = isEdited$6;
+exports.isCheckboxEntryEdited = isEdited$5;
+exports.isFeelEntryEdited = isEdited$6;
+exports.isNumberFieldEntryEdited = isEdited$7;
 exports.isSelectEntryEdited = isEdited$3;
 exports.isSimpleEntryEdited = isEdited$2;
 exports.isTemplatingEntryEdited = isEdited$4;
 exports.isTextAreaEntryEdited = isEdited$1;
 exports.isTextFieldEntryEdited = isEdited;
-exports.isToggleSwitchEntryEdited = isEdited$7;
+exports.isToggleSwitchEntryEdited = isEdited$8;
 exports.useDescriptionContext = useDescriptionContext;
 exports.useError = useError;
 exports.useErrors = useErrors;