remix-validated-form 1.1.0 → 2.0.0-beta.2

package/.turbo/turbo-build.log

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

package/.turbo/turbo-dev.log

@@ -0,0 +1,78 @@
+$ tsc --module ESNext --outDir ./browser --watch
+c8:26:39 PM - Starting compilation in watch mode...
+
+
+8:26:40 PM - Found 0 errors. Watching for file changes.
+c8:29:35 PM - File change detected. Starting incremental compilation...
+
+
+8:29:35 PM - Found 0 errors. Watching for file changes.
+c8:30:13 PM - File change detected. Starting incremental compilation...
+
+
+8:30:13 PM - Found 0 errors. Watching for file changes.
+c8:30:36 PM - File change detected. Starting incremental compilation...
+
+
+8:30:36 PM - Found 0 errors. Watching for file changes.
+c8:31:03 PM - File change detected. Starting incremental compilation...
+
+
+8:31:03 PM - Found 0 errors. Watching for file changes.
+c8:33:28 PM - File change detected. Starting incremental compilation...
+
+src/ValidatedForm.tsx(67,7): error TS2304: Cannot find name 'defaultsFromValidationError'.
+src/ValidatedForm.tsx(69,23): error TS2304: Cannot find name 'defaultsFromValidationError'.
+src/ValidatedForm.tsx(70,10): error TS2304: Cannot find name 'defaultsFromValidationError'.
+src/ValidatedForm.tsx(71,30): error TS2304: Cannot find name 'defaultsFromValidationError'.
+src/ValidatedForm.tsx(71,60): error TS2304: Cannot find name 'defaultValues'.
+src/ValidatedForm.tsx(152,58): error TS2554: Expected 0-1 arguments, but got 2.
+
+8:33:28 PM - Found 6 errors. Watching for file changes.
+c8:35:37 PM - File change detected. Starting incremental compilation...
+
+src/ValidatedForm.tsx(69,5): error TS1156: 'const' declarations can only be declared inside a block.
+src/ValidatedForm.tsx(71,10): error TS2304: Cannot find name 'defaultsFromValidationError'.
+src/ValidatedForm.tsx(72,10): error TS2454: Variable 'subactionsMatch' is used before being assigned.
+src/ValidatedForm.tsx(72,28): error TS2304: Cannot find name 'defaultsFromValidationError'.
+src/ValidatedForm.tsx(72,58): error TS2304: Cannot find name 'defaultValues'.
+
+8:35:38 PM - Found 5 errors. Watching for file changes.
+c8:51:56 PM - File change detected. Starting incremental compilation...
+
+src/ValidatedForm.tsx(69,5): error TS1156: 'const' declarations can only be declared inside a block.
+src/ValidatedForm.tsx(71,10): error TS2304: Cannot find name 'defaultsFromValidationError'.
+src/ValidatedForm.tsx(72,10): error TS2454: Variable 'subactionsMatch' is used before being assigned.
+src/ValidatedForm.tsx(72,28): error TS2304: Cannot find name 'defaultsFromValidationError'.
+src/ValidatedForm.tsx(72,58): error TS2304: Cannot find name 'defaultValues'.
+
+8:51:56 PM - Found 5 errors. Watching for file changes.
+c8:52:01 PM - File change detected. Starting incremental compilation...
+
+src/ValidatedForm.tsx(69,5): error TS1156: 'const' declarations can only be declared inside a block.
+src/ValidatedForm.tsx(71,10): error TS2304: Cannot find name 'defaultsFromValidationError'.
+src/ValidatedForm.tsx(72,10): error TS2454: Variable 'subactionsMatch' is used before being assigned.
+src/ValidatedForm.tsx(72,28): error TS2304: Cannot find name 'defaultsFromValidationError'.
+src/ValidatedForm.tsx(72,58): error TS2304: Cannot find name 'defaultValues'.
+
+8:52:01 PM - Found 5 errors. Watching for file changes.
+c8:53:29 PM - File change detected. Starting incremental compilation...
+
+
+8:53:29 PM - Found 0 errors. Watching for file changes.
+c8:54:22 PM - File change detected. Starting incremental compilation...
+
+
+8:54:22 PM - Found 0 errors. Watching for file changes.
+c8:54:40 PM - File change detected. Starting incremental compilation...
+
+src/ValidatedForm.tsx(157,42): error TS2345: Argument of type 'FieldErrorsWithData | null' is not assignable to parameter of type 'FieldErrorsWithData | undefined'.
+  Type 'null' is not assignable to type 'FieldErrorsWithData | undefined'.
+
+8:54:40 PM - Found 1 error. Watching for file changes.
+c8:54:56 PM - File change detected. Starting incremental compilation...
+
+src/ValidatedForm.tsx(70,20): error TS2322: Type 'null' is not assignable to type 'FieldErrorsWithData | undefined'.
+src/ValidatedForm.tsx(77,3): error TS2322: Type 'null' is not assignable to type 'FieldErrorsWithData | undefined'.
+
+8:54:56 PM 

package/.turbo/turbo-test.log

@@ -0,0 +1,36 @@
+$ 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.

package/README.md

@@ -7,11 +7,24 @@ 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 +70,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();
@@ -89,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;
 
@@ -127,6 +138,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,24 +197,39 @@ 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 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:
 
 ```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>> => ({
-  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 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,44 @@ 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>;
+    /**
+     * An optional sub-action to use for the form.
+     * Setting a value here will cause the form to be submitted with an extra `subaction` value.
+     * This can be useful when there are multiple forms on the screen handled by the same action.
+     */
+    subaction?: string;
+    /**
+     * Reset the form to the default values after the form has been successfully submitted.
+     * This is useful if you want to submit the same form multiple times,
+     * and don't redirect in-between submissions.
+     */
+    resetAfterSubmit?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }: FormProps<DataType>): JSX.Element;
+/**
+ * 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;

package/browser/ValidatedForm.js

@@ -1,38 +1,89 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Form as RemixForm, useActionData, useFormAction, useTransition, } from "@remix-run/react";
 import { useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
 import { FormContext } from "./internal/formContext";
+import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
-function useFieldErrors(fetcher) {
+function useFieldErrorsFromBackend(fetcher, subaction) {
+    var _a, _b;
     const actionData = useActionData();
-    const dataToUse = fetcher ? fetcher.data : actionData;
-    const fieldErrorsFromAction = dataToUse === null || dataToUse === void 0 ? void 0 : dataToUse.fieldErrors;
-    const [fieldErrors, setFieldErrors] = useState(fieldErrorsFromAction !== null && fieldErrorsFromAction !== void 0 ? fieldErrorsFromAction : {});
+    if (fetcher)
+        return (_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors;
+    if (!actionData)
+        return null;
+    if (actionData.fieldErrors) {
+        const submittedData = (_b = actionData.fieldErrors) === null || _b === void 0 ? void 0 : _b._submittedData;
+        const subactionsMatch = subaction
+            ? subaction === (submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction)
+            : !(submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction);
+        return subactionsMatch ? actionData.fieldErrors : null;
+    }
+    return null;
+}
+function useFieldErrors(fieldErrorsFromBackend) {
+    const [fieldErrors, setFieldErrors] = useState(fieldErrorsFromBackend !== null && fieldErrorsFromBackend !== void 0 ? fieldErrorsFromBackend : {});
     useEffect(() => {
-        if (fieldErrorsFromAction)
-            setFieldErrors(fieldErrorsFromAction);
-    }, [fieldErrorsFromAction]);
+        if (fieldErrorsFromBackend)
+            setFieldErrors(fieldErrorsFromBackend);
+    }, [fieldErrorsFromBackend]);
     return [fieldErrors, setFieldErrors];
 }
-const useIsSubmitting = (action, fetcher) => {
+const useIsSubmitting = (action, subaction, fetcher) => {
     const actionForCurrentPage = useFormAction();
     const pendingFormSubmit = useTransition().submission;
-    return fetcher
-        ? fetcher.state === "submitting"
-        : pendingFormSubmit &&
-            pendingFormSubmit.action.endsWith(action !== null && action !== void 0 ? action : actionForCurrentPage);
+    if (fetcher)
+        return fetcher.state === "submitting";
+    if (!pendingFormSubmit)
+        return false;
+    const { formData, action: pendingAction } = pendingFormSubmit;
+    const pendingSubAction = formData.get("subaction");
+    const expectedAction = action !== null && action !== void 0 ? action : actionForCurrentPage;
+    if (subaction)
+        return expectedAction === pendingAction && subaction === pendingSubAction;
+    return expectedAction === pendingAction && !pendingSubAction;
 };
-const getDataFromForm = (el) => Object.fromEntries(new FormData(el));
-export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
+const getDataFromForm = (el) => new FormData(el);
+/**
+ * The purpose for this logic is to handle validation errors when javascript is disabled.
+ * Normally (without js), when a form is submitted and the action returns the validation errors,
+ * the form will be reset. The errors will be displayed on the correct fields,
+ * but all the values in the form will be gone. This is not good UX.
+ *
+ * To get around this, we return the submitted form data from the server,
+ * and use those to populate the form via `defaultValues`.
+ * This results in a more seamless UX akin to what you would see when js is enabled.
+ *
+ * One potential downside is that resetting the form will reset the form
+ * to the _new_ default values that were returned from the server with the validation errors.
+ * However, this case is less of a problem than the janky UX caused by losing the form values.
+ * It will only ever be a problem if the form includes a `<button type="reset" />`
+ * and only if JS is disabled.
+ */
+function useDefaultValues(fieldErrors, defaultValues) {
+    const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
+    return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
+}
+/**
+ * The primary form component of `remix-validated-form`.
+ */
+export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
     var _a;
-    const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);
-    const isSubmitting = useIsSubmitting(action, fetcher);
+    const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
+    const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
+    const isSubmitting = useIsSubmitting(action, subaction, fetcher);
+    const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
     const formRef = useRef(null);
+    useSubmitComplete(isSubmitting, () => {
+        var _a;
+        if (!fieldErrorsFromBackend) {
+            (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+        }
+    });
     const contextValue = useMemo(() => ({
         fieldErrors,
         action,
-        defaultValues,
+        defaultValues: defaultsToUse,
         isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
         clearError: (fieldName) => {
             setFieldErrors((prev) => omit(prev, fieldName));
@@ -50,7 +101,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     }), [
         fieldErrors,
         action,
-        defaultValues,
+        defaultsToUse,
         isSubmitting,
         setFieldErrors,
         validator,
@@ -65,5 +116,10 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             else {
                 onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
             }
-        }, children: _jsx(FormContext.Provider, { value: contextValue, children: children }, void 0) }, void 0));
+        }, onReset: (event) => {
+            onReset === null || onReset === void 0 ? void 0 : onReset(event);
+            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));
 }

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

@@ -1,5 +1,10 @@
+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(() => ({
@@ -8,10 +13,20 @@ 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;
 };
-// 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

@@ -3,3 +3,6 @@ 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

@@ -3,3 +3,5 @@ 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/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/internal/submissionCallbacks.d.ts

@@ -0,0 +1 @@
+export declare function useSubmitComplete(isSubmitting: boolean, callback: () => void): void;

package/browser/internal/submissionCallbacks.js

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+export function useSubmitComplete(isSubmitting, callback) {
+    const isPending = useRef(false);
+    useEffect(() => {
+        if (isSubmitting) {
+            isPending.current = true;
+        }
+        if (!isSubmitting && isPending.current) {
+            isPending.current = false;
+            callback();
+        }
+    });
+}

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]>;
+}