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

package/dist/index.es.js

@@ -6,7 +6,8 @@ import classnames from 'classnames';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
 import { useContext, useState, useMemo, useEffect, useCallback, useRef as useRef$1, useLayoutEffect } from 'preact/hooks';
 import { createContext, Fragment, render, createElement } from 'preact';
-import React, { createPortal, useRef, useContext as useContext$1, useEffect as useEffect$1, forwardRef } from 'preact/compat';
+import * as React from 'preact/compat';
+import { createPortal, useRef, useContext as useContext$1, useEffect as useEffect$1, forwardRef } from 'preact/compat';
 import dragula from 'dragula';
 import { classes, query, closest, event, matches, domify } from 'min-dom';
 import { mutate } from 'array-move';
@@ -933,83 +934,91 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
+var _path$3;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var CloseIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$3({
-  width: "16",
-  height: "16",
-  fill: "currentColor",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7z"
-})));
+var SvgClose = function SvgClose(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "currentColor"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+    clipRule: "evenodd"
+  })));
+};
+var CloseIcon = SvgClose;
 
+var _path$2, _path2;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var DeleteIcon$1 = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$2({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  fill: "none"
-}, props), /*#__PURE__*/React.createElement("rect", {
-  width: "16",
-  height: "16",
-  x: ".536",
-  fill: "#fff",
-  rx: "3",
-  style: {
-    mixBlendMode: "multiply"
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "#fff",
-  d: "M.536 0h16v16h-16z",
-  style: {
-    mixBlendMode: "multiply"
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentcolor",
-  d: "M7.536 6h-1v6h1V6zm3 0h-1v6h1V6z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "currentcolor",
-  d: "M2.536 3v1h1v10a1 1 0 001 1h8a1 1 0 001-1V4h1V3h-12zm2 11V4h8v10h-8zm6-13h-4v1h4V1z"
-})));
+var SvgDelete = function SvgDelete(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    width: 16,
+    height: 16,
+    x: 0.536,
+    fill: "#fff",
+    rx: 3,
+    style: {
+      mixBlendMode: "multiply"
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h16v16H0z",
+    style: {
+      mixBlendMode: "multiply"
+    },
+    transform: "translate(.536)"
+  }), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    fill: "currentcolor",
+    d: "M2.536 3v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3h-12Zm2 11V4h8v10h-8Zm6-13h-4v1h4V1Z"
+  })));
+};
+var DeleteIcon$1 = SvgDelete;
 
+var _path$1;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var DraggableIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$1({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  fill: "currentcolor",
-  viewBox: "0 0 32 32"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M0 0h32v32H0z",
-  fill: "none"
-})));
+var SvgDraggable = function SvgDraggable(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    width: 16,
+    height: 16,
+    fill: "currentcolor",
+    viewBox: "0 0 32 32"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h32v32H0z",
+    style: {
+      fill: "none"
+    }
+  }));
+};
+var DraggableIcon = SvgDraggable;
 
+var _path;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SearchIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: "15",
-  height: "15",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M14.5 13.793l-3.776-3.776a5.508 5.508 0 10-.707.707l3.776 3.776.707-.707zM2 6.5a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0z",
-  fill: "currentColor"
-})));
+var SvgSearch = function SvgSearch(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 15,
+    height: 15,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776.707-.707ZM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
+  })));
+};
+var SearchIcon = SvgSearch;
 
 function EditorText(props) {
   const {
@@ -5982,6 +5991,165 @@ function isEdited$7(node) {
 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] = useState(value);
+  const handleInputCallback = useMemo(() => {
+    return debounce(event => {
+      const {
+        validity,
+        value
+      } = event.target;
+      if (validity.valid) {
+        onInput(value ? parseFloat(value) : undefined);
+      }
+    });
+  }, [onInput, debounce]);
+  const handleInput = e => {
+    handleInputCallback(e);
+    setLocalValue(e.target.value);
+  };
+  useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+    setLocalValue(value);
+  }, [value]);
+  return jsxs("div", {
+    class: "bio-properties-panel-numberfield",
+    children: [displayLabel && jsx("label", {
+      for: prefixId$5(id),
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsx("input", {
+      id: prefixId$5(id),
+      ref: inputRef,
+      type: "number",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      max: max,
+      min: min,
+      onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      step: step,
+      value: localValue
+    })]
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {String} props.step
+ * @param {Function} props.validate
+ */
+function NumberFieldEntry(props) {
+  const {
+    debounce,
+    description,
+    disabled,
+    element,
+    getValue,
+    id,
+    label,
+    max,
+    min,
+    setValue,
+    step,
+    onFocus,
+    onBlur,
+    validate
+  } = props;
+  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+    setLocalError(newValidationError);
+  };
+  if (previousValue === value && localError) {
+    value = cachedInvalidValue;
+  }
+  const error = globalError || localError;
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsx(NumberField, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onInput: onInput,
+      max: max,
+      min: min,
+      step: step,
+      value: value
+    }, element), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$6(node) {
+  return node && !!node.value;
+}
+
+// helpers /////////////////
+
+function prefixId$5(id) {
+  return `bio-properties-panel-${id}`;
+}
 const noop$1 = () => {};
 function FeelTextfield(props) {
   const {
@@ -6108,7 +6276,7 @@ function FeelTextfield(props) {
       'feel-active': feelActive
     }),
     children: [jsxs("label", {
-      for: prefixId$5(id),
+      for: prefixId$4(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
       children: [label, jsx(FeelIcon, {
@@ -6125,7 +6293,7 @@ function FeelTextfield(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsx(CodeEditor, {
-        id: prefixId$5(id),
+        id: prefixId$4(id),
         name: id,
         onInput: handleLocalInput,
         disabled: disabled,
@@ -6142,7 +6310,7 @@ function FeelTextfield(props) {
         ...props,
         onInput: handleLocalInput,
         contentAttributes: {
-          'id': prefixId$5(id),
+          'id': prefixId$4(id),
           'aria-label': label
         },
         value: localValue,
@@ -6180,7 +6348,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     }
   };
   return jsx("input", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -6194,6 +6362,53 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     value: value || ''
   });
 });
+const OptionalFeelNumberField = forwardRef((props, ref) => {
+  const {
+    id,
+    debounce,
+    disabled,
+    onInput,
+    value,
+    min,
+    max,
+    step,
+    onFocus,
+    onBlur
+  } = props;
+  const inputRef = useRef$1();
+
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
+  ref.current = {
+    focus: position => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+      if (typeof position === 'number' && position !== Infinity) {
+        if (position > value.length) {
+          position = value.length;
+        }
+        input.setSelectionRange(position, position);
+      }
+    }
+  };
+  return jsx(NumberField, {
+    id: id,
+    debounce: debounce,
+    disabled: disabled,
+    displayLabel: false,
+    inputRef: inputRef,
+    max: max,
+    min: min,
+    onInput: onInput,
+    step: step,
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur
+  });
+});
 forwardRef((props, ref) => {
   const {
     id,
@@ -6218,7 +6433,7 @@ forwardRef((props, ref) => {
     }
   };
   return jsx("textarea", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -6294,7 +6509,7 @@ forwardRef((props, ref) => {
   };
   return jsx("input", {
     ref: inputRef,
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     name: id,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -6383,11 +6598,13 @@ function FeelEntry(props) {
   return jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsx(FeelTextfield, {
+    children: [createElement(FeelTextfield, {
+      ...props,
       debounce: debounce,
       disabled: disabled,
       feel: feel,
       id: id,
+      key: element,
       label: label,
       onInput: onInput,
       onError: onError,
@@ -6401,7 +6618,7 @@ function FeelEntry(props) {
       variables: variables,
       tooltipContainer: tooltipContainer,
       OptionalComponent: props.OptionalComponent
-    }, element), error && jsx("div", {
+    }), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsx(Description$1, {
@@ -6412,6 +6629,36 @@ 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 jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-number",
+    OptionalComponent: OptionalFeelNumberField,
+    ...props
+  });
+}
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -6467,7 +6714,7 @@ function FeelTemplatingEntry(props) {
     ...props
   });
 }
-function isEdited$6(node) {
+function isEdited$5(node) {
   if (!node) {
     return false;
   }
@@ -6479,166 +6726,10 @@ function isEdited$6(node) {
 
 // helpers /////////////////
 
-function prefixId$5(id) {
+function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
 }
-function NumberField(props) {
-  const {
-    debounce,
-    disabled,
-    id,
-    label,
-    max,
-    min,
-    onInput,
-    step,
-    value = '',
-    onFocus,
-    onBlur
-  } = props;
-  const [localValue, setLocalValue] = useState(value);
-  const handleInputCallback = useMemo(() => {
-    return debounce(event => {
-      const {
-        validity,
-        value
-      } = event.target;
-      if (validity.valid) {
-        onInput(value ? parseFloat(value) : undefined);
-      }
-    });
-  }, [onInput, debounce]);
-  const handleInput = e => {
-    handleInputCallback(e);
-    setLocalValue(e.target.value);
-  };
-  useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  return jsxs("div", {
-    class: "bio-properties-panel-numberfield",
-    children: [jsx("label", {
-      for: prefixId$4(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), jsx("input", {
-      id: prefixId$4(id),
-      type: "number",
-      name: id,
-      spellCheck: "false",
-      autoComplete: "off",
-      disabled: disabled,
-      class: "bio-properties-panel-input",
-      max: max,
-      min: min,
-      onInput: handleInput,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      step: step,
-      value: localValue
-    })]
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {String} props.step
- * @param {Function} props.validate
- */
-function NumberFieldEntry(props) {
-  const {
-    debounce,
-    description,
-    disabled,
-    element,
-    getValue,
-    id,
-    label,
-    max,
-    min,
-    setValue,
-    step,
-    onFocus,
-    onBlur,
-    validate
-  } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
-  const globalError = useError(id);
-  const [localError, setLocalError] = useState(null);
-  let value = getValue(element);
-  const previousValue = usePrevious(value);
-  useEffect(() => {
-    if (isFunction(validate)) {
-      const newValidationError = validate(value) || null;
-      setLocalError(newValidationError);
-    }
-  }, [value]);
-  const onInput = newValue => {
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
-    setLocalError(newValidationError);
-  };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
-  const error = globalError || localError;
-  return jsxs("div", {
-    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
-    "data-entry-id": id,
-    children: [jsx(NumberField, {
-      debounce: debounce,
-      disabled: disabled,
-      id: id,
-      label: label,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onInput: onInput,
-      max: max,
-      min: min,
-      step: step,
-      value: value
-    }, element), error && jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
-    }), jsx(Description$1, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-function isEdited$4(node) {
-  return node && !!node.value;
-}
-
-// helpers /////////////////
-
-function prefixId$4(id) {
-  return `bio-properties-panel-${id}`;
-}
-function Select(props) {
+function Select(props) {
   const {
     id,
     label,
@@ -7279,7 +7370,7 @@ function AltTextEntry(props) {
       component: AltText,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7301,7 +7392,7 @@ function AltText(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     feel: 'optional',
@@ -7309,6 +7400,7 @@ function AltText(props) {
     id,
     label: 'Alternative text',
     setValue,
+    singleLine: true,
     variables
   });
 }
@@ -7397,7 +7489,7 @@ function DescriptionEntry(props) {
       component: Description,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7863,7 +7955,7 @@ function LabelEntry(props) {
         component: DateLabel,
         editField,
         field,
-        isEdited: isEdited$6
+        isEdited: isEdited$5
       });
     }
     if (subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
@@ -7872,7 +7964,7 @@ function LabelEntry(props) {
         component: TimeLabel,
         editField,
         field,
-        isEdited: isEdited$6
+        isEdited: isEdited$5
       });
     }
   } else if (INPUTS.includes(type) || type === 'button') {
@@ -7881,7 +7973,7 @@ function LabelEntry(props) {
       component: Label$1,
       editField,
       field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -7986,7 +8078,7 @@ function SourceEntry(props) {
       component: Source,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -8008,7 +8100,7 @@ function Source(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelEntry({
+  return FeelTemplatingEntry({
     debounce,
     description: 'Expression or static value (link/data URI)',
     element: field,
@@ -8017,6 +8109,7 @@ function Source(props) {
     id,
     label: 'Image source',
     setValue,
+    singleLine: true,
     variables
   });
 }
@@ -8041,7 +8134,7 @@ function TextEntry(props) {
     component: Text,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$5
   }];
 
   // todo: skipped to make the release without too much risk
@@ -8110,7 +8203,7 @@ function NumberEntries(props) {
   entries.push({
     id: id + '-decimalDigits',
     component: NumberDecimalDigits,
-    isEdited: isEdited$4,
+    isEdited: isEdited$6,
     editField,
     field
   });
@@ -8741,6 +8834,34 @@ function updateKey(properties, oldKey, newKey) {
   }, {});
 }
 
+function AutoFocusSelectEntry(props) {
+  const {
+    autoFocusEntry,
+    element,
+    getValue
+  } = props;
+  const value = getValue(element);
+  const prevValue = usePrevious(value);
+  const eventBus = useService('eventBus');
+
+  // auto focus specifc other entry when selected value changed
+  useEffect(() => {
+    if (autoFocusEntry && prevValue && value !== prevValue) {
+      // @Note(pinussilvestrus): There is an issue in the properties
+      // panel so we have to wait a bit before showing the entry.
+      // Cf. https://github.com/camunda/linting/blob/4f5328e2722f73ae60ae584c5f576eaec3999cb2/lib/modeler/Linting.js#L37
+      setTimeout(() => {
+        eventBus.fire('propertiesPanel.showEntry', {
+          id: autoFocusEntry
+        });
+      });
+    }
+  }, [value, autoFocusEntry, prevValue, eventBus]);
+  return jsx(SelectEntry, {
+    ...props
+  });
+}
+
 function ValuesSourceSelectEntry(props) {
   const {
     editField,
@@ -8779,7 +8900,8 @@ function ValuesSourceSelect(props) {
       value: valueSource
     }));
   };
-  return SelectEntry({
+  return AutoFocusSelectEntry({
+    autoFocusEntry: getAutoFocusEntryId(field),
     label: 'Type',
     element: field,
     getOptions: getValuesSourceOptions,
@@ -8789,6 +8911,20 @@ function ValuesSourceSelect(props) {
   });
 }
 
+// helpers //////////
+
+function getAutoFocusEntryId(field) {
+  const valuesSource = getValuesSource(field);
+  if (valuesSource === VALUES_SOURCES.EXPRESSION) {
+    return `${field.id}-valuesExpression-expression`;
+  } else if (valuesSource === VALUES_SOURCES.INPUT) {
+    return `${field.id}-dynamicValues-key`;
+  } else if (valuesSource === VALUES_SOURCES.STATIC) {
+    return `${field.id}-staticValues-0-label`;
+  }
+  return null;
+}
+
 function InputKeyValuesSourceEntry(props) {
   const {
     editField,
@@ -8945,7 +9081,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'prefix-adorner',
       component: PrefixAdorner,
-      isEdited: isEdited,
+      isEdited: isEdited$5,
       editField,
       field,
       onChange,
@@ -8954,7 +9090,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'suffix-adorner',
       component: SuffixAdorner,
-      isEdited: isEdited,
+      isEdited: isEdited$5,
       editField,
       field,
       onChange,
@@ -8971,13 +9107,19 @@ function PrefixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelTemplatingEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('prefixAdorner'),
     id,
     label: 'Prefix',
-    setValue: onChange('prefixAdorner')
+    setValue: onChange('prefixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 function SuffixAdorner(props) {
@@ -8988,13 +9130,18 @@ function SuffixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
-  return TextfieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelTemplatingEntry({
     debounce,
     element: field,
     getValue: getValue('suffixAdorner'),
     id,
     label: 'Suffix',
-    setValue: onChange('suffixAdorner')
+    setValue: onChange('suffixAdorner'),
+    singleLine: true,
+    variables
   });
 }
 
@@ -9013,7 +9160,7 @@ function ReadonlyEntry(props) {
       component: Readonly,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$5
     });
   }
   return entries;
@@ -9057,7 +9204,7 @@ function ConditionEntry(props) {
     component: Condition,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$5
   }];
 }
 function Condition(props) {
@@ -9095,6 +9242,55 @@ function Condition(props) {
   });
 }
 
+function ValuesExpressionEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  return [{
+    id: id + '-expression',
+    component: ValuesExpression,
+    label: 'Values expression',
+    isEdited: isEdited$5,
+    editField,
+    field
+  }];
+}
+function ValuesExpression(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.EXPRESSION];
+  const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
+  const description = jsxs("div", {
+    children: ["Define an expression to populate the options from.", jsx("br", {}), jsx("br", {}), "The expression may result in an array of simple values or alternatively follow this schema:", jsx("pre", {
+      children: jsx("code", {
+        children: schema
+      })
+    })]
+  });
+  const getValue = () => get(field, path, '');
+  const setValue = value => editField(field, path, value || '');
+  return FeelEntry({
+    debounce,
+    description,
+    element: field,
+    feel: 'required',
+    getValue,
+    id,
+    label: 'Options expression',
+    setValue,
+    variables
+  });
+}
+
 function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
     field,
@@ -9239,14 +9435,14 @@ function ValidationGroup(field, editField) {
       component: MinLength,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     }, {
       id: 'maxLength',
       component: MaxLength,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     });
   }
@@ -9266,14 +9462,14 @@ function ValidationGroup(field, editField) {
       component: Min,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     }, {
       id: 'max',
       component: Max,
       getValue,
       field,
-      isEdited: isEdited$4,
+      isEdited: isEdited$5,
       onChange
     });
   }
@@ -9306,14 +9502,19 @@ function MinLength(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('minLength'),
     id,
     label: 'Minimum length',
     min: 0,
-    setValue: onChange('minLength')
+    setValue: onChange('minLength'),
+    variables
   });
 }
 function MaxLength(props) {
@@ -9324,14 +9525,19 @@ function MaxLength(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     getValue: getValue('maxLength'),
     id,
     label: 'Maximum length',
     min: 0,
-    setValue: onChange('maxLength')
+    setValue: onChange('maxLength'),
+    variables
   });
 }
 function Pattern(props) {
@@ -9359,14 +9565,19 @@ function Min(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Minimum',
     step: 'any',
     getValue: getValue('min'),
-    setValue: onChange('min')
+    setValue: onChange('min'),
+    variables
   });
 }
 function Max(props) {
@@ -9377,14 +9588,19 @@ function Max(props) {
     onChange
   } = props;
   const debounce = useService('debounce');
-  return NumberFieldEntry({
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  return FeelNumberEntry({
     debounce,
     element: field,
+    feel: 'optional',
     id,
     label: 'Maximum',
     step: 'any',
     getValue: getValue('max'),
-    setValue: onChange('max')
+    setValue: onChange('max'),
+    variables
   });
 }
 function ValidationType(props) {
@@ -9458,6 +9674,17 @@ function ValuesGroups(field, editField) {
         id: staticValuesId
       })
     });
+  } else if (valuesSource === VALUES_SOURCES.EXPRESSION) {
+    const valuesExpressionId = `${fieldId}-valuesExpression`;
+    groups.push({
+      id: valuesExpressionId,
+      label: 'Options expression',
+      component: Group,
+      entries: ValuesExpressionEntry({
+        ...context,
+        id: valuesExpressionId
+      })
+    });
   }
   return groups;
 }
@@ -9617,47 +9844,37 @@ function FormPropertiesPanel(props) {
   } = props;
   const formEditor = injector.get('formEditor');
   const modeling = injector.get('modeling');
-  const selection = injector.get('selection');
-  const {
-    schema
-  } = formEditor._getState();
+  const selectionModule = injector.get('selection');
   const [state, setState] = useState({
-    selectedFormField: selection.get() || schema
+    selectedFormField: selectionModule.get() || formEditor._getState().schema
   });
-  const _update = field => {
+  const selectedFormField = state.selectedFormField;
+  const refresh = useCallback(field => {
+    // TODO(skaiir): rework state management, re-rendering the whole properties panel is not the way to go
+    // https://github.com/bpmn-io/form-js/issues/686
     setState({
-      ...state,
-      selectedFormField: field
+      selectedFormField: selectionModule.get() || formEditor._getState().schema
     });
 
     // notify interested parties on property panel updates
     eventBus.fire('propertiesPanel.updated', {
       formField: field
     });
-  };
+  }, [eventBus, formEditor, selectionModule]);
   useLayoutEffect(() => {
-    function onSelectionChange(event) {
-      _update(event.selection || schema);
-    }
-    eventBus.on('selection.changed', onSelectionChange);
-    return () => {
-      eventBus.off('selection.changed', onSelectionChange);
-    };
-  }, []);
-  useLayoutEffect(() => {
-    const onFieldChanged = () => {
-      /**
-       * TODO(pinussilvestrus): update with actual updated element,
-       * once we have a proper updater/change support
-       */
-      _update(selection.get() || schema);
-    };
-    eventBus.on('changed', onFieldChanged);
+    /**
+     * TODO(pinussilvestrus): update with actual updated element,
+     * once we have a proper updater/change support
+     */
+    eventBus.on('changed', refresh);
+    eventBus.on('import.done', refresh);
+    eventBus.on('selection.changed', refresh);
     return () => {
-      eventBus.off('changed', onFieldChanged);
+      eventBus.off('changed', refresh);
+      eventBus.off('import.done', refresh);
+      eventBus.off('selection.changed', refresh);
     };
-  }, []);
-  const selectedFormField = state.selectedFormField;
+  }, [eventBus, refresh]);
   const getService = (type, strict = true) => injector.get(type, strict);
   const propertiesPanelContext = {
     getService