@wise/dynamic-flow-client 4.3.10 → 4.3.11

package/build/main.js

@@ -2448,7 +2448,7 @@ var getComponentPersistAsync = (update, performPersistAsync) => (
       return submission;
     }
     const newAbortController = abortAndResetController(abortController);
-    if (isNullish(currentValue)) {
+    if (isNullish(currentValue) || currentValue === "") {
       const resolvedNull = Promise.resolve(null);
       update((draft) => {
         draft.persistedState.abortController = newAbortController;
@@ -2609,10 +2609,7 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
    * the description or set errors when the request completes.
    */
   async (validationAsyncState, currentValue) => {
-    const { abortController, lastSubmitted } = validationAsyncState;
-    if (lastSubmitted === currentValue) {
-      return;
-    }
+    const { abortController } = validationAsyncState;
     const newAbortController = abortAndResetController(abortController);
     if (isNullish(currentValue)) {
       update((draft) => {
@@ -2650,6 +2647,7 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
     return newSubmission;
   }
 );
+var getDebouncedComponentValidationAsync = (update, performValidationAsync) => debounce(getComponentValidationAsync(update, performValidationAsync), 1e3);
 
 // src/revamp/domain/components/NumberInputComponent.ts
 var createNumberInputComponent = (numberInputProps, updateComponent) => {
@@ -2742,12 +2740,17 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     });
   }
   if (performValidationAsync) {
-    const validateAsync = getComponentValidationAsync(update, performValidationAsync);
+    const validateAsync = getDebouncedComponentValidationAsync(update, performValidationAsync);
     return __spreadProps(__spreadValues({}, numberComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
-          });
+          validateAsync.flush();
+        }
+      },
+      onChange(updatedValue) {
+        numberComponent.onChange.call(this, updatedValue);
+        if (getValidationErrors(updatedValue).length === 0) {
+          validateAsync(this.validationAsyncState, updatedValue);
         }
       }
     });
@@ -2824,7 +2827,7 @@ var getAboveMaxLengthCheck = ({ maxLength }, messageFunctions) => (value) => {
   return null;
 };
 var getBelowMinLengthCheck = ({ minLength }, messageFunctions) => (value) => {
-  if (isNumber(minLength) && isString(value) && value.length < minLength) {
+  if (isNumber(minLength) && isString(value) && value && value.length < minLength) {
     return messageFunctions.minLength(minLength);
   }
   return null;
@@ -2848,7 +2851,7 @@ var getAboveMaximumDateCheck = ({ maximum }, messageFunctions) => (value) => {
   return null;
 };
 var getBelowMinimumDateCheck = ({ minimum }, messageFunctions) => (value) => {
-  if (isString(minimum) && isString(value) && value < minimum) {
+  if (isString(minimum) && isString(value) && value && value < minimum) {
     return messageFunctions.minimumDate(minimum);
   }
   return null;
@@ -2856,7 +2859,7 @@ var getBelowMinimumDateCheck = ({ minimum }, messageFunctions) => (value) => {
 var getNotAdheringToPatternCheck = ({ pattern }, messageFunctions, options) => {
   validateStringPattern(pattern, options == null ? void 0 : options.logEvent);
   return (value) => {
-    if (isString(pattern) && isString(value)) {
+    if (isString(pattern) && isString(value) && value) {
       return new RegExp(pattern).test(value) ? null : messageFunctions.pattern();
     }
     return null;
@@ -3533,12 +3536,17 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     });
   }
   if (performValidationAsync) {
-    const validateAsync = getComponentValidationAsync(update, performValidationAsync);
+    const validateAsync = getDebouncedComponentValidationAsync(update, performValidationAsync);
     return __spreadProps(__spreadValues({}, integerComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
-          });
+          validateAsync.flush();
+        }
+      },
+      onChange(updatedValue) {
+        integerComponent.onChange.call(this, updatedValue);
+        if (getValidationErrors(updatedValue).length === 0) {
+          validateAsync(this.validationAsyncState, updatedValue);
         }
       }
     });
@@ -4164,12 +4172,17 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     });
   }
   if (performValidationAsync) {
-    const validateAsync = getComponentValidationAsync(update, performValidationAsync);
+    const validateAsync = getDebouncedComponentValidationAsync(update, performValidationAsync);
     return __spreadProps(__spreadValues({}, inputComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
-          });
+          validateAsync.flush();
+        }
+      },
+      onChange(updatedValue) {
+        inputComponent.onChange.call(this, updatedValue);
+        if (getValidationErrors(updatedValue).length === 0) {
+          validateAsync(this.validationAsyncState, updatedValue);
         }
       }
     });
@@ -7106,8 +7119,8 @@ var isTouchScreen = (navigator2 = window.navigator, matchMedia = window.matchMed
 
 // src/common/utils/debounce.ts
 var debounce2 = (callback, waitMs) => {
-  let timeoutId;
-  let lastArgs;
+  let timeoutId = null;
+  let lastArgs = null;
   const clearTimer = () => {
     if (timeoutId) {
       clearTimeout(timeoutId);

package/build/main.mjs

@@ -2405,7 +2405,7 @@ var getComponentPersistAsync = (update, performPersistAsync) => (
       return submission;
     }
     const newAbortController = abortAndResetController(abortController);
-    if (isNullish(currentValue)) {
+    if (isNullish(currentValue) || currentValue === "") {
       const resolvedNull = Promise.resolve(null);
       update((draft) => {
         draft.persistedState.abortController = newAbortController;
@@ -2566,10 +2566,7 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
    * the description or set errors when the request completes.
    */
   async (validationAsyncState, currentValue) => {
-    const { abortController, lastSubmitted } = validationAsyncState;
-    if (lastSubmitted === currentValue) {
-      return;
-    }
+    const { abortController } = validationAsyncState;
     const newAbortController = abortAndResetController(abortController);
     if (isNullish(currentValue)) {
       update((draft) => {
@@ -2607,6 +2604,7 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
     return newSubmission;
   }
 );
+var getDebouncedComponentValidationAsync = (update, performValidationAsync) => debounce(getComponentValidationAsync(update, performValidationAsync), 1e3);
 
 // src/revamp/domain/components/NumberInputComponent.ts
 var createNumberInputComponent = (numberInputProps, updateComponent) => {
@@ -2699,12 +2697,17 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     });
   }
   if (performValidationAsync) {
-    const validateAsync = getComponentValidationAsync(update, performValidationAsync);
+    const validateAsync = getDebouncedComponentValidationAsync(update, performValidationAsync);
     return __spreadProps(__spreadValues({}, numberComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
-          });
+          validateAsync.flush();
+        }
+      },
+      onChange(updatedValue) {
+        numberComponent.onChange.call(this, updatedValue);
+        if (getValidationErrors(updatedValue).length === 0) {
+          validateAsync(this.validationAsyncState, updatedValue);
         }
       }
     });
@@ -2781,7 +2784,7 @@ var getAboveMaxLengthCheck = ({ maxLength }, messageFunctions) => (value) => {
   return null;
 };
 var getBelowMinLengthCheck = ({ minLength }, messageFunctions) => (value) => {
-  if (isNumber(minLength) && isString(value) && value.length < minLength) {
+  if (isNumber(minLength) && isString(value) && value && value.length < minLength) {
     return messageFunctions.minLength(minLength);
   }
   return null;
@@ -2805,7 +2808,7 @@ var getAboveMaximumDateCheck = ({ maximum }, messageFunctions) => (value) => {
   return null;
 };
 var getBelowMinimumDateCheck = ({ minimum }, messageFunctions) => (value) => {
-  if (isString(minimum) && isString(value) && value < minimum) {
+  if (isString(minimum) && isString(value) && value && value < minimum) {
     return messageFunctions.minimumDate(minimum);
   }
   return null;
@@ -2813,7 +2816,7 @@ var getBelowMinimumDateCheck = ({ minimum }, messageFunctions) => (value) => {
 var getNotAdheringToPatternCheck = ({ pattern }, messageFunctions, options) => {
   validateStringPattern(pattern, options == null ? void 0 : options.logEvent);
   return (value) => {
-    if (isString(pattern) && isString(value)) {
+    if (isString(pattern) && isString(value) && value) {
       return new RegExp(pattern).test(value) ? null : messageFunctions.pattern();
     }
     return null;
@@ -3490,12 +3493,17 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     });
   }
   if (performValidationAsync) {
-    const validateAsync = getComponentValidationAsync(update, performValidationAsync);
+    const validateAsync = getDebouncedComponentValidationAsync(update, performValidationAsync);
     return __spreadProps(__spreadValues({}, integerComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
-          });
+          validateAsync.flush();
+        }
+      },
+      onChange(updatedValue) {
+        integerComponent.onChange.call(this, updatedValue);
+        if (getValidationErrors(updatedValue).length === 0) {
+          validateAsync(this.validationAsyncState, updatedValue);
         }
       }
     });
@@ -4121,12 +4129,17 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     });
   }
   if (performValidationAsync) {
-    const validateAsync = getComponentValidationAsync(update, performValidationAsync);
+    const validateAsync = getDebouncedComponentValidationAsync(update, performValidationAsync);
     return __spreadProps(__spreadValues({}, inputComponent), {
       onBlur() {
         if (this.validate()) {
-          validateAsync(this.validationAsyncState, this.getLocalValue()).catch(() => {
-          });
+          validateAsync.flush();
+        }
+      },
+      onChange(updatedValue) {
+        inputComponent.onChange.call(this, updatedValue);
+        if (getValidationErrors(updatedValue).length === 0) {
+          validateAsync(this.validationAsyncState, updatedValue);
         }
       }
     });
@@ -7063,8 +7076,8 @@ var isTouchScreen = (navigator2 = window.navigator, matchMedia = window.matchMed
 
 // src/common/utils/debounce.ts
 var debounce2 = (callback, waitMs) => {
-  let timeoutId;
-  let lastArgs;
+  let timeoutId = null;
+  let lastArgs = null;
   const clearTimer = () => {
     if (timeoutId) {
       clearTimeout(timeoutId);

package/build/types/revamp/domain/features/validationAsync/getComponentValidationAsync.d.ts

@@ -12,4 +12,5 @@ type Validatable = BooleanInputComponent | DateInputComponent | IntegerInputComp
  * Creates an onValidateAsync handler for a component.
  */
 export declare const getComponentValidationAsync: (update: ReturnType<typeof getInputUpdateFunction<Validatable>>, performValidationAsync: PerformValidationAsync) => (validationAsyncState: ValidationAsyncState, currentValue: LocalValue) => Promise<string | null | undefined>;
+export declare const getDebouncedComponentValidationAsync: (update: ReturnType<typeof getInputUpdateFunction<Validatable>>, performValidationAsync: PerformValidationAsync) => import("../../components/utils/debounce").DebouncedFunc<(validationAsyncState: ValidationAsyncState, currentValue: LocalValue) => Promise<string | null | undefined>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.3.10",
+  "version": "4.3.11",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -85,8 +85,8 @@
     "tsx": "4.19.3",
     "typescript": "5.8.3",
     "webpack": "5.98.0",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",