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

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.
+✓ 319 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   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
+
+[vite:dts] Start generate declaration files...
+[vite:dts] Declaration files built in 1849ms.
+
 No name was provided for external module 'react' in output.globals – guessing 'React'
 No name was provided for external module '@remix-run/react' in output.globals – guessing 'react'
 No name was provided for external module '@remix-run/server-runtime' in output.globals – guessing 'serverRuntime'

package/browser/ValidatedForm.js

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

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/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 { FieldErrors, TouchedFields, Validator } from "../../validation/types";
+import { WritableDraft } from "immer/dist/internal";
+import { FieldErrors, TouchedFields, ValidationResult, 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;
@@ -29,12 +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;
 };
-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,37 @@
 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 () => {
+        throw new Error("Validate called before form was initialized.");
+    },
+    submit: async () => {
+        throw new Error("Submit called before form was initialized.");
+    },
+    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 +65,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 +87,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);
@@ -75,9 +104,34 @@ 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.");
-        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();
     },
     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/unreleased/formStateHooks.d.ts

@@ -1,4 +1,4 @@
-import { FieldErrors, TouchedFields } from "../validation/types";
+import { FieldErrors, TouchedFields, ValidationResult } from "../validation/types";
 export declare type FormState = {
     fieldErrors: FieldErrors;
     isSubmitting: boolean;
@@ -33,7 +33,7 @@ export declare type FormHelpers = {
     /**
      * Validate the whole form and populate any errors.
      */
-    validate: () => Promise<void>;
+    validate: () => Promise<ValidationResult<unknown>>;
     /**
      * Clears all errors on the form.
      */
@@ -45,6 +45,12 @@ export declare type FormHelpers = {
      * or clicking a button element with `type="reset"`.
      */
     reset: () => void;
+    /**
+     * Submits the form, running all validations first.
+     *
+     * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
+     */
+    submit: () => void;
 };
 /**
  * Returns helpers that can be used to update the form state.