remix-validated-form 4.5.0 → 4.5.3

package/.turbo/turbo-build.log

@@ -1,18 +1,17 @@
 $ vite build
 vite v2.9.5 building for production...
 transforming...
-✓ 320 modules transformed.
+✓ 482 modules transformed.
 rendering chunks...
-dist/remix-validated-form.cjs.js   47.23 KiB / gzip: 17.41 KiB
-dist/remix-validated-form.cjs.js.map 265.34 KiB
-dist/remix-validated-form.es.js   104.23 KiB / gzip: 24.22 KiB
-dist/remix-validated-form.es.js.map 273.50 KiB
-dist/remix-validated-form.umd.js   47.48 KiB / gzip: 17.53 KiB
-dist/remix-validated-form.umd.js.map 265.31 KiB
+dist/remix-validated-form.cjs.js   45.86 KiB / gzip: 17.19 KiB
+dist/remix-validated-form.cjs.js.map 254.97 KiB
+dist/remix-validated-form.es.js   101.66 KiB / gzip: 23.89 KiB
+dist/remix-validated-form.es.js.map 263.01 KiB
+dist/remix-validated-form.umd.js   46.07 KiB / gzip: 17.30 KiB
+dist/remix-validated-form.umd.js.map 254.95 KiB
 
 [vite:dts] Start generate declaration files...
-[vite:dts] Declaration files built in 1961ms.
+[vite:dts] Declaration files built in 2804ms.
 
 No name was provided for external module 'react' in output.globals – guessing 'React'
 No name was provided for external module '@remix-run/react' in output.globals – guessing 'react'
-No name was provided for external module '@remix-run/server-runtime' in output.globals – guessing 'serverRuntime'

package/browser/ValidatedForm.js

@@ -21,7 +21,7 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
     const namesInOrder = [...formElement.elements]
         .map((el) => {
         const input = el instanceof RadioNodeList ? el[0] : el;
-        if (input instanceof HTMLInputElement)
+        if (input instanceof HTMLElement && "name" in input)
             return input.name;
         return null;
     })
@@ -47,8 +47,8 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
                 break;
             }
         }
-        if (elem instanceof HTMLInputElement) {
-            if (elem.type === "hidden") {
+        if (elem instanceof HTMLElement) {
+            if (elem instanceof HTMLInputElement && elem.type === "hidden") {
                 continue;
             }
             elem.focus();
@@ -189,7 +189,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             if (fetcher)
                 fetcher.submit(submitter || e.currentTarget);
             else
-                submit(submitter || target, { method, replace });
+                submit(submitter || target, { replace });
         }
     };
     return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: (e) => {

package/browser/internal/hooks.d.ts

@@ -31,3 +31,4 @@ export declare const useResetFormElement: (formId: InternalFormId) => () => void
 export declare const useSubmitForm: (formId: InternalFormId) => () => void;
 export declare const useFormActionProp: (formId: InternalFormId) => string | undefined;
 export declare const useFormSubactionProp: (formId: InternalFormId) => string | undefined;
+export declare const useFormValues: (formId: InternalFormId) => () => FormData;

package/browser/internal/hooks.js

@@ -116,3 +116,4 @@ export const useResetFormElement = (formId) => useFormStore(formId, (state) => s
 export const useSubmitForm = (formId) => useFormStore(formId, (state) => state.submit);
 export const useFormActionProp = (formId) => useFormStore(formId, (state) => { var _a; return (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.action; });
 export const useFormSubactionProp = (formId) => useFormStore(formId, (state) => { var _a; return (_a = state.formProps) === null || _a === void 0 ? void 0 : _a.subaction; });
+export const useFormValues = (formId) => useFormStore(formId, (state) => state.getValues);

package/browser/internal/state/arrayUtil.d.ts

@@ -4,3 +4,9 @@ export declare const move: (array: unknown[], from: number, to: number) => void;
 export declare const insert: (array: unknown[], index: number, value: unknown) => void;
 export declare const remove: (array: unknown[], index: number) => void;
 export declare const replace: (array: unknown[], index: number, value: unknown) => void;
+/**
+ * The purpose of this helper is to make it easier to update `fieldErrors` and `touchedFields`.
+ * We key those objects by full paths to the fields.
+ * When we're doing array mutations, that makes it difficult to update those objects.
+ */
+export declare const mutateAsArray: (field: string, obj: Record<string, any>, mutate: (arr: any[]) => void) => void;

package/browser/internal/state/arrayUtil.js

@@ -18,24 +18,93 @@ export const getArray = (values, field) => {
 export const swap = (array, indexA, indexB) => {
     const itemA = array[indexA];
     const itemB = array[indexB];
-    array[indexA] = itemB;
-    array[indexB] = itemA;
+    const hasItemA = indexA in array;
+    const hasItemB = indexB in array;
+    // If we're dealing with a sparse array (i.e. one of the indeces doesn't exist),
+    // we should keep it sparse
+    if (hasItemA) {
+        array[indexB] = itemA;
+    }
+    else {
+        delete array[indexB];
+    }
+    if (hasItemB) {
+        array[indexA] = itemB;
+    }
+    else {
+        delete array[indexA];
+    }
 };
+// A splice that can handle sparse arrays
+function sparseSplice(array, start, deleteCount, item) {
+    // Inserting an item into an array won't behave as we need it to if the array isn't
+    // at least as long as the start index. We can force the array to be long enough like this.
+    if (array.length < start && item) {
+        array.length = start;
+    }
+    // If we just pass item in, it'll be undefined and splice will delete the item.
+    if (arguments.length === 4)
+        return array.splice(start, deleteCount, item);
+    return array.splice(start, deleteCount);
+}
 export const move = (array, from, to) => {
-    const [item] = array.splice(from, 1);
-    array.splice(to, 0, item);
+    const [item] = sparseSplice(array, from, 1);
+    sparseSplice(array, to, 0, item);
 };
 export const insert = (array, index, value) => {
-    array.splice(index, 0, value);
+    sparseSplice(array, index, 0, value);
 };
 export const remove = (array, index) => {
-    array.splice(index, 1);
+    sparseSplice(array, index, 1);
 };
 export const replace = (array, index, value) => {
-    array.splice(index, 1, value);
+    sparseSplice(array, index, 1, value);
+};
+/**
+ * The purpose of this helper is to make it easier to update `fieldErrors` and `touchedFields`.
+ * We key those objects by full paths to the fields.
+ * When we're doing array mutations, that makes it difficult to update those objects.
+ */
+export const mutateAsArray = (field, obj, mutate) => {
+    const beforeKeys = new Set();
+    const arr = [];
+    for (const [key, value] of Object.entries(obj)) {
+        if (key.startsWith(field) && key !== field) {
+            beforeKeys.add(key);
+        }
+        lodashSet(arr, key.substring(field.length), value);
+    }
+    mutate(arr);
+    for (const key of beforeKeys) {
+        delete obj[key];
+    }
+    const newKeys = getDeepArrayPaths(arr);
+    for (const key of newKeys) {
+        const val = lodashGet(arr, key);
+        obj[`${field}${key}`] = val;
+    }
+};
+const getDeepArrayPaths = (obj, basePath = "") => {
+    // This only needs to handle arrays and plain objects
+    // and we can assume the first call is always an array.
+    if (Array.isArray(obj)) {
+        return obj.flatMap((item, index) => getDeepArrayPaths(item, `${basePath}[${index}]`));
+    }
+    if (typeof obj === "object") {
+        return Object.keys(obj).flatMap((key) => getDeepArrayPaths(obj[key], `${basePath}.${key}`));
+    }
+    return [basePath];
 };
 if (import.meta.vitest) {
     const { describe, expect, it } = import.meta.vitest;
+    // Count the actual number of items in the array
+    // instead of just getting the length.
+    // This is useful for validating that sparse arrays are handled correctly.
+    const countArrayItems = (arr) => {
+        let count = 0;
+        arr.forEach(() => count++);
+        return count;
+    };
     describe("getArray", () => {
         it("shoud get a deeply nested array that can be mutated to update the nested value", () => {
             const values = {
@@ -76,6 +145,16 @@ if (import.meta.vitest) {
             swap(array, 0, 1);
             expect(array).toEqual([2, 1, 3]);
         });
+        it("should work for sparse arrays", () => {
+            // A bit of a sanity check for native array behavior
+            const arr = [];
+            arr[0] = true;
+            swap(arr, 0, 2);
+            expect(countArrayItems(arr)).toEqual(1);
+            expect(0 in arr).toBe(false);
+            expect(2 in arr).toBe(true);
+            expect(arr[2]).toEqual(true);
+        });
     });
     describe("move", () => {
         it("should move an item to a new index", () => {
@@ -83,6 +162,12 @@ if (import.meta.vitest) {
             move(array, 0, 1);
             expect(array).toEqual([2, 1, 3]);
         });
+        it("should work with sparse arrays", () => {
+            const array = [1];
+            move(array, 0, 2);
+            expect(countArrayItems(array)).toEqual(1);
+            expect(array).toEqual([undefined, undefined, 1]);
+        });
     });
     describe("insert", () => {
         it("should insert an item at a new index", () => {
@@ -90,6 +175,18 @@ if (import.meta.vitest) {
             insert(array, 1, 4);
             expect(array).toEqual([1, 4, 2, 3]);
         });
+        it("should be able to insert falsey values", () => {
+            const array = [1, 2, 3];
+            insert(array, 1, null);
+            expect(array).toEqual([1, null, 2, 3]);
+        });
+        it("should handle sparse arrays", () => {
+            const array = [];
+            array[2] = true;
+            insert(array, 0, true);
+            expect(countArrayItems(array)).toEqual(2);
+            expect(array).toEqual([true, undefined, undefined, true]);
+        });
     });
     describe("remove", () => {
         it("should remove an item at a given index", () => {
@@ -97,6 +194,13 @@ if (import.meta.vitest) {
             remove(array, 1);
             expect(array).toEqual([1, 3]);
         });
+        it("should handle sparse arrays", () => {
+            const array = [];
+            array[2] = true;
+            remove(array, 0);
+            expect(countArrayItems(array)).toEqual(1);
+            expect(array).toEqual([undefined, true]);
+        });
     });
     describe("replace", () => {
         it("should replace an item at a given index", () => {
@@ -104,5 +208,130 @@ if (import.meta.vitest) {
             replace(array, 1, 4);
             expect(array).toEqual([1, 4, 3]);
         });
+        it("should handle sparse arrays", () => {
+            const array = [];
+            array[2] = true;
+            replace(array, 0, true);
+            expect(countArrayItems(array)).toEqual(2);
+            expect(array).toEqual([true, undefined, true]);
+        });
+    });
+    describe("mutateAsArray", () => {
+        it("should handle swap", () => {
+            const values = {
+                myField: "something",
+                "myField[0]": "foo",
+                "myField[2]": "bar",
+                otherField: "baz",
+                "otherField[0]": "something else",
+            };
+            mutateAsArray("myField", values, (arr) => {
+                swap(arr, 0, 2);
+            });
+            expect(values).toEqual({
+                myField: "something",
+                "myField[0]": "bar",
+                "myField[2]": "foo",
+                otherField: "baz",
+                "otherField[0]": "something else",
+            });
+        });
+        it("should swap sparse arrays", () => {
+            const values = {
+                myField: "something",
+                "myField[0]": "foo",
+                otherField: "baz",
+                "otherField[0]": "something else",
+            };
+            mutateAsArray("myField", values, (arr) => {
+                swap(arr, 0, 2);
+            });
+            expect(values).toEqual({
+                myField: "something",
+                "myField[2]": "foo",
+                otherField: "baz",
+                "otherField[0]": "something else",
+            });
+        });
+        it("should handle arrays with nested values", () => {
+            const values = {
+                myField: "something",
+                "myField[0].title": "foo",
+                "myField[0].note": "bar",
+                "myField[2].title": "other",
+                "myField[2].note": "other",
+                otherField: "baz",
+                "otherField[0]": "something else",
+            };
+            mutateAsArray("myField", values, (arr) => {
+                swap(arr, 0, 2);
+            });
+            expect(values).toEqual({
+                myField: "something",
+                "myField[0].title": "other",
+                "myField[0].note": "other",
+                "myField[2].title": "foo",
+                "myField[2].note": "bar",
+                otherField: "baz",
+                "otherField[0]": "something else",
+            });
+        });
+        it("should handle move", () => {
+            const values = {
+                myField: "something",
+                "myField[0]": "foo",
+                "myField[1]": "bar",
+                "myField[2]": "baz",
+                "otherField[0]": "something else",
+            };
+            mutateAsArray("myField", values, (arr) => {
+                move(arr, 0, 2);
+            });
+            expect(values).toEqual({
+                myField: "something",
+                "myField[0]": "bar",
+                "myField[1]": "baz",
+                "myField[2]": "foo",
+                "otherField[0]": "something else",
+            });
+        });
+        it("should handle remove", () => {
+            const values = {
+                myField: "something",
+                "myField[0]": "foo",
+                "myField[1]": "bar",
+                "myField[2]": "baz",
+                "otherField[0]": "something else",
+            };
+            mutateAsArray("myField", values, (arr) => {
+                remove(arr, 1);
+            });
+            expect(values).toEqual({
+                myField: "something",
+                "myField[0]": "foo",
+                "myField[1]": "baz",
+                "otherField[0]": "something else",
+            });
+            expect("myField[2]" in values).toBe(false);
+        });
+    });
+    describe("getDeepArrayPaths", () => {
+        it("should return all paths recursively", () => {
+            const obj = [
+                true,
+                true,
+                [true, true],
+                { foo: true, bar: { baz: true, test: [true] } },
+            ];
+            expect(getDeepArrayPaths(obj, "myField")).toEqual([
+                "myField[0]",
+                "myField[1]",
+                "myField[2][0]",
+                "myField[2][1]",
+                "myField[3].foo",
+                "myField[3].bar.baz",
+                "myField[3].bar.test[0]",
+            ]);
+        });
     });
 }

package/browser/internal/state/createFormStore.d.ts

@@ -42,6 +42,7 @@ export declare type FormState = {
     validate: () => Promise<ValidationResult<unknown>>;
     resetFormElement: () => void;
     submit: () => void;
+    getValues: () => FormData;
 };
 export declare const useRootFormStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormStoreState>, "setState"> & {
     setState(nextStateOrUpdater: FormStoreState | Partial<FormStoreState> | ((state: WritableDraft<FormStoreState>) => void), shouldReplace?: boolean | undefined): void;

package/browser/internal/state/createFormStore.js

@@ -29,6 +29,7 @@ const defaultFormState = {
         throw new Error("Submit called before form was initialized.");
     },
     resetFormElement: noOp,
+    getValues: () => new FormData(),
 };
 const createFormState = (formId, set, get) => ({
     // It's not "hydrated" until the form props are synced
@@ -114,6 +115,11 @@ const createFormState = (formId, set, get) => ({
         invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
         formElement.submit();
     },
+    getValues: () => {
+        const formElement = get().formElement;
+        invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
+        return new FormData(formElement);
+    },
     resetFormElement: () => { var _a; return (_a = get().formElement) === null || _a === void 0 ? void 0 : _a.reset(); },
 });
 export const useRootFormStore = create()(immer((set, get) => ({

package/browser/internal/state/fieldArray.d.ts

@@ -1,21 +1,28 @@
 import React from "react";
-export declare const FieldArrayContext: React.Context<{
-    defaultValues: any[];
-    name: string;
-} | null>;
-export declare type FieldArrayHelpers = {
-    push: (item: any) => void;
+export declare type FieldArrayValidationBehavior = "onChange" | "onSubmit";
+export declare type FieldArrayValidationBehaviorOptions = {
+    initial: FieldArrayValidationBehavior;
+    whenSubmitted: FieldArrayValidationBehavior;
+};
+export declare type FieldArrayHelpers<Item = any> = {
+    push: (item: Item) => void;
     swap: (indexA: number, indexB: number) => void;
     move: (from: number, to: number) => void;
-    insert: (index: number, value: any) => void;
-    unshift: () => void;
+    insert: (index: number, value: Item) => void;
+    unshift: (value: Item) => void;
     remove: (index: number) => void;
     pop: () => void;
-    replace: (index: number, value: any) => void;
+    replace: (index: number, value: Item) => void;
+};
+export declare type UseFieldArrayOptions = {
+    formId?: string;
+    validationBehavior?: Partial<FieldArrayValidationBehaviorOptions>;
 };
+export declare function useFieldArray<Item = any>(name: string, { formId, validationBehavior }?: UseFieldArrayOptions): [itemDefaults: Item[], helpers: FieldArrayHelpers<any>, error: string | undefined];
 export declare type FieldArrayProps = {
     name: string;
-    children: (itemDefaults: any[], helpers: FieldArrayHelpers) => React.ReactNode;
+    children: (itemDefaults: any[], helpers: FieldArrayHelpers, error: string | undefined) => React.ReactNode;
     formId?: string;
+    validationBehavior?: FieldArrayValidationBehaviorOptions;
 };
-export declare const FieldArray: ({ name, children, formId }: FieldArrayProps) => JSX.Element;
+export declare const FieldArray: ({ name, children, formId, validationBehavior, }: FieldArrayProps) => React.ReactNode;

package/browser/internal/state/fieldArray.js

@@ -1,50 +1,73 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, createContext } from "react";
+import { useMemo } from "react";
+import { useCallback } from "react";
 import invariant from "tiny-invariant";
-import { useInternalFormContext } from "../hooks";
-import { useControllableValue } from "./controlledFields";
+import { useFieldDefaultValue, useFieldError, useInternalFormContext, useInternalHasBeenSubmitted, useValidateField, } from "../hooks";
+import { useRegisterControlledField } from "./controlledFields";
 import { useFormStore } from "./storeHooks";
-const useFieldArray = (context, field) => {
-    // TODO: Fieldarrays need to handle/update these things, too:
-    // - touchedFields & fieldErrors should be updated when fields are added/removed
-    // - Could probably move some of these callbacks into the store
-    // - There's a bug where adding a new field to the fieldarray validates the new field.
-    //   - For some reason this only happens in the test-app, but not in the docs app.
-    const [value] = useControllableValue(context, field);
+const useInternalFieldArray = (context, field, validationBehavior) => {
+    const value = useFieldDefaultValue(field, context);
+    useRegisterControlledField(context, field);
+    const hasBeenSubmitted = useInternalHasBeenSubmitted(context.formId);
+    const validateField = useValidateField(context.formId);
+    const error = useFieldError(field, context);
+    const resolvedValidationBehavior = {
+        initial: "onSubmit",
+        whenSubmitted: "onChange",
+        ...validationBehavior,
+    };
+    const behavior = hasBeenSubmitted
+        ? resolvedValidationBehavior.whenSubmitted
+        : resolvedValidationBehavior.initial;
+    const maybeValidate = useCallback(() => {
+        if (behavior === "onChange") {
+            validateField(field);
+        }
+    }, [behavior, field, validateField]);
+    invariant(value === undefined || value === null || Array.isArray(value), `FieldArray: defaultValue value for ${field} must be an array, null, or undefined`);
     const arr = useFormStore(context.formId, (state) => state.controlledFields.array);
     const helpers = useMemo(() => ({
         push: (item) => {
             arr.push(field, item);
+            maybeValidate();
         },
         swap: (indexA, indexB) => {
             arr.swap(field, indexA, indexB);
+            maybeValidate();
         },
         move: (from, to) => {
             arr.move(field, from, to);
+            maybeValidate();
         },
         insert: (index, value) => {
             arr.insert(field, index, value);
+            maybeValidate();
         },
-        unshift: () => {
-            arr.unshift(field);
+        unshift: (value) => {
+            arr.unshift(field, value);
+            maybeValidate();
         },
         remove: (index) => {
             arr.remove(field, index);
+            maybeValidate();
         },
         pop: () => {
             arr.pop(field);
+            maybeValidate();
         },
         replace: (index, value) => {
             arr.replace(field, index, value);
+            maybeValidate();
         },
-    }), [arr, field]);
-    return [value, helpers];
+    }), [arr, field, maybeValidate]);
+    const arrayValue = useMemo(() => value !== null && value !== void 0 ? value : [], [value]);
+    return [arrayValue, helpers, error];
 };
-export const FieldArrayContext = createContext(null);
-export const FieldArray = ({ name, children, formId }) => {
+export function useFieldArray(name, { formId, validationBehavior } = {}) {
     const context = useInternalFormContext(formId, "FieldArray");
-    const [value, helpers] = useFieldArray(context, name);
-    invariant(value === undefined || value === null || Array.isArray(value), `FieldArray: defaultValue value for ${name} must be an array, null, or undefined`);
-    const contextValue = useMemo(() => ({ defaultValues: value !== null && value !== void 0 ? value : [], name }), [name, value]);
-    return (_jsx(FieldArrayContext.Provider, { value: contextValue, children: children(contextValue.defaultValues, helpers) }, void 0));
+    return useInternalFieldArray(context, name, validationBehavior);
+}
+export const FieldArray = ({ name, children, formId, validationBehavior, }) => {
+    const context = useInternalFormContext(formId, "FieldArray");
+    const [value, helpers, error] = useInternalFieldArray(context, name, validationBehavior);
+    return children(value, helpers, error);
 };

package/browser/server.d.ts

@@ -1,5 +1,5 @@
 import { FORM_DEFAULTS_FIELD } from "./internal/constants";
-import { ValidatorError } from "./validation/types";
+import { ValidatorError, ValidationErrorResponseData } from "./validation/types";
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
  * When you return this from your action, `ValidatedForm` on the frontend will automatically
@@ -14,7 +14,7 @@ import { ValidatorError } from "./validation/types";
  * if (result.error) return validationError(result.error, result.submittedData);
  * ```
  */
-export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): Response;
+export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): import("@remix-run/server-runtime").TypedResponse<ValidationErrorResponseData>;
 export declare type FormDefaults = {
     [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
 };

package/browser/server.js

@@ -1,4 +1,4 @@
-import { json } from "@remix-run/server-runtime";
+import { json } from "remix";
 import { formDefaultValuesKey, } from "./internal/constants";
 /**
  * Takes the errors from a `Validator` and returns a `Response`.

package/browser/unreleased/formStateHooks.d.ts

@@ -51,6 +51,10 @@ export declare type FormHelpers = {
      * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
      */
     submit: () => void;
+    /**
+     * Returns the current form values as FormData
+     */
+    getValues: () => FormData;
 };
 /**
  * Returns helpers that can be used to update the form state.

package/browser/unreleased/formStateHooks.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useInternalFormContext, useClearError, useSetTouched, useDefaultValuesForForm, useFieldErrorsForForm, useInternalIsSubmitting, useInternalHasBeenSubmitted, useTouchedFields, useInternalIsValid, useFieldErrors, useValidateField, useValidate, useSetFieldErrors, useResetFormElement, useSyncedDefaultValues, useFormActionProp, useFormSubactionProp, useSubmitForm, } from "../internal/hooks";
+import { useInternalFormContext, useClearError, useSetTouched, useDefaultValuesForForm, useFieldErrorsForForm, useInternalIsSubmitting, useInternalHasBeenSubmitted, useTouchedFields, useInternalIsValid, useFieldErrors, useValidateField, useValidate, useSetFieldErrors, useResetFormElement, useSyncedDefaultValues, useFormActionProp, useFormSubactionProp, useSubmitForm, useFormValues, } from "../internal/hooks";
 /**
  * Returns information about the form.
  *
@@ -53,6 +53,7 @@ export const useFormHelpers = (formId) => {
     const setFieldErrors = useSetFieldErrors(formContext.formId);
     const reset = useResetFormElement(formContext.formId);
     const submit = useSubmitForm(formContext.formId);
+    const getValues = useFormValues(formContext.formId);
     return useMemo(() => ({
         setTouched,
         validateField,
@@ -61,6 +62,7 @@ export const useFormHelpers = (formId) => {
         clearAllErrors: () => setFieldErrors({}),
         reset,
         submit,
+        getValues,
     }), [
         clearError,
         reset,
@@ -69,5 +71,6 @@ export const useFormHelpers = (formId) => {
         submit,
         validate,
         validateField,
+        getValues,
     ]);
 };

package/browser/userFacingFormContext.d.ts

@@ -74,6 +74,10 @@ export declare type FormContextValue = {
      * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
      */
     submit: () => void;
+    /**
+     * Returns the current form values as FormData
+     */
+    getValues: () => FormData;
 };
 /**
  * Provides access to some of the internal state of the form.

package/browser/userFacingFormContext.js

@@ -8,7 +8,7 @@ export const useFormContext = (formId) => {
     // Try to access context so we get our error specific to this hook if it's not there
     const context = useInternalFormContext(formId, "useFormContext");
     const state = useFormState(formId);
-    const { clearError: internalClearError, setTouched, validateField, clearAllErrors, validate, reset, submit, } = useFormHelpers(formId);
+    const { clearError: internalClearError, setTouched, validateField, clearAllErrors, validate, reset, submit, getValues, } = useFormHelpers(formId);
     const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
     const clearError = useCallback((...names) => {
         names.forEach((name) => {
@@ -25,6 +25,7 @@ export const useFormContext = (formId) => {
         validate,
         reset,
         submit,
+        getValues,
     }), [
         clearAllErrors,
         clearError,
@@ -35,5 +36,6 @@ export const useFormContext = (formId) => {
         submit,
         validate,
         validateField,
+        getValues,
     ]);
 };