@fransek/form 0.3.0 → 0.4.0

package/dist/esm/lib/{Field.js → field.js}

@@ -1,6 +1,6 @@
 import { useRef, useId, useEffect } from 'react';
-import { validate, validateAsync } from './fieldState.js';
-import { useFormContext } from './Form.js';
+import { useFormContext } from './form.js';
+import { validate, validateAsync } from './state-utils.js';
 
 /**
  * A headless form field component that manages validation state using a render prop pattern.
@@ -20,6 +20,26 @@ function Field(props) {
     const pendingValidationRef = useRef(null);
     const fieldRef = useRef(null);
     const id = useId();
+    const clearValidationTimeout = () => {
+        if (!validationTimeoutRef.current) {
+            return;
+        }
+        clearTimeout(validationTimeoutRef.current);
+        validationTimeoutRef.current = null;
+    };
+    const updateState = (overrides) => {
+        onChange({ ...stateRef.current, ...overrides });
+    };
+    const shouldValidateOnChange = () => validationMode === "dirty" ||
+        validationMode === "touchedOrDirty" ||
+        stateRef.current.isTouched;
+    const shouldValidateOnBlur = () => validationMode === "touched" ||
+        validationMode === "touchedOrDirty" ||
+        stateRef.current.isDirty;
+    const shouldValidateChangeOnBlur = () => !stateRef.current.isTouched &&
+        (validationMode === "touched" ||
+            (validationMode === "touchedOrDirty" && !stateRef.current.isDirty) ||
+            (validationMode === "touchedAndDirty" && stateRef.current.isDirty));
     useEffect(() => {
         async function performValidation() {
             if (!validation?.onSubmit &&
@@ -31,9 +51,17 @@ function Field(props) {
                 return stateRef.current.isValid;
             }
             validationIdRef.current++;
-            pendingValidationRef.current = validate(stateRef.current, validation?.onChange, validation?.onBlur, validation?.onSubmit);
+            pendingValidationRef.current = validate(stateRef.current, [
+                validation?.onChange,
+                validation?.onBlur,
+                validation?.onSubmit,
+            ]);
             if (pendingValidationRef.current.isValid) {
-                pendingValidationRef.current = await validateAsync(stateRef.current, validation?.onChangeAsync, validation?.onBlurAsync, validation?.onSubmitAsync);
+                pendingValidationRef.current = await validateAsync(stateRef.current, [
+                    validation?.onChangeAsync,
+                    validation?.onBlurAsync,
+                    validation?.onSubmitAsync,
+                ]);
             }
             return pendingValidationRef.current.isValid;
         }
@@ -58,17 +86,13 @@ function Field(props) {
     function handleChange(value) {
         onInput?.(value);
         if (validationTimeoutRef.current) {
-            clearTimeout(validationTimeoutRef.current);
+            clearValidationTimeout();
         }
         const currentValidation = ++validationIdRef.current;
-        const shouldValidate = validationMode === "dirty" ||
-            validationMode === "touchedOrDirty" ||
-            stateRef.current.isTouched;
-        if (shouldValidate) {
+        if (shouldValidateOnChange()) {
             const errorMessage = validation?.onChange?.(value);
             const willValidateAsync = Boolean(validation?.onChangeAsync && !errorMessage);
-            onChange({
-                ...stateRef.current,
+            updateState({
                 value,
                 errorMessage,
                 isDirty: true,
@@ -81,8 +105,7 @@ function Field(props) {
                     const asyncErrorMessage = await validation?.onChangeAsync?.(value);
                     isValidatingOnChangeRef.current = false;
                     if (currentValidation === validationIdRef.current) {
-                        onChange({
-                            ...stateRef.current,
+                        updateState({
                             errorMessage: asyncErrorMessage,
                             isValid: !asyncErrorMessage,
                             isValidating: isValidatingOnBlurRef.current,
@@ -92,8 +115,7 @@ function Field(props) {
             }
         }
         else {
-            onChange({
-                ...stateRef.current,
+            updateState({
                 value,
                 isDirty: true,
                 isValidating: false,
@@ -102,39 +124,25 @@ function Field(props) {
     }
     async function handleBlur() {
         onBlur?.();
-        const shouldValidateOnBlur = validationMode === "touched" ||
-            validationMode === "touchedOrDirty" ||
-            stateRef.current.isDirty;
-        if (!shouldValidateOnBlur) {
-            onChange({
-                ...stateRef.current,
-                isTouched: true,
-            });
+        if (!shouldValidateOnBlur()) {
+            updateState({ isTouched: true });
             return;
         }
         const currentValidation = validationIdRef.current;
         let errorMessage = stateRef.current.errorMessage ||
             validation?.onBlur?.(stateRef.current.value);
-        const shouldValidateOnChange = !stateRef.current.isTouched &&
-            (validationMode === "touched" ||
-                (validationMode === "touchedOrDirty" && !stateRef.current.isDirty) ||
-                (validationMode === "touchedAndDirty" && stateRef.current.isDirty));
-        if (!errorMessage && shouldValidateOnChange && validation?.onChange) {
+        if (!errorMessage && shouldValidateChangeOnBlur() && validation?.onChange) {
             errorMessage = validation.onChange(stateRef.current.value);
         }
         if (!errorMessage &&
             (validation?.onBlurAsync || validation?.onChangeAsync)) {
             isValidatingOnBlurRef.current = true;
-            onChange({
-                ...stateRef.current,
-                isValidating: true,
-                isTouched: true,
-            });
+            updateState({ isValidating: true, isTouched: true });
             const asyncValidations = [];
             if (validation?.onBlurAsync) {
                 asyncValidations.push(validation.onBlurAsync(stateRef.current.value));
             }
-            if (shouldValidateOnChange && validation?.onChangeAsync) {
+            if (shouldValidateChangeOnBlur() && validation?.onChangeAsync) {
                 asyncValidations.push(validation.onChangeAsync(stateRef.current.value));
             }
             const [blurError, changeError] = await Promise.all(asyncValidations);
@@ -142,17 +150,16 @@ function Field(props) {
         }
         isValidatingOnBlurRef.current = false;
         if (errorMessage && validationTimeoutRef.current) {
-            clearTimeout(validationTimeoutRef.current);
+            clearValidationTimeout();
         }
         if (currentValidation !== validationIdRef.current) {
-            onChange({
-                ...stateRef.current,
+            updateState({
                 isTouched: true,
+                isValidating: isValidatingOnChangeRef.current,
             });
             return;
         }
-        onChange({
-            ...stateRef.current,
+        updateState({
             errorMessage,
             isTouched: true,
             isValid: !errorMessage,
@@ -171,4 +178,4 @@ function Field(props) {
 }
 
 export { Field };
-//# sourceMappingURL=Field.js.map
+//# sourceMappingURL=field.js.map

package/dist/esm/lib/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sources":["../../../src/lib/field.tsx"],"sourcesContent":["import { useEffect, useId, useRef } from \"react\";\nimport { useFormContext } from \"./form\";\nimport { validate, validateAsync } from \"./state-utils\";\nimport { FieldProps, FieldState } from \"./types\";\n\n/**\n * A headless form field component that manages validation state using a render prop pattern.\n *\n * Connects to a parent {@link Form} for submit validation coordination.\n * Passes current field state and event handlers to the `children` render function.\n */\nexport function Field<T>(props: FieldProps<T>) {\n  const {\n    registerField,\n    unregisterField,\n    validationMode: formValidationMode,\n    debounceMs: formDebounceMs,\n  } = useFormContext();\n\n  const {\n    children,\n    state,\n    onChange,\n    onInput,\n    onBlur,\n    validation,\n    debounceMs = formDebounceMs || 500,\n    validationMode = formValidationMode || \"touchedAndDirty\",\n  } = props;\n\n  const stateRef = useRef(state);\n  stateRef.current = state;\n  const validationTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n  const validationIdRef = useRef(0);\n  const isValidatingOnBlurRef = useRef(false);\n  const isValidatingOnChangeRef = useRef(false);\n  const pendingValidationRef = useRef<FieldState<T> | null>(null);\n  const fieldRef = useRef<HTMLElement | null>(null);\n  const id = useId();\n\n  const clearValidationTimeout = () => {\n    if (!validationTimeoutRef.current) {\n      return;\n    }\n    clearTimeout(validationTimeoutRef.current);\n    validationTimeoutRef.current = null;\n  };\n\n  const updateState = (overrides: Partial<FieldState<T>>) => {\n    onChange({ ...stateRef.current, ...overrides });\n  };\n\n  const shouldValidateOnChange = () =>\n    validationMode === \"dirty\" ||\n    validationMode === \"touchedOrDirty\" ||\n    stateRef.current.isTouched;\n\n  const shouldValidateOnBlur = () =>\n    validationMode === \"touched\" ||\n    validationMode === \"touchedOrDirty\" ||\n    stateRef.current.isDirty;\n\n  const shouldValidateChangeOnBlur = () =>\n    !stateRef.current.isTouched &&\n    (validationMode === \"touched\" ||\n      (validationMode === \"touchedOrDirty\" && !stateRef.current.isDirty) ||\n      (validationMode === \"touchedAndDirty\" && stateRef.current.isDirty));\n\n  useEffect(() => {\n    async function performValidation() {\n      if (\n        !validation?.onSubmit &&\n        !validation?.onSubmitAsync &&\n        !stateRef.current.isValidating &&\n        stateRef.current.isTouched &&\n        stateRef.current.isDirty &&\n        document.activeElement !== fieldRef.current\n      ) {\n        return stateRef.current.isValid;\n      }\n      validationIdRef.current++;\n      pendingValidationRef.current = validate(stateRef.current, [\n        validation?.onChange,\n        validation?.onBlur,\n        validation?.onSubmit,\n      ]);\n      if (pendingValidationRef.current.isValid) {\n        pendingValidationRef.current = await validateAsync(stateRef.current, [\n          validation?.onChangeAsync,\n          validation?.onBlurAsync,\n          validation?.onSubmitAsync,\n        ]);\n      }\n      return pendingValidationRef.current.isValid;\n    }\n\n    function commitPendingValidation() {\n      if (pendingValidationRef.current) {\n        onChange(pendingValidationRef.current);\n        pendingValidationRef.current = null;\n      }\n    }\n\n    registerField(\n      id,\n      fieldRef.current,\n      performValidation,\n      commitPendingValidation,\n    );\n\n    return () => {\n      unregisterField(id);\n    };\n  }, [id, registerField, validation, onChange, unregisterField]);\n\n  useEffect(() => {\n    return () => {\n      if (validationTimeoutRef.current) {\n        clearTimeout(validationTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  function handleChange(value: T) {\n    onInput?.(value);\n\n    if (validationTimeoutRef.current) {\n      clearValidationTimeout();\n    }\n\n    const currentValidation = ++validationIdRef.current;\n\n    if (shouldValidateOnChange()) {\n      const errorMessage = validation?.onChange?.(value);\n      const willValidateAsync = Boolean(\n        validation?.onChangeAsync && !errorMessage,\n      );\n\n      updateState({\n        value,\n        errorMessage,\n        isDirty: true,\n        isValid: !errorMessage,\n        isValidating: willValidateAsync,\n      });\n\n      if (willValidateAsync) {\n        isValidatingOnChangeRef.current = true;\n        validationTimeoutRef.current = setTimeout(async () => {\n          const asyncErrorMessage = await validation?.onChangeAsync?.(value);\n\n          isValidatingOnChangeRef.current = false;\n          if (currentValidation === validationIdRef.current) {\n            updateState({\n              errorMessage: asyncErrorMessage,\n              isValid: !asyncErrorMessage,\n              isValidating: isValidatingOnBlurRef.current,\n            });\n          }\n        }, debounceMs);\n      }\n    } else {\n      updateState({\n        value,\n        isDirty: true,\n        isValidating: false,\n      });\n    }\n  }\n\n  async function handleBlur() {\n    onBlur?.();\n\n    if (!shouldValidateOnBlur()) {\n      updateState({ isTouched: true });\n      return;\n    }\n\n    const currentValidation = validationIdRef.current;\n\n    let errorMessage =\n      stateRef.current.errorMessage ||\n      validation?.onBlur?.(stateRef.current.value);\n\n    if (!errorMessage && shouldValidateChangeOnBlur() && validation?.onChange) {\n      errorMessage = validation.onChange(stateRef.current.value);\n    }\n\n    if (\n      !errorMessage &&\n      (validation?.onBlurAsync || validation?.onChangeAsync)\n    ) {\n      isValidatingOnBlurRef.current = true;\n      updateState({ isValidating: true, isTouched: true });\n\n      const asyncValidations: Promise<React.ReactNode>[] = [];\n\n      if (validation?.onBlurAsync) {\n        asyncValidations.push(validation.onBlurAsync(stateRef.current.value));\n      }\n\n      if (shouldValidateChangeOnBlur() && validation?.onChangeAsync) {\n        asyncValidations.push(validation.onChangeAsync(stateRef.current.value));\n      }\n\n      const [blurError, changeError] = await Promise.all(asyncValidations);\n      errorMessage = blurError || changeError;\n    }\n\n    isValidatingOnBlurRef.current = false;\n\n    if (errorMessage && validationTimeoutRef.current) {\n      clearValidationTimeout();\n    }\n\n    if (currentValidation !== validationIdRef.current) {\n      updateState({\n        isTouched: true,\n        isValidating: isValidatingOnChangeRef.current,\n      });\n      return;\n    }\n\n    updateState({\n      errorMessage,\n      isTouched: true,\n      isValid: !errorMessage,\n      isValidating: isValidatingOnChangeRef.current,\n    });\n  }\n\n  const ref = (el: HTMLElement | null) => {\n    fieldRef.current = el;\n  };\n\n  return children({\n    ...stateRef.current,\n    handleChange,\n    handleBlur,\n    ref,\n  });\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/lib/focus-first-error.d.ts

@@ -0,0 +1,4 @@
+export declare function focusFirstError(results: {
+    isValid: boolean;
+    ref: HTMLElement | null;
+}[], scrollOffset: number): void;

package/dist/esm/lib/focus-first-error.js

@@ -0,0 +1,18 @@
+function focusFirstError(results, scrollOffset) {
+    const firstInvalidField = results
+        .filter((field) => !field.isValid && field.ref)
+        .map((field) => field.ref)
+        .sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1)
+        .at(0);
+    if (!firstInvalidField) {
+        return;
+    }
+    firstInvalidField.focus();
+    const rect = firstInvalidField.getBoundingClientRect();
+    window.scrollTo({
+        top: rect.top + window.scrollY - scrollOffset,
+    });
+}
+
+export { focusFirstError };
+//# sourceMappingURL=focus-first-error.js.map

package/dist/esm/lib/focus-first-error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-first-error.js","sources":["../../../src/lib/focus-first-error.ts"],"sourcesContent":["export function focusFirstError(\n  results: {\n    isValid: boolean;\n    ref: HTMLElement | null;\n  }[],\n  scrollOffset: number,\n) {\n  const firstInvalidField = results\n    .filter((field) => !field.isValid && field.ref)\n    .map((field) => field.ref!)\n    .sort((a, b) =>\n      a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1,\n    )\n    .at(0);\n\n  if (!firstInvalidField) {\n    return;\n  }\n\n  firstInvalidField.focus();\n  const rect = firstInvalidField.getBoundingClientRect();\n  window.scrollTo({\n    top: rect.top + window.scrollY - scrollOffset,\n  });\n}\n"],"names":[],"mappings":"AAAM,SAAU,eAAe,CAC7B,OAGG,EACH,YAAoB,EAAA;IAEpB,MAAM,iBAAiB,GAAG;AACvB,SAAA,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG;SAC7C,GAAG,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,GAAI;SACzB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KACT,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,2BAA2B,GAAG,CAAC,GAAG,EAAE;SAEzE,EAAE,CAAC,CAAC,CAAC;IAER,IAAI,CAAC,iBAAiB,EAAE;QACtB;IACF;IAEA,iBAAiB,CAAC,KAAK,EAAE;AACzB,IAAA,MAAM,IAAI,GAAG,iBAAiB,CAAC,qBAAqB,EAAE;IACtD,MAAM,CAAC,QAAQ,CAAC;QACd,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,YAAY;AAC9C,KAAA,CAAC;AACJ;;;;"}

package/dist/esm/lib/{Form.d.ts → form.d.ts}

@@ -24,8 +24,4 @@ interface FormProps extends Omit<React.ComponentProps<"form">, "onSubmit"> {
 export declare function Form({ onSubmit, validationMode, debounceMs, ...props }: FormProps): React.JSX.Element;
 export declare const FormContext: React.Context<FormContextValue>;
 export declare function useFormContext(): FormContextValue;
-export declare function focusFirstError(results: {
-    isValid: boolean;
-    ref: HTMLElement | null;
-}[], scrollOffset: number): void;
 export {};

package/dist/esm/lib/{Form.js → form.js}

@@ -1,4 +1,5 @@
 import React, { useRef, useCallback } from 'react';
+import { focusFirstError } from './focus-first-error.js';
 
 /**
  * A form component that provides context for coordinating field validation.
@@ -50,21 +51,6 @@ const FormContext = React.createContext({
 function useFormContext() {
     return React.useContext(FormContext);
 }
-function focusFirstError(results, scrollOffset) {
-    const firstInvalidField = results
-        .filter((field) => !field.isValid && field.ref)
-        .map((field) => field.ref)
-        .sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1)
-        .at(0);
-    if (!firstInvalidField) {
-        return;
-    }
-    firstInvalidField.focus();
-    const rect = firstInvalidField.getBoundingClientRect();
-    window.scrollTo({
-        top: rect.top + window.scrollY - scrollOffset,
-    });
-}
 
-export { Form, FormContext, focusFirstError, useFormContext };
-//# sourceMappingURL=Form.js.map
+export { Form, FormContext, useFormContext };
+//# sourceMappingURL=form.js.map

package/dist/esm/lib/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sources":["../../../src/lib/form.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport { focusFirstError } from \"./focus-first-error\";\nimport {\n  FieldMap,\n  FormContextValue,\n  ValidateFormOptions,\n  ValidationMode,\n} from \"./types\";\n\n/** Props for the {@link Form} component. */\ninterface FormProps extends Omit<React.ComponentProps<\"form\">, \"onSubmit\"> {\n  /** Default validation mode applied to all fields in the form. Defaults to `\"touchedAndDirty\"`. */\n  validationMode?: ValidationMode;\n  /** Default debounce delay in milliseconds for async validators. Defaults to `500`. */\n  debounceMs?: number;\n  /**\n   * Submit handler called when the form is submitted.\n   * Receives the submit event and a `validateAllFields` function that triggers\n   * validation on all registered fields and returns whether the form is valid.\n   */\n  onSubmit?: (\n    e: React.SubmitEvent<HTMLFormElement>,\n    validateForm: () => Promise<boolean>,\n  ) => void;\n}\n\n/**\n * A form component that provides context for coordinating field validation.\n *\n * Wraps a native `<form>` element and prevents the default submit behavior.\n * On submit, the `onSubmit` callback is called with the submit event and a\n * `validateAllFields` function that can be used to trigger validation on all\n * registered {@link Field} components and focus the first invalid field.\n */\nexport function Form({\n  onSubmit,\n  validationMode,\n  debounceMs,\n  ...props\n}: FormProps) {\n  const fieldsRef = useRef<FieldMap>(new Map());\n\n  const registerField = useCallback(\n    (\n      id: string,\n      ref: HTMLElement | null,\n      validate: () => Promise<boolean>,\n      commitPendingValidation: () => void,\n    ) => {\n      fieldsRef.current.set(id, {\n        ref,\n        validate,\n        commitPendingValidation,\n      });\n    },\n    [],\n  );\n\n  const unregisterField = useCallback((id: string) => {\n    fieldsRef.current.delete(id);\n  }, []);\n\n  const validateForm = useCallback(\n    async (options: ValidateFormOptions = {}) => {\n      const {\n        focusFirstError: shouldFocusFirstError = true,\n        scrollOffset = 100,\n      } = options;\n\n      const fields = Array.from(fieldsRef.current.values());\n      const validationPromises = fields.map(async (field) => ({\n        isValid: await field.validate(),\n        ref: field.ref,\n      }));\n      const results = await Promise.all(validationPromises);\n      fields.forEach((field) => field.commitPendingValidation());\n      const hasErrors = results.some((result) => !result.isValid);\n\n      if (hasErrors && shouldFocusFirstError) {\n        focusFirstError(results, scrollOffset);\n      }\n      return !hasErrors;\n    },\n    [],\n  );\n\n  return (\n    <FormContext.Provider\n      value={{\n        registerField,\n        unregisterField,\n        validationMode,\n        debounceMs,\n      }}\n    >\n      <form onSubmit={(e) => onSubmit?.(e, validateForm)} {...props} />\n    </FormContext.Provider>\n  );\n}\n\nexport const FormContext = React.createContext<FormContextValue>({\n  registerField: () => {},\n  unregisterField: () => {},\n});\n\nexport function useFormContext() {\n  return React.useContext(FormContext);\n}\n"],"names":[],"mappings":";;;AA0BA;;;;;;;AAOG;AACG,SAAU,IAAI,CAAC,EACnB,QAAQ,EACR,cAAc,EACd,UAAU,EACV,GAAG,KAAK,EACE,EAAA;IACV,MAAM,SAAS,GAAG,MAAM,CAAW,IAAI,GAAG,EAAE,CAAC;AAE7C,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CACE,EAAU,EACV,GAAuB,EACvB,QAAgC,EAChC,uBAAmC,KACjC;AACF,QAAA,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,EAAE;YACxB,GAAG;YACH,QAAQ;YACR,uBAAuB;AACxB,SAAA,CAAC;IACJ,CAAC,EACD,EAAE,CACH;AAED,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,EAAU,KAAI;AACjD,QAAA,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,YAAY,GAAG,WAAW,CAC9B,OAAO,OAAA,GAA+B,EAAE,KAAI;AAC1C,QAAA,MAAM,EACJ,eAAe,EAAE,qBAAqB,GAAG,IAAI,EAC7C,YAAY,GAAG,GAAG,GACnB,GAAG,OAAO;AAEX,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;AACrD,QAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,KAAK,MAAM;AACtD,YAAA,OAAO,EAAE,MAAM,KAAK,CAAC,QAAQ,EAAE;YAC/B,GAAG,EAAE,KAAK,CAAC,GAAG;AACf,SAAA,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;AACrD,QAAA,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,uBAAuB,EAAE,CAAC;AAC1D,QAAA,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;AAE3D,QAAA,IAAI,SAAS,IAAI,qBAAqB,EAAE;AACtC,YAAA,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC;QACxC;QACA,OAAO,CAAC,SAAS;IACnB,CAAC,EACD,EAAE,CACH;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EACnB,KAAK,EAAE;YACL,aAAa;YACb,eAAe;YACf,cAAc;YACd,UAAU;AACX,SAAA,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,GAAG,CAAC,EAAE,YAAY,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI,CAC5C;AAE3B;AAEO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;AAC/D,IAAA,aAAa,EAAE,MAAK,EAAE,CAAC;AACvB,IAAA,eAAe,EAAE,MAAK,EAAE,CAAC;AAC1B,CAAA;SAEe,cAAc,GAAA;AAC5B,IAAA,OAAO,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;AACtC;;;;"}

package/dist/esm/lib/state-utils.d.ts

@@ -0,0 +1,20 @@
+import { FieldState, SyncValidator, ValidationMode, Validator } from "./types";
+/** Creates the initial state for a field with the provided value. */
+export declare function createFieldState<T>(initialValue: T): FieldState<T>;
+/**
+ * Validates the field with synchronous validators and returns the next {@link FieldState}.
+ *
+ * If `validationMode` blocks validation, the original state is returned unchanged.
+ * When validation runs, `isDirty` and `isTouched` are set to `true`, and evaluation
+ * stops at the first validator that returns a truthy error message.
+ */
+export declare function validate<T>(state: FieldState<T>, validators: Array<SyncValidator<T> | undefined> | SyncValidator<T> | undefined, validationMode?: ValidationMode | undefined): FieldState<T>;
+/**
+ * Validates the field with synchronous and/or asynchronous validators and returns the next {@link FieldState}.
+ *
+ * If `validationMode` blocks validation, the original state is returned unchanged.
+ * When validation runs, all validators are awaited in parallel and the first truthy
+ * error in validator-list order is used.
+ */
+export declare function validateAsync<T>(state: FieldState<T>, validators: Array<Validator<T> | undefined> | Validator<T> | undefined, validationMode?: ValidationMode | undefined): Promise<FieldState<T>>;
+export declare function shouldValidate<T>(state: FieldState<T>, validationMode: ValidationMode | undefined): boolean;

package/dist/esm/lib/state-utils.js

@@ -0,0 +1,90 @@
+/** Creates the initial state for a field with the provided value. */
+function createFieldState(initialValue) {
+    return {
+        value: initialValue,
+        errorMessage: undefined,
+        isTouched: false,
+        isDirty: false,
+        isValid: true,
+        isValidating: false,
+    };
+}
+/**
+ * Validates the field with synchronous validators and returns the next {@link FieldState}.
+ *
+ * If `validationMode` blocks validation, the original state is returned unchanged.
+ * When validation runs, `isDirty` and `isTouched` are set to `true`, and evaluation
+ * stops at the first validator that returns a truthy error message.
+ */
+function validate(state, validators, validationMode) {
+    if (!shouldValidate(state, validationMode)) {
+        return state;
+    }
+    const _validators = Array.isArray(validators) ? validators : [validators];
+    for (const validator of _validators) {
+        const errorMessage = validator?.(state.value);
+        if (errorMessage) {
+            return {
+                ...state,
+                errorMessage,
+                isDirty: true,
+                isTouched: true,
+                isValid: false,
+                isValidating: false,
+            };
+        }
+    }
+    return {
+        ...state,
+        errorMessage: undefined,
+        isDirty: true,
+        isTouched: true,
+        isValid: true,
+        isValidating: false,
+    };
+}
+/**
+ * Validates the field with synchronous and/or asynchronous validators and returns the next {@link FieldState}.
+ *
+ * If `validationMode` blocks validation, the original state is returned unchanged.
+ * When validation runs, all validators are awaited in parallel and the first truthy
+ * error in validator-list order is used.
+ */
+async function validateAsync(state, validators, validationMode) {
+    if (!shouldValidate(state, validationMode)) {
+        return state;
+    }
+    const _validators = Array.isArray(validators) ? validators : [validators];
+    const errorMessages = await Promise.all(_validators.map((validator) => validator?.(state.value)));
+    const errorMessage = errorMessages.find(Boolean);
+    if (errorMessage) {
+        return {
+            ...state,
+            errorMessage,
+            isDirty: true,
+            isTouched: true,
+            isValid: false,
+            isValidating: false,
+        };
+    }
+    return {
+        ...state,
+        errorMessage: undefined,
+        isDirty: true,
+        isTouched: true,
+        isValid: true,
+        isValidating: false,
+    };
+}
+function shouldValidate(state, validationMode) {
+    return (validationMode === undefined ||
+        (validationMode === "touched" && state.isTouched) ||
+        (validationMode === "dirty" && state.isDirty) ||
+        (validationMode === "touchedAndDirty" &&
+            state.isTouched &&
+            state.isDirty) ||
+        (validationMode === "touchedOrDirty" && (state.isTouched || state.isDirty)));
+}
+
+export { createFieldState, shouldValidate, validate, validateAsync };
+//# sourceMappingURL=state-utils.js.map

package/dist/esm/lib/state-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-utils.js","sources":["../../../src/lib/state-utils.ts"],"sourcesContent":["import { FieldState, SyncValidator, ValidationMode, Validator } from \"./types\";\n\n/** Creates the initial state for a field with the provided value. */\nexport function createFieldState<T>(initialValue: T): FieldState<T> {\n  return {\n    value: initialValue,\n    errorMessage: undefined,\n    isTouched: false,\n    isDirty: false,\n    isValid: true,\n    isValidating: false,\n  };\n}\n\n/**\n * Validates the field with synchronous validators and returns the next {@link FieldState}.\n *\n * If `validationMode` blocks validation, the original state is returned unchanged.\n * When validation runs, `isDirty` and `isTouched` are set to `true`, and evaluation\n * stops at the first validator that returns a truthy error message.\n */\nexport function validate<T>(\n  state: FieldState<T>,\n  validators:\n    | Array<SyncValidator<T> | undefined>\n    | SyncValidator<T>\n    | undefined,\n  validationMode?: ValidationMode | undefined,\n): FieldState<T> {\n  if (!shouldValidate(state, validationMode)) {\n    return state;\n  }\n\n  const _validators = Array.isArray(validators) ? validators : [validators];\n\n  for (const validator of _validators) {\n    const errorMessage = validator?.(state.value);\n    if (errorMessage) {\n      return {\n        ...state,\n        errorMessage,\n        isDirty: true,\n        isTouched: true,\n        isValid: false,\n        isValidating: false,\n      };\n    }\n  }\n\n  return {\n    ...state,\n    errorMessage: undefined,\n    isDirty: true,\n    isTouched: true,\n    isValid: true,\n    isValidating: false,\n  };\n}\n\n/**\n * Validates the field with synchronous and/or asynchronous validators and returns the next {@link FieldState}.\n *\n * If `validationMode` blocks validation, the original state is returned unchanged.\n * When validation runs, all validators are awaited in parallel and the first truthy\n * error in validator-list order is used.\n */\nexport async function validateAsync<T>(\n  state: FieldState<T>,\n  validators: Array<Validator<T> | undefined> | Validator<T> | undefined,\n  validationMode?: ValidationMode | undefined,\n): Promise<FieldState<T>> {\n  if (!shouldValidate(state, validationMode)) {\n    return state;\n  }\n\n  const _validators = Array.isArray(validators) ? validators : [validators];\n\n  const errorMessages = await Promise.all(\n    _validators.map((validator) => validator?.(state.value)),\n  );\n  const errorMessage = errorMessages.find(Boolean);\n\n  if (errorMessage) {\n    return {\n      ...state,\n      errorMessage,\n      isDirty: true,\n      isTouched: true,\n      isValid: false,\n      isValidating: false,\n    };\n  }\n\n  return {\n    ...state,\n    errorMessage: undefined,\n    isDirty: true,\n    isTouched: true,\n    isValid: true,\n    isValidating: false,\n  };\n}\n\nexport function shouldValidate<T>(\n  state: FieldState<T>,\n  validationMode: ValidationMode | undefined,\n) {\n  return (\n    validationMode === undefined ||\n    (validationMode === \"touched\" && state.isTouched) ||\n    (validationMode === \"dirty\" && state.isDirty) ||\n    (validationMode === \"touchedAndDirty\" &&\n      state.isTouched &&\n      state.isDirty) ||\n    (validationMode === \"touchedOrDirty\" && (state.isTouched || state.isDirty))\n  );\n}\n"],"names":[],"mappings":"AAEA;AACM,SAAU,gBAAgB,CAAI,YAAe,EAAA;IACjD,OAAO;AACL,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,YAAY,EAAE,KAAK;KACpB;AACH;AAEA;;;;;;AAMG;SACa,QAAQ,CACtB,KAAoB,EACpB,UAGa,EACb,cAA2C,EAAA;IAE3C,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE;AAC1C,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,UAAU,GAAG,CAAC,UAAU,CAAC;AAEzE,IAAA,KAAK,MAAM,SAAS,IAAI,WAAW,EAAE;QACnC,MAAM,YAAY,GAAG,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;QAC7C,IAAI,YAAY,EAAE;YAChB,OAAO;AACL,gBAAA,GAAG,KAAK;gBACR,YAAY;AACZ,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,YAAY,EAAE,KAAK;aACpB;QACH;IACF;IAEA,OAAO;AACL,QAAA,GAAG,KAAK;AACR,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,YAAY,EAAE,KAAK;KACpB;AACH;AAEA;;;;;;AAMG;AACI,eAAe,aAAa,CACjC,KAAoB,EACpB,UAAsE,EACtE,cAA2C,EAAA;IAE3C,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE;AAC1C,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,UAAU,GAAG,CAAC,UAAU,CAAC;IAEzE,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,GAAG,CACrC,WAAW,CAAC,GAAG,CAAC,CAAC,SAAS,KAAK,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CACzD;IACD,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;IAEhD,IAAI,YAAY,EAAE;QAChB,OAAO;AACL,YAAA,GAAG,KAAK;YACR,YAAY;AACZ,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,YAAY,EAAE,KAAK;SACpB;IACH;IAEA,OAAO;AACL,QAAA,GAAG,KAAK;AACR,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,YAAY,EAAE,KAAK;KACpB;AACH;AAEM,SAAU,cAAc,CAC5B,KAAoB,EACpB,cAA0C,EAAA;IAE1C,QACE,cAAc,KAAK,SAAS;AAC5B,SAAC,cAAc,KAAK,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC;AACjD,SAAC,cAAc,KAAK,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC;SAC5C,cAAc,KAAK,iBAAiB;AACnC,YAAA,KAAK,CAAC,SAAS;YACf,KAAK,CAAC,OAAO,CAAC;AAChB,SAAC,cAAc,KAAK,gBAAgB,KAAK,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;AAE/E;;;;"}

package/dist/esm/lib/test/test-utils.d.ts

@@ -1,13 +1,12 @@
 import userEvent from "@testing-library/user-event";
-import React from "react";
-import { ValidationMode } from "../types";
+import { Validation, ValidationMode } from "../types";
 interface InputProps {
-    validateOnChange?: (value: string) => React.ReactNode;
-    validateOnChangeAsync?: (value: string) => Promise<React.ReactNode>;
-    validateOnBlur?: (value: string) => React.ReactNode;
-    validateOnBlurAsync?: (value: string) => Promise<React.ReactNode>;
+    validation?: Validation<string>;
     debounceMs?: number;
     validationMode?: ValidationMode;
+    onInput?: (value: string) => void;
+    onBlur?: () => void;
+    initialValue?: string;
 }
 export declare const setupTest: (props?: InputProps) => {
     user: import("@testing-library/user-event").UserEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fransek/form",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "private": false,
   "author": "Frans Ekman <fransedvinekman@gmail.com>",
@@ -59,6 +59,7 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "react": "19.2.3",
+    "react-dom": "19.2.3",
     "rollup": "^4.56.0",
     "semantic-release": "^25.0.2",
     "typescript": "^5.9.3",

package/dist/cjs/lib/Field.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.js","sources":["../../../src/lib/Field.tsx"],"sourcesContent":["import { useEffect, useId, useRef } from \"react\";\nimport { validate, validateAsync } from \"./fieldState\";\nimport { useFormContext } from \"./Form\";\nimport { FieldProps, FieldState } from \"./types\";\n\n/**\n * A headless form field component that manages validation state using a render prop pattern.\n *\n * Connects to a parent {@link Form} for submit validation coordination.\n * Passes current field state and event handlers to the `children` render function.\n */\nexport function Field<T>(props: FieldProps<T>) {\n  const {\n    registerField,\n    unregisterField,\n    validationMode: formValidationMode,\n    debounceMs: formDebounceMs,\n  } = useFormContext();\n\n  const {\n    children,\n    state,\n    onChange,\n    onInput,\n    onBlur,\n    validation,\n    debounceMs = formDebounceMs || 500,\n    validationMode = formValidationMode || \"touchedAndDirty\",\n  } = props;\n\n  const stateRef = useRef(state);\n  stateRef.current = state;\n  const validationTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null,\n  );\n  const validationIdRef = useRef(0);\n  const isValidatingOnBlurRef = useRef(false);\n  const isValidatingOnChangeRef = useRef(false);\n  const pendingValidationRef = useRef<FieldState<T> | null>(null);\n  const fieldRef = useRef<HTMLElement | null>(null);\n  const id = useId();\n\n  useEffect(() => {\n    async function performValidation() {\n      if (\n        !validation?.onSubmit &&\n        !validation?.onSubmitAsync &&\n        !stateRef.current.isValidating &&\n        stateRef.current.isTouched &&\n        stateRef.current.isDirty &&\n        document.activeElement !== fieldRef.current\n      ) {\n        return stateRef.current.isValid;\n      }\n      validationIdRef.current++;\n      pendingValidationRef.current = validate(\n        stateRef.current,\n        validation?.onChange,\n        validation?.onBlur,\n        validation?.onSubmit,\n      );\n      if (pendingValidationRef.current.isValid) {\n        pendingValidationRef.current = await validateAsync(\n          stateRef.current,\n          validation?.onChangeAsync,\n          validation?.onBlurAsync,\n          validation?.onSubmitAsync,\n        );\n      }\n      return pendingValidationRef.current.isValid;\n    }\n\n    function commitPendingValidation() {\n      if (pendingValidationRef.current) {\n        onChange(pendingValidationRef.current);\n        pendingValidationRef.current = null;\n      }\n    }\n\n    registerField(\n      id,\n      fieldRef.current,\n      performValidation,\n      commitPendingValidation,\n    );\n\n    return () => {\n      unregisterField(id);\n    };\n  }, [id, registerField, validation, onChange, unregisterField]);\n\n  useEffect(() => {\n    return () => {\n      if (validationTimeoutRef.current) {\n        clearTimeout(validationTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  function handleChange(value: T) {\n    onInput?.(value);\n\n    if (validationTimeoutRef.current) {\n      clearTimeout(validationTimeoutRef.current);\n    }\n\n    const currentValidation = ++validationIdRef.current;\n\n    const shouldValidate =\n      validationMode === \"dirty\" ||\n      validationMode === \"touchedOrDirty\" ||\n      stateRef.current.isTouched;\n\n    if (shouldValidate) {\n      const errorMessage = validation?.onChange?.(value);\n      const willValidateAsync = Boolean(\n        validation?.onChangeAsync && !errorMessage,\n      );\n\n      onChange({\n        ...stateRef.current,\n        value,\n        errorMessage,\n        isDirty: true,\n        isValid: !errorMessage,\n        isValidating: willValidateAsync,\n      });\n\n      if (willValidateAsync) {\n        isValidatingOnChangeRef.current = true;\n        validationTimeoutRef.current = setTimeout(async () => {\n          const asyncErrorMessage = await validation?.onChangeAsync?.(value);\n\n          isValidatingOnChangeRef.current = false;\n          if (currentValidation === validationIdRef.current) {\n            onChange({\n              ...stateRef.current,\n              errorMessage: asyncErrorMessage,\n              isValid: !asyncErrorMessage,\n              isValidating: isValidatingOnBlurRef.current,\n            });\n          }\n        }, debounceMs);\n      }\n    } else {\n      onChange({\n        ...stateRef.current,\n        value,\n        isDirty: true,\n        isValidating: false,\n      });\n    }\n  }\n\n  async function handleBlur() {\n    onBlur?.();\n\n    const shouldValidateOnBlur =\n      validationMode === \"touched\" ||\n      validationMode === \"touchedOrDirty\" ||\n      stateRef.current.isDirty;\n\n    if (!shouldValidateOnBlur) {\n      onChange({\n        ...stateRef.current,\n        isTouched: true,\n      });\n      return;\n    }\n\n    const currentValidation = validationIdRef.current;\n\n    let errorMessage =\n      stateRef.current.errorMessage ||\n      validation?.onBlur?.(stateRef.current.value);\n\n    const shouldValidateOnChange =\n      !stateRef.current.isTouched &&\n      (validationMode === \"touched\" ||\n        (validationMode === \"touchedOrDirty\" && !stateRef.current.isDirty) ||\n        (validationMode === \"touchedAndDirty\" && stateRef.current.isDirty));\n\n    if (!errorMessage && shouldValidateOnChange && validation?.onChange) {\n      errorMessage = validation.onChange(stateRef.current.value);\n    }\n\n    if (\n      !errorMessage &&\n      (validation?.onBlurAsync || validation?.onChangeAsync)\n    ) {\n      isValidatingOnBlurRef.current = true;\n      onChange({\n        ...stateRef.current,\n        isValidating: true,\n        isTouched: true,\n      });\n\n      const asyncValidations: Promise<React.ReactNode>[] = [];\n\n      if (validation?.onBlurAsync) {\n        asyncValidations.push(validation.onBlurAsync(stateRef.current.value));\n      }\n\n      if (shouldValidateOnChange && validation?.onChangeAsync) {\n        asyncValidations.push(validation.onChangeAsync(stateRef.current.value));\n      }\n\n      const [blurError, changeError] = await Promise.all(asyncValidations);\n      errorMessage = blurError || changeError;\n    }\n\n    isValidatingOnBlurRef.current = false;\n\n    if (errorMessage && validationTimeoutRef.current) {\n      clearTimeout(validationTimeoutRef.current);\n    }\n\n    if (currentValidation !== validationIdRef.current) {\n      onChange({\n        ...stateRef.current,\n        isTouched: true,\n      });\n      return;\n    }\n\n    onChange({\n      ...stateRef.current,\n      errorMessage,\n      isTouched: true,\n      isValid: !errorMessage,\n      isValidating: isValidatingOnChangeRef.current,\n    });\n  }\n\n  const ref = (el: HTMLElement | null) => {\n    fieldRef.current = el;\n  };\n\n  return children({\n    ...stateRef.current,\n    handleChange,\n    handleBlur,\n    ref,\n  });\n}\n"],"names":["useFormContext","useRef","useId","useEffect","validate","validateAsync"],"mappings":"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"}

package/dist/cjs/lib/Form.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form.js","sources":["../../../src/lib/Form.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport {\n  FieldMap,\n  FormContextValue,\n  ValidateFormOptions,\n  ValidationMode,\n} from \"./types\";\n\n/** Props for the {@link Form} component. */\ninterface FormProps extends Omit<React.ComponentProps<\"form\">, \"onSubmit\"> {\n  /** Default validation mode applied to all fields in the form. Defaults to `\"touchedAndDirty\"`. */\n  validationMode?: ValidationMode;\n  /** Default debounce delay in milliseconds for async validators. Defaults to `500`. */\n  debounceMs?: number;\n  /**\n   * Submit handler called when the form is submitted.\n   * Receives the submit event and a `validateAllFields` function that triggers\n   * validation on all registered fields and returns whether the form is valid.\n   */\n  onSubmit?: (\n    e: React.SubmitEvent<HTMLFormElement>,\n    validateForm: () => Promise<boolean>,\n  ) => void;\n}\n\n/**\n * A form component that provides context for coordinating field validation.\n *\n * Wraps a native `<form>` element and prevents the default submit behavior.\n * On submit, the `onSubmit` callback is called with the submit event and a\n * `validateAllFields` function that can be used to trigger validation on all\n * registered {@link Field} components and focus the first invalid field.\n */\nexport function Form({\n  onSubmit,\n  validationMode,\n  debounceMs,\n  ...props\n}: FormProps) {\n  const fieldsRef = useRef<FieldMap>(new Map());\n\n  const registerField = useCallback(\n    (\n      id: string,\n      ref: HTMLElement | null,\n      validate: () => Promise<boolean>,\n      commitPendingValidation: () => void,\n    ) => {\n      fieldsRef.current.set(id, {\n        ref,\n        validate,\n        commitPendingValidation,\n      });\n    },\n    [],\n  );\n\n  const unregisterField = useCallback((id: string) => {\n    fieldsRef.current.delete(id);\n  }, []);\n\n  const validateForm = useCallback(\n    async (options: ValidateFormOptions = {}) => {\n      const {\n        focusFirstError: shouldFocusFirstError = true,\n        scrollOffset = 100,\n      } = options;\n\n      const fields = Array.from(fieldsRef.current.values());\n      const validationPromises = fields.map(async (field) => ({\n        isValid: await field.validate(),\n        ref: field.ref,\n      }));\n      const results = await Promise.all(validationPromises);\n      fields.forEach((field) => field.commitPendingValidation());\n      const hasErrors = results.some((result) => !result.isValid);\n\n      if (hasErrors && shouldFocusFirstError) {\n        focusFirstError(results, scrollOffset);\n      }\n      return !hasErrors;\n    },\n    [],\n  );\n\n  return (\n    <FormContext.Provider\n      value={{\n        registerField,\n        unregisterField,\n        validationMode,\n        debounceMs,\n      }}\n    >\n      <form onSubmit={(e) => onSubmit?.(e, validateForm)} {...props} />\n    </FormContext.Provider>\n  );\n}\n\nexport const FormContext = React.createContext<FormContextValue>({\n  registerField: () => {},\n  unregisterField: () => {},\n});\n\nexport function useFormContext() {\n  return React.useContext(FormContext);\n}\n\nexport function focusFirstError(\n  results: {\n    isValid: boolean;\n    ref: HTMLElement | null;\n  }[],\n  scrollOffset: number,\n) {\n  const firstInvalidField = results\n    .filter((field) => !field.isValid && field.ref)\n    .map((field) => field.ref!)\n    .sort((a, b) =>\n      a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1,\n    )\n    .at(0);\n\n  if (!firstInvalidField) {\n    return;\n  }\n\n  firstInvalidField.focus();\n  const rect = firstInvalidField.getBoundingClientRect();\n  window.scrollTo({\n    top: rect.top + window.scrollY - scrollOffset,\n  });\n}\n"],"names":["useRef","useCallback"],"mappings":"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"}

package/dist/cjs/lib/fieldState.d.ts

@@ -1,23 +0,0 @@
-import { FieldState, SyncValidator, Validator } from "./types";
-/** Creates the initial state for a field with the given initial value. */
-export declare function createFieldState<T>(initialValue: T): FieldState<T>;
-/**
- * Runs the provided synchronous validators against the current field value and returns an updated {@link FieldState}.
- * Sets `isDirty` and `isTouched` to `true`. Stops at the first failing validator.
- */
-export declare function validate<T>(state: FieldState<T>, ...validators: Array<SyncValidator<T> | undefined>): FieldState<T>;
-/**
- * Runs the provided synchronous and/or asynchronous validators against the current field value and returns an updated {@link FieldState}.
- * Sets `isDirty` and `isTouched` to `true`. All validators run in parallel; the first truthy error message is used.
- */
-export declare function validateAsync<T>(state: FieldState<T>, ...validators: Array<Validator<T> | undefined>): Promise<FieldState<T>>;
-/**
- * Runs the provided synchronous validators only if the field is dirty (i.e. the value has been changed).
- * Returns the state unchanged if the field is not dirty.
- */
-export declare function validateIfDirty<T>(state: FieldState<T>, ...validators: Array<SyncValidator<T> | undefined>): FieldState<T>;
-/**
- * Runs the provided synchronous and/or asynchronous validators only if the field is dirty (i.e. the value has been changed).
- * Returns the state unchanged if the field is not dirty.
- */
-export declare function validateIfDirtyAsync<T>(state: FieldState<T>, ...validators: Array<Validator<T> | undefined>): Promise<FieldState<T>>;

package/dist/cjs/lib/fieldState.js

@@ -1,93 +0,0 @@
-'use strict';
-
-/** Creates the initial state for a field with the given initial value. */
-function createFieldState(initialValue) {
-    return {
-        value: initialValue,
-        errorMessage: undefined,
-        isTouched: false,
-        isDirty: false,
-        isValid: true,
-        isValidating: false,
-    };
-}
-/**
- * Runs the provided synchronous validators against the current field value and returns an updated {@link FieldState}.
- * Sets `isDirty` and `isTouched` to `true`. Stops at the first failing validator.
- */
-function validate(state, ...validators) {
-    for (const validator of validators) {
-        const errorMessage = validator?.(state.value);
-        if (errorMessage) {
-            return {
-                ...state,
-                errorMessage,
-                isDirty: true,
-                isTouched: true,
-                isValid: false,
-                isValidating: false,
-            };
-        }
-    }
-    return {
-        ...state,
-        errorMessage: undefined,
-        isDirty: true,
-        isTouched: true,
-        isValid: true,
-        isValidating: false,
-    };
-}
-/**
- * Runs the provided synchronous and/or asynchronous validators against the current field value and returns an updated {@link FieldState}.
- * Sets `isDirty` and `isTouched` to `true`. All validators run in parallel; the first truthy error message is used.
- */
-async function validateAsync(state, ...validators) {
-    const errorMessages = await Promise.all(validators.map((validator) => validator?.(state.value)));
-    const errorMessage = errorMessages.find(Boolean);
-    if (errorMessage) {
-        return {
-            ...state,
-            errorMessage,
-            isDirty: true,
-            isTouched: true,
-            isValid: false,
-            isValidating: false,
-        };
-    }
-    return {
-        ...state,
-        errorMessage: undefined,
-        isDirty: true,
-        isTouched: true,
-        isValid: true,
-        isValidating: false,
-    };
-}
-/**
- * Runs the provided synchronous validators only if the field is dirty (i.e. the value has been changed).
- * Returns the state unchanged if the field is not dirty.
- */
-function validateIfDirty(state, ...validators) {
-    if (!state.isDirty) {
-        return state;
-    }
-    return validate(state, ...validators);
-}
-/**
- * Runs the provided synchronous and/or asynchronous validators only if the field is dirty (i.e. the value has been changed).
- * Returns the state unchanged if the field is not dirty.
- */
-async function validateIfDirtyAsync(state, ...validators) {
-    if (!state.isDirty) {
-        return state;
-    }
-    return validateAsync(state, ...validators);
-}
-
-exports.createFieldState = createFieldState;
-exports.validate = validate;
-exports.validateAsync = validateAsync;
-exports.validateIfDirty = validateIfDirty;
-exports.validateIfDirtyAsync = validateIfDirtyAsync;
-//# sourceMappingURL=fieldState.js.map

package/dist/cjs/lib/fieldState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fieldState.js","sources":["../../../src/lib/fieldState.ts"],"sourcesContent":["import { FieldState, SyncValidator, Validator } from \"./types\";\n\n/** Creates the initial state for a field with the given initial value. */\nexport function createFieldState<T>(initialValue: T): FieldState<T> {\n  return {\n    value: initialValue,\n    errorMessage: undefined,\n    isTouched: false,\n    isDirty: false,\n    isValid: true,\n    isValidating: false,\n  };\n}\n\n/**\n * Runs the provided synchronous validators against the current field value and returns an updated {@link FieldState}.\n * Sets `isDirty` and `isTouched` to `true`. Stops at the first failing validator.\n */\nexport function validate<T>(\n  state: FieldState<T>,\n  ...validators: Array<SyncValidator<T> | undefined>\n): FieldState<T> {\n  for (const validator of validators) {\n    const errorMessage = validator?.(state.value);\n    if (errorMessage) {\n      return {\n        ...state,\n        errorMessage,\n        isDirty: true,\n        isTouched: true,\n        isValid: false,\n        isValidating: false,\n      };\n    }\n  }\n\n  return {\n    ...state,\n    errorMessage: undefined,\n    isDirty: true,\n    isTouched: true,\n    isValid: true,\n    isValidating: false,\n  };\n}\n\n/**\n * Runs the provided synchronous and/or asynchronous validators against the current field value and returns an updated {@link FieldState}.\n * Sets `isDirty` and `isTouched` to `true`. All validators run in parallel; the first truthy error message is used.\n */\nexport async function validateAsync<T>(\n  state: FieldState<T>,\n  ...validators: Array<Validator<T> | undefined>\n): Promise<FieldState<T>> {\n  const errorMessages = await Promise.all(\n    validators.map((validator) => validator?.(state.value)),\n  );\n  const errorMessage = errorMessages.find(Boolean);\n\n  if (errorMessage) {\n    return {\n      ...state,\n      errorMessage,\n      isDirty: true,\n      isTouched: true,\n      isValid: false,\n      isValidating: false,\n    };\n  }\n\n  return {\n    ...state,\n    errorMessage: undefined,\n    isDirty: true,\n    isTouched: true,\n    isValid: true,\n    isValidating: false,\n  };\n}\n\n/**\n * Runs the provided synchronous validators only if the field is dirty (i.e. the value has been changed).\n * Returns the state unchanged if the field is not dirty.\n */\nexport function validateIfDirty<T>(\n  state: FieldState<T>,\n  ...validators: Array<SyncValidator<T> | undefined>\n): FieldState<T> {\n  if (!state.isDirty) {\n    return state;\n  }\n\n  return validate(state, ...validators);\n}\n\n/**\n * Runs the provided synchronous and/or asynchronous validators only if the field is dirty (i.e. the value has been changed).\n * Returns the state unchanged if the field is not dirty.\n */\nexport async function validateIfDirtyAsync<T>(\n  state: FieldState<T>,\n  ...validators: Array<Validator<T> | undefined>\n): Promise<FieldState<T>> {\n  if (!state.isDirty) {\n    return state;\n  }\n\n  return validateAsync(state, ...validators);\n}\n"],"names":[],"mappings":";;AAEA;AACM,SAAU,gBAAgB,CAAI,YAAe,EAAA;IACjD,OAAO;AACL,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,YAAY,EAAE,KAAK;KACpB;AACH;AAEA;;;AAGG;SACa,QAAQ,CACtB,KAAoB,EACpB,GAAG,UAA+C,EAAA;AAElD,IAAA,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE;QAClC,MAAM,YAAY,GAAG,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;QAC7C,IAAI,YAAY,EAAE;YAChB,OAAO;AACL,gBAAA,GAAG,KAAK;gBACR,YAAY;AACZ,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,YAAY,EAAE,KAAK;aACpB;QACH;IACF;IAEA,OAAO;AACL,QAAA,GAAG,KAAK;AACR,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,YAAY,EAAE,KAAK;KACpB;AACH;AAEA;;;AAGG;AACI,eAAe,aAAa,CACjC,KAAoB,EACpB,GAAG,UAA2C,EAAA;IAE9C,MAAM,aAAa,GAAG,MAAM,OAAO,CAAC,GAAG,CACrC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,KAAK,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CACxD;IACD,MAAM,YAAY,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;IAEhD,IAAI,YAAY,EAAE;QAChB,OAAO;AACL,YAAA,GAAG,KAAK;YACR,YAAY;AACZ,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,YAAY,EAAE,KAAK;SACpB;IACH;IAEA,OAAO;AACL,QAAA,GAAG,KAAK;AACR,QAAA,YAAY,EAAE,SAAS;AACvB,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,YAAY,EAAE,KAAK;KACpB;AACH;AAEA;;;AAGG;SACa,eAAe,CAC7B,KAAoB,EACpB,GAAG,UAA+C,EAAA;AAElD,IAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;AAClB,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,OAAO,QAAQ,CAAC,KAAK,EAAE,GAAG,UAAU,CAAC;AACvC;AAEA;;;AAGG;AACI,eAAe,oBAAoB,CACxC,KAAoB,EACpB,GAAG,UAA2C,EAAA;AAE9C,IAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;AAClB,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,OAAO,aAAa,CAAC,KAAK,EAAE,GAAG,UAAU,CAAC;AAC5C;;;;;;;;"}