remix-validated-form 3.3.1 → 4.0.0-beta.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 $ npm run build:browser && npm run build:main
 
-> remix-validated-form@3.3.0 build:browser
+> remix-validated-form@3.4.2 build:browser
 > tsc --module ESNext --outDir ./browser
 
 
-> remix-validated-form@3.3.0 build:main
+> remix-validated-form@3.4.2 build:main
 > tsc --module CommonJS --outDir ./build
 

package/README.md

@@ -50,6 +50,8 @@ see the [Validation library support](#validation-library-support) section below.
 npm install @remix-validated-form/with-zod
 ```
 
+If you're using zod, you might also find `zod-form-data` helpful.
+
 ## Create an input component
 
 In order to display field errors or do field-by-field validation,
@@ -118,7 +120,7 @@ const validator = withYup(
 );
 
 export const action: ActionFunction = async ({ request }) => {
-  const fieldValues = validator.validate(await request.formData());
+  const fieldValues = await validator.validate(await request.formData());
   if (fieldValues.error) return validationError(fieldValues.error);
   const { firstName, lastName, email } = fieldValues.data;
 

package/browser/ValidatedForm.d.ts

@@ -10,7 +10,7 @@ export declare type FormProps<DataType> = {
      * A submit callback that gets called when the form is submitted
      * after all validations have been run.
      */
-    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => void;
+    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => Promise<void>;
     /**
      * Allows you to provide a `fetcher` from remix's `useFetcher` hook.
      * The form will use the fetcher for loading states, action data, etc

package/browser/ValidatedForm.js

@@ -1,25 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Form as RemixForm, useActionData, useFormAction, useTransition, } from "@remix-run/react";
-import { useEffect, useMemo, useRef, useState, } from "react";
+import { Form as RemixForm, useActionData, useFormAction, useSubmit, useTransition, } from "@remix-run/react";
+import uniq from "lodash/uniq";
+import React, { useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
 import { FormContext } from "./internal/formContext";
 import { useMultiValueMap } from "./internal/MultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
-function useFieldErrorsFromBackend(fetcher, subaction) {
-    var _a, _b;
+function useErrorResponseForThisForm(fetcher, subaction) {
+    var _a;
     const actionData = useActionData();
-    if (fetcher)
-        return (_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors;
-    if (!actionData)
+    if (fetcher) {
+        if ((_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors)
+            return fetcher.data;
         return null;
-    if (actionData.fieldErrors) {
-        const submittedData = (_b = actionData.fieldErrors) === null || _b === void 0 ? void 0 : _b._submittedData;
-        const subactionsMatch = subaction
-            ? subaction === (submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction)
-            : !(submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction);
-        return subactionsMatch ? actionData.fieldErrors : null;
     }
+    if (!(actionData === null || actionData === void 0 ? void 0 : actionData.fieldErrors))
+        return null;
+    if ((!subaction && !actionData.subaction) ||
+        actionData.subaction === subaction)
+        return actionData;
     return null;
 }
 function useFieldErrors(fieldErrorsFromBackend) {
@@ -61,30 +61,50 @@ const getDataFromForm = (el) => new FormData(el);
  * It will only ever be a problem if the form includes a `<button type="reset" />`
  * and only if JS is disabled.
  */
-function useDefaultValues(fieldErrors, defaultValues) {
-    const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
-    return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
+function useDefaultValues(repopulateFieldsFromBackend, defaultValues) {
+    return repopulateFieldsFromBackend !== null && repopulateFieldsFromBackend !== void 0 ? repopulateFieldsFromBackend : defaultValues;
+}
+function nonNull(value) {
+    return value !== null;
 }
 const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) => {
-    const invalidInputSelector = Object.keys(fieldErrors)
-        .map((fieldName) => `input[name="${fieldName}"]`)
-        .join(",");
-    const invalidInputs = formElement.querySelectorAll(invalidInputSelector);
-    for (const element of invalidInputs) {
-        const input = element;
-        if (customFocusHandlers.has(input.name)) {
-            customFocusHandlers.getAll(input.name).forEach((handler) => {
+    var _a;
+    const namesInOrder = [...formElement.elements]
+        .map((el) => {
+        const input = el instanceof RadioNodeList ? el[0] : el;
+        if (input instanceof HTMLInputElement)
+            return input.name;
+        return null;
+    })
+        .filter(nonNull)
+        .filter((name) => name in fieldErrors);
+    const uniqueNamesInOrder = uniq(namesInOrder);
+    for (const fieldName of uniqueNamesInOrder) {
+        if (customFocusHandlers.has(fieldName)) {
+            customFocusHandlers.getAll(fieldName).forEach((handler) => {
                 handler();
             });
             break;
         }
-        // We don't filter these out ahead of time because
-        // they could have a custom focus handler
-        if (input.type === "hidden") {
+        const elem = formElement.elements.namedItem(fieldName);
+        if (!elem)
             continue;
+        if (elem instanceof RadioNodeList) {
+            const selectedRadio = (_a = [...elem]
+                .filter((item) => item instanceof HTMLInputElement)
+                .find((item) => item.value === elem.value)) !== null && _a !== void 0 ? _a : elem[0];
+            if (selectedRadio && selectedRadio instanceof HTMLInputElement) {
+                selectedRadio.focus();
+                break;
+            }
+        }
+        if (elem instanceof HTMLInputElement) {
+            if (elem.type === "hidden") {
+                continue;
+            }
+            elem.focus();
+            break;
         }
-        input.focus();
-        break;
     }
 };
 /**
@@ -92,16 +112,17 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
  */
 export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }) {
     var _a;
-    const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
-    const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
+    const backendError = useErrorResponseForThisForm(fetcher, subaction);
+    const [fieldErrors, setFieldErrors] = useFieldErrors(backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors);
     const isSubmitting = useIsSubmitting(action, subaction, fetcher);
-    const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
+    const defaultsToUse = useDefaultValues(backendError === null || backendError === void 0 ? void 0 : backendError.repopulateFields, defaultValues);
     const [touchedFields, setTouchedFields] = useState({});
     const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
+    const submit = useSubmit();
     const formRef = useRef(null);
     useSubmitComplete(isSubmitting, () => {
         var _a;
-        if (!fieldErrorsFromBackend && resetAfterSubmit) {
+        if (!backendError && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
@@ -120,9 +141,9 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         clearError: (fieldName) => {
             setFieldErrors((prev) => omit(prev, fieldName));
         },
-        validateField: (fieldName) => {
+        validateField: async (fieldName) => {
             invariant(formRef.current, "Cannot find reference to form");
-            const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            const { error } = await validator.validateField(getDataFromForm(formRef.current), fieldName);
             // By checking and returning `prev` here, we can avoid a re-render
             // if the validation state is the same.
             if (error) {
@@ -134,6 +155,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                         [fieldName]: error,
                     };
                 });
+                return error;
             }
             else {
                 setFieldErrors((prev) => {
@@ -141,6 +163,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                         return prev;
                     return omit(prev, fieldName);
                 });
+                return null;
             }
         },
         registerReceiveFocus: (fieldName, handler) => {
@@ -162,18 +185,43 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         customFocusHandlers,
     ]);
     const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : RemixForm;
-    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, onSubmit: (event) => {
+    let clickedButtonRef = React.useRef();
+    useEffect(() => {
+        let form = formRef.current;
+        if (!form)
+            return;
+        function handleClick(event) {
+            if (!(event.target instanceof HTMLElement))
+                return;
+            let submitButton = event.target.closest("button,input[type=submit]");
+            if (submitButton &&
+                submitButton.form === form &&
+                submitButton.type === "submit") {
+                clickedButtonRef.current = submitButton;
+            }
+        }
+        window.addEventListener("click", handleClick);
+        return () => {
+            window.removeEventListener("click", handleClick);
+        };
+    }, []);
+    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, onSubmit: async (e) => {
+            e.preventDefault();
             setHasBeenSubmitted(true);
-            const result = validator.validate(getDataFromForm(event.currentTarget));
+            const result = await validator.validate(getDataFromForm(e.currentTarget));
             if (result.error) {
-                event.preventDefault();
-                setFieldErrors(result.error);
+                setFieldErrors(result.error.fieldErrors);
                 if (!disableFocusOnError) {
-                    focusFirstInvalidInput(result.error, customFocusHandlers(), formRef.current);
+                    focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
                 }
             }
             else {
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
+                onSubmit && onSubmit(result.data, e);
+                if (fetcher)
+                    fetcher.submit(clickedButtonRef.current || e.currentTarget);
+                else
+                    submit(clickedButtonRef.current || e.currentTarget);
+                clickedButtonRef.current = null;
             }
         }, onReset: (event) => {
             onReset === null || onReset === void 0 ? void 0 : onReset(event);

package/browser/components.d.ts

@@ -0,0 +1,10 @@
+import { HTMLProps } from "react";
+declare type ValidatedInputProps = HTMLProps<HTMLInputElement> & {
+    name: string;
+};
+export declare const ValidatedInput: ({ name, ...rest }: ValidatedInputProps) => JSX.Element;
+declare type ErrorMessageProps = {
+    name: string;
+};
+export declare const ErrorMessage: ({ name }: ErrorMessageProps) => string | undefined;
+export {};

package/browser/components.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useField } from ".";
+export const ValidatedInput = ({ name, ...rest }) => {
+    const { getInputProps } = useField(name);
+    return _jsx("input", { ...getInputProps(rest) }, void 0);
+};
+export const ErrorMessage = ({ name }) => {
+    const { error } = useField(name);
+    return error;
+};

package/browser/hooks.d.ts

@@ -1,4 +1,5 @@
 import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputProps";
+import { ValidationState } from "./types";
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -12,6 +13,14 @@ export declare type FieldProps = {
      * Validates the field.
      */
     validate: () => void;
+    /**
+     * The validation state of the field.
+     * - idle: the field has not been validated yet.
+     * - validating: the field is currently being validated.
+     * - valid: the field is valid.
+     * - invalid: the field is invalid.
+     */
+    validationState: ValidationState;
     /**
      * The default value of the field, if there is one.
      */
@@ -46,7 +55,6 @@ export declare const useField: (name: string, options?: {
 } | undefined) => FieldProps;
 /**
  * Provides access to the entire form context.
- * This is not usually necessary, but can be useful for advanced use cases.
  */
 export declare const useFormContext: () => import("./internal/formContext").FormContextValue;
 /**
@@ -55,3 +63,7 @@ export declare const useFormContext: () => import("./internal/formContext").Form
  * is aware of what form it's in and when _that_ form is being submitted.
  */
 export declare const useIsSubmitting: () => boolean;
+/**
+ * Returns whether or not the current form is valid.
+ */
+export declare const useIsValid: () => boolean;

package/browser/hooks.js

@@ -1,31 +1,52 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useEffect, useMemo } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { FormContext } from "./internal/formContext";
 import { createGetInputProps, } from "./internal/getInputProps";
+const useInternalFormContext = (hookName) => {
+    const context = useContext(FormContext);
+    if (!context)
+        throw new Error(`${hookName} must be used within a ValidatedForm component`);
+    return context;
+};
 /**
  * Provides the data and helpers necessary to set up a field.
  */
 export const useField = (name, options) => {
-    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = useContext(FormContext);
+    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = useInternalFormContext("useField");
     const isTouched = !!touchedFields[name];
     const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
+    const [isValidating, setValidating] = useState(false);
     useEffect(() => {
         if (handleReceiveFocus)
             return registerReceiveFocus(name, handleReceiveFocus);
     }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = useMemo(() => {
+        const error = fieldErrors[name];
+        const getValidationState = () => {
+            if (isValidating)
+                return "validating";
+            if (error)
+                return "invalid";
+            if (!isTouched && !hasBeenSubmitted)
+                return "idle";
+            return "valid";
+        };
         const helpers = {
-            error: fieldErrors[name],
+            error,
             clearError: () => {
                 clearError(name);
             },
-            validate: () => validateField(name),
+            validate: () => {
+                setValidating(true);
+                validateField(name).then((error) => setValidating(false));
+            },
             defaultValue: defaultValues
                 ? get(defaultValues, toPath(name), undefined)
                 : undefined,
             touched: isTouched,
             setTouched: (touched) => setFieldTouched(name, touched),
+            validationState: getValidationState(),
         };
         const getInputProps = createGetInputProps({
             ...helpers,
@@ -44,6 +65,7 @@ export const useField = (name, options) => {
         isTouched,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
+        isValidating,
         clearError,
         validateField,
         setFieldTouched,
@@ -52,12 +74,15 @@ export const useField = (name, options) => {
 };
 /**
  * Provides access to the entire form context.
- * This is not usually necessary, but can be useful for advanced use cases.
  */
-export const useFormContext = () => useContext(FormContext);
+export const useFormContext = () => useInternalFormContext("useFormContext");
 /**
  * Returns whether or not the parent form is currently being submitted.
  * This is different from remix's `useTransition().submission` in that it
  * is aware of what form it's in and when _that_ form is being submitted.
  */
-export const useIsSubmitting = () => useFormContext().isSubmitting;
+export const useIsSubmitting = () => useInternalFormContext("useIsSubmitting").isSubmitting;
+/**
+ * Returns whether or not the current form is valid.
+ */
+export const useIsValid = () => useInternalFormContext("useIsValid").isValid;

package/browser/internal/flatten.d.ts

@@ -1,4 +1 @@
-import { GenericObject } from "..";
 export declare const objectFromPathEntries: (entries: [string, any][]) => {};
-/** Flatten an object so there are no nested objects or arrays */
-export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/browser/internal/flatten.js

@@ -1,40 +1,7 @@
-// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
-import assign from "lodash/assign";
-import isArray from "lodash/isArray";
-import isObject from "lodash/isObject";
-import keys from "lodash/keys";
-import mapKeys from "lodash/mapKeys";
 import set from "lodash/set";
-import transform from "lodash/transform";
 import { MultiValueMap } from "./MultiValueMap";
 export const objectFromPathEntries = (entries) => {
     const map = new MultiValueMap();
     entries.forEach(([key, value]) => map.add(key, value));
     return [...map.entries()].reduce((acc, [key, value]) => set(acc, key, value.length === 1 ? value[0] : value), {});
 };
-/** Flatten an object so there are no nested objects or arrays */
-export function flatten(obj, preserveEmpty = false) {
-    return transform(obj, function (result, value, key) {
-        if (isObject(value)) {
-            let flatMap = mapKeys(flatten(value, preserveEmpty), function (_mvalue, mkey) {
-                if (isArray(value)) {
-                    let index = mkey.indexOf(".");
-                    if (-1 !== index) {
-                        return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
-                    }
-                    return `${key}[${mkey}]`;
-                }
-                return `${key}.${mkey}`;
-            });
-            assign(result, flatMap);
-            // Preverve Empty arrays and objects
-            if (preserveEmpty && keys(flatMap).length === 0) {
-                result[key] = value;
-            }
-        }
-        else {
-            result[key] = value;
-        }
-        return result;
-    }, {});
-}

package/browser/internal/formContext.d.ts

@@ -12,7 +12,7 @@ export declare type FormContextValue = {
     /**
      * Validate the specified field.
      */
-    validateField: (fieldName: string) => void;
+    validateField: (fieldName: string) => Promise<string | null>;
     /**
      * The `action` prop of the form.
      */
@@ -29,7 +29,6 @@ export declare type FormContextValue = {
     hasBeenSubmitted: boolean;
     /**
      * Whether or not the form is valid.
-     * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
      */
     isValid: boolean;
     /**
@@ -52,4 +51,4 @@ export declare type FormContextValue = {
      */
     setFieldTouched: (fieldName: string, touched: boolean) => void;
 };
-export declare const FormContext: import("react").Context<FormContextValue>;
+export declare const FormContext: import("react").Context<FormContextValue | null>;

package/browser/internal/formContext.js

@@ -1,12 +1,2 @@
 import { createContext } from "react";
-export const FormContext = createContext({
-    fieldErrors: {},
-    clearError: () => { },
-    validateField: () => { },
-    isSubmitting: false,
-    hasBeenSubmitted: false,
-    isValid: true,
-    registerReceiveFocus: () => () => { },
-    touchedFields: {},
-    setFieldTouched: () => { },
-});
+export const FormContext = createContext(null);

package/browser/internal/getInputProps.d.ts

@@ -14,10 +14,16 @@ export declare type CreateGetInputPropsOptions = {
     validationBehavior?: Partial<ValidationBehaviorOptions>;
     name: string;
 };
-declare type OmitHandledProps = {
-    name?: never;
-    defaultValue?: never;
+declare type HandledProps = "name" | "defaultValue" | "defaultChecked";
+declare type Callbacks = "onChange" | "onBlur";
+declare type MinimalInputProps = {
+    onChange?: (...args: any[]) => void;
+    onBlur?: (...args: any[]) => void;
+    defaultValue?: any;
+    defaultChecked?: boolean;
+    name?: string;
+    type?: string;
 };
-export declare type GetInputProps = <T extends Record<string, any>>(props?: T & OmitHandledProps) => T;
+export declare type GetInputProps = <T extends MinimalInputProps>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
 export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
 export {};

package/browser/internal/getInputProps.js

@@ -3,18 +3,28 @@ const defaultValidationBehavior = {
     whenTouched: "onChange",
     whenSubmitted: "onChange",
 };
+const getCheckboxDefaultChecked = (value, defaultValue) => {
+    if (Array.isArray(defaultValue))
+        return defaultValue.includes(value);
+    if (typeof defaultValue === "boolean")
+        return defaultValue;
+    if (typeof defaultValue === "string")
+        return defaultValue === value;
+    return undefined;
+};
 export const createGetInputProps = ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }) => {
     const validationBehaviors = {
         ...defaultValidationBehavior,
         ...validationBehavior,
     };
     return (props = {}) => {
+        var _a, _b;
         const behavior = hasBeenSubmitted
             ? validationBehaviors.whenSubmitted
             : touched
                 ? validationBehaviors.whenTouched
                 : validationBehaviors.initial;
-        const result = {
+        const inputProps = {
             ...props,
             onChange: (...args) => {
                 var _a;
@@ -31,9 +41,19 @@ export const createGetInputProps = ({ clearError, validate, defaultValue, touche
                 setTouched(true);
                 return (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
             },
-            defaultValue,
             name,
         };
-        return result;
+        if (inputProps.type === "checkbox") {
+            const value = (_a = props.value) !== null && _a !== void 0 ? _a : "on";
+            inputProps.defaultChecked = getCheckboxDefaultChecked(value, defaultValue);
+        }
+        else if (inputProps.type === "radio") {
+            const value = (_b = props.value) !== null && _b !== void 0 ? _b : "on";
+            inputProps.defaultChecked = defaultValue === value;
+        }
+        else {
+            inputProps.defaultValue = defaultValue;
+        }
+        return inputProps;
     };
 };

package/browser/server.d.ts

@@ -1,7 +1,16 @@
-import { FieldErrors } from "./validation/types";
+import { ValidatorError } from "./validation/types";
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
- * The `ValidatedForm` on the frontend will automatically display the errors
- * if this is returned from the action.
+ * When you return this from your action, `ValidatedForm` on the frontend will automatically
+ * display the errors on the correct fields on the correct form.
+ *
+ * _Recommended_: You can also provide a second argument to `validationError`
+ * to specify how to repopulate the form when JS is disabled.
+ *
+ * @example
+ * ```ts
+ * const result = validator.validate(await request.formData());
+ * if (result.error) return validationError(result.error, result.submittedData);
+ * ```
  */
-export declare const validationError: (errors: FieldErrors, submittedData?: unknown) => Response;
+export declare function validationError(error: ValidatorError, repopulateFields?: unknown): Response;

package/browser/server.js

@@ -1,17 +1,22 @@
 import { json } from "@remix-run/server-runtime";
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
- * The `ValidatedForm` on the frontend will automatically display the errors
- * if this is returned from the action.
+ * When you return this from your action, `ValidatedForm` on the frontend will automatically
+ * display the errors on the correct fields on the correct form.
+ *
+ * _Recommended_: You can also provide a second argument to `validationError`
+ * to specify how to repopulate the form when JS is disabled.
+ *
+ * @example
+ * ```ts
+ * const result = validator.validate(await request.formData());
+ * if (result.error) return validationError(result.error, result.submittedData);
+ * ```
  */
-export const validationError = (errors, submittedData) => {
-    if (submittedData) {
-        return json({
-            fieldErrors: {
-                ...errors,
-                _submittedData: submittedData,
-            },
-        }, { status: 422 });
-    }
-    return json({ fieldErrors: errors }, { status: 422 });
-};
+export function validationError(error, repopulateFields) {
+    return json({
+        fieldErrors: error.fieldErrors,
+        subaction: error.subaction,
+        repopulateFields,
+    }, { status: 422 });
+}

package/browser/types.d.ts

@@ -0,0 +1 @@
+export declare type ValidationState = "idle" | "validating" | "valid" | "invalid";

package/browser/types.js

@@ -0,0 +1 @@
+export {};

package/browser/validation/createValidator.d.ts

@@ -1,7 +1,7 @@
-import { Validator } from "..";
+import { CreateValidatorArg, Validator } from "..";
 /**
  * Used to create a validator for a form.
  * It provides built-in handling for unflattening nested objects and
  * extracting the values from FormData.
  */
-export declare function createValidator<T>(validator: Validator<T>): Validator<T>;
+export declare function createValidator<T>(validator: CreateValidatorArg<T>): Validator<T>;