@bpmn-io/form-js-editor 1.3.3 → 1.4.1

package/dist/index.cjs

@@ -38,7 +38,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var focusTrap__namespace = /*#__PURE__*/_interopNamespaceDefault(focusTrap);
 
 var FN_REF = '__fn';
-var DEFAULT_PRIORITY$2 = 1000;
+var DEFAULT_PRIORITY$3 = 1000;
 var slice = Array.prototype.slice;
 
 /**
@@ -183,7 +183,7 @@ EventBus.prototype.on = function (events, priority, callback, that) {
   if (minDash.isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$2;
+    priority = DEFAULT_PRIORITY$3;
   }
   if (!minDash.isNumber(priority)) {
     throw new Error('priority must be a number');
@@ -222,7 +222,7 @@ EventBus.prototype.once = function (events, priority, callback, that) {
   if (minDash.isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$2;
+    priority = DEFAULT_PRIORITY$3;
   }
   if (!minDash.isNumber(priority)) {
     throw new Error('priority must be a number');
@@ -537,10 +537,10 @@ function invokeFunction(fn, args) {
   return fn.apply(null, args);
 }
 
-/**
- * A factory to create a configurable debouncer.
- *
- * @param {number|boolean} [config=true]
+/**
+ * A factory to create a configurable debouncer.
+ *
+ * @param {number|boolean} [config=true]
  */
 function DebounceFactory(config = true) {
   const timeout = typeof config === 'number' ? config : config ? 300 : 0;
@@ -553,11 +553,11 @@ function DebounceFactory(config = true) {
 DebounceFactory.$inject = ['config.debounce'];
 
 class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
-  /**
-   * Updates a form fields id.
-   *
-   * @param {Object} formField
-   * @param {string} newId
+  /**
+   * Updates a form fields id.
+   *
+   * @param {Object} formField
+   * @param {string} newId
    */
   updateId(formField, newId) {
     this._validateId(newId);
@@ -578,13 +578,13 @@ class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
     }
   }
 
-  /**
-   * Validate the suitability of the given id and signals a problem
-   * with an exception.
-   *
-   * @param {string} id
-   *
-   * @throws {Error} if id is empty or already assigned
+  /**
+   * Validate the suitability of the given id and signals a problem
+   * with an exception.
+   *
+   * @param {string} id
+   *
+   * @throws {Error} if id is empty or already assigned
    */
   _validateId(id) {
     if (!id) {
@@ -601,11 +601,11 @@ const MAX_COLUMNS = 16;
 const MIN_COLUMNS = 2;
 const MAX_FIELDS_PER_ROW = 4;
 class FormLayoutValidator {
-  /**
-   * @constructor
-   *
-   * @param { import('./FormLayouter').default } formLayouter
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   *
+   * @param { import('./FormLayouter').default } formLayouter
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formLayouter, formFieldRegistry) {
     this._formLayouter = formLayouter;
@@ -676,21 +676,21 @@ function editorFormFieldClasses(type, {
   });
 }
 
-/**
- * Add a dragger that calls back the passed function with
- * { event, delta } on drag.
- *
- * @example
- *
- * function dragMove(event, delta) {
- *   // we are dragging (!!)
- * }
- *
- * domElement.addEventListener('dragstart', dragger(dragMove));
- *
- * @param {Function} fn
- *
- * @return {Function} drag start callback function
+/**
+ * Add a dragger that calls back the passed function with
+ * { event, delta } on drag.
+ *
+ * @example
+ *
+ * function dragMove(event, delta) {
+ *   // we are dragging (!!)
+ * }
+ *
+ * domElement.addEventListener('dragstart', dragger(dragMove));
+ *
+ * @param {Function} fn
+ *
+ * @return {Function} drag start callback function
  */
 function createDragger$1(fn) {
   let self;
@@ -731,12 +731,12 @@ function createDragger$1(fn) {
   return onDragStart;
 }
 
-/**
- * Throttle function call according UI update cycle.
- *
- * @param  {Function} fn
- *
- * @return {Function} throttled fn
+/**
+ * Throttle function call according UI update cycle.
+ *
+ * @param  {Function} fn
+ *
+ * @return {Function} throttled fn
  */
 function throttle(fn) {
   let active = false;
@@ -770,11 +770,11 @@ const DragAndDropContext = preact.createContext({
 });
 var DragAndDropContext$1 = DragAndDropContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService$1(type, strict) {}
 const FormEditorContext = preact.createContext({
@@ -789,6 +789,27 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
+function usePrevious$1(value) {
+  const ref = hooks.useRef();
+  hooks.useEffect(() => ref.current = value);
+  return ref.current;
+}
+
+function useDebounce(fn, dependencies = []) {
+  const debounce = useService$1('debounce');
+  const callback = hooks.useMemo(() => {
+    return debounce(fn);
+  }, dependencies);
+
+  // cleanup async side-effect if callback #flush is provided.
+  hooks.useEffect(() => {
+    return () => {
+      typeof callback.flush === 'function' && callback.flush();
+    };
+  }, [callback]);
+  return callback;
+}
+
 var _path$4;
 function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
 var SvgClose = function SvgClose(props) {
@@ -1124,23 +1145,23 @@ var Slot = (props => {
   return fillsAndSeparators;
 });
 
-/**
- * Creates a Fragment for a fill.
- *
- * @param {Object} fill Fill to be rendered
- * @returns {Object} Preact Fragment containing fill's children
+/**
+ * Creates a Fragment for a fill.
+ *
+ * @param {Object} fill Fill to be rendered
+ * @returns {Object} Preact Fragment containing fill's children
  */
 const FillFragment = fill => jsxRuntime.jsx(preact.Fragment, {
   children: fill.children
 }, fill.id);
 
-/**
- * Creates an array of fills, with separators inserted between groups.
- *
- * @param {Array} groups Groups of fills
- * @param {Function} fillRenderer Function to create a fill
- * @param {Function} separatorRenderer Function to create a separator
- * @returns {Array} Array of fills and separators
+/**
+ * Creates an array of fills, with separators inserted between groups.
+ *
+ * @param {Array} groups Groups of fills
+ * @param {Function} fillRenderer Function to create a fill
+ * @param {Function} separatorRenderer Function to create a separator
+ * @returns {Array} Array of fills and separators
  */
 const buildFills = (groups, fillRenderer, separatorRenderer) => {
   const result = [];
@@ -1158,8 +1179,8 @@ const buildFills = (groups, fillRenderer, separatorRenderer) => {
   return result;
 };
 
-/**
- * Groups fills by group name property.
+/**
+ * Groups fills by group name property.
  */
 const _groupByGroupName = fills => {
   const groups = [];
@@ -1179,8 +1200,8 @@ const _groupByGroupName = fills => {
   return Object.keys(groupsById).sort().map(id => groupsById[id]);
 };
 
-/**
- * Compares fills by priority.
+/**
+ * Compares fills by priority.
  */
 const _comparePriority = (a, b) => {
   return (b.priority || 0) - (a.priority || 0);
@@ -1211,17 +1232,63 @@ var SlotFillRoot = (props => {
   });
 });
 
-const PALETTE_ENTRIES = formJsViewer.formFields.filter(({
-  config: fieldConfig
-}) => fieldConfig.type !== 'default').map(({
-  config: fieldConfig
-}) => {
-  return {
-    label: fieldConfig.label,
-    type: fieldConfig.type,
-    group: fieldConfig.group
+function PaletteEntry(props) {
+  const {
+    type,
+    label,
+    icon,
+    iconUrl,
+    getPaletteIcon
+  } = props;
+  const modeling = useService$1('modeling');
+  const formEditor = useService$1('formEditor');
+  const Icon = getPaletteIcon({
+    icon,
+    iconUrl,
+    label,
+    type
+  });
+  const onKeyDown = event => {
+    if (event.code === 'Enter') {
+      const {
+        fieldType: type
+      } = event.target.dataset;
+      const {
+        schema
+      } = formEditor._getState();
+
+      // add new form field to last position
+      modeling.addFormField({
+        type
+      }, schema, schema.components.length);
+    }
   };
-});
+  return jsxRuntime.jsxs("button", {
+    class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
+    "data-field-type": type,
+    title: `Create ${getIndefiniteArticle(type)} ${label} element`,
+    onKeyDown: onKeyDown,
+    children: [Icon ? jsxRuntime.jsx(Icon, {
+      class: "fjs-palette-field-icon",
+      width: "36",
+      height: "36",
+      viewBox: "0 0 54 54"
+    }) : null, jsxRuntime.jsx("span", {
+      class: "fjs-palette-field-text",
+      children: label
+    })]
+  });
+}
+
+// helpers ///////////
+
+function getIndefiniteArticle(type) {
+  if (['image'].includes(type)) {
+    return 'an';
+  }
+  return 'a';
+}
+
 const PALETTE_GROUPS = [{
   label: 'Basic input',
   id: 'basic-input'
@@ -1236,10 +1303,12 @@ const PALETTE_GROUPS = [{
   id: 'action'
 }];
 function Palette(props) {
-  const [entries, setEntries] = hooks.useState(PALETTE_ENTRIES);
+  const formFields = useService$1('formFields');
+  const initialPaletteEntries = hooks.useRef(collectPaletteEntries(formFields));
+  const [paletteEntries, setPaletteEntries] = hooks.useState(initialPaletteEntries.current);
   const [searchTerm, setSearchTerm] = hooks.useState('');
   const inputRef = hooks.useRef();
-  const groups = groupEntries(entries);
+  const groups = groupEntries(paletteEntries);
   const simplifyString = hooks.useCallback(str => {
     return str.toLowerCase().replace(/\s+/g, '');
   }, []);
@@ -1255,8 +1324,8 @@ function Palette(props) {
 
   // filter entries on search change
   hooks.useEffect(() => {
-    const entries = PALETTE_ENTRIES.filter(filter);
-    setEntries(entries);
+    const entries = initialPaletteEntries.current.filter(filter);
+    setPaletteEntries(entries);
   }, [filter, searchTerm]);
   const handleInput = hooks.useCallback(event => {
     setSearchTerm(() => event.target.value);
@@ -1303,24 +1372,10 @@ function Palette(props) {
           children: label
         }), jsxRuntime.jsx("div", {
           class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
-          children: entries.map(({
-            label,
-            type
-          }) => {
-            const Icon = formJsViewer.iconsByType(type);
-            return jsxRuntime.jsxs("div", {
-              class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
-              "data-field-type": type,
-              title: `Create ${getIndefiniteArticle(type)} ${label} element`,
-              children: [Icon ? jsxRuntime.jsx(Icon, {
-                class: "fjs-palette-field-icon",
-                width: "36",
-                height: "36",
-                viewBox: "0 0 54 54"
-              }) : null, jsxRuntime.jsx("span", {
-                class: "fjs-palette-field-text",
-                children: label
-              })]
+          children: entries.map(entry => {
+            return jsxRuntime.jsx(PaletteEntry, {
+              getPaletteIcon: getPaletteIcon,
+              ...entry
             });
           })
         })]
@@ -1360,11 +1415,59 @@ function groupEntries(entries) {
   });
   return groups.filter(g => g.entries.length);
 }
-function getIndefiniteArticle(type) {
-  if (['image'].includes(type)) {
-    return 'an';
+
+/**
+ * Returns a list of palette entries.
+ *
+ * @param {FormFields} formFields
+ * @returns {Array<PaletteEntry>}
+ */
+function collectPaletteEntries(formFields) {
+  return Object.entries(formFields._formFields).map(([type, formField]) => {
+    const {
+      config: fieldConfig
+    } = formField;
+    return {
+      label: fieldConfig.label,
+      type: type,
+      group: fieldConfig.group,
+      icon: fieldConfig.icon,
+      iconUrl: fieldConfig.iconUrl
+    };
+  }).filter(({
+    type
+  }) => type !== 'default');
+}
+
+/**
+ * There are various options to specify an icon for a palette entry.
+ *
+ * a) via `iconUrl` property in a form field config
+ * b) via `icon` property in a form field config
+ * c) via statically defined iconsByType (fallback)
+ */
+function getPaletteIcon(entry) {
+  const {
+    icon,
+    iconUrl,
+    type,
+    label
+  } = entry;
+  let Icon;
+  if (iconUrl) {
+    Icon = () => jsxRuntime.jsx("img", {
+      class: "fjs-field-icon-image",
+      width: 36,
+      style: {
+        margin: 'auto'
+      },
+      alt: label,
+      src: formJsViewer.sanitizeImageSource(iconUrl)
+    });
+  } else {
+    Icon = icon || formJsViewer.iconsByType(type);
   }
-  return 'a';
+  return Icon;
 }
 
 var InjectedRendersRoot = (() => {
@@ -1408,20 +1511,20 @@ const DRAG_NO_DROP_CLS = 'fjs-no-drop';
 const DRAG_NO_MOVE_CLS = 'fjs-no-move';
 const ERROR_DROP_CLS = 'fjs-error-drop';
 
-/**
- * @typedef { { id: String, components: Array<any> } } FormRow
+/**
+ * @typedef { { id: String, components: Array<any> } } FormRow
  */
 
 class Dragging {
-  /**
-   * @constructor
-   *
-   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('../../core/FormLayouter').default } formLayouter
-   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
-   * @param { import('../../core/EventBus').default } eventBus
-   * @param { import('../modeling/Modeling').default } modeling
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+  /**
+   * @constructor
+   *
+   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('../../core/FormLayouter').default } formLayouter
+   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
+   * @param { import('../../core/EventBus').default } eventBus
+   * @param { import('../modeling/Modeling').default } modeling
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
   constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling, pathRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -1432,13 +1535,13 @@ class Dragging {
     this._pathRegistry = pathRegistry;
   }
 
-  /**
-   * Calculcates position in form schema given the dropped place.
-   *
-   * @param { FormRow } targetRow
-   * @param { any } targetFormField
-   * @param { HTMLElement } sibling
-   * @returns { number }
+  /**
+   * Calculcates position in form schema given the dropped place.
+   *
+   * @param { FormRow } targetRow
+   * @param { any } targetFormField
+   * @param { HTMLElement } sibling
+   * @returns { number }
    */
   getTargetIndex(targetRow, targetFormField, sibling) {
     /** @type HTMLElement */
@@ -1579,8 +1682,8 @@ class Dragging {
     }
   }
 
-  /**
-   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+  /**
+   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
    */
   createDragulaInstance(options) {
     const {
@@ -1887,6 +1990,7 @@ function Element$1(props) {
   const eventBus = useService$1('eventBus'),
     formEditor = useService$1('formEditor'),
     formFieldRegistry = useService$1('formFieldRegistry'),
+    formFields = useService$1('formFields'),
     modeling = useService$1('modeling'),
     selection = useService$1('selection');
   const {
@@ -1972,6 +2076,7 @@ function Element$1(props) {
       field: field
     }), jsxRuntime.jsx(ContextPad, {
       children: selection.isSelected(field) && field.type !== 'default' ? jsxRuntime.jsx("button", {
+        title: getRemoveButtonTitle(field, formFields),
         class: "fjs-context-pad-item",
         onClick: onRemove,
         children: jsxRuntime.jsx(DeleteIcon$1, {})
@@ -1994,7 +2099,7 @@ function DebugColumns(props) {
     return null;
   }
   return jsxRuntime.jsx("div", {
-    style: "width: fit-content;\r padding: 2px 6px;\r height: 16px;\r background: var(--color-blue-205-100-95);\r display: flex;\r justify-content: center;\r align-items: center;\r position: absolute;\r bottom: -2px;\r z-index: 2;\r font-size: 10px;\r right: 3px;",
+    style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
     class: "fjs-debug-columns",
     children: (field.layout || {}).columns || 'auto'
   });
@@ -2134,6 +2239,9 @@ function FormEditor$1(props) {
 
   // fire event after render to notify interested parties
   hooks.useEffect(() => {
+    eventBus.fire('rendered');
+
+    // keep deprecated event to ensure backward compatibility
     eventBus.fire('formEditor.rendered');
   }, []);
   const [hoveredId, setHoveredId] = hooks.useState(null);
@@ -2229,15 +2337,20 @@ function CreatePreview(props) {
   const {
     drake
   } = hooks.useContext(DragAndDropContext$1);
+  const formFields = useService$1('formFields');
   function handleCloned(clone, original, type) {
     const fieldType = clone.dataset.fieldType;
 
     // (1) field preview
     if (fieldType) {
+      const paletteEntry = findPaletteEntry(fieldType, formFields);
+      if (!paletteEntry) {
+        return;
+      }
       const {
         label
-      } = findPaletteEntry(fieldType);
-      const Icon = formJsViewer.iconsByType(fieldType);
+      } = paletteEntry;
+      const Icon = getPaletteIcon(paletteEntry);
       clone.innerHTML = '';
       clone.class = 'gu-mirror';
       clone.classList.add('fjs-field-preview-container');
@@ -2278,12 +2391,19 @@ function CreatePreview(props) {
 
 // helper //////
 
-function findPaletteEntry(type) {
-  return PALETTE_ENTRIES.find(entry => entry.type === type);
+function findPaletteEntry(type, formFields) {
+  return collectPaletteEntries(formFields).find(entry => entry.type === type);
 }
 function defaultPropertiesPanel(propertiesPanelConfig) {
   return !(propertiesPanelConfig && propertiesPanelConfig.parent);
 }
+function getRemoveButtonTitle(formField, formFields) {
+  const entry = findPaletteEntry(formField.type, formFields);
+  if (!entry) {
+    return 'Remove form field';
+  }
+  return `Remove ${entry.label}`;
+}
 
 class Renderer {
   constructor(renderConfig, eventBus, formEditor, injector) {
@@ -2694,7 +2814,7 @@ function isRedo(event) {
 var KEYDOWN_EVENT = 'keyboard.keydown',
   KEYUP_EVENT = 'keyboard.keyup';
 var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
-var DEFAULT_PRIORITY$1 = 1000;
+var DEFAULT_PRIORITY$2 = 1000;
 
 /**
  * A keyboard abstraction that may be activated and
@@ -2827,7 +2947,7 @@ Keyboard.prototype.addListener = function (priority, listener, type) {
   if (minDash.isFunction(priority)) {
     type = listener;
     listener = priority;
-    priority = DEFAULT_PRIORITY$1;
+    priority = DEFAULT_PRIORITY$2;
   }
   this._eventBus.on(type || KEYDOWN_EVENT, priority, listener);
 };
@@ -3065,10 +3185,10 @@ function updateRow(formField, rowId) {
 }
 
 class AddFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3129,10 +3249,10 @@ class AddFormFieldHandler {
 AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class EditFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3195,11 +3315,11 @@ class EditFormFieldHandler {
 EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class MoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
   constructor(formEditor, formFieldRegistry, pathRegistry) {
     this._formEditor = formEditor;
@@ -3304,10 +3424,10 @@ class MoveFormFieldHandler {
 MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry'];
 
 class RemoveFormFieldHandler {
-  /**
-   * @constructor
-   * @param { import('../../../FormEditor').default } formEditor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../FormEditor').default } formEditor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formEditor, formFieldRegistry) {
     this._formEditor = formEditor;
@@ -3367,9 +3487,9 @@ class RemoveFormFieldHandler {
 RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
 class UpdateIdClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formFieldRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -3402,9 +3522,9 @@ class UpdateIdClaimHandler {
 UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 
 class UpdateKeyClaimHandler {
-  /**
-   * @constructor
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+  /**
+   * @constructor
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
   constructor(pathRegistry) {
     this._pathRegistry = pathRegistry;
@@ -3445,9 +3565,9 @@ class UpdateKeyClaimHandler {
 UpdateKeyClaimHandler.$inject = ['pathRegistry'];
 
 class UpdatePathClaimHandler {
-  /**
-   * @constructor
-   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+  /**
+   * @constructor
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
   constructor(pathRegistry) {
     this._pathRegistry = pathRegistry;
@@ -3645,7 +3765,7 @@ Modeling.$inject = ['commandStack', 'eventBus', 'formEditor', 'formFieldRegistry
  * @typedef { (context: CommandContext) => void } ComposeHandlerFunction
  */
 
-var DEFAULT_PRIORITY = 1000;
+var DEFAULT_PRIORITY$1 = 1000;
 
 /**
  * A utility that can be used to plug into the command execution for
@@ -3706,7 +3826,7 @@ CommandInterceptor.prototype.on = function (events, hook, priority, handlerFn, u
     that = unwrap;
     unwrap = handlerFn;
     handlerFn = priority;
-    priority = DEFAULT_PRIORITY;
+    priority = DEFAULT_PRIORITY$1;
   }
   if (minDash.isObject(unwrap)) {
     that = unwrap;
@@ -4009,8 +4129,8 @@ class ValidateBehavior extends CommandInterceptor {
   constructor(eventBus) {
     super(eventBus);
 
-    /**
-     * Remove custom validation if <validationType> is about to be added.
+    /**
+     * Remove custom validation if <validationType> is about to be added.
      */
     this.preExecute('formField.edit', function (context) {
       const {
@@ -4033,12 +4153,61 @@ class ValidateBehavior extends CommandInterceptor {
 }
 ValidateBehavior.$inject = ['eventBus'];
 
+class ValuesSourceBehavior extends CommandInterceptor {
+  constructor(eventBus) {
+    super(eventBus);
+
+    /**
+     * Cleanup properties on changing the values source.
+     *
+     * 1) Remove other sources, e.g. set `values` => remove `valuesKey` and `valuesExpression`
+     * 2) Remove default values for all other values sources
+     */
+    this.preExecute('formField.edit', function (context) {
+      const {
+        properties
+      } = context;
+      const newProperties = {};
+      if (!isValuesSourceUpdate(properties)) {
+        return;
+      }
+
+      // clean up value sources that are not to going to be set
+      Object.values(formJsViewer.VALUES_SOURCES).forEach(source => {
+        const path = formJsViewer.VALUES_SOURCES_PATHS[source];
+        if (minDash.get(properties, path) == undefined) {
+          newProperties[formJsViewer.VALUES_SOURCES_PATHS[source]] = undefined;
+        }
+      });
+
+      // clean up default value
+      if (minDash.get(properties, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.EXPRESSION]) !== undefined || minDash.get(properties, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.INPUT]) !== undefined) {
+        newProperties['defaultValue'] = undefined;
+      }
+      context.properties = {
+        ...properties,
+        ...newProperties
+      };
+    }, true);
+  }
+}
+ValuesSourceBehavior.$inject = ['eventBus'];
+
+// helper ///////////////////
+
+function isValuesSourceUpdate(properties) {
+  return Object.values(formJsViewer.VALUES_SOURCES_PATHS).some(path => {
+    return minDash.get(properties, path) !== undefined;
+  });
+}
+
 var behaviorModule = {
-  __init__: ['idBehavior', 'keyBehavior', 'pathBehavior', 'validateBehavior'],
+  __init__: ['idBehavior', 'keyBehavior', 'pathBehavior', 'validateBehavior', 'valuesSourceBehavior'],
   idBehavior: ['type', IdBehavior],
   keyBehavior: ['type', KeyBehavior],
   pathBehavior: ['type', PathBehavior],
-  validateBehavior: ['type', ValidateBehavior]
+  validateBehavior: ['type', ValidateBehavior],
+  valuesSourceBehavior: ['type', ValuesSourceBehavior]
 };
 
 /**
@@ -4590,22 +4759,22 @@ var SelectionModule = {
   selectionBehavior: ['type', SelectionBehavior]
 };
 
-/**
- * Base class for sectionable UI modules.
- *
- * @property {EventBus} _eventBus - EventBus instance used for event handling.
- * @property {string} managerType - Type of the render manager. Used to form event names.
- *
- * @class SectionModuleBase
+/**
+ * Base class for sectionable UI modules.
+ *
+ * @property {EventBus} _eventBus - EventBus instance used for event handling.
+ * @property {string} managerType - Type of the render manager. Used to form event names.
+ *
+ * @class SectionModuleBase
  */
 class SectionModuleBase {
-  /**
-   * Create a SectionModuleBase instance.
-   *
-   * @param {any} eventBus - The EventBus instance used for event handling.
-   * @param {string} sectionKey - The type of render manager. Used to form event names.
-   *
-   * @constructor
+  /**
+   * Create a SectionModuleBase instance.
+   *
+   * @param {any} eventBus - The EventBus instance used for event handling.
+   * @param {string} sectionKey - The type of render manager. Used to form event names.
+   *
+   * @constructor
    */
   constructor(eventBus, sectionKey) {
     this._eventBus = eventBus;
@@ -4618,10 +4787,10 @@ class SectionModuleBase {
     });
   }
 
-  /**
-   * Attach the managed section to a parent node.
-   *
-   * @param {HTMLElement} container - The parent node to attach to.
+  /**
+   * Attach the managed section to a parent node.
+   *
+   * @param {HTMLElement} container - The parent node to attach to.
    */
   attachTo(container) {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
@@ -4629,22 +4798,22 @@ class SectionModuleBase {
     }));
   }
 
-  /**
-   * Detach the managed section from its parent node.
+  /**
+   * Detach the managed section from its parent node.
    */
   detach() {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.detach`));
   }
 
-  /**
-   * Reset the managed section to its initial state.
+  /**
+   * Reset the managed section to its initial state.
    */
   reset() {
     this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
   }
 
-  /**
-   * Circumvents timing issues.
+  /**
+   * Circumvents timing issues.
    */
   _onceSectionRendered(callback) {
     if (this.isSectionRendered) {
@@ -4767,6 +4936,29 @@ FeelIcon$1.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
+var HelpIcon = function HelpIcon(props) {
+  return jsxRuntime.jsxs("svg", {
+    ...props,
+    children: [jsxRuntime.jsx("path", {
+      d: "M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2Zm0 26a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z"
+    }), jsxRuntime.jsx("circle", {
+      cx: "16",
+      cy: "23.5",
+      r: "1.5"
+    }), jsxRuntime.jsx("path", {
+      d: "M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9Z"
+    }), jsxRuntime.jsx("path", {
+      style: {
+        fill: "none"
+      },
+      d: "M0 0h32v32H0z"
+    })]
+  });
+};
+HelpIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
 function Header(props) {
   const {
     element,
@@ -5316,6 +5508,7 @@ function Group(props) {
           edited: edited,
           hasErrors: hasErrors
         }), jsxRuntime.jsx("button", {
+          type: "button",
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
@@ -5496,6 +5689,7 @@ const CodeEditor$1 = React.forwardRef((props, ref) => {
       ref: inputRef,
       onClick: handleClick
     }), jsxRuntime.jsx("button", {
+      type: "button",
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen('feelers'),
@@ -5616,6 +5810,7 @@ const CodeEditor = React.forwardRef((props, ref) => {
       ref: inputRef,
       onClick: handleClick
     }), jsxRuntime.jsx("button", {
+      type: "button",
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen(),
@@ -5660,6 +5855,7 @@ function FeelIcon(props) {
     }
   };
   return jsxRuntime.jsx("button", {
+    type: "button",
     class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
     disabled: feel === 'required' || disabled,
@@ -5778,6 +5974,7 @@ function PopupComponent(props, globalRef) {
   const focusTrapRef = hooks.useRef(null);
   const localRef = hooks.useRef(null);
   const popupRef = globalRef || localRef;
+  const containerNode = hooks.useMemo(() => getContainerNode(container), [container]);
   const handleKeydown = event => {
     // do not allow keyboard events to bubble
     event.stopPropagation();
@@ -5837,7 +6034,7 @@ function PopupComponent(props, globalRef) {
     class: classnames('bio-properties-panel-popup', className),
     style: style,
     children: props.children
-  }), container || document.body);
+  }), containerNode || document.body);
 }
 const Popup = React.forwardRef(PopupComponent);
 Popup.Title = Title;
@@ -5957,6 +6154,12 @@ function cancel(event) {
   event.preventDefault();
   event.stopPropagation();
 }
+function getContainerNode(node) {
+  if (typeof node === 'string') {
+    return minDom.query(node);
+  }
+  return node;
+}
 const FEEL_POPUP_WIDTH = 700;
 const FEEL_POPUP_HEIGHT = 250;
 
@@ -6099,6 +6302,12 @@ function FeelPopupComponent(props) {
       domNode: popupRef.current
     });
   }, []);
+  hooks.useEffect(() => {
+    // Set focus on editor when popup is opened
+    if (editorRef.current) {
+      editorRef.current.focus();
+    }
+  }, [editorRef]);
   return jsxRuntime.jsxs(Popup, {
     container: container,
     className: "bio-properties-panel-feel-popup",
@@ -6117,10 +6326,21 @@ function FeelPopupComponent(props) {
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [jsxRuntime.jsx(Popup.Title, {
+    children: [jsxRuntime.jsxs(Popup.Title, {
       title: title,
       emit: emit,
-      draggable: true
+      draggable: true,
+      children: [type === 'feel' && jsxRuntime.jsxs("a", {
+        href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
+        target: "_blank",
+        class: "bio-properties-panel-feel-popup__title-link",
+        children: ["Learn FEEL expressions", jsxRuntime.jsx(HelpIcon, {})]
+      }), type === 'feelers' && jsxRuntime.jsxs("a", {
+        href: "https://docs.camunda.io/docs/components/modeler/forms/configuration/forms-config-templating-syntax/",
+        target: "_blank",
+        class: "bio-properties-panel-feel-popup__title-link",
+        children: ["Learn templating", jsxRuntime.jsx(HelpIcon, {})]
+      })]
     }), jsxRuntime.jsx(Popup.Body, {
       children: jsxRuntime.jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
@@ -6152,6 +6372,7 @@ function FeelPopupComponent(props) {
       })
     }), jsxRuntime.jsx(Popup.Footer, {
       children: jsxRuntime.jsx("button", {
+        type: "button",
         onClick: onClose,
         title: "Close pop-up editor",
         class: "bio-properties-panel-feel-popup__close-btn",
@@ -6504,7 +6725,7 @@ function FeelTextfield(props) {
   }, [onInput, debounce]);
   const setLocalValue = newValue => {
     _setLocalValue(newValue);
-    if (!newValue || newValue === '=') {
+    if (typeof newValue === 'undefined' || newValue === '' || newValue === '=') {
       handleInputCallback(undefined);
     } else {
       handleInputCallback(newValue);
@@ -7393,12 +7614,14 @@ function CollapsibleEntry(props) {
         class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
       }), jsxRuntime.jsx("button", {
+        type: "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", {
+        type: "button",
         title: "Delete item",
         class: "bio-properties-panel-remove-entry",
         onClick: remove,
@@ -7600,6 +7823,7 @@ function ListGroup(props) {
       }), jsxRuntime.jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
         children: [add ? jsxRuntime.jsxs("button", {
+          type: "button",
           title: "Create new list item",
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
           onClick: handleAddClick,
@@ -7612,6 +7836,7 @@ function ListGroup(props) {
           class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
         }) : null, hasItems ? jsxRuntime.jsx("button", {
+          type: "button",
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
@@ -8266,11 +8491,11 @@ var index = {
   feelPopup: ['type', FeelPopupModule]
 };
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const PropertiesPanelContext = preact.createContext({
@@ -8308,25 +8533,43 @@ function isValidDotPath(path) {
 }
 const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea'];
 const VALUES_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
+function hasEntryConfigured(formFieldDefinition, entryId) {
+  const {
+    propertiesPanelEntries = []
+  } = formFieldDefinition;
+  if (!propertiesPanelEntries.length) {
+    return false;
+  }
+  return propertiesPanelEntries.some(id => id === entryId);
+}
+function hasValuesGroupsConfigured(formFieldDefinition) {
+  const {
+    propertiesPanelEntries = []
+  } = formFieldDefinition;
+  if (!propertiesPanelEntries.length) {
+    return false;
+  }
+  return propertiesPanelEntries.some(id => id === 'values');
+}
+
+function useService (type, strict) {
+  const {
+    getService
+  } = hooks.useContext(FormPropertiesPanelContext);
+  return getService(type, strict);
+}
+
+/**
+ * Retrieve list of variables from the form schema.
+ *
+ * @returns { string[] } list of variables used in form schema
+ */
+function useVariables() {
+  const form = useService('formEditor');
+  const schema = form.getSchema();
+  return formJsViewer.getSchemaVariables(schema);
+}
 
-const labelsByType = {
-  button: 'BUTTON',
-  checkbox: 'CHECKBOX',
-  checklist: 'CHECKLIST',
-  columns: 'COLUMNS',
-  default: 'FORM',
-  datetime: 'DATETIME',
-  group: 'GROUP',
-  image: 'IMAGE VIEW',
-  number: 'NUMBER',
-  radio: 'RADIO',
-  select: 'SELECT',
-  spacer: 'SPACER',
-  taglist: 'TAGLIST',
-  text: 'TEXT VIEW',
-  textfield: 'TEXT FIELD',
-  textarea: 'TEXT AREA'
-};
 const PropertiesPanelHeaderProvider = {
   getElementLabel: field => {
     const {
@@ -8350,25 +8593,43 @@ const PropertiesPanelHeaderProvider = {
     const {
       type
     } = field;
-    const Icon = formJsViewer.iconsByType(type);
+
+    // @Note: We know that we are inside the properties panel context,
+    // so we can savely use the hook here.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const fieldDefinition = useService('formFields').get(type).config;
+    const Icon = fieldDefinition.icon || formJsViewer.iconsByType(type);
     if (Icon) {
       return () => jsxRuntime.jsx(Icon, {
         width: "36",
         height: "36",
         viewBox: "0 0 54 54"
       });
+    } else if (fieldDefinition.iconUrl) {
+      return getPaletteIcon({
+        iconUrl: fieldDefinition.iconUrl,
+        label: fieldDefinition.label
+      });
     }
   },
   getTypeLabel: field => {
     const {
       type
     } = field;
-    return labelsByType[type];
+    if (type === 'default') {
+      return 'Form';
+    }
+
+    // @Note: We know that we are inside the properties panel context,
+    // so we can savely use the hook here.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const fieldDefinition = useService('formFields').get(type).config;
+    return fieldDefinition.label || type;
   }
 };
 
-/**
- * Provide placeholders for empty and multiple state.
+/**
+ * Provide placeholders for empty and multiple state.
  */
 const PropertiesPanelPlaceholderProvider = {
   getEmpty: () => {
@@ -8383,24 +8644,210 @@ const PropertiesPanelPlaceholderProvider = {
   }
 };
 
-function ActionEntry(props) {
+function FormPropertiesPanel(props) {
   const {
-    editField,
-    field
+    eventBus,
+    getProviders,
+    injector
   } = props;
-  const {
-    type
-  } = field;
-  const entries = [];
-  if (type === 'button') {
-    entries.push({
-      id: 'action',
-      component: Action,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$3
+  const formEditor = injector.get('formEditor');
+  const modeling = injector.get('modeling');
+  const selectionModule = injector.get('selection');
+  const propertiesPanelConfig = injector.get('config.propertiesPanel') || {};
+  const {
+    feelPopupContainer
+  } = propertiesPanelConfig;
+  const [state, setState] = hooks.useState({
+    selectedFormField: selectionModule.get() || formEditor._getState().schema
+  });
+  const selectedFormField = state.selectedFormField;
+  const refresh = hooks.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({
+      selectedFormField: selectionModule.get() || formEditor._getState().schema
+    });
+
+    // notify interested parties on property panel updates
+    eventBus.fire('propertiesPanel.updated', {
+      formField: field
+    });
+  }, [eventBus, formEditor, selectionModule]);
+  hooks.useLayoutEffect(() => {
+    /**
+     * 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', refresh);
+      eventBus.off('import.done', refresh);
+      eventBus.off('selection.changed', refresh);
+    };
+  }, [eventBus, refresh]);
+  const getService = (type, strict = true) => injector.get(type, strict);
+  const propertiesPanelContext = {
+    getService
+  };
+  const onFocus = () => eventBus.fire('propertiesPanel.focusin');
+  const onBlur = () => eventBus.fire('propertiesPanel.focusout');
+  const editField = hooks.useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]);
+
+  // retrieve groups for selected form field
+  const providers = getProviders(selectedFormField);
+  const groups = hooks.useMemo(() => {
+    return minDash.reduce(providers, function (groups, provider) {
+      // do not collect groups for multi element state
+      if (minDash.isArray(selectedFormField)) {
+        return [];
+      }
+      const updater = provider.getGroups(selectedFormField, editField);
+      return updater(groups);
+    }, []);
+  }, [providers, selectedFormField, editField]);
+  return jsxRuntime.jsx("div", {
+    class: "fjs-properties-panel",
+    "data-field": selectedFormField && selectedFormField.id,
+    onFocusCapture: onFocus,
+    onBlurCapture: onBlur,
+    children: jsxRuntime.jsx(FormPropertiesPanelContext.Provider, {
+      value: propertiesPanelContext,
+      children: jsxRuntime.jsx(PropertiesPanel, {
+        element: selectedFormField,
+        eventBus: eventBus,
+        groups: groups,
+        headerProvider: PropertiesPanelHeaderProvider,
+        placeholderProvider: PropertiesPanelPlaceholderProvider,
+        feelPopupContainer: feelPopupContainer
+      })
+    })
+  });
+}
+
+const DEFAULT_PRIORITY = 1000;
+
+/**
+ * @typedef { { parent: Element } } PropertiesPanelConfig
+ * @typedef { import('../../core/EventBus').default } EventBus
+ * @typedef { import('../../types').Injector } Injector
+ * @typedef { { getGroups: ({ formField, editFormField }) => ({ groups}) => Array } } PropertiesProvider
+ */
+
+/**
+ * @param {PropertiesPanelConfig} propertiesPanelConfig
+ * @param {Injector} injector
+ * @param {EventBus} eventBus
+ */
+class PropertiesPanelRenderer {
+  constructor(propertiesPanelConfig, injector, eventBus) {
+    const {
+      parent
+    } = propertiesPanelConfig || {};
+    this._eventBus = eventBus;
+    this._injector = injector;
+    this._container = minDom.domify('<div class="fjs-properties-container" input-handle-modified-keys="y,z"></div>');
+    if (parent) {
+      this.attachTo(parent);
+    }
+    this._eventBus.once('formEditor.rendered', 500, () => {
+      this._render();
     });
   }
+
+  /**
+   * Attach the properties panel to a parent node.
+   *
+   * @param {HTMLElement} container
+   */
+  attachTo(container) {
+    if (!container) {
+      throw new Error('container required');
+    }
+    if (typeof container === 'string') {
+      container = minDom.query(container);
+    }
+
+    // (1) detach from old parent
+    this.detach();
+
+    // (2) append to parent container
+    container.appendChild(this._container);
+
+    // (3) notify interested parties
+    this._eventBus.fire('propertiesPanel.attach');
+  }
+
+  /**
+   * Detach the properties panel from its parent node.
+   */
+  detach() {
+    const parentNode = this._container.parentNode;
+    if (parentNode) {
+      parentNode.removeChild(this._container);
+      this._eventBus.fire('propertiesPanel.detach');
+    }
+  }
+  _render() {
+    preact.render(jsxRuntime.jsx(FormPropertiesPanel, {
+      getProviders: this._getProviders.bind(this),
+      eventBus: this._eventBus,
+      injector: this._injector
+    }), this._container);
+    this._eventBus.fire('propertiesPanel.rendered');
+  }
+  _destroy() {
+    if (this._container) {
+      preact.render(null, this._container);
+      this._eventBus.fire('propertiesPanel.destroyed');
+    }
+  }
+
+  /**
+   * Register a new properties provider to the properties panel.
+   *
+   * @param {PropertiesProvider} provider
+   * @param {Number} [priority]
+   */
+  registerProvider(provider, priority) {
+    if (!priority) {
+      priority = DEFAULT_PRIORITY;
+    }
+    if (typeof provider.getGroups !== 'function') {
+      console.error('Properties provider does not implement #getGroups(element) API');
+      return;
+    }
+    this._eventBus.on('propertiesPanel.getProviders', priority, function (event) {
+      event.providers.push(provider);
+    });
+    this._eventBus.fire('propertiesPanel.providersChanged');
+  }
+  _getProviders() {
+    const event = this._eventBus.createEvent({
+      type: 'propertiesPanel.getProviders',
+      providers: []
+    });
+    this._eventBus.fire(event);
+    return event.providers;
+  }
+}
+PropertiesPanelRenderer.$inject = ['config.propertiesPanel', 'injector', 'eventBus'];
+
+function ActionEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'action',
+    component: Action,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$3,
+    isDefaultVisible: field => field.type === 'button'
+  });
   return entries;
 }
 function Action(props) {
@@ -8433,42 +8880,20 @@ function Action(props) {
   });
 }
 
-function useService (type, strict) {
-  const {
-    getService
-  } = hooks.useContext(FormPropertiesPanelContext);
-  return getService(type, strict);
-}
-
-/**
- * Retrieve list of variables from the form schema.
- *
- * @returns { string[] } list of variables used in form schema
- */
-function useVariables() {
-  const form = useService('formEditor');
-  const schema = form.getSchema();
-  return formJsViewer.getSchemaVariables(schema);
-}
-
 function AltTextEntry(props) {
   const {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
   const entries = [];
-  if (type === 'image') {
-    entries.push({
-      id: 'alt',
-      component: AltText,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$6
-    });
-  }
+  entries.push({
+    id: 'alt',
+    component: AltText,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => ['image'].includes(field.type)
+  });
   return entries;
 }
 function AltText(props) {
@@ -8579,19 +9004,15 @@ function DescriptionEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
   const entries = [];
-  if (INPUTS.includes(type)) {
-    entries.push({
-      id: 'description',
-      component: Description,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$6
-    });
-  }
+  entries.push({
+    id: 'description',
+    component: Description,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => INPUTS.includes(field.type)
+  });
   return entries;
 }
 function Description(props) {
@@ -8633,10 +9054,14 @@ function DefaultOptionEntry(props) {
     type
   } = field;
   const entries = [];
-
-  // Only make default values available when they are statically defined
-  if (!INPUTS.includes(type) || VALUES_INPUTS.includes(type) && !field.values) {
-    return entries;
+  function isDefaultVisible(matchers) {
+    return field => {
+      // Only make default values available when they are statically defined
+      if (!INPUTS.includes(type) || VALUES_INPUTS.includes(type) && !field.values) {
+        return false;
+      }
+      return matchers(field);
+    };
   }
   const defaultOptions = {
     editField,
@@ -8644,44 +9069,39 @@ function DefaultOptionEntry(props) {
     id: 'defaultValue',
     label: 'Default value'
   };
-  if (type === 'checkbox') {
-    entries.push({
-      ...defaultOptions,
-      component: DefaultValueCheckbox,
-      isEdited: isEdited$3
-    });
-  }
-  if (type === 'number') {
-    entries.push({
-      ...defaultOptions,
-      component: DefaultValueNumber,
-      isEdited: isEdited
-    });
-  }
-  if (type === 'radio' || type === 'select') {
-    entries.push({
-      ...defaultOptions,
-      component: DefaultValueSingleSelect,
-      isEdited: isEdited$3
-    });
-  }
+  entries.push({
+    ...defaultOptions,
+    component: DefaultValueCheckbox,
+    isEdited: isEdited$3,
+    isDefaultVisible: isDefaultVisible(field => field.type === 'checkbox')
+  });
+  entries.push({
+    ...defaultOptions,
+    component: DefaultValueNumber,
+    isEdited: isEdited,
+    isDefaultVisible: isDefaultVisible(field => field.type === 'number')
+  });
+  entries.push({
+    ...defaultOptions,
+    component: DefaultValueSingleSelect,
+    isEdited: isEdited$3,
+    isDefaultVisible: isDefaultVisible(field => field.type === 'radio' || field.type === 'select')
+  });
 
   // todo(Skaiir): implement a multiselect equivalent (cf. https://github.com/bpmn-io/form-js/issues/265)
 
-  if (type === 'textfield') {
-    entries.push({
-      ...defaultOptions,
-      component: DefaultValueTextfield,
-      isEdited: isEdited
-    });
-  }
-  if (type === 'textarea') {
-    entries.push({
-      ...defaultOptions,
-      component: DefaultValueTextarea,
-      isEdited: isEdited$1
-    });
-  }
+  entries.push({
+    ...defaultOptions,
+    component: DefaultValueTextfield,
+    isEdited: isEdited,
+    isDefaultVisible: isDefaultVisible(field => field.type === 'textfield')
+  });
+  entries.push({
+    ...defaultOptions,
+    component: DefaultValueTextarea,
+    isEdited: isEdited$1,
+    isDefaultVisible: isDefaultVisible(field => field.type === 'textarea')
+  });
   return entries;
 }
 function DefaultValueCheckbox(props) {
@@ -8866,19 +9286,15 @@ function DisabledEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
   const entries = [];
-  if (INPUTS.includes(type)) {
-    entries.push({
-      id: 'disabled',
-      component: Disabled,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$8
-    });
-  }
+  entries.push({
+    id: 'disabled',
+    component: Disabled,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$8,
+    isDefaultVisible: field => INPUTS.includes(field.type)
+  });
   return entries;
 }
 function Disabled(props) {
@@ -8911,15 +9327,14 @@ function IdEntry(props) {
     field
   } = props;
   const entries = [];
-  if (field.type === 'default') {
-    entries.push({
-      id: 'id',
-      component: Id,
-      editField: editField,
-      field: field,
-      isEdited: isEdited
-    });
-  }
+  entries.push({
+    id: 'id',
+    component: Id,
+    editField: editField,
+    field: field,
+    isEdited: isEdited,
+    isDefaultVisible: field => field.type === 'default'
+  });
   return entries;
 }
 function Id(props) {
@@ -8990,19 +9405,15 @@ function KeyEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
   const entries = [];
-  if (INPUTS.includes(type)) {
-    entries.push({
-      id: 'key',
-      component: Key$1,
-      editField: editField,
-      field: field,
-      isEdited: isEdited
-    });
-  }
+  entries.push({
+    id: 'key',
+    component: Key$1,
+    editField: editField,
+    field: field,
+    isEdited: isEdited,
+    isDefaultVisible: field => INPUTS.includes(field.type)
+  });
   return entries;
 }
 function Key$1(props) {
@@ -9148,7 +9559,8 @@ function simpleBoolEntryFactory(options) {
     label,
     description,
     path,
-    props
+    props,
+    isDefaultVisible
   } = options;
   const {
     editField,
@@ -9162,7 +9574,8 @@ function simpleBoolEntryFactory(options) {
     editField,
     description,
     component: SimpleBoolComponent,
-    isEdited: isEdited$5
+    isEdited: isEdited$5,
+    isDefaultVisible
   };
 }
 const SimpleBoolComponent = props => {
@@ -9210,39 +9623,35 @@ function LabelEntry(props) {
     field,
     editField
   } = props;
-  const {
-    type,
-    subtype
-  } = field;
   const entries = [];
-  if (type === 'datetime') {
-    if (subtype === formJsViewer.DATETIME_SUBTYPES.DATE || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
-      entries.push({
-        id: 'date-label',
-        component: DateLabel,
-        editField,
-        field,
-        isEdited: isEdited$6
-      });
+  entries.push({
+    id: 'date-label',
+    component: DateLabel,
+    editField,
+    field,
+    isEdited: isEdited$6,
+    isDefaultVisible: function (field) {
+      return field.type === 'datetime' && (field.subtype === formJsViewer.DATETIME_SUBTYPES.DATE || field.subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME);
     }
-    if (subtype === formJsViewer.DATETIME_SUBTYPES.TIME || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
-      entries.push({
-        id: 'time-label',
-        component: TimeLabel,
-        editField,
-        field,
-        isEdited: isEdited$6
-      });
+  });
+  entries.push({
+    id: 'time-label',
+    component: TimeLabel,
+    editField,
+    field,
+    isEdited: isEdited$6,
+    isDefaultVisible: function (field) {
+      return field.type === 'datetime' && (field.subtype === formJsViewer.DATETIME_SUBTYPES.TIME || field.subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME);
     }
-  } else if (INPUTS.includes(type) || type === 'button' || type === 'group') {
-    entries.push({
-      id: 'label',
-      component: Label$1,
-      editField,
-      field,
-      isEdited: isEdited$6
-    });
-  }
+  });
+  entries.push({
+    id: 'label',
+    component: Label$1,
+    editField,
+    field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => INPUTS.includes(field.type) || field.type === 'button' || field.type === 'group'
+  });
   return entries;
 }
 function Label$1(props) {
@@ -9336,19 +9745,15 @@ function SourceEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
   const entries = [];
-  if (type === 'image') {
-    entries.push({
-      id: 'source',
-      component: Source,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$6
-    });
-  }
+  entries.push({
+    id: 'source',
+    component: Source,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'image'
+  });
   return entries;
 }
 function Source(props) {
@@ -9386,24 +9791,15 @@ function Source(props) {
 function TextEntry(props) {
   const {
     editField,
-    /* getService, */
     field
   } = props;
-  const {
-    type
-  } = field;
-
-  // const templating = getService('templating');
-
-  if (type !== 'text') {
-    return [];
-  }
   const entries = [{
     id: 'text',
     component: Text,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'text'
   }];
 
   // todo: skipped to make the release without too much risk
@@ -9462,19 +9858,14 @@ function SpacerEntry(props) {
     field,
     id
   } = props;
-  const {
-    type
-  } = field;
-  if (type !== 'spacer') {
-    return [];
-  }
   const entries = [];
   entries.push({
     id: id + '-height',
     component: SpacerHeight,
     isEdited: isEdited$7,
     editField,
-    field
+    field,
+    isDefaultVisible: field => field.type === 'spacer'
   });
   return entries;
 }
@@ -9513,26 +9904,22 @@ function NumberEntries(props) {
     field,
     id
   } = props;
-  const {
-    type
-  } = field;
-  if (type !== 'number') {
-    return [];
-  }
   const entries = [];
   entries.push({
     id: id + '-decimalDigits',
     component: NumberDecimalDigits,
     isEdited: isEdited$7,
     editField,
-    field
+    field,
+    isDefaultVisible: field => field.type === 'number'
   });
   entries.push({
     id: id + '-step',
     component: NumberArrowStep,
     isEdited: isEdited,
     editField,
-    field
+    field,
+    isDefaultVisible: field => field.type === 'number'
   });
   return entries;
 }
@@ -9617,19 +10004,14 @@ function NumberSerializationEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
-  if (type !== 'number') {
-    return [];
-  }
   const entries = [];
   entries.push({
     id: 'serialize-to-string',
     component: SerializeToString,
     isEdited: isEdited$5,
     editField,
-    field
+    field,
+    isDefaultVisible: field => field.type === 'number'
   });
   return entries;
 }
@@ -9668,29 +10050,22 @@ function DateTimeEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type,
-    subtype
-  } = field;
-  if (type !== 'datetime') {
-    return [];
-  }
   const entries = [{
     id: 'subtype',
     component: DateTimeSubtypeSelect,
     isEdited: isEdited$3,
     editField,
-    field
+    field,
+    isDefaultVisible: field => field.type === 'datetime'
   }];
-  if (subtype === formJsViewer.DATETIME_SUBTYPES.TIME || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
-    entries.push({
-      id: 'use24h',
-      component: Use24h,
-      isEdited: isEdited$5,
-      editField,
-      field
-    });
-  }
+  entries.push({
+    id: 'use24h',
+    component: Use24h,
+    isEdited: isEdited$5,
+    editField,
+    field,
+    isDefaultVisible: field => field.type === 'datetime' && (field.subtype === formJsViewer.DATETIME_SUBTYPES.TIME || field.subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME)
+  });
   return entries;
 }
 function DateTimeSubtypeSelect(props) {
@@ -9778,32 +10153,31 @@ function DateTimeConstraintsEntry(props) {
     field,
     id
   } = props;
-  const {
-    type,
-    subtype
-  } = field;
-  if (type !== 'datetime') {
-    return [];
+  function isDefaultVisible(subtypes) {
+    return field => {
+      if (field.type !== 'datetime') {
+        return false;
+      }
+      return subtypes.includes(field.subtype);
+    };
   }
   const entries = [];
-  if (subtype === formJsViewer.DATETIME_SUBTYPES.TIME || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
-    entries.push({
-      id: id + '-timeInterval',
-      component: TimeIntervalSelect,
-      isEdited: isEdited$3,
-      editField,
-      field
-    });
-  }
-  if (subtype === formJsViewer.DATETIME_SUBTYPES.DATE || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
-    entries.push({
-      id: id + '-disallowPassedDates',
-      component: DisallowPassedDates,
-      isEdited: isEdited$5,
-      editField,
-      field
-    });
-  }
+  entries.push({
+    id: id + '-timeInterval',
+    component: TimeIntervalSelect,
+    isEdited: isEdited$3,
+    editField,
+    field,
+    isDefaultVisible: isDefaultVisible([formJsViewer.DATETIME_SUBTYPES.TIME, formJsViewer.DATETIME_SUBTYPES.DATETIME])
+  });
+  entries.push({
+    id: id + '-disallowPassedDates',
+    component: DisallowPassedDates,
+    isEdited: isEdited$5,
+    editField,
+    field,
+    isDefaultVisible: isDefaultVisible([formJsViewer.DATETIME_SUBTYPES.DATE, formJsViewer.DATETIME_SUBTYPES.DATETIME])
+  });
   return entries;
 }
 function DisallowPassedDates(props) {
@@ -9857,23 +10231,15 @@ function DateTimeFormatEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type,
-    subtype
-  } = field;
-  if (type !== 'datetime') {
-    return [];
-  }
   const entries = [];
-  if (subtype === formJsViewer.DATETIME_SUBTYPES.TIME || subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME) {
-    entries.push({
-      id: 'time-format',
-      component: TimeFormatSelect,
-      isEdited: isEdited$3,
-      editField,
-      field
-    });
-  }
+  entries.push({
+    id: 'time-format',
+    component: TimeFormatSelect,
+    isEdited: isEdited$3,
+    editField,
+    field,
+    isDefaultVisible: field => field.type === 'datetime' && (field.subtype === formJsViewer.DATETIME_SUBTYPES.TIME || field.subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME)
+  });
   return entries;
 }
 function TimeFormatSelect(props) {
@@ -9901,20 +10267,12 @@ function TimeFormatSelect(props) {
 }
 
 function SelectEntries(props) {
-  const {
-    field
-  } = props;
-  const {
-    type
-  } = field;
-  if (type !== 'select') {
-    return [];
-  }
   const entries = [simpleBoolEntryFactory({
     id: 'searchable',
     path: ['searchable'],
     label: 'Searchable',
-    props
+    props,
+    isDefaultVisible: field => field.type === 'select'
   })];
   return entries;
 }
@@ -10094,14 +10452,14 @@ function Value(props) {
 
 // helpers //////////
 
-/**
- * Returns copy of object with updated value.
- *
- * @param {Object} properties
- * @param {string} key
- * @param {string} value
- *
- * @returns {Object}
+/**
+ * Returns copy of object with updated value.
+ *
+ * @param {Object} properties
+ * @param {string} key
+ * @param {string} value
+ *
+ * @returns {Object}
  */
 function updateValue(properties, key, value) {
   return {
@@ -10110,14 +10468,14 @@ function updateValue(properties, key, value) {
   };
 }
 
-/**
- * Returns copy of object with updated key.
- *
- * @param {Object} properties
- * @param {string} oldKey
- * @param {string} newKey
- *
- * @returns {Object}
+/**
+ * Returns copy of object with updated key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ * @param {string} newKey
+ *
+ * @returns {Object}
  */
 function updateKey(properties, oldKey, newKey) {
   return Object.entries(properties).reduce((newProperties, entry) => {
@@ -10181,11 +10539,7 @@ function ValuesSourceSelect(props) {
   const setValue = value => {
     let newField = field;
     const newProperties = {};
-    Object.values(formJsViewer.VALUES_SOURCES).forEach(source => {
-      // Clear all values source definitions and default the newly selected one
-      const newValue = value === source ? formJsViewer.VALUES_SOURCES_DEFAULTS[source] : undefined;
-      newProperties[formJsViewer.VALUES_SOURCES_PATHS[source]] = newValue;
-    });
+    newProperties[formJsViewer.VALUES_SOURCES_PATHS[value]] = formJsViewer.VALUES_SOURCES_DEFAULTS[value];
     newField = editField(field, newProperties);
     return newField;
   };
@@ -10359,9 +10713,6 @@ function AdornerEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
   const entries = [];
   const onChange = key => {
     return value => {
@@ -10374,26 +10725,26 @@ function AdornerEntry(props) {
       return minDash.get(field, ['appearance', key]);
     };
   };
-  if (['number', 'textfield'].includes(type)) {
-    entries.push({
-      id: 'prefix-adorner',
-      component: PrefixAdorner,
-      isEdited: isEdited$6,
-      editField,
-      field,
-      onChange,
-      getValue
-    });
-    entries.push({
-      id: 'suffix-adorner',
-      component: SuffixAdorner,
-      isEdited: isEdited$6,
-      editField,
-      field,
-      onChange,
-      getValue
-    });
-  }
+  entries.push({
+    id: 'prefix-adorner',
+    component: PrefixAdorner,
+    isEdited: isEdited$6,
+    editField,
+    field,
+    onChange,
+    getValue,
+    isDefaultVisible: field => ['number', 'textfield'].includes(field.type)
+  });
+  entries.push({
+    id: 'suffix-adorner',
+    component: SuffixAdorner,
+    isEdited: isEdited$6,
+    editField,
+    field,
+    onChange,
+    getValue,
+    isDefaultVisible: field => ['number', 'textfield'].includes(field.type)
+  });
   return entries;
 }
 function PrefixAdorner(props) {
@@ -10447,19 +10798,15 @@ function ReadonlyEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
   const entries = [];
-  if (INPUTS.includes(type)) {
-    entries.push({
-      id: 'readonly',
-      component: Readonly,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$6
-    });
-  }
+  entries.push({
+    id: 'readonly',
+    component: Readonly,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => INPUTS.includes(field.type)
+  });
   return entries;
 }
 function Readonly(props) {
@@ -10643,6 +10990,9 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField
   })];
+  if (entries.length === 0) {
+    return null;
+  }
   return {
     id: 'general',
     label: 'General',
@@ -10703,9 +11053,6 @@ function ValidationGroup(field, editField) {
   } = field;
   const validate = minDash.get(field, ['validate'], {});
   const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate.validationType);
-  if (!INPUTS.includes(type)) {
-    return null;
-  }
   const onChange = key => {
     return value => {
       const validate = minDash.get(field, ['validate'], {});
@@ -10723,63 +11070,62 @@ function ValidationGroup(field, editField) {
     getValue,
     field,
     isEdited: isEdited$5,
-    onChange
+    onChange,
+    isDefaultVisible: field => INPUTS.includes(field.type)
   }];
-  if (type === 'textfield') {
-    entries.push({
-      id: 'validationType',
-      component: ValidationType,
-      getValue,
-      field,
-      editField,
-      isEdited: isEdited,
-      onChange
-    });
-  }
-  if (type === 'textarea' || type === 'textfield' && isCustomValidation) {
-    entries.push({
-      id: 'minLength',
-      component: MinLength,
-      getValue,
-      field,
-      isEdited: isEdited$6,
-      onChange
-    }, {
-      id: 'maxLength',
-      component: MaxLength,
-      getValue,
-      field,
-      isEdited: isEdited$6,
-      onChange
-    });
-  }
-  if (type === 'textfield' && isCustomValidation) {
-    entries.push({
-      id: 'pattern',
-      component: Pattern,
-      getValue,
-      field,
-      isEdited: isEdited,
-      onChange
-    });
-  }
-  if (type === 'number') {
-    entries.push({
-      id: 'min',
-      component: Min,
-      getValue,
-      field,
-      isEdited: isEdited$6,
-      onChange
-    }, {
-      id: 'max',
-      component: Max,
-      getValue,
-      field,
-      isEdited: isEdited$6,
-      onChange
-    });
-  }
+  entries.push({
+    id: 'validationType',
+    component: ValidationType,
+    getValue,
+    field,
+    editField,
+    isEdited: isEdited,
+    onChange,
+    isDefaultVisible: field => field.type === 'textfield'
+  });
+  entries.push({
+    id: 'minLength',
+    component: MinLength,
+    getValue,
+    field,
+    isEdited: isEdited$6,
+    onChange,
+    isDefaultVisible: field => INPUTS.includes(field.type) && (type === 'textarea' || type === 'textfield' && isCustomValidation)
+  }, {
+    id: 'maxLength',
+    component: MaxLength,
+    getValue,
+    field,
+    isEdited: isEdited$6,
+    onChange,
+    isDefaultVisible: field => INPUTS.includes(field.type) && (type === 'textarea' || type === 'textfield' && isCustomValidation)
+  });
+  entries.push({
+    id: 'pattern',
+    component: Pattern,
+    getValue,
+    field,
+    isEdited: isEdited,
+    onChange,
+    isDefaultVisible: field => INPUTS.includes(field.type) && type === 'textfield' && isCustomValidation
+  });
+  entries.push({
+    id: 'min',
+    component: Min,
+    getValue,
+    field,
+    isEdited: isEdited$6,
+    onChange,
+    isDefaultVisible: field => field.type === 'number'
+  }, {
+    id: 'max',
+    component: Max,
+    getValue,
+    field,
+    isEdited: isEdited$6,
+    onChange,
+    isDefaultVisible: field => field.type === 'number'
+  });
   return {
     id: 'validation',
     label: 'Validation',
@@ -10933,12 +11279,14 @@ function ValidationType(props) {
   });
 }
 
-function ValuesGroups(field, editField) {
+function ValuesGroups(field, editField, getService) {
   const {
     type,
     id: fieldId
   } = field;
-  if (!VALUES_INPUTS.includes(type)) {
+  const formFields = getService('formFields');
+  const fieldDefinition = formFields.get(type).config;
+  if (!VALUES_INPUTS.includes(type) && !hasValuesGroupsConfigured(fieldDefinition)) {
     return [];
   }
   const context = {
@@ -10947,8 +11295,8 @@ function ValuesGroups(field, editField) {
   };
   const valuesSourceId = `${fieldId}-valuesSource`;
 
-  /**
-   * @type {Array<Group|ListGroup>}
+  /**
+   * @type {Array<Group|ListGroup>}
    */
   const groups = [{
     id: valuesSourceId,
@@ -11069,13 +11417,13 @@ function CustomPropertiesGroup(field, editField) {
 
 // helpers //////////
 
-/**
- * Returns copy of object without key.
- *
- * @param {Object} properties
- * @param {string} oldKey
- *
- * @returns {Object}
+/**
+ * Returns copy of object without key.
+ *
+ * @param {Object} properties
+ * @param {string} oldKey
+ *
+ * @returns {Object}
  */
 function removeKey(properties, oldKey) {
   return Object.entries(properties).reduce((newProperties, entry) => {
@@ -11144,158 +11492,64 @@ function ConditionGroup(field, editField) {
   };
 }
 
-function getGroups(field, editField, getService) {
-  if (!field) {
-    return [];
-  }
-  const groups = [GeneralGroup(field, editField, getService), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)];
-
-  // contract: if a group returns null, it should not be displayed at all
-  return groups.filter(group => group !== null);
-}
-function FormPropertiesPanel(props) {
-  const {
-    eventBus,
-    injector
-  } = props;
-  const formEditor = injector.get('formEditor');
-  const modeling = injector.get('modeling');
-  const selectionModule = injector.get('selection');
-  const propertiesPanelConfig = injector.get('config.propertiesPanel') || {};
-  const {
-    feelPopupContainer
-  } = propertiesPanelConfig;
-  const [state, setState] = hooks.useState({
-    selectedFormField: selectionModule.get() || formEditor._getState().schema
-  });
-  const selectedFormField = state.selectedFormField;
-  const refresh = hooks.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({
-      selectedFormField: selectionModule.get() || formEditor._getState().schema
-    });
-
-    // notify interested parties on property panel updates
-    eventBus.fire('propertiesPanel.updated', {
-      formField: field
-    });
-  }, [eventBus, formEditor, selectionModule]);
-  hooks.useLayoutEffect(() => {
-    /**
-     * 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', refresh);
-      eventBus.off('import.done', refresh);
-      eventBus.off('selection.changed', refresh);
-    };
-  }, [eventBus, refresh]);
-  const getService = (type, strict = true) => injector.get(type, strict);
-  const propertiesPanelContext = {
-    getService
-  };
-  const onFocus = () => eventBus.fire('propertiesPanel.focusin');
-  const onBlur = () => eventBus.fire('propertiesPanel.focusout');
-  const editField = hooks.useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]);
-  return jsxRuntime.jsx("div", {
-    class: "fjs-properties-panel",
-    "data-field": selectedFormField && selectedFormField.id,
-    onFocusCapture: onFocus,
-    onBlurCapture: onBlur,
-    children: jsxRuntime.jsx(FormPropertiesPanelContext.Provider, {
-      value: propertiesPanelContext,
-      children: jsxRuntime.jsx(PropertiesPanel, {
-        element: selectedFormField,
-        eventBus: eventBus,
-        groups: getGroups(selectedFormField, editField, getService),
-        headerProvider: PropertiesPanelHeaderProvider,
-        placeholderProvider: PropertiesPanelPlaceholderProvider,
-        feelPopupContainer: feelPopupContainer
-      })
-    })
-  });
-}
-
-class PropertiesPanelRenderer {
-  constructor(propertiesPanelConfig, injector, eventBus) {
-    const {
-      parent
-    } = propertiesPanelConfig || {};
-    this._eventBus = eventBus;
+class PropertiesProvider {
+  constructor(propertiesPanel, injector) {
     this._injector = injector;
-    this._container = minDom.domify('<div class="fjs-properties-container" input-handle-modified-keys="y,z"></div>');
-    if (parent) {
-      this.attachTo(parent);
-    }
-    this._eventBus.once('formEditor.rendered', 500, () => {
-      this._render();
-    });
+    propertiesPanel.registerProvider(this);
   }
-
-  /**
-   * Attach the properties panel to a parent node.
-   *
-   * @param {HTMLElement} container
-   */
-  attachTo(container) {
-    if (!container) {
-      throw new Error('container required');
-    }
-    if (typeof container === 'string') {
-      container = minDom.query(container);
-    }
-
-    // (1) detach from old parent
-    this.detach();
-
-    // (2) append to parent container
-    container.appendChild(this._container);
-
-    // (3) notify interested parties
-    this._eventBus.fire('propertiesPanel.attach');
+  _filterVisibleEntries(groups, field, getService) {
+    return groups.forEach(group => {
+      const {
+        entries
+      } = group;
+      const {
+        type
+      } = field;
+      const formFields = getService('formFields');
+      const fieldDefinition = formFields.get(type).config;
+      if (!entries) {
+        return;
+      }
+      group.entries = entries.filter(entry => {
+        const {
+          isDefaultVisible
+        } = entry;
+        if (!isDefaultVisible) {
+          return true;
+        }
+        return isDefaultVisible(field) || hasEntryConfigured(fieldDefinition, entry.id);
+      });
+    });
   }
+  getGroups(field, editField) {
+    return groups => {
+      if (!field) {
+        return groups;
+      }
+      const getService = (type, strict = true) => this._injector.get(type, strict);
+      groups = [...groups, GeneralGroup(field, editField, getService), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField, getService), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
+      this._filterVisibleEntries(groups, field, getService);
 
-  /**
-   * Detach the properties panel from its parent node.
-   */
-  detach() {
-    const parentNode = this._container.parentNode;
-    if (parentNode) {
-      parentNode.removeChild(this._container);
-      this._eventBus.fire('propertiesPanel.detach');
-    }
-  }
-  _render() {
-    preact.render(jsxRuntime.jsx(FormPropertiesPanel, {
-      eventBus: this._eventBus,
-      injector: this._injector
-    }), this._container);
-    this._eventBus.fire('propertiesPanel.rendered');
-  }
-  _destroy() {
-    if (this._container) {
-      preact.render(null, this._container);
-      this._eventBus.fire('propertiesPanel.destroyed');
-    }
+      // contract: if a group has no entries or items, it should not be displayed at all
+      return groups.filter(group => {
+        return group.items || group.entries && group.entries.length;
+      });
+    };
   }
 }
-PropertiesPanelRenderer.$inject = ['config.propertiesPanel', 'injector', 'eventBus'];
+PropertiesProvider.$inject = ['propertiesPanel', 'injector'];
 
 var PropertiesPanelModule = {
   __depends__: [index],
-  __init__: ['propertiesPanel'],
-  propertiesPanel: ['type', PropertiesPanelRenderer]
+  __init__: ['propertiesPanel', 'propertiesProvider'],
+  propertiesPanel: ['type', PropertiesPanelRenderer],
+  propertiesProvider: ['type', PropertiesProvider]
 };
 
-/**
- * Manages the rendering of visual plugins.
- * @constructor
- * @param {Object} eventBus - Event bus for the application.
+/**
+ * Manages the rendering of visual plugins.
+ * @constructor
+ * @param {Object} eventBus - Event bus for the application.
  */
 class RenderInjector extends SectionModuleBase {
   constructor(eventBus) {
@@ -11304,10 +11558,10 @@ class RenderInjector extends SectionModuleBase {
     this.registeredRenderers = [];
   }
 
-  /**
-   * Inject a new renderer into the injector.
-   * @param {string} identifier - Identifier for the renderer.
-   * @param {Function} Renderer - The renderer function.
+  /**
+   * Inject a new renderer into the injector.
+   * @param {string} identifier - Identifier for the renderer.
+   * @param {Function} Renderer - The renderer function.
    */
   attachRenderer(identifier, Renderer) {
     this.registeredRenderers = [...this.registeredRenderers, {
@@ -11316,17 +11570,17 @@ class RenderInjector extends SectionModuleBase {
     }];
   }
 
-  /**
-   * Detach a renderer from the by key injector.
-   * @param {string} identifier - Identifier for the renderer.
+  /**
+   * Detach a renderer from the by key injector.
+   * @param {string} identifier - Identifier for the renderer.
    */
   detachRenderer(identifier) {
     this.registeredRenderers = this.registeredRenderers.filter(r => r.identifier !== identifier);
   }
 
-  /**
-   * Returns the registered renderers.
-   * @returns {Array} Array of registered renderers.
+  /**
+   * Returns the registered renderers.
+   * @returns {Array} Array of registered renderers.
    */
   fetchRenderers() {
     return this.registeredRenderers;
@@ -11360,48 +11614,48 @@ var ExpressionLanguageModule = {
 
 const ids = new Ids([32, 36, 1]);
 
-/**
- * @typedef { import('./types').Injector } Injector
- * @typedef { import('./types').Module } Module
- * @typedef { import('./types').Schema } Schema
- *
- * @typedef { import('./types').FormEditorOptions } FormEditorOptions
- * @typedef { import('./types').FormEditorProperties } FormEditorProperties
- *
- * @typedef { {
- *   properties: FormEditorProperties,
- *   schema: Schema
- * } } State
- *
- * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
- * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
- * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+/**
+ * @typedef { import('./types').Injector } Injector
+ * @typedef { import('./types').Module } Module
+ * @typedef { import('./types').Schema } Schema
+ *
+ * @typedef { import('./types').FormEditorOptions } FormEditorOptions
+ * @typedef { import('./types').FormEditorProperties } FormEditorProperties
+ *
+ * @typedef { {
+ *   properties: FormEditorProperties,
+ *   schema: Schema
+ * } } State
+ *
+ * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+ * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 
-/**
- * The form editor.
+/**
+ * The form editor.
  */
 class FormEditor {
-  /**
-   * @constructor
-   * @param {FormEditorOptions} options
+  /**
+   * @constructor
+   * @param {FormEditorOptions} options
    */
   constructor(options = {}) {
-    /**
-     * @public
-     * @type {OnEventType}
+    /**
+     * @public
+     * @type {OnEventType}
      */
     this.on = this._onEvent;
 
-    /**
-     * @public
-     * @type {String}
+    /**
+     * @public
+     * @type {String}
      */
     this._id = ids.next();
 
-    /**
-     * @private
-     * @type {Element}
+    /**
+     * @private
+     * @type {Element}
      */
     this._container = formJsViewer.createFormContainer();
     this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -11412,15 +11666,15 @@ class FormEditor {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {any}
+    /**
+     * @private
+     * @type {any}
      */
     this.exporter = exporter;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       properties,
@@ -11449,10 +11703,10 @@ class FormEditor {
     this._detach(false);
   }
 
-  /**
-   * @param {Schema} schema
-   *
-   * @return {Promise<{ warnings: Array<any> }>}
+  /**
+   * @param {Schema} schema
+   *
+   * @return {Promise<{ warnings: Array<any> }>}
    */
   importSchema(schema) {
     return new Promise((resolve, reject) => {
@@ -11481,15 +11735,15 @@ class FormEditor {
     });
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   saveSchema() {
     return this.getSchema();
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   getSchema() {
     const {
@@ -11498,8 +11752,8 @@ class FormEditor {
     return exportSchema(schema, this.exporter, formJsViewer.schemaVersion);
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -11517,10 +11771,10 @@ class FormEditor {
     this._detach();
   }
 
-  /**
-   * @internal
-   *
-   * @param {boolean} [emit]
+  /**
+   * @internal
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -11534,9 +11788,9 @@ class FormEditor {
     parentNode.removeChild(container);
   }
 
-  /**
-   * @param {any} property
-   * @param {any} value
+  /**
+   * @param {any} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = minDash.set(this._getState().properties, [property], value);
@@ -11545,21 +11799,21 @@ class FormEditor {
     });
   }
 
-  /**
-   * @param {string} type
-   * @param {Function} handler
+  /**
+   * @param {string} type
+   * @param {Function} handler
    */
   off(type, handler) {
     this.get('eventBus').off(type, handler);
   }
 
-  /**
-   * @internal
-   *
-   * @param {FormEditorOptions} options
-   * @param {Element} container
-   *
-   * @returns {Injector}
+  /**
+   * @internal
+   *
+   * @param {FormEditorOptions} options
+   * @param {Element} container
+   *
+   * @returns {Injector}
    */
   _createInjector(options, container) {
     const {
@@ -11581,22 +11835,22 @@ class FormEditor {
     }, core, ...modules, ...additionalModules]);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _emit(type, data) {
     this.get('eventBus').fire(type, data);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getState() {
     return this._state;
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _setState(state) {
     this._state = {
@@ -11606,15 +11860,15 @@ class FormEditor {
     this._emit('changed', this._getState());
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getModules() {
     return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, formJsViewer.MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);
@@ -11668,4 +11922,9 @@ Object.defineProperty(exports, 'schemaVersion', {
 });
 exports.FormEditor = FormEditor;
 exports.createFormEditor = createFormEditor;
+exports.useDebounce = useDebounce;
+exports.usePrevious = usePrevious$1;
+exports.usePropertiesPanelService = useService;
+exports.useService = useService$1;
+exports.useVariables = useVariables;
 //# sourceMappingURL=index.cjs.map