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

package/dist/index.es.js

@@ -1,13 +1,13 @@
-import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Text as Text$1, FormFields, formFields, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Text as Text$1, FormFields, sanitizeImageSource, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
-import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, set as set$1, isString, isUndefined, without, has } from 'min-dash';
+import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, isString, set as set$1, reduce, isUndefined, without, has } from 'min-dash';
 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 { useContext, useRef, useEffect, useMemo, useState, useCallback, useLayoutEffect } from 'preact/hooks';
 import { createContext, Fragment, render, createElement } from 'preact';
 import * as React from 'preact/compat';
-import { createPortal, useRef, useContext as useContext$1, useEffect as useEffect$1, forwardRef } from 'preact/compat';
+import { createPortal, useRef as useRef$1, useContext as useContext$1, useEffect as useEffect$1, forwardRef } from 'preact/compat';
 import dragula from '@bpmn-io/draggle';
 import { classes, query, closest, event, matches, domify } from 'min-dom';
 import { mutate } from 'array-move';
@@ -18,7 +18,7 @@ import * as focusTrap from 'focus-trap';
 import Big from 'big.js';
 
 var FN_REF = '__fn';
-var DEFAULT_PRIORITY$2 = 1000;
+var DEFAULT_PRIORITY$3 = 1000;
 var slice = Array.prototype.slice;
 
 /**
@@ -163,7 +163,7 @@ EventBus.prototype.on = function (events, priority, callback, that) {
   if (isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$2;
+    priority = DEFAULT_PRIORITY$3;
   }
   if (!isNumber(priority)) {
     throw new Error('priority must be a number');
@@ -202,7 +202,7 @@ EventBus.prototype.once = function (events, priority, callback, that) {
   if (isFunction(priority)) {
     that = callback;
     callback = priority;
-    priority = DEFAULT_PRIORITY$2;
+    priority = DEFAULT_PRIORITY$3;
   }
   if (!isNumber(priority)) {
     throw new Error('priority must be a number');
@@ -517,10 +517,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;
@@ -533,11 +533,11 @@ function DebounceFactory(config = true) {
 DebounceFactory.$inject = ['config.debounce'];
 
 class FormFieldRegistry extends FormFieldRegistry$1 {
-  /**
-   * 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);
@@ -558,13 +558,13 @@ class FormFieldRegistry extends FormFieldRegistry$1 {
     }
   }
 
-  /**
-   * 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) {
@@ -581,11 +581,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;
@@ -656,21 +656,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;
@@ -711,12 +711,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;
@@ -750,11 +750,11 @@ const DragAndDropContext = 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 = createContext({
@@ -769,6 +769,27 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
+function usePrevious$1(value) {
+  const ref = useRef();
+  useEffect(() => ref.current = value);
+  return ref.current;
+}
+
+function useDebounce(fn, dependencies = []) {
+  const debounce = useService$1('debounce');
+  const callback = useMemo(() => {
+    return debounce(fn);
+  }, dependencies);
+
+  // cleanup async side-effect if callback #flush is provided.
+  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) {
@@ -1062,7 +1083,7 @@ const FillContext = createContext({
 var FillContext$1 = FillContext;
 
 var Fill = (props => {
-  const uid = useRef(Symbol('fill_uid'));
+  const uid = useRef$1(Symbol('fill_uid'));
   const fillContext = useContext$1(FillContext$1);
   useEffect$1(() => {
     if (!fillContext) {
@@ -1104,23 +1125,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 => jsx(Fragment, {
   children: fill.children
 }, fill.id);
 
-/**
- * Creates an array of fills, with separators inserted between groups.
- *
- * @param {Array} groups Groups of fills
- * @param {Function} fillRenderer Function to create a fill
- * @param {Function} separatorRenderer Function to create a separator
- * @returns {Array} Array of fills and separators
+/**
+ * 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 = [];
@@ -1138,8 +1159,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 = [];
@@ -1159,8 +1180,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);
@@ -1191,17 +1212,63 @@ var SlotFillRoot = (props => {
   });
 });
 
-const PALETTE_ENTRIES = 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 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 ? jsx(Icon, {
+      class: "fjs-palette-field-icon",
+      width: "36",
+      height: "36",
+      viewBox: "0 0 54 54"
+    }) : null, 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'
@@ -1216,10 +1283,12 @@ const PALETTE_GROUPS = [{
   id: 'action'
 }];
 function Palette(props) {
-  const [entries, setEntries] = useState(PALETTE_ENTRIES);
+  const formFields = useService$1('formFields');
+  const initialPaletteEntries = useRef(collectPaletteEntries(formFields));
+  const [paletteEntries, setPaletteEntries] = useState(initialPaletteEntries.current);
   const [searchTerm, setSearchTerm] = useState('');
-  const inputRef = useRef$1();
-  const groups = groupEntries(entries);
+  const inputRef = useRef();
+  const groups = groupEntries(paletteEntries);
   const simplifyString = useCallback(str => {
     return str.toLowerCase().replace(/\s+/g, '');
   }, []);
@@ -1235,8 +1304,8 @@ function Palette(props) {
 
   // filter entries on search change
   useEffect(() => {
-    const entries = PALETTE_ENTRIES.filter(filter);
-    setEntries(entries);
+    const entries = initialPaletteEntries.current.filter(filter);
+    setPaletteEntries(entries);
   }, [filter, searchTerm]);
   const handleInput = useCallback(event => {
     setSearchTerm(() => event.target.value);
@@ -1283,24 +1352,10 @@ function Palette(props) {
           children: label
         }), jsx("div", {
           class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
-          children: entries.map(({
-            label,
-            type
-          }) => {
-            const Icon = iconsByType(type);
-            return jsxs("div", {
-              class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
-              "data-field-type": type,
-              title: `Create ${getIndefiniteArticle(type)} ${label} element`,
-              children: [Icon ? jsx(Icon, {
-                class: "fjs-palette-field-icon",
-                width: "36",
-                height: "36",
-                viewBox: "0 0 54 54"
-              }) : null, jsx("span", {
-                class: "fjs-palette-field-text",
-                children: label
-              })]
+          children: entries.map(entry => {
+            return jsx(PaletteEntry, {
+              getPaletteIcon: getPaletteIcon,
+              ...entry
             });
           })
         })]
@@ -1340,11 +1395,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 = () => jsx("img", {
+      class: "fjs-field-icon-image",
+      width: 36,
+      style: {
+        margin: 'auto'
+      },
+      alt: label,
+      src: sanitizeImageSource(iconUrl)
+    });
+  } else {
+    Icon = icon || iconsByType(type);
   }
-  return 'a';
+  return Icon;
 }
 
 var InjectedRendersRoot = (() => {
@@ -1388,20 +1491,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;
@@ -1412,13 +1515,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 */
@@ -1559,8 +1662,8 @@ class Dragging {
     }
   }
 
-  /**
-   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+  /**
+   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
    */
   createDragulaInstance(options) {
     const {
@@ -1731,13 +1834,13 @@ function FieldResizer(props) {
     field,
     position
   } = props;
-  const ref = useRef$1(null);
+  const ref = useRef(null);
   const formLayoutValidator = useService$1('formLayoutValidator');
   const modeling = useService$1('modeling');
 
   // we can't use state as we need to
   // manipulate this inside dragging events
-  const context = useRef$1({
+  const context = useRef({
     startColumns: 0,
     newColumns: 0
   });
@@ -1881,7 +1984,7 @@ function Element$1(props) {
     type,
     showOutline
   } = field;
-  const ref = useRef$1();
+  const ref = useRef();
   function scrollIntoView({
     selection
   }) {
@@ -1974,7 +2077,7 @@ function DebugColumns(props) {
     return null;
   }
   return 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'
   });
@@ -2051,8 +2154,8 @@ function FormEditor$1(props) {
   const {
     ariaLabel
   } = properties;
-  const formContainerRef = useRef$1(null);
-  const propertiesPanelRef = useRef$1(null);
+  const formContainerRef = useRef(null);
+  const propertiesPanelRef = useRef(null);
   const [, setSelection] = useState(schema);
   useEffect(() => {
     function handleSelectionChanged(event) {
@@ -2114,6 +2217,9 @@ function FormEditor$1(props) {
 
   // fire event after render to notify interested parties
   useEffect(() => {
+    eventBus.fire('rendered');
+
+    // keep deprecated event to ensure backward compatibility
     eventBus.fire('formEditor.rendered');
   }, []);
   const [hoveredId, setHoveredId] = useState(null);
@@ -2209,15 +2315,20 @@ function CreatePreview(props) {
   const {
     drake
   } = 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 = iconsByType(fieldType);
+      } = paletteEntry;
+      const Icon = getPaletteIcon(paletteEntry);
       clone.innerHTML = '';
       clone.class = 'gu-mirror';
       clone.classList.add('fjs-field-preview-container');
@@ -2258,8 +2369,8 @@ 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);
@@ -2674,7 +2785,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
@@ -2807,7 +2918,7 @@ Keyboard.prototype.addListener = function (priority, listener, type) {
   if (isFunction(priority)) {
     type = listener;
     listener = priority;
-    priority = DEFAULT_PRIORITY$1;
+    priority = DEFAULT_PRIORITY$2;
   }
   this._eventBus.on(type || KEYDOWN_EVENT, priority, listener);
 };
@@ -3045,10 +3156,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;
@@ -3109,10 +3220,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;
@@ -3175,11 +3286,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;
@@ -3284,10 +3395,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;
@@ -3347,9 +3458,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;
@@ -3382,9 +3493,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;
@@ -3425,9 +3536,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;
@@ -3625,7 +3736,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
@@ -3686,7 +3797,7 @@ CommandInterceptor.prototype.on = function (events, hook, priority, handlerFn, u
     that = unwrap;
     unwrap = handlerFn;
     handlerFn = priority;
-    priority = DEFAULT_PRIORITY;
+    priority = DEFAULT_PRIORITY$1;
   }
   if (isObject(unwrap)) {
     that = unwrap;
@@ -3989,8 +4100,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 {
@@ -4570,22 +4681,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;
@@ -4598,10 +4709,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`, {
@@ -4609,22 +4720,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) {
@@ -4877,8 +4988,8 @@ function Tooltip(props) {
   const [visible, setShow] = useState(false);
   const [focusedViaKeyboard, setFocusedViaKeyboard] = useState(false);
   let timeout = null;
-  const wrapperRef = useRef$1(null);
-  const tooltipRef = useRef$1(null);
+  const wrapperRef = useRef(null);
+  const tooltipRef = useRef(null);
   const showTooltip = async event => {
     const show = () => setShow(true);
     if (!visible && !timeout) {
@@ -5041,7 +5152,7 @@ function useEvent(event, callback, eventBus) {
       eventBus
     } = eventContext);
   }
-  const didMount = useRef$1(false);
+  const didMount = useRef(false);
 
   // (1) subscribe immediately
   if (eventBus && !didMount.current) {
@@ -5097,7 +5208,7 @@ function useLayoutState(path, defaultValue) {
  */
 
 function usePrevious(value) {
-  const ref = useRef$1();
+  const ref = useRef();
   useEffect(() => {
     ref.current = value;
   });
@@ -5115,8 +5226,8 @@ function useShowEntryEvent(id) {
   const {
     onShow
   } = useContext(LayoutContext);
-  const ref = useRef$1();
-  const focus = useRef$1(false);
+  const ref = useRef();
+  const focus = useRef(false);
   const onShowEntry = useCallback(event => {
     if (event.id === id) {
       onShow();
@@ -5222,7 +5333,7 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
  * @returns {Function} static function reference
  */
 function useStaticCallback(callback) {
-  const callbackRef = useRef$1(callback);
+  const callbackRef = useRef(callback);
   callbackRef.current = callback;
   return useCallback((...args) => callbackRef.current(...args), []);
 }
@@ -5234,7 +5345,7 @@ function Group(props) {
     label,
     shouldOpen = false
   } = props;
-  const groupRef = useRef$1(null);
+  const groupRef = useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
   const toggleOpen = () => setOpen(!open);
@@ -5424,7 +5535,7 @@ const CodeEditor$1 = forwardRef((props, ref) => {
     hostLanguage = null,
     singleLine = false
   } = props;
-  const inputRef = useRef$1();
+  const inputRef = useRef();
   const [editor, setEditor] = useState();
   const [localValue, setLocalValue] = useState(value || '');
   useBufferedFocus$1(editor, ref);
@@ -5523,7 +5634,7 @@ const CodeEditor = forwardRef((props, ref) => {
     tooltipContainer,
     variables
   } = props;
-  const inputRef = useRef$1();
+  const inputRef = useRef();
   const [editor, setEditor] = useState();
   const [localValue, setLocalValue] = useState(value || '');
   useBufferedFocus(editor, ref);
@@ -5755,9 +5866,10 @@ function PopupComponent(props, globalRef) {
     closeOnEscape = true,
     title
   } = props;
-  const focusTrapRef = useRef$1(null);
-  const localRef = useRef$1(null);
+  const focusTrapRef = useRef(null);
+  const localRef = useRef(null);
   const popupRef = globalRef || localRef;
+  const containerNode = useMemo(() => getContainerNode(container), [container]);
   const handleKeydown = event => {
     // do not allow keyboard events to bubble
     event.stopPropagation();
@@ -5817,7 +5929,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 = forwardRef(PopupComponent);
 Popup.Title = Title;
@@ -5835,12 +5947,12 @@ function Title(props) {
 
   // we can't use state as we need to
   // manipulate this inside dragging events
-  const context = useRef$1({
+  const context = useRef({
     startPosition: null,
     newPosition: null
   });
-  const dragPreviewRef = useRef$1();
-  const titleRef = useRef$1();
+  const dragPreviewRef = useRef();
+  const titleRef = useRef();
   const onMove = (event, delta) => {
     cancel(event);
     const {
@@ -5937,6 +6049,12 @@ function cancel(event) {
   event.preventDefault();
   event.stopPropagation();
 }
+function getContainerNode(node) {
+  if (typeof node === 'string') {
+    return query(node);
+  }
+  return node;
+}
 const FEEL_POPUP_WIDTH = 700;
 const FEEL_POPUP_HEIGHT = 250;
 
@@ -6047,9 +6165,9 @@ function FeelPopupComponent(props) {
     variables,
     emit
   } = props;
-  const editorRef = useRef$1();
-  const popupRef = useRef$1();
-  const isAutoCompletionOpen = useRef$1(false);
+  const editorRef = useRef();
+  const popupRef = useRef();
+  const isAutoCompletionOpen = useRef(false);
   const handleSetReturnFocus = () => {
     sourceElement && sourceElement.focus();
   };
@@ -6157,7 +6275,7 @@ function autoCompletionOpen(element) {
  * @param {Array} deps
  */
 function useUpdateEffect(effect, deps) {
-  const isMounted = useRef$1(false);
+  const isMounted = useRef(false);
   useEffect(() => {
     if (isMounted.current) {
       return effect();
@@ -6461,7 +6579,7 @@ function FeelTextfield(props) {
   } = props;
   const [localValue, _setLocalValue] = useState(value);
   const editorRef = useShowEntryEvent(id);
-  const containerRef = useRef$1();
+  const containerRef = useRef();
   const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
   const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
   const [focus, _setFocus] = useState(undefined);
@@ -6484,7 +6602,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);
@@ -6652,7 +6770,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = useRef$1();
+  const inputRef = useRef();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -6699,7 +6817,7 @@ const OptionalFeelNumberField = forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = useRef$1();
+  const inputRef = useRef();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -6742,7 +6860,7 @@ forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = useRef$1();
+  const inputRef = useRef();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -6781,7 +6899,7 @@ const OptionalFeelToggleSwitch = forwardRef((props, ref) => {
     onBlur,
     switcherLabel
   } = props;
-  const inputRef = useRef$1();
+  const inputRef = useRef();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -6813,7 +6931,7 @@ forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = useRef$1();
+  const inputRef = useRef();
   const handleChange = ({
     target
   }) => {
@@ -7327,7 +7445,7 @@ function createTooltipContext(overrides = {}) {
  * @param {Array} deps
  */
 function useUpdateLayoutEffect(effect, deps) {
-  const isMounted = useRef$1(false);
+  const isMounted = useRef(false);
   useLayoutEffect(() => {
     if (isMounted.current) {
       return effect();
@@ -7446,7 +7564,7 @@ function ListGroup(props) {
     shouldOpen = true,
     shouldSort = true
   } = props;
-  const groupRef = useRef$1(null);
+  const groupRef = useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
   const [sticky, setSticky] = useState(false);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
@@ -8246,11 +8364,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 = createContext({
@@ -8288,25 +8406,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
+  } = 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 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 {
@@ -8330,25 +8466,43 @@ const PropertiesPanelHeaderProvider = {
     const {
       type
     } = field;
-    const Icon = 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 || iconsByType(type);
     if (Icon) {
       return () => 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: () => {
@@ -8363,92 +8517,256 @@ const PropertiesPanelPlaceholderProvider = {
   }
 };
 
-function ActionEntry(props) {
+function FormPropertiesPanel(props) {
   const {
-    editField,
-    field
+    eventBus,
+    getProviders,
+    injector
   } = props;
+  const formEditor = injector.get('formEditor');
+  const modeling = injector.get('modeling');
+  const selectionModule = injector.get('selection');
+  const propertiesPanelConfig = injector.get('config.propertiesPanel') || {};
   const {
-    type
-  } = field;
-  const entries = [];
-  if (type === 'button') {
-    entries.push({
-      id: 'action',
-      component: Action,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$3
-    });
-  }
-  return entries;
-}
-function Action(props) {
-  const {
-    editField,
-    field,
-    id
-  } = props;
-  const path = ['action'];
-  const getValue = () => {
-    return get(field, path, '');
-  };
-  const setValue = value => {
-    return editField(field, path, value);
-  };
-  const getOptions = () => [{
-    label: 'Submit',
-    value: 'submit'
-  }, {
-    label: 'Reset',
-    value: 'reset'
-  }];
-  return SelectEntry({
-    element: field,
-    getOptions,
-    getValue,
-    id,
-    label: 'Action',
-    setValue
+    feelPopupContainer
+  } = propertiesPanelConfig;
+  const [state, setState] = useState({
+    selectedFormField: selectionModule.get() || formEditor._getState().schema
   });
-}
-
-function useService (type, strict) {
-  const {
+  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({
+      selectedFormField: selectionModule.get() || formEditor._getState().schema
+    });
+
+    // notify interested parties on property panel updates
+    eventBus.fire('propertiesPanel.updated', {
+      formField: field
+    });
+  }, [eventBus, formEditor, selectionModule]);
+  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
-  } = useContext(FormPropertiesPanelContext);
-  return getService(type, strict);
+  };
+  const onFocus = () => eventBus.fire('propertiesPanel.focusin');
+  const onBlur = () => eventBus.fire('propertiesPanel.focusout');
+  const editField = useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]);
+
+  // retrieve groups for selected form field
+  const providers = getProviders(selectedFormField);
+  const groups = useMemo(() => {
+    return reduce(providers, function (groups, provider) {
+      // do not collect groups for multi element state
+      if (isArray(selectedFormField)) {
+        return [];
+      }
+      const updater = provider.getGroups(selectedFormField, editField);
+      return updater(groups);
+    }, []);
+  }, [providers, selectedFormField, editField]);
+  return jsx("div", {
+    class: "fjs-properties-panel",
+    "data-field": selectedFormField && selectedFormField.id,
+    onFocusCapture: onFocus,
+    onBlurCapture: onBlur,
+    children: jsx(FormPropertiesPanelContext.Provider, {
+      value: propertiesPanelContext,
+      children: jsx(PropertiesPanel, {
+        element: selectedFormField,
+        eventBus: eventBus,
+        groups: groups,
+        headerProvider: PropertiesPanelHeaderProvider,
+        placeholderProvider: PropertiesPanelPlaceholderProvider,
+        feelPopupContainer: feelPopupContainer
+      })
+    })
+  });
 }
 
-/**
- * Retrieve list of variables from the form schema.
- *
- * @returns { string[] } list of variables used in form schema
+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
  */
-function useVariables() {
-  const form = useService('formEditor');
-  const schema = form.getSchema();
-  return getSchemaVariables(schema);
+
+/**
+ * @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 = 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 = 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() {
+    render(jsx(FormPropertiesPanel, {
+      getProviders: this._getProviders.bind(this),
+      eventBus: this._eventBus,
+      injector: this._injector
+    }), this._container);
+    this._eventBus.fire('propertiesPanel.rendered');
+  }
+  _destroy() {
+    if (this._container) {
+      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 AltTextEntry(props) {
+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) {
   const {
-    type
-  } = field;
+    editField,
+    field,
+    id
+  } = props;
+  const path = ['action'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  const getOptions = () => [{
+    label: 'Submit',
+    value: 'submit'
+  }, {
+    label: 'Reset',
+    value: 'reset'
+  }];
+  return SelectEntry({
+    element: field,
+    getOptions,
+    getValue,
+    id,
+    label: 'Action',
+    setValue
+  });
+}
+
+function AltTextEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
   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) {
@@ -8559,19 +8877,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) {
@@ -8613,10 +8927,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,
@@ -8624,44 +8942,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) {
@@ -8846,19 +9159,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) {
@@ -8891,15 +9200,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) {
@@ -8970,19 +9278,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) {
@@ -9128,7 +9432,8 @@ function simpleBoolEntryFactory(options) {
     label,
     description,
     path,
-    props
+    props,
+    isDefaultVisible
   } = options;
   const {
     editField,
@@ -9142,7 +9447,8 @@ function simpleBoolEntryFactory(options) {
     editField,
     description,
     component: SimpleBoolComponent,
-    isEdited: isEdited$5
+    isEdited: isEdited$5,
+    isDefaultVisible
   };
 }
 const SimpleBoolComponent = props => {
@@ -9190,39 +9496,35 @@ function LabelEntry(props) {
     field,
     editField
   } = props;
-  const {
-    type,
-    subtype
-  } = field;
   const entries = [];
-  if (type === 'datetime') {
-    if (subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME) {
-      entries.push({
-        id: 'date-label',
-        component: DateLabel,
-        editField,
-        field,
-        isEdited: isEdited$6
-      });
+  entries.push({
+    id: 'date-label',
+    component: DateLabel,
+    editField,
+    field,
+    isEdited: isEdited$6,
+    isDefaultVisible: function (field) {
+      return field.type === 'datetime' && (field.subtype === DATETIME_SUBTYPES.DATE || field.subtype === DATETIME_SUBTYPES.DATETIME);
     }
-    if (subtype === DATETIME_SUBTYPES.TIME || subtype === 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 === DATETIME_SUBTYPES.TIME || field.subtype === 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) {
@@ -9316,19 +9618,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) {
@@ -9366,24 +9664,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
@@ -9442,19 +9731,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;
 }
@@ -9493,26 +9777,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;
 }
@@ -9597,19 +9877,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;
 }
@@ -9648,29 +9923,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 === DATETIME_SUBTYPES.TIME || subtype === 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 === DATETIME_SUBTYPES.TIME || field.subtype === DATETIME_SUBTYPES.DATETIME)
+  });
   return entries;
 }
 function DateTimeSubtypeSelect(props) {
@@ -9758,32 +10026,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 === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
-    entries.push({
-      id: id + '-timeInterval',
-      component: TimeIntervalSelect,
-      isEdited: isEdited$3,
-      editField,
-      field
-    });
-  }
-  if (subtype === DATETIME_SUBTYPES.DATE || subtype === 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([DATETIME_SUBTYPES.TIME, DATETIME_SUBTYPES.DATETIME])
+  });
+  entries.push({
+    id: id + '-disallowPassedDates',
+    component: DisallowPassedDates,
+    isEdited: isEdited$5,
+    editField,
+    field,
+    isDefaultVisible: isDefaultVisible([DATETIME_SUBTYPES.DATE, DATETIME_SUBTYPES.DATETIME])
+  });
   return entries;
 }
 function DisallowPassedDates(props) {
@@ -9837,23 +10104,15 @@ function DateTimeFormatEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type,
-    subtype
-  } = field;
-  if (type !== 'datetime') {
-    return [];
-  }
   const entries = [];
-  if (subtype === DATETIME_SUBTYPES.TIME || subtype === 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 === DATETIME_SUBTYPES.TIME || field.subtype === DATETIME_SUBTYPES.DATETIME)
+  });
   return entries;
 }
 function TimeFormatSelect(props) {
@@ -9881,20 +10140,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;
 }
@@ -10074,14 +10325,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 {
@@ -10090,14 +10341,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) => {
@@ -10339,9 +10590,6 @@ function AdornerEntry(props) {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
   const entries = [];
   const onChange = key => {
     return value => {
@@ -10354,26 +10602,26 @@ function AdornerEntry(props) {
       return 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) {
@@ -10427,19 +10675,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) {
@@ -10623,6 +10867,9 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField
   })];
+  if (entries.length === 0) {
+    return null;
+  }
   return {
     id: 'general',
     label: 'General',
@@ -10683,9 +10930,6 @@ function ValidationGroup(field, editField) {
   } = field;
   const validate = 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 = get(field, ['validate'], {});
@@ -10703,63 +10947,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',
@@ -10913,12 +11156,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 = {
@@ -10927,8 +11172,8 @@ function ValuesGroups(field, editField) {
   };
   const valuesSourceId = `${fieldId}-valuesSource`;
 
-  /**
-   * @type {Array<Group|ListGroup>}
+  /**
+   * @type {Array<Group|ListGroup>}
    */
   const groups = [{
     id: valuesSourceId,
@@ -11049,13 +11294,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) => {
@@ -11124,158 +11369,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] = useState({
-    selectedFormField: selectionModule.get() || formEditor._getState().schema
-  });
-  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({
-      selectedFormField: selectionModule.get() || formEditor._getState().schema
-    });
-
-    // notify interested parties on property panel updates
-    eventBus.fire('propertiesPanel.updated', {
-      formField: field
-    });
-  }, [eventBus, formEditor, selectionModule]);
-  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 = useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]);
-  return jsx("div", {
-    class: "fjs-properties-panel",
-    "data-field": selectedFormField && selectedFormField.id,
-    onFocusCapture: onFocus,
-    onBlurCapture: onBlur,
-    children: jsx(FormPropertiesPanelContext.Provider, {
-      value: propertiesPanelContext,
-      children: 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 = 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 = 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() {
-    render(jsx(FormPropertiesPanel, {
-      eventBus: this._eventBus,
-      injector: this._injector
-    }), this._container);
-    this._eventBus.fire('propertiesPanel.rendered');
-  }
-  _destroy() {
-    if (this._container) {
-      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) {
@@ -11284,10 +11435,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, {
@@ -11296,17 +11447,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;
@@ -11340,48 +11491,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 = createFormContainer();
     this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -11392,15 +11543,15 @@ class FormEditor {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {any}
+    /**
+     * @private
+     * @type {any}
      */
     this.exporter = exporter;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       properties,
@@ -11429,10 +11580,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) => {
@@ -11461,15 +11612,15 @@ class FormEditor {
     });
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   saveSchema() {
     return this.getSchema();
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   getSchema() {
     const {
@@ -11478,8 +11629,8 @@ class FormEditor {
     return exportSchema(schema, this.exporter, schemaVersion);
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -11497,10 +11648,10 @@ class FormEditor {
     this._detach();
   }
 
-  /**
-   * @internal
-   *
-   * @param {boolean} [emit]
+  /**
+   * @internal
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -11514,9 +11665,9 @@ class FormEditor {
     parentNode.removeChild(container);
   }
 
-  /**
-   * @param {any} property
-   * @param {any} value
+  /**
+   * @param {any} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = set$1(this._getState().properties, [property], value);
@@ -11525,21 +11676,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 {
@@ -11561,22 +11712,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 = {
@@ -11586,15 +11737,15 @@ class FormEditor {
     this._emit('changed', this._getState());
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getModules() {
     return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);
@@ -11642,5 +11793,5 @@ function createFormEditor(options) {
   });
 }
 
-export { FormEditor, createFormEditor };
+export { FormEditor, createFormEditor, useDebounce, usePrevious$1 as usePrevious, useService as usePropertiesPanelService, useService$1 as useService, useVariables };
 //# sourceMappingURL=index.es.js.map