remix-validated-form 4.1.8 → 4.3.0

package/.turbo/turbo-build.log

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

package/README.md

@@ -71,9 +71,7 @@ export const MyInput = ({ name, label }: MyInputProps) => {
     <div>
       <label htmlFor={name}>{label}</label>
       <input {...getInputProps({ id: name })} />
-      {error && (
-        <span className="my-error-class">{error}</span>
-      )}
+      {error && <span className="my-error-class">{error}</span>}
     </div>
   );
 };
@@ -92,14 +90,17 @@ export const MySubmitButton = () => {
   const disabled = isSubmitting || !isValid;
 
   return (
-    <button type="submit" disabled={disabled} className={disabled ? "disabled-btn" : "btn"}>
+    <button
+      type="submit"
+      disabled={disabled}
+      className={disabled ? "disabled-btn" : "btn"}
+    >
       {isSubmitting ? "Submitting..." : "Submit"}
     </button>
   );
 };
 ```
 
-
 ## Use the form!
 
 Now that we have our components, making a form is easy!
@@ -258,5 +259,6 @@ Problem: how do we trigger a toast message on success if the action redirects aw
 See the [Remix](https://remix.run/docs/en/v1/api/remix#sessionflashkey-value) documentation for more information.
 
 ## Why is my cancel button triggering form submission?
+
 Problem: the cancel button has an onClick handler to navigate away from the form route but instead it is submitting the form.
 A button defaults to `type="submit"` in a form which will submit the form by default. If you want to prevent this you can add `type="reset"` or `type="button"` to the cancel button.

package/browser/ValidatedForm.js

@@ -8,7 +8,9 @@ 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 { cleanupFormState, endSubmitAtom, fieldErrorsAtom, formElementAtom, formPropsAtom, isHydratedAtom, resetAtom, setFieldErrorAtom, startSubmitAtom, } from "./internal/state";
+import { resetAtom } from "./internal/reset";
+import { cleanupFormState, endSubmitAtom, fieldErrorsAtom, formElementAtom, formPropsAtom, isHydratedAtom, setFieldErrorAtom, startSubmitAtom, } from "./internal/state";
+import { useAwaitValue } from "./internal/state/controlledFields";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { mergeRefs, useDeepEqualsMemo, useIsomorphicLayoutEffect as useLayoutEffect, } from "./internal/util";
 const getDataFromForm = (el) => new FormData(el);
@@ -123,8 +125,10 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         setHydrated(true);
         return () => cleanupFormState(formId);
     }, [formId, setHydrated]);
+    const awaitValue = useAwaitValue(formId);
     const validateField = useCallback(async (field) => {
         invariant(formRef.current, "Cannot find reference to form");
+        await awaitValue(field);
         const { error } = await validator.validateField(getDataFromForm(formRef.current), field);
         if (error) {
             setFieldError({ field, error });
@@ -134,7 +138,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             setFieldError({ field, error: undefined });
             return null;
         }
-    }, [setFieldError, validator]);
+    }, [awaitValue, setFieldError, validator]);
     const customFocusHandlers = useMultiValueMap();
     const registerReceiveFocus = useCallback((fieldName, handler) => {
         customFocusHandlers().add(fieldName, handler);

package/browser/hooks.d.ts

@@ -63,3 +63,5 @@ export declare const useField: (name: string, options?: {
      */
     formId?: string | undefined;
 } | undefined) => FieldProps;
+export declare const useControlField: <T>(name: string, formId?: string | undefined) => readonly [T, (value: T) => void];
+export declare const useUpdateControlledField: (formId?: string | undefined) => (field: string, value: unknown) => void;

package/browser/hooks.js

@@ -2,6 +2,7 @@ import { useEffect, useMemo } from "react";
 import { createGetInputProps, } from "./internal/getInputProps";
 import { useInternalFormContext, useFieldTouched, useFieldError, useFormAtomValue, useFieldDefaultValue, } from "./internal/hooks";
 import { formPropsAtom, hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, } from "./internal/state";
+import { useControllableValue, useUpdateControllableValue, } from "./internal/state/controlledFields";
 /**
  * Returns whether or not the parent form is currently being submitted.
  * This is different from remix's `useTransition().submission` in that it
@@ -71,3 +72,12 @@ export const useField = (name, options) => {
     ]);
     return field;
 };
+export const useControlField = (name, formId) => {
+    const context = useInternalFormContext(formId, "useControlField");
+    const [value, setValue] = useControllableValue(context, name);
+    return [value, setValue];
+};
+export const useUpdateControlledField = (formId) => {
+    const context = useInternalFormContext(formId, "useControlField");
+    return useUpdateControllableValue(context.formId);
+};

package/browser/internal/MultiValueMap.d.ts

@@ -1,9 +1,11 @@
 export declare class MultiValueMap<Key, Value> {
     private dict;
     add: (key: Key, value: Value) => void;
+    delete: (key: Key) => void;
     remove: (key: Key, value: Value) => void;
     getAll: (key: Key) => Value[];
     entries: () => IterableIterator<[Key, Value[]]>;
+    values: () => IterableIterator<Value[]>;
     has: (key: Key) => boolean;
 }
 export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/browser/internal/MultiValueMap.js

@@ -10,6 +10,9 @@ export class MultiValueMap {
                 this.dict.set(key, [value]);
             }
         };
+        this.delete = (key) => {
+            this.dict.delete(key);
+        };
         this.remove = (key, value) => {
             if (!this.dict.has(key))
                 return;
@@ -25,6 +28,7 @@ export class MultiValueMap {
             return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
         };
         this.entries = () => this.dict.entries();
+        this.values = () => this.dict.values();
         this.has = (key) => this.dict.has(key);
     }
 }

package/browser/internal/getInputProps.js

@@ -42,7 +42,8 @@ export const createGetInputProps = ({ clearError, validate, defaultValue, touche
         else if (props.type === "radio") {
             inputProps.defaultChecked = getRadioChecked(props.value, defaultValue);
         }
-        else {
+        else if (props.value === undefined) {
+            // We should only set the defaultValue if the input is uncontrolled.
             inputProps.defaultValue = defaultValue;
         }
         return omitBy(inputProps, (value) => value === undefined);

package/browser/internal/reset.d.ts

@@ -0,0 +1,28 @@
+import { InternalFormId } from "./state/atomUtils";
+export declare const resetAtom: {
+    (param: InternalFormId): 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: unknown) => void;
+        onMount?: (<S extends (update?: unknown) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: null;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};

package/browser/internal/reset.js

@@ -0,0 +1,13 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import lodashGet from "lodash/get";
+import { fieldErrorsAtom, formPropsAtom, hasBeenSubmittedAtom, touchedFieldsAtom, } from "./state";
+import { controlledFieldsAtom } from "./state/controlledFields";
+export const resetAtom = atomFamily((formId) => atom(null, (get, set) => {
+    set(fieldErrorsAtom(formId), {});
+    set(touchedFieldsAtom(formId), {});
+    set(hasBeenSubmittedAtom(formId), false);
+    const { defaultValues } = get(formPropsAtom(formId));
+    const controlledFields = get(controlledFieldsAtom(formId));
+    Object.entries(controlledFields).forEach(([name, atom]) => set(atom, lodashGet(defaultValues, name)));
+}));

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

@@ -1,6 +1,6 @@
 import { PrimitiveAtom } from "jotai";
-import { InternalFormId } from "./atomUtils";
-export declare type ValueSerializer = (val: unknown) => string;
+import { InternalFormContextValue } from "../formContext";
+import { FieldAtomKey, InternalFormId } from "./atomUtils";
 export declare const controlledFieldsAtom: {
     (param: InternalFormId): import("jotai").Atom<Record<string, PrimitiveAtom<unknown>>> & {
         write: (get: {
@@ -28,6 +28,60 @@ export declare const controlledFieldsAtom: {
     remove(param: InternalFormId): void;
     setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
 };
+export declare const valueUpdatePromiseAtom: {
+    (param: FieldAtomKey): import("jotai").Atom<Promise<void> | undefined> & {
+        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: Promise<void> | ((prev: Promise<void> | undefined) => Promise<void> | undefined) | undefined) => void;
+        onMount?: (<S extends (update?: Promise<void> | ((prev: Promise<void> | undefined) => Promise<void> | undefined) | undefined) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: Promise<void> | undefined;
+    };
+    remove(param: FieldAtomKey): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
+};
+export declare const resolveValueUpdateAtom: {
+    (param: FieldAtomKey): import("jotai").Atom<(() => void) | undefined> & {
+        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: (() => void) | ((prev: (() => void) | undefined) => (() => void) | undefined) | undefined) => void;
+        onMount?: (<S extends (update?: (() => void) | ((prev: (() => void) | undefined) => (() => void) | undefined) | undefined) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: (() => void) | undefined;
+    };
+    remove(param: FieldAtomKey): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
+};
 export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
     write: (get: {
         <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
@@ -50,17 +104,16 @@ export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
         formId: InternalFormId;
         field: string;
         value: unknown;
-    }) => Promise<void>;
+    }) => void;
     onMount?: (<S extends (update: {
         formId: InternalFormId;
         field: string;
         value: unknown;
-    }) => Promise<void>>(setAtom: S) => void | (() => void)) | undefined;
+    }) => 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;
+export declare const useControlledFieldValue: (context: InternalFormContextValue, field: string) => any;
+export declare const useControllableValue: (context: InternalFormContextValue, field: string) => readonly [any, (value: unknown) => void];
+export declare const useUpdateControllableValue: (formId: InternalFormId) => (field: string, value: unknown) => void;
+export declare const useAwaitValue: (formId: InternalFormId) => (arg: string) => Promise<void>;

package/browser/internal/state/controlledFields.js

@@ -1,4 +1,5 @@
 import { atom } from "jotai";
+import { useAtomCallback } from "jotai/utils";
 import omit from "lodash/omit";
 import { useCallback, useEffect } from "react";
 import { useFieldDefaultValue, useFormAtomValue, useFormAtom, useFormUpdateAtom, } from "../hooks";
@@ -8,14 +9,8 @@ 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);
-    },
-}));
+export const valueUpdatePromiseAtom = fieldAtomFamily(() => atom(undefined));
+export const resolveValueUpdateAtom = fieldAtomFamily(() => atom(undefined));
 const registerAtom = atom(null, (get, set, { formId, field }) => {
     set(refCountAtom({ formId, field }), (prev) => prev + 1);
     const newRefCount = get(refCountAtom({ formId, field }));
@@ -34,23 +29,27 @@ const unregisterAtom = atom(null, (get, set, { formId, field }) => {
     if (newRefCount === 0) {
         set(controlledFieldsAtom(formId), (prev) => omit(prev, field));
         fieldValueAtom.remove({ formId, field });
-        pendingValidateAtom.remove({ formId, field });
+        resolveValueUpdateAtom.remove({ formId, field });
         fieldValueHydratedAtom.remove({ formId, field });
     }
 });
-export const setControlledFieldValueAtom = atom(null, async (_get, set, { formId, field, value, }) => {
+export const setControlledFieldValueAtom = atom(null, (_get, set, { formId, field, value, }) => {
     set(fieldValueAtom({ formId, field }), value);
-    const pending = pendingValidateAtom({ formId, field });
-    await new Promise((resolve) => set(pending, resolve));
-    set(pending, undefined);
+    const resolveAtom = resolveValueUpdateAtom({ formId, field });
+    const promiseAtom = valueUpdatePromiseAtom({ formId, field });
+    const promise = new Promise((resolve) => set(resolveAtom, () => {
+        resolve();
+        set(resolveAtom, undefined);
+        set(promiseAtom, undefined);
+    }));
+    set(promiseAtom, promise);
 });
-export const useAllControlledFields = (formId) => useFormAtomValue(controlledFieldsAtom(formId));
-export const useControlledFieldValue = (formId, field) => {
-    const fieldAtom = fieldValueAtom({ formId, field });
+export const useControlledFieldValue = (context, field) => {
+    const fieldAtom = fieldValueAtom({ formId: context.formId, field });
     const [value, setValue] = useFormAtom(fieldAtom);
-    const defaultValue = useFieldDefaultValue(field, { formId });
-    const isHydrated = useFormAtomValue(isHydratedAtom(formId));
-    const [isFieldHydrated, setIsFieldHydrated] = useFormAtom(fieldValueHydratedAtom({ formId, field }));
+    const defaultValue = useFieldDefaultValue(field, context);
+    const isHydrated = useFormAtomValue(isHydratedAtom(context.formId));
+    const [isFieldHydrated, setIsFieldHydrated] = useFormAtom(fieldValueHydratedAtom({ formId: context.formId, field }));
     useEffect(() => {
         if (isHydrated && !isFieldHydrated) {
             setValue(defaultValue);
@@ -59,7 +58,7 @@ export const useControlledFieldValue = (formId, field) => {
     }, [
         defaultValue,
         field,
-        formId,
+        context.formId,
         isFieldHydrated,
         isHydrated,
         setIsFieldHydrated,
@@ -67,27 +66,28 @@ export const useControlledFieldValue = (formId, field) => {
     ]);
     return isFieldHydrated ? value : defaultValue;
 };
-export const useControllableValue = (formId, field) => {
-    const pending = useFormAtomValue(pendingValidateAtom({ formId, field }));
+export const useControllableValue = (context, field) => {
+    const resolveUpdate = useFormAtomValue(resolveValueUpdateAtom({ formId: context.formId, field }));
     useEffect(() => {
-        pending === null || pending === void 0 ? void 0 : pending();
-    }, [pending]);
+        resolveUpdate === null || resolveUpdate === void 0 ? void 0 : resolveUpdate();
+    }, [resolveUpdate]);
     const register = useFormUpdateAtom(registerAtom);
     const unregister = useFormUpdateAtom(unregisterAtom);
     useEffect(() => {
-        register({ formId, field });
-        return () => unregister({ formId, field });
-    }, [field, formId, register, unregister]);
+        register({ formId: context.formId, field });
+        return () => unregister({ formId: context.formId, field });
+    }, [context.formId, field, register, unregister]);
     const setControlledFieldValue = useFormUpdateAtom(setControlledFieldValueAtom);
-    const setValue = useCallback((value) => setControlledFieldValue({ formId, field, value }), [field, formId, setControlledFieldValue]);
-    const value = useControlledFieldValue(formId, field);
+    const setValue = useCallback((value) => setControlledFieldValue({ formId: context.formId, field, value }), [field, context.formId, setControlledFieldValue]);
+    const value = useControlledFieldValue(context, 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]);
+export const useUpdateControllableValue = (formId) => {
+    const setControlledFieldValue = useFormUpdateAtom(setControlledFieldValueAtom);
+    return useCallback((field, value) => setControlledFieldValue({ formId, field, value }), [formId, setControlledFieldValue]);
+};
+export const useAwaitValue = (formId) => {
+    return useAtomCallback(useCallback(async (get, _set, field) => {
+        await get(valueUpdatePromiseAtom({ formId, field }));
+    }, [formId]));
 };

package/browser/internal/state.d.ts

@@ -206,33 +206,6 @@ export declare const isValidAtom: {
     remove(param: InternalFormId): void;
     setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
 };
-export declare const resetAtom: {
-    (param: InternalFormId): 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: unknown) => void;
-        onMount?: (<S extends (update?: unknown) => void>(setAtom: S) => void | (() => void)) | undefined;
-    } & {
-        init: null;
-    };
-    remove(param: InternalFormId): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
-};
 export declare const startSubmitAtom: {
     (param: InternalFormId): import("jotai").Atom<null> & {
         write: (get: {

package/browser/internal/state.js

@@ -26,11 +26,6 @@ export const cleanupFormState = (formId) => {
     ].forEach((formAtom) => formAtom.remove(formId));
 };
 export const isValidAtom = atomFamily((formId) => atom((get) => Object.keys(get(fieldErrorsAtom(formId))).length === 0));
-export const resetAtom = atomFamily((formId) => atom(null, (_get, set) => {
-    set(fieldErrorsAtom(formId), {});
-    set(touchedFieldsAtom(formId), {});
-    set(hasBeenSubmittedAtom(formId), false);
-}));
 export const startSubmitAtom = atomFamily((formId) => atom(null, (_get, set) => {
     set(isSubmittingAtom(formId), true);
     set(hasBeenSubmittedAtom(formId), true);

package/browser/server.d.ts

@@ -14,7 +14,7 @@ import { ValidatorError } from "./validation/types";
  * if (result.error) return validationError(result.error, result.submittedData);
  * ```
  */
-export declare function validationError(error: ValidatorError, repopulateFields?: unknown): Response;
+export declare function validationError(error: ValidatorError, repopulateFields?: unknown, init?: ResponseInit): Response;
 export declare type FormDefaults = {
     [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
 };

package/browser/server.js

@@ -14,13 +14,13 @@ import { formDefaultValuesKey, } from "./internal/constants";
  * if (result.error) return validationError(result.error, result.submittedData);
  * ```
  */
-export function validationError(error, repopulateFields) {
+export function validationError(error, repopulateFields, init) {
     return json({
         fieldErrors: error.fieldErrors,
         subaction: error.subaction,
         repopulateFields,
         formId: error.formId,
-    }, { status: 422 });
+    }, { status: 422, ...init });
 }
 export const setFormDefaults = (formId, defaultValues) => ({
     [formDefaultValuesKey(formId)]: defaultValues,

package/build/ValidatedForm.js

@@ -33,7 +33,9 @@ const constants_1 = require("./internal/constants");
 const formContext_1 = require("./internal/formContext");
 const hooks_2 = require("./internal/hooks");
 const MultiValueMap_1 = require("./internal/MultiValueMap");
+const reset_1 = require("./internal/reset");
 const state_1 = require("./internal/state");
+const controlledFields_1 = require("./internal/state/controlledFields");
 const submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
 const getDataFromForm = (el) => new FormData(el);
@@ -138,7 +140,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
     const submit = (0, react_1.useSubmit)();
     const setFieldErrors = (0, hooks_2.useFormUpdateAtom)((0, state_1.fieldErrorsAtom)(formId));
     const setFieldError = (0, hooks_2.useFormUpdateAtom)((0, state_1.setFieldErrorAtom)(formId));
-    const reset = (0, hooks_2.useFormUpdateAtom)((0, state_1.resetAtom)(formId));
+    const reset = (0, hooks_2.useFormUpdateAtom)((0, reset_1.resetAtom)(formId));
     const startSubmit = (0, hooks_2.useFormUpdateAtom)((0, state_1.startSubmitAtom)(formId));
     const endSubmit = (0, hooks_2.useFormUpdateAtom)((0, state_1.endSubmitAtom)(formId));
     const syncFormProps = (0, hooks_2.useFormUpdateAtom)((0, state_1.formPropsAtom)(formId));
@@ -148,8 +150,10 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         setHydrated(true);
         return () => (0, state_1.cleanupFormState)(formId);
     }, [formId, setHydrated]);
+    const awaitValue = (0, controlledFields_1.useAwaitValue)(formId);
     const validateField = (0, react_2.useCallback)(async (field) => {
         (0, tiny_invariant_1.default)(formRef.current, "Cannot find reference to form");
+        await awaitValue(field);
         const { error } = await validator.validateField(getDataFromForm(formRef.current), field);
         if (error) {
             setFieldError({ field, error });
@@ -159,7 +163,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             setFieldError({ field, error: undefined });
             return null;
         }
-    }, [setFieldError, validator]);
+    }, [awaitValue, setFieldError, validator]);
     const customFocusHandlers = (0, MultiValueMap_1.useMultiValueMap)();
     const registerReceiveFocus = (0, react_2.useCallback)((fieldName, handler) => {
         customFocusHandlers().add(fieldName, handler);

package/build/hooks.d.ts

@@ -63,3 +63,5 @@ export declare const useField: (name: string, options?: {
      */
     formId?: string | undefined;
 } | undefined) => FieldProps;
+export declare const useControlField: <T>(name: string, formId?: string | undefined) => readonly [T, (value: T) => void];
+export declare const useUpdateControlledField: (formId?: string | undefined) => (field: string, value: unknown) => void;

package/build/hooks.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useField = exports.useIsValid = exports.useIsSubmitting = void 0;
+exports.useUpdateControlledField = exports.useControlField = exports.useField = exports.useIsValid = exports.useIsSubmitting = void 0;
 const react_1 = require("react");
 const getInputProps_1 = require("./internal/getInputProps");
 const hooks_1 = require("./internal/hooks");
 const state_1 = require("./internal/state");
+const controlledFields_1 = require("./internal/state/controlledFields");
 /**
  * Returns whether or not the parent form is currently being submitted.
  * This is different from remix's `useTransition().submission` in that it
@@ -77,3 +78,14 @@ const useField = (name, options) => {
     return field;
 };
 exports.useField = useField;
+const useControlField = (name, formId) => {
+    const context = (0, hooks_1.useInternalFormContext)(formId, "useControlField");
+    const [value, setValue] = (0, controlledFields_1.useControllableValue)(context, name);
+    return [value, setValue];
+};
+exports.useControlField = useControlField;
+const useUpdateControlledField = (formId) => {
+    const context = (0, hooks_1.useInternalFormContext)(formId, "useControlField");
+    return (0, controlledFields_1.useUpdateControllableValue)(context.formId);
+};
+exports.useUpdateControlledField = useUpdateControlledField;

package/build/internal/MultiValueMap.d.ts

@@ -1,9 +1,11 @@
 export declare class MultiValueMap<Key, Value> {
     private dict;
     add: (key: Key, value: Value) => void;
+    delete: (key: Key) => void;
     remove: (key: Key, value: Value) => void;
     getAll: (key: Key) => Value[];
     entries: () => IterableIterator<[Key, Value[]]>;
+    values: () => IterableIterator<Value[]>;
     has: (key: Key) => boolean;
 }
 export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/build/internal/MultiValueMap.js

@@ -13,6 +13,9 @@ class MultiValueMap {
                 this.dict.set(key, [value]);
             }
         };
+        this.delete = (key) => {
+            this.dict.delete(key);
+        };
         this.remove = (key, value) => {
             if (!this.dict.has(key))
                 return;
@@ -28,6 +31,7 @@ class MultiValueMap {
             return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
         };
         this.entries = () => this.dict.entries();
+        this.values = () => this.dict.values();
         this.has = (key) => this.dict.has(key);
     }
 }

package/build/internal/getInputProps.js

@@ -48,7 +48,8 @@ const createGetInputProps = ({ clearError, validate, defaultValue, touched, setT
         else if (props.type === "radio") {
             inputProps.defaultChecked = (0, getRadioChecked_1.getRadioChecked)(props.value, defaultValue);
         }
-        else {
+        else if (props.value === undefined) {
+            // We should only set the defaultValue if the input is uncontrolled.
             inputProps.defaultValue = defaultValue;
         }
         return (0, omitBy_1.default)(inputProps, (value) => value === undefined);

package/build/internal/reset.d.ts

@@ -0,0 +1,28 @@
+import { InternalFormId } from "./state/atomUtils";
+export declare const resetAtom: {
+    (param: InternalFormId): 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: unknown) => void;
+        onMount?: (<S extends (update?: unknown) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: null;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};