remix-validated-form 2.1.0 → 3.1.0

package/.turbo/turbo-build.log

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

package/.turbo/turbo-test.log

@@ -1,36 +1,11 @@
 $ jest src
- PASS  src/validation/validation.test.ts
-  Validation
-    Adapter for yup
-      validate
-        ✓ should return the data when valid (2 ms)
-        ✓ should return field errors when invalid (1 ms)
-        ✓ should unflatten data when validating
-        ✓ should accept FormData directly and return errors (1 ms)
-        ✓ should accept FormData directly and return valid data (1 ms)
-      validateField
-        ✓ should not return an error if field is valid
-        ✓ should not return an error if a nested field is valid (1 ms)
-        ✓ should return an error if field is invalid (2 ms)
-        ✓ should return an error if a nested field is invalid
-    Adapter for zod
-      validate
-        ✓ should return the data when valid (1 ms)
-        ✓ should return field errors when invalid
-        ✓ should unflatten data when validating (1 ms)
-        ✓ should accept FormData directly and return errors
-        ✓ should accept FormData directly and return valid data
-      validateField
-        ✓ should not return an error if field is valid (1 ms)
-        ✓ should not return an error if a nested field is valid
-        ✓ should return an error if field is invalid
-        ✓ should return an error if a nested field is invalid
-  withZod
-    ✓ returns coherent errors for complex schemas (1 ms)
-    ✓ returns errors for fields that are unions
-
-Test Suites: 1 passed, 1 total
-Tests:       20 passed, 20 total
-Snapshots:   0 total
-Time:        1.1 s, estimated 2 s
-Ran all test suites matching /src/i.
+No tests found, exiting with code 1
+Run with `--passWithNoTests` to exit with code 0
+In /Users/aaronpettengill/dev/remix-validated-form/packages/remix-validated-form
+  68 files checked.
+  testMatch: **/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x) - 2 matches
+  testPathIgnorePatterns: /node_modules/ - 68 matches
+  testRegex:  - 0 matches
+Pattern: src - 0 matches
+info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
+error Command failed with exit code 1.

package/README.md

@@ -18,22 +18,34 @@ To run `sample-app`:
 
 ```
 git clone https://github.com/airjp73/remix-validated-form
-cd remix-validated-form
-npm i
-cd sample-app
-npm i
-cd ..
-npm run sample-app
+cd ./remix-validated-form
+yarn install
+yarn sample-app
 ```
 
 # Getting started
 
 ## Install
 
+### Base package
+
 ```bash
 npm install remix-validated-form
 ```
 
+### Validation library adapter
+
+There are official adapters available for `zod` and `yup`.
+If you're using a different library,
+see the [Validation library support](#validation-library-support) section below.
+
+- @remix-validated-form/with-zod
+- @remix-validated-form/with-yup
+
+```bash
+npm install @remix-validated-form/with-zod
+```
+
 ## Create an input component
 
 In order to display field errors or do field-by-field validation,
@@ -167,10 +179,10 @@ export default function MyForm() {
 
 # Validation Library Support
 
-This library currently includes an out-of-the-box adapter for `yup` and `zod`,
+There are official adapters available for `zod` and `yup` ,
 but you can easily support whatever library you want by creating your own adapter.
 
-And if you create an adapter for a library, feel free to make a PR on this library to add official support 😊
+And if you create an adapter for a library, feel free to make a PR on this repository 😊
 
 ## Creating an adapter
 

package/browser/ValidatedForm.d.ts

@@ -38,8 +38,13 @@ export declare type FormProps<DataType> = {
      * and don't redirect in-between submissions.
      */
     resetAfterSubmit?: boolean;
+    /**
+     * Normally, the first invalid input will be focused when the validation fails on form submit.
+     * Set this to `false` to disable this behavior.
+     */
+    disableFocusOnError?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -3,6 +3,7 @@ import { Form as RemixForm, useActionData, useFormAction, useTransition, } from
 import { useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
 import { FormContext } from "./internal/formContext";
+import { useMultiValueMap, } from "./internal/SingleTypeMultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
 function useFieldErrorsFromBackend(fetcher, subaction) {
@@ -64,10 +65,32 @@ function useDefaultValues(fieldErrors, defaultValues) {
     const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
     return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
 }
+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) => {
+                handler();
+            });
+            break;
+        }
+        // We don't filter these out ahead of time because
+        // they could have a custom focus handler
+        if (input.type === "hidden") {
+            continue;
+        }
+        input.focus();
+        break;
+    }
+};
 /**
  * The primary form component of `remix-validated-form`.
  */
-export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
+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);
@@ -80,11 +103,13 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
+    const customFocusHandlers = useMultiValueMap();
     const contextValue = useMemo(() => ({
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
         isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        isValid: Object.keys(fieldErrors).length === 0,
         clearError: (fieldName) => {
             setFieldErrors((prev) => omit(prev, fieldName));
         },
@@ -98,6 +123,12 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 }));
             }
         },
+        registerReceiveFocus: (fieldName, handler) => {
+            customFocusHandlers().add(fieldName, handler);
+            return () => {
+                customFocusHandlers().remove(fieldName, handler);
+            };
+        },
     }), [
         fieldErrors,
         action,
@@ -105,6 +136,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         isSubmitting,
         setFieldErrors,
         validator,
+        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) => {
@@ -112,6 +144,9 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             if (result.error) {
                 event.preventDefault();
                 setFieldErrors(result.error);
+                if (!disableFocusOnError) {
+                    focusFirstInvalidInput(result.error, customFocusHandlers(), formRef.current);
+                }
             }
             else {
                 onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
@@ -121,5 +156,5 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             if (event.defaultPrevented)
                 return;
             setFieldErrors({});
-        }, children: _jsxs(FormContext.Provider, { value: contextValue, children: [_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0), children] }, void 0) }, void 0));
+        }, children: _jsxs(FormContext.Provider, { value: contextValue, children: [subaction && (_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), children] }, void 0) }, void 0));
 }

package/browser/hooks.d.ts

@@ -19,7 +19,14 @@ export declare type FieldProps = {
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export declare const useField: (name: string) => FieldProps;
+export declare const useField: (name: string, options?: {
+    /**
+     * Allows you to configure a custom function that will be called
+     * when the input needs to receive focus due to a validation error.
+     * This is useful for custom components that use a hidden input.
+     */
+    handleReceiveFocus?: (() => void) | undefined;
+} | undefined) => FieldProps;
 /**
  * Provides access to the entire form context.
  * This is not usually necessary, but can be useful for advanced use cases.

package/browser/hooks.js

@@ -1,12 +1,17 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useMemo } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export const useField = (name) => {
-    const { fieldErrors, clearError, validateField, defaultValues } = useContext(FormContext);
+export const useField = (name, options) => {
+    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, } = useContext(FormContext);
+    const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
+    useEffect(() => {
+        if (handleReceiveFocus)
+            return registerReceiveFocus(name, handleReceiveFocus);
+    }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = useMemo(() => ({
         error: fieldErrors[name],
         clearError: () => {

package/browser/index.d.ts

@@ -2,7 +2,5 @@ export * from "./hooks";
 export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
-export * from "./validation/withYup";
-export * from "./validation/withZod";
 export * from "./validation/createValidator";
 export type { FormContextValue } from "./internal/formContext";

package/browser/index.js

@@ -2,6 +2,4 @@ export * from "./hooks";
 export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
-export * from "./validation/withYup";
-export * from "./validation/withZod";
 export * from "./validation/createValidator";

package/browser/internal/MultiValueMap.js

@@ -0,0 +1 @@
+"use strict";

package/browser/internal/SingleTypeMultiValueMap.d.ts

@@ -0,0 +1,8 @@
+export declare class MultiValueMap<Key, Value> {
+    private dict;
+    add: (key: Key, value: Value) => void;
+    remove: (key: Key, value: Value) => void;
+    getAll: (key: Key) => Value[];
+    has: (key: Key) => boolean;
+}
+export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/browser/internal/SingleTypeMultiValueMap.js

@@ -0,0 +1,40 @@
+import { useRef } from "react";
+export class MultiValueMap {
+    constructor() {
+        this.dict = new Map();
+        this.add = (key, value) => {
+            var _a;
+            this.dict.set(key, [...((_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : []), value]);
+            if (this.dict.has(key)) {
+                this.dict.get(key).push(value);
+            }
+            else {
+                this.dict.set(key, [value]);
+            }
+        };
+        this.remove = (key, value) => {
+            if (!this.dict.has(key))
+                return;
+            const array = this.dict.get(key);
+            const index = array.indexOf(value);
+            if (index !== -1)
+                array.splice(index, 1);
+            if (array.length === 0)
+                this.dict.delete(key);
+        };
+        this.getAll = (key) => {
+            var _a;
+            return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
+        };
+        this.has = (key) => this.dict.has(key);
+    }
+}
+export const useMultiValueMap = () => {
+    const ref = useRef(null);
+    return () => {
+        if (ref.current)
+            return ref.current;
+        ref.current = new MultiValueMap();
+        return ref.current;
+    };
+};

package/browser/internal/formContext.d.ts

@@ -21,11 +21,21 @@ export declare type FormContextValue = {
      * Whether or not the form is submitting.
      */
     isSubmitting: boolean;
+    /**
+     * Whether or not the form is valid.
+     * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
+     */
+    isValid: boolean;
     /**
      * The default values of the form.
      */
     defaultValues?: {
         [fieldName: string]: any;
     };
+    /**
+     * Register a custom focus handler to be used when
+     * the field needs to receive focus due to a validation error.
+     */
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
 };
 export declare const FormContext: import("react").Context<FormContextValue>;

package/browser/internal/formContext.js

@@ -4,4 +4,6 @@ export const FormContext = createContext({
     clearError: () => { },
     validateField: () => { },
     isSubmitting: false,
+    isValid: true,
+    registerReceiveFocus: () => () => { },
 });

package/browser/server.d.ts

@@ -4,4 +4,4 @@ import { FieldErrors } from "./validation/types";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export declare const validationError: (errors: FieldErrors) => Response;
+export declare const validationError: (errors: FieldErrors, submittedData?: unknown) => Response;

package/browser/server.js

@@ -4,4 +4,14 @@ import { json } from "@remix-run/server-runtime";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export const validationError = (errors) => json({ fieldErrors: errors }, { status: 422 });
+export const validationError = (errors, submittedData) => {
+    if (submittedData) {
+        return json({
+            fieldErrors: {
+                ...errors,
+                _submittedData: submittedData,
+            },
+        }, { status: 422 });
+    }
+    return json({ fieldErrors: errors }, { status: 422 });
+};

package/browser/validation/types.d.ts

@@ -28,3 +28,4 @@ export declare type Validator<DataType> = {
     validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
     validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
 };
+export declare type ValidatorData<T extends Validator<any>> = T extends Validator<infer U> ? U : never;

package/build/ValidatedForm.d.ts

@@ -38,8 +38,13 @@ export declare type FormProps<DataType> = {
      * and don't redirect in-between submissions.
      */
     resetAfterSubmit?: boolean;
+    /**
+     * Normally, the first invalid input will be focused when the validation fails on form submit.
+     * Set this to `false` to disable this behavior.
+     */
+    disableFocusOnError?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -9,6 +9,7 @@ const react_1 = require("@remix-run/react");
 const react_2 = require("react");
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const formContext_1 = require("./internal/formContext");
+const SingleTypeMultiValueMap_1 = require("./internal/SingleTypeMultiValueMap");
 const submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
 function useFieldErrorsFromBackend(fetcher, subaction) {
@@ -70,10 +71,32 @@ function useDefaultValues(fieldErrors, defaultValues) {
     const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
     return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
 }
+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) => {
+                handler();
+            });
+            break;
+        }
+        // We don't filter these out ahead of time because
+        // they could have a custom focus handler
+        if (input.type === "hidden") {
+            continue;
+        }
+        input.focus();
+        break;
+    }
+};
 /**
  * The primary form component of `remix-validated-form`.
  */
-function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
+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);
@@ -86,11 +109,13 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
+    const customFocusHandlers = (0, SingleTypeMultiValueMap_1.useMultiValueMap)();
     const contextValue = (0, react_2.useMemo)(() => ({
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
         isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        isValid: Object.keys(fieldErrors).length === 0,
         clearError: (fieldName) => {
             setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
         },
@@ -104,6 +129,12 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                 }));
             }
         },
+        registerReceiveFocus: (fieldName, handler) => {
+            customFocusHandlers().add(fieldName, handler);
+            return () => {
+                customFocusHandlers().remove(fieldName, handler);
+            };
+        },
     }), [
         fieldErrors,
         action,
@@ -111,6 +142,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         isSubmitting,
         setFieldErrors,
         validator,
+        customFocusHandlers,
     ]);
     const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : react_1.Form;
     return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, onSubmit: (event) => {
@@ -118,6 +150,9 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             if (result.error) {
                 event.preventDefault();
                 setFieldErrors(result.error);
+                if (!disableFocusOnError) {
+                    focusFirstInvalidInput(result.error, customFocusHandlers(), formRef.current);
+                }
             }
             else {
                 onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
@@ -127,6 +162,6 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             if (event.defaultPrevented)
                 return;
             setFieldErrors({});
-        }, children: (0, jsx_runtime_1.jsxs)(formContext_1.FormContext.Provider, { value: contextValue, children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", value: subaction, name: "subaction" }, void 0), children] }, void 0) }, void 0));
+        }, children: (0, jsx_runtime_1.jsxs)(formContext_1.FormContext.Provider, { value: contextValue, children: [subaction && ((0, jsx_runtime_1.jsx)("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), children] }, void 0) }, void 0));
 }
 exports.ValidatedForm = ValidatedForm;

package/build/hooks.d.ts

@@ -19,7 +19,14 @@ export declare type FieldProps = {
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export declare const useField: (name: string) => FieldProps;
+export declare const useField: (name: string, options?: {
+    /**
+     * Allows you to configure a custom function that will be called
+     * when the input needs to receive focus due to a validation error.
+     * This is useful for custom components that use a hidden input.
+     */
+    handleReceiveFocus?: (() => void) | undefined;
+} | undefined) => FieldProps;
 /**
  * Provides access to the entire form context.
  * This is not usually necessary, but can be useful for advanced use cases.

package/build/hooks.js

@@ -11,8 +11,13 @@ const formContext_1 = require("./internal/formContext");
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-const useField = (name) => {
-    const { fieldErrors, clearError, validateField, defaultValues } = (0, react_1.useContext)(formContext_1.FormContext);
+const useField = (name, options) => {
+    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, } = (0, react_1.useContext)(formContext_1.FormContext);
+    const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
+    (0, react_1.useEffect)(() => {
+        if (handleReceiveFocus)
+            return registerReceiveFocus(name, handleReceiveFocus);
+    }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = (0, react_1.useMemo)(() => ({
         error: fieldErrors[name],
         clearError: () => {

package/build/index.d.ts

@@ -2,7 +2,5 @@ export * from "./hooks";
 export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
-export * from "./validation/withYup";
-export * from "./validation/withZod";
 export * from "./validation/createValidator";
 export type { FormContextValue } from "./internal/formContext";

package/build/index.js

@@ -14,6 +14,4 @@ __exportStar(require("./hooks"), exports);
 __exportStar(require("./server"), exports);
 __exportStar(require("./ValidatedForm"), exports);
 __exportStar(require("./validation/types"), exports);
-__exportStar(require("./validation/withYup"), exports);
-__exportStar(require("./validation/withZod"), exports);
 __exportStar(require("./validation/createValidator"), exports);

package/build/internal/SingleTypeMultiValueMap.d.ts

@@ -0,0 +1,8 @@
+export declare class MultiValueMap<Key, Value> {
+    private dict;
+    add: (key: Key, value: Value) => void;
+    remove: (key: Key, value: Value) => void;
+    getAll: (key: Key) => Value[];
+    has: (key: Key) => boolean;
+}
+export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/build/internal/SingleTypeMultiValueMap.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMultiValueMap = exports.MultiValueMap = void 0;
+const react_1 = require("react");
+class MultiValueMap {
+    constructor() {
+        this.dict = new Map();
+        this.add = (key, value) => {
+            var _a;
+            this.dict.set(key, [...((_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : []), value]);
+            if (this.dict.has(key)) {
+                this.dict.get(key).push(value);
+            }
+            else {
+                this.dict.set(key, [value]);
+            }
+        };
+        this.remove = (key, value) => {
+            if (!this.dict.has(key))
+                return;
+            const array = this.dict.get(key);
+            const index = array.indexOf(value);
+            if (index !== -1)
+                array.splice(index, 1);
+            if (array.length === 0)
+                this.dict.delete(key);
+        };
+        this.getAll = (key) => {
+            var _a;
+            return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
+        };
+        this.has = (key) => this.dict.has(key);
+    }
+}
+exports.MultiValueMap = MultiValueMap;
+const useMultiValueMap = () => {
+    const ref = (0, react_1.useRef)(null);
+    return () => {
+        if (ref.current)
+            return ref.current;
+        ref.current = new MultiValueMap();
+        return ref.current;
+    };
+};
+exports.useMultiValueMap = useMultiValueMap;

package/build/internal/formContext.d.ts

@@ -21,11 +21,21 @@ export declare type FormContextValue = {
      * Whether or not the form is submitting.
      */
     isSubmitting: boolean;
+    /**
+     * Whether or not the form is valid.
+     * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
+     */
+    isValid: boolean;
     /**
      * The default values of the form.
      */
     defaultValues?: {
         [fieldName: string]: any;
     };
+    /**
+     * Register a custom focus handler to be used when
+     * the field needs to receive focus due to a validation error.
+     */
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
 };
 export declare const FormContext: import("react").Context<FormContextValue>;

package/build/internal/formContext.js

@@ -7,4 +7,6 @@ exports.FormContext = (0, react_1.createContext)({
     clearError: () => { },
     validateField: () => { },
     isSubmitting: false,
+    isValid: true,
+    registerReceiveFocus: () => () => { },
 });

package/build/server.d.ts

@@ -4,4 +4,4 @@ import { FieldErrors } from "./validation/types";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export declare const validationError: (errors: FieldErrors) => Response;
+export declare const validationError: (errors: FieldErrors, submittedData?: unknown) => Response;