remix-validated-form 4.5.0-beta.1 → 4.5.2

package/.turbo/turbo-build.log

@@ -3,15 +3,15 @@
 transforming...
 ✓ 319 modules transformed.
 rendering chunks...
-dist/remix-validated-form.cjs.js   45.48 KiB / gzip: 17.10 KiB
-dist/remix-validated-form.cjs.js.map 252.52 KiB
-dist/remix-validated-form.es.js   101.16 KiB / gzip: 23.79 KiB
-dist/remix-validated-form.es.js.map 260.47 KiB
-dist/remix-validated-form.umd.js   45.73 KiB / gzip: 17.22 KiB
-dist/remix-validated-form.umd.js.map 252.50 KiB
+dist/remix-validated-form.cjs.js   45.46 KiB / gzip: 17.05 KiB
+dist/remix-validated-form.cjs.js.map 252.62 KiB
+dist/remix-validated-form.es.js   101.10 KiB / gzip: 23.71 KiB
+dist/remix-validated-form.es.js.map 260.60 KiB
+dist/remix-validated-form.umd.js   45.71 KiB / gzip: 17.16 KiB
+dist/remix-validated-form.umd.js.map 252.60 KiB
 
 [vite:dts] Start generate declaration files...
-[vite:dts] Declaration files built in 1849ms.
+[vite:dts] Declaration files built in 2049ms.
 
 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'

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/logic/nestedObjectToPathObject.d.ts

@@ -0,0 +1 @@
+export declare const nestedObjectToPathObject: (val: any, acc: Record<string, any>, path: string) => any;

package/browser/internal/logic/nestedObjectToPathObject.js

@@ -0,0 +1,47 @@
+export const nestedObjectToPathObject = (val, acc, path) => {
+    if (Array.isArray(val)) {
+        val.forEach((v, index) => nestedObjectToPathObject(v, acc, `${path}[${index}]`));
+        return acc;
+    }
+    if (typeof val === "object") {
+        Object.entries(val).forEach(([key, value]) => {
+            const nextPath = path ? `${path}.${key}` : key;
+            nestedObjectToPathObject(value, acc, nextPath);
+        });
+        return acc;
+    }
+    if (val !== undefined) {
+        acc[path] = val;
+    }
+    return acc;
+};
+if (import.meta.vitest) {
+    const { describe, expect, it } = import.meta.vitest;
+    describe("nestedObjectToPathObject", () => {
+        it("should return an object with the correct path", () => {
+            const result = nestedObjectToPathObject({
+                a: 1,
+                b: 2,
+                c: { foo: "bar", baz: [true, false] },
+                d: [
+                    { foo: "bar", baz: [true, false] },
+                    { e: true, f: "hi" },
+                ],
+                g: undefined,
+            }, {}, "");
+            expect(result).toEqual({
+                a: 1,
+                b: 2,
+                "c.foo": "bar",
+                "c.baz[0]": true,
+                "c.baz[1]": false,
+                "d[0].foo": "bar",
+                "d[0].baz[0]": true,
+                "d[0].baz[1]": false,
+                "d[1].e": true,
+                "d[1].f": "hi",
+            });
+            expect(Object.keys(result)).toHaveLength(10);
+        });
+    });
+}

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

@@ -0,0 +1,12 @@
+export declare const getArray: (values: any, field: string) => unknown[];
+export declare const swap: (array: unknown[], indexA: number, indexB: number) => void;
+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

@@ -0,0 +1,337 @@
+import lodashGet from "lodash/get";
+import lodashSet from "lodash/set";
+import invariant from "tiny-invariant";
+////
+// All of these array helpers are written in a way that mutates the original array.
+// This is because we're working with immer.
+////
+export const getArray = (values, field) => {
+    const value = lodashGet(values, field);
+    if (value === undefined || value === null) {
+        const newValue = [];
+        lodashSet(values, field, newValue);
+        return newValue;
+    }
+    invariant(Array.isArray(value), `FieldArray: defaultValue value for ${field} must be an array, null, or undefined`);
+    return value;
+};
+export const swap = (array, indexA, indexB) => {
+    const itemA = array[indexA];
+    const itemB = array[indexB];
+    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] = sparseSplice(array, from, 1);
+    sparseSplice(array, to, 0, item);
+};
+export const insert = (array, index, value) => {
+    sparseSplice(array, index, 0, value);
+};
+export const remove = (array, index) => {
+    sparseSplice(array, index, 1);
+};
+export const replace = (array, index, 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 = {
+                d: [
+                    { foo: "bar", baz: [true, false] },
+                    { e: true, f: "hi" },
+                ],
+            };
+            const result = getArray(values, "d[0].baz");
+            const finalValues = {
+                d: [
+                    { foo: "bar", baz: [true, false, true] },
+                    { e: true, f: "hi" },
+                ],
+            };
+            expect(result).toEqual([true, false]);
+            result.push(true);
+            expect(values).toEqual(finalValues);
+        });
+        it("should return an empty array that can be mutated if result is null or undefined", () => {
+            const values = {};
+            const result = getArray(values, "a.foo[0].bar");
+            const finalValues = {
+                a: { foo: [{ bar: ["Bob ross"] }] },
+            };
+            expect(result).toEqual([]);
+            result.push("Bob ross");
+            expect(values).toEqual(finalValues);
+        });
+        it("should throw if the value is defined and not an array", () => {
+            const values = { foo: "foo" };
+            expect(() => getArray(values, "foo")).toThrow();
+        });
+    });
+    describe("swap", () => {
+        it("should swap two items", () => {
+            const array = [1, 2, 3];
+            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", () => {
+            const array = [1, 2, 3];
+            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", () => {
+            const array = [1, 2, 3];
+            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", () => {
+            const array = [1, 2, 3];
+            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", () => {
+            const array = [1, 2, 3];
+            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

@@ -0,0 +1,28 @@
+import React from "react";
+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: Item) => void;
+    unshift: (value: Item) => void;
+    remove: (index: number) => void;
+    pop: () => 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, error: string | undefined) => React.ReactNode;
+    formId?: string;
+    validationBehavior?: FieldArrayValidationBehaviorOptions;
+};
+export declare const FieldArray: ({ name, children, formId, validationBehavior, }: FieldArrayProps) => React.ReactNode;

package/browser/internal/state/fieldArray.js

@@ -0,0 +1,73 @@
+import { useMemo } from "react";
+import { useCallback } from "react";
+import invariant from "tiny-invariant";
+import { useFieldDefaultValue, useFieldError, useInternalFormContext, useInternalHasBeenSubmitted, useValidateField, } from "../hooks";
+import { useRegisterControlledField } from "./controlledFields";
+import { useFormStore } from "./storeHooks";
+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: (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, maybeValidate]);
+    const arrayValue = useMemo(() => value !== null && value !== void 0 ? value : [], [value]);
+    return [arrayValue, helpers, error];
+};
+export function useFieldArray(name, { formId, validationBehavior } = {}) {
+    const context = useInternalFormContext(formId, "FieldArray");
+    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/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.