@bpmn-io/form-js-viewer 1.6.0 → 1.6.2

package/dist/index.es.js

@@ -1,10 +1,11 @@
 import Ids from 'ids';
-import { isString, get, some, isNumber, set, findIndex, isArray, isObject, isNil, isDefined, values, uniqueBy, isFunction, bind, assign, groupBy, flatten, isUndefined } from 'min-dash';
+import { isString, get, some, isNil, isObject, isNumber, set, findIndex, isArray, isDefined, values, uniqueBy, isFunction, bind, assign, groupBy, flatten, isUndefined } from 'min-dash';
 import Big from 'big.js';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
 import { useContext, useMemo, useEffect, useRef, useState, useCallback, useLayoutEffect } from 'preact/hooks';
 import { createContext, createElement, Fragment as Fragment$1, render } from 'preact';
+import isEqual from 'lodash/isEqual';
 import flatpickr from 'flatpickr';
 import * as React from 'preact/compat';
 import { createPortal } from 'preact/compat';
@@ -53,26 +54,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 nodes = _linearizePathExpression(root);
   return nodes[index].variableName || 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
@@ -118,11 +119,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<object>} 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<object>} An array of components in the path expression, in the correct order.
  */
 const _linearizePathExpression = root => {
   let node = root;
@@ -141,13 +142,13 @@ const _linearizePathExpression = 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 = [{
@@ -173,9 +174,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 = {
@@ -216,25 +217,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 {
@@ -249,13 +250,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) {
@@ -280,23 +281,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)) {
@@ -322,17 +323,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 {
@@ -347,22 +348,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
@@ -468,10 +469,10 @@ function createInjector(bootstrapModules) {
   return injector;
 }
 
-/**
- * @param {string?} prefix
- *
- * @returns Element
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
  */
 function createFormContainer(prefix = 'fjs') {
   const container = document.createElement('div');
@@ -602,11 +603,11 @@ const LocalExpressionContext = createContext({
 });
 var LocalExpressionContext$1 = LocalExpressionContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const FormContext = createContext({
@@ -649,21 +650,21 @@ function generateIdForType(type) {
   return `${type}${generateIndexForType(type)}`;
 }
 
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
+/**
+ * @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));
 }
 
-/**
- * Transform a LocalExpressionContext object into a usable FEEL context.
- *
- * @param {Object} context - The LocalExpressionContext object.
- * @returns {Object} The usable FEEL context.
+/**
+ * Transform a LocalExpressionContext object into a usable FEEL context.
+ *
+ * @param {Object} context - The LocalExpressionContext object.
+ * @returns {Object} The usable FEEL context.
  */
 
 function buildExpressionContext(context) {
@@ -695,12 +696,12 @@ function _wrapObjectKeysWithUnderscores(obj) {
   return newObj;
 }
 
-/**
- * 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);
@@ -710,17 +711,17 @@ function useCondition(condition) {
   }, [conditionChecker, condition, expressionContextInfo]);
 }
 
-/**
- * Custom hook to scroll an element into view only when it is not visible within the viewport.
- *
- * @param {Object} targetRef - A ref pointing to the DOM element to scroll into view.
- * @param {Array} deps - An array of dependencies that trigger the effect.
- * @param {Array} flagRefs - An array of refs that are used as flags to control when to scroll.
- * @param {Object} [scrollOptions={}] - Options defining the behavior of the scrolling.
- * @param {String} [scrollOptions.align='center'] - The alignment of the element within the viewport.
- * @param {String} [scrollOptions.behavior='auto'] - The scrolling behavior.
- * @param {Number} [scrollOptions.offset=0] - An offset that is added to the scroll position.
- * @param {Boolean} [scrollOptions.scrollIfVisible=false] - Whether to scroll even if the element is visible.
+/**
+ * Custom hook to scroll an element into view only when it is not visible within the viewport.
+ *
+ * @param {Object} targetRef - A ref pointing to the DOM element to scroll into view.
+ * @param {Array} deps - An array of dependencies that trigger the effect.
+ * @param {Array} flagRefs - An array of refs that are used as flags to control when to scroll.
+ * @param {Object} [scrollOptions={}] - Options defining the behavior of the scrolling.
+ * @param {String} [scrollOptions.align='center'] - The alignment of the element within the viewport.
+ * @param {String} [scrollOptions.behavior='auto'] - The scrolling behavior.
+ * @param {Number} [scrollOptions.offset=0] - An offset that is added to the scroll position.
+ * @param {Boolean} [scrollOptions.scrollIfVisible=false] - Whether to scroll even if the element is visible.
  */
 function useScrollIntoView(targetRef, deps, scrollOptions = null, flagRefs = []) {
   useEffect(() => {
@@ -785,13 +786,13 @@ function _getTopOffset(item, scrollContainer, options) {
   return 0;
 }
 
-/**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
- * The function is memoized to minimize re-renders.
- *
- * @param {string} value - The string to evaluate.
- * @returns {any} - Evaluated value or the original value if not an expression.
+/**
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
+ * The function is memoized to minimize re-renders.
+ *
+ * @param {string} value - The string to evaluate.
+ * @returns {any} - Evaluated value or the original value if not an expression.
  */
 function useExpressionEvaluation(value) {
   const expressionLanguage = useService('expressionLanguage');
@@ -804,11 +805,11 @@ function useExpressionEvaluation(value) {
   }, [expressionLanguage, expressionContextInfo, value]);
 }
 
-/**
- * Returns the conditionally filtered data of a form reactively.
- * Memoised to minimize re-renders
- *
- * Warning: costly operation, use with care
+/**
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
+ * Warning: costly operation, use with care
  */
 function useFilteredFormData() {
   const {
@@ -841,16 +842,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');
@@ -874,12 +875,12 @@ function usePrevious(value, defaultValue, dependencies) {
   return ref.current;
 }
 
-/**
- * A custom hook to manage state changes with deep comparison.
- *
- * @param {any} value - The current value to manage.
- * @param {any} defaultValue - The initial default value for the state.
- * @returns {any} - Returns the current state.
+/**
+ * A custom hook to manage state changes with deep comparison.
+ *
+ * @param {any} value - The current value to manage.
+ * @param {any} defaultValue - The initial default value for the state.
+ * @returns {any} - Returns the current state.
  */
 function useDeepCompareState(value, defaultValue) {
   const [state, setState] = useState(defaultValue);
@@ -899,16 +900,16 @@ function compare(a, b) {
   return JSON.stringify(a) === JSON.stringify(b);
 }
 
-/**
- * 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 templating = useService('templating');
@@ -921,17 +922,17 @@ function useTemplateEvaluation(value, options = {}) {
   }, [templating, value, expressionContextInfo, 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);
@@ -1084,39 +1085,58 @@ function getOptionsData(formField, formData) {
 
 // transforms the provided options into a normalized format, trimming invalid options
 function normalizeOptionsData(optionsData) {
-  return optionsData.filter(_isOptionSomething).map(v => _normalizeOptionsData(v)).filter(v => v);
+  return optionsData.filter(_isAllowedValue).map(_normalizeOption).filter(o => !isNil(o));
 }
-function _normalizeOptionsData(optionData) {
-  if (_isAllowedOption(optionData)) {
-    // if a primitive is provided, use it as label and value
+
+/**
+ * Converts the provided option to a normalized format.
+ * If the option is not valid, null is returned.
+ *
+ * @param {object} option
+ * @param {string} option.label
+ * @param {*} option.value
+ *
+ * @returns
+ */
+function _normalizeOption(option) {
+  // (1) simple primitive case, use it as both label and value
+  if (_isAllowedPrimitive(option)) {
     return {
-      value: optionData,
-      label: `${optionData}`
+      value: option,
+      label: `${option}`
     };
   }
-  if (typeof optionData === 'object') {
-    if (!optionData.label && _isAllowedOption(optionData.value)) {
-      // if no label is provided, use the value as label
+  if (isObject(option)) {
+    const isValidLabel = _isValidLabel(option.label);
+
+    // (2) no label provided, but value is a simple primitive, use it as label and value
+    if (!isValidLabel && _isAllowedPrimitive(option.value)) {
       return {
-        value: optionData.value,
-        label: `${optionData.value}`
+        value: option.value,
+        label: `${option.value}`
       };
     }
-    if (_isOptionSomething(optionData.value) && _isAllowedOption(optionData.label)) {
-      // if both value and label are provided, use them as is, in this scenario, the value may also be an object
-      return optionData;
+
+    // (3) both label and value are provided, use them as is
+    if (isValidLabel && _isAllowedValue(option.value)) {
+      return option;
     }
   }
   return null;
 }
-function _isAllowedOption(option) {
-  return _isReadableType(option) && _isOptionSomething(option);
+function _isAllowedPrimitive(value) {
+  const isAllowedPrimitiveType = ['number', 'string', 'boolean'].includes(typeof value);
+  const isValid = value || value === 0 || value === false;
+  return isAllowedPrimitiveType && isValid;
 }
-function _isReadableType(option) {
-  return ['number', 'string', 'boolean'].includes(typeof option);
+function _isValidLabel(label) {
+  return label && isString(label);
 }
-function _isOptionSomething(option) {
-  return option || option === 0 || option === false;
+function _isAllowedValue(value) {
+  if (isObject(value)) {
+    return Object.keys(value).length > 0;
+  }
+  return _isAllowedPrimitive(value);
 }
 function createEmptyOptions(options = {}) {
   const defaults = {};
@@ -1134,8 +1154,8 @@ function createEmptyOptions(options = {}) {
   };
 }
 
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -1143,17 +1163,17 @@ const LOAD_STATES = {
   ERROR: 'error'
 };
 
-/**
- * @typedef {Object} OptionsGetter
- * @property {Object[]} options - The options data
- * @property {(LOAD_STATES)} loadState - The options data's loading state, to use for conditional rendering
+/**
+ * @typedef {Object} OptionsGetter
+ * @property {Object[]} options - The options data
+ * @property {(LOAD_STATES)} loadState - The options data's loading state, to use for conditional rendering
  */
 
-/**
- * A hook to load options for single and multiselect components.
- *
- * @param {Object} field - The form field to handle options for
- * @return {OptionsGetter} optionsGetter - A options getter object providing loading state and options
+/**
+ * A hook to load options for single and multiselect components.
+ *
+ * @param {Object} field - The form field to handle options for
+ * @return {OptionsGetter} optionsGetter - A options getter object providing loading state and options
  */
 function useOptionsAsync (field) {
   const {
@@ -1210,30 +1230,6 @@ const buildLoadedState = options => ({
   loadState: LOAD_STATES.LOADED
 });
 
-function useCleanupMultiSelectValues (props) {
-  const {
-    field,
-    options,
-    loadState,
-    onChange,
-    values
-  } = props;
-
-  // Ensures that the values are always a subset of the possible options
-  useEffect(() => {
-    if (loadState !== LOAD_STATES.LOADED) {
-      return;
-    }
-    const hasValuesNotInOptions = values.some(v => !options.map(o => o.value).includes(v));
-    if (hasValuesNotInOptions) {
-      onChange({
-        field,
-        value: values.filter(v => options.map(o => o.value).includes(v))
-      });
-    }
-  }, [field, options, onChange, JSON.stringify(values), loadState]);
-}
-
 const ENTER_KEYDOWN_EVENT = new KeyboardEvent('keydown', {
   code: 'Enter',
   key: 'Enter',
@@ -1409,6 +1405,12 @@ function sanitizeDateTimePickerValue(options) {
   if (subtype === DATETIME_SUBTYPES.DATETIME && (isInvalidDateString(value) || !isDateTimeInputInformationSufficient(value))) return null;
   return value;
 }
+function hasEqualValue(value, array) {
+  if (!Array.isArray(array)) {
+    return false;
+  }
+  return array.some(element => isEqual(value, element));
+}
 function sanitizeSingleSelectValue(options) {
   const {
     formField,
@@ -1417,7 +1419,7 @@ function sanitizeSingleSelectValue(options) {
   } = options;
   try {
     const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
-    return validValues.includes(value) ? value : null;
+    return hasEqualValue(value, validValues) ? value : null;
   } catch (error) {
     // use default value in case of formatting error
     // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
@@ -1432,7 +1434,7 @@ function sanitizeMultiSelectValue(options) {
   } = options;
   try {
     const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
-    return value.filter(v => validValues.includes(v));
+    return value.filter(v => hasEqualValue(v, validValues));
   } catch (error) {
     // use default value in case of formatting error
     // TODO(@Skaiir): log a warning when this happens - https://github.com/bpmn-io/form-js/issues/289
@@ -1440,6 +1442,31 @@ function sanitizeMultiSelectValue(options) {
   }
 }
 
+function useCleanupMultiSelectValues (props) {
+  const {
+    field,
+    options,
+    loadState,
+    onChange,
+    values
+  } = props;
+
+  // Ensures that the values are always a subset of the possible options
+  useEffect(() => {
+    if (loadState !== LOAD_STATES.LOADED) {
+      return;
+    }
+    const optionValues = options.map(o => o.value);
+    const hasValuesNotInOptions = values.some(v => !hasEqualValue(v, optionValues));
+    if (hasValuesNotInOptions) {
+      onChange({
+        field,
+        value: values.filter(v => hasEqualValue(v, optionValues))
+      });
+    }
+  }, [field, options, onChange, JSON.stringify(values), loadState]);
+}
+
 const type$d = 'checklist';
 function Checklist(props) {
   const {
@@ -1462,16 +1489,11 @@ function Checklist(props) {
   const {
     required
   } = validate;
-  const toggleCheckbox = v => {
-    let newValue = [...values];
-    if (!newValue.includes(v)) {
-      newValue.push(v);
-    } else {
-      newValue = newValue.filter(x => x != v);
-    }
+  const toggleCheckbox = toggledValue => {
+    const newValues = hasEqualValue(toggledValue, values) ? values.filter(value => !isEqual(value, toggledValue)) : [...values, toggledValue];
     props.onChange({
       field,
-      value: newValue
+      value: newValues
     });
   };
   const onCheckboxBlur = e => {
@@ -1509,15 +1531,16 @@ function Checklist(props) {
       required: required
     }), loadState == LOAD_STATES.LOADED && options.map((o, index) => {
       const itemDomId = `${domId}-${index}`;
+      const isChecked = hasEqualValue(o.value, values);
       return jsx(Label, {
         id: itemDomId,
         label: o.label,
         class: classNames({
-          'fjs-checked': values.includes(o.value)
+          'fjs-checked': isChecked
         }),
         required: false,
         children: jsx("input", {
-          checked: values.includes(o.value),
+          checked: isChecked,
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
@@ -1797,12 +1820,12 @@ FormComponent$1.config = {
   })
 };
 
-/**
- * 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.
+/**
+ * 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)));
@@ -1821,12 +1844,12 @@ function getLocaleDateFormat(locale = 'default') {
   }).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.
+/**
+ * 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();
@@ -1843,12 +1866,12 @@ function getLocaleReadableDateFormat(locale) {
   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.
+/**
+ * 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));
@@ -2560,10 +2583,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", {
@@ -2749,11 +2772,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
@@ -2771,41 +2794,41 @@ 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 : '';
 }
 
-/**
- * Sanitizes an iframe source to ensure we only allow for links
- * that start with http(s).
- *
- * @param {string} src
- * @returns {string}
+/**
+ * Sanitizes an iframe source to ensure we only allow for links
+ * that start with http(s).
+ *
+ * @param {string} src
+ * @returns {string}
  */
 function sanitizeIFrameSource(src) {
   const valid = ALLOWED_IFRAME_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
@@ -2849,13 +2872,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
@@ -2918,7 +2941,7 @@ function IFrame(props) {
       height: height,
       class: "fjs-iframe",
       id: prefixId(id, formId),
-      sandbox: ""
+      sandbox: "allow-scripts"
     }), evaluatedUrl && !safeUrl && jsx(IFramePlaceholder, {
       text: "External content couldn't be loaded."
     })]
@@ -3035,6 +3058,40 @@ Image.config = {
   })
 };
 
+function useFlushDebounce(func, additionalDeps = []) {
+  const timeoutRef = useRef(null);
+  const lastArgsRef = useRef(null);
+  const config = useService('config', false);
+  const debounce = config && config.debounce;
+  const shouldDebounce = debounce !== false && debounce !== 0;
+  const delay = typeof debounce === 'number' ? debounce : 300;
+  const debounceFunc = useCallback((...args) => {
+    if (!shouldDebounce) {
+      func(...args);
+      return;
+    }
+    lastArgsRef.current = args;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      func(...lastArgsRef.current);
+      lastArgsRef.current = null;
+    }, delay);
+  }, [func, delay, shouldDebounce, ...additionalDeps]);
+  const flushFunc = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      if (lastArgsRef.current !== null) {
+        func(...lastArgsRef.current);
+        lastArgsRef.current = null;
+      }
+      timeoutRef.current = null;
+    }
+  }, [func, ...additionalDeps]);
+  return [debounceFunc, flushFunc];
+}
+
 function TemplatedInputAdorner(props) {
   const {
     pre,
@@ -3125,8 +3182,7 @@ function Numberfield(props) {
     onFocus,
     field,
     value,
-    readonly,
-    onChange
+    readonly
   } = props;
   const {
     description,
@@ -3146,6 +3202,16 @@ function Numberfield(props) {
   } = validate;
   const inputRef = useRef();
   const [stringValueCache, setStringValueCache] = useState('');
+  const [onChangeDebounced, flushOnChange] = useFlushDebounce(params => {
+    props.onChange(params);
+  }, [props.onChange]);
+  const onInputBlur = () => {
+    flushOnChange && flushOnChange();
+    onBlur && onBlur();
+  };
+  const onInputFocus = () => {
+    onFocus && onFocus();
+  };
 
   // checks whether the value currently in the form data is practically different from the one in the input field cache
   // this allows us to guarantee the field always displays valid form data, but without auto-simplifying values like 1.000 to 1
@@ -3169,7 +3235,7 @@ function Numberfield(props) {
   const setValue = useCallback(stringValue => {
     if (isNullEquivalentValue(stringValue)) {
       setStringValueCache('');
-      onChange({
+      onChangeDebounced({
         field,
         value: null
       });
@@ -3184,18 +3250,18 @@ function Numberfield(props) {
     }
     if (isNaN(Number(stringValue))) {
       setStringValueCache('NaN');
-      onChange({
+      onChangeDebounced({
         field,
         value: 'NaN'
       });
       return;
     }
     setStringValueCache(stringValue);
-    onChange({
+    onChangeDebounced({
       field,
       value: serializeToString ? stringValue : Number(stringValue)
     });
-  }, [field, onChange, serializeToString]);
+  }, [field, onChangeDebounced, serializeToString]);
   const increment = () => {
     if (readonly) {
       return;
@@ -3279,8 +3345,8 @@ function Numberfield(props) {
           id: domId,
           onKeyDown: onKeyDown,
           onKeyPress: onKeyPress,
-          onBlur: () => onBlur && onBlur(),
-          onFocus: () => onFocus && onFocus()
+          onBlur: onInputBlur,
+          onFocus: onInputFocus
 
           // @ts-ignore
           ,
@@ -3357,7 +3423,8 @@ function useCleanupSingleSelectValue (props) {
     if (loadState !== LOAD_STATES.LOADED) {
       return;
     }
-    const hasValueNotInOptions = value && !options.map(o => o.value).includes(value);
+    const optionValues = options.map(o => o.value);
+    const hasValueNotInOptions = value && !hasEqualValue(value, optionValues);
     if (hasValueNotInOptions) {
       onChange({
         field,
@@ -3430,15 +3497,16 @@ function Radio(props) {
       required: required
     }), loadState == LOAD_STATES.LOADED && options.map((option, index) => {
       const itemDomId = `${domId}-${index}`;
+      const isChecked = isEqual(option.value, value);
       return jsx(Label, {
         id: itemDomId,
         label: option.label,
         class: classNames({
-          'fjs-checked': option.value === value
+          'fjs-checked': isChecked
         }),
         required: false,
         children: jsx("input", {
-          checked: option.value === value,
+          checked: isChecked,
           class: "fjs-input",
           disabled: disabled,
           readOnly: readonly,
@@ -3468,6 +3536,21 @@ Radio.config = {
   create: createEmptyOptions
 };
 
+/**
+ * This hook allows us to retrieve the label from a value in linear time by caching it in a map
+ * @param {Array} options
+ */
+function useGetLabelCorrelation(options) {
+  // This allows us to retrieve the label from a value in linear time
+  const labelMap = useMemo(() => Object.assign({}, ...options.map(o => ({
+    [_getValueHash(o.value)]: o.label
+  }))), [options]);
+  return useCallback(value => labelMap[_getValueHash(value)], [labelMap]);
+}
+const _getValueHash = value => {
+  return isObject(value) ? JSON.stringify(value) : value;
+};
+
 var _path$q;
 function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
 var SvgXMark = function SvgXMark(props) {
@@ -3499,7 +3582,7 @@ function SearchableSelect(props) {
   } = props;
   const [filter, setFilter] = useState('');
   const [isDropdownExpanded, setIsDropdownExpanded] = useState(false);
-  const [shouldApplyFilter, setShouldApplyFilter] = useState(true);
+  const [isFilterActive, setIsFilterActive] = useState(true);
   const [isEscapeClosed, setIsEscapeClose] = useState(false);
   const searchbarRef = useRef();
   const eventBus = useService('eventBus');
@@ -3514,23 +3597,22 @@ function SearchableSelect(props) {
     value,
     onChange: props.onChange
   });
-
-  // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
-  const valueToOptionMap = useMemo(() => Object.assign({}, ...options.map((o, x) => ({
-    [o.value]: options[x]
-  }))), [options]);
-  const valueLabel = useMemo(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
+  const getLabelCorrelation = useGetLabelCorrelation(options);
+  const label = useMemo(() => value && getLabelCorrelation(value), [value, getLabelCorrelation]);
 
   // whenever we change the underlying value, set the label to it
   useEffect(() => {
-    setFilter(valueLabel);
-  }, [valueLabel]);
+    setFilter(label);
+  }, [label]);
   const filteredOptions = useMemo(() => {
-    if (loadState === LOAD_STATES.LOADED) {
-      return shouldApplyFilter ? options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase())) : options;
+    if (loadState !== LOAD_STATES.LOADED) {
+      return [];
     }
-    return [];
-  }, [filter, loadState, options, shouldApplyFilter]);
+    if (!filter || !isFilterActive) {
+      return options;
+    }
+    return options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()));
+  }, [filter, loadState, options, isFilterActive]);
   const setValue = useCallback(option => {
     setFilter(option && option.label || '');
     props.onChange({
@@ -3557,7 +3639,7 @@ function SearchableSelect(props) {
   }) => {
     setIsEscapeClose(false);
     setIsDropdownExpanded(true);
-    setShouldApplyFilter(true);
+    setIsFilterActive(true);
     setFilter(target.value || '');
     eventBus.fire('formField.search', {
       formField: field,
@@ -3573,7 +3655,7 @@ function SearchableSelect(props) {
         {
           if (!isDropdownExpanded) {
             setIsDropdownExpanded(true);
-            setShouldApplyFilter(false);
+            setIsFilterActive(false);
           }
           keyDownEvent.preventDefault();
           break;
@@ -3591,7 +3673,7 @@ function SearchableSelect(props) {
   const onInputMouseDown = useCallback(() => {
     setIsEscapeClose(false);
     setIsDropdownExpanded(true);
-    setShouldApplyFilter(false);
+    setIsFilterActive(false);
   }, []);
   const onInputFocus = useCallback(() => {
     setIsEscapeClose(false);
@@ -3600,9 +3682,9 @@ function SearchableSelect(props) {
   }, [onFocus]);
   const onInputBlur = useCallback(() => {
     setIsDropdownExpanded(false);
-    setFilter(valueLabel);
+    setFilter(label);
     onBlur && onBlur();
-  }, [onBlur, valueLabel]);
+  }, [onBlur, label]);
   return jsxs(Fragment, {
     children: [jsxs("div", {
       class: classNames('fjs-input-group', {
@@ -3679,12 +3761,8 @@ function SimpleSelect(props) {
     value,
     onChange: props.onChange
   });
-
-  // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
-  const valueToOptionMap = useMemo(() => Object.assign({}, ...options.map((o, x) => ({
-    [o.value]: options[x]
-  }))), [options]);
-  const valueLabel = useMemo(() => value && valueToOptionMap[value] && valueToOptionMap[value].label || '', [value, valueToOptionMap]);
+  const getLabelCorrelation = useGetLabelCorrelation(options);
+  const valueLabel = useMemo(() => value && getLabelCorrelation(value), [value, getLabelCorrelation]);
   const setValue = useCallback(option => {
     props.onChange({
       value: option && option.value || null,
@@ -3999,11 +4077,7 @@ function Taglist(props) {
     values,
     onChange: props.onChange
   });
-
-  // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
-  const valueToOptionMap = useMemo(() => Object.assign({}, ...options.map((o, x) => ({
-    [o.value]: options[x]
-  }))), [options]);
+  const getLabelCorrelation = useGetLabelCorrelation(options);
   const hasOptionsLeft = useMemo(() => options.length > values.length, [options.length, values.length]);
 
   // Usage of stringify is necessary here because we want this effect to only trigger when there is a value change to the array
@@ -4011,12 +4085,14 @@ function Taglist(props) {
     if (loadState !== LOAD_STATES.LOADED) {
       return [];
     }
-    return options.filter(o => o.label && o.value && o.label.toLowerCase().includes(filter.toLowerCase()) && !values.includes(o.value));
+    const isValidFilteredOption = option => {
+      const filterMatches = option.label.toLowerCase().includes(filter.toLowerCase());
+      return filterMatches && !hasEqualValue(option.value, values);
+    };
+    return options.filter(isValidFilteredOption);
   }, [filter, options, JSON.stringify(values), loadState]);
   const selectValue = value => {
-    if (filter) {
-      setFilter('');
-    }
+    setFilter('');
 
     // Ensure values cannot be double selected due to latency
     if (values.at(-1) === value) {
@@ -4028,8 +4104,9 @@ function Taglist(props) {
     });
   };
   const deselectValue = value => {
+    const newValues = values.filter(v => !isEqual(v, value));
     props.onChange({
-      value: values.filter(v => v != value),
+      value: newValues,
       field
     });
   };
@@ -4139,7 +4216,7 @@ function Taglist(props) {
             onMouseDown: e => e.preventDefault(),
             children: [jsx("span", {
               class: "fjs-taglist-tag-label",
-              children: valueToOptionMap[v] ? valueToOptionMap[v].label : undefined
+              children: getLabelCorrelation(v)
             }), !disabled && !readonly && jsx("button", {
               type: "button",
               title: "Remove tag",
@@ -4305,13 +4382,20 @@ function Textfield(props) {
   const {
     required
   } = validate;
-  const onChange = ({
+  const [onInputChange, flushOnChange] = useFlushDebounce(({
     target
   }) => {
     props.onChange({
       field,
       value: target.value
     });
+  }, [props.onChange]);
+  const onInputBlur = () => {
+    flushOnChange && flushOnChange();
+    onBlur && onBlur();
+  };
+  const onInputFocus = () => {
+    onFocus && onFocus();
   };
   return jsxs("div", {
     class: formFieldClasses(type$2, {
@@ -4333,9 +4417,9 @@ function Textfield(props) {
         disabled: disabled,
         readOnly: readonly,
         id: domId,
-        onInput: onChange,
-        onBlur: () => onBlur && onBlur(),
-        onFocus: () => onFocus && onFocus(),
+        onInput: onInputChange,
+        onBlur: onInputBlur,
+        onFocus: onInputFocus,
         type: "text",
         value: value,
         "aria-describedby": errorMessageId
@@ -4394,13 +4478,20 @@ function Textarea(props) {
     required
   } = validate;
   const textareaRef = useRef();
-  const onInput = ({
+  const [onInputChange, flushOnChange] = useFlushDebounce(({
     target
   }) => {
     props.onChange({
       field,
       value: target.value
     });
+  }, [props.onChange]);
+  const onInputBlur = () => {
+    flushOnChange && flushOnChange();
+    onBlur && onBlur();
+  };
+  const onInputFocus = () => {
+    onFocus && onFocus();
   };
   useLayoutEffect(() => {
     autoSizeTextarea(textareaRef.current);
@@ -4423,9 +4514,9 @@ function Textarea(props) {
       disabled: disabled,
       readonly: readonly,
       id: domId,
-      onInput: onInput,
-      onBlur: () => onBlur && onBlur(),
-      onFocus: () => onFocus && onFocus(),
+      onInput: onInputChange,
+      onBlur: onInputBlur,
+      onFocus: onInputFocus,
       value: value,
       ref: textareaRef,
       "aria-describedby": errorMessageId
@@ -4525,28 +4616,28 @@ var CaretRightIcon = SvgCaretRight;
 
 const type = 'table';
 
-/**
- * @typedef {('asc'|'desc')} Direction
- *
- * @typedef Sorting
- * @property {string} key
- * @property {Direction} direction
- *
- * @typedef Column
- * @property {string} label
- * @property {string} key
- *
- * @typedef Props
- * @property {Object} field
- * @property {string} field.id
- * @property {Array<Column>} [field.columns]
- * @property {string} [field.columnsExpression]
- * @property {string} [field.label]
- * @property {number} [field.rowCount]
- * @property {string} [field.dataSource]
- *
- * @param {Props} props
- * @returns {import("preact").JSX.Element}
+/**
+ * @typedef {('asc'|'desc')} Direction
+ *
+ * @typedef Sorting
+ * @property {string} key
+ * @property {Direction} direction
+ *
+ * @typedef Column
+ * @property {string} label
+ * @property {string} key
+ *
+ * @typedef Props
+ * @property {Object} field
+ * @property {string} field.id
+ * @property {Array<Column>} [field.columns]
+ * @property {string} [field.columnsExpression]
+ * @property {string} [field.label]
+ * @property {number} [field.rowCount]
+ * @property {string} [field.dataSource]
+ *
+ * @param {Props} props
+ * @returns {import("preact").JSX.Element}
  */
 function Table(props) {
   const {
@@ -4756,10 +4847,10 @@ Table.config = {
 
 // helpers /////////////////////////////
 
-/**
- * @param {string|void} columnsExpression
- * @param {Column[]} fallbackColumns
- * @returns {Column[]}
+/**
+ * @param {string|void} columnsExpression
+ * @param {Column[]} fallbackColumns
+ * @returns {Column[]}
  */
 function useEvaluatedColumns(columnsExpression, fallbackColumns) {
   /** @type {Column[]|null} */
@@ -4767,18 +4858,18 @@ function useEvaluatedColumns(columnsExpression, fallbackColumns) {
   return Array.isArray(evaluation) && evaluation.every(isColumn) ? evaluation : fallbackColumns;
 }
 
-/**
- * @param {any} column
- * @returns {column is Column}
+/**
+ * @param {any} column
+ * @returns {column is Column}
  */
 function isColumn(column) {
   return isObject(column) && isString(column['label']) && isString(column['key']);
 }
 
-/**
- * @param {Array} array
- * @param {number} size
- * @returns {Array}
+/**
+ * @param {Array} array
+ * @param {number} size
+ * @returns {Array}
  */
 function chunk(array, size) {
   return array.reduce((chunks, item, index) => {
@@ -4791,11 +4882,11 @@ function chunk(array, size) {
   }, []);
 }
 
-/**
- * @param {unknown[]} array
- * @param {string} key
- * @param {Direction} direction
- * @returns {unknown[]}
+/**
+ * @param {unknown[]} array
+ * @param {string} key
+ * @param {Direction} direction
+ * @returns {unknown[]}
  */
 function sortByColumn(array, key, direction) {
   return [...array].sort((a, b) => {
@@ -4809,10 +4900,10 @@ function sortByColumn(array, key, direction) {
   });
 }
 
-/**
- * @param {null|Sorting} sortBy
- * @param {string} key
- * @param {string} label
+/**
+ * @param {null|Sorting} sortBy
+ * @param {string} key
+ * @param {string} label
  */
 function getHeaderAriaLabel(sortBy, key, label) {
   if (sortBy === null || sortBy.key !== key) {
@@ -5187,37 +5278,37 @@ class FormFields {
 const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression'];
 const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'url'];
 
-/**
- * @typedef { import('../types').Schema } Schema
+/**
+ * @typedef { import('../types').Schema } Schema
  */
 
-/**
- * Parse the schema for variables a form might make use of.
- *
- * @example
- *
- * // retrieve variables from schema
- * const variables = getSchemaVariables(schema);
- *
- * @example
- *
- * // retrieve input variables from schema
- * const inputVariables = getSchemaVariables(schema, { outputs: false });
- *
- * @example
- *
- * // retrieve output variables from schema
- * const outputVariables = getSchemaVariables(schema, { inputs: false });
- *
- * @param {Schema} schema
- * @param {object} [options]
- * @param {any} [options.expressionLanguage]
- * @param {any} [options.templating]
- * @param {any} [options.formFields]
- * @param {boolean} [options.inputs=true]
- * @param {boolean} [options.outputs=true]
- *
- * @return {string[]}
+/**
+ * Parse the schema for variables a form might make use of.
+ *
+ * @example
+ *
+ * // retrieve variables from schema
+ * const variables = getSchemaVariables(schema);
+ *
+ * @example
+ *
+ * // retrieve input variables from schema
+ * const inputVariables = getSchemaVariables(schema, { outputs: false });
+ *
+ * @example
+ *
+ * // retrieve output variables from schema
+ * const outputVariables = getSchemaVariables(schema, { inputs: false });
+ *
+ * @param {Schema} schema
+ * @param {object} [options]
+ * @param {any} [options.expressionLanguage]
+ * @param {any} [options.templating]
+ * @param {any} [options.formFields]
+ * @param {boolean} [options.inputs=true]
+ * @param {boolean} [options.outputs=true]
+ *
+ * @return {string[]}
  */
 function getSchemaVariables(schema, options = {}) {
   const {
@@ -5293,13 +5384,13 @@ function getSchemaVariables(schema, options = {}) {
   return Array.from(new Set(variables));
 }
 
-/**
- * Get the ancestry list of a form field.
- *
- * @param {string} formFieldId
- * @param {import('../core/FormFieldRegistry').default} formFieldRegistry
- *
- * @return {Array<string>} ancestry list
+/**
+ * Get the ancestry list of a form field.
+ *
+ * @param {string} formFieldId
+ * @param {import('../core/FormFieldRegistry').default} formFieldRegistry
+ *
+ * @return {Array<string>} ancestry list
  */
 const getAncestryList = (formFieldId, formFieldRegistry) => {
   const ids = [];
@@ -5311,9 +5402,9 @@ const getAncestryList = (formFieldId, formFieldRegistry) => {
   return ids;
 };
 
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 
 class ConditionChecker {
@@ -5323,14 +5414,14 @@ class ConditionChecker {
     this._eventBus = eventBus;
   }
 
-  /**
-   * For given data, remove properties based on condition.
-   *
-   * @param {Object<string, any>} data
-   * @param {Object<string, any>} contextData
-   * @param {Object} [options]
-   * @param {Function} [options.getFilterPath]
-   * @param {boolean} [options.leafNodeDeletionOnly]
+  /**
+   * For given data, remove properties based on condition.
+   *
+   * @param {Object<string, any>} data
+   * @param {Object<string, any>} contextData
+   * @param {Object} [options]
+   * @param {Function} [options.getFilterPath]
+   * @param {boolean} [options.leafNodeDeletionOnly]
    */
   applyConditions(data, contextData = {}, options = {}) {
     const workingData = clone(data);
@@ -5424,13 +5515,13 @@ class ConditionChecker {
     return workingData;
   }
 
-  /**
-   * 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) {
@@ -5451,12 +5542,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) {
@@ -5498,12 +5589,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);
@@ -6124,11 +6215,11 @@ class RepeatRenderManager {
     this.RepeatFooter = this.RepeatFooter.bind(this);
   }
 
-  /**
-   * Checks whether a field is currently repeating its children.
-   *
-   * @param {string} id - The id of the field to check
-   * @returns {boolean} - True if repeatable, false otherwise
+  /**
+   * Checks whether a field is currently repeating its children.
+   *
+   * @param {string} id - The id of the field to check
+   * @returns {boolean} - True if repeatable, false otherwise
    */
   isFieldRepeating(id) {
     if (!id) {
@@ -6888,8 +6979,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 = {
@@ -6923,12 +7014,12 @@ function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('./FormFieldRegistry').default } formFieldRegistry
-   * @param { import('./PathRegistry').default } pathRegistry
-   * @param { import('./FieldFactory').default } fieldFactory
-   * @param { import('./FormLayouter').default } formLayouter
+  /**
+   * @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;
@@ -6937,21 +7028,21 @@ class Importer {
     this._formLayouter = formLayouter;
   }
 
-  /**
-   * 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}
+  /**
+   * 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
@@ -6976,12 +7067,12 @@ class Importer {
     this._pathRegistry.clear();
   }
 
-  /**
-   * @param {{[x: string]: any}} fieldAttrs
-   * @param {String} [parentId]
-   * @param {number} [index]
-   *
-   * @return {any} field
+  /**
+   * @param {{[x: string]: any}} fieldAttrs
+   * @param {String} [parentId]
+   * @param {number} [index]
+   *
+   * @return {any} field
    */
   importFormField(fieldAttrs, parentId, index) {
     const {
@@ -7006,11 +7097,11 @@ class Importer {
     return field;
   }
 
-  /**
-   * @param {Array<any>} components
-   * @param {string} parentId
-   *
-   * @return {Array<any>} imported components
+  /**
+   * @param {Array<any>} components
+   * @param {string} parentId
+   *
+   * @return {Array<any>} imported components
    */
   importFormFields(components, parentId) {
     return components.map((component, index) => {
@@ -7021,11 +7112,11 @@ class Importer {
 Importer.$inject = ['formFieldRegistry', 'pathRegistry', 'fieldFactory', 'formLayouter'];
 
 class FieldFactory {
-  /**
-   * @constructor
-   *
-   * @param  formFieldRegistry
-   * @param  formFields
+  /**
+   * @constructor
+   *
+   * @param  formFieldRegistry
+   * @param  formFields
    */
   constructor(formFieldRegistry, pathRegistry, formFields) {
     this._formFieldRegistry = formFieldRegistry;
@@ -7135,36 +7226,36 @@ class FieldFactory {
 }
 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)
- *             }
- *           ]
- *         }
- *       ]
- *     }
- *   ]
+/**
+ * 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, injector) {
@@ -7280,16 +7371,16 @@ class PathRegistry {
     }
   }
 
-  /**
-   * 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.
+  /**
+   * 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;
@@ -7330,16 +7421,16 @@ class PathRegistry {
     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.indexes=null] - A map of parent IDs to the index of the field within said parent, leave null to get an unindexed path.
-   * @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.
+  /**
+   * 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.indexes=null] - A map of parent IDs to the index of the field within said parent, leave null to get an unindexed path.
+   * @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 {
@@ -7400,23 +7491,23 @@ const _getNextSegment = (node, segment) => {
 };
 PathRegistry.$inject = ['formFieldRegistry', 'formFields', 'injector'];
 
-/**
- * @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) {
@@ -7426,8 +7517,8 @@ class FormLayouter {
     this._eventBus = eventBus;
   }
 
-  /**
-   * @param {FormRow} row
+  /**
+   * @param {FormRow} row
    */
   addRow(formFieldId, row) {
     let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -7441,18 +7532,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 => {
@@ -7463,9 +7554,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);
@@ -7475,15 +7566,15 @@ class FormLayouter {
     return rowsForField.rows;
   }
 
-  /**
-   * @returns {string}
+  /**
+   * @returns {string}
    */
   nextRowId() {
     return this._ids.nextPrefixed('Row_');
   }
 
-  /**
-   * @param {any} formField
+  /**
+   * @param {any} formField
    */
   calculateLayout(formField) {
     const {
@@ -7537,9 +7628,9 @@ 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));
@@ -7664,55 +7755,55 @@ var core = {
   validator: ['type', Validator]
 };
 
-/**
- * @typedef { import('./types').Injector } Injector
- * @typedef { import('./types').Data } Data
- * @typedef { import('./types').Errors } Errors
- * @typedef { import('./types').Schema } Schema
- * @typedef { import('./types').FormProperties } FormProperties
- * @typedef { import('./types').FormProperty } FormProperty
- * @typedef { import('./types').FormEvent } FormEvent
- * @typedef { import('./types').FormOptions } FormOptions
- *
- * @typedef { {
- *   data: Data,
- *   initialData: Data,
- *   errors: Errors,
- *   properties: FormProperties,
- *   schema: Schema
- * } } State
- *
- * @typedef { (type:FormEvent, priority:number, handler:Function) => void } OnEventWithPriority
- * @typedef { (type:FormEvent, handler:Function) => void } OnEventWithOutPriority
- * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+/**
+ * @typedef { import('./types').Injector } Injector
+ * @typedef { import('./types').Data } Data
+ * @typedef { import('./types').Errors } Errors
+ * @typedef { import('./types').Schema } Schema
+ * @typedef { import('./types').FormProperties } FormProperties
+ * @typedef { import('./types').FormProperty } FormProperty
+ * @typedef { import('./types').FormEvent } FormEvent
+ * @typedef { import('./types').FormOptions } FormOptions
+ *
+ * @typedef { {
+ *   data: Data,
+ *   initialData: Data,
+ *   errors: Errors,
+ *   properties: FormProperties,
+ *   schema: Schema
+ * } } State
+ *
+ * @typedef { (type:FormEvent, priority:number, handler:Function) => void } OnEventWithPriority
+ * @typedef { (type:FormEvent, handler:Function) => void } OnEventWithOutPriority
+ * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
  */
 
 const ids = new Ids([32, 36, 1]);
 
-/**
- * The form.
+/**
+ * The form.
  */
 class Form {
-  /**
-   * @constructor
-   * @param {FormOptions} options
+  /**
+   * @constructor
+   * @param {FormOptions} 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();
     const {
@@ -7721,9 +7812,9 @@ class Form {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       initialData: null,
@@ -7747,9 +7838,9 @@ class Form {
     this._emit('form.clear');
   }
 
-  /**
-   * Destroy the form, removing it from DOM,
-   * if attached.
+  /**
+   * Destroy the form, removing it from DOM,
+   * if attached.
    */
   destroy() {
     // destroy form services
@@ -7760,13 +7851,13 @@ class Form {
     this._detach(false);
   }
 
-  /**
-   * Open a form schema with the given initial data.
-   *
-   * @param {Schema} schema
-   * @param {Data} [data]
-   *
-   * @return Promise<{ warnings: Array<any> }>
+  /**
+   * Open a form schema with the given initial data.
+   *
+   * @param {Schema} schema
+   * @param {Data} [data]
+   *
+   * @return Promise<{ warnings: Array<any> }>
    */
   importSchema(schema, data = {}) {
     return new Promise((resolve, reject) => {
@@ -7799,10 +7890,10 @@ class Form {
     });
   }
 
-  /**
-   * Submit the form, triggering all field validations.
-   *
-   * @returns { { data: Data, errors: Errors } }
+  /**
+   * Submit the form, triggering all field validations.
+   *
+   * @returns { { data: Data, errors: Errors } }
    */
   submit() {
     const {
@@ -7828,8 +7919,8 @@ class Form {
     });
   }
 
-  /**
-   * @returns {Errors}
+  /**
+   * @returns {Errors}
    */
   validate() {
     const formFields = this.get('formFields'),
@@ -7901,8 +7992,8 @@ class Form {
     return filteredErrors;
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -7920,10 +8011,10 @@ class Form {
     this._detach();
   }
 
-  /**
-   * @private
-   *
-   * @param {boolean} [emit]
+  /**
+   * @private
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -7937,9 +8028,9 @@ class Form {
     parentNode.removeChild(container);
   }
 
-  /**
-   * @param {FormProperty} property
-   * @param {any} value
+  /**
+   * @param {FormProperty} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = set(this._getState().properties, [property], value);
@@ -7948,50 +8039,52 @@ class Form {
     });
   }
 
-  /**
-   * @param {FormEvent} type
-   * @param {Function} handler
+  /**
+   * @param {FormEvent} type
+   * @param {Function} handler
    */
   off(type, handler) {
     this.get('eventBus').off(type, handler);
   }
 
-  /**
-   * @private
-   *
-   * @param {FormOptions} options
-   * @param {Element} container
-   *
-   * @returns {Injector}
+  /**
+   * @private
+   *
+   * @param {FormOptions} options
+   * @param {Element} container
+   *
+   * @returns {Injector}
    */
   _createInjector(options, container) {
     const {
+      modules = this._getModules(),
       additionalModules = [],
-      modules = this._getModules()
+      ...config
     } = options;
-    const config = {
+    const enrichedConfig = {
+      ...config,
       renderer: {
         container
       }
     };
     return createInjector([{
-      config: ['value', config]
+      config: ['value', enrichedConfig]
     }, {
       form: ['value', this]
     }, core, ...modules, ...additionalModules]);
   }
 
-  /**
-   * @private
+  /**
+   * @private
    */
   _emit(type, data) {
     this.get('eventBus').fire(type, data);
   }
 
-  /**
-   * @internal
-   *
-   * @param { { add?: boolean, field: any, indexes: object, remove?: number, value?: any } } update
+  /**
+   * @internal
+   *
+   * @param { { add?: boolean, field: any, indexes: object, remove?: number, value?: any } } update
    */
   _update(update) {
     const {
@@ -8017,15 +8110,15 @@ class Form {
     });
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getState() {
     return this._state;
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _setState(state) {
     this._state = {
@@ -8035,22 +8128,22 @@ class Form {
     this._emit('changed', this._getState());
   }
 
-  /**
-  * @internal
+  /**
+  * @internal
   */
   _getModules() {
     return [ExpressionLanguageModule, MarkdownModule, ViewerCommandsModule, RepeatRenderModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getSubmitData() {
     const formFieldRegistry = this.get('formFieldRegistry');
@@ -8107,16 +8200,16 @@ class Form {
     return this._applyConditions(workingSubmitData, formData);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _applyConditions(toFilter, data, options = {}) {
     const conditionChecker = this.get('conditionChecker');
     return conditionChecker.applyConditions(toFilter, data, options);
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getInitializedFieldData(data, options = {}) {
     const formFieldRegistry = this.get('formFieldRegistry');
@@ -8222,9 +8315,9 @@ function createForm(options) {
   const {
     data,
     schema,
-    ...rest
+    ...formOptions
   } = options;
-  const form = new Form(rest);
+  const form = new Form(formOptions);
   return form.importSchema(schema, data).then(function () {
     return form;
   });