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

package/browser/internal/setFieldValue.js

@@ -0,0 +1,83 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ValidatedFormData_data, _ValidatedFormData_updates, _a;
+import { useAtomCallback } from "jotai/utils";
+import groupBy from "lodash/groupBy";
+import mapValues from "lodash/mapValues";
+import invariant from "tiny-invariant";
+import { setInputValueInForm } from "./logic/setInputValueInForm";
+import { MultiValueMap } from "./MultiValueMap";
+import { ATOM_SCOPE, formElementAtom } from "./state";
+import { controlledFieldsAtom, setControlledFieldValueAtom, } from "./state/controlledFields";
+class ValidatedFormData {
+    constructor(formData, customData) {
+        _ValidatedFormData_data.set(this, new MultiValueMap());
+        _ValidatedFormData_updates.set(this, new Map());
+        // API to mimic form data
+        this.get = (fieldName) => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").getAll(fieldName)[0];
+        this.getAll = (fieldName) => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").getAll(fieldName);
+        this.has = (fieldName) => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").has(fieldName);
+        this.append = (fieldName, value) => {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").add(fieldName, value);
+        };
+        this.delete = (fieldName) => {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").delete(fieldName);
+            __classPrivateFieldGet(this, _ValidatedFormData_updates, "f").set(fieldName, true);
+        };
+        this.set = (fieldName, value) => {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").delete(fieldName);
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").add(fieldName, value);
+            __classPrivateFieldGet(this, _ValidatedFormData_updates, "f").set(fieldName, true);
+        };
+        this.entries = () => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").entries();
+        this.values = () => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").values();
+        this[_a] = () => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").entries();
+        // Custom APIs
+        this.setRepeated = (fieldName, value) => {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").delete(fieldName);
+            value.forEach((val) => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").add(fieldName, val));
+            __classPrivateFieldGet(this, _ValidatedFormData_updates, "f").set(fieldName, true);
+        };
+        for (const [key, value] of formData.entries()) {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").add(key, value);
+        }
+        Object.entries(customData).forEach(([name, values]) => {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").delete(name);
+            values.forEach((value) => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").add(name, value));
+        });
+    }
+    *changedFields() {
+        for (const updatedField of __classPrivateFieldGet(this, _ValidatedFormData_updates, "f").keys()) {
+            const value = this.getAll(updatedField);
+            yield [updatedField, value];
+        }
+    }
+}
+_ValidatedFormData_data = new WeakMap(), _ValidatedFormData_updates = new WeakMap(), _a = Symbol.iterator;
+export const useSetFormValues = (formId) => useAtomCallback(async (get, set, update) => {
+    var _b;
+    const form = get(formElementAtom(formId));
+    invariant(form, "Unable to access form element when setting field value. This is likely a bug in remix-validated-form.");
+    const formData = new FormData(form);
+    const controlledFields = get(controlledFieldsAtom(formId));
+    const controlledData = mapValues(groupBy(controlledFields, (field) => field.name), (val) => val.map((field) => get(field.valueAtom)));
+    const validatedFormData = new ValidatedFormData(formData, controlledData);
+    update(validatedFormData);
+    for (const [field, value] of validatedFormData.changedFields()) {
+        const relevantFields = controlledFields.filter(({ name }) => name === field);
+        if (relevantFields.length === 0) {
+            setInputValueInForm(form, field, value);
+            return;
+        }
+        for (const [index, field] of relevantFields.entries()) {
+            const itemValue = (_b = value[index]) !== null && _b !== void 0 ? _b : "";
+            await set(setControlledFieldValueAtom, {
+                internalFieldId: field.internalId,
+                value: itemValue,
+            });
+        }
+    }
+}, ATOM_SCOPE);

package/browser/internal/setFormValues.d.ts

@@ -0,0 +1,2 @@
+import { InternalFormId } from "./state/atomUtils";
+export declare const useSetFormValues: (formId: InternalFormId) => (arg: Record<string, unknown>) => Promise<void>;

package/browser/internal/setFormValues.js

@@ -0,0 +1,26 @@
+import { useAtomCallback } from "jotai/utils";
+import { useCallback } from "react";
+import invariant from "tiny-invariant";
+import { setInputValueInForm } from "./logic/setInputValueInForm";
+import { ATOM_SCOPE, formElementAtom } from "./state";
+import { controlledFieldsAtom, setControlledFieldValueAtom, } from "./state/controlledFields";
+export const useSetFormValues = (formId) => useAtomCallback(useCallback(async (get, set, updatedValues) => {
+    const form = get(formElementAtom(formId));
+    invariant(form, "Unable to access form element when setting field value. This is likely a bug in remix-validated-form.");
+    const controlledFields = get(controlledFieldsAtom(formId));
+    const updatePromises = [];
+    for (const [field, value] of Object.entries(updatedValues)) {
+        const isControlled = !!controlledFields[field];
+        if (isControlled) {
+            updatePromises.push(set(setControlledFieldValueAtom, {
+                field,
+                formId,
+                value,
+            }));
+        }
+        else {
+            setInputValueInForm(form, field, Array.isArray(value) ? value : [value]);
+        }
+    }
+    await Promise.all(updatePromises);
+}, [formId]), ATOM_SCOPE);

package/browser/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/browser/internal/state/atomUtils.js

@@ -0,0 +1,5 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import isEqual from "lodash/isEqual";
+export const formAtomFamily = (data) => atomFamily((_) => atom(data));
+export const fieldAtomFamily = (func) => atomFamily(func, isEqual);

package/browser/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/browser/internal/state/controlledFields.js

@@ -0,0 +1,93 @@
+import { atom } from "jotai";
+import omit from "lodash/omit";
+import { useCallback, useEffect } from "react";
+import { useFieldDefaultValue, useFormAtomValue, useFormAtom, useFormUpdateAtom, } from "../hooks";
+import { isHydratedAtom } from "../state";
+import { fieldAtomFamily, formAtomFamily, } from "./atomUtils";
+export const controlledFieldsAtom = formAtomFamily({});
+const refCountAtom = fieldAtomFamily(() => atom(0));
+const fieldValueAtom = fieldAtomFamily(() => atom(undefined));
+const fieldValueHydratedAtom = fieldAtomFamily(() => atom(false));
+const pendingValidateAtom = fieldAtomFamily(() => atom(undefined));
+const valueSerializerAtom = fieldAtomFamily(() => atom({
+    serializer: (value) => {
+        if (value === undefined)
+            return "";
+        return JSON.stringify(value);
+    },
+}));
+const registerAtom = atom(null, (get, set, { formId, field }) => {
+    set(refCountAtom({ formId, field }), (prev) => prev + 1);
+    const newRefCount = get(refCountAtom({ formId, field }));
+    // We don't set hydrated here because it gets set when we know
+    // we have the right default values
+    if (newRefCount === 1) {
+        set(controlledFieldsAtom(formId), (prev) => ({
+            ...prev,
+            [field]: fieldValueAtom({ formId, field }),
+        }));
+    }
+});
+const unregisterAtom = atom(null, (get, set, { formId, field }) => {
+    set(refCountAtom({ formId, field }), (prev) => prev - 1);
+    const newRefCount = get(refCountAtom({ formId, field }));
+    if (newRefCount === 0) {
+        set(controlledFieldsAtom(formId), (prev) => omit(prev, field));
+        fieldValueAtom.remove({ formId, field });
+        pendingValidateAtom.remove({ formId, field });
+        fieldValueHydratedAtom.remove({ formId, field });
+    }
+});
+export const setControlledFieldValueAtom = 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);
+});
+export const useAllControlledFields = (formId) => useFormAtomValue(controlledFieldsAtom(formId));
+export const useControlledFieldValue = (formId, field) => {
+    const fieldAtom = fieldValueAtom({ formId, field });
+    const [value, setValue] = useFormAtom(fieldAtom);
+    const defaultValue = useFieldDefaultValue(field, { formId });
+    const isHydrated = useFormAtomValue(isHydratedAtom(formId));
+    const [isFieldHydrated, setIsFieldHydrated] = useFormAtom(fieldValueHydratedAtom({ formId, field }));
+    useEffect(() => {
+        if (isHydrated && !isFieldHydrated) {
+            setValue(defaultValue);
+            setIsFieldHydrated(true);
+        }
+    }, [
+        defaultValue,
+        field,
+        formId,
+        isFieldHydrated,
+        isHydrated,
+        setIsFieldHydrated,
+        setValue,
+    ]);
+    return isFieldHydrated ? value : defaultValue;
+};
+export const useControllableValue = (formId, field) => {
+    const pending = useFormAtomValue(pendingValidateAtom({ formId, field }));
+    useEffect(() => {
+        pending === null || pending === void 0 ? void 0 : pending();
+    }, [pending]);
+    const register = useFormUpdateAtom(registerAtom);
+    const unregister = useFormUpdateAtom(unregisterAtom);
+    useEffect(() => {
+        register({ formId, field });
+        return () => unregister({ formId, field });
+    }, [field, formId, register, unregister]);
+    const setControlledFieldValue = useFormUpdateAtom(setControlledFieldValueAtom);
+    const setValue = useCallback((value) => setControlledFieldValue({ formId, field, value }), [field, formId, setControlledFieldValue]);
+    const value = useControlledFieldValue(formId, field);
+    return [value, setValue];
+};
+export const useFieldSerializer = (formId, field) => useFormAtomValue(valueSerializerAtom({ formId, field })).serializer;
+export const useRegisterFieldSerializer = (formId, field, serializer) => {
+    const setSerializer = useFormUpdateAtom(valueSerializerAtom({ formId, field }));
+    useEffect(() => {
+        if (serializer)
+            setSerializer({ serializer });
+    }, [serializer, setSerializer]);
+};

package/browser/internal/state/setFieldValue.js

@@ -0,0 +1 @@
+"use strict";

package/browser/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/browser/internal/state-valtio.js

@@ -0,0 +1,69 @@
+import { proxy, useSnapshot } from "valtio";
+export const state = proxy({ forms: {} });
+export const registerFormSlice = (formId, { registerReceiveFocus, setFieldValueForForm, validateField, action, defaultValues, subaction, }) => {
+    state.forms[formId] = {
+        hydrated: true,
+        defaultValues: defaultValues !== null && defaultValues !== void 0 ? defaultValues : {},
+        fieldErrors: {},
+        hasBeenSubmitted: false,
+        isSubmitting: false,
+        touchedFields: {},
+        registerReceiveFocus,
+        setFieldValue: setFieldValueForForm,
+        validateField,
+        action,
+        subaction,
+    };
+};
+export const unregisterFormSlice = (formId) => {
+    delete state.forms[formId];
+};
+const unhydratedFormState = {
+    hydrated: false,
+    fieldErrors: {},
+    isSubmitting: false,
+    hasBeenSubmitted: false,
+    touchedFields: {},
+    defaultValues: {},
+    validateField: () => Promise.resolve(null),
+    registerReceiveFocus: () => () => { },
+    setFieldValue: () => { },
+};
+export const useFormData = (formId) => {
+    var _a;
+    const snapshot = useSnapshot(state);
+    return (_a = snapshot.forms[formId]) !== null && _a !== void 0 ? _a : unhydratedFormState;
+};
+export const startSubmit = (formId) => {
+    state.forms[formId].isSubmitting = true;
+    state.forms[formId].hasBeenSubmitted = true;
+};
+export const endSubmit = (formId) => {
+    state.forms[formId].isSubmitting = false;
+};
+export const sync = (formId, { defaultValues, action, subaction, registerReceiveFocus, validateField, setFieldValueForForm, }) => {
+    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;
+};
+export const clearError = (formId, fieldName) => {
+    delete state.forms[formId].fieldErrors[fieldName];
+};
+export const addError = (formId, fieldName, error) => {
+    state.forms[formId].fieldErrors[fieldName] = error;
+};
+export const setTouched = (formId, fieldName, touched) => {
+    state.forms[formId].touchedFields[fieldName] = touched;
+};
+export const reset = (formId) => {
+    state.forms[formId].fieldErrors = {};
+    state.forms[formId].touchedFields = {};
+    state.forms[formId].hasBeenSubmitted = false;
+};
+export const setFieldErrors = (formId, fieldErrors) => {
+    state.forms[formId].fieldErrors = fieldErrors;
+};

package/browser/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/browser/internal/state-zustand.js

@@ -0,0 +1,85 @@
+import create from "zustand";
+import { immer } from "./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: () => {},
+};
+export const useStore = create(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/browser/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/browser/internal/util.js

@@ -1,4 +1,5 @@
-import { useEffect, useLayoutEffect } from "react";
+import isEqual from "lodash/isEqual";
+import { useEffect, useLayoutEffect, useRef } from "react";
 export const omit = (obj, ...keys) => {
     const result = { ...obj };
     for (const key of keys) {
@@ -19,3 +20,13 @@ export const mergeRefs = (refs) => {
     };
 };
 export const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export const useDeepEqualsMemo = (item) => {
+    const ref = useRef(item);
+    const areEqual = ref.current === item || isEqual(ref.current, item);
+    useEffect(() => {
+        if (!areEqual) {
+            ref.current = item;
+        }
+    });
+    return areEqual ? ref.current : item;
+};

package/build/ValidatedForm.d.ts

@@ -47,4 +47,4 @@ export declare type FormProps<DataType> = {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;