@wise/dynamic-flow-client 4.3.9 → 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;
@@ -2563,9 +2563,17 @@ var debounce = (callback, waitMs) => {
       clearTimer();
     }
   };
+  debouncedFn.isPending = () => timeoutId !== null;
   return debouncedFn;
 };
 
+// src/revamp/domain/components/utils/isOrWasValid.ts
+var isOrWasValid = (getErrors, previous, current) => {
+  const wasValid = getErrors(previous).length === 0 && previous !== null;
+  const isValid = getErrors(current).length === 0;
+  return wasValid || isValid;
+};
+
 // src/revamp/domain/features/refresh/getPerformRefresh.ts
 var getPerformRefresh = (schema, onRefresh) => {
   var _a, _b;
@@ -2578,7 +2586,21 @@ var getPerformRefresh = (schema, onRefresh) => {
   }
   return void 0;
 };
-var getDebouncedPerformRefresh = (performRefresh) => performRefresh ? debounce(performRefresh, 1e3) : void 0;
+var getDebouncedPerformRefresh = (performRefresh, getValidationErrors) => {
+  if (!performRefresh) {
+    return void 0;
+  }
+  const performDebouncedRefresh = debounce(performRefresh, 1e3);
+  const debouncedFn = (prevValue, updatedValue) => {
+    if (isOrWasValid(getValidationErrors, prevValue, updatedValue) || (performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.isPending())) {
+      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
+    }
+  };
+  debouncedFn.flush = () => performDebouncedRefresh.flush();
+  debouncedFn.cancel = () => performDebouncedRefresh.cancel();
+  debouncedFn.isPending = () => performDebouncedRefresh.isPending();
+  return debouncedFn;
+};
 
 // src/revamp/domain/features/validationAsync/getComponentValidationAsync.ts
 var getComponentValidationAsync = (update, performValidationAsync) => (
@@ -2587,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) => {
@@ -2628,9 +2647,7 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
     return newSubmission;
   }
 );
-
-// src/revamp/domain/components/utils/isOrWasValid.ts
-var isOrWasValid = (getErrors, previous, current) => getErrors(previous).length === 0 || getErrors(current).length === 0;
+var getDebouncedComponentValidationAsync = (update, performValidationAsync) => debounce(getComponentValidationAsync(update, performValidationAsync), 1e3);
 
 // src/revamp/domain/components/NumberInputComponent.ts
 var createNumberInputComponent = (numberInputProps, updateComponent) => {
@@ -2653,9 +2670,9 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh);
   const update = getInputUpdateFunction(uid, updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
+  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
   const getAndSetValidationErrors = (currentValue) => {
     const messages = getValidationErrors(currentValue);
     update((draft) => {
@@ -2681,9 +2698,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
-      if (isOrWasValid(getValidationErrors, prevValue, updatedValue)) {
-        performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
-      }
+      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh(prevValue, updatedValue);
       onValueChange();
     },
     async getSubmittableValue() {
@@ -2725,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);
         }
       }
     });
@@ -2807,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;
@@ -2831,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;
@@ -2839,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;
@@ -3445,9 +3465,9 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh);
   const update = getInputUpdateFunction(uid, updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
+  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
   const getAndSetValidationErrors = (currentValue) => {
     const messages = getValidationErrors(currentValue);
     update((draft) => {
@@ -3474,9 +3494,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
-      if (isOrWasValid(getValidationErrors, prevValue, updatedValue)) {
-        performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
-      }
+      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh(prevValue, updatedValue);
       onValueChange();
     },
     async getSubmittableValue() {
@@ -3518,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);
         }
       }
     });
@@ -4078,9 +4101,9 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     "summariser",
     "value"
   ]);
-  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh);
   const update = getInputUpdateFunction(uid, updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
+  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
   const getAndSetValidationErrors = (currentValue) => {
     const messages = getValidationErrors(currentValue);
     update((draft) => {
@@ -4107,9 +4130,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
-      if (isOrWasValid(getValidationErrors, prevValue, updatedValue)) {
-        performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
-      }
+      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh(prevValue, updatedValue);
       onValueChange();
     },
     async getSubmittableValue() {
@@ -4151,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);
         }
       }
     });
@@ -7093,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;
@@ -2520,9 +2520,17 @@ var debounce = (callback, waitMs) => {
       clearTimer();
     }
   };
+  debouncedFn.isPending = () => timeoutId !== null;
   return debouncedFn;
 };
 
+// src/revamp/domain/components/utils/isOrWasValid.ts
+var isOrWasValid = (getErrors, previous, current) => {
+  const wasValid = getErrors(previous).length === 0 && previous !== null;
+  const isValid = getErrors(current).length === 0;
+  return wasValid || isValid;
+};
+
 // src/revamp/domain/features/refresh/getPerformRefresh.ts
 var getPerformRefresh = (schema, onRefresh) => {
   var _a, _b;
@@ -2535,7 +2543,21 @@ var getPerformRefresh = (schema, onRefresh) => {
   }
   return void 0;
 };
-var getDebouncedPerformRefresh = (performRefresh) => performRefresh ? debounce(performRefresh, 1e3) : void 0;
+var getDebouncedPerformRefresh = (performRefresh, getValidationErrors) => {
+  if (!performRefresh) {
+    return void 0;
+  }
+  const performDebouncedRefresh = debounce(performRefresh, 1e3);
+  const debouncedFn = (prevValue, updatedValue) => {
+    if (isOrWasValid(getValidationErrors, prevValue, updatedValue) || (performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.isPending())) {
+      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
+    }
+  };
+  debouncedFn.flush = () => performDebouncedRefresh.flush();
+  debouncedFn.cancel = () => performDebouncedRefresh.cancel();
+  debouncedFn.isPending = () => performDebouncedRefresh.isPending();
+  return debouncedFn;
+};
 
 // src/revamp/domain/features/validationAsync/getComponentValidationAsync.ts
 var getComponentValidationAsync = (update, performValidationAsync) => (
@@ -2544,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) => {
@@ -2585,9 +2604,7 @@ var getComponentValidationAsync = (update, performValidationAsync) => (
     return newSubmission;
   }
 );
-
-// src/revamp/domain/components/utils/isOrWasValid.ts
-var isOrWasValid = (getErrors, previous, current) => getErrors(previous).length === 0 || getErrors(current).length === 0;
+var getDebouncedComponentValidationAsync = (update, performValidationAsync) => debounce(getComponentValidationAsync(update, performValidationAsync), 1e3);
 
 // src/revamp/domain/components/NumberInputComponent.ts
 var createNumberInputComponent = (numberInputProps, updateComponent) => {
@@ -2610,9 +2627,9 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh);
   const update = getInputUpdateFunction(uid, updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
+  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
   const getAndSetValidationErrors = (currentValue) => {
     const messages = getValidationErrors(currentValue);
     update((draft) => {
@@ -2638,9 +2655,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
-      if (isOrWasValid(getValidationErrors, prevValue, updatedValue)) {
-        performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
-      }
+      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh(prevValue, updatedValue);
       onValueChange();
     },
     async getSubmittableValue() {
@@ -2682,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);
         }
       }
     });
@@ -2764,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;
@@ -2788,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;
@@ -2796,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;
@@ -3402,9 +3422,9 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     "onValueChange",
     "summariser"
   ]);
-  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh);
   const update = getInputUpdateFunction(uid, updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
+  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
   const getAndSetValidationErrors = (currentValue) => {
     const messages = getValidationErrors(currentValue);
     update((draft) => {
@@ -3431,9 +3451,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
-      if (isOrWasValid(getValidationErrors, prevValue, updatedValue)) {
-        performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
-      }
+      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh(prevValue, updatedValue);
       onValueChange();
     },
     async getSubmittableValue() {
@@ -3475,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);
         }
       }
     });
@@ -4035,9 +4058,9 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     "summariser",
     "value"
   ]);
-  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh);
   const update = getInputUpdateFunction(uid, updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
+  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
   const getAndSetValidationErrors = (currentValue) => {
     const messages = getValidationErrors(currentValue);
     update((draft) => {
@@ -4064,9 +4087,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
-      if (isOrWasValid(getValidationErrors, prevValue, updatedValue)) {
-        performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
-      }
+      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh(prevValue, updatedValue);
       onValueChange();
     },
     async getSubmittableValue() {
@@ -4108,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);
         }
       }
     });
@@ -7050,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/components/utils/debounce.d.ts

@@ -2,5 +2,6 @@ export interface DebouncedFunc<T extends (...args: Parameters<T>) => ReturnType<
     (...args: Parameters<T>): void;
     cancel: () => void;
     flush: () => void;
+    isPending: () => boolean;
 }
 export declare const debounce: <T extends (...args: Parameters<T>) => ReturnType<T>>(callback: T, waitMs: number) => DebouncedFunc<T>;

package/build/types/revamp/domain/features/refresh/getPerformRefresh.d.ts

@@ -1,5 +1,12 @@
 import type { Schema } from '@wise/dynamic-flow-types/build/next';
-import type { OnRefresh } from '../../types';
+import type { LocalValue, OnRefresh } from '../../types';
 export type PerformRefresh = () => void;
 export declare const getPerformRefresh: (schema: Schema, onRefresh: OnRefresh) => PerformRefresh | undefined;
-export declare const getDebouncedPerformRefresh: (performRefresh: PerformRefresh | undefined) => import("../../components/utils/debounce").DebouncedFunc<PerformRefresh> | undefined;
+type DebouncedPerformRefresh<V extends LocalValue> = {
+    (prevValue: V, updatedValue: V): void;
+    cancel: () => void;
+    flush: () => void;
+    isPending: () => boolean;
+};
+export declare const getDebouncedPerformRefresh: <V extends LocalValue>(performRefresh: PerformRefresh | undefined, getValidationErrors: (value: V) => string[]) => DebouncedPerformRefresh<V> | undefined;
+export {};

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.9",
+  "version": "4.3.11",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",