BZ-42256: feat: Add support for asynchronous validator in input

docs/CHANGELOG.md

@@ -2,143 +2,5 @@
 based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/juspay/svelte-ui-components/compare/HEAD..1.34.2)
-
-- Performing major bump for sv5 migration
-- updated workflow for gh releases & breaking change detection
-- BREAKING CHANGE
-
-## [1.34.2](https://github.com/juspay/svelte-ui-components/compare/1.34.2..1.34.1) - 27 October 2025
-
-## [1.34.1](https://github.com/juspay/svelte-ui-components/compare/1.34.1..v1.34.1) - 6 August 2025
-
-## [v1.34.1](https://github.com/juspay/svelte-ui-components/compare/v1.34.1..1.34.0) - 6 August 2025
-
-## [1.34.0](https://github.com/juspay/svelte-ui-components/compare/1.34.0..1.33.0) - 22 May 2025
-
-- published version 1.34.0
-
-## [1.33.0](https://github.com/juspay/svelte-ui-components/compare/1.33.0..1.32.0) - 4 May 2025
-
-- released version 1.33.0 to npm
-
-## [1.32.0](https://github.com/juspay/svelte-ui-components/compare/1.32.0..1.31.0) - 28 April 2025
-
-- published package to version 1.32.0
-
-## [1.31.0](https://github.com/juspay/svelte-ui-components/compare/1.31.0..1.30.0) - 24 April 2025
-
-- publishing 1.31.0
-
-## [1.30.0](https://github.com/juspay/svelte-ui-components/compare/1.30.0..1.29.0) - 21 April 2025
-
-- published version 1.30.0
-
-## [1.29.0](https://github.com/juspay/svelte-ui-components/compare/1.29.0..1.28.3) - 3 April 2025
-
-- released version 1.29.0
-
-## [1.28.3](https://github.com/juspay/svelte-ui-components/compare/1.28.3..1.27.0) - 3 April 2025
-
-- added vars to customisation height, width, top, bottom and left
-- added vars to customise BrandLoader bg & dimensions
-- published changes to version 1.28.3
-
-## [1.27.0](https://github.com/juspay/svelte-ui-components/compare/1.27.0..1.26.0) - 26 March 2025
-
-- published version 1.27.0
-
-## [1.26.0](https://github.com/juspay/svelte-ui-components/compare/1.26.0..1.24.0) - 17 March 2025
-
-- releasing changes on 1.26.0
-
-## [1.24.0](https://github.com/juspay/svelte-ui-components/compare/1.24.0..1.23.0) - 3 March 2025
-
-- release 1.24.0
-
-## [1.23.0](https://github.com/juspay/svelte-ui-components/compare/1.23.0..1.22.0) - 7 February 2025
-
-- released version 1.23.0
-
-## [1.22.0](https://github.com/juspay/svelte-ui-components/compare/1.22.0..1.21.0) - 26 December 2024
-
-- published version 1.22.0
-
-## [1.21.0](https://github.com/juspay/svelte-ui-components/compare/1.21.0..1.20.0) - 23 December 2024
-
-- published version 1.21.0
-
-## [1.20.0](https://github.com/juspay/svelte-ui-components/compare/1.20.0..1.17.0) - 23 December 2024
-
-- published version 1.20.0
-
-## [1.17.0](https://github.com/juspay/svelte-ui-components/compare/1.17.0..1.12.0) - 11 October 2024
-
-- release new version & exposed grid item
-
-## [1.12.0](https://github.com/juspay/svelte-ui-components/compare/1.12.0..1.11.0) - 23 September 2024
-
-- published version 1.12.0
-
-## [1.11.0](https://github.com/juspay/svelte-ui-components/compare/1.11.0..1.10.0) - 29 August 2024
-
-- publishing version 1.11.0
-
-## [1.10.0](https://github.com/juspay/svelte-ui-components/compare/1.10.0..1.9.0) - 19 June 2024
-
-- releasing version 1.10.0
-- added formatting changes
-
-## [1.9.0](https://github.com/juspay/svelte-ui-components/compare/1.9.0..1.8.0) - 3 June 2024
-
-- Releasing version 1.9.0
-- Updated publish script to force push publish script changes
-- Formatted Select.svelte with formatter
-
-## [1.8.0](https://github.com/juspay/svelte-ui-components/compare/1.8.0..1.7.0) - 28 May 2024
-
-- releasing version 1.8.0
-
-## [1.7.0](https://github.com/juspay/svelte-ui-components/compare/1.7.0..1.6.0) - 17 May 2024
-
-- release version 1.7.0
-
-## [1.6.0](https://github.com/juspay/svelte-ui-components/compare/1.6.0..1.5.0) - 8 May 2024
-
-Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.5.2 to 4.5.3.
-- [Release notes](https://github.com/vitejs/vite/releases)
-- [Changelog](https://github.com/vitejs/vite/blob/v4.5.3/packages/vite/CHANGELOG.md)
-- [Commits](https://github.com/vitejs/vite/commits/v4.5.3/packages/vite)
-
----
-updated-dependencies:
-- dependency-name: vite
-dependency-type: direct:development
-...
-
-Signed-off-by: dependabot[bot] <support@github.com>
-
-## [1.5.0](https://github.com/juspay/svelte-ui-components/compare/1.5.0..1.4.0) - 1 March 2024
-
-- publishing out version 1.5.0
-
-## [1.4.0](https://github.com/juspay/svelte-ui-components/compare/1.4.0..1.3.0) - 1 March 2024
-
-- releasing version 1.4.0 to npm
-
-## [1.3.0](https://github.com/juspay/svelte-ui-components/compare/1.3.0..1.2.0) - 14 January 2024
-
-- releasing version 1.3.0 with support for fallback images in list item left icon
-
-## [1.2.0](https://github.com/juspay/svelte-ui-components/compare/1.2.0..1.1.0) - 15 December 2023
-
-- releasing version 1.2.0
-
-## [1.1.0](https://github.com/juspay/svelte-ui-components/compare/1.1.0..1.0.0) - 13 December 2023
-
-- releasing version: 1.1.0
-
 ##
-1.0.0 - 17 November 2023
-
-- added publish script for building & pushing the package to npmjs
+Unreleased

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "scripts": {
     "dev": "vite dev --host",
     "build": "vite build && npm run package",

src/lib/Input/Input.svelte

@@ -41,23 +41,39 @@
 
   let inputElement: HTMLInputElement | HTMLTextAreaElement | null = $state(null);
 
-  let validationState = $derived.by(() => {
-    const valueValidation: ValidationState = validateInput(
-      value,
-      dataType,
-      validationPattern,
-      inProgressPattern,
-      validators
-    );
-    if (
-      valueValidation === 'InProgress' &&
-      value.length > 0 &&
-      inputElement &&
-      inputElement !== document.activeElement
-    ) {
-      return 'Invalid';
-    }
-    return valueValidation;
+  // Use $state instead of $derived because validateInput is now async
+  let validationState = $state<ValidationState>('InProgress');
+
+  // Run async validation whenever dependencies change
+  $effect(() => {
+    // Capture current values to track dependencies
+    const currentValue = value;
+    const currentDataType = dataType;
+    const currentValidationPattern = validationPattern;
+    const currentInProgressPattern = inProgressPattern;
+    const currentValidators = validators;
+    const currentInputElement = inputElement;
+
+    // Run async validation
+    validateInput(
+      currentValue,
+      currentDataType,
+      currentValidationPattern,
+      currentInProgressPattern,
+      currentValidators
+    ).then((valueValidation) => {
+      // Check if validation result should be overridden to Invalid
+      if (
+        valueValidation === 'InProgress' &&
+        currentValue.length > 0 &&
+        currentInputElement &&
+        currentInputElement !== document.activeElement
+      ) {
+        validationState = 'Invalid';
+      } else {
+        validationState = valueValidation;
+      }
+    });
   });
 
   let showErrorMessage = $derived(validationState === 'Invalid');

src/lib/types.ts

@@ -26,7 +26,7 @@ export type AutoCompleteType =
 export type CustomValidator = (
   inputValue: string,
   currentValidationState: ValidationState
-) => ValidationState;
+) => ValidationState | Promise<ValidationState>;
 
 export type TextTransformer = (text: string) => string;
 

src/lib/utils.ts

@@ -10,13 +10,13 @@ import type { CustomValidator, InputDataType, ValidationState } from '$lib/types
  * @returns ValidationState : InProgress | Valid | Invalid
  */
 
-export function validateInput(
+export async function validateInput(
   inputValue: string,
   dataType: InputDataType,
   validPattern: RegExp | null,
   inProgressPattern: RegExp | null,
   customValidators: CustomValidator[]
-): ValidationState {
+): Promise<ValidationState> {
   let validationResult: ValidationState = 'Valid';
 
   switch (dataType) {
@@ -40,17 +40,19 @@ export function validateInput(
       break;
   }
 
-  customValidators.forEach((validator: CustomValidator) => {
-    const currentResult = validator(inputValue, validationResult);
+  for (const validator of customValidators) {
+    const currentResult = await Promise.resolve(validator(inputValue, validationResult));
     if (currentResult === 'Invalid') {
       validationResult = 'Invalid';
+      break;
     } else if (currentResult === 'InProgress') {
       validationResult = 'InProgress';
+      break;
     } else {
       validationResult =
         validationResult === 'Valid' && currentResult === 'Valid' ? 'Valid' : validationResult;
     }
-  });
+  }
 
   return validationResult;
 }