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

package/.turbo/turbo-build.log

@@ -1,14 +1,17 @@
 $ vite build
 vite v2.9.5 building for production...
 transforming...
-✓ 321 modules transformed.
+✓ 319 modules transformed.
 rendering chunks...
-dist/remix-validated-form.cjs.js   43.85 KiB / gzip: 16.69 KiB
-dist/remix-validated-form.es.js   98.54 KiB / gzip: 23.34 KiB
-dist/remix-validated-form.umd.js   44.10 KiB / gzip: 16.81 KiB
+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
 
 [vite:dts] Start generate declaration files...
-[vite:dts] Declaration files built in 1824ms.
+[vite:dts] Declaration files built in 1725ms.
 
 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

@@ -7,8 +7,9 @@ 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 : {});
@@ -193,22 +200,21 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 endSubmit();
                 return;
             }
+            const submitter = e.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.
             // If we use `event.currentTarget` here, it will break because `currentTarget`
             // will have changed since the start of the submission.
             if (fetcher)
-                fetcher.submit(clickedButtonRef.current || formRef.current);
+                fetcher.submit(submitter || e.currentTarget);
             else
-                submit(clickedButtonRef.current || formRef.current, {
-                    method,
-                    replace,
-                });
+                submit(submitter || e.currentTarget, { method, replace });
             clickedButtonRef.current = null;
         }
     };
-    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);
         }, onReset: (event) => {
@@ -216,6 +222,6 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             if (event.defaultPrevented)
                 return;
             reset();
-            resetControlledFields();
+            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));
 }

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>;

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>;

package/browser/internal/state/controlledFields.js

@@ -1,20 +1,19 @@
 import { useCallback, useEffect } from "react";
 import { useFieldDefaultValue } from "../hooks";
-import { controlledFieldStore } from "./controlledFieldStore";
-import { formStore } from "./createFormStore";
+import { useControlledFieldStore } from "./controlledFieldStore";
+import { useFormStore } from "./storeHooks";
 export const useControlledFieldValue = (context, field) => {
-    const useValueStore = controlledFieldStore(context.formId);
-    const value = useValueStore((state) => { var _a; return (_a = state.fields[field]) === null || _a === void 0 ? void 0 : _a.value; });
-    const useFormStore = formStore(context.formId);
-    const isFormHydrated = useFormStore((state) => state.isHydrated);
+    const value = useControlledFieldStore((state) => { var _a; return (_a = state.getField(context.formId, field)) === null || _a === void 0 ? void 0 : _a.value; });
+    const isFormHydrated = useFormStore(context.formId, (state) => state.isHydrated);
     const defaultValue = useFieldDefaultValue(field, context);
-    const isFieldHydrated = useValueStore((state) => { var _a, _b; return (_b = (_a = state.fields[field]) === null || _a === void 0 ? void 0 : _a.hydrated) !== null && _b !== void 0 ? _b : false; });
-    const hydrateWithDefault = useValueStore((state) => state.hydrateWithDefault);
+    const isFieldHydrated = useControlledFieldStore((state) => { var _a, _b; return (_b = (_a = state.getField(context.formId, field)) === null || _a === void 0 ? void 0 : _a.hydrated) !== null && _b !== void 0 ? _b : false; });
+    const hydrateWithDefault = useControlledFieldStore((state) => state.hydrateWithDefault);
     useEffect(() => {
         if (isFormHydrated && !isFieldHydrated) {
-            hydrateWithDefault(field, defaultValue);
+            hydrateWithDefault(context.formId, field, defaultValue);
         }
     }, [
+        context.formId,
         defaultValue,
         field,
         hydrateWithDefault,
@@ -24,27 +23,26 @@ export const useControlledFieldValue = (context, field) => {
     return isFieldHydrated ? value : defaultValue;
 };
 export const useControllableValue = (context, field) => {
-    const useValueStore = controlledFieldStore(context.formId);
-    const resolveUpdate = useValueStore((state) => { var _a; return (_a = state.fields[field]) === null || _a === void 0 ? void 0 : _a.resolveValueUpdate; });
+    const resolveUpdate = useControlledFieldStore((state) => { var _a; return (_a = state.getField(context.formId, field)) === null || _a === void 0 ? void 0 : _a.resolveValueUpdate; });
     useEffect(() => {
         resolveUpdate === null || resolveUpdate === void 0 ? void 0 : resolveUpdate();
     }, [resolveUpdate]);
-    const register = useValueStore((state) => state.register);
-    const unregister = useValueStore((state) => state.unregister);
+    const register = useControlledFieldStore((state) => state.register);
+    const unregister = useControlledFieldStore((state) => state.unregister);
     useEffect(() => {
-        register(field);
-        return () => unregister(field);
+        register(context.formId, field);
+        return () => unregister(context.formId, field);
     }, [context.formId, field, register, unregister]);
-    const setControlledFieldValue = useValueStore((state) => state.setValue);
-    const setValue = useCallback((value) => setControlledFieldValue(field, value), [field, setControlledFieldValue]);
+    const setControlledFieldValue = useControlledFieldStore((state) => state.setValue);
+    const setValue = useCallback((value) => setControlledFieldValue(context.formId, field, value), [context.formId, field, setControlledFieldValue]);
     const value = useControlledFieldValue(context, field);
     return [value, setValue];
 };
 export const useUpdateControllableValue = (formId) => {
-    const useValueStore = controlledFieldStore(formId);
-    return useValueStore((state) => state.setValue);
+    const setValue = useControlledFieldStore((state) => state.setValue);
+    return useCallback((field, value) => setValue(formId, field, value), [formId, setValue]);
 };
 export const useAwaitValue = (formId) => {
-    const useValueStore = controlledFieldStore(formId);
-    return useValueStore((state) => state.awaitValueUpdate);
+    const awaitValue = useControlledFieldStore((state) => state.awaitValueUpdate);
+    return useCallback((field) => awaitValue(formId, field), [awaitValue, formId]);
 };

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

@@ -1,4 +1,6 @@
+import { WritableDraft } from "immer/dist/internal";
 import { FieldErrors, TouchedFields, Validator } from "../../validation/types";
+import { InternalFormId } from "./types";
 export declare type SyncedFormProps = {
     formId?: string;
     action?: string;
@@ -9,6 +11,14 @@ export declare type SyncedFormProps = {
     registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
     validator: Validator<unknown>;
 };
+export declare type FormStoreState = {
+    forms: {
+        [formId: InternalFormId]: FormState;
+    };
+    form: (formId: InternalFormId) => FormState;
+    registerForm: (formId: InternalFormId) => void;
+    cleanupForm: (formId: InternalFormId) => void;
+};
 export declare type FormState = {
     isHydrated: boolean;
     isSubmitting: boolean;
@@ -32,9 +42,6 @@ export declare type FormState = {
     validate: () => Promise<void>;
     resetFormElement: () => void;
 };
-export declare const formStore: {
-    (formId: import("./storeFamily").InternalFormId): import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormState>, "setState"> & {
-        setState(nextStateOrUpdater: FormState | Partial<FormState> | ((state: import("immer/dist/internal").WritableDraft<FormState>) => void), shouldReplace?: boolean | undefined): void;
-    }>;
-    remove(formId: import("./storeFamily").InternalFormId): void;
-};
+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

@@ -1,9 +1,32 @@
 import invariant from "tiny-invariant";
 import create from "zustand";
 import { immer } from "zustand/middleware/immer";
-import { controlledFieldStore } from "./controlledFieldStore";
-import { storeFamily } from "./storeFamily";
-export const formStore = storeFamily((formId) => create()(immer((set, get, api) => ({
+import { useControlledFieldStore } from "./controlledFieldStore";
+const noOp = () => { };
+const defaultFormState = {
+    isHydrated: false,
+    isSubmitting: false,
+    hasBeenSubmitted: false,
+    touchedFields: {},
+    fieldErrors: {},
+    formElement: null,
+    isValid: () => true,
+    startSubmit: noOp,
+    endSubmit: noOp,
+    setTouched: noOp,
+    setFieldError: noOp,
+    setFieldErrors: noOp,
+    clearFieldError: noOp,
+    reset: () => noOp,
+    syncFormProps: noOp,
+    setHydrated: noOp,
+    setFormElement: noOp,
+    validateField: async () => null,
+    validate: async () => { },
+    resetFormElement: noOp,
+};
+const createFormState = (formId, set, get) => ({
+    // It's not "hydrated" until the form props are synced
     isHydrated: false,
     isSubmitting: false,
     hasBeenSubmitted: false,
@@ -37,6 +60,7 @@ export const formStore = storeFamily((formId) => create()(immer((set, get, api)
     }),
     syncFormProps: (props) => set((state) => {
         state.formProps = props;
+        state.isHydrated = true;
     }),
     setHydrated: () => set((state) => {
         state.isHydrated = true;
@@ -58,7 +82,7 @@ export const formStore = storeFamily((formId) => create()(immer((set, get, api)
         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.");
-        await ((_c = (_b = controlledFieldStore(formId).getState()).awaitValueUpdate) === null || _c === void 0 ? void 0 : _c.call(_b, field));
+        await ((_c = (_b = useControlledFieldStore.getState()).awaitValueUpdate) === null || _c === void 0 ? void 0 : _c.call(_b, formId, field));
         const { error } = await validator.validateField(new FormData(formElement), field);
         if (error) {
             get().setFieldError(field, error);
@@ -80,4 +104,23 @@ export const formStore = storeFamily((formId) => create()(immer((set, get, api)
             get().setFieldErrors(error.fieldErrors);
     },
     resetFormElement: () => { var _a; return (_a = get().formElement) === null || _a === void 0 ? void 0 : _a.reset(); },
-}))));
+});
+export const useRootFormStore = create()(immer((set, get) => ({
+    forms: {},
+    form: (formId) => {
+        var _a;
+        return (_a = get().forms[formId]) !== null && _a !== void 0 ? _a : defaultFormState;
+    },
+    cleanupForm: (formId) => {
+        set((state) => {
+            delete state.forms[formId];
+        });
+    },
+    registerForm: (formId) => {
+        if (get().forms[formId])
+            return;
+        set((state) => {
+            state.forms[formId] = createFormState(formId, (setter) => set((state) => setter(state.forms[formId])), () => get().forms[formId]);
+        });
+    },
+})));

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

@@ -1,5 +1,3 @@
-import { ControlledFieldState } from "./controlledFieldStore";
 import { FormState } from "./createFormStore";
-import { InternalFormId } from "./storeFamily";
+import { InternalFormId } from "./types";
 export declare const useFormStore: <T>(formId: InternalFormId, selector: (state: FormState) => T) => T;
-export declare const useControlledFieldStore: <T>(formId: InternalFormId, selector: (state: ControlledFieldState) => T) => T;

package/browser/internal/state/storeHooks.js

@@ -1,10 +1,4 @@
-import { controlledFieldStore, } from "./controlledFieldStore";
-import { formStore } from "./createFormStore";
+import { useRootFormStore } from "./createFormStore";
 export const useFormStore = (formId, selector) => {
-    const useStore = formStore(formId);
-    return useStore(selector);
-};
-export const useControlledFieldStore = (formId, selector) => {
-    const useStore = controlledFieldStore(formId);
-    return useStore(selector);
+    return useRootFormStore((state) => selector(state.form(formId)));
 };

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

@@ -0,0 +1 @@
+export declare type InternalFormId = string | symbol;

package/browser/internal/state/types.js

@@ -0,0 +1 @@
+export {};

package/browser/userFacingFormContext.d.ts

@@ -61,6 +61,13 @@ export declare type FormContextValue = {
      * Clears all errors on the form.
      */
     clearAllErrors: () => void;
+    /**
+     * Resets the form.
+     *
+     * _Note_: The equivalent behavior can be achieved by calling formElement.reset()
+     * or clicking a button element with `type="reset"`.
+     */
+    reset: () => void;
 };
 /**
  * Provides access to some of the internal state of the form.

package/browser/userFacingFormContext.js

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useInternalFormContext, useRegisterReceiveFocus, } from "./internal/hooks";
 import { useFormHelpers, useFormState } from "./unreleased/formStateHooks";
 /**
@@ -8,14 +8,14 @@ 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, } = useFormHelpers(formId);
+    const { clearError: internalClearError, setTouched, validateField, clearAllErrors, validate, reset, } = useFormHelpers(formId);
     const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
     const clearError = useCallback((...names) => {
         names.forEach((name) => {
             internalClearError(name);
         });
     }, [internalClearError]);
-    return {
+    return useMemo(() => ({
         ...state,
         setFieldTouched: setTouched,
         validateField,
@@ -23,5 +23,15 @@ export const useFormContext = (formId) => {
         registerReceiveFocus,
         clearAllErrors,
         validate,
-    };
+        reset,
+    }), [
+        clearAllErrors,
+        clearError,
+        registerReceiveFocus,
+        reset,
+        setTouched,
+        state,
+        validate,
+        validateField,
+    ]);
 };