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

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"},{"size":207,"mtime":1637876506168,"results":"9","hashOfConfig":"10"},{"size":438,"mtime":1637877226360,"results":"11","hashOfConfig":"10"},{"size":1085,"mtime":1637877476573,"results":"12","hashOfConfig":"10"},{"size":1293,"mtime":1637876566355,"results":"13","hashOfConfig":"10"},{"size":1330,"mtime":1637902697212,"results":"14","hashOfConfig":"10"},{"size":2220,"mtime":1637902736281,"results":"15","hashOfConfig":"10"},{"size":3526,"mtime":1638155421909,"results":"16","hashOfConfig":"10"},{"size":1168,"mtime":1638155747107,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"bt07le",{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"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":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","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",["34"],"/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",["35"],"/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",[],{"ruleId":"36","severity":1,"message":"37","line":2,"column":23,"nodeType":"38","messageId":"39","endLine":2,"endColumn":39},{"ruleId":"36","severity":1,"message":"40","line":1,"column":26,"nodeType":"38","messageId":"39","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"},{"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."]

package/.prettierignore

@@ -3,6 +3,8 @@ build
 browser
 test-app/build
 test-app/remix-validated-form
+sample-app/build
+sample-app/remix-validated-form
 node_modules
 public
 package-lock.json

package/README.md

@@ -7,11 +7,23 @@ A form library built for [remix](https://remix.run) to make validation easy.
 - Re-use validation on the server
 - Show validation errors from the server even without JS
 - Detect if the current form is submitting when there are multiple forms on the page
+- Supports nested objects and arrays
 - Validation library agnostic
 
 # Demo
 
-https://user-images.githubusercontent.com/25882770/143505448-c4b7e660-7a73-4005-b2ca-17c65a15ef46.mov
+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
+npm i
+cd sample-app
+npm i
+cd ..
+npm run sample-app
+```
 
 # Getting started
 
@@ -57,7 +69,7 @@ export const MyInput = ({ name, label }: InputProps) => {
 To best take advantage of the per-form submission detection, we can create a submit button component.
 
 ```tsx
-import { useIsSubmitting } from "../../remix-validated-form";
+import { useIsSubmitting } from "remix-validated-form";
 
 export const MySubmitButton = () => {
   const isSubmitting = useIsSubmitting();
@@ -127,6 +139,33 @@ 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. 
+
+```tsx
+export default function MyForm() {
+  const { defaultValues } = useLoaderData();
+  return (
+    <ValidatedForm
+      validator={validator}
+      method="post"
+      defaultValues={defaultValues}
+    >
+      <MyInput name="firstName" label="First Name" />
+      <MyInput name="lastName" label="Last Name" />
+      <MyInput name="address.street" label="Street" />
+      <MyInput name="address.city" label="City" />
+      <MyInput name="phones[0].type" label="Phone 1 Type" />
+      <MyInput name="phones[0].number" label="Phone 1 Number" />
+      <MyInput name="phones[1].type" label="Phone 2 Type" />
+      <MyInput name="phones[1].number" label="Phone 2 Number" />
+      <MySubmitButton />
+    </ValidatedForm>
+  );
+}
+```
+
 # Validation Library Support
 
 This library currently includes an out-of-the-box adapter for `yup` and `zod`,
@@ -159,13 +198,15 @@ 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`.  
+
 The out-of-the-box support for `yup` in this library works like this:
 
 ```ts
 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>> => ({
+): Validator<InferType<Schema>> => createValidator({
   validate: (unvalidatedData) => {
     // Validate with yup and return the validated & typed data or the error
 
@@ -180,3 +221,10 @@ export const withYup = <Schema extends AnyObjectSchema>(
   },
 });
 ```
+
+# 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. 
+
+

package/browser/ValidatedForm.js

@@ -21,7 +21,7 @@ const useIsSubmitting = (action, fetcher) => {
     return fetcher
         ? fetcher.state === "submitting"
         : pendingFormSubmit &&
-            pendingFormSubmit.action.endsWith(action !== null && action !== void 0 ? action : actionForCurrentPage);
+            pendingFormSubmit.action === (action !== null && action !== void 0 ? action : actionForCurrentPage);
 };
 const getDataFromForm = (el) => Object.fromEntries(new FormData(el));
 export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {

package/browser/flatten.d.ts

@@ -0,0 +1,5 @@
+import { GenericObject } from ".";
+/** Unflatten a previously flatten object */
+export declare function unflatten(params: GenericObject): {};
+/** Flatten an object so there are no nested objects or arrays */
+export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/browser/flatten.js

@@ -0,0 +1,41 @@
+// `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.
+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);
+    }, {});
+}
+/** 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/hooks.js

@@ -1,3 +1,5 @@
+import get from "lodash/get";
+import toPath from "lodash/toPath";
 import { useContext, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
 export const useField = (name) => {
@@ -8,7 +10,9 @@ export const useField = (name) => {
             clearError(name);
         },
         validate: () => validateField(name),
-        defaultValue: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[name],
+        defaultValue: defaultValues
+            ? get(defaultValues, toPath(name), undefined)
+            : undefined,
     }), [clearError, defaultValues, fieldErrors, name, validateField]);
     return field;
 };

package/browser/index.d.ts

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

package/browser/index.js

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

package/browser/validation/createValidator.d.ts

@@ -0,0 +1,3 @@
+import { Validator } from "..";
+/** Handles data manipulation such us flattening the data to send to the validator */
+export declare function createValidator<T>(validator: Validator<T>): Validator<T>;

package/browser/validation/createValidator.js

@@ -0,0 +1,8 @@
+import { unflatten } from "../flatten";
+/** Handles data manipulation such us flattening the data to send to the validator */
+export function createValidator(validator) {
+    return {
+        validate: (value) => validator.validate(unflatten(value)),
+        validateField: (data, field) => validator.validateField(unflatten(data), field),
+    };
+}

package/browser/validation/types.d.ts

@@ -1,4 +1,7 @@
 export declare type FieldErrors = Record<string, string>;
+export declare type GenericObject = {
+    [key: string]: any;
+};
 export declare type ValidationResult<DataType> = {
     data: DataType;
     error: undefined;
@@ -10,6 +13,6 @@ export declare type ValidateFieldResult = {
     error?: string;
 };
 export declare type Validator<DataType> = {
-    validate: (unvalidatedData: unknown) => ValidationResult<DataType>;
-    validateField: (unvalidatedData: unknown, field: string) => ValidateFieldResult;
+    validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
+    validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
 };

package/browser/validation/validation.test.js

@@ -9,6 +9,17 @@ const validationTestCases = [
             firstName: yup.string().required(),
             lastName: yup.string().required(),
             age: yup.number(),
+            address: yup
+                .object({
+                streetAddress: yup.string().required(),
+                city: yup.string().required(),
+                country: yup.string().required(),
+            })
+                .required(),
+            pets: yup.array().of(yup.object({
+                animal: yup.string().required(),
+                name: yup.string().required(),
+            })),
         })),
     },
     {
@@ -17,6 +28,18 @@ const validationTestCases = [
             firstName: z.string().nonempty(),
             lastName: z.string().nonempty(),
             age: z.optional(z.number()),
+            address: z.preprocess((value) => (value == null ? {} : value), z.object({
+                streetAddress: z.string().nonempty(),
+                city: z.string().nonempty(),
+                country: z.string().nonempty(),
+            })),
+            pets: z
+                .object({
+                animal: z.string().nonempty(),
+                name: z.string().nonempty(),
+            })
+                .array()
+                .optional(),
         })),
     },
 ];
@@ -26,41 +49,102 @@ describe("Validation", () => {
     describe.each(validationTestCases)("Adapter for $name", ({ validator }) => {
         describe("validate", () => {
             it("should return the data when valid", () => {
-                const obj = {
+                const person = {
                     firstName: "John",
                     lastName: "Doe",
                     age: 30,
+                    address: {
+                        streetAddress: "123 Main St",
+                        city: "Anytown",
+                        country: "USA",
+                    },
+                    pets: [{ animal: "dog", name: "Fido" }],
                 };
-                expect(validator.validate(obj)).toEqual({
-                    data: obj,
+                expect(validator.validate(person)).toEqual({
+                    data: person,
                     error: undefined,
                 });
             });
             it("should return field errors when invalid", () => {
-                const obj = { age: "hi!" };
+                const obj = { age: "hi!", pets: [{ animal: "dog" }] };
                 expect(validator.validate(obj)).toEqual({
                     data: undefined,
                     error: {
                         firstName: anyString,
                         lastName: anyString,
                         age: anyString,
+                        "address.city": anyString,
+                        "address.country": anyString,
+                        "address.streetAddress": anyString,
+                        "pets[0].name": anyString,
                     },
                 });
             });
         });
         describe("validateField", () => {
             it("should not return an error if field is valid", () => {
-                const obj = {
+                const person = {
                     firstName: "John",
                     lastName: {}, // invalid, but we should only be validating firstName
                 };
-                expect(validator.validateField(obj, "firstName")).toEqual({
+                expect(validator.validateField(person, "firstName")).toEqual({
+                    error: undefined,
+                });
+            });
+            it("should not return an error if a nested field is valid", () => {
+                const person = {
+                    firstName: "John",
+                    lastName: {},
+                    address: {
+                        streetAddress: "123 Main St",
+                        city: "Anytown",
+                        country: "USA",
+                    },
+                    pets: [{ animal: "dog", name: "Fido" }],
+                };
+                expect(validator.validateField(person, "address.streetAddress")).toEqual({
+                    error: undefined,
+                });
+                expect(validator.validateField(person, "address.city")).toEqual({
+                    error: undefined,
+                });
+                expect(validator.validateField(person, "address.country")).toEqual({
+                    error: undefined,
+                });
+                expect(validator.validateField(person, "pets[0].animal")).toEqual({
+                    error: undefined,
+                });
+                expect(validator.validateField(person, "pets[0].name")).toEqual({
                     error: undefined,
                 });
             });
             it("should return an error if field is invalid", () => {
-                const obj = { firstName: "John", lastName: {} };
-                expect(validator.validateField(obj, "lastName")).toEqual({
+                const person = {
+                    firstName: "John",
+                    lastName: {},
+                    address: {
+                        streetAddress: "123 Main St",
+                        city: 1234,
+                    },
+                };
+                expect(validator.validateField(person, "lastName")).toEqual({
+                    error: anyString,
+                });
+            });
+            it("should return an error if a nested field is invalid", () => {
+                const person = {
+                    firstName: "John",
+                    lastName: {},
+                    address: {
+                        streetAddress: "123 Main St",
+                        city: 1234,
+                    },
+                    pets: [{ animal: "dog" }],
+                };
+                expect(validator.validateField(person, "address.country")).toEqual({
+                    error: anyString,
+                });
+                expect(validator.validateField(person, "pets[0].name")).toEqual({
                     error: anyString,
                 });
             });

package/browser/validation/withYup.js

@@ -1,3 +1,4 @@
+import { createValidator } from "./createValidator";
 const validationErrorToFieldErrors = (error) => {
     const fieldErrors = {};
     error.inner.forEach((innerError) => {
@@ -7,28 +8,30 @@ const validationErrorToFieldErrors = (error) => {
     });
     return fieldErrors;
 };
-export const withYup = (validationSchema) => ({
-    validate: (data) => {
-        try {
-            const validated = validationSchema.validateSync(data, {
-                abortEarly: false,
-            });
-            return { data: validated, error: undefined };
-        }
-        catch (err) {
-            return {
-                error: validationErrorToFieldErrors(err),
-                data: undefined,
-            };
-        }
-    },
-    validateField: (data, field) => {
-        try {
-            validationSchema.validateSyncAt(field, data);
-            return {};
-        }
-        catch (err) {
-            return { error: err.message };
-        }
-    },
-});
+export const withYup = (validationSchema) => {
+    return createValidator({
+        validate: (data) => {
+            try {
+                const validated = validationSchema.validateSync(data, {
+                    abortEarly: false,
+                });
+                return { data: validated, error: undefined };
+            }
+            catch (err) {
+                return {
+                    error: validationErrorToFieldErrors(err),
+                    data: undefined,
+                };
+            }
+        },
+        validateField: (data, field) => {
+            try {
+                validationSchema.validateSyncAt(field, data);
+                return {};
+            }
+            catch (err) {
+                return { error: err.message };
+            }
+        },
+    });
+};

package/browser/validation/withZod.js

@@ -1,3 +1,6 @@
+import isEqual from "lodash/isEqual";
+import toPath from "lodash/toPath";
+import { createValidator } from "./createValidator";
 const getIssuesForError = (err) => {
     return err.issues.flatMap((issue) => {
         if ("unionErrors" in issue) {
@@ -8,15 +11,21 @@ const getIssuesForError = (err) => {
         }
     });
 };
+function pathToString(array) {
+    return array.reduce(function (string, item) {
+        var prefix = string === "" ? "" : ".";
+        return string + (isNaN(Number(item)) ? prefix + item : "[" + item + "]");
+    }, "");
+}
 export function withZod(zodSchema) {
-    return {
+    return createValidator({
         validate: (value) => {
             const result = zodSchema.safeParse(value);
             if (result.success)
                 return { data: result.data, error: undefined };
             const fieldErrors = {};
             getIssuesForError(result.error).forEach((issue) => {
-                const path = issue.path.join(".");
+                const path = pathToString(issue.path);
                 if (!fieldErrors[path])
                     fieldErrors[path] = issue.message;
             });
@@ -28,8 +37,11 @@ export function withZod(zodSchema) {
             if (result.success)
                 return { error: undefined };
             return {
-                error: (_a = getIssuesForError(result.error).find((issue) => issue.path.join(".") === field)) === null || _a === void 0 ? void 0 : _a.message,
+                error: (_a = getIssuesForError(result.error).find((issue) => {
+                    const allPathsAsString = issue.path.map((p) => `${p}`);
+                    return isEqual(allPathsAsString, toPath(field));
+                })) === null || _a === void 0 ? void 0 : _a.message,
             };
         },
-    };
+    });
 }

package/build/ValidatedForm.js

@@ -27,7 +27,7 @@ const useIsSubmitting = (action, fetcher) => {
     return fetcher
         ? fetcher.state === "submitting"
         : pendingFormSubmit &&
-            pendingFormSubmit.action.endsWith(action !== null && action !== void 0 ? action : actionForCurrentPage);
+            pendingFormSubmit.action === (action !== null && action !== void 0 ? action : actionForCurrentPage);
 };
 const getDataFromForm = (el) => Object.fromEntries(new FormData(el));
 function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {

package/build/flatten.d.ts

@@ -0,0 +1,5 @@
+import { GenericObject } from ".";
+/** Unflatten a previously flatten object */
+export declare function unflatten(params: GenericObject): {};
+/** Flatten an object so there are no nested objects or arrays */
+export declare function flatten(obj: GenericObject, preserveEmpty?: boolean): GenericObject;

package/build/flatten.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flatten = exports.unflatten = void 0;
+// `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.
+const assign_1 = __importDefault(require("lodash/assign"));
+const isArray_1 = __importDefault(require("lodash/isArray"));
+const isObject_1 = __importDefault(require("lodash/isObject"));
+const keys_1 = __importDefault(require("lodash/keys"));
+const mapKeys_1 = __importDefault(require("lodash/mapKeys"));
+const reduce_1 = __importDefault(require("lodash/reduce"));
+const set_1 = __importDefault(require("lodash/set"));
+const transform_1 = __importDefault(require("lodash/transform"));
+/** Unflatten a previously flatten object */
+function unflatten(params) {
+    return (0, reduce_1.default)(params, function (result, value, key) {
+        return (0, set_1.default)(result, key, value);
+    }, {});
+}
+exports.unflatten = unflatten;
+/** Flatten an object so there are no nested objects or arrays */
+function flatten(obj, preserveEmpty = false) {
+    return (0, transform_1.default)(obj, function (result, value, key) {
+        if ((0, isObject_1.default)(value)) {
+            let flatMap = (0, mapKeys_1.default)(flatten(value, preserveEmpty), function (_mvalue, mkey) {
+                if ((0, isArray_1.default)(value)) {
+                    let index = mkey.indexOf(".");
+                    if (-1 !== index) {
+                        return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
+                    }
+                    return `${key}[${mkey}]`;
+                }
+                return `${key}.${mkey}`;
+            });
+            (0, assign_1.default)(result, flatMap);
+            // Preverve Empty arrays and objects
+            if (preserveEmpty && (0, keys_1.default)(flatMap).length === 0) {
+                result[key] = value;
+            }
+        }
+        else {
+            result[key] = value;
+        }
+        return result;
+    }, {});
+}
+exports.flatten = flatten;

package/build/hooks.js

@@ -1,6 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsSubmitting = exports.useFormContext = exports.useField = void 0;
+const get_1 = __importDefault(require("lodash/get"));
+const toPath_1 = __importDefault(require("lodash/toPath"));
 const react_1 = require("react");
 const formContext_1 = require("./internal/formContext");
 const useField = (name) => {
@@ -11,7 +16,9 @@ const useField = (name) => {
             clearError(name);
         },
         validate: () => validateField(name),
-        defaultValue: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[name],
+        defaultValue: defaultValues
+            ? (0, get_1.default)(defaultValues, (0, toPath_1.default)(name), undefined)
+            : undefined,
     }), [clearError, defaultValues, fieldErrors, name, validateField]);
     return field;
 };

package/build/index.d.ts

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

package/build/index.js

@@ -15,3 +15,4 @@ __exportStar(require("./server"), exports);
 __exportStar(require("./ValidatedForm"), exports);
 __exportStar(require("./validation/types"), exports);
 __exportStar(require("./validation/withYup"), exports);
+__exportStar(require("./validation/withZod"), exports);

package/build/validation/createValidator.d.ts

@@ -0,0 +1,3 @@
+import { Validator } from "..";
+/** Handles data manipulation such us flattening the data to send to the validator */
+export declare function createValidator<T>(validator: Validator<T>): Validator<T>;

package/build/validation/createValidator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createValidator = void 0;
+const flatten_1 = require("../flatten");
+/** Handles data manipulation such us flattening the data to send to the validator */
+function createValidator(validator) {
+    return {
+        validate: (value) => validator.validate((0, flatten_1.unflatten)(value)),
+        validateField: (data, field) => validator.validateField((0, flatten_1.unflatten)(data), field),
+    };
+}
+exports.createValidator = createValidator;

package/build/validation/types.d.ts

@@ -1,4 +1,7 @@
 export declare type FieldErrors = Record<string, string>;
+export declare type GenericObject = {
+    [key: string]: any;
+};
 export declare type ValidationResult<DataType> = {
     data: DataType;
     error: undefined;
@@ -10,6 +13,6 @@ export declare type ValidateFieldResult = {
     error?: string;
 };
 export declare type Validator<DataType> = {
-    validate: (unvalidatedData: unknown) => ValidationResult<DataType>;
-    validateField: (unvalidatedData: unknown, field: string) => ValidateFieldResult;
+    validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
+    validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
 };