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

package/dist/types/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/dist/types/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/dist/types/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/dist/types/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/dist/types/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/dist/types/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/dist/types/internal/state/types.d.ts

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

package/dist/types/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.

package/dist/types/userFacingFormContext.d.ts

@@ -1,4 +1,4 @@
-import { FieldErrors, TouchedFields } from "./validation/types";
+import { FieldErrors, TouchedFields, ValidationResult } from "./validation/types";
 export declare type FormContextValue = {
     /**
      * All the errors in all the fields in the form.
@@ -56,7 +56,7 @@ export declare type FormContextValue = {
     /**
      * Validate the whole form and populate any errors.
      */
-    validate: () => Promise<void>;
+    validate: () => Promise<ValidationResult<unknown>>;
     /**
      * Clears all errors on the form.
      */
@@ -68,6 +68,12 @@ export declare type FormContextValue = {
      * 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;
 };
 /**
  * Provides access to some of the internal state of the form.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.4.2",
+  "version": "4.5.0-beta.1",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./dist/remix-validated-form.cjs.js",
   "main": "./dist/remix-validated-form.umd.js",
@@ -41,9 +41,9 @@
     "@remix-run/react": "^1.2.1",
     "@remix-run/server-runtime": "^1.2.1",
     "@types/lodash": "^4.14.178",
-    "@types/react": "^17.0.37",
+    "@types/react": "^18.0.9",
     "fetch-blob": "^3.1.3",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "tsconfig": "*",
     "typescript": "^4.5.3",
     "vite-config": "*"
@@ -52,6 +52,6 @@
     "immer": "^9.0.12",
     "lodash": "^4.17.21",
     "tiny-invariant": "^1.2.0",
-    "zustand": "^4.0.0-rc.0"
+    "zustand": "^4.0.0-rc.1"
   }
 }

package/src/ValidatedForm.tsx

@@ -23,12 +23,12 @@ import {
   useSetFieldErrors,
 } from "./internal/hooks";
 import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
-import { cleanupFormState } from "./internal/state/cleanup";
-import { SyncedFormProps } from "./internal/state/createFormStore";
+import { useControlledFieldStore } from "./internal/state/controlledFieldStore";
 import {
-  useControlledFieldStore,
-  useFormStore,
-} from "./internal/state/storeHooks";
+  SyncedFormProps,
+  useRootFormStore,
+} from "./internal/state/createFormStore";
+import { useFormStore } from "./internal/state/storeHooks";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
   mergeRefs,
@@ -236,23 +236,16 @@ export function ValidatedForm<DataType>({
   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<string, () => void>();
   const registerReceiveFocus: SyncedFormProps["registerReceiveFocus"] =
@@ -266,6 +259,13 @@ export function ValidatedForm<DataType>({
       [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(() => {
     syncFormProps({
       action,
@@ -284,6 +284,10 @@ export function ValidatedForm<DataType>({
     validator,
   ]);
 
+  useLayoutEffect(() => {
+    setFormElementInState(formRef.current);
+  }, [setFormElementInState]);
+
   useEffect(() => {
     setFieldErrors(backendError?.fieldErrors ?? {});
   }, [backendError?.fieldErrors, setFieldErrors, setFieldError]);
@@ -292,33 +296,11 @@ export function ValidatedForm<DataType>({
     endSubmit();
   });
 
-  let clickedButtonRef = React.useRef<any>();
-  useEffect(() => {
-    let form = formRef.current;
-    if (!form) return;
-
-    function handleClick(event: MouseEvent) {
-      if (!(event.target instanceof HTMLElement)) return;
-      let submitButton = event.target.closest<
-        HTMLButtonElement | HTMLInputElement
-      >("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: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (
+    e: FormEvent<HTMLFormElement>,
+    target: typeof e.currentTarget,
+    nativeEvent: HTMLSubmitEvent["nativeEvent"]
+  ) => {
     startSubmit();
     const result = await validator.validate(getDataFromForm(e.currentTarget));
     if (result.error) {
@@ -339,8 +321,7 @@ export function ValidatedForm<DataType>({
         return;
       }
 
-      const submitter = (e as unknown as HTMLSubmitEvent).nativeEvent
-        .submitter as HTMLFormSubmitter | null;
+      const submitter = nativeEvent.submitter as HTMLFormSubmitter | null;
 
       // 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,
@@ -348,15 +329,13 @@ export function ValidatedForm<DataType>({
       // If we use `event.currentTarget` here, it will break because `currentTarget`
       // will have changed since the start of the submission.
       if (fetcher) fetcher.submit(submitter || e.currentTarget);
-      else submit(submitter || e.currentTarget, { method, replace });
-
-      clickedButtonRef.current = null;
+      else submit(submitter || target, { method, replace });
     }
   };
 
   return (
     <Form
-      ref={mergeRefs([formRef, formRefProp, setFormElementInState])}
+      ref={mergeRefs([formRef, formRefProp])}
       {...rest}
       id={id}
       action={action}
@@ -364,22 +343,28 @@ export function ValidatedForm<DataType>({
       replace={replace}
       onSubmit={(e) => {
         e.preventDefault();
-        handleSubmit(e);
+        handleSubmit(
+          e,
+          e.currentTarget,
+          (e as unknown as HTMLSubmitEvent).nativeEvent
+        );
       }}
       onReset={(event) => {
         onReset?.(event);
         if (event.defaultPrevented) return;
         reset();
-        resetControlledFields();
+        resetControlledFields(formId);
       }}
     >
       <InternalFormContext.Provider value={contextValue}>
-        <FormResetter formRef={formRef} resetAfterSubmit={resetAfterSubmit} />
-        {subaction && (
-          <input type="hidden" value={subaction} name="subaction" />
-        )}
-        {id && <input type="hidden" value={id} name={FORM_ID_FIELD} />}
-        {children}
+        <>
+          <FormResetter formRef={formRef} resetAfterSubmit={resetAfterSubmit} />
+          {subaction && (
+            <input type="hidden" value={subaction} name="subaction" />
+          )}
+          {id && <input type="hidden" value={id} name={FORM_ID_FIELD} />}
+          {children}
+        </>
       </InternalFormContext.Provider>
     </Form>
   );

package/src/internal/hooks.ts

@@ -6,8 +6,8 @@ import { FieldErrors, ValidationErrorResponseData } from "..";
 import { formDefaultValuesKey } from "./constants";
 import { InternalFormContext, InternalFormContextValue } from "./formContext";
 import { Hydratable, hydratable } from "./hydratable";
-import { InternalFormId } from "./state/storeFamily";
 import { useFormStore } from "./state/storeHooks";
+import { InternalFormId } from "./state/types";
 
 export const useInternalFormContext = (
   formId?: string | symbol,
@@ -196,6 +196,9 @@ export const useSetFieldErrors = (formId: InternalFormId) =>
 export const useResetFormElement = (formId: InternalFormId) =>
   useFormStore(formId, (state) => state.resetFormElement);
 
+export const useSubmitForm = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.submit);
+
 export const useFormActionProp = (formId: InternalFormId) =>
   useFormStore(formId, (state) => state.formProps?.action);
 

package/src/internal/state/controlledFieldStore.ts

@@ -1,91 +1,112 @@
-import invariant from "tiny-invariant";
 import create from "zustand";
 import { immer } from "zustand/middleware/immer";
-import { storeFamily } from "./storeFamily";
+import { InternalFormId } from "./types";
+
+export type FieldState = {
+  refCount: number;
+  value: unknown;
+  defaultValue?: unknown;
+  hydrated: boolean;
+  valueUpdatePromise: Promise<void> | undefined;
+  resolveValueUpdate: (() => void) | undefined;
+};
 
 export 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;
+  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 const controlledFieldStore = storeFamily(() =>
-  create<ControlledFieldState>()(
-    immer((set, get, api) => ({
-      fields: {},
+export const useControlledFieldStore = create<ControlledFieldState>()(
+  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.forms[formId][field] = {
+            refCount: 1,
+            value: undefined,
+            hydrated: false,
+            valueUpdatePromise: undefined,
+            resolveValueUpdate: undefined,
+          };
+        }
+      }),
 
-      register: (field) =>
-        set((state) => {
-          if (state.fields[field]) {
-            state.fields[field]!.refCount++;
-          } else {
-            state.fields[field] = {
-              refCount: 1,
-              value: undefined,
-              hydrated: false,
-              valueUpdatePromise: undefined,
-              resolveValueUpdate: undefined,
-            };
-          }
-        }),
+    unregister: (formId, field) =>
+      set((state) => {
+        const formState = state.forms?.[formId];
+        const fieldState = formState?.[field];
+        if (!fieldState) return;
 
-      unregister: (field) =>
-        set((state) => {
-          const fieldState = state.fields[field];
-          if (!fieldState) return;
+        fieldState.refCount--;
+        if (fieldState.refCount === 0) delete formState[field];
+      }),
 
-          fieldState.refCount--;
-          if (fieldState.refCount === 0) delete state.fields[field];
-        }),
+    getField: (formId, field) => {
+      return get().forms?.[formId]?.[field];
+    },
 
-      setValue: (field, value) =>
-        set((state) => {
-          const fieldState = state.fields[field];
-          if (!fieldState) return;
+    setValue: (formId, field, value) =>
+      set((state) => {
+        const fieldState = state.forms?.[formId]?.[field];
+        if (!fieldState) return;
 
-          fieldState.value = value;
-          const promise = new Promise<void>((resolve) => {
-            fieldState.resolveValueUpdate = resolve;
-          });
-          fieldState.valueUpdatePromise = promise;
-        }),
+        fieldState.value = value;
+        const promise = new Promise<void>((resolve) => {
+          fieldState.resolveValueUpdate = resolve;
+        });
+        fieldState.valueUpdatePromise = promise;
+      }),
 
-      hydrateWithDefault: (field, defaultValue) =>
-        set((state) => {
-          const fieldState = state.fields[field];
-          if (!fieldState) return;
+    hydrateWithDefault: (formId, field, defaultValue) =>
+      set((state) => {
+        const fieldState = state.forms[formId]?.[field];
+        if (!fieldState) return;
 
-          fieldState.value = defaultValue;
-          fieldState.defaultValue = defaultValue;
-          fieldState.hydrated = true;
-        }),
+        fieldState.value = defaultValue;
+        fieldState.defaultValue = defaultValue;
+        fieldState.hydrated = true;
+      }),
 
-      awaitValueUpdate: async (field) => {
-        await get().fields[field]?.valueUpdatePromise;
-      },
+    awaitValueUpdate: async (formId, field) => {
+      await get().getField(formId, field)?.valueUpdatePromise;
+    },
 
-      reset: () =>
-        set((state) => {
-          Object.values(state.fields).forEach((field) => {
-            if (!field) return;
-            field.value = field.defaultValue;
-          });
-        }),
-    }))
-  )
+    reset: (formId) =>
+      set((state) => {
+        const formState = state.forms[formId];
+        if (!formState) return;
+        Object.values(formState).forEach((field) => {
+          if (!field) return;
+          field.value = field.defaultValue;
+        });
+      }),
+  }))
 );