remix-validated-form 4.5.0-beta.0 → 4.5.1

package/.turbo/turbo-build.log

@@ -3,15 +3,15 @@
 transforming...
 ✓ 319 modules transformed.
 rendering chunks...
-dist/remix-validated-form.cjs.js   45.13 KiB / gzip: 17.03 KiB
-dist/remix-validated-form.cjs.js.map 250.93 KiB
-dist/remix-validated-form.es.js   100.56 KiB / gzip: 23.71 KiB
-dist/remix-validated-form.es.js.map 258.79 KiB
-dist/remix-validated-form.umd.js   45.38 KiB / gzip: 17.15 KiB
-dist/remix-validated-form.umd.js.map 250.91 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 1725ms.
+[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

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Form as RemixForm, useSubmit } from "@remix-run/react";
 import uniq from "lodash/uniq";
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { useIsSubmitting, useIsValid } from "./hooks";
 import { FORM_ID_FIELD } from "./internal/constants";
 import { InternalFormContext, } from "./internal/formContext";
@@ -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();
@@ -163,27 +163,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     useSubmitComplete(hasActiveSubmission, () => {
         endSubmit();
     });
-    let clickedButtonRef = React.useRef();
-    useEffect(() => {
-        let form = formRef.current;
-        if (!form)
-            return;
-        function handleClick(event) {
-            if (!(event.target instanceof HTMLElement))
-                return;
-            let submitButton = event.target.closest("button,input[type=submit]");
-            if (submitButton &&
-                submitButton.form === form &&
-                submitButton.type === "submit") {
-                clickedButtonRef.current = submitButton;
-            }
-        }
-        window.addEventListener("click", handleClick, { capture: true });
-        return () => {
-            window.removeEventListener("click", handleClick, { capture: true });
-        };
-    }, []);
-    const handleSubmit = async (e) => {
+    const handleSubmit = async (e, target, nativeEvent) => {
         startSubmit();
         const result = await validator.validate(getDataFromForm(e.currentTarget));
         if (result.error) {
@@ -200,8 +180,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 endSubmit();
                 return;
             }
-            const submitter = e.nativeEvent
-                .submitter;
+            const submitter = nativeEvent.submitter;
             // We deviate from the remix code here a bit because of our async submit.
             // In remix's `FormImpl`, they use `event.currentTarget` to get the form,
             // but we already have the form in `formRef.current` so we can just use that.
@@ -210,18 +189,17 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             if (fetcher)
                 fetcher.submit(submitter || e.currentTarget);
             else
-                submit(submitter || e.currentTarget, { method, replace });
-            clickedButtonRef.current = null;
+                submit(submitter || target, { replace });
         }
     };
     return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: (e) => {
             e.preventDefault();
-            handleSubmit(e);
+            handleSubmit(e, e.currentTarget, e.nativeEvent);
         }, onReset: (event) => {
             onReset === null || onReset === void 0 ? void 0 : onReset(event);
             if (event.defaultPrevented)
                 return;
             reset();
             resetControlledFields(formId);
-        }, children: _jsxs(InternalFormContext.Provider, { value: contextValue, children: [_jsx(FormResetter, { formRef: formRef, resetAfterSubmit: resetAfterSubmit }, void 0), subaction && (_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), id && _jsx("input", { type: "hidden", value: id, name: FORM_ID_FIELD }, void 0), children] }, void 0) }, void 0));
+        }, children: _jsx(InternalFormContext.Provider, { value: contextValue, children: _jsxs(_Fragment, { children: [_jsx(FormResetter, { formRef: formRef, resetAfterSubmit: resetAfterSubmit }, void 0), subaction && (_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), id && _jsx("input", { type: "hidden", value: id, name: FORM_ID_FIELD }, void 0), children] }, void 0) }, void 0) }, void 0));
 }

package/browser/internal/hooks.d.ts

@@ -18,7 +18,7 @@ export declare const useInternalIsSubmitting: (formId: InternalFormId) => boolea
 export declare const useInternalIsValid: (formId: InternalFormId) => boolean;
 export declare const useInternalHasBeenSubmitted: (formId: InternalFormId) => boolean;
 export declare const useValidateField: (formId: InternalFormId) => (fieldName: string) => Promise<string | null>;
-export declare const useValidate: (formId: InternalFormId) => () => Promise<void>;
+export declare const useValidate: (formId: InternalFormId) => () => Promise<import("..").ValidationResult<unknown>>;
 export declare const useRegisterReceiveFocus: (formId: InternalFormId) => (fieldName: string, handler: () => void) => () => void;
 export declare const useSyncedDefaultValues: (formId: InternalFormId) => {
     [fieldName: string]: any;
@@ -28,5 +28,7 @@ export declare const useTouchedFields: (formId: InternalFormId) => import("..").
 export declare const useFieldErrors: (formId: InternalFormId) => FieldErrors;
 export declare const useSetFieldErrors: (formId: InternalFormId) => (errors: FieldErrors) => void;
 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

@@ -113,5 +113,7 @@ export const useTouchedFields = (formId) => useFormStore(formId, (state) => stat
 export const useFieldErrors = (formId) => useFormStore(formId, (state) => state.fieldErrors);
 export const useSetFieldErrors = (formId) => useFormStore(formId, (state) => state.setFieldErrors);
 export const useResetFormElement = (formId) => useFormStore(formId, (state) => state.resetFormElement);
+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

@@ -1,5 +1,5 @@
 import { WritableDraft } from "immer/dist/internal";
-import { FieldErrors, TouchedFields, Validator } from "../../validation/types";
+import { FieldErrors, TouchedFields, ValidationResult, Validator } from "../../validation/types";
 import { InternalFormId } from "./types";
 export declare type SyncedFormProps = {
     formId?: string;
@@ -39,8 +39,10 @@ export declare type FormState = {
     setHydrated: () => void;
     setFormElement: (formElement: HTMLFormElement | null) => void;
     validateField: (fieldName: string) => Promise<string | null>;
-    validate: () => Promise<void>;
+    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

@@ -22,8 +22,14 @@ const defaultFormState = {
     setHydrated: noOp,
     setFormElement: noOp,
     validateField: async () => null,
-    validate: async () => { },
+    validate: async () => {
+        throw new Error("Validate called before form was initialized.");
+    },
+    submit: async () => {
+        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
@@ -99,9 +105,20 @@ const createFormState = (formId, set, get) => ({
         invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
         const validator = (_a = get().formProps) === null || _a === void 0 ? void 0 : _a.validator;
         invariant(validator, "Cannot validator. This is probably a bug in remix-validated-form.");
-        const { error } = await validator.validate(new FormData(formElement));
-        if (error)
-            get().setFieldErrors(error.fieldErrors);
+        const result = await validator.validate(new FormData(formElement));
+        if (result.error)
+            get().setFieldErrors(result.error.fieldErrors);
+        return result;
+    },
+    submit: () => {
+        const formElement = get().formElement;
+        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(); },
 });

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;