@bpmn-io/form-js-viewer 1.1.0 → 1.3.0-alpha.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import Ids from 'ids';
-import { isString, uniqueBy, isArray, get, set, isFunction, isNumber, bind, assign, isNil, groupBy, flatten, isUndefined, findIndex, isObject } from 'min-dash';
+import { isString, get, set, isObject, values, uniqueBy, isArray, isFunction, isNumber, bind, assign, isNil, groupBy, flatten, findIndex, isUndefined } from 'min-dash';
 import Big from 'big.js';
 import { parseExpression, parseUnaryTests, evaluate, unaryTest } from 'feelin';
 import { evaluate as evaluate$1, parser, buildSimpleTree } from 'feelers';
@@ -47,26 +47,26 @@ const getFlavouredFeelVariableNames = (feelString, feelFlavour = 'expression', o
   return [...new Set(variables)];
 };
 
-/**
- * Get the variable name at the specified index in a given path expression.
- *
- * @param {Object} root - The root node of the path expression tree.
- * @param {number} index - The index of the variable name to retrieve.
- * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+/**
+ * Get the variable name at the specified index in a given path expression.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @param {number} index - The index of the variable name to retrieve.
+ * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
  */
 const _getVariableNameAtPathIndex = (root, index) => {
   const accessors = _deconstructPathExpression(root);
   return accessors[index] || null;
 };
 
-/**
- * Extracts the variables which are required of the external context for a given path expression.
- * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
- *
- * @param {Object} node - The root node of the path expression tree.
- * @param {number} initialDepth - The depth at which the root node is located in the outer context.
- * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
- * @returns {Set} - A set containing the extracted variable names.
+/**
+ * Extracts the variables which are required of the external context for a given path expression.
+ * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+ *
+ * @param {Object} node - The root node of the path expression tree.
+ * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+ * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+ * @returns {Set} - A set containing the extracted variable names.
  */
 const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
   // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
@@ -112,11 +112,11 @@ const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) =
   return new Set(extractedVariables);
 };
 
-/**
- * Deconstructs a path expression tree into an array of components.
- *
- * @param {Object} root - The root node of the path expression tree.
- * @returns {Array<string>} An array of components in the path expression, in the correct order.
+/**
+ * Deconstructs a path expression tree into an array of components.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @returns {Array<string>} An array of components in the path expression, in the correct order.
  */
 const _deconstructPathExpression = root => {
   let node = root;
@@ -135,13 +135,13 @@ const _deconstructPathExpression = root => {
   return parts.reverse();
 };
 
-/**
- * Builds a simplified feel structure tree from the given parse tree and feel string.
- * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
- *
- * @param {Object} parseTree - The parse tree generated by a parser.
- * @param {string} feelString - The feel string used for parsing.
- * @returns {Object} The simplified feel structure tree.
+/**
+ * Builds a simplified feel structure tree from the given parse tree and feel string.
+ * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+ *
+ * @param {Object} parseTree - The parse tree generated by a parser.
+ * @param {string} feelString - The feel string used for parsing.
+ * @returns {Object} The simplified feel structure tree.
  */
 const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
   const stack = [{
@@ -167,9 +167,9 @@ const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
   return _extractFilterExpressions(stack[0].children[0]);
 };
 
-/**
- * Restructure the tree in such a way to bring filters (which create new contexts) to the root of the tree.
- * This is done to simplify the extraction of variables and match the context hierarchy.
+/**
+ * Restructure the tree in such a way to bring filters (which create new contexts) to the root of the tree.
+ * This is done to simplify the extraction of variables and match the context hierarchy.
  */
 const _extractFilterExpressions = tree => {
   const flattenedExpressionTree = {
@@ -210,25 +210,25 @@ class FeelExpressionLanguage {
     this._eventBus = eventBus;
   }
 
-  /**
-   * Determines if the given value is a FEEL expression.
-   *
-   * @param {any} value
-   * @returns {boolean}
-   *
+  /**
+   * Determines if the given value is a FEEL expression.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
    */
   isExpression(value) {
     return isString(value) && value.startsWith('=');
   }
 
-  /**
-   * Retrieve variable names from a given FEEL expression.
-   *
-   * @param {string} expression
-   * @param {object} [options]
-   * @param {string} [options.type]
-   *
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from a given FEEL expression.
+   *
+   * @param {string} expression
+   * @param {object} [options]
+   * @param {string} [options.type]
+   *
+   * @returns {string[]}
    */
   getVariableNames(expression, options = {}) {
     const {
@@ -243,13 +243,13 @@ class FeelExpressionLanguage {
     return getFlavouredFeelVariableNames(expression, type);
   }
 
-  /**
-   * Evaluate an expression.
-   *
-   * @param {string} expression
-   * @param {import('../../types').Data} [data]
-   *
-   * @returns {any}
+  /**
+   * Evaluate an expression.
+   *
+   * @param {string} expression
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {any}
    */
   evaluate(expression, data = {}) {
     if (!expression) {
@@ -274,23 +274,23 @@ FeelExpressionLanguage.$inject = ['eventBus'];
 class FeelersTemplating {
   constructor() {}
 
-  /**
-   * Determines if the given value is a feelers template.
-   *
-   * @param {any} value
-   * @returns {boolean}
-   *
+  /**
+   * Determines if the given value is a feelers template.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
    */
   isTemplate(value) {
     return isString(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
   }
 
-  /**
-   * Retrieve variable names from a given feelers template.
-   *
-   * @param {string} template
-   *
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from a given feelers template.
+   *
+   * @param {string} template
+   *
+   * @returns {string[]}
    */
   getVariableNames(template) {
     if (!this.isTemplate(template)) {
@@ -316,17 +316,17 @@ class FeelersTemplating {
     }, []);
   }
 
-  /**
-   * Evaluate a template.
-   *
-   * @param {string} template
-   * @param {Object<string, any>} context
-   * @param {Object} options
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
-   * @returns
+  /**
+   * Evaluate a template.
+   *
+   * @param {string} template
+   * @param {Object<string, any>} context
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
+   * @returns
    */
   evaluate(template, context = {}, options = {}) {
     const {
@@ -341,22 +341,22 @@ class FeelersTemplating {
     });
   }
 
-  /**
-  * @typedef {Object} ExpressionWithDepth
-  * @property {number} depth - The depth of the expression in the syntax tree.
-  * @property {string} expression - The extracted expression
+  /**
+  * @typedef {Object} ExpressionWithDepth
+  * @property {number} depth - The depth of the expression in the syntax tree.
+  * @property {string} expression - The extracted expression
   */
 
-  /**
-  * Extracts all feel expressions in the template along with their depth in the syntax tree.
-  * The depth is incremented for child expressions of loops to account for context drilling.
-  * @name extractExpressionsWithDepth
-  * @param {string} template - A feelers template string.
-  * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
-  *
-  * @example
-  * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
-  * const extractedExpressions = _extractExpressionsWithDepth(template);
+  /**
+  * Extracts all feel expressions in the template along with their depth in the syntax tree.
+  * The depth is incremented for child expressions of loops to account for context drilling.
+   * @name extractExpressionsWithDepth
+  * @param {string} template - A feelers template string.
+  * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+  *
+  * @example
+  * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+  * const extractedExpressions = _extractExpressionsWithDepth(template);
   */
   _extractExpressionsWithDepth(template) {
     // build simplified feelers syntax tree
@@ -387,47 +387,271 @@ class FeelersTemplating {
 }
 FeelersTemplating.$inject = [];
 
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+// config  ///////////////////
+
+const MINUTES_IN_DAY = 60 * 24;
+const DATETIME_SUBTYPES = {
+  DATE: 'date',
+  TIME: 'time',
+  DATETIME: 'datetime'
+};
+const TIME_SERIALISING_FORMATS = {
+  UTC_OFFSET: 'utc_offset',
+  UTC_NORMALIZED: 'utc_normalized',
+  NO_TIMEZONE: 'no_timezone'
+};
+const DATETIME_SUBTYPES_LABELS = {
+  [DATETIME_SUBTYPES.DATE]: 'Date',
+  [DATETIME_SUBTYPES.TIME]: 'Time',
+  [DATETIME_SUBTYPES.DATETIME]: 'Date & Time'
+};
+const TIME_SERIALISINGFORMAT_LABELS = {
+  [TIME_SERIALISING_FORMATS.UTC_OFFSET]: 'UTC offset',
+  [TIME_SERIALISING_FORMATS.UTC_NORMALIZED]: 'UTC normalized',
+  [TIME_SERIALISING_FORMATS.NO_TIMEZONE]: 'No timezone'
+};
+const DATETIME_SUBTYPE_PATH = ['subtype'];
+const DATE_LABEL_PATH = ['dateLabel'];
+const DATE_DISALLOW_PAST_PATH = ['disallowPassedDates'];
+const TIME_LABEL_PATH = ['timeLabel'];
+const TIME_USE24H_PATH = ['use24h'];
+const TIME_INTERVAL_PATH = ['timeInterval'];
+const TIME_SERIALISING_FORMAT_PATH = ['timeSerializingFormat'];
+
+// config  ///////////////////
+
+const VALUES_SOURCES = {
+  STATIC: 'static',
+  INPUT: 'input',
+  EXPRESSION: 'expression'
+};
+const VALUES_SOURCE_DEFAULT = VALUES_SOURCES.STATIC;
+const VALUES_SOURCES_LABELS = {
+  [VALUES_SOURCES.STATIC]: 'Static',
+  [VALUES_SOURCES.INPUT]: 'Input data',
+  [VALUES_SOURCES.EXPRESSION]: 'Expression'
+};
+const VALUES_SOURCES_PATHS = {
+  [VALUES_SOURCES.STATIC]: ['values'],
+  [VALUES_SOURCES.INPUT]: ['valuesKey'],
+  [VALUES_SOURCES.EXPRESSION]: ['valuesExpression']
+};
+const VALUES_SOURCES_DEFAULTS = {
+  [VALUES_SOURCES.STATIC]: [{
+    label: 'Value',
+    value: 'value'
+  }],
+  [VALUES_SOURCES.INPUT]: '',
+  [VALUES_SOURCES.EXPRESSION]: '='
+};
+
+// helpers ///////////////////
+
+function getValuesSource(field) {
+  for (const source of Object.values(VALUES_SOURCES)) {
+    if (get(field, VALUES_SOURCES_PATHS[source]) !== undefined) {
+      return source;
+    }
+  }
+  return VALUES_SOURCE_DEFAULT;
+}
+
+function createInjector(bootstrapModules) {
+  const injector = new Injector(bootstrapModules);
+  injector.init();
+  return injector;
+}
+
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
+ */
+function createFormContainer(prefix = 'fjs') {
+  const container = document.createElement('div');
+  container.classList.add(`${prefix}-container`);
+  return container;
+}
+
+const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression'];
+const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text'];
+function isRequired(field) {
+  return field.required;
+}
+function pathParse(path) {
+  if (!path) {
+    return [];
+  }
+  return path.split('.').map(key => {
+    return isNaN(parseInt(key)) ? key : parseInt(key);
+  });
+}
+function pathsEqual(a, b) {
+  return a && b && a.length === b.length && a.every((value, index) => value === b[index]);
+}
+const indices = {};
+function generateIndexForType(type) {
+  if (type in indices) {
+    indices[type]++;
+  } else {
+    indices[type] = 1;
+  }
+  return indices[type];
+}
+function generateIdForType(type) {
+  return `${type}${generateIndexForType(type)}`;
+}
+
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
+ */
+function clone(data, replacer) {
+  return JSON.parse(JSON.stringify(data, replacer));
+}
+
+/**
+ * Parse the schema for input variables a form might make use of
+ *
+ * @param {any} schema
+ *
+ * @return {string[]}
+ */
+function getSchemaVariables(schema, options = {}) {
+  const {
+    expressionLanguage = new FeelExpressionLanguage(null),
+    templating = new FeelersTemplating(),
+    inputs = true,
+    outputs = true
+  } = options;
+  if (!schema.components) {
+    return [];
+  }
+  const getAllComponents = node => {
+    const components = [];
+    if (node.components) {
+      node.components.forEach(component => {
+        components.push(component);
+        components.push(...getAllComponents(component));
+      });
+    }
+    return components;
+  };
+  const variables = getAllComponents(schema).reduce((variables, component) => {
+    const {
+      valuesKey
+    } = component;
+
+    // collect input-only variables
+    if (inputs) {
+      if (valuesKey) {
+        variables = [...variables, valuesKey];
+      }
+      EXPRESSION_PROPERTIES.forEach(prop => {
+        const property = get(component, prop.split('.'));
+        if (property && expressionLanguage.isExpression(property)) {
+          const expressionVariables = expressionLanguage.getVariableNames(property, {
+            type: 'expression'
+          });
+          variables = [...variables, ...expressionVariables];
+        }
+      });
+      TEMPLATE_PROPERTIES.forEach(prop => {
+        const property = get(component, prop.split('.'));
+        if (property && !expressionLanguage.isExpression(property) && templating.isTemplate(property)) {
+          const templateVariables = templating.getVariableNames(property);
+          variables = [...variables, ...templateVariables];
+        }
+      });
+    }
+    return variables.filter(variable => variable !== undefined || variable !== null);
+  }, []);
+  const getBindingVariables = node => {
+    const bindingVariable = [];
+
+    // c.f. https://github.com/bpmn-io/form-js/issues/778 @Skaiir to remove?
+    if (node.type === 'button') {
+      return [];
+    } else if (node.key) {
+      return [node.key.split('.')[0]];
+    } else if (node.path) {
+      return [node.path.split('.')[0]];
+    } else if (node.components) {
+      node.components.forEach(component => {
+        bindingVariable.push(...getBindingVariables(component));
+      });
+    }
+    return bindingVariable;
+  };
+
+  // collect binding variables
+  if (inputs || outputs) {
+    variables.push(...getBindingVariables(schema));
+  }
+
+  // remove duplicates
+  return Array.from(new Set(variables));
+}
+function runRecursively(formField, fn) {
+  const components = formField.components || [];
+  components.forEach((component, index) => {
+    runRecursively(component, fn);
+  });
+  fn(formField);
+}
+
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 
 class ConditionChecker {
-  constructor(formFieldRegistry, eventBus) {
+  constructor(formFieldRegistry, pathRegistry, eventBus) {
     this._formFieldRegistry = formFieldRegistry;
+    this._pathRegistry = pathRegistry;
     this._eventBus = eventBus;
   }
 
-  /**
-   * For given data, remove properties based on condition.
-   *
-   * @param {Object<string, any>} properties
-   * @param {Object<string, any>} data
+  /**
+   * For given data, remove properties based on condition.
+   *
+   * @param {Object<string, any>} properties
+   * @param {Object<string, any>} data
    */
   applyConditions(properties, data = {}) {
-    const conditions = this._getConditions();
-    const newProperties = {
-      ...properties
-    };
-    for (const {
-      key,
-      condition
-    } of conditions) {
-      const shouldRemove = this._checkHideCondition(condition, data);
-      if (shouldRemove) {
-        delete newProperties[key];
-      }
+    const newProperties = clone(properties);
+    const form = this._formFieldRegistry.getAll().find(field => field.type === 'default');
+    if (!form) {
+      throw new Error('form field registry has no form');
     }
+    this._pathRegistry.executeRecursivelyOnFields(form, ({
+      field,
+      isClosed,
+      context
+    }) => {
+      const {
+        conditional: condition
+      } = field;
+      context.isHidden = context.isHidden || condition && this._checkHideCondition(condition, data);
+
+      // only clear the leaf nodes, as groups may both point to the same path
+      if (context.isHidden && isClosed) {
+        const valuePath = this._pathRegistry.getValuePath(field);
+        this._clearObjectValueRecursively(valuePath, newProperties);
+      }
+    });
     return newProperties;
   }
 
-  /**
-   * Check if given condition is met. Returns null for invalid/missing conditions.
-   *
-   * @param {string} condition
-   * @param {import('../../types').Data} [data]
-   *
-   * @returns {boolean|null}
+  /**
+   * Check if given condition is met. Returns null for invalid/missing conditions.
+   *
+   * @param {string} condition
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {boolean|null}
    */
   check(condition, data = {}) {
     if (!condition) {
@@ -448,12 +672,12 @@ class ConditionChecker {
     }
   }
 
-  /**
-   * Check if hide condition is met.
-   *
-   * @param {Condition} condition
-   * @param {Object<string, any>} data
-   * @returns {boolean}
+  /**
+   * Check if hide condition is met.
+   *
+   * @param {Condition} condition
+   * @param {Object<string, any>} data
+   * @returns {boolean}
    */
   _checkHideCondition(condition, data) {
     if (!condition.hide) {
@@ -462,24 +686,18 @@ class ConditionChecker {
     const result = this.check(condition.hide, data);
     return result === true;
   }
-  _getConditions() {
-    const formFields = this._formFieldRegistry.getAll();
-    return formFields.reduce((conditions, formField) => {
-      const {
-        key,
-        conditional: condition
-      } = formField;
-      if (key && condition) {
-        return [...conditions, {
-          key,
-          condition
-        }];
-      }
-      return conditions;
-    }, []);
+  _clearObjectValueRecursively(valuePath, obj) {
+    const workingValuePath = [...valuePath];
+    let recurse = false;
+    do {
+      set(obj, workingValuePath, undefined);
+      workingValuePath.pop();
+      const parentObject = get(obj, workingValuePath);
+      recurse = isObject(parentObject) && !values(parentObject).length && !!workingValuePath.length;
+    } while (recurse);
   }
 }
-ConditionChecker.$inject = ['formFieldRegistry', 'eventBus'];
+ConditionChecker.$inject = ['formFieldRegistry', 'pathRegistry', 'eventBus'];
 
 var ExpressionLanguageModule = {
   __init__: ['expressionLanguage', 'templating', 'conditionChecker'],
@@ -495,12 +713,12 @@ class MarkdownRenderer {
     this._converter = new showdown.Converter();
   }
 
-  /**
-   * Render markdown to HTML.
-   *
-   * @param {string} markdown - The markdown to render
-   *
-   * @returns {string} HTML
+  /**
+   * Render markdown to HTML.
+   *
+   * @param {string} markdown - The markdown to render
+   *
+   * @returns {string} HTML
    */
   render(markdown) {
     return this._converter.makeHtml(markdown);
@@ -984,203 +1202,6 @@ var commandModule = {
   commandStack: ['type', CommandStack]
 };
 
-// config  ///////////////////
-
-const MINUTES_IN_DAY = 60 * 24;
-const DATETIME_SUBTYPES = {
-  DATE: 'date',
-  TIME: 'time',
-  DATETIME: 'datetime'
-};
-const TIME_SERIALISING_FORMATS = {
-  UTC_OFFSET: 'utc_offset',
-  UTC_NORMALIZED: 'utc_normalized',
-  NO_TIMEZONE: 'no_timezone'
-};
-const DATETIME_SUBTYPES_LABELS = {
-  [DATETIME_SUBTYPES.DATE]: 'Date',
-  [DATETIME_SUBTYPES.TIME]: 'Time',
-  [DATETIME_SUBTYPES.DATETIME]: 'Date & Time'
-};
-const TIME_SERIALISINGFORMAT_LABELS = {
-  [TIME_SERIALISING_FORMATS.UTC_OFFSET]: 'UTC offset',
-  [TIME_SERIALISING_FORMATS.UTC_NORMALIZED]: 'UTC normalized',
-  [TIME_SERIALISING_FORMATS.NO_TIMEZONE]: 'No timezone'
-};
-const DATETIME_SUBTYPE_PATH = ['subtype'];
-const DATE_LABEL_PATH = ['dateLabel'];
-const DATE_DISALLOW_PAST_PATH = ['disallowPassedDates'];
-const TIME_LABEL_PATH = ['timeLabel'];
-const TIME_USE24H_PATH = ['use24h'];
-const TIME_INTERVAL_PATH = ['timeInterval'];
-const TIME_SERIALISING_FORMAT_PATH = ['timeSerializingFormat'];
-
-// config  ///////////////////
-
-const VALUES_SOURCES = {
-  STATIC: 'static',
-  INPUT: 'input',
-  EXPRESSION: 'expression'
-};
-const VALUES_SOURCE_DEFAULT = VALUES_SOURCES.STATIC;
-const VALUES_SOURCES_LABELS = {
-  [VALUES_SOURCES.STATIC]: 'Static',
-  [VALUES_SOURCES.INPUT]: 'Input data',
-  [VALUES_SOURCES.EXPRESSION]: 'Expression'
-};
-const VALUES_SOURCES_PATHS = {
-  [VALUES_SOURCES.STATIC]: ['values'],
-  [VALUES_SOURCES.INPUT]: ['valuesKey'],
-  [VALUES_SOURCES.EXPRESSION]: ['valuesExpression']
-};
-const VALUES_SOURCES_DEFAULTS = {
-  [VALUES_SOURCES.STATIC]: [{
-    label: 'Value',
-    value: 'value'
-  }],
-  [VALUES_SOURCES.INPUT]: '',
-  [VALUES_SOURCES.EXPRESSION]: '='
-};
-
-// helpers ///////////////////
-
-function getValuesSource(field) {
-  for (const source of Object.values(VALUES_SOURCES)) {
-    if (get(field, VALUES_SOURCES_PATHS[source]) !== undefined) {
-      return source;
-    }
-  }
-  return VALUES_SOURCE_DEFAULT;
-}
-
-function createInjector(bootstrapModules) {
-  const injector = new Injector(bootstrapModules);
-  injector.init();
-  return injector;
-}
-
-/**
- * @param {string?} prefix
- *
- * @returns Element
- */
-function createFormContainer(prefix = 'fjs') {
-  const container = document.createElement('div');
-  container.classList.add(`${prefix}-container`);
-  return container;
-}
-
-const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression'];
-const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text'];
-function findErrors(errors, path) {
-  return errors[pathStringify(path)];
-}
-function isRequired(field) {
-  return field.required;
-}
-function pathParse(path) {
-  if (!path) {
-    return [];
-  }
-  return path.split('.').map(key => {
-    return isNaN(parseInt(key)) ? key : parseInt(key);
-  });
-}
-function pathsEqual(a, b) {
-  return a && b && a.length === b.length && a.every((value, index) => value === b[index]);
-}
-function pathStringify(path) {
-  if (!path) {
-    return '';
-  }
-  return path.join('.');
-}
-const indices = {};
-function generateIndexForType(type) {
-  if (type in indices) {
-    indices[type]++;
-  } else {
-    indices[type] = 1;
-  }
-  return indices[type];
-}
-function generateIdForType(type) {
-  return `${type}${generateIndexForType(type)}`;
-}
-
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
- */
-function clone(data, replacer) {
-  return JSON.parse(JSON.stringify(data, replacer));
-}
-
-/**
- * Parse the schema for input variables a form might make use of
- *
- * @param {any} schema
- *
- * @return {string[]}
- */
-function getSchemaVariables(schema, options = {}) {
-  const {
-    expressionLanguage = new FeelExpressionLanguage(null),
-    templating = new FeelersTemplating(),
-    inputs = true,
-    outputs = true
-  } = options;
-  if (!schema.components) {
-    return [];
-  }
-  const variables = schema.components.reduce((variables, component) => {
-    const {
-      key,
-      valuesKey,
-      type
-    } = component;
-    if (['button'].includes(type)) {
-      return variables;
-    }
-
-    // collect bi-directional variables
-    if (inputs || outputs) {
-      if (key) {
-        variables = [...variables, key];
-      }
-    }
-
-    // collect input-only variables
-    if (inputs) {
-      if (valuesKey) {
-        variables = [...variables, valuesKey];
-      }
-      EXPRESSION_PROPERTIES.forEach(prop => {
-        const property = get(component, prop.split('.'));
-        if (property && expressionLanguage.isExpression(property)) {
-          const expressionVariables = expressionLanguage.getVariableNames(property, {
-            type: 'expression'
-          });
-          variables = [...variables, ...expressionVariables];
-        }
-      });
-      TEMPLATE_PROPERTIES.forEach(prop => {
-        const property = get(component, prop.split('.'));
-        if (property && !expressionLanguage.isExpression(property) && templating.isTemplate(property)) {
-          const templateVariables = templating.getVariableNames(property);
-          variables = [...variables, ...templateVariables];
-        }
-      });
-    }
-    return variables.filter(variable => variable !== undefined || variable !== null);
-  }, []);
-
-  // remove duplicates
-  return Array.from(new Set(variables));
-}
-
 class UpdateFieldValidationHandler {
   constructor(form, validator) {
     this._form = form;
@@ -1191,15 +1212,12 @@ class UpdateFieldValidationHandler {
       field,
       value
     } = context;
-    const {
-      _path
-    } = field;
     const {
       errors
     } = this._form._getState();
     context.oldErrors = clone(errors);
     const fieldErrors = this._validator.validateField(field, value);
-    const updatedErrors = set(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
+    const updatedErrors = set(errors, [field.id], fieldErrors.length ? fieldErrors : undefined);
     this._form._setState({
       errors: updatedErrors
     });
@@ -1848,8 +1866,8 @@ Validator.$inject = ['expressionLanguage', 'conditionChecker', 'form'];
 
 // helpers //////////
 
-/**
- * Helper function to evaluate optional FEEL validation values.
+/**
+ * Helper function to evaluate optional FEEL validation values.
  */
 function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
   const evaluatedValidate = {
@@ -1882,72 +1900,415 @@ function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form
   return evaluatedValidate;
 }
 
-class FormFieldRegistry {
-  constructor(eventBus) {
-    this._eventBus = eventBus;
-    this._formFields = {};
-    eventBus.on('form.clear', () => this.clear());
-    this._ids = new Ids([32, 36, 1]);
-    this._keys = new Ids([32, 36, 1]);
+class Importer {
+  /**
+   * @constructor
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+   * @param { import('./PathRegistry').default } pathRegistry
+   * @param { import('./FieldFactory').default } fieldFactory
+   * @param { import('./FormLayouter').default } formLayouter
+   */
+  constructor(formFieldRegistry, pathRegistry, fieldFactory, formLayouter) {
+    this._formFieldRegistry = formFieldRegistry;
+    this._pathRegistry = pathRegistry;
+    this._fieldFactory = fieldFactory;
+    this._formLayouter = formLayouter;
   }
-  add(formField) {
+
+  /**
+   * Import schema creating rows, fields, attaching additional
+   * information to each field and adding fields to the
+   * field registry.
+   *
+   * Additional information attached:
+   *
+   *   * `id` (unless present)
+   *   * `_parent`
+   *   * `_path`
+   *
+   * @param {any} schema
+   *
+   * @typedef {{ warnings: Error[], schema: any }} ImportResult
+   * @returns {ImportResult}
+   */
+  importSchema(schema) {
+    // TODO: Add warnings
+    const warnings = [];
+    try {
+      this._cleanup();
+      const importedSchema = this.importFormField(clone(schema));
+      this._formLayouter.calculateLayout(clone(importedSchema));
+      return {
+        schema: importedSchema,
+        warnings
+      };
+    } catch (err) {
+      this._cleanup();
+      err.warnings = warnings;
+      throw err;
+    }
+  }
+  _cleanup() {
+    this._formLayouter.clear();
+    this._formFieldRegistry.clear();
+    this._pathRegistry.clear();
+  }
+
+  /**
+   * @param {{[x: string]: any}} fieldAttrs
+   * @param {String} [parentId]
+   * @param {number} [index]
+   *
+   * @return {any} field
+   */
+  importFormField(fieldAttrs, parentId, index) {
     const {
-      id
-    } = formField;
-    if (this._formFields[id]) {
-      throw new Error(`form field with ID ${id} already exists`);
+      components
+    } = fieldAttrs;
+    let parent, path;
+    if (parentId) {
+      parent = this._formFieldRegistry.get(parentId);
     }
-    this._eventBus.fire('formField.add', {
-      formField
+
+    // set form field path
+    path = parent ? [...parent._path, 'components', index] : [];
+    const field = this._fieldFactory.create({
+      ...fieldAttrs,
+      _path: path,
+      _parent: parentId
+    }, false);
+    this._formFieldRegistry.add(field);
+    if (components) {
+      field.components = this.importFormFields(components, field.id);
+    }
+    return field;
+  }
+
+  /**
+   * @param {Array<any>} components
+   * @param {string} parentId
+   *
+   * @return {Array<any>} imported components
+   */
+  importFormFields(components, parentId) {
+    return components.map((component, index) => {
+      return this.importFormField(component, parentId, index);
     });
-    this._formFields[id] = formField;
   }
-  remove(formField) {
+}
+Importer.$inject = ['formFieldRegistry', 'pathRegistry', 'fieldFactory', 'formLayouter'];
+
+class FieldFactory {
+  /**
+   * @constructor
+   *
+   * @param  formFieldRegistry
+   * @param  formFields
+   */
+  constructor(formFieldRegistry, pathRegistry, formFields) {
+    this._formFieldRegistry = formFieldRegistry;
+    this._pathRegistry = pathRegistry;
+    this._formFields = formFields;
+  }
+  create(attrs, applyDefaults = true) {
     const {
-      id
-    } = formField;
-    if (!this._formFields[id]) {
-      return;
+      id,
+      type,
+      key,
+      path,
+      _parent
+    } = attrs;
+    const fieldDefinition = this._formFields.get(type);
+    if (!fieldDefinition) {
+      throw new Error(`form field of type <${type}> not supported`);
     }
-    this._eventBus.fire('formField.remove', {
-      formField
+    const {
+      config
+    } = fieldDefinition;
+    if (!config) {
+      throw new Error(`form field of type <${type}> has no config`);
+    }
+    if (id && this._formFieldRegistry._ids.assigned(id)) {
+      throw new Error(`form field with id <${id}> already exists`);
+    }
+
+    // ensure that we can claim the path
+
+    const parent = _parent && this._formFieldRegistry.get(_parent);
+    const parentPath = parent && this._pathRegistry.getValuePath(parent) || [];
+    if (config.keyed && key && !this._pathRegistry.canClaimPath([...parentPath, ...key.split('.')], true)) {
+      throw new Error(`binding path '${[...parentPath, key].join('.')}' is already claimed`);
+    }
+    if (config.pathed && path && !this._pathRegistry.canClaimPath([...parentPath, ...path.split('.')], false)) {
+      throw new Error(`binding path '${[...parentPath, ...path.split('.')].join('.')}' is already claimed`);
+    }
+    const labelAttrs = applyDefaults && config.label ? {
+      label: config.label
+    } : {};
+    const field = config.create({
+      ...labelAttrs,
+      ...attrs
     });
-    delete this._formFields[id];
+    this._ensureId(field);
+    if (config.keyed) {
+      this._ensureKey(field);
+    }
+    if (config.pathed && path) {
+      this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), false);
+    }
+    return field;
   }
-  get(id) {
-    return this._formFields[id];
+  _ensureId(field) {
+    if (field.id) {
+      this._formFieldRegistry._ids.claim(field.id, field);
+      return;
+    }
+    let prefix = 'Field';
+    if (field.type === 'default') {
+      prefix = 'Form';
+    }
+    field.id = this._formFieldRegistry._ids.nextPrefixed(`${prefix}_`, field);
   }
-  getAll() {
-    return Object.values(this._formFields);
+  _ensureKey(field) {
+    if (!field.key) {
+      let random;
+      const parent = this._formFieldRegistry.get(field._parent);
+
+      // ensure key uniqueness at level
+      do {
+        random = Math.random().toString(36).substring(7);
+      } while (parent && parent.components.some(child => child.key === random));
+      field.key = `${field.type}_${random}`;
+    }
+    this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), true);
   }
-  forEach(callback) {
-    this.getAll().forEach(formField => callback(formField));
+}
+FieldFactory.$inject = ['formFieldRegistry', 'pathRegistry', 'formFields'];
+
+/**
+ * The PathRegistry class manages a hierarchical structure of paths associated with form fields.
+ * It enables claiming, unclaiming, and validating paths within this structure.
+ *
+ * Example Tree Structure:
+ *
+ *   [
+ *     {
+ *       segment: 'root',
+ *       claimCount: 1,
+ *       children: [
+ *         {
+ *           segment: 'child1',
+ *           claimCount: 2,
+ *           children: null  // A leaf node (closed path)
+ *         },
+ *         {
+ *           segment: 'child2',
+ *           claimCount: 1,
+ *           children: [
+ *             {
+ *               segment: 'subChild1',
+ *               claimCount: 1,
+ *               children: []  // An open node (open path)
+ *             }
+ *           ]
+ *         }
+ *       ]
+ *     }
+ *   ]
+ */
+class PathRegistry {
+  constructor(formFieldRegistry, formFields) {
+    this._formFieldRegistry = formFieldRegistry;
+    this._formFields = formFields;
+    this._dataPaths = [];
+  }
+  canClaimPath(path, closed = false) {
+    let node = {
+      children: this._dataPaths
+    };
+    for (const segment of path) {
+      node = _getNextSegment(node, segment);
+
+      // if no node at that path, we can claim it no matter what
+      if (!node) {
+        return true;
+      }
+
+      // if we reach a leaf node, definitely not claimable
+      if (node.children === null) {
+        return false;
+      }
+    }
+
+    // if after all segments we reach a node with children, we can claim it only openly
+    return !closed;
+  }
+  claimPath(path, closed = false) {
+    if (!this.canClaimPath(path, closed)) {
+      throw new Error(`cannot claim path '${path.join('.')}'`);
+    }
+    let node = {
+      children: this._dataPaths
+    };
+    for (const segment of path) {
+      let child = _getNextSegment(node, segment);
+      if (!child) {
+        child = {
+          segment,
+          claimCount: 1,
+          children: []
+        };
+        node.children.push(child);
+      } else {
+        child.claimCount++;
+      }
+      node = child;
+    }
+    if (closed) {
+      node.children = null;
+    }
+  }
+  unclaimPath(path) {
+    // verification Pass
+    let node = {
+      children: this._dataPaths
+    };
+    for (const segment of path) {
+      const child = _getNextSegment(node, segment);
+      if (!child) {
+        throw new Error(`no open path found for '${path.join('.')}'`);
+      }
+      node = child;
+    }
+
+    // mutation Pass
+    node = {
+      children: this._dataPaths
+    };
+    for (const segment of path) {
+      const child = _getNextSegment(node, segment);
+      child.claimCount--;
+      if (child.claimCount === 0) {
+        node.children.splice(node.children.indexOf(child), 1);
+        break; // Abort early if claimCount reaches zero
+      }
+
+      node = child;
+    }
+  }
+
+  /**
+   * Applies a function (fn) recursively on a given field and its children.
+   *
+   * - `field`: Starting field object.
+   * - `fn`: Function to apply.
+   * - `context`: Optional object for passing data between calls.
+   *
+   * Stops early if `fn` returns `false`. Useful for traversing the form field tree.
+   *
+   * @returns {boolean} Success status based on function execution.
+   */
+  executeRecursivelyOnFields(field, fn, context = {}) {
+    let result = true;
+    const formFieldConfig = this._formFields.get(field.type).config;
+    if (formFieldConfig.keyed) {
+      const callResult = fn({
+        field,
+        isClosed: true,
+        context
+      });
+      return result && callResult;
+    } else if (formFieldConfig.pathed) {
+      const callResult = fn({
+        field,
+        isClosed: false,
+        context
+      });
+      result = result && callResult;
+    }
+    if (field.components) {
+      for (const child of field.components) {
+        const callResult = this.executeRecursivelyOnFields(child, fn, clone(context));
+        result = result && callResult;
+
+        // only stop executing if false is specifically returned, not if undefined
+        if (result === false) {
+          return result;
+        }
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Generates an array representing the binding path to an underlying data object for a form field.
+   *
+   * @param {Object} field - The field object with properties: `key`, `path`, `id`, and optionally `_parent`.
+   * @param {Object} [options={}] - Configuration options.
+   * @param {Object} [options.replacements={}] - A map of field IDs to alternative path arrays.
+   * @param {Object} [options.cutoffNode] - The ID of the parent field at which to stop generating the path.
+   *
+   * @returns {(Array<string>|undefined)} An array of strings representing the binding path, or undefined if not determinable.
+   */
+  getValuePath(field, options = {}) {
+    const {
+      replacements = {},
+      cutoffNode = null
+    } = options;
+    let localValuePath = [];
+    const hasReplacement = Object.prototype.hasOwnProperty.call(replacements, field.id);
+    const formFieldConfig = this._formFields.get(field.type).config;
+    if (hasReplacement) {
+      const replacement = replacements[field.id];
+      if (replacement === null || replacement === undefined || replacement === '') {
+        localValuePath = [];
+      } else if (typeof replacement === 'string') {
+        localValuePath = replacement.split('.');
+      } else if (Array.isArray(replacement)) {
+        localValuePath = replacement;
+      } else {
+        throw new Error(`replacements for field ${field.id} must be a string, array or null/undefined`);
+      }
+    } else if (formFieldConfig.keyed) {
+      localValuePath = field.key.split('.');
+    } else if (formFieldConfig.pathed && field.path) {
+      localValuePath = field.path.split('.');
+    }
+    if (field._parent && field._parent !== cutoffNode) {
+      const parent = this._formFieldRegistry.get(field._parent);
+      return [...(this.getValuePath(parent, options) || []), ...localValuePath];
+    }
+    return localValuePath;
   }
   clear() {
-    this._formFields = {};
-    this._ids.clear();
-    this._keys.clear();
+    this._dataPaths = [];
   }
 }
-FormFieldRegistry.$inject = ['eventBus'];
+const _getNextSegment = (node, segment) => {
+  if (isArray(node.children)) {
+    return node.children.find(node => node.segment === segment) || null;
+  }
+  return null;
+};
+PathRegistry.$inject = ['formFieldRegistry', 'formFields'];
 
-/**
- * @typedef { { id: String, components: Array<String> } } FormRow
- * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+/**
+ * @typedef { { id: String, components: Array<String> } } FormRow
+ * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
  */
 
-/**
- * Maintains the Form layout in a given structure, for example
- *
- *  [
- *    {
- *      formFieldId: 'FormField_1',
- *      rows: [
- *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
- *      ]
- *    }
- *  ]
- *
+/**
+ * Maintains the Form layout in a given structure, for example
+ *
+ *  [
+ *    {
+ *      formFieldId: 'FormField_1',
+ *      rows: [
+ *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+ *      ]
+ *    }
+ *  ]
+ *
  */
 class FormLayouter {
   constructor(eventBus) {
@@ -1957,8 +2318,8 @@ class FormLayouter {
     this._eventBus = eventBus;
   }
 
-  /**
-   * @param {FormRow} row
+  /**
+   * @param {FormRow} row
    */
   addRow(formFieldId, row) {
     let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -1972,18 +2333,18 @@ class FormLayouter {
     rowsPerComponent.rows.push(row);
   }
 
-  /**
-   * @param {String} id
-   * @returns {FormRow}
+  /**
+   * @param {String} id
+   * @returns {FormRow}
    */
   getRow(id) {
     const rows = allRows(this._rows);
     return rows.find(r => r.id === id);
   }
 
-  /**
-   * @param {any} formField
-   * @returns {FormRow}
+  /**
+   * @param {any} formField
+   * @returns {FormRow}
    */
   getRowForField(formField) {
     return allRows(this._rows).find(r => {
@@ -1994,9 +2355,9 @@ class FormLayouter {
     });
   }
 
-  /**
-   * @param {String} formFieldId
-   * @returns { Array<FormRow> }
+  /**
+   * @param {String} formFieldId
+   * @returns { Array<FormRow> }
    */
   getRows(formFieldId) {
     const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
@@ -2006,22 +2367,22 @@ class FormLayouter {
     return rowsForField.rows;
   }
 
-  /**
-   * @returns {string}
+  /**
+   * @returns {string}
    */
   nextRowId() {
     return this._ids.nextPrefixed('Row_');
   }
 
-  /**
-   * @param {any} formField
+  /**
+   * @param {any} formField
    */
   calculateLayout(formField) {
     const {
       type,
       components
     } = formField;
-    if (type !== 'default' || !components) {
+    if (type !== 'default' && type !== 'group' || !components) {
       return;
     }
 
@@ -2068,155 +2429,60 @@ function groupByRow(components, ids) {
   });
 }
 
-/**
- * @param {Array<FormRows>} formRows
- * @returns {Array<FormRow>}
+/**
+ * @param {Array<FormRows>} formRows
+ * @returns {Array<FormRow>}
  */
 function allRows(formRows) {
   return flatten(formRows.map(c => c.rows));
 }
 
-class Importer {
-  /**
-   * @constructor
-   * @param { import('../core').FormFieldRegistry } formFieldRegistry
-   * @param { import('../render/FormFields').default } formFields
-   * @param { import('../core').FormLayouter } formLayouter
-   */
-  constructor(formFieldRegistry, formFields, formLayouter) {
-    this._formFieldRegistry = formFieldRegistry;
-    this._formFields = formFields;
-    this._formLayouter = formLayouter;
+class FormFieldRegistry {
+  constructor(eventBus) {
+    this._eventBus = eventBus;
+    this._formFields = {};
+    eventBus.on('form.clear', () => this.clear());
+    this._ids = new Ids([32, 36, 1]);
   }
-
-  /**
-   * Import schema adding `id`, `_parent` and `_path`
-   * information to each field and adding it to the
-   * form field registry.
-   *
-   * @param {any} schema
-   * @param {any} [data]
-   *
-   * @return { { warnings: Array<any>, schema: any, data: any } }
-   */
-  importSchema(schema, data = {}) {
-    // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
-    const warnings = [];
-    try {
-      this._formLayouter.clear();
-      const importedSchema = this.importFormField(clone(schema)),
-        initializedData = this.initializeFieldValues(clone(data));
-      this._formLayouter.calculateLayout(clone(importedSchema));
-      return {
-        warnings,
-        schema: importedSchema,
-        data: initializedData
-      };
-    } catch (err) {
-      err.warnings = warnings;
-      throw err;
+  add(formField) {
+    const {
+      id
+    } = formField;
+    if (this._formFields[id]) {
+      throw new Error(`form field with ID ${id} already exists`);
     }
+    this._eventBus.fire('formField.add', {
+      formField
+    });
+    this._formFields[id] = formField;
   }
-
-  /**
-   * @param {any} formField
-   * @param {string} [parentId]
-   *
-   * @return {any} importedField
-   */
-  importFormField(formField, parentId) {
+  remove(formField) {
     const {
-      components,
-      key,
-      type,
-      id = generateIdForType(type)
+      id
     } = formField;
-    if (parentId) {
-      // set form field parent
-      formField._parent = parentId;
-    }
-    if (!this._formFields.get(type)) {
-      throw new Error(`form field of type <${type}> not supported`);
-    }
-    if (key) {
-      // validate <key> uniqueness
-      if (this._formFieldRegistry._keys.assigned(key)) {
-        throw new Error(`form field with key <${key}> already exists`);
-      }
-      this._formFieldRegistry._keys.claim(key, formField);
-
-      // TODO: buttons should not have key
-      if (type !== 'button') {
-        // set form field path
-        formField._path = [key];
-      }
-    }
-    if (id) {
-      // validate <id> uniqueness
-      if (this._formFieldRegistry._ids.assigned(id)) {
-        throw new Error(`form field with id <${id}> already exists`);
-      }
-      this._formFieldRegistry._ids.claim(id, formField);
-    }
-
-    // set form field ID
-    formField.id = id;
-    this._formFieldRegistry.add(formField);
-    if (components) {
-      this.importFormFields(components, id);
+    if (!this._formFields[id]) {
+      return;
     }
-    return formField;
-  }
-  importFormFields(components, parentId) {
-    components.forEach(component => {
-      this.importFormField(component, parentId);
+    this._eventBus.fire('formField.remove', {
+      formField
     });
+    delete this._formFields[id];
+  }
+  get(id) {
+    return this._formFields[id];
+  }
+  getAll() {
+    return Object.values(this._formFields);
   }
-
-  /**
-   * @param {Object} data
-   *
-   * @return {Object} initializedData
-   */
-  initializeFieldValues(data) {
-    return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
-      const {
-        defaultValue,
-        _path,
-        type
-      } = formField;
-
-      // try to get value from data
-      // if unavailable - try to get default value from form field
-      // if unavailable - get empty value from form field
-
-      if (_path) {
-        const {
-          config: fieldConfig
-        } = this._formFields.get(type);
-        let valueData = get(data, _path);
-        if (!isUndefined(valueData) && fieldConfig.sanitizeValue) {
-          valueData = fieldConfig.sanitizeValue({
-            formField,
-            data,
-            value: valueData
-          });
-        }
-        const initializedFieldValue = !isUndefined(valueData) ? valueData : !isUndefined(defaultValue) ? defaultValue : fieldConfig.emptyValue;
-        initializedData = {
-          ...initializedData,
-          [_path[0]]: initializedFieldValue
-        };
-      }
-      return initializedData;
-    }, data);
+  forEach(callback) {
+    this.getAll().forEach(formField => callback(formField));
+  }
+  clear() {
+    this._formFields = {};
+    this._ids.clear();
   }
 }
-Importer.$inject = ['formFieldRegistry', 'formFields', 'formLayouter'];
-
-var importModule = {
-  importer: ['type', Importer]
-};
+FormFieldRegistry.$inject = ['eventBus'];
 
 function formFieldClasses(type, {
   errors = [],
@@ -2271,7 +2537,7 @@ function Button(props) {
 }
 Button.config = {
   type: type$c,
-  keyed: true,
+  keyed: false,
   label: 'Button',
   group: 'action',
   create: (options = {}) => ({
@@ -2281,6 +2547,9 @@ Button.config = {
 };
 
 const FormRenderContext = createContext({
+  EmptyRoot: props => {
+    return null;
+  },
   Empty: props => {
     return null;
   },
@@ -2310,15 +2579,19 @@ const FormRenderContext = createContext({
       class: props.class,
       children: props.children
     });
+  },
+  hoveredId: [],
+  setHoveredId: newValue => {
+    console.log(`setHoveredId not defined, called with '${newValue}'`);
   }
 });
 var FormRenderContext$1 = FormRenderContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const FormContext = createContext({
@@ -2334,10 +2607,10 @@ function useService(type, strict) {
   return getService(type, strict);
 }
 
-/**
- * Returns the conditionally filtered data of a form reactively.
- * Memoised to minimize re-renders
- *
+/**
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
  */
 function useFilteredFormData() {
   const {
@@ -2354,12 +2627,12 @@ function useFilteredFormData() {
   }, [conditionChecker, data, initialData]);
 }
 
-/**
- * Evaluate if condition is met reactively based on the conditionChecker and form data.
- *
- * @param {string | undefined} condition
- *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
+/**
+ * Evaluate if condition is met reactively based on the conditionChecker and form data.
+ *
+ * @param {string | undefined} condition
+ *
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
 function useCondition(condition) {
   const conditionChecker = useService('conditionChecker', false);
@@ -2369,13 +2642,13 @@ function useCondition(condition) {
   }, [conditionChecker, condition, filteredData]);
 }
 
-/**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
- * Memoised to minimize re-renders.
- *
- * @param {string} value
- *
+/**
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
+ * Memoised to minimize re-renders.
+ *
+ * @param {string} value
+ *
  */
 function useExpressionEvaluation(value) {
   const formData = useFilteredFormData();
@@ -2404,16 +2677,16 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
   });
 }
 
-/**
- * Retrieve readonly value of a form field, given it can be an
- * expression optionally or configured globally.
- *
- * @typedef { import('../../types').FormProperties } FormProperties
- *
- * @param {any} formField
- * @param {FormProperties} properties
- *
- * @returns {boolean}
+/**
+ * Retrieve readonly value of a form field, given it can be an
+ * expression optionally or configured globally.
+ *
+ * @typedef { import('../../types').FormProperties } FormProperties
+ *
+ * @param {any} formField
+ * @param {FormProperties} properties
+ *
+ * @returns {boolean}
  */
 function useReadonly(formField, properties = {}) {
   const expressionLanguage = useService('expressionLanguage');
@@ -2431,16 +2704,16 @@ function useReadonly(formField, properties = {}) {
   return readonly || false;
 }
 
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} options
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} options
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
  */
 function useTemplateEvaluation(value, options) {
   const filteredData = useFilteredFormData();
@@ -2453,17 +2726,17 @@ function useTemplateEvaluation(value, options) {
   }, [filteredData, templating, value, options]);
 }
 
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * If the string contains multiple lines, only the first line is returned.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} [options]
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * If the string contains multiple lines, only the first line is returned.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} [options]
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
  */
 function useSingleLineTemplateEvaluation(value, options = {}) {
   const evaluatedTemplate = useTemplateEvaluation(value, options);
@@ -2651,9 +2924,24 @@ function _isReadableType(value) {
 function _isValueSomething(value) {
   return value || value === 0 || value === false;
 }
+function createEmptyOptions(options = {}) {
+  const defaults = {};
 
-/**
- * @enum { String }
+  // provide default values if valuesKey and valuesExpression are not set
+  if (!options.valuesKey && !options.valuesExpression) {
+    defaults.values = [{
+      label: 'Value',
+      value: 'value'
+    }];
+  }
+  return {
+    ...defaults,
+    ...options
+  };
+}
+
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -2661,17 +2949,17 @@ const LOAD_STATES = {
   ERROR: 'error'
 };
 
-/**
- * @typedef {Object} ValuesGetter
- * @property {Object[]} values - The values data
- * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+/**
+ * @typedef {Object} ValuesGetter
+ * @property {Object[]} values - The values data
+ * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
  */
 
-/**
- * A hook to load values for single and multiselect components.
- *
- * @param {Object} field - The form field to handle values for
- * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+/**
+ * A hook to load values for single and multiselect components.
+ *
+ * @param {Object} field - The form field to handle values for
+ * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
  */
 function useValuesAsync (field) {
   const {
@@ -3027,21 +3315,7 @@ Checklist.config = {
   group: 'selection',
   emptyValue: [],
   sanitizeValue: sanitizeMultiSelectValue,
-  create: (options = {}) => {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
-    }
-    return {
-      ...defaults,
-      ...options
-    };
-  }
+  create: createEmptyOptions
 };
 
 const noop$1 = () => false;
@@ -3052,6 +3326,7 @@ function FormField(props) {
   } = props;
   const formFields = useService('formFields'),
     viewerCommands = useService('viewerCommands', false),
+    pathRegistry = useService('pathRegistry'),
     form = useService('form');
   const {
     initialData,
@@ -3068,10 +3343,10 @@ function FormField(props) {
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
   }
-  const initialValue = useMemo(() => get(initialData, field._path), [initialData, field._path]);
-  const value = get(data, field._path);
-  const fieldErrors = findErrors(errors, field._path);
+  const valuePath = useMemo(() => pathRegistry.getValuePath(field), [field, pathRegistry]);
+  const initialValue = useMemo(() => get(initialData, valuePath), [initialData, valuePath]);
   const readonly = useReadonly(field, properties);
+  const value = get(data, valuePath);
 
   // add precedence: global readonly > form field disabled
   const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
@@ -3098,7 +3373,7 @@ function FormField(props) {
       children: jsx(FormFieldComponent, {
         ...props,
         disabled: disabled,
-        errors: fieldErrors,
+        errors: errors[field.id],
         onChange: disabled || readonly ? noop$1 : onChange,
         onBlur: disabled || readonly ? noop$1 : onBlur,
         readonly: readonly,
@@ -3108,14 +3383,14 @@ function FormField(props) {
   });
 }
 
-function Default(props) {
+function Grid(props) {
   const {
     Children,
-    Empty,
     Row
   } = useContext(FormRenderContext$1);
   const {
-    field
+    field,
+    Empty
   } = props;
   const {
     id,
@@ -3152,7 +3427,20 @@ function Default(props) {
     }), components.length ? null : jsx(Empty, {})]
   });
 }
-Default.config = {
+
+function FormComponent$1(props) {
+  const {
+    EmptyRoot
+  } = useContext(FormRenderContext$1);
+  const fullProps = {
+    ...props,
+    Empty: EmptyRoot
+  };
+  return jsx(Grid, {
+    ...fullProps
+  });
+}
+FormComponent$1.config = {
   type: 'default',
   keyed: false,
   label: null,
@@ -3181,6 +3469,74 @@ var SvgCalendar = function SvgCalendar(props) {
 };
 var CalendarIcon = SvgCalendar;
 
+/**
+ * Returns date format for the provided locale.
+ * If the locale is not provided, uses the browser's locale.
+ *
+ * @param {string} [locale] - The locale to get date format for.
+ * @returns {string} The date format for the locale.
+ */
+function getLocaleDateFormat(locale = 'default') {
+  const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(Date.UTC(2020, 5, 5)));
+  return parts.map(part => {
+    const len = part.value.length;
+    switch (part.type) {
+      case 'day':
+        return 'd'.repeat(len);
+      case 'month':
+        return 'M'.repeat(len);
+      case 'year':
+        return 'y'.repeat(len);
+      default:
+        return part.value;
+    }
+  }).join('');
+}
+
+/**
+ * Returns readable date format for the provided locale.
+ * If the locale is not provided, uses the browser's locale.
+ *
+ * @param {string} [locale] - The locale to get readable date format for.
+ * @returns {string} The readable date format for the locale.
+ */
+function getLocaleReadableDateFormat(locale) {
+  let format = getLocaleDateFormat(locale).toLowerCase();
+
+  // Ensure month is in 'mm' format
+  if (!format.includes('mm')) {
+    format = format.replace('m', 'mm');
+  }
+
+  // Ensure day is in 'dd' format
+  if (!format.includes('dd')) {
+    format = format.replace('d', 'dd');
+  }
+  return format;
+}
+
+/**
+ * Returns flatpickr config for the provided locale.
+ * If the locale is not provided, uses the browser's locale.
+ *
+ * @param {string} [locale] - The locale to get flatpickr config for.
+ * @returns {object} The flatpickr config for the locale.
+ */
+function getLocaleDateFlatpickrConfig(locale) {
+  return flatpickerizeDateFormat(getLocaleDateFormat(locale));
+}
+function flatpickerizeDateFormat(dateFormat) {
+  const useLeadingZero = {
+    day: dateFormat.includes('dd'),
+    month: dateFormat.includes('MM'),
+    year: dateFormat.includes('yyyy')
+  };
+  dateFormat = useLeadingZero.day ? dateFormat.replace('dd', 'd') : dateFormat.replace('d', 'j');
+  dateFormat = useLeadingZero.month ? dateFormat.replace('MM', 'm') : dateFormat.replace('M', 'n');
+  dateFormat = useLeadingZero.year ? dateFormat.replace('yyyy', 'Y') : dateFormat.replace('yy', 'y');
+  return dateFormat;
+}
+
 function InputAdorner(props) {
   const {
     pre,
@@ -3255,7 +3611,7 @@ function Datepicker(props) {
   useEffect(() => {
     let config = {
       allowInput: true,
-      dateFormat: 'm/d/Y',
+      dateFormat: getLocaleDateFlatpickrConfig(),
       static: true,
       clickOpens: false,
       // TODO: support dates prior to 1900 (https://github.com/bpmn-io/form-js/issues/533)
@@ -3347,7 +3703,7 @@ function Datepicker(props) {
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
-          placeholder: "mm/dd/yyyy",
+          placeholder: getLocaleReadableDateFormat(),
           autoComplete: "off",
           onFocus: onInputFocus,
           onKeyDown: onInputKeyDown,
@@ -3843,10 +4199,10 @@ Datetime.config = {
   }
 };
 
-/**
- * This file must not be changed or exchanged.
- *
- * @see http://bpmn.io/license for more information.
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
  */
 function Logo() {
   return jsxs("svg", {
@@ -3968,6 +4324,52 @@ function FormComponent(props) {
   });
 }
 
+function Group(props) {
+  const {
+    field
+  } = props;
+  const {
+    label,
+    id,
+    type,
+    showOutline
+  } = field;
+  const {
+    formId
+  } = useContext(FormContext$1);
+  const {
+    Empty
+  } = useContext(FormRenderContext$1);
+  const fullProps = {
+    ...props,
+    Empty
+  };
+  return jsxs("div", {
+    className: classNames(formFieldClasses(type), {
+      'fjs-outlined': showOutline
+    }),
+    role: "group",
+    "aria-labelledby": prefixId(id, formId),
+    children: [jsx(Label, {
+      id: prefixId(id, formId),
+      label: label
+    }), jsx(Grid, {
+      ...fullProps
+    })]
+  });
+}
+Group.config = {
+  type: 'group',
+  pathed: true,
+  label: 'Group',
+  group: 'presentation',
+  create: (options = {}) => ({
+    components: [],
+    showOutline: true,
+    ...options
+  })
+};
+
 const NODE_TYPE_TEXT = 3,
   NODE_TYPE_ELEMENT = 1;
 const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong', 'table', 'thead', 'tbody', 'tr', 'th', 'td'];
@@ -3978,11 +4380,11 @@ const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u
 
 const FORM_ELEMENT = document.createElement('form');
 
-/**
- * Sanitize a HTML string and return the cleaned, safe version.
- *
- * @param {string} html
- * @return {string}
+/**
+ * Sanitize a HTML string and return the cleaned, safe version.
+ *
+ * @param {string} html
+ * @return {string}
  */
 
 // see https://github.com/developit/snarkdown/issues/70
@@ -4000,29 +4402,29 @@ function sanitizeHTML(html) {
   }
 }
 
-/**
- * Sanitizes an image source to ensure we only allow for data URI and links
- * that start with http(s).
- *
- * Note: Most browsers anyway do not support script execution in <img> elements.
- *
- * @param {string} src
- * @returns {string}
+/**
+ * Sanitizes an image source to ensure we only allow for data URI and links
+ * that start with http(s).
+ *
+ * Note: Most browsers anyway do not support script execution in <img> elements.
+ *
+ * @param {string} src
+ * @returns {string}
  */
 function sanitizeImageSource(src) {
   const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
   return valid ? src : '';
 }
 
-/**
- * Recursively sanitize a HTML node, potentially
- * removing it, its children or attributes.
- *
- * Inspired by https://github.com/developit/snarkdown/issues/70
- * and https://github.com/cure53/DOMPurify. Simplified
- * for our use-case.
- *
- * @param {Element} node
+/**
+ * Recursively sanitize a HTML node, potentially
+ * removing it, its children or attributes.
+ *
+ * Inspired by https://github.com/developit/snarkdown/issues/70
+ * and https://github.com/cure53/DOMPurify. Simplified
+ * for our use-case.
+ *
+ * @param {Element} node
  */
 function sanitizeNode(node) {
   // allow text nodes
@@ -4066,13 +4468,13 @@ function sanitizeNode(node) {
   }
 }
 
-/**
- * Validates attributes for validity.
- *
- * @param {string} lcTag
- * @param {string} lcName
- * @param {string} value
- * @return {boolean}
+/**
+ * Validates attributes for validity.
+ *
+ * @param {string} lcTag
+ * @param {string} lcName
+ * @param {string} value
+ * @return {boolean}
  */
 function isValidAttribute(lcTag, lcName, value) {
   // disallow most attributes based on whitelist
@@ -4556,21 +4958,7 @@ Radio.config = {
   group: 'selection',
   emptyValue: null,
   sanitizeValue: sanitizeSingleSelectValue,
-  create: (options = {}) => {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
-    }
-    return {
-      ...defaults,
-      ...options
-    };
-  }
+  create: createEmptyOptions
 };
 
 var _path$d;
@@ -4922,21 +5310,7 @@ Select.config = {
   group: 'selection',
   emptyValue: null,
   sanitizeValue: sanitizeSingleSelectValue,
-  create: (options = {}) => {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
-    }
-    return {
-      ...defaults,
-      ...options
-    };
-  }
+  create: createEmptyOptions
 };
 
 const type$4 = 'spacer';
@@ -5164,21 +5538,7 @@ Taglist.config = {
   group: 'selection',
   emptyValue: [],
   sanitizeValue: sanitizeMultiSelectValue,
-  create: (options = {}) => {
-    const defaults = {};
-
-    // provide default values if valuesKey isn't set
-    if (!options.valuesKey) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
-    }
-    return {
-      ...defaults,
-      ...options
-    };
-  }
+  create: createEmptyOptions
 };
 
 const type$2 = 'text';
@@ -5595,13 +5955,14 @@ var SvgGroup = function SvgGroup(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
-    height: 54
+    height: 54,
+    fill: "currentcolor"
   }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M8 33v5a1 1 0 0 0 1 1h4v2H9a3 3 0 0 1-3-3v-5h2Zm18 6v2H15v-2h11Zm13 0v2H28v-2h11Zm9-6v5a3 3 0 0 1-3 3h-4v-2h4a1 1 0 0 0 .993-.883L46 38v-5h2ZM8 22v9H6v-9h2Zm40 0v9h-2v-9h2Zm-35-9v2H9a1 1 0 0 0-.993.883L8 16v4H6v-4a3 3 0 0 1 3-3h4Zm32 0a3 3 0 0 1 3 3v4h-2v-4a1 1 0 0 0-.883-.993L45 15h-4v-2h4Zm-6 0v2H28v-2h11Zm-13 0v2H15v-2h11Z"
   })));
 };
-var ColumnsIcon = SvgGroup;
+var GroupIcon = SvgGroup;
 
 var _path$7;
 function _extends$7() { _extends$7 = 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$7.apply(this, arguments); }
@@ -5654,14 +6015,14 @@ var SvgSpacer = function SvgSpacer(props) {
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "none"
+    fill: "currentcolor"
   }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
-    stroke: "#000",
+    stroke: "currentcolor",
     strokeLinecap: "square",
     strokeWidth: 2,
     d: "M9 23h36M9 31h36"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
-    stroke: "#000",
+    stroke: "currentcolor",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -5739,8 +6100,9 @@ const iconsByType = type => {
     button: ButtonIcon,
     checkbox: CheckboxIcon,
     checklist: ChecklistIcon,
-    columns: ColumnsIcon,
+    columns: GroupIcon,
     datetime: DatetimeIcon,
+    group: GroupIcon,
     image: ImageIcon,
     number: NumberIcon,
     radio: RadioIcon,
@@ -5754,7 +6116,7 @@ const iconsByType = type => {
   }[type];
 };
 
-const formFields = [Button, Checkbox, Checklist, Default, Image, Numberfield, Datetime, Radio, Select, Spacer, Taglist, Text, Textfield, Textarea];
+const formFields = [Button, Checkbox, Checklist, FormComponent$1, Group, Image, Numberfield, Datetime, Radio, Select, Spacer, Taglist, Text, Textfield, Textarea];
 
 class FormFields {
   constructor() {
@@ -5830,9 +6192,12 @@ var renderModule = {
 };
 
 var core = {
-  __depends__: [importModule, renderModule],
+  __depends__: [renderModule],
   eventBus: ['type', EventBus],
+  importer: ['type', Importer],
+  fieldFactory: ['type', FieldFactory],
   formFieldRegistry: ['type', FormFieldRegistry],
+  pathRegistry: ['type', PathRegistry],
   formLayouter: ['type', FormLayouter],
   validator: ['type', Validator]
 };
@@ -5947,9 +6312,9 @@ class Form {
         this.clear();
         const {
           schema: importedSchema,
-          data: initializedData,
           warnings
-        } = this.get('importer').importSchema(schema, data);
+        } = this.get('importer').importSchema(schema);
+        const initializedData = this._initializeFieldData(clone(data));
         this._setState({
           data: initializedData,
           errors: {},
@@ -6007,21 +6372,21 @@ class Form {
    */
   validate() {
     const formFieldRegistry = this.get('formFieldRegistry'),
+      pathRegistry = this.get('pathRegistry'),
       validator = this.get('validator');
     const {
       data
     } = this._getState();
     const errors = formFieldRegistry.getAll().reduce((errors, field) => {
       const {
-        disabled,
-        _path
+        disabled
       } = field;
       if (disabled) {
         return errors;
       }
-      const value = get(data, _path);
+      const value = get(data, pathRegistry.getValuePath(field));
       const fieldErrors = validator.validateField(field, value);
-      return set(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
+      return set(errors, [field.id], fieldErrors.length ? fieldErrors : undefined);
     }, /** @type {Errors} */{});
     this._setState({
       errors
@@ -6127,16 +6492,14 @@ class Form {
       value
     } = update;
     const {
-      _path
-    } = field;
-    let {
       data,
       errors
     } = this._getState();
-    const validator = this.get('validator');
+    const validator = this.get('validator'),
+      pathRegistry = this.get('pathRegistry');
     const fieldErrors = validator.validateField(field, value);
-    set(data, _path, value);
-    set(errors, [pathStringify(_path)], fieldErrors.length ? fieldErrors : undefined);
+    set(data, pathRegistry.getValuePath(field), value);
+    set(errors, [field.id], fieldErrors.length ? fieldErrors : undefined);
     this._setState({
       data: clone(data),
       errors: clone(errors)
@@ -6179,23 +6542,26 @@ class Form {
    * @internal
    */
   _getSubmitData() {
-    const formFieldRegistry = this.get('formFieldRegistry');
+    const formFieldRegistry = this.get('formFieldRegistry'),
+      pathRegistry = this.get('pathRegistry'),
+      formFields = this.get('formFields');
     const formData = this._getState().data;
     const submitData = formFieldRegistry.getAll().reduce((previous, field) => {
       const {
         disabled,
-        _path
+        type
       } = field;
+      const {
+        config: fieldConfig
+      } = formFields.get(type);
 
-      // do not submit disabled form fields
-      if (disabled || !_path) {
+      // do not submit disabled form fields or routing fields
+      if (disabled || !fieldConfig.keyed) {
         return previous;
       }
-      const value = get(formData, _path);
-      return {
-        ...previous,
-        [_path[0]]: value
-      };
+      const valuePath = pathRegistry.getValuePath(field);
+      const value = get(formData, valuePath);
+      return set(previous, valuePath, value);
     }, {});
     const filteredSubmitData = this._applyConditions(submitData, formData);
     return filteredSubmitData;
@@ -6208,9 +6574,46 @@ class Form {
     const conditionChecker = this.get('conditionChecker');
     return conditionChecker.applyConditions(toFilter, data);
   }
+
+  /**
+   * @internal
+   */
+  _initializeFieldData(data) {
+    const formFieldRegistry = this.get('formFieldRegistry'),
+      formFields = this.get('formFields'),
+      pathRegistry = this.get('pathRegistry');
+    return formFieldRegistry.getAll().reduce((initializedData, formField) => {
+      const {
+        defaultValue,
+        type
+      } = formField;
+
+      // try to get value from data
+      // if unavailable - try to get default value from form field
+      // if unavailable - get empty value from form field
+
+      const valuePath = pathRegistry.getValuePath(formField);
+      if (valuePath) {
+        const {
+          config: fieldConfig
+        } = formFields.get(type);
+        let valueData = get(data, valuePath);
+        if (!isUndefined(valueData) && fieldConfig.sanitizeValue) {
+          valueData = fieldConfig.sanitizeValue({
+            formField,
+            data,
+            value: valueData
+          });
+        }
+        const initializedFieldValue = !isUndefined(valueData) ? valueData : !isUndefined(defaultValue) ? defaultValue : fieldConfig.emptyValue;
+        return set(initializedData, valuePath, initializedFieldValue);
+      }
+      return initializedData;
+    }, data);
+  }
 }
 
-const schemaVersion = 10;
+const schemaVersion = 11;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -6235,5 +6638,5 @@ function createForm(options) {
   });
 }
 
-export { Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, Form, FormComponent, FormContext$1 as FormContext, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Image, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, Radio, Select, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, ViewerCommands, ViewerCommandsModule, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
+export { Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, FormComponent$1 as Default, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext$1 as FormContext, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Group, Image, Importer, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, PathRegistry, Radio, Select, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, ViewerCommands, ViewerCommandsModule, clone, createForm, createFormContainer, createInjector, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathsEqual, runRecursively, schemaVersion };
 //# sourceMappingURL=index.es.js.map