@bpmn-io/form-js-viewer 1.8.1 → 1.8.4

package/dist/index.cjs

@@ -11,6 +11,7 @@ var isEqual = require('lodash/isEqual');
 var flatpickr = require('flatpickr');
 var React = require('preact/compat');
 var DOMPurify = require('dompurify');
+var lodash = require('lodash');
 var didi = require('didi');
 var feelin = require('feelin');
 var feelers = require('feelers');
@@ -372,10 +373,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.
@@ -1029,11 +1030,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);
@@ -1320,17 +1321,6 @@ function useFlushDebounce(func) {
   return [debounceFunc, flushFunc];
 }
 
-function useEffectOnChange(value, callback, dependencies = []) {
-  const previousValue = usePrevious(value);
-  React.useEffect(() => {
-    if (value !== previousValue) {
-      callback();
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, ...dependencies]);
-}
-
 /**
  * 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
@@ -1521,6 +1511,18 @@ function formatTimezoneOffset(minutes) {
 function isInvalidDateString(value) {
   return isNaN(new Date(Date.parse(value)).getTime());
 }
+function getNullDateTime() {
+  return {
+    date: new Date(Date.parse(null)),
+    time: null
+  };
+}
+function isValidDate(date) {
+  return date && !isNaN(date.getTime());
+}
+function isValidTime(time) {
+  return !isNaN(parseInt(time));
+}
 function _getSignedPaddedHours(minutes) {
   if (minutes > 0) {
     return '-' + _getZeroPaddedString(Math.floor(minutes / 60));
@@ -1959,6 +1961,7 @@ function FormField(props) {
   } = props;
   const formFields = useService('formFields'),
     viewerCommands = useService('viewerCommands', false),
+    formFieldInstanceRegistry = useService('formFieldInstanceRegistry', false),
     pathRegistry = useService('pathRegistry'),
     eventBus = useService('eventBus'),
     form = useService('form');
@@ -1985,6 +1988,7 @@ function FormField(props) {
     throw new Error(`cannot render field <${field.type}>`);
   }
   const fieldConfig = FormFieldComponent.config;
+  const localExpressionContext = hooks.useContext(LocalExpressionContext);
   const valuePath = hooks.useMemo(() => pathRegistry.getValuePath(field, {
     indexes
   }), [field, indexes, pathRegistry]);
@@ -1994,6 +1998,22 @@ 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);
+
+  // register form field instance
+  hooks.useEffect(() => {
+    if (formFieldInstanceRegistry && !hidden) {
+      const instanceId = formFieldInstanceRegistry.add({
+        id: field.id,
+        expressionContextInfo: localExpressionContext,
+        valuePath,
+        indexes
+      });
+      return () => {
+        formFieldInstanceRegistry.remove(instanceId);
+      };
+    }
+  }, [formFieldInstanceRegistry, field.id, localExpressionContext, valuePath, indexes, hidden]);
 
   // ensures the initial validation behavior can be re-triggered upon form reset
   hooks.useEffect(() => {
@@ -2011,7 +2031,8 @@ function FormField(props) {
     };
   }, [eventBus, viewerCommands]);
   hooks.useEffect(() => {
-    if (initialValidationTrigger && initialValue) {
+    const hasInitialValue = initialValue && !isEqual(initialValue, []);
+    if (initialValidationTrigger && hasInitialValue) {
       setInitialValidationTrigger(false);
       viewerCommands.updateFieldValidation(field, initialValue, indexes);
     }
@@ -2031,7 +2052,6 @@ function FormField(props) {
       formField: field
     });
   }, [eventBus, field]);
-  const hidden = useCondition(field.conditional && field.conditional.hide || null);
   const onChangeIndexed = hooks.useCallback(update => {
     // any data change will trigger validation
     setInitialValidationTrigger(false);
@@ -2176,7 +2196,7 @@ function RowsRenderer(props) {
     Row
   } = hooks.useContext(FormRenderContext);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [" ", rows.map(row => {
+    children: [' ', rows.map(row => {
       const {
         components = []
       } = row;
@@ -2202,7 +2222,7 @@ function RowsRenderer(props) {
           });
         })
       });
-    }), " "]
+    }), ' ']
   });
 }
 
@@ -2332,23 +2352,23 @@ function InputAdorner(props) {
       'fjs-disabled': disabled,
       'fjs-readonly': readonly
     }, {
-      'hasErrors': hasErrors
+      hasErrors: hasErrors
     }),
     ref: rootRef,
     children: [pre && jsxRuntime.jsxs("span", {
       class: "fjs-input-adornment border-right border-radius-left",
       onClick: onAdornmentClick,
-      children: [" ", minDash.isString(pre) ? jsxRuntime.jsx("span", {
+      children: [' ', minDash.isString(pre) ? jsxRuntime.jsx("span", {
         class: "fjs-input-adornment-text",
         children: pre
-      }) : pre, " "]
+      }) : pre, ' ']
     }), children, post && jsxRuntime.jsxs("span", {
       class: "fjs-input-adornment border-left border-radius-right",
       onClick: onAdornmentClick,
-      children: [" ", minDash.isString(post) ? jsxRuntime.jsx("span", {
+      children: [' ', minDash.isString(post) ? jsxRuntime.jsx("span", {
         class: "fjs-input-adornment-text",
         children: post
-      }) : post, " "]
+      }) : post, ' ']
     })]
   });
 }
@@ -2397,7 +2417,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);
@@ -2502,7 +2524,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__namespace.createElement("svg", _extends$w({
@@ -2514,7 +2536,7 @@ var SvgClock = function SvgClock(props) {
   }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.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",
@@ -2605,7 +2627,7 @@ function DropdownList(props) {
     children: [values.length > 0 && values.map((v, i) => {
       return jsxRuntime.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,
@@ -2757,11 +2779,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);
           },
@@ -2815,14 +2835,8 @@ function Datetime(props) {
     formId
   } = hooks.useContext(FormContext);
   const dateTimeGroupRef = hooks.useRef();
-  const getNullDateTime = () => ({
-    date: new Date(Date.parse(null)),
-    time: null
-  });
   const [dateTime, setDateTime] = hooks.useState(getNullDateTime());
   const [dateTimeUpdateRequest, setDateTimeUpdateRequest] = hooks.useState(null);
-  const isValidDate = date => date && !isNaN(date.getTime());
-  const isValidTime = time => !isNaN(parseInt(time));
   const useDatePicker = hooks.useMemo(() => subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
   const useTimePicker = hooks.useMemo(() => subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME, [subtype]);
   const onDateTimeBlur = hooks.useCallback(e => {
@@ -2877,11 +2891,14 @@ function Datetime(props) {
     } else if (subtype === DATETIME_SUBTYPES.DATETIME && isValidDate(date) && isValidTime(time)) {
       newDateTimeValue = serializeDateTime(date, time, timeSerializingFormat);
     }
+    if (value === newDateTimeValue) {
+      return;
+    }
     onChange({
       value: newDateTimeValue,
       field
     });
-  }, [field, onChange, subtype, timeSerializingFormat]);
+  }, [value, field, onChange, subtype, timeSerializingFormat]);
   hooks.useEffect(() => {
     if (dateTimeUpdateRequest) {
       if (dateTimeUpdateRequest.refreshOnly) {
@@ -3163,7 +3180,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__namespace.createElement("svg", _extends$s({
@@ -3174,7 +3191,7 @@ var SvgDatetime = function SvgDatetime(props) {
   }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
     fillRule: "evenodd",
@@ -3183,7 +3200,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__namespace.createElement("svg", _extends$r({
@@ -3194,7 +3211,7 @@ var SvgTaglist = function SvgTaglist(props) {
   }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.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"
   })));
 };
@@ -3236,10 +3253,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__namespace.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;
@@ -3329,7 +3348,7 @@ var SvgDynamicList = function SvgDynamicList(props) {
   }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.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"
   })));
 };
@@ -3413,7 +3432,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__namespace.createElement("svg", _extends$d({
@@ -3422,12 +3441,9 @@ var SvgIFrame = function SvgIFrame(props) {
     height: 54,
     fill: "none"
   }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.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__namespace.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"
   })));
 };
@@ -3798,7 +3814,7 @@ function Numberfield(props) {
           'fjs-disabled': disabled,
           'fjs-readonly': readonly
         }, {
-          'hasErrors': errors.length
+          hasErrors: errors.length
         }),
         children: [jsxRuntime.jsx("input", {
           ref: inputRef,
@@ -3810,7 +3826,6 @@ function Numberfield(props) {
           onKeyPress: onKeyPress,
           onBlur: onInputBlur,
           onFocus: onInputFocus
-
           // @ts-ignore
           ,
           onInput: e => setValue(e.target.value, true),
@@ -4119,10 +4134,10 @@ function SearchableSelect(props) {
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", {
       class: classNames('fjs-input-group', {
-        'disabled': disabled,
-        'readonly': readonly
+        disabled: disabled,
+        readonly: readonly
       }, {
-        'hasErrors': errors.length
+        hasErrors: errors.length
       }),
       children: [jsxRuntime.jsx("input", {
         disabled: disabled,
@@ -4146,7 +4161,7 @@ function SearchableSelect(props) {
           setValue(null);
           e.preventDefault();
         },
-        children: [jsxRuntime.jsx(XMarkIcon, {}), " "]
+        children: [jsxRuntime.jsx(XMarkIcon, {}), ' ']
       }), jsxRuntime.jsx("span", {
         class: "fjs-select-arrow",
         onMouseDown: e => onAngelMouseDown(e),
@@ -4240,7 +4255,7 @@ function SimpleSelect(props) {
         disabled,
         readonly
       }, {
-        'hasErrors': errors.length
+        hasErrors: errors.length
       }),
       onFocus: onInputFocus,
       onBlur: onInputBlur,
@@ -4948,7 +4963,7 @@ function Html(props) {
 Html.config = {
   type: type$4,
   keyed: false,
-  label: 'HTML',
+  label: 'HTML view',
   group: 'presentation',
   create: (options = {}) => ({
     content: '',
@@ -4960,7 +4975,8 @@ const type$3 = 'expression';
 function ExpressionField(props) {
   const {
     field,
-    onChange
+    onChange,
+    value
   } = props;
   const {
     computeOn,
@@ -4969,18 +4985,20 @@ function ExpressionField(props) {
   const evaluation = useExpressionEvaluation(expression);
   const evaluationMemo = useDeepCompareMemoize(evaluation);
   const eventBus = useService('eventBus');
+  const expressionLoopPreventer = useService('expressionLoopPreventer');
   const sendValue = hooks.useCallback(() => {
     onChange && onChange({
       field,
-      value: evaluationMemo
+      value: evaluationMemo,
+      shouldNotRecompute: true
     });
   }, [field, evaluationMemo, onChange]);
-  useEffectOnChange(evaluationMemo, () => {
-    if (computeOn !== 'change') {
+  hooks.useEffect(() => {
+    if (computeOn !== 'change' || lodash.isEqual(evaluationMemo, value) || !expressionLoopPreventer.registerExpressionExecution(this)) {
       return;
     }
     sendValue();
-  }, [computeOn, sendValue]);
+  });
   hooks.useEffect(() => {
     if (computeOn === 'presubmit') {
       eventBus.on('presubmit', sendValue);
@@ -4994,6 +5012,7 @@ ExpressionField.config = {
   label: 'Expression',
   group: 'basic-input',
   keyed: true,
+  emptyValue: null,
   escapeGridRender: true,
   create: (options = {}) => ({
     computeOn: 'change',
@@ -5644,7 +5663,7 @@ function Lightbox(props) {
         style: "margin: 15px 20px 15px 10px; align-self: center; color: var(--cds-icon-primary, #404040)",
         children: jsxRuntime.jsx(Logo, {})
       }), jsxRuntime.jsxs("span", {
-        children: ["Web-based tooling for BPMN, DMN, and forms powered by ", jsxRuntime.jsx("a", {
+        children: ["Web-based tooling for BPMN, DMN, and forms powered by", ' ', jsxRuntime.jsx("a", {
           href: "https://bpmn.io",
           target: "_blank",
           rel: "noopener",
@@ -5734,7 +5753,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() {
@@ -5904,8 +5928,7 @@ class ConditionChecker {
     const {
       getFilterPath = (field, indexes) => this._pathRegistry.getValuePath(field, {
         indexes
-      }),
-      leafNodeDeletionOnly = false
+      })
     } = options;
     const _applyConditionsWithinScope = (rootField, scopeContext, startHidden = false) => {
       const {
@@ -5936,7 +5959,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, {
@@ -5968,7 +5991,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);
         }
@@ -6058,6 +6081,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.
@@ -8232,6 +8298,62 @@ 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 {
+        type
+      } = this._formFieldRegistry.get(id);
+      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] = hooks.useState(form._getState());
@@ -8296,6 +8418,7 @@ const CoreModule = {
   importer: ['type', Importer],
   fieldFactory: ['type', FieldFactory],
   formFieldRegistry: ['type', FormFieldRegistry],
+  formFieldInstanceRegistry: ['type', FormFieldInstanceRegistry],
   pathRegistry: ['type', PathRegistry],
   formLayouter: ['type', FormLayouter],
   validator: ['type', Validator]
@@ -8470,73 +8593,39 @@ 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 {
-        config: fieldConfig
-      } = formFields.get(type);
+    const errors = {};
+    const getErrorPath = (id, indexes) => [id, ...Object.values(indexes || {})];
+    formFieldInstanceRegistry.getAllKeyed().forEach(({
+      id,
+      valuePath,
+      indexes
+    }) => {
+      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 = minDash.get(data, valuePath);
-      const fieldErrors = validator.validateField(field, valueData);
+      const value = minDash.get(data, valuePath);
+      const fieldErrors = validator.validateField(field, value);
       if (fieldErrors.length) {
-        minDash.set(errors, getErrorPath(field, indexes), fieldErrors);
-      }
-
-      // (3) Process parents
-      if (!Array.isArray(field.components)) {
-        return;
-      }
-
-      // (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;
+        minDash.set(errors, getErrorPath(field.id, indexes), fieldErrors);
       }
-
-      // (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;
   }
 
   /**
@@ -8631,7 +8720,7 @@ class Form {
   /**
    * @internal
    *
-   * @param { { add?: boolean, field: any, indexes: object, remove?: number, value?: any } } update
+   * @param { { field: any, indexes: object, value: any } } update
    */
   _update(update) {
     const {
@@ -8651,6 +8740,7 @@ class Form {
     });
     minDash.set(data, valuePath, value);
     minDash.set(errors, [field.id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
+    this._emit('field.updated', update);
     this._setState({
       data: clone(data),
       errors: clone(errors)
@@ -8676,10 +8766,10 @@ class Form {
   }
 
   /**
-  * @internal
-  */
+   * @internal
+   */
   _getModules() {
-    return [ExpressionLanguageModule, MarkdownRendererModule, ViewerCommandsModule, RepeatRenderModule];
+    return [ExpressionLanguageModule, ExpressionFieldModule, MarkdownRendererModule, ViewerCommandsModule, RepeatRenderModule];
   }
 
   /**
@@ -8694,65 +8784,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 = minDash.get(formData, valuePath);
-        minDash.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 = minDash.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 = minDash.get(formData, valuePath);
+      minDash.set(submitData, valuePath, value);
+    });
+    return submitData;
   }
 
   /**
@@ -8847,16 +8896,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 {
@@ -8886,7 +8935,9 @@ exports.Description = Description;
 exports.DynamicList = DynamicList;
 exports.Errors = Errors;
 exports.ExpressionField = ExpressionField;
+exports.ExpressionFieldModule = ExpressionFieldModule;
 exports.ExpressionLanguageModule = ExpressionLanguageModule;
+exports.ExpressionLoopPreventer = ExpressionLoopPreventer;
 exports.FeelExpressionLanguage = FeelExpressionLanguage;
 exports.FeelersTemplating = FeelersTemplating;
 exports.FieldFactory = FieldFactory;