@wise/dynamic-flow-client 4.3.12 → 4.3.14

package/build/main.mjs

@@ -1116,7 +1116,6 @@ var getRenderFunction = (renderers) => {
 };
 
 // src/revamp/utils/type-utils.ts
-var hasChildren = (component) => "getChildren" in component && typeof component.getChildren === "function";
 var isHiddenComponent = (component) => "hidden" in component && component.hidden;
 var isObjectLocalValue = (value) => value != null && typeof value === "object" && !Array.isArray(value) && !(value instanceof File);
 var isArrayLocalValue = (value) => Array.isArray(value);
@@ -1770,47 +1769,67 @@ import { validateStep } from "@wise/dynamic-flow-types";
 import { useCallback as useCallback2, useEffect, useMemo, useRef as useRef2, useState } from "react";
 import { useIntl as useIntl2 } from "react-intl";
 
+// src/revamp/domain/components/utils/component-utils.ts
+var getInputUpdateFunction = (updateComponent) => {
+  return (component, updateFn) => {
+    updateFn(component);
+    updateComponent();
+  };
+};
+
 // src/revamp/domain/components/RootDomainComponent.ts
-var createRootDomainComponent = () => ({
-  type: "root",
-  uid: "root",
-  stepComponent: null,
-  getChildren() {
-    return this.stepComponent ? [this.stepComponent] : [];
-  },
-  getLocalValue() {
-    return this.stepComponent ? this.stepComponent.getLocalValue() : null;
-  },
-  async getSubmittableValue() {
-    return this.stepComponent ? this.stepComponent.getSubmittableValue() : null;
-  },
-  getSubmittableValueSync() {
-    return this.stepComponent ? this.stepComponent.getSubmittableValueSync() : null;
-  },
-  getSummary() {
-    return this.stepComponent ? this.stepComponent.getSummary() : {};
-  },
-  validate() {
-    return this.stepComponent ? this.stepComponent.validate() : false;
-  },
-  setLoadingState(loadingState) {
-    var _a;
-    (_a = this.stepComponent) == null ? void 0 : _a.setLoadingState(loadingState);
-  },
-  getLoadingState() {
-    return this.stepComponent ? this.stepComponent.loadingState : "initial";
-  },
-  getTrackEvent() {
-    return this.stepComponent ? this.stepComponent.trackEvent : null;
-  },
-  hasStep() {
-    return Boolean(this.stepComponent);
-  },
-  stop() {
-    var _a;
-    (_a = this.stepComponent) == null ? void 0 : _a.stop();
-  }
-});
+var createRootDomainComponent = (updateComponent) => {
+  const update = getInputUpdateFunction(updateComponent);
+  const rootComponent = {
+    type: "root",
+    uid: "root",
+    stepComponent: null,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
+    getChildren() {
+      return this.stepComponent ? [this.stepComponent] : [];
+    },
+    getLocalValue() {
+      return this.stepComponent ? this.stepComponent.getLocalValue() : null;
+    },
+    async getSubmittableValue() {
+      return this.stepComponent ? this.stepComponent.getSubmittableValue() : null;
+    },
+    getSubmittableValueSync() {
+      return this.stepComponent ? this.stepComponent.getSubmittableValueSync() : null;
+    },
+    getSummary() {
+      return this.stepComponent ? this.stepComponent.getSummary() : {};
+    },
+    validate() {
+      return this.stepComponent ? this.stepComponent.validate() : false;
+    },
+    setLoadingState(loadingState) {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.setLoadingState(loadingState);
+    },
+    getLoadingState() {
+      return this.stepComponent ? this.stepComponent.loadingState : "initial";
+    },
+    getTrackEvent() {
+      return this.stepComponent ? this.stepComponent.trackEvent : null;
+    },
+    hasStep() {
+      return Boolean(this.stepComponent);
+    },
+    stop() {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.stop();
+    },
+    setStep(stepComponent) {
+      this._update((draft) => {
+        draft.stepComponent = stepComponent;
+      });
+    }
+  };
+  return rootComponent;
+};
 
 // src/revamp/utils/component-utils.ts
 var getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then(
@@ -1883,22 +1902,17 @@ var summaryIfProvides = (summary, { value, icon, image }) => {
 var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
 var getLocalValueValidator = (checks) => (currentValue) => checks.map((check) => check(currentValue)).filter(isString);
 
-// src/revamp/domain/components/utils/component-utils.ts
-var getInputUpdateFunction = (uid, updateComponent) => (updateFn) => {
-  updateComponent(uid, (draft) => {
-    const draftState = draft;
-    updateFn(draftState);
-  });
-};
-
 // src/revamp/domain/components/StepDomainComponent.ts
 var createStepComponent = (stepProps) => {
   const _a = stepProps, { uid, stepPolling, stepRefreshAfter, updateComponent } = _a, rest = __objRest(_a, ["uid", "stepPolling", "stepRefreshAfter", "updateComponent"]);
-  const update = getInputUpdateFunction(uid, updateComponent);
-  return __spreadProps(__spreadValues({
+  const update = getInputUpdateFunction(updateComponent);
+  const component = __spreadProps(__spreadValues({
     uid
   }, rest), {
     type: "step",
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     getChildren() {
       return this.components;
     },
@@ -1918,7 +1932,7 @@ var createStepComponent = (stepProps) => {
       return validateComponents(this.getChildren());
     },
     setLoadingState(loadingState) {
-      update((draft) => {
+      this._update((draft) => {
         draft.loadingState = loadingState;
       });
     },
@@ -1927,6 +1941,7 @@ var createStepComponent = (stepProps) => {
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
     }
   });
+  return component;
 };
 
 // src/revamp/domain/mappers/utils/behavior-utils.ts
@@ -2350,6 +2365,22 @@ var createDividerComponent = (props) => __spreadProps(__spreadValues({
 // src/revamp/domain/mappers/layout/dividerLayoutToComponent.ts
 var dividerLayoutToComponent = (uid, { control, margin = "md" }) => createDividerComponent({ uid, control, margin });
 
+// src/revamp/domain/components/utils/getRandomId.ts
+var getRandomId = () => Math.random().toString(36).substring(2);
+
+// src/revamp/domain/components/utils/isExactLocalValueMatch.ts
+var isExactLocalValueMatch = (valueA, valueB) => {
+  if (isArrayLocalValue(valueA) && isArrayLocalValue(valueB)) {
+    return valueA.length === valueB.length && valueA.every((value, index) => isExactLocalValueMatch(value, valueB[index]));
+  }
+  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
+    const keysA = Object.keys(valueA);
+    const keysB = Object.keys(valueB);
+    return keysA.length === keysB.length && keysA.every((key) => isExactLocalValueMatch(valueA[key], valueB[key]));
+  }
+  return valueA === valueB;
+};
+
 // src/revamp/domain/features/utils/http-utils.ts
 function constructPayload({
   value,
@@ -2377,37 +2408,21 @@ var abortAndResetController = (abortController) => {
   return new AbortController();
 };
 
-// src/revamp/domain/components/utils/isExactLocalValueMatch.ts
-var isExactLocalValueMatch = (valueA, valueB) => {
-  if (isArrayLocalValue(valueA) && isArrayLocalValue(valueB)) {
-    return valueA.length === valueB.length && valueA.every((value, index) => isExactLocalValueMatch(value, valueB[index]));
-  }
-  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
-    const keysA = Object.keys(valueA);
-    const keysB = Object.keys(valueB);
-    return keysA.length === keysB.length && keysA.every((key) => isExactLocalValueMatch(valueA[key], valueB[key]));
-  }
-  return valueA === valueB;
-};
-
-// src/revamp/domain/components/utils/getRandomId.ts
-var getRandomId = () => Math.random().toString(36).substring(2);
-
 // src/revamp/domain/features/persistAsync/getComponentPersistAsync.ts
 var getComponentPersistAsync = (update, performPersistAsync) => (
   /**
    * Will update the persistedState when a new request is made, and will update
    * the value or set errors when the request completes.
    */
-  async (persistedState, currentValue) => {
-    const { abortController, lastSubmitted, submission } = persistedState;
+  async (component, currentValue) => {
+    const { abortController, lastSubmitted, submission } = component.persistedState;
     if (isExactLocalValueMatch(lastSubmitted, currentValue)) {
       return submission;
     }
     const newAbortController = abortAndResetController(abortController);
     if (isNullish(currentValue) || currentValue === "") {
       const resolvedNull = Promise.resolve(null);
-      update((draft) => {
+      update(component, (draft) => {
         draft.persistedState.abortController = newAbortController;
         draft.persistedState.lastResponse = null;
         draft.persistedState.lastSubmitted = currentValue;
@@ -2417,7 +2432,7 @@ var getComponentPersistAsync = (update, performPersistAsync) => (
     }
     const { signal } = newAbortController;
     const newSubmission = performPersistAsync({ value: currentValue, signal }).then((newValue) => {
-      update((draft) => {
+      update(component, (draft) => {
         draft.persistedState.lastResponse = newValue;
       });
       return newValue;
@@ -2425,14 +2440,14 @@ var getComponentPersistAsync = (update, performPersistAsync) => (
       if (error instanceof DOMException && error.name === "AbortError") {
         return null;
       }
-      update((draft) => {
+      update(component, (draft) => {
         draft.errors = [error.message];
         draft.persistedState.lastResponse = null;
         draft.persistedState.lastSubmitted = null;
       });
       throw error;
     });
-    update((draft) => {
+    update(component, (draft) => {
       draft.persistedState = {
         abortController: newAbortController,
         lastResponse: null,
@@ -2448,19 +2463,19 @@ var getComponentMultiPersistAsync = (update, performPersistAsync) => (
    * Will update the persistedState when a new request is made, and will update
    * the value or set errors when the request completes.
    */
-  async (index, value) => {
+  async (component, index, value) => {
     if (isNullish(value)) {
       throw new Error("Value must be a file or base64 string.");
     }
     const newAbortController = new AbortController();
     const { signal } = newAbortController;
     const newSubmission = performPersistAsync({ value, signal }).then((newValue) => {
-      update((draft) => {
+      update(component, (draft) => {
         draft.persistedState[index].lastResponse = newValue;
       });
       return newValue;
     }).catch((error) => {
-      update((draft) => {
+      update(component, (draft) => {
         draft.persistedState = [
           ...draft.persistedState.slice(0, index),
           ...draft.persistedState.slice(index + 1)
@@ -2470,7 +2485,7 @@ var getComponentMultiPersistAsync = (update, performPersistAsync) => (
       });
       throw error;
     });
-    update((draft) => {
+    update(component, (draft) => {
       draft.persistedState = [
         ...draft.persistedState.slice(0, index),
         {
@@ -2565,11 +2580,11 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
    * Will update the validationAsyncState when a new request is made, and will update
    * the description or set errors when the request completes.
    */
-  async (validationAsyncState, currentValue) => {
-    const { abortController } = validationAsyncState;
+  async (component, currentValue) => {
+    const { abortController } = component.validationAsyncState;
     const newAbortController = abortAndResetController(abortController);
     if (isNullish(currentValue)) {
-      update((draft) => {
+      update(component, (draft) => {
         draft.validationAsyncState = {
           abortController: newAbortController,
           lastSubmitted: currentValue,
@@ -2580,7 +2595,7 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
     }
     const { signal } = newAbortController;
     const newSubmission = performValidationAsync({ value: currentValue, signal }).then((message) => {
-      update((draft) => {
+      update(component, (draft) => {
         if (message) {
           draft.validationAsyncState.messages.success = message;
         }
@@ -2590,11 +2605,11 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
       if (error instanceof DOMException && error.name === "AbortError") {
         return null;
       }
-      update((draft) => {
+      update(component, (draft) => {
         draft.validationAsyncState.messages.error = error.message;
       });
     });
-    update((draft) => {
+    update(component, (draft) => {
       draft.validationAsyncState = {
         abortController: newAbortController,
         lastSubmitted: currentValue,
@@ -2627,22 +2642,18 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const numberComponent = __spreadValues({
     type: "number",
     uid,
     id,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
       performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.flush();
     },
     onFocus() {
@@ -2650,7 +2661,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     // Noop
     onChange(updatedValue) {
       const prevValue = this.value;
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -2672,8 +2683,11 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     }
   }, rest);
   if (performRefresh) {
@@ -2684,12 +2698,12 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, numberComponent), {
       onBlur() {
         if (this.validate()) {
-          persist(this.persistedState, this.getLocalValue()).catch(() => {
+          persist(this, this.getLocalValue()).catch(() => {
           });
         }
       },
       async getSubmittableValue() {
-        return persist(this.persistedState, this.getLocalValue());
+        return persist(this, this.getLocalValue());
       },
       getSubmittableValueSync() {
         return this.persistedState.lastResponse;
@@ -2707,7 +2721,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
       onChange(updatedValue) {
         numberComponent.onChange.call(this, updatedValue);
         if (getValidationErrors(updatedValue).length === 0) {
-          validateAsync(this.validationAsyncState, updatedValue);
+          validateAsync(this, updatedValue);
         }
       }
     });
@@ -2829,6 +2843,9 @@ var getRequiredCheck = (required, messageFunctions) => (value) => {
   if (isArray(value) && value.length === 0) {
     return messageFunctions.required();
   }
+  if (value === "") {
+    return messageFunctions.required();
+  }
   return isNullish(value) ? messageFunctions.required() : null;
 };
 
@@ -2995,7 +3012,7 @@ var getPerformPersistAsync = ({
         }
         return json[idProperty];
       }
-    } catch (error) {
+    } catch (e) {
       trackFailure();
       throw new Error(genericErrorMessage);
     }
@@ -3422,23 +3439,19 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const integerComponent = __spreadValues({
     type: "integer",
     uid,
     id,
     value,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
       performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.flush();
     },
     onFocus() {
@@ -3446,7 +3459,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     // Noop
     onChange(updatedValue) {
       const prevValue = this.value;
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -3468,8 +3481,11 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     }
   }, rest);
   if (performRefresh) {
@@ -3480,12 +3496,12 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, integerComponent), {
       onBlur() {
         if (this.validate()) {
-          persist(this.persistedState, this.getLocalValue()).catch(() => {
+          persist(this, this.getLocalValue()).catch(() => {
           });
         }
       },
       async getSubmittableValue() {
-        return persist(this.persistedState, this.getLocalValue());
+        return persist(this, this.getLocalValue());
       },
       getSubmittableValueSync() {
         return this.persistedState.lastResponse;
@@ -3503,7 +3519,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
       onChange(updatedValue) {
         integerComponent.onChange.call(this, updatedValue);
         if (getValidationErrors(updatedValue).length === 0) {
-          validateAsync(this.validationAsyncState, updatedValue);
+          validateAsync(this, updatedValue);
         }
       }
     });
@@ -3577,16 +3593,9 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     (option) => isPartialModelMatch(option.component.getSubmittableValueSync(), initialModel)
   );
   const selectedIndex = matchingOptions.filter((match) => match).length === 1 ? matchingOptions.indexOf(true) : null;
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
-  return __spreadProps(__spreadValues({
+  const component = __spreadProps(__spreadValues({
     uid,
     type: "select",
     children,
@@ -3594,6 +3603,9 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     selectedIndex,
     value: null
   }, rest), {
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     getChildren() {
       return this.children;
     },
@@ -3617,7 +3629,7 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
       return (_b = (_a2 = this.getSelectedChild()) == null ? void 0 : _a2.getLocalValue()) != null ? _b : null;
     },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
     },
     onFocus() {
     },
@@ -3629,7 +3641,7 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
           schemaId: this.children[updatedIndex].analyticsId
         });
       }
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.selectedIndex = updatedIndex;
       });
@@ -3639,10 +3651,14 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     validate() {
       var _a2, _b;
       const validChild = (_b = (_a2 = this.getSelectedChild()) == null ? void 0 : _a2.validate()) != null ? _b : true;
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0 && validChild;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0 && validChild;
     }
   });
+  return component;
 };
 
 // src/revamp/domain/mappers/schema/oneOfSchemaToComponent/oneOfSchemaToComponent.ts
@@ -3737,29 +3753,25 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
     "summariser",
     "value"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const dateInputComponent = __spreadValues({
     type: "date",
     uid,
     id,
     value,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
     },
     onFocus() {
     },
     // Noop
     onChange(updatedValue) {
       const prevValue = this.value;
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -3783,8 +3795,11 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     }
   }, rest);
   if (performRefresh) {
@@ -3797,12 +3812,12 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
         dateInputComponent.onChange.call(this, updatedValue);
         const isValid = getValidationErrors(updatedValue).length === 0;
         if (isValid) {
-          persist(this.persistedState, this.getLocalValue()).catch(() => {
+          persist(this, this.getLocalValue()).catch(() => {
           });
         }
       },
       async getSubmittableValue() {
-        return persist(this.persistedState, this.getLocalValue());
+        return persist(this, this.getLocalValue());
       },
       getSubmittableValueSync() {
         return this.persistedState.lastResponse;
@@ -3814,7 +3829,7 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, dateInputComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
+          validateAsync(this, this.getLocalValue()).catch(() => {
           });
         }
       }
@@ -3917,29 +3932,25 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const uploadComponent = __spreadValues({
     type: "upload",
     uid,
     id,
     format: "base64",
     value,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
     },
     onFocus() {
     },
     // Noop
     async onUpload(updatedValue) {
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.value = updatedValue;
       });
@@ -3961,8 +3972,11 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     }
   }, rest);
   if (!performPersistAsync) {
@@ -3972,14 +3986,14 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
   return __spreadProps(__spreadValues({}, uploadComponent), {
     format,
     async onUpload(file) {
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.value = file;
       });
       onValueChange();
       const submission = format === "base64" && file ? await toBase64(file) : file;
-      await persist(this.persistedState, submission).catch((error) => {
-        update((draft) => {
+      await persist(this, submission).catch((error) => {
+        this._update((draft) => {
           draft.persistedState.lastResponse = null;
           draft.persistedState.lastSubmitted = null;
           draft.persistedState.submission = Promise.resolve(null);
@@ -4058,23 +4072,19 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     "summariser",
     "value"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const inputComponent = __spreadValues({
     type: "text",
     uid,
     id,
     value,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
       performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.flush();
     },
     onFocus() {
@@ -4082,7 +4092,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     // Noop
     onChange(updatedValue) {
       const prevValue = this.value;
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
@@ -4094,8 +4104,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
       return this.getSubmittableValueSync();
     },
     getSubmittableValueSync() {
-      var _a2;
-      return (_a2 = this.getLocalValue()) != null ? _a2 : null;
+      return this.getLocalValue() || null;
     },
     getSummary() {
       return summariser(this.getLocalValue());
@@ -4104,8 +4113,11 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     }
   }, rest);
   if (performRefresh) {
@@ -4116,12 +4128,12 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, inputComponent), {
       onBlur() {
         if (this.validate()) {
-          persist(this.persistedState, this.getLocalValue()).catch(() => {
+          persist(this, this.getLocalValue()).catch(() => {
           });
         }
       },
       async getSubmittableValue() {
-        return persist(this.persistedState, this.getLocalValue());
+        return persist(this, this.getLocalValue());
       },
       getSubmittableValueSync() {
         return this.persistedState.lastResponse;
@@ -4139,7 +4151,10 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
       onChange(updatedValue) {
         inputComponent.onChange.call(this, updatedValue);
         if (getValidationErrors(updatedValue).length === 0) {
-          validateAsync(this.validationAsyncState, updatedValue);
+          validateAsync(this, updatedValue);
+        }
+        if (!updatedValue) {
+          validateAsync.cancel();
         }
       }
     });
@@ -4274,9 +4289,9 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
     "createEditableComponent",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  return __spreadProps(__spreadValues({
+  const repeatableComponent = __spreadProps(__spreadValues({
     uid,
     id,
     type: "repeatable",
@@ -4290,8 +4305,11 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
       image: summary == null ? void 0 : summary.defaultImage
     }
   }, componentProps), {
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onEdit(itemIndex) {
-      update((draft) => {
+      this._update((draft) => {
         draft.editableComponent = createEditableComponent(
           draft.components[itemIndex].getLocalValue()
         );
@@ -4299,7 +4317,7 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
       });
     },
     onAdd() {
-      update((draft) => {
+      this._update((draft) => {
         draft.editableComponent = createEditableComponent(null);
         draft.editableIndex = null;
         draft.errors = [];
@@ -4311,7 +4329,7 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
       if (!isValid) {
         return false;
       }
-      update((draft) => {
+      this._update((draft) => {
         if (draft.editableComponent === null) {
           return;
         }
@@ -4330,7 +4348,7 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
       return true;
     },
     onRemove() {
-      update((draft) => {
+      this._update((draft) => {
         if (draft.editableIndex === null) {
           return;
         }
@@ -4358,12 +4376,13 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
     validate() {
       const messages = getValidationErrors(this.getLocalValue());
       const childComponentsValid = validateComponents(this.getChildren());
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = messages;
       });
       return messages.length === 0 && childComponentsValid;
     }
   });
+  return repeatableComponent;
 };
 
 // src/revamp/domain/mappers/schema/arraySchemaToComponent/arraySchemaToRepeatableComponent.ts
@@ -4463,30 +4482,26 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const getFileValidationErrors = getLocalValueValidator(fileChecks);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const uploadComponent = __spreadValues({
     type: "multi-upload",
     uid,
     id,
     format: "base64",
     files: [],
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
-      getAndSetValidationErrors(this.getLocalValue());
+      this.validate();
     },
     onFocus() {
     },
     // Noop
     async onRemoveFile(index) {
-      update((draft) => {
+      this._update((draft) => {
         draft.value.splice(index, 1);
         draft.files.splice(index, 1);
       });
@@ -4494,7 +4509,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
     async onInsertFile(index, file) {
       const fileErrors = getFileValidationErrors(file);
       const fileId = getRandomId();
-      update((draft) => {
+      this._update((draft) => {
         draft.value.splice(index, 0, file);
         draft.files.splice(index, 0, { file, id: fileId, errors: fileErrors });
         draft.errors = [];
@@ -4516,8 +4531,11 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
       return this.value;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0 && this.files.every(({ errors }) => errors.length === 0);
+      const errorMsgs = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errorMsgs;
+      });
+      return errorMsgs.length === 0 && this.files.every(({ errors }) => errors.length === 0);
     }
   }, rest);
   if (!performPersistAsync) {
@@ -4529,7 +4547,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
     async onInsertFile(index, file) {
       const fileId = await uploadComponent.onInsertFile.call(this, index, file);
       const submission = format === "blob" ? file : await toBase64(file);
-      await persist(index, submission);
+      await persist(this, index, submission);
       onValueChange();
       return fileId;
     },
@@ -4537,7 +4555,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
       var _a2;
       await uploadComponent.onRemoveFile.call(this, index);
       (_a2 = this.persistedState[index]) == null ? void 0 : _a2.abortController.abort();
-      update((draft) => {
+      this._update((draft) => {
         draft.persistedState = draft.persistedState.splice(index, 1);
       });
     },
@@ -4643,17 +4661,10 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
     "performRefresh",
     "onValueChange"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const children = options.map((option) => option.component);
   const selectedIndices = getInitialModelIndices(initialValue, children);
   const getValidationErrors = getLocalValueValidator(checks);
-  const getAndSetValidationErrors = (currentValue) => {
-    const messages = getValidationErrors(currentValue);
-    update((draft) => {
-      draft.errors = messages;
-    });
-    return messages;
-  };
   const inputComponent = __spreadProps(__spreadValues({
     uid,
     type: "multi-select",
@@ -4662,14 +4673,20 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
     selectedIndices,
     value: null
   }, rest), {
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onSelect(indices) {
-      update((draft) => {
+      this._update((draft) => {
         draft.selectedIndices = indices;
         draft.errors = [];
       });
       performRefresh == null ? void 0 : performRefresh();
       onValueChange();
-      getAndSetValidationErrors(this.getLocalValue());
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
     },
     onBlur() {
     },
@@ -4682,8 +4699,11 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
       return (_b = (_a2 = this.getSelectedChildren()) == null ? void 0 : _a2.map((child) => child.getLocalValue())) != null ? _b : null;
     },
     validate() {
-      const messages = getAndSetValidationErrors(this.getLocalValue());
-      return messages.length === 0;
+      const errors = getValidationErrors(this.getLocalValue());
+      this._update((draft) => {
+        draft.errors = errors;
+      });
+      return errors.length === 0;
     },
     async getSubmittableValue() {
       const selected = this.getSelectedChildren();
@@ -4713,7 +4733,7 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
       onSelect(indices) {
         inputComponent.onSelect.call(this, indices);
         if (this.validate()) {
-          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
+          validateAsync(this, this.getLocalValue()).catch(() => {
           });
         }
       }
@@ -4914,13 +4934,16 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   const booleanComponent = __spreadValues({
     type: "boolean",
     uid,
     id,
     autoComplete: "",
     value,
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     onBlur() {
     },
     // Noop
@@ -4928,7 +4951,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     },
     // Noop
     onChange(updatedValue) {
-      update((draft) => {
+      this._update((draft) => {
         draft.errors = [];
         draft.value = updatedValue;
       });
@@ -4957,11 +4980,11 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, booleanComponent), {
       onChange(updatedValue) {
         booleanComponent.onChange.call(this, updatedValue);
-        persist(this.persistedState, this.getLocalValue()).catch(() => {
+        persist(this, this.getLocalValue()).catch(() => {
         });
       },
       async getSubmittableValue() {
-        return persist(this.persistedState, this.getLocalValue());
+        return persist(this, this.getLocalValue());
       },
       getSubmittableValueSync() {
         return this.persistedState.lastResponse;
@@ -4973,7 +4996,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     return __spreadProps(__spreadValues({}, booleanComponent), {
       onChange(updatedValue) {
         booleanComponent.onChange.call(this, updatedValue);
-        validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
+        validateAsync(this, this.getLocalValue()).catch(() => {
         });
       }
     });
@@ -5418,9 +5441,9 @@ var getOrientationControl = ({
 var DEBOUNCE_TIME = 400;
 var createSearchComponent = (searchProps, performSearch, onBehavior, updateComponent) => {
   const { uid, control, emptyMessage, margin, title } = searchProps;
-  const update = getInputUpdateFunction(uid, updateComponent);
+  const update = getInputUpdateFunction(updateComponent);
   let abortController = new AbortController();
-  const search = (query, searchConfig) => {
+  const search = (component2, query, searchConfig) => {
     abortController.abort();
     abortController = new AbortController();
     const { signal } = abortController;
@@ -5430,7 +5453,7 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, updateCompo
       config: searchConfig
     }).then((results) => {
       if (!signal.aborted) {
-        update((draft) => {
+        update(component2, (draft) => {
           draft.results = results;
           draft.isLoading = false;
           draft.error = void 0;
@@ -5438,33 +5461,15 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, updateCompo
       }
     }).catch(() => {
       if (!signal.aborted) {
-        update((draft) => {
+        update(component2, (draft) => {
           draft.error = "No response";
           draft.isLoading = false;
         });
       }
     });
   };
-  const onSelect = ({ type, value }) => {
-    if (type === "action") {
-      void onBehavior({ type: "action", action: value });
-    } else {
-      update((draft) => {
-        draft.query = value.query;
-        draft.isLoading = true;
-      });
-      search(value.query, { method: value.method, param: value.param, url: value.url });
-    }
-  };
   const debouncedSearch = debounce(search, DEBOUNCE_TIME);
-  const onChange = (query) => {
-    update((draft) => {
-      draft.query = query;
-      draft.isLoading = true;
-    });
-    debouncedSearch(query.trim());
-  };
-  return {
+  const component = {
     type: "search",
     uid,
     control,
@@ -5474,15 +5479,39 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, updateCompo
     isLoading: false,
     query: "",
     results: [],
+    _update(updateFn) {
+      update(this, updateFn);
+    },
     getSubmittableValue: async () => null,
     getSubmittableValueSync: () => null,
     getLocalValue: () => null,
     getSummary: () => ({}),
     // Noop
     validate: () => true,
-    onChange,
-    onSelect
+    onChange(query) {
+      this._update((draft) => {
+        draft.query = query;
+        draft.isLoading = true;
+      });
+      debouncedSearch(this, query.trim());
+    },
+    onSelect({ type, value }) {
+      if (type === "action") {
+        void onBehavior({ type: "action", action: value });
+      } else {
+        this._update((draft) => {
+          draft.query = value.query;
+          draft.isLoading = true;
+        });
+        search(this, value.query, {
+          method: value.method,
+          param: value.param,
+          url: value.url
+        });
+      }
+    }
   };
+  return component;
 };
 
 // src/revamp/domain/features/search/getPerformSearchFunction.ts
@@ -6212,29 +6241,6 @@ var formatDateOptions = {
   dateStyle: "long"
 };
 
-// src/revamp/utils/findComponent.ts
-var findComponent = (components, id, logEvent) => {
-  const flattened = flattenComponents(components);
-  const matching = flattened.filter((component) => component.uid === id);
-  if (matching.length === 1) {
-    return matching[0];
-  }
-  if (matching.length > 1) {
-    throw new Error(`Multiple components with the same uid: ${id}`);
-  }
-  logEvent("error", "Failed to find domain layer component", {
-    componentUid: id,
-    componentsTree: flattened.map((component) => component.uid)
-  });
-  throw new Error(`Failed to find any components with uid: ${id}`);
-};
-var flattenComponents = (components) => components.reduce((acc, component) => {
-  if (hasChildren(component)) {
-    return [...acc, component, ...flattenComponents(component.getChildren())];
-  }
-  return [...acc, component];
-}, []);
-
 // src/revamp/utils/useStableCallback.tsx
 import { useCallback, useLayoutEffect, useRef } from "react";
 function useStableCallback(handler) {
@@ -6261,15 +6267,7 @@ function useDynamicFlowCore(props) {
     [formatMessage, locale]
   );
   const rerender = useRerender();
-  const rootComponentRef = useRef2(createRootDomainComponent());
-  const updateComponent = useCallback2(
-    (id, update) => {
-      update(findComponent([rootComponentRef.current], id, logEvent));
-      rerender();
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+  const rootComponentRef = useRef2(createRootDomainComponent(rerender));
   const stepCount = useRef2(0);
   const stepRef = useRef2(initialStep != null ? initialStep : null);
   const etagRef = useRef2(null);
@@ -6314,25 +6312,24 @@ function useDynamicFlowCore(props) {
         });
       }
       try {
-        const newStepComponent = mapStepToComponent({
-          uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
-          stepLocalValue: localValue,
-          step: newStep,
-          displayStepTitle,
-          loadingState: "idle",
-          updateComponent,
-          getErrorMessageFunctions,
-          trackEvent,
-          logEvent,
-          httpClient,
-          onBehavior,
-          onRefresh,
-          onPoll,
-          onValueChange
-        });
-        updateComponent(rootComponentRef.current.uid, (draft) => {
-          draft.stepComponent = newStepComponent;
-        });
+        rootComponentRef.current.setStep(
+          mapStepToComponent({
+            uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
+            stepLocalValue: localValue,
+            step: newStep,
+            displayStepTitle,
+            loadingState: "idle",
+            updateComponent: () => rerender(),
+            getErrorMessageFunctions,
+            trackEvent,
+            logEvent,
+            httpClient,
+            onBehavior,
+            onRefresh,
+            onPoll,
+            onValueChange
+          })
+        );
       } catch (error) {
         closeWithError(error);
       }