remix-validated-form 4.1.1 → 4.1.4

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.js

@@ -1,4 +1,4 @@
-import { isEqual } from "lodash";
+import isEqual from "lodash/isEqual";
 import { useEffect, useLayoutEffect, useRef } from "react";
 export const omit = (obj, ...keys) => {
     const result = { ...obj };

package/build/ValidatedForm.js

@@ -212,9 +212,9 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                 clickedButtonRef.current = submitButton;
             }
         }
-        window.addEventListener("click", handleClick);
+        window.addEventListener("click", handleClick, { capture: true });
         return () => {
-            window.removeEventListener("click", handleClick);
+            window.removeEventListener("click", handleClick, { capture: true });
         };
     }, []);
     const handleSubmit = async (e) => {
@@ -234,10 +234,15 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                 endSubmit({ formAtom });
                 return;
             }
+            // 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 || e.currentTarget);
+                fetcher.submit(clickedButtonRef.current || formRef.current);
             else
-                submit(clickedButtonRef.current || e.currentTarget, {
+                submit(clickedButtonRef.current || formRef.current, {
                     method,
                     replace,
                 });

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

@@ -0,0 +1,18 @@
+import { useUpdateAtom } from "jotai/utils";
+import { FieldErrors, ValidationErrorResponseData } from "..";
+import { InternalFormContextValue } from "./formContext";
+import { Hydratable } from "./hydratable";
+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>;
+export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
+export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => Hydratable<{
+    [fieldName: string]: any;
+}>;
+export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
+export declare const useFieldTouched: (name: string, { formId }: InternalFormContextValue) => boolean;
+export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
+export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
+export declare const useFormUpdateAtom: typeof useUpdateAtom;
+export declare const useClearError: (context: InternalFormContextValue) => (name: string) => void;
+export declare const useSetTouched: (context: InternalFormContextValue) => (name: string, touched: boolean) => void;

package/build/internal/hooks-valtio.js

@@ -0,0 +1,128 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetTouched = exports.useClearError = exports.useFormUpdateAtom = exports.useFieldDefaultValue = exports.useFieldError = exports.useFieldTouched = exports.useHasActiveFormSubmit = exports.useDefaultValuesForForm = exports.useDefaultValuesFromLoader = exports.useFieldErrorsForForm = exports.useErrorResponseForForm = exports.useInternalFormContext = void 0;
+const react_1 = require("@remix-run/react");
+const utils_1 = require("jotai/utils");
+const get_1 = __importDefault(require("lodash/get"));
+const react_2 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const constants_1 = require("./constants");
+const formContext_1 = require("./formContext");
+const hydratable_1 = require("./hydratable");
+const state_1 = require("./state");
+const state_valtio_1 = require("./state-valtio");
+const useInternalFormContext = (formId, hookName) => {
+    const formContext = (0, react_2.useContext)(formContext_1.InternalFormContext);
+    if (formId)
+        return { formId };
+    if (formContext)
+        return formContext;
+    throw new Error(`Unable to determine form for ${hookName}. Please use it inside a form or pass a 'formId'.`);
+};
+exports.useInternalFormContext = useInternalFormContext;
+function useErrorResponseForForm({ fetcher, subaction, formId, }) {
+    var _a;
+    const actionData = (0, react_1.useActionData)();
+    if (fetcher) {
+        if ((_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors)
+            return fetcher.data;
+        return null;
+    }
+    if (!(actionData === null || actionData === void 0 ? void 0 : actionData.fieldErrors))
+        return null;
+    // If there's an explicit id, we should ignore data that has the wrong id
+    if (typeof formId === "string" && actionData.formId)
+        return actionData.formId === formId ? actionData : null;
+    if ((!subaction && !actionData.subaction) ||
+        actionData.subaction === subaction)
+        return actionData;
+    return null;
+}
+exports.useErrorResponseForForm = useErrorResponseForForm;
+const useFieldErrorsForForm = (context) => {
+    const response = useErrorResponseForForm(context);
+    const form = (0, state_valtio_1.useFormData)(context.formId);
+    return hydratable_1.hydratable.from(response === null || response === void 0 ? void 0 : response.fieldErrors, form.hydrated);
+};
+exports.useFieldErrorsForForm = useFieldErrorsForForm;
+const useDefaultValuesFromLoader = ({ formId, }) => {
+    const matches = (0, react_1.useMatches)();
+    if (typeof formId === "string") {
+        const dataKey = (0, constants_1.formDefaultValuesKey)(formId);
+        // If multiple loaders declare the same default values,
+        // we should use the data from the deepest route.
+        const match = matches
+            .reverse()
+            .find((match) => match.data && dataKey in match.data);
+        return match === null || match === void 0 ? void 0 : match.data[dataKey];
+    }
+    return null;
+};
+exports.useDefaultValuesFromLoader = useDefaultValuesFromLoader;
+const useDefaultValuesForForm = (context) => {
+    const { formId, defaultValuesProp } = context;
+    const form = (0, state_valtio_1.useFormData)(formId);
+    const errorResponse = useErrorResponseForForm(context);
+    const defaultValuesFromLoader = (0, exports.useDefaultValuesFromLoader)(context);
+    // Typical flow is:
+    // - Default values only available from props or server
+    //   - Props have a higher priority than server
+    // - State gets hydrated with default values
+    // - After submit, we may need to use values from the error
+    if (form.hydrated)
+        return hydratable_1.hydratable.hydratedData();
+    if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.repopulateFields) {
+        (0, tiny_invariant_1.default)(typeof errorResponse.repopulateFields === "object", "repopulateFields returned something other than an object");
+        return hydratable_1.hydratable.serverData(errorResponse.repopulateFields);
+    }
+    if (defaultValuesProp)
+        return hydratable_1.hydratable.serverData(defaultValuesProp);
+    return hydratable_1.hydratable.serverData(defaultValuesFromLoader);
+};
+exports.useDefaultValuesForForm = useDefaultValuesForForm;
+const useHasActiveFormSubmit = ({ fetcher, }) => {
+    const transition = (0, react_1.useTransition)();
+    const hasActiveSubmission = fetcher
+        ? fetcher.state === "submitting"
+        : !!transition.submission;
+    return hasActiveSubmission;
+};
+exports.useHasActiveFormSubmit = useHasActiveFormSubmit;
+const useFieldTouched = (name, { formId }) => {
+    const form = (0, state_valtio_1.useFormData)(formId);
+    return form.touchedFields[name];
+};
+exports.useFieldTouched = useFieldTouched;
+const useFieldError = (name, context) => {
+    const fieldErrors = (0, exports.useFieldErrorsForForm)(context);
+    const form = (0, state_valtio_1.useFormData)(context.formId);
+    return fieldErrors
+        .map((fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name])
+        .hydrateTo(form.fieldErrors[name]);
+};
+exports.useFieldError = useFieldError;
+const useFieldDefaultValue = (name, context) => {
+    const defaultValues = (0, exports.useDefaultValuesForForm)(context);
+    const state = (0, state_valtio_1.useFormData)(context.formId);
+    return defaultValues.map((val) => (0, get_1.default)(val, name)).hydrateTo(state);
+};
+exports.useFieldDefaultValue = useFieldDefaultValue;
+const useFormUpdateAtom = (atom) => (0, utils_1.useUpdateAtom)(atom, state_1.ATOM_SCOPE);
+exports.useFormUpdateAtom = useFormUpdateAtom;
+const useClearError = (context) => {
+    const clearError = (0, exports.useFormUpdateAtom)(state_1.clearErrorAtom);
+    return (0, react_2.useCallback)((name) => {
+        clearError({ name, formAtom: (0, state_1.formRegistry)(context.formId) });
+    }, [clearError, context.formId]);
+};
+exports.useClearError = useClearError;
+const useSetTouched = (context) => {
+    const setTouched = (0, exports.useFormUpdateAtom)(state_1.setTouchedAtom);
+    return (0, react_2.useCallback)((name, touched) => {
+        setTouched({ name, formAtom: (0, state_1.formRegistry)(context.formId), touched });
+    }, [setTouched, context.formId]);
+};
+exports.useSetTouched = useSetTouched;

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

@@ -0,0 +1,16 @@
+import { FieldErrors, ValidationErrorResponseData } from "..";
+import { InternalFormContextValue } from "./formContext";
+import { Hydratable } from "./hydratable";
+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>;
+export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
+export declare const useDefaultValuesForForm: (context: InternalFormContextValue) => Hydratable<{
+    [fieldName: string]: any;
+}>;
+export declare const useHasActiveFormSubmit: ({ fetcher, }: InternalFormContextValue) => boolean;
+export declare const useFieldTouched: (name: string, { formId }: InternalFormContextValue) => boolean;
+export declare const useFieldError: (name: string, context: InternalFormContextValue) => string | undefined;
+export declare const useFieldDefaultValue: (name: string, context: InternalFormContextValue) => any;
+export declare const useClearError: (context: InternalFormContextValue) => (name: string) => void;
+export declare const useSetTouched: (context: InternalFormContextValue) => (name: string, touched: boolean) => void;