remix-validated-form 1.1.1-beta.0 → 1.1.1-beta.1

package/.eslintcache

@@ -1 +1 @@
-[{"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts":"1","/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts":"2","/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts":"3","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx":"4","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation-fetcher.tsx":"5","/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts":"6","/Users/aaronpettengill/dev/remix-validated-form/src/validation/validation.test.ts":"7","/Users/aaronpettengill/dev/remix-validated-form/src/validation/withZod.ts":"8","/Users/aaronpettengill/dev/remix-validated-form/src/index.ts":"9","/Users/aaronpettengill/dev/remix-validated-form/src/ValidatedForm.tsx":"10"},{"size":207,"mtime":1637876506168,"results":"11","hashOfConfig":"12"},{"size":438,"mtime":1637877226360,"results":"13","hashOfConfig":"12"},{"size":1085,"mtime":1637877476573,"results":"14","hashOfConfig":"12"},{"size":1293,"mtime":1637876566355,"results":"15","hashOfConfig":"12"},{"size":1330,"mtime":1637902697212,"results":"16","hashOfConfig":"12"},{"size":2220,"mtime":1637902736281,"results":"17","hashOfConfig":"12"},{"size":3526,"mtime":1638155421909,"results":"18","hashOfConfig":"12"},{"size":1168,"mtime":1638155747107,"results":"19","hashOfConfig":"12"},{"size":196,"mtime":1638159719317,"results":"20","hashOfConfig":"12"},{"size":3478,"mtime":1638498151067,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"bt07le",{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"32","messages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts",["42"],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation-fetcher.tsx",["43"],"/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/validation.test.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/withZod.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/index.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/ValidatedForm.tsx",[],{"ruleId":"44","severity":1,"message":"45","line":2,"column":23,"nodeType":"46","messageId":"47","endLine":2,"endColumn":39},{"ruleId":"44","severity":1,"message":"48","line":1,"column":26,"nodeType":"46","messageId":"47","endLine":1,"endColumn":39},"@typescript-eslint/no-unused-vars","'ValidationResult' is defined but never used.","Identifier","unusedVar","'useActionData' is defined but never used."]
+[{"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts":"1","/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts":"2","/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts":"3","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx":"4","/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation-fetcher.tsx":"5","/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts":"6","/Users/aaronpettengill/dev/remix-validated-form/src/validation/validation.test.ts":"7","/Users/aaronpettengill/dev/remix-validated-form/src/validation/withZod.ts":"8","/Users/aaronpettengill/dev/remix-validated-form/src/index.ts":"9","/Users/aaronpettengill/dev/remix-validated-form/src/ValidatedForm.tsx":"10","/Users/aaronpettengill/dev/remix-validated-form/src/test-data/testFormData.ts":"11","/Users/aaronpettengill/dev/remix-validated-form/src/validation/createValidator.ts":"12","/Users/aaronpettengill/dev/remix-validated-form/sample-app/app/routes/subjects/$id.edit.tsx":"13","/Users/aaronpettengill/dev/remix-validated-form/sample-app/app/routes/subjects/new.tsx":"14","/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation.ts":"15","/Users/aaronpettengill/dev/remix-validated-form/src/internal/flatten.ts":"16","/Users/aaronpettengill/dev/remix-validated-form/src/hooks.ts":"17","/Users/aaronpettengill/dev/remix-validated-form/src/internal/formContext.ts":"18"},{"size":397,"mtime":1639369089430,"results":"19","hashOfConfig":"20"},{"size":703,"mtime":1639369496819,"results":"21","hashOfConfig":"20"},{"size":1247,"mtime":1639369392705,"results":"22","hashOfConfig":"20"},{"size":1491,"mtime":1639368189315,"results":"23","hashOfConfig":"20"},{"size":1287,"mtime":1639367237366,"results":"24","hashOfConfig":"20"},{"size":2220,"mtime":1637902736281,"results":"25","hashOfConfig":"26"},{"size":8822,"mtime":1639367825741,"results":"27","hashOfConfig":"20"},{"size":1712,"mtime":1639369411474,"results":"28","hashOfConfig":"20"},{"size":242,"mtime":1639368587278,"results":"29","hashOfConfig":"20"},{"size":4105,"mtime":1639369052724,"results":"30","hashOfConfig":"20"},{"size":1639,"mtime":1639366476728,"results":"31","hashOfConfig":"20"},{"size":975,"mtime":1639369381723,"results":"32","hashOfConfig":"20"},{"size":2458,"mtime":1639367225263,"results":"33","hashOfConfig":"20"},{"size":1199,"mtime":1639367241997,"results":"34","hashOfConfig":"20"},{"size":3541,"mtime":1639368136413,"results":"35","hashOfConfig":"20"},{"size":1638,"mtime":1639368636134,"results":"36","hashOfConfig":"20"},{"size":1605,"mtime":1639369330598,"results":"37","hashOfConfig":"20"},{"size":818,"mtime":1639369884523,"results":"38","hashOfConfig":"20"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1p84lfm",{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"bt07le",{"filePath":"51","messages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"53","messages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"55","messages":"56","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"57","messages":"58","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"59","messages":"60","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"61","messages":"62","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"63","messages":"64","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"65","messages":"66","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"67","messages":"68","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"69","messages":"70","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"71","messages":"72","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"73","messages":"74","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/aaronpettengill/dev/remix-validated-form/src/server.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/types.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/withYup.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/app/routes/validation-fetcher.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation-with-fetchers.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/validation.test.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/withZod.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/index.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/ValidatedForm.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/src/test-data/testFormData.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/validation/createValidator.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/sample-app/app/routes/subjects/$id.edit.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/sample-app/app/routes/subjects/new.tsx",[],"/Users/aaronpettengill/dev/remix-validated-form/test-app/cypress/integration/validation.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/internal/flatten.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/hooks.ts",[],"/Users/aaronpettengill/dev/remix-validated-form/src/internal/formContext.ts",[]]

package/README.md

@@ -15,6 +15,7 @@ A form library built for [remix](https://remix.run) to make validation easy.
 https://user-images.githubusercontent.com/2811287/145734901-700a5085-a10b-4d89-88e1-5de9142b1e85.mov
 
 To run `sample-app`:
+
 ```
 git clone https://github.com/airjp73/remix-validated-form
 cd remix-validated-form
@@ -101,9 +102,7 @@ const validator = withYup(
 );
 
 export const action: ActionFunction = async ({ request }) => {
-  const fieldValues = validator.validate(
-    Object.fromEntries(await request.formData())
-  );
+  const fieldValues = validator.validate(await request.formData());
   if (fieldValues.error) return validationError(fieldValues.error);
   const { firstName, lastName, email } = fieldValues.data;
 
@@ -141,7 +140,7 @@ export default function MyForm() {
 
 ## Nested objects and arrays
 
-You can use nested objects and arrays by using a period (`.`) or brackets (`[]`) for the field names. 
+You can use nested objects and arrays by using a period (`.`) or brackets (`[]`) for the field names.
 
 ```tsx
 export default function MyForm() {
@@ -198,7 +197,10 @@ type Validator<DataType> = {
 In order to make an adapter for your validation library of choice,
 you can create a function that accepts a schema from the validation library and turns it into a validator.
 
-Note the use of `createValidator`. It takes care of unflatten the data for nested objects and arrays since the form doesn't know anything about object and arrays and this should be handled by the adapter. For more on this you can check the implementations for `withZod` and `withYup`.  
+Note the use of `createValidator`.
+It takes care of unflattening the data for nested objects and arrays
+since the form doesn't know anything about object and arrays and this should be handled by the adapter.
+For more on this you can check the implementations for `withZod` and `withYup`.
 
 The out-of-the-box support for `yup` in this library works like this:
 
@@ -206,25 +208,28 @@ The out-of-the-box support for `yup` in this library works like this:
 export const withYup = <Schema extends AnyObjectSchema>(
   validationSchema: Schema
   // For best result with Typescript, we should type the `Validator` we return based on the provided schema
-): Validator<InferType<Schema>> => createValidator({
-  validate: (unvalidatedData) => {
-    // Validate with yup and return the validated & typed data or the error
-
-    if (isValid) return { data: { field1: "someValue" }, error: undefined };
-    else return { error: { field1: "Some error!" }, data: undefined };
-  },
-  validateField: (unvalidatedData, field) => {
-    // Validate the specific field with yup
-
-    if (isValid) return { error: undefined };
-    else return { error: "Some error" };
-  },
-});
+): Validator<InferType<Schema>> =>
+  createValidator({
+    validate: (unvalidatedData) => {
+      // Validate with yup and return the validated & typed data or the error
+
+      if (isValid) return { data: { field1: "someValue" }, error: undefined };
+      else return { error: { field1: "Some error!" }, data: undefined };
+    },
+    validateField: (unvalidatedData, field) => {
+      // Validate the specific field with yup
+
+      if (isValid) return { error: undefined };
+      else return { error: "Some error" };
+    },
+  });
 ```
 
 # Frequenty Asked Questions
 
 ## Why are my fields triggering the native HTML validations before `remix-validated-form` ones?
-This is happening because you or the library you are using are passing the `required` attribute to the fields. This library doesn't take care of eliminating them and it's up to the user how they want to manage the validation errors. If you wan't to disable all native HTML validations you can add `noValidate` to `<ValidatedForm>`. We recommend this approach since the validation will still work even if JS is disabled. 
-
 
+This is happening because you or the library you are using is passing the `required` attribute to the fields.
+This library doesn't take care of eliminating them and it's up to the user how they want to manage the validation errors.
+If you wan't to disable all native HTML validations you can add `noValidate` to `<ValidatedForm>`.
+We recommend this approach since the validation will still work even if JS is disabled.

package/browser/ValidatedForm.d.ts

@@ -2,10 +2,32 @@ import { Form as RemixForm, useFetcher } from "@remix-run/react";
 import React, { ComponentProps } from "react";
 import { Validator } from "./validation/types";
 export declare type FormProps<DataType> = {
+    /**
+     * A `Validator` object that describes how to validate the form.
+     */
     validator: Validator<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;
+    /**
+     * Allows you to provide a `fetcher` from remix's `useFetcher` hook.
+     * The form will use the fetcher for loading states, action data, etc
+     * instead of the default form action.
+     */
     fetcher?: ReturnType<typeof useFetcher>;
+    /**
+     * Accepts an object of default values for the form
+     * that will automatically be propagated to the form fields via `useField`.
+     */
     defaultValues?: Partial<DataType>;
+    /**
+     * A ref to the form element.
+     */
     formRef?: React.RefObject<HTMLFormElement>;
 } & 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, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -23,7 +23,10 @@ const useIsSubmitting = (action, fetcher) => {
         : pendingFormSubmit &&
             pendingFormSubmit.action === (action !== null && action !== void 0 ? action : actionForCurrentPage);
 };
-const getDataFromForm = (el) => Object.fromEntries(new FormData(el));
+const getDataFromForm = (el) => new FormData(el);
+/**
+ * The primary form component of `remix-validated-form`.
+ */
 export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
     var _a;
     const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);

package/browser/flatten.d.ts

@@ -1,5 +1,4 @@
 import { GenericObject } from ".";
-/** Unflatten a previously flatten object */
-export declare function unflatten(params: GenericObject): {};
+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/flatten.js

@@ -1,18 +1,12 @@
-// `flatten` and `unflatten` are 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.
+// `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 reduce from "lodash/reduce";
 import set from "lodash/set";
 import transform from "lodash/transform";
-/** Unflatten a previously flatten object */
-export function unflatten(params) {
-    return reduce(params, function (result, value, key) {
-        return set(result, key, value);
-    }, {});
-}
+export const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => set(acc, key, 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) {

package/browser/hooks.d.ts

@@ -1,8 +1,33 @@
-export declare const useField: (name: string) => {
-    error: string;
+export declare type FieldProps = {
+    /**
+     * The validation error message if there is one.
+     */
+    error?: string;
+    /**
+     * Clears the error message.
+     */
     clearError: () => void;
+    /**
+     * Validates the field.
+     */
     validate: () => void;
-    defaultValue: any;
+    /**
+     * The default value of the field, if there is one.
+     */
+    defaultValue?: any;
 };
+/**
+ * Provides the data and helpers necessary to set up a field.
+ */
+export declare const useField: (name: string) => 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;
+/**
+ * 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 declare const useIsSubmitting: () => boolean;

package/browser/hooks.js

@@ -2,6 +2,9 @@ import get from "lodash/get";
 import toPath from "lodash/toPath";
 import { useContext, 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);
     const field = useMemo(() => ({
@@ -16,6 +19,14 @@ export const useField = (name) => {
     }), [clearError, defaultValues, fieldErrors, name, validateField]);
     return field;
 };
-// test commit
+/**
+ * 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);
+/**
+ * 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;

package/browser/index.d.ts

@@ -4,3 +4,4 @@ export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/withYup";
 export * from "./validation/withZod";
+export * from "./validation/createValidator";

package/browser/index.js

@@ -4,3 +4,4 @@ export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/withYup";
 export * from "./validation/withZod";
+export * from "./validation/createValidator";

package/browser/internal/flatten.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,35 @@
+// `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";
+export const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => set(acc, key, 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

@@ -1,11 +1,29 @@
 /// <reference types="react" />
 import { FieldErrors } from "../validation/types";
 export declare type FormContextValue = {
+    /**
+     * All the errors in all the fields in the form.
+     */
     fieldErrors: FieldErrors;
+    /**
+     * Clear the errors of the specified fields.
+     */
     clearError: (...names: string[]) => void;
+    /**
+     * Validate the specified field.
+     */
     validateField: (fieldName: string) => void;
+    /**
+     * The `action` prop of the form.
+     */
     action?: string;
+    /**
+     * Whether or not the form is submitting.
+     */
     isSubmitting: boolean;
+    /**
+     * The default values of the form.
+     */
     defaultValues?: {
         [fieldName: string]: any;
     };

package/browser/server.d.ts

@@ -1,2 +1,7 @@
 import { FieldErrors } 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.
+ */
 export declare const validationError: (errors: FieldErrors) => Response;

package/browser/server.js

@@ -1,2 +1,7 @@
 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.
+ */
 export const validationError = (errors) => json({ fieldErrors: errors }, { status: 422 });

package/browser/test-data/testFormData.d.ts

@@ -0,0 +1,15 @@
+export declare class TestFormData implements FormData {
+    private _params;
+    constructor(body?: string);
+    append(name: string, value: string | Blob, fileName?: string): void;
+    delete(name: string): void;
+    get(name: string): FormDataEntryValue | null;
+    getAll(name: string): FormDataEntryValue[];
+    has(name: string): boolean;
+    set(name: string, value: string | Blob, fileName?: string): void;
+    forEach(callbackfn: (value: FormDataEntryValue, key: string, parent: FormData) => void, thisArg?: any): void;
+    entries(): IterableIterator<[string, FormDataEntryValue]>;
+    keys(): IterableIterator<string>;
+    values(): IterableIterator<FormDataEntryValue>;
+    [Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]>;
+}

package/browser/test-data/testFormData.js

@@ -0,0 +1,46 @@
+// Copied from remix to use in tests
+// https://github.com/remix-run/remix/blob/a69a631cb5add72d5fb24211ab2a0be367b6f2fd/packages/remix-node/form-data.ts
+export class TestFormData {
+    constructor(body) {
+        this._params = new URLSearchParams(body);
+    }
+    append(name, value, fileName) {
+        if (typeof value !== "string") {
+            throw new Error("formData.append can only accept a string");
+        }
+        this._params.append(name, value);
+    }
+    delete(name) {
+        this._params.delete(name);
+    }
+    get(name) {
+        return this._params.get(name);
+    }
+    getAll(name) {
+        return this._params.getAll(name);
+    }
+    has(name) {
+        return this._params.has(name);
+    }
+    set(name, value, fileName) {
+        if (typeof value !== "string") {
+            throw new Error("formData.set can only accept a string");
+        }
+        this._params.set(name, value);
+    }
+    forEach(callbackfn, thisArg) {
+        this._params.forEach(callbackfn, thisArg);
+    }
+    entries() {
+        return this._params.entries();
+    }
+    keys() {
+        return this._params.keys();
+    }
+    values() {
+        return this._params.values();
+    }
+    *[Symbol.iterator]() {
+        yield* this._params;
+    }
+}

package/browser/validation/createValidator.d.ts

@@ -1,3 +1,7 @@
 import { Validator } from "..";
-/** Handles data manipulation such us flattening the data to send to the validator */
+/**
+ * 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>;

package/browser/validation/createValidator.js

@@ -1,8 +1,19 @@
-import { unflatten } from "../flatten";
-/** Handles data manipulation such us flattening the data to send to the validator */
+import { objectFromPathEntries } from "../internal/flatten";
+const preprocessFormData = (data) => {
+    // A slightly janky way of determining if the data is a FormData object
+    // since node doesn't really have FormData
+    if ("entries" in data && typeof data.entries === "function")
+        return objectFromPathEntries([...data.entries()]);
+    return objectFromPathEntries(Object.entries(data));
+};
+/**
+ * Used to create a validator for a form.
+ * It provides built-in handling for unflattening nested objects and
+ * extracting the values from FormData.
+ */
 export function createValidator(validator) {
     return {
-        validate: (value) => validator.validate(unflatten(value)),
-        validateField: (data, field) => validator.validateField(unflatten(data), field),
+        validate: (value) => validator.validate(preprocessFormData(value)),
+        validateField: (data, field) => validator.validateField(preprocessFormData(data), field),
     };
 }

package/browser/validation/types.d.ts

@@ -2,6 +2,9 @@ export declare type FieldErrors = Record<string, string>;
 export declare type GenericObject = {
     [key: string]: any;
 };
+/**
+ * The result when validating a form.
+ */
 export declare type ValidationResult<DataType> = {
     data: DataType;
     error: undefined;
@@ -9,9 +12,15 @@ export declare type ValidationResult<DataType> = {
     error: FieldErrors;
     data: undefined;
 };
+/**
+ * The result when validating an individual field in a form.
+ */
 export declare type ValidateFieldResult = {
     error?: string;
 };
+/**
+ * A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
+ */
 export declare type Validator<DataType> = {
     validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
     validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;

package/browser/validation/validation.test.js

@@ -1,6 +1,7 @@
 import * as yup from "yup";
 import { z } from "zod";
 import { withYup } from "..";
+import { TestFormData } from "../test-data/testFormData";
 import { withZod } from "./withZod";
 const validationTestCases = [
     {
@@ -80,6 +81,70 @@ describe("Validation", () => {
                     },
                 });
             });
+            it("should unflatten data when validating", () => {
+                const data = {
+                    firstName: "John",
+                    lastName: "Doe",
+                    age: 30,
+                    "address.streetAddress": "123 Main St",
+                    "address.city": "Anytown",
+                    "address.country": "USA",
+                    "pets[0].animal": "dog",
+                    "pets[0].name": "Fido",
+                };
+                expect(validator.validate(data)).toEqual({
+                    data: {
+                        firstName: "John",
+                        lastName: "Doe",
+                        age: 30,
+                        address: {
+                            streetAddress: "123 Main St",
+                            city: "Anytown",
+                            country: "USA",
+                        },
+                        pets: [{ animal: "dog", name: "Fido" }],
+                    },
+                    error: undefined,
+                });
+            });
+            it("should accept FormData directly and return errors", () => {
+                const formData = new TestFormData();
+                formData.set("firstName", "John");
+                formData.set("lastName", "Doe");
+                formData.set("address.streetAddress", "123 Main St");
+                formData.set("address.country", "USA");
+                formData.set("pets[0].animal", "dog");
+                expect(validator.validate(formData)).toEqual({
+                    data: undefined,
+                    error: {
+                        "address.city": anyString,
+                        "pets[0].name": anyString,
+                    },
+                });
+            });
+            it("should accept FormData directly and return valid data", () => {
+                const formData = new TestFormData();
+                formData.set("firstName", "John");
+                formData.set("lastName", "Doe");
+                formData.set("address.streetAddress", "123 Main St");
+                formData.set("address.country", "USA");
+                formData.set("address.city", "Anytown");
+                formData.set("pets[0].animal", "dog");
+                formData.set("pets[0].name", "Fido");
+                expect(validator.validate(formData)).toEqual({
+                    data: {
+                        firstName: "John",
+                        lastName: "Doe",
+                        address: {
+                            streetAddress: "123 Main St",
+                            country: "USA",
+                            city: "Anytown",
+                        },
+                        pets: [{ animal: "dog", name: "Fido" }],
+                    },
+                    error: undefined,
+                });
+            });
         });
         describe("validateField", () => {
             it("should not return an error if field is valid", () => {

package/browser/validation/withYup.d.ts

@@ -1,3 +1,6 @@
 import type { AnyObjectSchema, InferType } from "yup";
 import { Validator } from "./types";
+/**
+ * Create a `Validator` using a `yup` schema.
+ */
 export declare const withYup: <Schema extends AnyObjectSchema>(validationSchema: Schema) => Validator<InferType<Schema>>;

package/browser/validation/withYup.js

@@ -8,6 +8,9 @@ const validationErrorToFieldErrors = (error) => {
     });
     return fieldErrors;
 };
+/**
+ * Create a `Validator` using a `yup` schema.
+ */
 export const withYup = (validationSchema) => {
     return createValidator({
         validate: (data) => {

package/browser/validation/withZod.d.ts

@@ -1,3 +1,6 @@
 import type { z } from "zod";
 import { Validator } from "..";
+/**
+ * Create a validator using a `zod` schema.
+ */
 export declare function withZod<T>(zodSchema: z.Schema<T>): Validator<T>;

package/browser/validation/withZod.js

@@ -17,6 +17,9 @@ function pathToString(array) {
         return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
     }, "");
 }
+/**
+ * Create a validator using a `zod` schema.
+ */
 export function withZod(zodSchema) {
     return createValidator({
         validate: (value) => {