remix-validated-form 4.1.4 → 4.1.5

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 $ npm run build:browser && npm run build:main
 
-> remix-validated-form@4.1.2 build:browser
+> remix-validated-form@4.1.4 build:browser
 > tsc --module ESNext --outDir ./browser
 
 
-> remix-validated-form@4.1.2 build:main
+> remix-validated-form@4.1.4 build:main
 > tsc --module CommonJS --outDir ./build
 

package/browser/ValidatedForm.js

@@ -8,7 +8,7 @@ import { FORM_ID_FIELD } from "./internal/constants";
 import { InternalFormContext, } from "./internal/formContext";
 import { useDefaultValuesFromLoader, useErrorResponseForForm, useFormUpdateAtom, useHasActiveFormSubmit, } from "./internal/hooks";
 import { useMultiValueMap } from "./internal/MultiValueMap";
-import { addErrorAtom, clearErrorAtom, endSubmitAtom, formRegistry, resetAtom, setFieldErrorsAtom, startSubmitAtom, syncFormContextAtom, } from "./internal/state";
+import { cleanupFormState, endSubmitAtom, fieldErrorsAtom, formElementAtom, formPropsAtom, isHydratedAtom, resetAtom, setFieldErrorAtom, startSubmitAtom, } from "./internal/state";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { mergeRefs, useDeepEqualsMemo, useIsomorphicLayoutEffect as useLayoutEffect, } from "./internal/util";
 const getDataFromForm = (el) => new FormData(el);
@@ -91,18 +91,12 @@ function formEventProxy(event) {
         },
     });
 }
-const useFormAtom = (formId) => {
-    const formAtom = formRegistry(formId);
-    useEffect(() => () => formRegistry.remove(formId), [formId]);
-    return formAtom;
-};
 /**
  * The primary form component of `remix-validated-form`.
  */
 export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
     var _a;
     const formId = useFormId(id);
-    const formAtom = useFormAtom(formId);
     const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
     const contextValue = useMemo(() => ({
         formId,
@@ -117,25 +111,30 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     const formRef = useRef(null);
     const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : RemixForm;
     const submit = useSubmit();
-    const clearError = useFormUpdateAtom(clearErrorAtom);
-    const addError = useFormUpdateAtom(addErrorAtom);
-    const setFieldErrors = useFormUpdateAtom(setFieldErrorsAtom);
-    const reset = useFormUpdateAtom(resetAtom);
-    const startSubmit = useFormUpdateAtom(startSubmitAtom);
-    const endSubmit = useFormUpdateAtom(endSubmitAtom);
-    const syncFormContext = useFormUpdateAtom(syncFormContextAtom);
-    const validateField = useCallback(async (fieldName) => {
+    const setFieldErrors = useFormUpdateAtom(fieldErrorsAtom(formId));
+    const setFieldError = useFormUpdateAtom(setFieldErrorAtom(formId));
+    const reset = useFormUpdateAtom(resetAtom(formId));
+    const startSubmit = useFormUpdateAtom(startSubmitAtom(formId));
+    const endSubmit = useFormUpdateAtom(endSubmitAtom(formId));
+    const syncFormProps = useFormUpdateAtom(formPropsAtom(formId));
+    const setHydrated = useFormUpdateAtom(isHydratedAtom(formId));
+    const setFormElementInState = useFormUpdateAtom(formElementAtom(formId));
+    useEffect(() => {
+        setHydrated(true);
+        return () => cleanupFormState(formId);
+    }, [formId, setHydrated]);
+    const validateField = useCallback(async (field) => {
         invariant(formRef.current, "Cannot find reference to form");
-        const { error } = await validator.validateField(getDataFromForm(formRef.current), fieldName);
+        const { error } = await validator.validateField(getDataFromForm(formRef.current), field);
         if (error) {
-            addError({ formAtom, name: fieldName, error });
+            setFieldError({ field, error });
             return error;
         }
         else {
-            clearError({ name: fieldName, formAtom });
+            setFieldError({ field, error: undefined });
             return null;
         }
-    }, [addError, clearError, formAtom, validator]);
+    }, [setFieldError, validator]);
     const customFocusHandlers = useMultiValueMap();
     const registerReceiveFocus = useCallback((fieldName, handler) => {
         customFocusHandlers().add(fieldName, handler);
@@ -144,33 +143,29 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         };
     }, [customFocusHandlers]);
     useLayoutEffect(() => {
-        syncFormContext({
-            formAtom,
+        var _a;
+        syncFormProps({
             action,
-            defaultValues: providedDefaultValues !== null && providedDefaultValues !== void 0 ? providedDefaultValues : backendDefaultValues,
+            defaultValues: (_a = providedDefaultValues !== null && providedDefaultValues !== void 0 ? providedDefaultValues : backendDefaultValues) !== null && _a !== void 0 ? _a : {},
             subaction,
             validateField,
             registerReceiveFocus,
         });
     }, [
         action,
-        formAtom,
         providedDefaultValues,
         registerReceiveFocus,
         subaction,
-        syncFormContext,
+        syncFormProps,
         validateField,
         backendDefaultValues,
     ]);
     useEffect(() => {
         var _a;
-        setFieldErrors({
-            fieldErrors: (_a = backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors) !== null && _a !== void 0 ? _a : {},
-            formAtom,
-        });
-    }, [backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors, formAtom, setFieldErrors]);
+        setFieldErrors((_a = backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors) !== null && _a !== void 0 ? _a : {});
+    }, [backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors, setFieldErrors, setFieldError]);
     useSubmitComplete(hasActiveSubmission, () => {
-        endSubmit({ formAtom });
+        endSubmit();
     });
     let clickedButtonRef = React.useRef();
     useEffect(() => {
@@ -193,11 +188,11 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         };
     }, []);
     const handleSubmit = async (e) => {
-        startSubmit({ formAtom });
+        startSubmit();
         const result = await validator.validate(getDataFromForm(e.currentTarget));
         if (result.error) {
-            endSubmit({ formAtom });
-            setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
+            endSubmit();
+            setFieldErrors(result.error.fieldErrors);
             if (!disableFocusOnError) {
                 focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
             }
@@ -206,7 +201,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             const eventProxy = formEventProxy(e);
             await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, eventProxy));
             if (eventProxy.defaultPrevented) {
-                endSubmit({ formAtom });
+                endSubmit();
                 return;
             }
             // We deviate from the remix code here a bit because of our async submit.
@@ -224,13 +219,13 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             clickedButtonRef.current = null;
         }
     };
-    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: (e) => {
+    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp, setFormElementInState]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: (e) => {
             e.preventDefault();
             handleSubmit(e);
         }, onReset: (event) => {
             onReset === null || onReset === void 0 ? void 0 : onReset(event);
             if (event.defaultPrevented)
                 return;
-            reset({ formAtom });
+            reset();
         }, children: _jsxs(InternalFormContext.Provider, { value: contextValue, children: [_jsx(FormResetter, { formRef: formRef, resetAfterSubmit: resetAfterSubmit }, void 0), subaction && (_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), id && _jsx("input", { type: "hidden", value: id, name: FORM_ID_FIELD }, void 0), children] }, void 0) }, void 0));
 }

package/browser/hooks.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from "react";
 import { createGetInputProps, } from "./internal/getInputProps";
-import { useInternalFormContext, useFieldTouched, useFieldError, useFieldDefaultValue, useContextSelectAtom, useClearError, useSetTouched, } from "./internal/hooks";
-import { hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, registerReceiveFocusAtom, validateFieldAtom, } from "./internal/state";
+import { useInternalFormContext, useFieldTouched, useFieldError, useFormAtomValue, useFieldDefaultValue, } from "./internal/hooks";
+import { formPropsAtom, hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, } from "./internal/state";
 /**
  * Returns whether or not the parent form is currently being submitted.
  * This is different from remix's `useTransition().submission` in that it
@@ -11,7 +11,7 @@ import { hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, registerReceiveFoc
  */
 export const useIsSubmitting = (formId) => {
     const formContext = useInternalFormContext(formId, "useIsSubmitting");
-    return useContextSelectAtom(formContext.formId, isSubmittingAtom);
+    return useFormAtomValue(isSubmittingAtom(formContext.formId));
 };
 /**
  * Returns whether or not the current form is valid.
@@ -20,22 +20,19 @@ export const useIsSubmitting = (formId) => {
  */
 export const useIsValid = (formId) => {
     const formContext = useInternalFormContext(formId, "useIsValid");
-    return useContextSelectAtom(formContext.formId, isValidAtom);
+    return useFormAtomValue(isValidAtom(formContext.formId));
 };
 /**
  * Provides the data and helpers necessary to set up a field.
  */
 export const useField = (name, options) => {
-    const { handleReceiveFocus, formId: providedFormId } = options !== null && options !== void 0 ? options : {};
+    const { formId: providedFormId, handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
     const formContext = useInternalFormContext(providedFormId, "useField");
     const defaultValue = useFieldDefaultValue(name, formContext);
-    const touched = useFieldTouched(name, formContext);
-    const error = useFieldError(name, formContext);
-    const clearError = useClearError(formContext);
-    const setTouched = useSetTouched(formContext);
-    const hasBeenSubmitted = useContextSelectAtom(formContext.formId, hasBeenSubmittedAtom);
-    const validateField = useContextSelectAtom(formContext.formId, validateFieldAtom);
-    const registerReceiveFocus = useContextSelectAtom(formContext.formId, registerReceiveFocusAtom);
+    const [touched, setTouched] = useFieldTouched(name, formContext);
+    const [error, setError] = useFieldError(name, formContext);
+    const hasBeenSubmitted = useFormAtomValue(hasBeenSubmittedAtom(formContext.formId));
+    const { validateField, registerReceiveFocus } = useFormAtomValue(formPropsAtom(formContext.formId));
     useEffect(() => {
         if (handleReceiveFocus)
             return registerReceiveFocus(name, handleReceiveFocus);
@@ -43,13 +40,13 @@ export const useField = (name, options) => {
     const field = useMemo(() => {
         const helpers = {
             error,
-            clearError: () => clearError(name),
+            clearError: () => setError(undefined),
             validate: () => {
                 validateField(name);
             },
             defaultValue,
             touched,
-            setTouched: (touched) => setTouched(name, touched),
+            setTouched,
         };
         const getInputProps = createGetInputProps({
             ...helpers,
@@ -65,12 +62,12 @@ export const useField = (name, options) => {
         error,
         defaultValue,
         touched,
+        setTouched,
         name,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
-        clearError,
+        setError,
         validateField,
-        setTouched,
     ]);
     return field;
 };

package/browser/internal/customState.d.ts

@@ -0,0 +1,105 @@
+import { Atom } from "jotai";
+import { InternalFormId } from "./state/atomUtils";
+export declare const unregisterAtomsFamily: {
+    (param: InternalFormId): Atom<Atom<any>[]> & {
+        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: Atom<any>[] | ((prev: Atom<any>[]) => Atom<any>[])) => void;
+        onMount?: (<S extends (update: Atom<any>[] | ((prev: Atom<any>[]) => Atom<any>[])) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: Atom<any>[];
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};
+export declare const createCustomFormState: <T>(defaultValue: T) => {
+    __atomFamily: {
+        (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;
+    };
+    __registerAtom: Atom<null> & {
+        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: InternalFormId) => void;
+        onMount?: (<S_1 extends (update: InternalFormId) => void>(setAtom: S_1) => void | (() => void)) | undefined;
+    } & {
+        init: null;
+    };
+    __unregisterAtom: Atom<null> & {
+        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: InternalFormId) => void;
+        onMount?: (<S_1 extends (update: InternalFormId) => void>(setAtom: S_1) => void | (() => void)) | undefined;
+    } & {
+        init: null;
+    };
+};
+export declare const useCustomFormState: <T>(state: ReturnType<typeof createCustomFormState>, formId: InternalFormId) => readonly [T, (value: T) => void];

package/browser/internal/customState.js

@@ -0,0 +1,46 @@
+import { atom } from "jotai";
+import { useAtomCallback } from "jotai/utils";
+import { useCallback, useEffect } from "react";
+import { useFormAtom } from "./hooks";
+import { formAtomFamily } from "./state/atomUtils";
+export const unregisterAtomsFamily = formAtomFamily([]);
+export const createCustomFormState = (defaultValue) => {
+    const atomFamily = formAtomFamily(defaultValue);
+    const refCountFamily = formAtomFamily(0);
+    const registerAtom = atom(null, (get, set, formId) => {
+        const refCountAtom = refCountFamily(formId);
+        set(refCountAtom, (prev) => prev + 1);
+        const newRefCount = get(refCountAtom);
+        if (newRefCount === 1) {
+            set(unregisterAtomsFamily(formId), (prev) => [...prev, unregisterAtom]);
+        }
+    });
+    const unregisterAtom = atom(null, (get, set, formId) => {
+        const refCountAtom = refCountFamily(formId);
+        set(refCountAtom, (prev) => prev - 1);
+        const newRefCount = get(refCountAtom);
+        if (newRefCount === 0) {
+            set(unregisterAtomsFamily(formId), (prev) => prev.filter((item) => item !== unregisterAtom));
+            atomFamily.remove(formId);
+            refCountFamily.remove(formId);
+        }
+    });
+    return {
+        __atomFamily: atomFamily,
+        __registerAtom: registerAtom,
+        __unregisterAtom: unregisterAtom,
+    };
+};
+export const useCustomFormState = (state, formId) => {
+    const atom = state.__atomFamily(formId);
+    const [value, setValue] = useFormAtom(atom);
+    const register = useAtomCallback(useCallback((_get, set) => set(state.__registerAtom, formId), [formId, state.__registerAtom]));
+    const unregister = useAtomCallback(useCallback((_get, set) => set(state.__unregisterAtom, formId), [formId, state.__unregisterAtom]));
+    useEffect(() => {
+        register();
+        return () => {
+            unregister();
+        };
+    }, [register, unregister]);
+    return [value, setValue];
+};

package/browser/internal/getInputProps.js

@@ -1,25 +1,17 @@
 import omitBy from "lodash/omitBy";
+import { getCheckboxChecked } from "./logic/getCheckboxChecked";
+import { getRadioChecked } from "./logic/getRadioChecked";
 const defaultValidationBehavior = {
     initial: "onBlur",
     whenTouched: "onChange",
     whenSubmitted: "onChange",
 };
-const getCheckboxDefaultChecked = (value, defaultValue) => {
-    if (Array.isArray(defaultValue))
-        return defaultValue.includes(value);
-    if (typeof defaultValue === "boolean")
-        return defaultValue;
-    if (typeof defaultValue === "string")
-        return defaultValue === value;
-    return undefined;
-};
 export const createGetInputProps = ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }) => {
     const validationBehaviors = {
         ...defaultValidationBehavior,
         ...validationBehavior,
     };
     return (props = {}) => {
-        var _a, _b;
         const behavior = hasBeenSubmitted
             ? validationBehaviors.whenSubmitted
             : touched
@@ -45,12 +37,10 @@ export const createGetInputProps = ({ clearError, validate, defaultValue, touche
             name,
         };
         if (props.type === "checkbox") {
-            const value = (_a = props.value) !== null && _a !== void 0 ? _a : "on";
-            inputProps.defaultChecked = getCheckboxDefaultChecked(value, defaultValue);
+            inputProps.defaultChecked = getCheckboxChecked(props.value, defaultValue);
         }
         else if (props.type === "radio") {
-            const value = (_b = props.value) !== null && _b !== void 0 ? _b : "on";
-            inputProps.defaultChecked = defaultValue === value;
+            inputProps.defaultChecked = getRadioChecked(props.value, defaultValue);
         }
         else {
             inputProps.defaultValue = defaultValue;

package/browser/internal/hooks.d.ts

@@ -1,22 +1,21 @@
-import { Atom } from "jotai";
+import { Atom, WritableAtom } from "jotai";
 import { useUpdateAtom } from "jotai/utils";
-import { ValidationErrorResponseData } from "..";
+import { FieldErrors, ValidationErrorResponseData } from "..";
 import { InternalFormContextValue } from "./formContext";
-import { FormAtom } from "./state";
-declare type FormSelectorAtomCreator<T> = (formState: FormAtom) => Atom<T>;
-declare const USE_HYDRATED_STATE: unique symbol;
+import { Hydratable } from "./hydratable";
+export declare const useFormUpdateAtom: typeof useUpdateAtom;
+export declare const useFormAtom: <Value, Update, Result extends void | Promise<void>>(anAtom: WritableAtom<Value, Update, Result>) => [Value extends Promise<infer V> ? V : Value, import("jotai/core/atom").SetAtom<Update, Result>];
+export declare const useFormAtomValue: <Value>(anAtom: Atom<Value>) => Value extends Promise<infer V> ? V : Value;
 export declare const useInternalFormContext: (formId?: string | symbol | undefined, hookName?: string | undefined) => InternalFormContextValue;
-export declare const useContextSelectAtom: <T>(formId: string | symbol, selectorAtomCreator: FormSelectorAtomCreator<T>) => T extends Promise<infer V> ? V : T;
-export declare const useHydratableSelector: <T, U>({ formId }: InternalFormContextValue, atomCreator: FormSelectorAtomCreator<T>, dataToUse: U | typeof USE_HYDRATED_STATE, selector?: (data: U) => T) => T | (T extends Promise<infer V> ? V : T);
 export declare function useErrorResponseForForm({ fetcher, subaction, formId, }: InternalFormContextValue): ValidationErrorResponseData | null;
-export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => import("..").FieldErrors | typeof USE_HYDRATED_STATE | undefined;
+export declare const useFieldErrorsForForm: (context: InternalFormContextValue) => Hydratable<FieldErrors | undefined>;
 export declare const useDefaultValuesFromLoader: ({ formId, }: InternalFormContextValue) => any;
-export declare const useDefaultValuesForForm: (context: 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 useFieldTouched: (field: string, { formId }: InternalFormContextValue) => [boolean, (update: boolean) => void];
+export declare const useFieldError: (name: string, context: InternalFormContextValue) => readonly [string | undefined, (update?: string | undefined) => void];
 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;
-export {};
+export declare const useClearError: ({ formId }: InternalFormContextValue) => (name: string) => void;
+export declare const useSetTouched: ({ formId }: InternalFormContextValue) => (name: string, touched: boolean) => void;

package/browser/internal/hooks.js

@@ -1,12 +1,16 @@
 import { useActionData, useMatches, useTransition } from "@remix-run/react";
+import { useAtom } from "jotai";
 import { useAtomValue, useUpdateAtom } from "jotai/utils";
 import lodashGet from "lodash/get";
-import identity from "lodash/identity";
-import { useCallback, useContext, useMemo } from "react";
+import { useCallback, useContext } from "react";
+import invariant from "tiny-invariant";
 import { formDefaultValuesKey } from "./constants";
 import { InternalFormContext } from "./formContext";
-import { ATOM_SCOPE, clearErrorAtom, fieldDefaultValueAtom, fieldErrorAtom, fieldTouchedAtom, formRegistry, isHydratedAtom, setTouchedAtom, } from "./state";
-const USE_HYDRATED_STATE = Symbol("USE_HYDRATED_STATE");
+import { hydratable } from "./hydratable";
+import { ATOM_SCOPE, fieldErrorAtom, fieldTouchedAtom, formPropsAtom, isHydratedAtom, setFieldErrorAtom, setTouchedAtom, } from "./state";
+export const useFormUpdateAtom = (atom) => useUpdateAtom(atom, ATOM_SCOPE);
+export const useFormAtom = (anAtom) => useAtom(anAtom, ATOM_SCOPE);
+export const useFormAtomValue = (anAtom) => useAtomValue(anAtom, ATOM_SCOPE);
 export const useInternalFormContext = (formId, hookName) => {
     const formContext = useContext(InternalFormContext);
     if (formId)
@@ -15,15 +19,6 @@ export const useInternalFormContext = (formId, hookName) => {
         return formContext;
     throw new Error(`Unable to determine form for ${hookName}. Please use it inside a form or pass a 'formId'.`);
 };
-export const useContextSelectAtom = (formId, selectorAtomCreator) => {
-    const formAtom = formRegistry(formId);
-    const selectorAtom = useMemo(() => selectorAtomCreator(formAtom), [formAtom, selectorAtomCreator]);
-    return useAtomValue(selectorAtom, ATOM_SCOPE);
-};
-export const useHydratableSelector = ({ formId }, atomCreator, dataToUse, selector = identity) => {
-    const dataFromState = useContextSelectAtom(formId, atomCreator);
-    return dataToUse === USE_HYDRATED_STATE ? dataFromState : selector(dataToUse);
-};
 export function useErrorResponseForForm({ fetcher, subaction, formId, }) {
     var _a;
     const actionData = useActionData();
@@ -44,8 +39,8 @@ export function useErrorResponseForForm({ fetcher, subaction, formId, }) {
 }
 export const useFieldErrorsForForm = (context) => {
     const response = useErrorResponseForForm(context);
-    const hydrated = useContextSelectAtom(context.formId, isHydratedAtom);
-    return hydrated ? USE_HYDRATED_STATE : response === null || response === void 0 ? void 0 : response.fieldErrors;
+    const hydrated = useFormAtomValue(isHydratedAtom(context.formId));
+    return hydratable.from(response === null || response === void 0 ? void 0 : response.fieldErrors, hydrated);
 };
 export const useDefaultValuesFromLoader = ({ formId, }) => {
     const matches = useMatches();
@@ -62,7 +57,7 @@ export const useDefaultValuesFromLoader = ({ formId, }) => {
 };
 export const useDefaultValuesForForm = (context) => {
     const { formId, defaultValuesProp } = context;
-    const hydrated = useContextSelectAtom(formId, isHydratedAtom);
+    const hydrated = useFormAtomValue(isHydratedAtom(formId));
     const errorResponse = useErrorResponseForForm(context);
     const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
     // Typical flow is:
@@ -71,12 +66,14 @@ export const useDefaultValuesForForm = (context) => {
     // - State gets hydrated with default values
     // - After submit, we may need to use values from the error
     if (hydrated)
-        return USE_HYDRATED_STATE;
-    if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.repopulateFields)
-        return errorResponse.repopulateFields;
+        return hydratable.hydratedData();
+    if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.repopulateFields) {
+        invariant(typeof errorResponse.repopulateFields === "object", "repopulateFields returned something other than an object");
+        return hydratable.serverData(errorResponse.repopulateFields);
+    }
     if (defaultValuesProp)
-        return defaultValuesProp;
-    return defaultValuesFromLoader;
+        return hydratable.serverData(defaultValuesProp);
+    return hydratable.serverData(defaultValuesFromLoader);
 };
 export const useHasActiveFormSubmit = ({ fetcher, }) => {
     const transition = useTransition();
@@ -85,26 +82,27 @@ export const useHasActiveFormSubmit = ({ fetcher, }) => {
         : !!transition.submission;
     return hasActiveSubmission;
 };
-export const useFieldTouched = (name, { formId }) => {
-    const atomCreator = useMemo(() => fieldTouchedAtom(name), [name]);
-    return useContextSelectAtom(formId, atomCreator);
-};
+export const useFieldTouched = (field, { formId }) => useFormAtom(fieldTouchedAtom({ formId, field }));
 export const useFieldError = (name, context) => {
-    return useHydratableSelector(context, useMemo(() => fieldErrorAtom(name), [name]), useFieldErrorsForForm(context), (fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name]);
+    const fieldErrors = useFieldErrorsForForm(context);
+    const [state, set] = useFormAtom(fieldErrorAtom({ formId: context.formId, field: name }));
+    return [
+        fieldErrors.map((fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name]).hydrateTo(state),
+        set,
+    ];
 };
 export const useFieldDefaultValue = (name, context) => {
-    return useHydratableSelector(context, useMemo(() => fieldDefaultValueAtom(name), [name]), useDefaultValuesForForm(context), (val) => lodashGet(val, name));
+    const defaultValues = useDefaultValuesForForm(context);
+    const { defaultValues: state } = useFormAtomValue(formPropsAtom(context.formId));
+    return defaultValues
+        .map((val) => lodashGet(val, name))
+        .hydrateTo(state[name]);
 };
-export const useFormUpdateAtom = (atom) => useUpdateAtom(atom, ATOM_SCOPE);
-export const useClearError = (context) => {
-    const clearError = useFormUpdateAtom(clearErrorAtom);
-    return useCallback((name) => {
-        clearError({ name, formAtom: formRegistry(context.formId) });
-    }, [clearError, context.formId]);
+export const useClearError = ({ formId }) => {
+    const updateError = useFormUpdateAtom(setFieldErrorAtom(formId));
+    return useCallback((name) => updateError({ field: name, error: undefined }), [updateError]);
 };
-export const useSetTouched = (context) => {
-    const setTouched = useFormUpdateAtom(setTouchedAtom);
-    return useCallback((name, touched) => {
-        setTouched({ name, formAtom: formRegistry(context.formId), touched });
-    }, [setTouched, context.formId]);
+export const useSetTouched = ({ formId }) => {
+    const setTouched = useFormUpdateAtom(setTouchedAtom(formId));
+    return useCallback((name, touched) => setTouched({ field: name, touched }), [setTouched]);
 };

package/browser/internal/logic/elementUtils.d.ts

@@ -0,0 +1,3 @@
+export declare const isMultiselect: (node: Node) => node is HTMLSelectElement;
+export declare const isCheckbox: (node: Node | RadioNodeList) => node is HTMLInputElement;
+export declare const isRadio: (node: Node) => node is HTMLInputElement;

package/browser/internal/logic/elementUtils.js

@@ -0,0 +1,3 @@
+export const isMultiselect = (node) => node instanceof HTMLSelectElement && node.multiple;
+export const isCheckbox = (node) => node instanceof HTMLInputElement && node.type === "checkbox";
+export const isRadio = (node) => node instanceof HTMLInputElement && node.type === "radio";