remix-validated-form 4.4.3 → 4.5.0

package/.turbo/turbo-build.log

@@ -1,15 +1,18 @@
-$ vite build
-vite v2.9.5 building for production...
+$ vite build
+vite v2.9.5 building for production...
 transforming...
-✓ 321 modules transformed.
+✓ 320 modules transformed.
 rendering chunks...
-dist/remix-validated-form.cjs.js   43.88 KiB / gzip: 16.70 KiB
-dist/remix-validated-form.es.js   98.54 KiB / gzip: 23.35 KiB
-dist/remix-validated-form.umd.js   44.13 KiB / gzip: 16.84 KiB
-
-[vite:dts] Start generate declaration files...
-[vite:dts] Declaration files built in 1804ms.
-
+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
+
+[vite:dts] Start generate declaration files...
+[vite:dts] Declaration files built in 1961ms.
+
 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/.turbo/turbo-dev.log

@@ -1,95 +0,0 @@
-$ tsc --module ESNext --outDir ./browser --watch
-c10:51:22 PM - Starting compilation in watch mode...
-
-
-10:51:23 PM - Found 0 errors. Watching for file changes.
-c10:58:01 PM - File change detected. Starting incremental compilation...
-
-src/internal/hooks.ts(149,23): error TS2304: Cannot find name 'formId'.
-src/internal/hooks.ts(151,41): error TS2304: Cannot find name 'defaultDefaultValues'.
-src/unreleased/formStateHooks.ts(18,3): error TS2724: '"../internal/hooks"' has no exported member named 'useSyncedDefaultValues'. Did you mean 'useFieldDefaultValue'?
-
-10:58:02 PM - Found 3 errors. Watching for file changes.
-c10:58:40 PM - File change detected. Starting incremental compilation...
-
-src/internal/hooks.ts(156,23): error TS2304: Cannot find name 'formId'.
-
-10:58:40 PM - Found 1 error. Watching for file changes.
-c10:59:28 PM - File change detected. Starting incremental compilation...
-
-
-10:59:28 PM - Found 0 errors. Watching for file changes.
-c11:00:16 PM - File change detected. Starting incremental compilation...
-
-src/internal/hooks.ts(160,4): error TS1005: ',' expected.
-src/internal/hooks.ts(161,1): error TS1128: Declaration or statement expected.
-
-11:00:16 PM - Found 2 errors. Watching for file changes.
-c11:01:07 PM - File change detected. Starting incremental compilation...
-
-
-11:01:07 PM - Found 0 errors. Watching for file changes.
-c11:01:30 PM - File change detected. Starting incremental compilation...
-
-
-11:01:30 PM - Found 0 errors. Watching for file changes.
-c11:01:50 PM - File change detected. Starting incremental compilation...
-
-
-11:01:50 PM - Found 0 errors. Watching for file changes.
-c11:02:06 PM - File change detected. Starting incremental compilation...
-
-
-11:02:06 PM - Found 0 errors. Watching for file changes.
-c11:04:31 PM - File change detected. Starting incremental compilation...
-
-
-11:04:31 PM - Found 0 errors. Watching for file changes.
-c11:05:28 PM - File change detected. Starting incremental compilation...
-
-
-11:05:28 PM - Found 0 errors. Watching for file changes.
-c11:05:52 PM - File change detected. Starting incremental compilation...
-
-
-11:05:52 PM - Found 0 errors. Watching for file changes.
-c11:06:11 PM - File change detected. Starting incremental compilation...
-
-
-11:06:11 PM - Found 0 errors. Watching for file changes.
-c11:06:33 PM - File change detected. Starting incremental compilation...
-
-
-11:06:33 PM - Found 0 errors. Watching for file changes.
-c11:06:48 PM - File change detected. Starting incremental compilation...
-
-
-11:06:48 PM - Found 0 errors. Watching for file changes.
-c11:08:57 PM - File change detected. Starting incremental compilation...
-
-src/internal/hooks.ts(114,25): error TS2304: Cannot find name 'useCorrectDefaultValues'.
-src/unreleased/formStateHooks.ts(19,3): error TS2305: Module '"../internal/hooks"' has no exported member 'useCorrectDefaultValues'.
-
-11:08:57 PM - Found 2 errors. Watching for file changes.
-c11:09:06 PM - File change detected. Starting incremental compilation...
-
-src/unreleased/formStateHooks.ts(19,3): error TS2305: Module '"../internal/hooks"' has no exported member 'useCorrectDefaultValues'.
-
-11:09:06 PM - Found 1 error. Watching for file changes.
-c11:09:19 PM - File change detected. Starting incremental compilation...
-
-src/unreleased/formStateHooks.ts(48,49): error TS2345: Argument of type 'string | symbol' is not assignable to parameter of type 'InternalFormContextValue'.
-  Type 'string' is not assignable to type 'InternalFormContextValue'.
-
-11:09:19 PM - Found 1 error. Watching for file changes.
-c11:09:34 PM - File change detected. Starting incremental compilation...
-
-src/unreleased/formStateHooks.ts(48,49): error TS2345: Argument of type 'string | symbol' is not assignable to parameter of type 'InternalFormContextValue'.
-  Type 'string' is not assignable to type 'InternalFormContextValue'.
-
-11:09:34 PM - Found 1 error. Watching for file changes.
-c11:09:38 PM - File change detected. Starting incremental compilation...
-
-
-11:09:38 PM - Found 0 errors. Watching for file changes.
-c11:11:35 PM - File change detected. Starting incremental compilat

package/browser/ValidatedForm.js

@@ -1,14 +1,15 @@
-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";
 import { useDefaultValuesFromLoader, useErrorResponseForForm, useHasActiveFormSubmit, useSetFieldErrors, } from "./internal/hooks";
 import { useMultiValueMap } from "./internal/MultiValueMap";
-import { cleanupFormState } from "./internal/state/cleanup";
-import { useControlledFieldStore, useFormStore, } from "./internal/state/storeHooks";
+import { useControlledFieldStore } from "./internal/state/controlledFieldStore";
+import { useRootFormStore, } from "./internal/state/createFormStore";
+import { useFormStore } from "./internal/state/storeHooks";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { mergeRefs, useDeepEqualsMemo, useIsomorphicLayoutEffect as useLayoutEffect, } from "./internal/util";
 const getDataFromForm = (el) => new FormData(el);
@@ -114,16 +115,13 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     const setFieldErrors = useSetFieldErrors(formId);
     const setFieldError = useFormStore(formId, (state) => state.setFieldError);
     const reset = useFormStore(formId, (state) => state.reset);
-    const resetControlledFields = useControlledFieldStore(formId, (state) => state.reset);
+    const resetControlledFields = useControlledFieldStore((state) => state.reset);
     const startSubmit = useFormStore(formId, (state) => state.startSubmit);
     const endSubmit = useFormStore(formId, (state) => state.endSubmit);
     const syncFormProps = useFormStore(formId, (state) => state.syncFormProps);
-    const setHydrated = useFormStore(formId, (state) => state.setHydrated);
     const setFormElementInState = useFormStore(formId, (state) => state.setFormElement);
-    useEffect(() => {
-        setHydrated();
-        return () => cleanupFormState(formId);
-    }, [formId, setHydrated]);
+    const cleanupForm = useRootFormStore((state) => state.cleanupForm);
+    const registerForm = useRootFormStore((state) => state.registerForm);
     const customFocusHandlers = useMultiValueMap();
     const registerReceiveFocus = useCallback((fieldName, handler) => {
         customFocusHandlers().add(fieldName, handler);
@@ -131,6 +129,12 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             customFocusHandlers().remove(fieldName, handler);
         };
     }, [customFocusHandlers]);
+    // TODO: all these hooks running at startup cause extra, unnecessary renders
+    // There must be a nice way to avoid this.
+    useLayoutEffect(() => {
+        registerForm(formId);
+        return () => cleanupForm(formId);
+    }, [cleanupForm, formId, registerForm]);
     useLayoutEffect(() => {
         var _a;
         syncFormProps({
@@ -149,6 +153,9 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         backendDefaultValues,
         validator,
     ]);
+    useLayoutEffect(() => {
+        setFormElementInState(formRef.current);
+    }, [setFormElementInState]);
     useEffect(() => {
         var _a;
         setFieldErrors((_a = backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors) !== null && _a !== void 0 ? _a : {});
@@ -156,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) {
@@ -193,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.
@@ -203,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, { method, replace });
         }
     };
-    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp, setFormElementInState]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: (e) => {
+    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();
-        }, 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));
+            resetControlledFields(formId);
+        }, 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/hooks.d.ts

@@ -64,4 +64,4 @@ export declare const useField: (name: string, options?: {
     formId?: string | undefined;
 } | undefined) => FieldProps;
 export declare const useControlField: <T>(name: string, formId?: string | undefined) => readonly [T, (value: T) => void];
-export declare const useUpdateControlledField: (formId?: string | undefined) => (fieldName: string, value: unknown) => void;
+export declare const useUpdateControlledField: (formId?: string | undefined) => (field: string, value: unknown) => void;

package/browser/internal/hooks.d.ts

@@ -1,7 +1,7 @@
 import { FieldErrors, ValidationErrorResponseData } from "..";
 import { InternalFormContextValue } from "./formContext";
 import { Hydratable } from "./hydratable";
-import { InternalFormId } from "./state/storeFamily";
+import { InternalFormId } from "./state/types";
 export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
 export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
 export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
@@ -18,13 +18,16 @@ 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) => {};
+export declare const useSyncedDefaultValues: (formId: InternalFormId) => {
+    [fieldName: string]: any;
+};
 export declare const useSetTouched: ({ formId }: InternalFormContextValue) => (field: string, touched: boolean) => void;
 export declare const useTouchedFields: (formId: InternalFormId) => import("..").TouchedFields;
 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;

package/browser/internal/hooks.js

@@ -113,5 +113,6 @@ 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; });

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

package/browser/internal/state/arrayUtil.js

@@ -0,0 +1,108 @@
+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];
+    array[indexA] = itemB;
+    array[indexB] = itemA;
+};
+export const move = (array, from, to) => {
+    const [item] = array.splice(from, 1);
+    array.splice(to, 0, item);
+};
+export const insert = (array, index, value) => {
+    array.splice(index, 0, value);
+};
+export const remove = (array, index) => {
+    array.splice(index, 1);
+};
+export const replace = (array, index, value) => {
+    array.splice(index, 1, value);
+};
+if (import.meta.vitest) {
+    const { describe, expect, it } = import.meta.vitest;
+    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]);
+        });
+    });
+    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]);
+        });
+    });
+    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]);
+        });
+    });
+    describe("remove", () => {
+        it("should remove an item at a given index", () => {
+            const array = [1, 2, 3];
+            remove(array, 1);
+            expect(array).toEqual([1, 3]);
+        });
+    });
+    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]);
+        });
+    });
+}

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

@@ -1,24 +1,26 @@
+import { InternalFormId } from "./types";
+export declare type FieldState = {
+    refCount: number;
+    value: unknown;
+    defaultValue?: unknown;
+    hydrated: boolean;
+    valueUpdatePromise: Promise<void> | undefined;
+    resolveValueUpdate: (() => void) | undefined;
+};
 export declare type ControlledFieldState = {
-    fields: {
-        [fieldName: string]: {
-            refCount: number;
-            value: unknown;
-            defaultValue?: unknown;
-            hydrated: boolean;
-            valueUpdatePromise: Promise<void> | undefined;
-            resolveValueUpdate: (() => void) | undefined;
-        } | undefined;
+    forms: {
+        [formId: InternalFormId]: {
+            [fieldName: string]: FieldState | undefined;
+        };
     };
-    register: (fieldName: string) => void;
-    unregister: (fieldName: string) => void;
-    setValue: (fieldName: string, value: unknown) => void;
-    hydrateWithDefault: (fieldName: string, defaultValue: unknown) => void;
-    awaitValueUpdate: (fieldName: string) => Promise<void>;
-    reset: () => void;
-};
-export declare const controlledFieldStore: {
-    (formId: import("./storeFamily").InternalFormId): import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ControlledFieldState>, "setState"> & {
-        setState(nextStateOrUpdater: ControlledFieldState | Partial<ControlledFieldState> | ((state: import("immer/dist/internal").WritableDraft<ControlledFieldState>) => void), shouldReplace?: boolean | undefined): void;
-    }>;
-    remove(formId: import("./storeFamily").InternalFormId): void;
+    register: (formId: InternalFormId, fieldName: string) => void;
+    unregister: (formId: InternalFormId, fieldName: string) => void;
+    getField: (formId: InternalFormId, fieldName: string) => FieldState | undefined;
+    setValue: (formId: InternalFormId, fieldName: string, value: unknown) => void;
+    hydrateWithDefault: (formId: InternalFormId, fieldName: string, defaultValue: unknown) => void;
+    awaitValueUpdate: (formId: InternalFormId, fieldName: string) => Promise<void>;
+    reset: (formId: InternalFormId) => void;
 };
+export declare const useControlledFieldStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ControlledFieldState>, "setState"> & {
+    setState(nextStateOrUpdater: ControlledFieldState | Partial<ControlledFieldState> | ((state: import("immer/dist/internal").WritableDraft<ControlledFieldState>) => void), shouldReplace?: boolean | undefined): void;
+}>;

package/browser/internal/state/controlledFieldStore.js

@@ -1,14 +1,16 @@
 import create from "zustand";
 import { immer } from "zustand/middleware/immer";
-import { storeFamily } from "./storeFamily";
-export const controlledFieldStore = storeFamily(() => create()(immer((set, get, api) => ({
-    fields: {},
-    register: (field) => set((state) => {
-        if (state.fields[field]) {
-            state.fields[field].refCount++;
+export const useControlledFieldStore = create()(immer((set, get) => ({
+    forms: {},
+    register: (formId, field) => set((state) => {
+        if (!state.forms[formId]) {
+            state.forms[formId] = {};
+        }
+        if (state.forms[formId][field]) {
+            state.forms[formId][field].refCount++;
         }
         else {
-            state.fields[field] = {
+            state.forms[formId][field] = {
                 refCount: 1,
                 value: undefined,
                 hydrated: false,
@@ -17,16 +19,23 @@ export const controlledFieldStore = storeFamily(() => create()(immer((set, get,
             };
         }
     }),
-    unregister: (field) => set((state) => {
-        const fieldState = state.fields[field];
+    unregister: (formId, field) => set((state) => {
+        var _a;
+        const formState = (_a = state.forms) === null || _a === void 0 ? void 0 : _a[formId];
+        const fieldState = formState === null || formState === void 0 ? void 0 : formState[field];
         if (!fieldState)
             return;
         fieldState.refCount--;
         if (fieldState.refCount === 0)
-            delete state.fields[field];
+            delete formState[field];
     }),
-    setValue: (field, value) => set((state) => {
-        const fieldState = state.fields[field];
+    getField: (formId, field) => {
+        var _a, _b;
+        return (_b = (_a = get().forms) === null || _a === void 0 ? void 0 : _a[formId]) === null || _b === void 0 ? void 0 : _b[field];
+    },
+    setValue: (formId, field, value) => set((state) => {
+        var _a, _b;
+        const fieldState = (_b = (_a = state.forms) === null || _a === void 0 ? void 0 : _a[formId]) === null || _b === void 0 ? void 0 : _b[field];
         if (!fieldState)
             return;
         fieldState.value = value;
@@ -35,23 +44,27 @@ export const controlledFieldStore = storeFamily(() => create()(immer((set, get,
         });
         fieldState.valueUpdatePromise = promise;
     }),
-    hydrateWithDefault: (field, defaultValue) => set((state) => {
-        const fieldState = state.fields[field];
+    hydrateWithDefault: (formId, field, defaultValue) => set((state) => {
+        var _a;
+        const fieldState = (_a = state.forms[formId]) === null || _a === void 0 ? void 0 : _a[field];
         if (!fieldState)
             return;
         fieldState.value = defaultValue;
         fieldState.defaultValue = defaultValue;
         fieldState.hydrated = true;
     }),
-    awaitValueUpdate: async (field) => {
+    awaitValueUpdate: async (formId, field) => {
         var _a;
-        await ((_a = get().fields[field]) === null || _a === void 0 ? void 0 : _a.valueUpdatePromise);
+        await ((_a = get().getField(formId, field)) === null || _a === void 0 ? void 0 : _a.valueUpdatePromise);
     },
-    reset: () => set((state) => {
-        Object.values(state.fields).forEach((field) => {
+    reset: (formId) => set((state) => {
+        const formState = state.forms[formId];
+        if (!formState)
+            return;
+        Object.values(formState).forEach((field) => {
             if (!field)
                 return;
             field.value = field.defaultValue;
         });
     }),
-}))));
+})));

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

@@ -1,6 +1,6 @@
 import { InternalFormContextValue } from "../formContext";
-import { InternalFormId } from "./storeFamily";
+import { InternalFormId } from "./types";
 export declare const useControlledFieldValue: (context: InternalFormContextValue, field: string) => any;
 export declare const useControllableValue: (context: InternalFormContextValue, field: string) => readonly [any, (value: unknown) => void];
-export declare const useUpdateControllableValue: (formId: InternalFormId) => (fieldName: string, value: unknown) => void;
-export declare const useAwaitValue: (formId: InternalFormId) => (fieldName: string) => Promise<void>;
+export declare const useUpdateControllableValue: (formId: InternalFormId) => (field: string, value: unknown) => void;
+export declare const useAwaitValue: (formId: InternalFormId) => (field: string) => Promise<void>;