@bpmn-io/form-js-viewer 1.8.3 → 1.8.5

package/dist/index.es.js

@@ -10,6 +10,7 @@ import flatpickr from 'flatpickr';
 import * as React from 'preact/compat';
 import { createPortal } from 'preact/compat';
 import DOMPurify from 'dompurify';
+import { isEqual as isEqual$1 } from 'lodash';
 import { Injector } from 'didi';
 import { parseExpression, parseUnaryTests, evaluate, unaryTest } from 'feelin';
 import { evaluate as evaluate$1, parser, buildSimpleTree } from 'feelers';
@@ -352,10 +353,10 @@ 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.
@@ -720,6 +721,20 @@ function generateIdForType(type) {
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
+function runRecursively(formField, fn) {
+  const components = formField.components || [];
+  components.forEach((component, _) => {
+    runRecursively(component, fn);
+  });
+  fn(formField);
+}
+function wrapObjectKeysWithUnderscores(obj) {
+  const newObj = {};
+  for (const [key, value] of Object.entries(obj)) {
+    newObj[`_${key}_`] = value;
+  }
+  return newObj;
+}
 
 /**
  * Transform a LocalExpressionContext object into a usable FEEL context.
@@ -736,25 +751,24 @@ function buildExpressionContext(context) {
   return {
     ...specialContextKeys,
     ...data,
-    ..._wrapObjectKeysWithUnderscores(specialContextKeys)
+    ...wrapObjectKeysWithUnderscores(specialContextKeys)
   };
 }
-function runRecursively(formField, fn) {
-  const components = formField.components || [];
-  components.forEach((component, index) => {
-    runRecursively(component, fn);
-  });
-  fn(formField);
-}
 
-// helpers //////////////////////
-
-function _wrapObjectKeysWithUnderscores(obj) {
-  const newObj = {};
-  for (const [key, value] of Object.entries(obj)) {
-    newObj[`_${key}_`] = value;
+/**
+ * Evaluate a string based on the expressionLanguage and context information.
+ * If the string is not an expression, it is returned as is.
+ *
+ * @param {any} expressionLanguage - The expression language to use.
+ * @param {string} value - The string to evaluate.
+ * @param {Object} expressionContextInfo - The context information to use.
+ * @returns {any} - Evaluated value or the original value if not an expression.
+ */
+function runExpressionEvaluation(expressionLanguage, value, expressionContextInfo) {
+  if (expressionLanguage && expressionLanguage.isExpression(value)) {
+    return expressionLanguage.evaluate(value, buildExpressionContext(expressionContextInfo));
   }
-  return newObj;
+  return value;
 }
 
 /**
@@ -887,12 +901,7 @@ function _isAllowedValue(value) {
 function useExpressionEvaluation(value) {
   const expressionLanguage = useService('expressionLanguage');
   const expressionContextInfo = useContext(LocalExpressionContext);
-  return useMemo(() => {
-    if (expressionLanguage && expressionLanguage.isExpression(value)) {
-      return expressionLanguage.evaluate(value, buildExpressionContext(expressionContextInfo));
-    }
-    return value;
-  }, [expressionLanguage, expressionContextInfo, value]);
+  return useMemo(() => runExpressionEvaluation(expressionLanguage, value, expressionContextInfo), [expressionLanguage, expressionContextInfo, value]);
 }
 
 /**
@@ -1009,11 +1018,11 @@ const getDOMPurifyConfig = sanitizeStyleTags => {
   };
 };
 
-/**
- * A custom hook to build up security attributes from form configuration.
- *
- * @param {Object} security - The security configuration.
- * @returns {Array} - Returns a tuple with sandbox and allow attributes.
+/**
+ * A custom hook to build up security attributes from form configuration.
+ *
+ * @param {Object} security - The security configuration.
+ * @returns {Array} - Returns a tuple with sandbox and allow attributes.
  */
 function useSecurityAttributesMap(security) {
   const securityMemoized = useDeepCompareMemoize(security);
@@ -1769,7 +1778,6 @@ function Checkbox(props) {
     target
   }) => {
     props.onChange({
-      field,
       value: target.checked
     });
   };
@@ -1848,7 +1856,6 @@ function Checklist(props) {
   const toggleCheckbox = toggledValue => {
     const newValues = hasEqualValue(toggledValue, values) ? values.filter(value => !isEqual(value, toggledValue)) : [...values, toggledValue];
     props.onChange({
-      field,
       value: newValues
     });
   };
@@ -1936,10 +1943,11 @@ function FormField(props) {
   const {
     field,
     indexes,
-    onChange
+    onChange: _onChange
   } = props;
   const formFields = useService('formFields'),
     viewerCommands = useService('viewerCommands', false),
+    formFieldInstanceRegistry = useService('formFieldInstanceRegistry', false),
     pathRegistry = useService('pathRegistry'),
     eventBus = useService('eventBus'),
     form = useService('form');
@@ -1966,6 +1974,7 @@ function FormField(props) {
     throw new Error(`cannot render field <${field.type}>`);
   }
   const fieldConfig = FormFieldComponent.config;
+  const localExpressionContext = useContext(LocalExpressionContext);
   const valuePath = useMemo(() => pathRegistry.getValuePath(field, {
     indexes
   }), [field, indexes, pathRegistry]);
@@ -1975,6 +1984,23 @@ function FormField(props) {
 
   // add precedence: global readonly > form field disabled
   const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
+  const hidden = useCondition(field.conditional && field.conditional.hide || null);
+  const fieldInstance = useMemo(() => ({
+    id: field.id,
+    expressionContextInfo: localExpressionContext,
+    valuePath,
+    indexes
+  }), [field.id, valuePath, localExpressionContext, indexes]);
+
+  // register form field instance
+  useEffect(() => {
+    if (formFieldInstanceRegistry && !hidden) {
+      const instanceId = formFieldInstanceRegistry.add(fieldInstance);
+      return () => {
+        formFieldInstanceRegistry.remove(instanceId);
+      };
+    }
+  }, [fieldInstance, formFieldInstanceRegistry, hidden]);
 
   // ensures the initial validation behavior can be re-triggered upon form reset
   useEffect(() => {
@@ -1995,35 +2021,33 @@ function FormField(props) {
     const hasInitialValue = initialValue && !isEqual(initialValue, []);
     if (initialValidationTrigger && hasInitialValue) {
       setInitialValidationTrigger(false);
-      viewerCommands.updateFieldValidation(field, initialValue, indexes);
+      viewerCommands.updateFieldInstanceValidation(fieldInstance, initialValue);
     }
-  }, [viewerCommands, field, initialValue, initialValidationTrigger, indexes]);
+  }, [fieldInstance, initialValidationTrigger, initialValue, viewerCommands]);
   const onBlur = useCallback(() => {
     const value = get(data, valuePath);
     if (initialValidationTrigger) {
       setInitialValidationTrigger(false);
-      viewerCommands.updateFieldValidation(field, value, indexes);
+      viewerCommands.updateFieldInstanceValidation(fieldInstance, value);
     }
     eventBus.fire('formField.blur', {
       formField: field
     });
-  }, [eventBus, field, indexes, viewerCommands, initialValidationTrigger, data, valuePath]);
+  }, [data, eventBus, field, fieldInstance, initialValidationTrigger, valuePath, viewerCommands]);
   const onFocus = useCallback(() => {
     eventBus.fire('formField.focus', {
       formField: field
     });
   }, [eventBus, field]);
-  const hidden = useCondition(field.conditional && field.conditional.hide || null);
-  const onChangeIndexed = useCallback(update => {
-    // any data change will trigger validation
+  const onChange = useCallback(update => {
     setInitialValidationTrigger(false);
-
-    // add indexes of the keyed field to the update, if any
-    onChange(fieldConfig.keyed ? {
-      ...update,
-      indexes
-    } : update);
-  }, [onChange, fieldConfig.keyed, indexes]);
+    _onChange({
+      field,
+      indexes,
+      fieldInstance,
+      ...update
+    });
+  }, [_onChange, field, fieldInstance, indexes]);
   if (hidden) {
     return jsx(Hidden, {
       field: field
@@ -2036,11 +2060,12 @@ function FormField(props) {
     disabled: disabled,
     errors: fieldErrors,
     domId: domId,
-    onChange: disabled || readonly ? noop$1 : onChangeIndexed,
+    onChange: disabled || readonly ? noop$1 : onChange,
     onBlur: disabled || readonly ? noop$1 : onBlur,
     onFocus: disabled || readonly ? noop$1 : onFocus,
     readonly: readonly,
-    value: value
+    value: value,
+    fieldInstance: fieldInstance
   });
   if (fieldConfig.escapeGridRender) {
     return formFieldElement;
@@ -2158,7 +2183,7 @@ function RowsRenderer(props) {
     Row
   } = useContext(FormRenderContext);
   return jsxs(Fragment, {
-    children: [" ", rows.map(row => {
+    children: [' ', rows.map(row => {
       const {
         components = []
       } = row;
@@ -2184,7 +2209,7 @@ function RowsRenderer(props) {
           });
         })
       });
-    }), " "]
+    }), ' ']
   });
 }
 
@@ -2314,23 +2339,23 @@ function InputAdorner(props) {
       'fjs-disabled': disabled,
       'fjs-readonly': readonly
     }, {
-      'hasErrors': hasErrors
+      hasErrors: hasErrors
     }),
     ref: rootRef,
     children: [pre && jsxs("span", {
       class: "fjs-input-adornment border-right border-radius-left",
       onClick: onAdornmentClick,
-      children: [" ", isString(pre) ? jsx("span", {
+      children: [' ', isString(pre) ? jsx("span", {
         class: "fjs-input-adornment-text",
         children: pre
-      }) : pre, " "]
+      }) : pre, ' ']
     }), children, post && jsxs("span", {
       class: "fjs-input-adornment border-left border-radius-right",
       onClick: onAdornmentClick,
-      children: [" ", isString(post) ? jsx("span", {
+      children: [' ', isString(post) ? jsx("span", {
         class: "fjs-input-adornment-text",
         children: post
-      }) : post, " "]
+      }) : post, ' ']
     })]
   });
 }
@@ -2379,7 +2404,9 @@ function Datepicker(props) {
       clickOpens: false,
       // TODO: support dates prior to 1900 (https://github.com/bpmn-io/form-js/issues/533)
       minDate: disallowPassedDates ? 'today' : '01/01/1900',
-      errorHandler: () => {/* do nothing, we expect the values to sometimes be erronous and we don't want warnings polluting the console */}
+      errorHandler: () => {
+        /* do nothing, we expect the values to sometimes be erronous and we don't want warnings polluting the console */
+      }
     };
     const instance = flatpickr(dateInputRef.current, config);
     setFlatpickrInstance(instance);
@@ -2484,7 +2511,7 @@ function Datepicker(props) {
   });
 }
 
-var _path$v, _path2$5;
+var _path$v, _path2$4;
 function _extends$w() { _extends$w = 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$w.apply(this, arguments); }
 var SvgClock = function SvgClock(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$w({
@@ -2496,7 +2523,7 @@ var SvgClock = function SvgClock(props) {
   }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M13 14.41 18.59 20 20 18.59l-5-5.01V5h-2v9.41Z"
-  })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
     d: "M6.222 25.64A14 14 0 1 0 21.778 2.36 14 14 0 0 0 6.222 25.64ZM7.333 4.023a12 12 0 1 1 13.334 19.955A12 12 0 0 1 7.333 4.022Z",
@@ -2587,7 +2614,7 @@ function DropdownList(props) {
     children: [values.length > 0 && values.map((v, i) => {
       return jsx("div", {
         class: classNames('fjs-dropdownlist-item', {
-          'focused': focusedValueIndex === i
+          focused: focusedValueIndex === i
         }),
         onMouseMove: mouseControl ? undefined : e => onMouseMovedInKeyboardMode(e, i),
         onMouseEnter: mouseControl ? () => setFocusedValueIndex(i) : undefined,
@@ -2739,11 +2766,9 @@ function Timepicker(props) {
           disabled: disabled,
           readOnly: readonly,
           placeholder: use24h ? 'hh:mm' : 'hh:mm ?m',
-          autoComplete: "off"
-
-          // @ts-ignore
-          ,
+          autoComplete: "off",
           onInput: e => {
+            // @ts-expect-error
             setRawValue(e.target.value);
             useDropdown && setDropdownIsOpen(false);
           },
@@ -3142,7 +3167,7 @@ var SvgChecklist = function SvgChecklist(props) {
 };
 var ChecklistIcon = SvgChecklist;
 
-var _path$r, _path2$4, _path3;
+var _path$r, _path2$3, _path3;
 function _extends$s() { _extends$s = 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$s.apply(this, arguments); }
 var SvgDatetime = function SvgDatetime(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$s({
@@ -3153,7 +3178,7 @@ var SvgDatetime = function SvgDatetime(props) {
   }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M37.908 13.418h-5.004v-2.354h-1.766v2.354H21.13v-2.354h-1.766v2.354H14.36a2.07 2.07 0 0 0-2.06 2.06v23.549a2.07 2.07 0 0 0 2.06 2.06h6.77v-1.766h-6.358a.707.707 0 0 1-.706-.706V15.89c0-.39.316-.707.706-.707h4.592v2.355h1.766v-2.355h10.008v2.355h1.766v-2.355h4.592a.71.71 0 0 1 .707.707v6.358h1.765v-6.77c0-1.133-.927-2.06-2.06-2.06z"
-  })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
     d: "m35.13 37.603 1.237-1.237-3.468-3.475v-5.926h-1.754v6.654l3.984 3.984Z"
   })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
@@ -3162,7 +3187,7 @@ var SvgDatetime = function SvgDatetime(props) {
 };
 var DatetimeIcon = SvgDatetime;
 
-var _path$q, _path2$3;
+var _path$q, _path2$2;
 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 SvgTaglist = function SvgTaglist(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$r({
@@ -3173,7 +3198,7 @@ var SvgTaglist = function SvgTaglist(props) {
   }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M45 16a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V19a3 3 0 0 1 3-3h36Zm0 2H9a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h36a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1Z"
-  })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
     d: "M11 22a1 1 0 0 1 1-1h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H12a1 1 0 0 1-1-1V22Z"
   })));
 };
@@ -3215,10 +3240,12 @@ var SvgGroup = function SvgGroup(props) {
     xmlns: "http://www.w3.org/2000/svg",
     width: 54,
     height: 54,
-    fill: "currentcolor"
+    fill: "none"
   }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+    fill: "#000",
     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"
+    d: "M4.05 42.132v1.164c0 .693.604 1.254 1.35 1.254h1.35v-2.507h-2.7v.09Zm0-2.328h2.7v-2.328h-2.7v2.328Zm0-4.656h2.7V32.82h-2.7v2.328Zm0-4.656h2.7v-2.328h-2.7v2.328Zm0-4.656h2.7v-2.328h-2.7v2.328Zm0-4.656h2.7v-2.328h-2.7v2.328Zm0-4.656h2.7v-2.328h-2.7v2.328Zm0-4.656v.09h2.7V9.45H5.4c-.746 0-1.35.561-1.35 1.254v1.164Zm5.4-2.418v2.507h2.7V9.45h-2.7Zm5.4 0v2.507h2.7V9.45h-2.7Zm5.4 0v2.507h2.7V9.45h-2.7Zm5.4 0v2.507h2.7V9.45h-2.7Zm5.4 0v2.507h2.7V9.45h-2.7Zm5.4 0v2.507h2.7V9.45h-2.7Zm5.4 0v2.507h2.7V9.45h-2.7Zm5.4 0v2.507h2.7v-1.253c0-.693-.604-1.254-1.35-1.254h-1.35Zm2.7 4.746h-2.7v2.328h2.7v-2.328Zm0 4.656h-2.7v2.328h2.7v-2.328Zm0 4.656h-2.7v2.328h2.7v-2.328Zm0 4.656h-2.7v2.328h2.7v-2.328Zm0 4.656h-2.7v2.328h2.7V32.82Zm0 4.656h-2.7v2.328h2.7v-2.328Zm0 4.656v-.09h-2.7v2.508h1.35c.746 0 1.35-.561 1.35-1.254v-1.164Zm-5.4 2.418v-2.507h-2.7v2.507h2.7Zm-5.4 0v-2.507h-2.7v2.507h2.7Zm-5.4 0v-2.507h-2.7v2.507h2.7Zm-5.4 0v-2.507h-2.7v2.507h2.7Zm-5.4 0v-2.507h-2.7v2.507h2.7Zm-5.4 0v-2.507h-2.7v2.507h2.7Zm-5.4 0v-2.507h-2.7v2.507h2.7Z",
+    clipRule: "evenodd"
   })));
 };
 var GroupIcon = SvgGroup;
@@ -3308,7 +3335,7 @@ var SvgDynamicList = function SvgDynamicList(props) {
   }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     fillRule: "evenodd",
-    d: "M2.7 43.296v1.254c0 .746.604 1.35 1.35 1.35h1.275v-1.795c.049.14.075.29.075.445v-1.254h-.075V43.2H4.05c.177 0 .347.034.502.096H2.7Zm2.7-2.507v-2.507H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.015V23.24H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.014V13.21H2.7v2.507h2.7Zm-2.7-5.014h1.852a1.346 1.346 0 0 1-.502.096h1.275v-.096H5.4V9.45c0 .156-.026.306-.075.445V8.1H4.05A1.35 1.35 0 0 0 2.7 9.45v1.254Zm5.175.096h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1-2.7v1.795a1.348 1.348 0 0 1-.075-.445v1.254h.075v.096h1.275c-.177 0-.347-.034-.502-.096H51.3V9.45a1.35 1.35 0 0 0-1.35-1.35h-1.275Zm-.075 5.11v2.508h2.7V13.21h-2.7Zm0 5.015v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7V23.24h-2.7Zm0 5.015v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7v-2.507h-2.7Zm2.7 5.014h-1.852c.155-.062.325-.096.502-.096h-1.275v.096H48.6v1.254c0-.156.026-.305.075-.445V45.9h1.275a1.35 1.35 0 0 0 1.35-1.35v-1.254Zm-5.175-.096h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7ZM16.2 17.55a4.05 4.05 0 0 1 4.05 4.05v1.35A4.05 4.05 0 0 1 16.2 27h-1.35a4.05 4.05 0 0 1-4.05-4.05V21.6a4.05 4.05 0 0 1 4.05-4.05h1.35Zm0 2.7h-1.35a1.35 1.35 0 0 0-1.35 1.35v1.35c0 .746.604 1.35 1.35 1.35h1.35a1.35 1.35 0 0 0 1.35-1.35V21.6a1.35 1.35 0 0 0-1.35-1.35Zm27 1.35a4.05 4.05 0 0 0-4.05-4.05H29.7a4.05 4.05 0 0 0-4.05 4.05v1.35A4.05 4.05 0 0 0 29.7 27h9.45a4.05 4.05 0 0 0 4.05-4.05V21.6Zm-13.5-1.35h9.45c.746 0 1.35.604 1.35 1.35v1.35a1.35 1.35 0 0 1-1.35 1.35H29.7a1.35 1.35 0 0 1-1.35-1.35V21.6c0-.746.604-1.35 1.35-1.35ZM43.2 37.8a4.05 4.05 0 0 0-4.05-4.05H29.7a4.05 4.05 0 0 0-4.05 4.05v1.35h2.7V37.8c0-.746.604-1.35 1.35-1.35h9.45c.746 0 1.35.604 1.35 1.35v1.35h2.7V37.8Zm-27-4.05a4.05 4.05 0 0 1 4.05 4.05v1.35h-2.7V37.8a1.35 1.35 0 0 0-1.35-1.35h-1.35a1.35 1.35 0 0 0-1.35 1.35v1.35h-2.7V37.8a4.05 4.05 0 0 1 4.05-4.05h1.35Z",
+    d: "M2.7 43.296v1.254c0 .746.604 1.35 1.35 1.35h1.275v-1.795c.049.14.075.29.075.445v-1.254h-.075V43.2H4.05c.177 0 .347.034.502.096H2.7Zm2.7-2.507v-2.507H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.015V23.24H2.7v2.507h2.7Zm0-5.014v-2.507H2.7v2.507h2.7Zm0-5.014V13.21H2.7v2.507h2.7Zm-2.7-5.014h1.852a1.346 1.346 0 0 1-.502.096h1.275v-.096H5.4V9.45c0 .156-.026.306-.075.445V8.1H4.05A1.35 1.35 0 0 0 2.7 9.45v1.254Zm5.175.096h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1 0h2.55V8.1h-2.55v2.7Zm5.1-2.7v1.795a1.348 1.348 0 0 1-.075-.445v1.254h.075v.096h1.275a1.35 1.35 0 0 1-.502-.096H51.3V9.45a1.35 1.35 0 0 0-1.35-1.35h-1.275Zm-.075 5.11v2.508h2.7V13.21h-2.7Zm0 5.015v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7V23.24h-2.7Zm0 5.015v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7v-2.507h-2.7Zm0 5.014v2.507h2.7v-2.507h-2.7Zm2.7 5.014h-1.852a1.35 1.35 0 0 1 .502-.096h-1.275v.096H48.6v1.254c0-.156.026-.305.075-.445V45.9h1.275a1.35 1.35 0 0 0 1.35-1.35v-1.254Zm-5.175-.096h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7Zm-5.1 0h-2.55v2.7h2.55v-2.7ZM16.2 17.55a4.05 4.05 0 0 1 4.05 4.05v1.35A4.05 4.05 0 0 1 16.2 27h-1.35a4.05 4.05 0 0 1-4.05-4.05V21.6a4.05 4.05 0 0 1 4.05-4.05h1.35Zm0 2.7h-1.35a1.35 1.35 0 0 0-1.35 1.35v1.35c0 .746.604 1.35 1.35 1.35h1.35a1.35 1.35 0 0 0 1.35-1.35V21.6a1.35 1.35 0 0 0-1.35-1.35Zm27 1.35a4.05 4.05 0 0 0-4.05-4.05H29.7a4.05 4.05 0 0 0-4.05 4.05v1.35A4.05 4.05 0 0 0 29.7 27h9.45a4.05 4.05 0 0 0 4.05-4.05V21.6Zm-13.5-1.35h9.45c.746 0 1.35.604 1.35 1.35v1.35a1.35 1.35 0 0 1-1.35 1.35H29.7a1.35 1.35 0 0 1-1.35-1.35V21.6c0-.746.604-1.35 1.35-1.35ZM43.2 37.8a4.05 4.05 0 0 0-4.05-4.05H29.7a4.05 4.05 0 0 0-4.05 4.05v1.35h2.7V37.8c0-.746.604-1.35 1.35-1.35h9.45c.746 0 1.35.604 1.35 1.35v1.35h2.7V37.8Zm-27-4.05a4.05 4.05 0 0 1 4.05 4.05v1.35h-2.7V37.8a1.35 1.35 0 0 0-1.35-1.35h-1.35a1.35 1.35 0 0 0-1.35 1.35v1.35h-2.7V37.8a4.05 4.05 0 0 1 4.05-4.05h1.35Z",
     clipRule: "evenodd"
   })));
 };
@@ -3392,7 +3419,7 @@ var SvgTextarea = function SvgTextarea(props) {
 };
 var TextareaIcon = SvgTextarea;
 
-var _path$d, _path2$2;
+var _path$d;
 function _extends$d() { _extends$d = 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$d.apply(this, arguments); }
 var SvgIFrame = function SvgIFrame(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$d({
@@ -3401,12 +3428,9 @@ var SvgIFrame = function SvgIFrame(props) {
     height: 54,
     fill: "none"
   }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
-    fill: "currentcolor",
-    d: "M34.467 37.3 41 31l-6.533-6.3-1.32 1.273L38.36 31l-5.213 5.027 1.32 1.273ZM19.533 24.7 13 31l6.533 6.3 1.32-1.273L15.64 31l5.214-5.027-1.32-1.273Zm4.127 14.832 1.805.468 4.875-17.532L28.535 22 23.66 39.532Z"
-  })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
-    fill: "currentcolor",
+    fill: "currentColor",
     fillRule: "evenodd",
-    d: "M46 9a3 3 0 0 1 3 3v30a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V12a3 3 0 0 1 3-3h38Zm0 2H8a1 1 0 0 0-1 1v4h40v-4a1 1 0 0 0-1-1ZM7 42V18h40v24a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1Z",
+    d: "M45.658 9.45c1.625 0 2.942 1.36 2.942 3.039V22.95h-1.961v-4.383H7.36V41.51c0 .56.44 1.013.98 1.013H27v2.026H8.342c-1.625 0-2.942-1.36-2.942-3.039V12.489c0-1.678 1.317-3.039 2.942-3.039h37.316Zm0 2.026H8.342c-.542 0-.98.454-.98 1.013v4.052h39.277v-4.052c0-.56-.44-1.013-.98-1.013ZM31.05 35.775A8.768 8.768 0 0 1 39.825 27a8.768 8.768 0 0 1 8.775 8.775 8.768 8.768 0 0 1-8.775 8.775 8.768 8.768 0 0 1-8.775-8.775Zm12.388-.516h3.097c-.206-2.581-1.858-4.646-4.026-5.678.62 1.548.93 3.613.93 5.678Zm-5.162 2.065c.207 3.303 1.136 4.955 1.549 5.161.413-.206 1.239-1.858 1.445-5.161h-2.994Zm1.446-8.26c-.31.207-1.342 2.272-1.446 6.195h2.994c-.103-3.923-1.135-5.988-1.548-6.194Zm-3.51 6.195c.103-2.065.31-4.13.929-5.678-2.168 1.032-3.82 3.097-4.026 5.678h3.097Zm0 2.065h-2.89c.515 2.064 1.96 3.82 3.819 4.645-.516-1.342-.826-2.994-.93-4.645Zm7.226 0c-.103 1.755-.413 3.303-.929 4.645 1.858-.826 3.304-2.58 3.923-4.645h-2.994Z",
     clipRule: "evenodd"
   })));
 };
@@ -3777,7 +3801,7 @@ function Numberfield(props) {
           'fjs-disabled': disabled,
           'fjs-readonly': readonly
         }, {
-          'hasErrors': errors.length
+          hasErrors: errors.length
         }),
         children: [jsx("input", {
           ref: inputRef,
@@ -3789,7 +3813,6 @@ function Numberfield(props) {
           onKeyPress: onKeyPress,
           onBlur: onInputBlur,
           onFocus: onInputFocus
-
           // @ts-ignore
           ,
           onInput: e => setValue(e.target.value, true),
@@ -3878,7 +3901,6 @@ function Radio(props) {
   } = validate;
   const onChange = v => {
     props.onChange({
-      field,
       value: v
     });
   };
@@ -4026,10 +4048,9 @@ function SearchableSelect(props) {
   const setValue = useCallback(option => {
     setFilter(option && option.label || '');
     props.onChange({
-      value: option && option.value || null,
-      field
+      value: option && option.value || null
     });
-  }, [field, props]);
+  }, [props]);
   const displayState = useMemo(() => {
     const ds = {};
     ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
@@ -4098,10 +4119,10 @@ function SearchableSelect(props) {
   return jsxs(Fragment, {
     children: [jsxs("div", {
       class: classNames('fjs-input-group', {
-        'disabled': disabled,
-        'readonly': readonly
+        disabled: disabled,
+        readonly: readonly
       }, {
-        'hasErrors': errors.length
+        hasErrors: errors.length
       }),
       children: [jsx("input", {
         disabled: disabled,
@@ -4125,7 +4146,7 @@ function SearchableSelect(props) {
           setValue(null);
           e.preventDefault();
         },
-        children: [jsx(XMarkIcon, {}), " "]
+        children: [jsx(XMarkIcon, {}), ' ']
       }), jsx("span", {
         class: "fjs-select-arrow",
         onMouseDown: e => onAngelMouseDown(e),
@@ -4175,10 +4196,9 @@ function SimpleSelect(props) {
   const valueLabel = useMemo(() => value && getLabelCorrelation(value), [value, getLabelCorrelation]);
   const setValue = useCallback(option => {
     props.onChange({
-      value: option && option.value || null,
-      field
+      value: option && option.value || null
     });
-  }, [field, props]);
+  }, [props]);
   const displayState = useMemo(() => {
     const ds = {};
     ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
@@ -4219,7 +4239,7 @@ function SimpleSelect(props) {
         disabled,
         readonly
       }, {
-        'hasErrors': errors.length
+        hasErrors: errors.length
       }),
       onFocus: onInputFocus,
       onBlur: onInputBlur,
@@ -4516,15 +4536,13 @@ function Taglist(props) {
       return;
     }
     props.onChange({
-      value: [...values, value],
-      field
+      value: [...values, value]
     });
   };
   const deselectValue = value => {
     const newValues = values.filter(v => !isEqual(v, value));
     props.onChange({
-      value: newValues,
-      field
+      value: newValues
     });
   };
   const onInputChange = ({
@@ -4949,18 +4967,20 @@ function ExpressionField(props) {
   const evaluation = useExpressionEvaluation(expression);
   const evaluationMemo = useDeepCompareMemoize(evaluation);
   const eventBus = useService('eventBus');
+  const expressionLoopPreventer = useService('expressionLoopPreventer');
   const sendValue = useCallback(() => {
     onChange && onChange({
       field,
-      value: evaluationMemo
+      value: evaluationMemo,
+      shouldNotRecompute: true
     });
   }, [field, evaluationMemo, onChange]);
   useEffect(() => {
-    if (computeOn !== 'change' || evaluationMemo === value) {
+    if (computeOn !== 'change' || isEqual$1(evaluationMemo, value) || !expressionLoopPreventer.registerExpressionExecution(this)) {
       return;
     }
     sendValue();
-  }, [computeOn, evaluationMemo, sendValue, value]);
+  });
   useEffect(() => {
     if (computeOn === 'presubmit') {
       eventBus.on('presubmit', sendValue);
@@ -5011,7 +5031,6 @@ function Textfield(props) {
     target
   }) => {
     props.onChange({
-      field,
       value: target.value
     });
   });
@@ -5111,7 +5130,6 @@ function Textarea(props) {
     target
   }) => {
     props.onChange({
-      field,
       value: target.value
     });
   });
@@ -5625,7 +5643,7 @@ function Lightbox(props) {
         style: "margin: 15px 20px 15px 10px; align-self: center; color: var(--cds-icon-primary, #404040)",
         children: jsx(Logo, {})
       }), jsxs("span", {
-        children: ["Web-based tooling for BPMN, DMN, and forms powered by ", jsx("a", {
+        children: ["Web-based tooling for BPMN, DMN, and forms powered by", ' ', jsx("a", {
           href: "https://bpmn.io",
           target: "_blank",
           rel: "noopener",
@@ -5715,7 +5733,12 @@ function FormComponent(props) {
   });
 }
 
-const formFields = [Button, Checkbox, Checklist, Default, DynamicList, Numberfield, Datetime, Radio, Select, Taglist, Textfield, Textarea, ExpressionField, Text, Image, Table, Html, Spacer, Separator, Group, DynamicList, IFrame];
+const formFields = [/* Input */
+Textfield, Textarea, Numberfield, Datetime, ExpressionField, /* Selection */
+Checkbox, Checklist, Radio, Select, Taglist, /* Presentation */
+Text, Image, Table, Html, Spacer, Separator, /* Containers */
+Group, DynamicList, IFrame, /* Other */
+Button, Default];
 
 class FormFields {
   constructor() {
@@ -5885,8 +5908,7 @@ class ConditionChecker {
     const {
       getFilterPath = (field, indexes) => this._pathRegistry.getValuePath(field, {
         indexes
-      }),
-      leafNodeDeletionOnly = false
+      })
     } = options;
     const _applyConditionsWithinScope = (rootField, scopeContext, startHidden = false) => {
       const {
@@ -5917,7 +5939,7 @@ class ConditionChecker {
         context.isHidden = startHidden || context.isHidden || conditional && this._checkHideCondition(conditional, localExpressionContext);
 
         // if a field is repeatable and visible, we need to implement custom recursion on its children
-        if (isRepeatable && (!context.isHidden || leafNodeDeletionOnly)) {
+        if (isRepeatable && !context.isHidden) {
           // prevent the regular recursion behavior of executeRecursivelyOnFields
           context.preventRecursion = true;
           const repeaterValuePath = this._pathRegistry.getValuePath(field, {
@@ -5949,7 +5971,7 @@ class ConditionChecker {
         }
 
         // if we have a hidden repeatable field, and the data structure allows, we clear it directly at the root and stop recursion
-        if (context.isHidden && !leafNodeDeletionOnly && isRepeatable) {
+        if (context.isHidden && isRepeatable) {
           context.preventRecursion = true;
           this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
         }
@@ -6039,6 +6061,49 @@ const ExpressionLanguageModule = {
   conditionChecker: ['type', ConditionChecker]
 };
 
+class ExpressionLoopPreventer {
+  constructor(eventBus) {
+    this._computedExpressions = [];
+    eventBus.on('field.updated', ({
+      shouldNotRecompute
+    }) => {
+      if (shouldNotRecompute) {
+        return;
+      }
+      this.reset();
+    });
+    eventBus.on('import.done', this.reset.bind(this));
+    eventBus.on('reset', this.reset.bind(this));
+  }
+
+  /**
+   * Checks if the expression field has already been computed, and registers it if not.
+   *
+   * @param {any} expressionField
+   * @returns {boolean} - whether the expression field has already been computed within the current cycle
+   */
+  registerExpressionExecution(expressionField) {
+    if (this._computedExpressions.includes(expressionField)) {
+      return false;
+    }
+    this._computedExpressions.push(expressionField);
+    return true;
+  }
+
+  /**
+   * Resets the list of computed expressions.
+   */
+  reset() {
+    this._computedExpressions = [];
+  }
+}
+ExpressionLoopPreventer.$inject = ['eventBus'];
+
+const ExpressionFieldModule = {
+  __init__: ['expressionLoopPreventer'],
+  expressionLoopPreventer: ['type', ExpressionLoopPreventer]
+};
+
 class MarkdownRenderer {
   /**
    * Render markdown to HTML.
@@ -6533,6 +6598,9 @@ var commandModule = {
   commandStack: ['type', CommandStack]
 };
 
+/**
+ * @deprecated
+ */
 class UpdateFieldValidationHandler {
   constructor(form, validator) {
     this._form = form;
@@ -6562,6 +6630,38 @@ class UpdateFieldValidationHandler {
 }
 UpdateFieldValidationHandler.$inject = ['form', 'validator'];
 
+class UpdateFieldInstanceValidationHandler {
+  constructor(form, validator) {
+    this._form = form;
+    this._validator = validator;
+  }
+  execute(context) {
+    const {
+      fieldInstance,
+      value
+    } = context;
+    const {
+      id,
+      indexes
+    } = fieldInstance;
+    const {
+      errors
+    } = this._form._getState();
+    context.oldErrors = clone(errors);
+    const fieldErrors = this._validator.validateFieldInstance(fieldInstance, value);
+    const updatedErrors = set(errors, [id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
+    this._form._setState({
+      errors: updatedErrors
+    });
+  }
+  revert(context) {
+    this._form._setState({
+      errors: context.oldErrors
+    });
+  }
+}
+UpdateFieldInstanceValidationHandler.$inject = ['form', 'validator'];
+
 class ViewerCommands {
   constructor(commandStack, eventBus) {
     this._commandStack = commandStack;
@@ -6576,9 +6676,14 @@ class ViewerCommands {
   }
   getHandlers() {
     return {
-      'formField.validation.update': UpdateFieldValidationHandler
+      'formField.validation.update': UpdateFieldValidationHandler,
+      'formFieldInstance.validation.update': UpdateFieldInstanceValidationHandler
     };
   }
+
+  /**
+   * @deprecated
+   */
   updateFieldValidation(field, value, indexes) {
     const context = {
       field,
@@ -6587,6 +6692,13 @@ class ViewerCommands {
     };
     this._commandStack.execute('formField.validation.update', context);
   }
+  updateFieldInstanceValidation(fieldInstance, value) {
+    const context = {
+      fieldInstance,
+      value
+    };
+    this._commandStack.execute('formFieldInstance.validation.update', context);
+  }
 }
 ViewerCommands.$inject = ['commandStack', 'eventBus'];
 
@@ -6771,9 +6883,7 @@ class RepeatRenderManager {
       updatedValues.push(newItem);
       shouldScroll.current = true;
       props.onChange({
-        field: repeaterField,
-        value: updatedValues,
-        indexes
+        value: updatedValues
       });
       setSharedRepeatState(state => ({
         ...state,
@@ -7432,11 +7542,18 @@ const EMAIL_PATTERN = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-
 const PHONE_PATTERN = /(\+|00)(297|93|244|1264|358|355|376|971|54|374|1684|1268|61|43|994|257|32|229|226|880|359|973|1242|387|590|375|501|1441|591|55|1246|673|975|267|236|1|61|41|56|86|225|237|243|242|682|57|269|238|506|53|5999|61|1345|357|420|49|253|1767|45|1809|1829|1849|213|593|20|291|212|34|372|251|358|679|500|33|298|691|241|44|995|44|233|350|224|590|220|245|240|30|1473|299|502|594|1671|592|852|504|385|509|36|62|44|91|246|353|98|964|354|972|39|1876|44|962|81|76|77|254|996|855|686|1869|82|383|965|856|961|231|218|1758|423|94|266|370|352|371|853|590|212|377|373|261|960|52|692|389|223|356|95|382|976|1670|258|222|1664|596|230|265|60|262|264|687|227|672|234|505|683|31|47|977|674|64|968|92|507|64|51|63|680|675|48|1787|1939|850|351|595|970|689|974|262|40|7|250|966|249|221|65|500|4779|677|232|503|378|252|508|381|211|239|597|421|386|46|268|1721|248|963|1649|235|228|66|992|690|993|670|676|1868|216|90|688|886|255|256|380|598|1|998|3906698|379|1784|58|1284|1340|84|678|681|685|967|27|260|263)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{4,20}$/;
 const VALIDATE_FEEL_PROPERTIES = ['min', 'max', 'minLength', 'maxLength'];
 class Validator {
-  constructor(expressionLanguage, conditionChecker, form) {
+  constructor(expressionLanguage, conditionChecker, form, formFieldRegistry) {
     this._expressionLanguage = expressionLanguage;
     this._conditionChecker = conditionChecker;
     this._form = form;
+    this._formFieldRegistry = formFieldRegistry;
   }
+
+  /**
+   * Validate against a field definition, does not support proper expression evaluation.
+   *
+   * @deprecated use validateFieldInstance instead
+   */
   validateField(field, value) {
     const {
       type,
@@ -7444,72 +7561,121 @@ class Validator {
     } = field;
     let errors = [];
     if (type === 'number') {
-      const {
-        decimalDigits,
-        increment
-      } = field;
-      if (value === 'NaN') {
-        errors = [...errors, 'Value is not a number.'];
-      } else if (value) {
-        if (decimalDigits >= 0 && countDecimals(value) > decimalDigits) {
-          errors = [...errors, 'Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.'];
-        }
-        if (increment) {
-          const bigValue = Big(value);
-          const bigIncrement = Big(increment);
-          const offset = bigValue.mod(bigIncrement);
-          if (offset.cmp(0) !== 0) {
-            const previousValue = bigValue.minus(offset);
-            const nextValue = previousValue.plus(bigIncrement);
-            errors = [...errors, `Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`];
-          }
-        }
-      }
+      errors = [...errors, ...runNumberValidation(field, value)];
     }
     if (!validate) {
       return errors;
     }
-    const evaluatedValidation = evaluateFEELValues(validate, this._expressionLanguage, this._conditionChecker, this._form);
-    if (evaluatedValidation.pattern && value && !new RegExp(evaluatedValidation.pattern).test(value)) {
-      errors = [...errors, `Field must match pattern ${evaluatedValidation.pattern}.`];
-    }
-    if (evaluatedValidation.required) {
-      const isUncheckedCheckbox = type === 'checkbox' && value === false;
-      const isUnsetValue = isNil(value) || value === '';
-      const isEmptyMultiselect = Array.isArray(value) && value.length === 0;
-      if (isUncheckedCheckbox || isUnsetValue || isEmptyMultiselect) {
-        errors = [...errors, 'Field is required.'];
-      }
-    }
-    if ('min' in evaluatedValidation && (value || value === 0) && value < evaluatedValidation.min) {
-      errors = [...errors, `Field must have minimum value of ${evaluatedValidation.min}.`];
-    }
-    if ('max' in evaluatedValidation && (value || value === 0) && value > evaluatedValidation.max) {
-      errors = [...errors, `Field must have maximum value of ${evaluatedValidation.max}.`];
-    }
-    if ('minLength' in evaluatedValidation && value && value.trim().length < evaluatedValidation.minLength) {
-      errors = [...errors, `Field must have minimum length of ${evaluatedValidation.minLength}.`];
-    }
-    if ('maxLength' in evaluatedValidation && value && value.trim().length > evaluatedValidation.maxLength) {
-      errors = [...errors, `Field must have maximum length of ${evaluatedValidation.maxLength}.`];
-    }
-    if ('validationType' in evaluatedValidation && value && evaluatedValidation.validationType === 'phone' && !PHONE_PATTERN.test(value)) {
-      errors = [...errors, 'Field must be a valid  international phone number. (e.g. +4930664040900)'];
+    const evaluatedValidation = oldEvaluateFEELValues(validate, this._expressionLanguage, this._conditionChecker, this._form);
+    errors = [...errors, ...runPresetValidation(field, evaluatedValidation, value)];
+    return errors;
+  }
+
+  /**
+   * Validate a field instance.
+   *
+   * @param {Object} fieldInstance
+   * @param {string} value
+   *
+   * @returns {Array<string>}
+   */
+  validateFieldInstance(fieldInstance, value) {
+    const {
+      id,
+      expressionContextInfo
+    } = fieldInstance;
+    const field = this._formFieldRegistry.get(id);
+    const {
+      type,
+      validate
+    } = field;
+    let errors = [];
+    if (type === 'number') {
+      errors = [...errors, ...runNumberValidation(field, value)];
     }
-    if ('validationType' in evaluatedValidation && value && evaluatedValidation.validationType === 'email' && !EMAIL_PATTERN.test(value)) {
-      errors = [...errors, 'Field must be a valid email.'];
+    if (!validate) {
+      return errors;
     }
+    const evaluatedValidation = evaluateFEELValues(validate, this._expressionLanguage, expressionContextInfo);
+    errors = [...errors, ...runPresetValidation(field, evaluatedValidation, value)];
     return errors;
   }
 }
-Validator.$inject = ['expressionLanguage', 'conditionChecker', 'form'];
+Validator.$inject = ['expressionLanguage', 'conditionChecker', 'form', 'formFieldRegistry'];
 
 // helpers //////////
 
-/**
- * Helper function to evaluate optional FEEL validation values.
- */
-function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
+function runNumberValidation(field, value) {
+  const {
+    decimalDigits,
+    increment
+  } = field;
+  const errors = [];
+  if (value === 'NaN') {
+    errors.push('Value is not a number.');
+  } else if (value) {
+    if (decimalDigits >= 0 && countDecimals(value) > decimalDigits) {
+      errors.push('Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.');
+    }
+    if (increment) {
+      const bigValue = Big(value);
+      const bigIncrement = Big(increment);
+      const offset = bigValue.mod(bigIncrement);
+      if (offset.cmp(0) !== 0) {
+        const previousValue = bigValue.minus(offset);
+        const nextValue = previousValue.plus(bigIncrement);
+        errors.push(`Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`);
+      }
+    }
+  }
+  return errors;
+}
+function runPresetValidation(field, validation, value) {
+  const errors = [];
+  if (validation.pattern && value && !new RegExp(validation.pattern).test(value)) {
+    errors.push(`Field must match pattern ${validation.pattern}.`);
+  }
+  if (validation.required) {
+    const isUncheckedCheckbox = field.type === 'checkbox' && value === false;
+    const isUnsetValue = isNil(value) || value === '';
+    const isEmptyMultiselect = Array.isArray(value) && value.length === 0;
+    if (isUncheckedCheckbox || isUnsetValue || isEmptyMultiselect) {
+      errors.push('Field is required.');
+    }
+  }
+  if ('min' in validation && (value || value === 0) && value < validation.min) {
+    errors.push(`Field must have minimum value of ${validation.min}.`);
+  }
+  if ('max' in validation && (value || value === 0) && value > validation.max) {
+    errors.push(`Field must have maximum value of ${validation.max}.`);
+  }
+  if ('minLength' in validation && value && value.trim().length < validation.minLength) {
+    errors.push(`Field must have minimum length of ${validation.minLength}.`);
+  }
+  if ('maxLength' in validation && value && value.trim().length > validation.maxLength) {
+    errors.push(`Field must have maximum length of ${validation.maxLength}.`);
+  }
+  if ('validationType' in validation && value && validation.validationType === 'phone' && !PHONE_PATTERN.test(value)) {
+    errors.push('Field must be a valid  international phone number. (e.g. +4930664040900)');
+  }
+  if ('validationType' in validation && value && validation.validationType === 'email' && !EMAIL_PATTERN.test(value)) {
+    errors.push('Field must be a valid email.');
+  }
+  return errors;
+}
+function evaluateFEELValues(validate, expressionLanguage, expressionContextInfo) {
+  const evaluatedValidate = {
+    ...validate
+  };
+  VALIDATE_FEEL_PROPERTIES.forEach(property => {
+    const path = property.split('.');
+    const value = get(evaluatedValidate, path);
+    const evaluatedValue = runExpressionEvaluation(expressionLanguage, value, expressionContextInfo);
+    set(evaluatedValidate, path, evaluatedValue === null ? undefined : evaluatedValue);
+  });
+  return evaluatedValidate;
+}
+function oldEvaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
   const evaluatedValidate = {
     ...validate
   };
@@ -8213,6 +8379,66 @@ class FormFieldRegistry {
 }
 FormFieldRegistry.$inject = ['eventBus'];
 
+class FormFieldInstanceRegistry {
+  constructor(eventBus, formFieldRegistry, formFields) {
+    this._eventBus = eventBus;
+    this._formFieldRegistry = formFieldRegistry;
+    this._formFields = formFields;
+    this._formFieldInstances = {};
+    eventBus.on('form.clear', () => this.clear());
+  }
+  add(instance) {
+    const {
+      id,
+      expressionContextInfo,
+      valuePath,
+      indexes
+    } = instance;
+    const instanceId = [id, ...Object.values(indexes || {})].join('_');
+    if (this._formFieldInstances[instanceId]) {
+      throw new Error('this form field instance is already registered');
+    }
+    this._formFieldInstances[instanceId] = {
+      id,
+      instanceId,
+      expressionContextInfo,
+      valuePath,
+      indexes
+    };
+    return instanceId;
+  }
+  remove(instanceId) {
+    if (!this._formFieldInstances[instanceId]) {
+      return;
+    }
+    delete this._formFieldInstances[instanceId];
+  }
+  getAll() {
+    return Object.values(this._formFieldInstances);
+  }
+  getAllKeyed() {
+    return this.getAll().filter(({
+      id
+    }) => {
+      const formFieldDefinition = this._formFieldRegistry.get(id);
+      if (!formFieldDefinition) {
+        return false;
+      }
+      const {
+        type
+      } = formFieldDefinition;
+      const {
+        config
+      } = this._formFields.get(type);
+      return config.keyed;
+    });
+  }
+  clear() {
+    this._formFieldInstances = {};
+  }
+}
+FormFieldInstanceRegistry.$inject = ['eventBus', 'formFieldRegistry', 'formFields'];
+
 function Renderer(config, eventBus, form, injector) {
   const App = () => {
     const [state, setState] = useState(form._getState());
@@ -8277,6 +8503,7 @@ const CoreModule = {
   importer: ['type', Importer],
   fieldFactory: ['type', FieldFactory],
   formFieldRegistry: ['type', FormFieldRegistry],
+  formFieldInstanceRegistry: ['type', FormFieldInstanceRegistry],
   pathRegistry: ['type', PathRegistry],
   formLayouter: ['type', FormLayouter],
   validator: ['type', Validator]
@@ -8451,73 +8678,40 @@ class Form {
    * @returns {Errors}
    */
   validate() {
-    const formFields = this.get('formFields'),
-      formFieldRegistry = this.get('formFieldRegistry'),
-      pathRegistry = this.get('pathRegistry'),
+    const formFieldRegistry = this.get('formFieldRegistry'),
+      formFieldInstanceRegistry = this.get('formFieldInstanceRegistry'),
       validator = this.get('validator');
     const {
       data
     } = this._getState();
-    const getErrorPath = (field, indexes) => [field.id, ...Object.values(indexes || {})];
-    function validateFieldRecursively(errors, field, indexes) {
-      const {
-        disabled,
-        type,
-        isRepeating
-      } = field;
+    const errors = {};
+    const getErrorPath = (id, indexes) => [id, ...Object.values(indexes || {})];
+    formFieldInstanceRegistry.getAllKeyed().forEach(fieldInstance => {
       const {
-        config: fieldConfig
-      } = formFields.get(type);
+        id,
+        valuePath,
+        indexes
+      } = fieldInstance;
+      const field = formFieldRegistry.get(id);
 
       // (1) Skip disabled fields
-      if (disabled) {
+      if (field.disabled) {
         return;
       }
 
-      // (2) Validate the field
-      const valuePath = pathRegistry.getValuePath(field, {
-        indexes
-      });
-      const valueData = get(data, valuePath);
-      const fieldErrors = validator.validateField(field, valueData);
+      // (2) Validate the field instance
+      const value = get(data, valuePath);
+      const fieldErrors = validator.validateFieldInstance(fieldInstance, value);
       if (fieldErrors.length) {
-        set(errors, getErrorPath(field, indexes), fieldErrors);
-      }
-
-      // (3) Process parents
-      if (!Array.isArray(field.components)) {
-        return;
+        set(errors, getErrorPath(field.id, indexes), fieldErrors);
       }
-
-      // (4a) Recurse repeatable parents both across the indexes of repetition and the children
-      if (fieldConfig.repeatable && isRepeating) {
-        if (!Array.isArray(valueData)) {
-          return;
-        }
-        valueData.forEach((_, index) => {
-          field.components.forEach(component => {
-            validateFieldRecursively(errors, component, {
-              ...indexes,
-              [field.id]: index
-            });
-          });
-        });
-        return;
-      }
-
-      // (4b) Recurse non-repeatable parents only across the children
-      field.components.forEach(component => validateFieldRecursively(errors, component, indexes));
-    }
-    const workingErrors = {};
-    validateFieldRecursively(workingErrors, formFieldRegistry.getForm());
-    const filteredErrors = this._applyConditions(workingErrors, data, {
-      getFilterPath: getErrorPath,
-      leafNodeDeletionOnly: true
     });
     this._setState({
-      errors: filteredErrors
+      errors
     });
-    return filteredErrors;
+
+    // @ts-ignore
+    return errors;
   }
 
   /**
@@ -8612,26 +8806,27 @@ class Form {
   /**
    * @internal
    *
-   * @param { { add?: boolean, field: any, indexes: object, remove?: number, value?: any } } update
+   * @param { { fieldInstance: any, value: any } } update
    */
   _update(update) {
     const {
-      field,
-      indexes,
+      fieldInstance,
       value
     } = update;
+    const {
+      id,
+      valuePath,
+      indexes
+    } = fieldInstance;
     const {
       data,
       errors
     } = this._getState();
-    const validator = this.get('validator'),
-      pathRegistry = this.get('pathRegistry');
-    const fieldErrors = validator.validateField(field, value);
-    const valuePath = pathRegistry.getValuePath(field, {
-      indexes
-    });
+    const validator = this.get('validator');
+    const fieldErrors = validator.validateFieldInstance(fieldInstance, value);
     set(data, valuePath, value);
-    set(errors, [field.id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
+    set(errors, [id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
+    this._emit('field.updated', update);
     this._setState({
       data: clone(data),
       errors: clone(errors)
@@ -8657,10 +8852,10 @@ class Form {
   }
 
   /**
-  * @internal
-  */
+   * @internal
+   */
   _getModules() {
-    return [ExpressionLanguageModule, MarkdownRendererModule, ViewerCommandsModule, RepeatRenderModule];
+    return [ExpressionLanguageModule, ExpressionFieldModule, MarkdownRendererModule, ViewerCommandsModule, RepeatRenderModule];
   }
 
   /**
@@ -8675,65 +8870,24 @@ class Form {
    */
   _getSubmitData() {
     const formFieldRegistry = this.get('formFieldRegistry');
-    const formFields = this.get('formFields');
-    const pathRegistry = this.get('pathRegistry');
+    const formFieldInstanceRegistry = this.get('formFieldInstanceRegistry');
     const formData = this._getState().data;
-    function collectSubmitDataRecursively(submitData, formField, indexes) {
+    const submitData = {};
+    formFieldInstanceRegistry.getAllKeyed().forEach(formFieldInstance => {
       const {
-        disabled,
-        type
-      } = formField;
+        id,
+        valuePath
+      } = formFieldInstance;
       const {
-        config: fieldConfig
-      } = formFields.get(type);
-
-      // (1) Process keyed fields
-      if (!disabled && fieldConfig.keyed) {
-        const valuePath = pathRegistry.getValuePath(formField, {
-          indexes
-        });
-        const value = get(formData, valuePath);
-        set(submitData, valuePath, value);
-      }
-
-      // (2) Process parents
-      if (!Array.isArray(formField.components)) {
-        return;
-      }
-
-      // (3a) Recurse repeatable parents both across the indexes of repetition and the children
-      if (fieldConfig.repeatable && formField.isRepeating) {
-        const valueData = get(formData, pathRegistry.getValuePath(formField, {
-          indexes
-        }));
-        if (!Array.isArray(valueData)) {
-          return;
-        }
-        valueData.forEach((_, index) => {
-          formField.components.forEach(component => {
-            collectSubmitDataRecursively(submitData, component, {
-              ...indexes,
-              [formField.id]: index
-            });
-          });
-        });
+        disabled
+      } = formFieldRegistry.get(id);
+      if (disabled) {
         return;
       }
-
-      // (3b) Recurse non-repeatable parents only across the children
-      formField.components.forEach(component => collectSubmitDataRecursively(submitData, component, indexes));
-    }
-    const workingSubmitData = {};
-    collectSubmitDataRecursively(workingSubmitData, formFieldRegistry.getForm(), {});
-    return this._applyConditions(workingSubmitData, formData);
-  }
-
-  /**
-   * @internal
-   */
-  _applyConditions(toFilter, data, options = {}) {
-    const conditionChecker = this.get('conditionChecker');
-    return conditionChecker.applyConditions(toFilter, data, options);
+      const value = get(formData, valuePath);
+      set(submitData, valuePath, value);
+    });
+    return submitData;
   }
 
   /**
@@ -8828,16 +8982,16 @@ class Form {
 
 const schemaVersion = 16;
 
-/**
- * @typedef { import('./types').CreateFormOptions } CreateFormOptions
+/**
+ * @typedef { import('./types').CreateFormOptions } CreateFormOptions
  */
 
-/**
- * Create a form.
- *
- * @param {CreateFormOptions} options
- *
- * @return {Promise<Form>}
+/**
+ * Create a form.
+ *
+ * @param {CreateFormOptions} options
+ *
+ * @return {Promise<Form>}
  */
 function createForm(options) {
   const {
@@ -8851,5 +9005,5 @@ function createForm(options) {
   });
 }
 
-export { ALLOW_ATTRIBUTE, Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, Description, DynamicList, Errors, ExpressionField, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext, Group, Html, IFrame, Image, Importer, Label, LocalExpressionContext, MINUTES_IN_DAY, MarkdownRenderer, MarkdownRendererModule, Numberfield, OPTIONS_SOURCES, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, OPTIONS_SOURCES_PATHS, OPTIONS_SOURCE_DEFAULT, PathRegistry, Radio, RenderModule, RepeatRenderManager, RepeatRenderModule, SANDBOX_ATTRIBUTE, SECURITY_ATTRIBUTES_DEFINITIONS, Select, Separator, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Table, Taglist, Text, Textarea, Textfield, ViewerCommands, ViewerCommandsModule, buildExpressionContext, clone, createForm, createFormContainer, createInjector, escapeHTML, formFields, generateIdForType, generateIndexForType, getAncestryList, getOptionsSource, getSchemaVariables, getScrollContainer, hasEqualValue, iconsByType, isRequired, pathParse, pathsEqual, runRecursively, sanitizeDateTimePickerValue, sanitizeHTML, sanitizeIFrameSource, sanitizeImageSource, sanitizeMultiSelectValue, sanitizeSingleSelectValue, schemaVersion, useExpressionEvaluation, useSingleLineTemplateEvaluation, useTemplateEvaluation, wrapCSSStyles };
+export { ALLOW_ATTRIBUTE, Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, Description, DynamicList, Errors, ExpressionField, ExpressionFieldModule, ExpressionLanguageModule, ExpressionLoopPreventer, FeelExpressionLanguage, FeelersTemplating, FieldFactory, Form, FormComponent, FormContext, FormField, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext, Group, Html, IFrame, Image, Importer, Label, LocalExpressionContext, MINUTES_IN_DAY, MarkdownRenderer, MarkdownRendererModule, Numberfield, OPTIONS_SOURCES, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, OPTIONS_SOURCES_PATHS, OPTIONS_SOURCE_DEFAULT, PathRegistry, Radio, RenderModule, RepeatRenderManager, RepeatRenderModule, SANDBOX_ATTRIBUTE, SECURITY_ATTRIBUTES_DEFINITIONS, Select, Separator, Spacer, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Table, Taglist, Text, Textarea, Textfield, ViewerCommands, ViewerCommandsModule, buildExpressionContext, clone, createForm, createFormContainer, createInjector, escapeHTML, formFields, generateIdForType, generateIndexForType, getAncestryList, getOptionsSource, getSchemaVariables, getScrollContainer, hasEqualValue, iconsByType, isRequired, pathParse, pathsEqual, runExpressionEvaluation, runRecursively, sanitizeDateTimePickerValue, sanitizeHTML, sanitizeIFrameSource, sanitizeImageSource, sanitizeMultiSelectValue, sanitizeSingleSelectValue, schemaVersion, useExpressionEvaluation, useSingleLineTemplateEvaluation, useTemplateEvaluation, wrapCSSStyles, wrapObjectKeysWithUnderscores };
 //# sourceMappingURL=index.es.js.map