remix-validated-form 4.1.0 → 4.1.4-beta.0

package/build/internal/state/atomUtils.d.ts

@@ -0,0 +1,38 @@
+import { Atom } from "jotai";
+export declare type InternalFormId = string | symbol;
+export declare const formAtomFamily: <T>(data: T) => {
+    (param: InternalFormId): Atom<T> & {
+        write: (get: {
+            <Value>(atom: Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: Atom<Value_5>, options: {
+                unstable_promise: true;
+            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
+        }, set: {
+            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+        }, update: T | ((prev: T) => T)) => void;
+        onMount?: (<S extends import("jotai/core/atom").SetAtom<T | ((prev: T) => T), void>>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: T;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};
+export declare type FieldAtomKey = {
+    formId: InternalFormId;
+    field: string;
+};
+export declare const fieldAtomFamily: <T extends Atom<unknown>>(func: (key: FieldAtomKey) => T) => {
+    (param: FieldAtomKey): T;
+    remove(param: FieldAtomKey): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
+};

package/build/internal/state/atomUtils.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldAtomFamily = exports.formAtomFamily = void 0;
+const jotai_1 = require("jotai");
+const utils_1 = require("jotai/utils");
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const formAtomFamily = (data) => (0, utils_1.atomFamily)((_) => (0, jotai_1.atom)(data));
+exports.formAtomFamily = formAtomFamily;
+const fieldAtomFamily = (func) => (0, utils_1.atomFamily)(func, isEqual_1.default);
+exports.fieldAtomFamily = fieldAtomFamily;

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

@@ -0,0 +1,66 @@
+import { PrimitiveAtom } from "jotai";
+import { InternalFormId } from "./atomUtils";
+export declare type ValueSerializer = (val: unknown) => string;
+export declare const controlledFieldsAtom: {
+    (param: InternalFormId): import("jotai").Atom<Record<string, PrimitiveAtom<unknown>>> & {
+        write: (get: {
+            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+                unstable_promise: true;
+            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
+        }, set: {
+            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+        }, update: Record<string, PrimitiveAtom<unknown>> | ((prev: Record<string, PrimitiveAtom<unknown>>) => Record<string, PrimitiveAtom<unknown>>)) => void;
+        onMount?: (<S extends (update: Record<string, PrimitiveAtom<unknown>> | ((prev: Record<string, PrimitiveAtom<unknown>>) => Record<string, PrimitiveAtom<unknown>>)) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: Record<string, PrimitiveAtom<unknown>>;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};
+export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
+    write: (get: {
+        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+    } & {
+        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+            unstable_promise: true;
+        }): Value_3 | Promise<Value_3>;
+        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+            unstable_promise: true;
+        }): Value_4 | Promise<Value_4>;
+        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+            unstable_promise: true;
+        }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
+    }, set: {
+        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+    }, update: {
+        formId: InternalFormId;
+        field: string;
+        value: unknown;
+    }) => Promise<void>;
+    onMount?: (<S extends (update: {
+        formId: InternalFormId;
+        field: string;
+        value: unknown;
+    }) => Promise<void>>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+export declare const useAllControlledFields: (formId: InternalFormId) => Record<string, PrimitiveAtom<unknown>>;
+export declare const useControlledFieldValue: (formId: InternalFormId, field: string) => any;
+export declare const useControllableValue: (formId: InternalFormId, field: string) => readonly [any, (value: unknown) => Promise<void>];
+export declare const useFieldSerializer: (formId: InternalFormId, field: string) => ValueSerializer;
+export declare const useRegisterFieldSerializer: (formId: InternalFormId, field: string, serializer?: ValueSerializer | undefined) => void;

package/build/internal/state/controlledFields.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRegisterFieldSerializer = exports.useFieldSerializer = exports.useControllableValue = exports.useControlledFieldValue = exports.useAllControlledFields = exports.setControlledFieldValueAtom = exports.controlledFieldsAtom = void 0;
+const jotai_1 = require("jotai");
+const omit_1 = __importDefault(require("lodash/omit"));
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const state_1 = require("../state");
+const atomUtils_1 = require("./atomUtils");
+exports.controlledFieldsAtom = (0, atomUtils_1.formAtomFamily)({});
+const refCountAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(0));
+const fieldValueAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
+const fieldValueHydratedAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(false));
+const pendingValidateAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
+const valueSerializerAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)({ serializer: JSON.stringify }));
+const registerAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) => {
+    set(refCountAtom({ formId, field }), (prev) => prev + 1);
+    const newRefCount = get(refCountAtom({ formId, field }));
+    if (newRefCount === 1) {
+        set((0, exports.controlledFieldsAtom)(formId), (prev) => ({
+            ...prev,
+            [field]: fieldValueAtom({ formId, field }),
+        }));
+    }
+});
+const unregisterAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) => {
+    set(refCountAtom({ formId, field }), (prev) => prev - 1);
+    const newRefCount = get(refCountAtom({ formId, field }));
+    if (newRefCount === 0) {
+        set((0, exports.controlledFieldsAtom)(formId), (prev) => (0, omit_1.default)(prev, field));
+        fieldValueAtom.remove({ formId, field });
+        pendingValidateAtom.remove({ formId, field });
+    }
+});
+exports.setControlledFieldValueAtom = (0, jotai_1.atom)(null, async (_get, set, { formId, field, value, }) => {
+    set(fieldValueAtom({ formId, field }), value);
+    const pending = pendingValidateAtom({ formId, field });
+    await new Promise((resolve) => set(pending, resolve));
+    set(pending, undefined);
+});
+const useAllControlledFields = (formId) => (0, hooks_1.useFormAtomValue)((0, exports.controlledFieldsAtom)(formId));
+exports.useAllControlledFields = useAllControlledFields;
+const useControlledFieldValue = (formId, field) => {
+    const fieldAtom = fieldValueAtom({ formId, field });
+    const [value, setValue] = (0, hooks_1.useFormAtom)(fieldAtom);
+    const defaultValue = (0, hooks_1.useFieldDefaultValue)(field, { formId });
+    const isHydrated = (0, hooks_1.useFormAtomValue)((0, state_1.isHydratedAtom)(formId));
+    const [isFieldHydrated, setIsFieldHydrated] = (0, hooks_1.useFormAtom)(fieldValueHydratedAtom({ formId, field }));
+    (0, react_1.useEffect)(() => {
+        if (isHydrated && !isFieldHydrated) {
+            setValue({ formId, field, value: defaultValue });
+            setIsFieldHydrated(true);
+        }
+    }, [
+        defaultValue,
+        field,
+        formId,
+        isFieldHydrated,
+        isHydrated,
+        setIsFieldHydrated,
+        setValue,
+    ]);
+    return isFieldHydrated ? value : defaultValue;
+};
+exports.useControlledFieldValue = useControlledFieldValue;
+const useControllableValue = (formId, field) => {
+    const pending = (0, hooks_1.useFormAtomValue)(pendingValidateAtom({ formId, field }));
+    (0, react_1.useEffect)(() => {
+        pending === null || pending === void 0 ? void 0 : pending();
+    }, [pending]);
+    const register = (0, hooks_1.useFormUpdateAtom)(registerAtom);
+    const unregister = (0, hooks_1.useFormUpdateAtom)(unregisterAtom);
+    (0, react_1.useEffect)(() => {
+        register({ formId, field });
+        return () => unregister({ formId, field });
+    }, [field, formId, register, unregister]);
+    const setControlledFieldValue = (0, hooks_1.useFormUpdateAtom)(exports.setControlledFieldValueAtom);
+    const setValue = (0, react_1.useCallback)((value) => setControlledFieldValue({ formId, field, value }), [field, formId, setControlledFieldValue]);
+    const value = (0, exports.useControlledFieldValue)(formId, field);
+    return [value, setValue];
+};
+exports.useControllableValue = useControllableValue;
+const useFieldSerializer = (formId, field) => (0, hooks_1.useFormAtomValue)(valueSerializerAtom({ formId, field })).serializer;
+exports.useFieldSerializer = useFieldSerializer;
+const useRegisterFieldSerializer = (formId, field, serializer) => {
+    const setSerializer = (0, hooks_1.useFormUpdateAtom)(valueSerializerAtom({ formId, field }));
+    (0, react_1.useEffect)(() => {
+        if (serializer)
+            setSerializer({ serializer });
+    }, [serializer, setSerializer]);
+};
+exports.useRegisterFieldSerializer = useRegisterFieldSerializer;

package/build/internal/state-valtio.d.ts

@@ -0,0 +1,62 @@
+import { FieldErrors, TouchedFields } from "..";
+export declare type InternalFormState = {
+    hydrated: boolean;
+    fieldErrors: FieldErrors;
+    isSubmitting: boolean;
+    hasBeenSubmitted: boolean;
+    touchedFields: TouchedFields;
+    action?: string;
+    subaction?: string;
+    defaultValues: {
+        [fieldName: string]: any;
+    };
+    validateField: (fieldName: string) => Promise<string | null>;
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    setFieldValue: (fieldName: string, value: unknown) => void;
+};
+declare type SyncFormArgs = {
+    defaultValues?: {
+        [fieldName: string]: any;
+    };
+    action?: string;
+    subaction?: string;
+    validateField: InternalFormState["validateField"];
+    registerReceiveFocus: InternalFormState["registerReceiveFocus"];
+    setFieldValueForForm: InternalFormState["setFieldValue"];
+};
+declare type StoreState = {
+    forms: {
+        [formId: string | symbol]: InternalFormState;
+    };
+};
+export declare const state: StoreState;
+export declare const registerFormSlice: (formId: string | symbol, { registerReceiveFocus, setFieldValueForForm, validateField, action, defaultValues, subaction, }: SyncFormArgs) => void;
+export declare const unregisterFormSlice: (formId: string | symbol) => void;
+export declare const useFormData: (formId: string | symbol) => {
+    readonly hydrated: boolean;
+    readonly fieldErrors: {
+        readonly [x: string]: string;
+    };
+    readonly isSubmitting: boolean;
+    readonly hasBeenSubmitted: boolean;
+    readonly touchedFields: {
+        readonly [x: string]: boolean;
+    };
+    readonly action?: string | undefined;
+    readonly subaction?: string | undefined;
+    readonly defaultValues: {
+        readonly [x: string]: any;
+    };
+    readonly validateField: (fieldName: string) => Promise<string | null>;
+    readonly registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    readonly setFieldValue: (fieldName: string, value: unknown) => void;
+};
+export declare const startSubmit: (formId: string | symbol) => void;
+export declare const endSubmit: (formId: string | symbol) => void;
+export declare const sync: (formId: string | symbol, { defaultValues, action, subaction, registerReceiveFocus, validateField, setFieldValueForForm, }: SyncFormArgs) => void;
+export declare const clearError: (formId: string | symbol, fieldName: string) => void;
+export declare const addError: (formId: string | symbol, fieldName: string, error: string) => void;
+export declare const setTouched: (formId: string | symbol, fieldName: string, touched: boolean) => void;
+export declare const reset: (formId: string | symbol) => void;
+export declare const setFieldErrors: (formId: string | symbol, fieldErrors: FieldErrors) => void;
+export {};

package/build/internal/state-valtio.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFieldErrors = exports.reset = exports.setTouched = exports.addError = exports.clearError = exports.sync = exports.endSubmit = exports.startSubmit = exports.useFormData = exports.unregisterFormSlice = exports.registerFormSlice = exports.state = void 0;
+const valtio_1 = require("valtio");
+exports.state = (0, valtio_1.proxy)({ forms: {} });
+const registerFormSlice = (formId, { registerReceiveFocus, setFieldValueForForm, validateField, action, defaultValues, subaction, }) => {
+    exports.state.forms[formId] = {
+        hydrated: true,
+        defaultValues: defaultValues !== null && defaultValues !== void 0 ? defaultValues : {},
+        fieldErrors: {},
+        hasBeenSubmitted: false,
+        isSubmitting: false,
+        touchedFields: {},
+        registerReceiveFocus,
+        setFieldValue: setFieldValueForForm,
+        validateField,
+        action,
+        subaction,
+    };
+};
+exports.registerFormSlice = registerFormSlice;
+const unregisterFormSlice = (formId) => {
+    delete exports.state.forms[formId];
+};
+exports.unregisterFormSlice = unregisterFormSlice;
+const unhydratedFormState = {
+    hydrated: false,
+    fieldErrors: {},
+    isSubmitting: false,
+    hasBeenSubmitted: false,
+    touchedFields: {},
+    defaultValues: {},
+    validateField: () => Promise.resolve(null),
+    registerReceiveFocus: () => () => { },
+    setFieldValue: () => { },
+};
+const useFormData = (formId) => {
+    var _a;
+    const snapshot = (0, valtio_1.useSnapshot)(exports.state);
+    return (_a = snapshot.forms[formId]) !== null && _a !== void 0 ? _a : unhydratedFormState;
+};
+exports.useFormData = useFormData;
+const startSubmit = (formId) => {
+    exports.state.forms[formId].isSubmitting = true;
+    exports.state.forms[formId].hasBeenSubmitted = true;
+};
+exports.startSubmit = startSubmit;
+const endSubmit = (formId) => {
+    exports.state.forms[formId].isSubmitting = false;
+};
+exports.endSubmit = endSubmit;
+const sync = (formId, { defaultValues, action, subaction, registerReceiveFocus, validateField, setFieldValueForForm, }) => {
+    exports.state.forms[formId].defaultValues = defaultValues !== null && defaultValues !== void 0 ? defaultValues : {};
+    exports.state.forms[formId].action = action;
+    exports.state.forms[formId].subaction = subaction;
+    exports.state.forms[formId].registerReceiveFocus = registerReceiveFocus;
+    exports.state.forms[formId].validateField = validateField;
+    exports.state.forms[formId].hydrated = true;
+    exports.state.forms[formId].setFieldValue = setFieldValueForForm;
+};
+exports.sync = sync;
+const clearError = (formId, fieldName) => {
+    delete exports.state.forms[formId].fieldErrors[fieldName];
+};
+exports.clearError = clearError;
+const addError = (formId, fieldName, error) => {
+    exports.state.forms[formId].fieldErrors[fieldName] = error;
+};
+exports.addError = addError;
+const setTouched = (formId, fieldName, touched) => {
+    exports.state.forms[formId].touchedFields[fieldName] = touched;
+};
+exports.setTouched = setTouched;
+const reset = (formId) => {
+    exports.state.forms[formId].fieldErrors = {};
+    exports.state.forms[formId].touchedFields = {};
+    exports.state.forms[formId].hasBeenSubmitted = false;
+};
+exports.reset = reset;
+const setFieldErrors = (formId, fieldErrors) => {
+    exports.state.forms[formId].fieldErrors = fieldErrors;
+};
+exports.setFieldErrors = setFieldErrors;

package/build/internal/state-zustand.d.ts

@@ -0,0 +1,47 @@
+import { FieldErrors, TouchedFields } from "..";
+export declare type InternalFormState = {
+    hydrated: boolean;
+    fieldErrors: FieldErrors;
+    isSubmitting: boolean;
+    hasBeenSubmitted: boolean;
+    touchedFields: TouchedFields;
+    action?: string;
+    subaction?: string;
+    defaultValues: {
+        [fieldName: string]: any;
+    };
+    validateField: (fieldName: string) => Promise<string | null>;
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    setFieldValue: (fieldName: string, value: unknown) => void;
+};
+declare type Helpers = {
+    startSubmit: () => void;
+    endSubmit: () => void;
+    sync: (args: SyncFormArgs) => void;
+    clearError: (name: string) => void;
+    addError: (name: string, error: string) => void;
+    setTouched: (name: string, touched: boolean) => void;
+    reset: () => void;
+    setFieldErrors: (fieldErrors: FieldErrors) => void;
+    register: (init: SyncFormArgs) => void;
+    unregister: () => void;
+};
+declare type SyncFormArgs = {
+    defaultValues?: {
+        [fieldName: string]: any;
+    };
+    action?: string;
+    subaction?: string;
+    validateField: InternalFormState["validateField"];
+    registerReceiveFocus: InternalFormState["registerReceiveFocus"];
+    setFieldValueForForm: InternalFormState["setFieldValue"];
+};
+declare type StoreState = {
+    forms: {
+        [formId: string | symbol]: InternalFormState;
+    };
+    form: (formId: string | symbol) => InternalFormState;
+    helpers: (formId: string | symbol) => Helpers;
+};
+export declare const useStore: import("zustand").UseBoundStore<StoreState, import("zustand").StoreApi<StoreState>>;
+export {};

package/build/internal/state-zustand.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStore = void 0;
+const zustand_1 = __importDefault(require("zustand"));
+const immerMiddleware_1 = require("./immerMiddleware");
+const unhydratedFormState = {
+    hydrated: false,
+    fieldErrors: {},
+    isSubmitting: false,
+    hasBeenSubmitted: false,
+    touchedFields: {},
+    defaultValues: {},
+    validateField: () => Promise.resolve(null),
+    registerReceiveFocus: () => () => { },
+    setFieldValue: () => { },
+    // clearError: () => {},
+    // addError: () => {},
+    // setTouched: () => {},
+    // reset: () => {},
+    // startSubmit: () => {},
+    // endSubmit: () => {},
+    // sync: () => {},
+    // setFieldErrors: () => {},
+};
+exports.useStore = (0, zustand_1.default)((0, immerMiddleware_1.immer)((set, get) => ({
+    forms: {},
+    form: (formId) => { var _a; return (_a = get().forms[formId]) !== null && _a !== void 0 ? _a : unhydratedFormState; },
+    helpers: (formId) => ({
+        clearError: (name) => set((state) => {
+            delete state.forms[formId].fieldErrors[name];
+        }),
+        addError: (name, error) => set((state) => {
+            state.forms[formId].fieldErrors[name] = error;
+        }),
+        setTouched: (name, touched) => set((state) => {
+            state.forms[formId].touchedFields[name] = touched;
+        }),
+        reset: () => set((state) => {
+            state.forms[formId].fieldErrors = {};
+            state.forms[formId].touchedFields = {};
+            state.forms[formId].hasBeenSubmitted = false;
+        }),
+        startSubmit: () => set((state) => {
+            state.forms[formId].hasBeenSubmitted = true;
+            state.forms[formId].isSubmitting = true;
+        }),
+        endSubmit: () => set((state) => {
+            state.forms[formId].isSubmitting = false;
+        }),
+        setFieldErrors: (fieldErrors) => {
+            set((state) => {
+                state.forms[formId].fieldErrors = fieldErrors;
+            });
+        },
+        sync: ({ defaultValues, action, subaction, validateField, registerReceiveFocus, setFieldValueForForm, }) => set((state) => {
+            state.forms[formId].defaultValues = defaultValues !== null && defaultValues !== void 0 ? defaultValues : {};
+            state.forms[formId].action = action;
+            state.forms[formId].subaction = subaction;
+            state.forms[formId].registerReceiveFocus = registerReceiveFocus;
+            state.forms[formId].validateField = validateField;
+            state.forms[formId].hydrated = true;
+            state.forms[formId].setFieldValue = setFieldValueForForm;
+        }),
+        unregister: () => {
+            set((state) => {
+                delete state.forms[formId];
+            });
+        },
+        register: ({ defaultValues, action, subaction, validateField, registerReceiveFocus, setFieldValueForForm, }) => {
+            set((state) => {
+                state.forms[formId] = {
+                    defaultValues: defaultValues !== null && defaultValues !== void 0 ? defaultValues : {},
+                    setFieldValue: setFieldValueForForm,
+                    registerReceiveFocus,
+                    validateField,
+                    action,
+                    subaction,
+                    hydrated: true,
+                    fieldErrors: {},
+                    isSubmitting: false,
+                    hasBeenSubmitted: false,
+                    touchedFields: {},
+                    // helpers
+                };
+            });
+        },
+    }),
+})));

package/build/internal/util.d.ts

@@ -2,3 +2,4 @@ import type React from "react";
 export declare const omit: (obj: any, ...keys: string[]) => any;
 export declare const mergeRefs: <T = any>(refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]) => (instance: T | null) => void;
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useDeepEqualsMemo: <T>(item: T) => T;

package/build/internal/util.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsomorphicLayoutEffect = exports.mergeRefs = exports.omit = void 0;
+exports.useDeepEqualsMemo = exports.useIsomorphicLayoutEffect = exports.mergeRefs = exports.omit = void 0;
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
 const react_1 = require("react");
 const omit = (obj, ...keys) => {
     const result = { ...obj };
@@ -24,3 +28,14 @@ const mergeRefs = (refs) => {
 };
 exports.mergeRefs = mergeRefs;
 exports.useIsomorphicLayoutEffect = typeof window !== "undefined" ? react_1.useLayoutEffect : react_1.useEffect;
+const useDeepEqualsMemo = (item) => {
+    const ref = (0, react_1.useRef)(item);
+    const areEqual = ref.current === item || (0, isEqual_1.default)(ref.current, item);
+    (0, react_1.useEffect)(() => {
+        if (!areEqual) {
+            ref.current = item;
+        }
+    });
+    return areEqual ? ref.current : item;
+};
+exports.useDeepEqualsMemo = useDeepEqualsMemo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.1.0",
+  "version": "4.1.4-beta.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -33,13 +33,13 @@
     "validation"
   ],
   "peerDependencies": {
-    "@remix-run/react": "^1.0.6",
-    "@remix-run/server-runtime": "^1.0.6",
+    "@remix-run/react": "1.x",
+    "@remix-run/server-runtime": "1.x",
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@remix-run/react": "^1.0.6",
-    "@remix-run/server-runtime": "^1.0.6",
+    "@remix-run/react": "^1.2.1",
+    "@remix-run/server-runtime": "^1.2.1",
     "@types/lodash": "^4.14.178",
     "@types/react": "^17.0.37",
     "fetch-blob": "^3.1.3",

package/src/ValidatedForm.tsx

@@ -38,6 +38,7 @@ import {
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
   mergeRefs,
+  useDeepEqualsMemo,
   useIsomorphicLayoutEffect as useLayoutEffect,
 } from "./internal/util";
 import { FieldErrors, Validator } from "./validation/types";
@@ -206,7 +207,7 @@ export function ValidatedForm<DataType>({
   children,
   fetcher,
   action,
-  defaultValues: providedDefaultValues,
+  defaultValues: unMemoizedDefaults,
   formRef: formRefProp,
   onReset,
   subaction,
@@ -219,6 +220,7 @@ export function ValidatedForm<DataType>({
 }: FormProps<DataType>) {
   const formId = useFormId(id);
   const formAtom = useFormAtom(formId);
+  const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
   const contextValue = useMemo<InternalFormContextValue>(
     () => ({
       formId,
@@ -325,9 +327,9 @@ export function ValidatedForm<DataType>({
       }
     }
 
-    window.addEventListener("click", handleClick);
+    window.addEventListener("click", handleClick, { capture: true });
     return () => {
-      window.removeEventListener("click", handleClick);
+      window.removeEventListener("click", handleClick, { capture: true });
     };
   }, []);
 
@@ -352,12 +354,18 @@ export function ValidatedForm<DataType>({
         return;
       }
 
-      if (fetcher) fetcher.submit(clickedButtonRef.current || e.currentTarget);
+      // 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);
       else
-        submit(clickedButtonRef.current || e.currentTarget, {
+        submit(clickedButtonRef.current || formRef.current, {
           method,
           replace,
         });
+
       clickedButtonRef.current = null;
     }
   };

package/src/internal/MultiValueMap.ts

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 
 export class MultiValueMap<Key, Value> {
   private dict: Map<Key, Value[]> = new Map();
@@ -30,9 +30,9 @@ export class MultiValueMap<Key, Value> {
 
 export const useMultiValueMap = <Key, Value>() => {
   const ref = useRef<MultiValueMap<Key, Value> | null>(null);
-  return () => {
+  return useCallback(() => {
     if (ref.current) return ref.current;
     ref.current = new MultiValueMap();
     return ref.current;
-  };
+  }, []);
 };

package/src/internal/util.ts

@@ -1,5 +1,6 @@
+import isEqual from "lodash/isEqual";
 import type React from "react";
-import { useEffect, useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 
 export const omit = (obj: any, ...keys: string[]) => {
   const result = { ...obj };
@@ -25,3 +26,14 @@ export const mergeRefs = <T = any>(
 
 export const useIsomorphicLayoutEffect =
   typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export const useDeepEqualsMemo = <T>(item: T): T => {
+  const ref = useRef<T>(item);
+  const areEqual = ref.current === item || isEqual(ref.current, item);
+  useEffect(() => {
+    if (!areEqual) {
+      ref.current = item;
+    }
+  });
+  return areEqual ? ref.current : item;
+};