remix-validated-form 4.1.8 → 4.3.0

package/build/internal/reset.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetAtom = void 0;
+const jotai_1 = require("jotai");
+const utils_1 = require("jotai/utils");
+const get_1 = __importDefault(require("lodash/get"));
+const state_1 = require("./state");
+const controlledFields_1 = require("./state/controlledFields");
+exports.resetAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (get, set) => {
+    set((0, state_1.fieldErrorsAtom)(formId), {});
+    set((0, state_1.touchedFieldsAtom)(formId), {});
+    set((0, state_1.hasBeenSubmittedAtom)(formId), false);
+    const { defaultValues } = get((0, state_1.formPropsAtom)(formId));
+    const controlledFields = get((0, controlledFields_1.controlledFieldsAtom)(formId));
+    Object.entries(controlledFields).forEach(([name, atom]) => set(atom, (0, get_1.default)(defaultValues, name)));
+}));

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

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRegisterFieldSerializer = exports.useFieldSerializer = exports.useControllableValue = exports.useControlledFieldValue = exports.useAllControlledFields = exports.setControlledFieldValueAtom = exports.controlledFieldsAtom = void 0;
+exports.useAwaitValue = exports.useUpdateControllableValue = exports.useControllableValue = exports.useControlledFieldValue = exports.setControlledFieldValueAtom = exports.resolveValueUpdateAtom = exports.valueUpdatePromiseAtom = exports.controlledFieldsAtom = void 0;
 const jotai_1 = require("jotai");
+const utils_1 = require("jotai/utils");
 const omit_1 = __importDefault(require("lodash/omit"));
 const react_1 = require("react");
 const hooks_1 = require("../hooks");
@@ -14,14 +15,8 @@ exports.controlledFieldsAtom = (0, atomUtils_1.formAtomFamily)({});
 const refCountAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(0));
 const fieldValueAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
 const fieldValueHydratedAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(false));
-const pendingValidateAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
-const valueSerializerAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)({
-    serializer: (value) => {
-        if (value === undefined)
-            return "";
-        return JSON.stringify(value);
-    },
-}));
+exports.valueUpdatePromiseAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
+exports.resolveValueUpdateAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
 const registerAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) => {
     set(refCountAtom({ formId, field }), (prev) => prev + 1);
     const newRefCount = get(refCountAtom({ formId, field }));
@@ -40,24 +35,27 @@ const unregisterAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) =>
     if (newRefCount === 0) {
         set((0, exports.controlledFieldsAtom)(formId), (prev) => (0, omit_1.default)(prev, field));
         fieldValueAtom.remove({ formId, field });
-        pendingValidateAtom.remove({ formId, field });
+        exports.resolveValueUpdateAtom.remove({ formId, field });
         fieldValueHydratedAtom.remove({ formId, field });
     }
 });
-exports.setControlledFieldValueAtom = (0, jotai_1.atom)(null, async (_get, set, { formId, field, value, }) => {
+exports.setControlledFieldValueAtom = (0, jotai_1.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 = (0, exports.resolveValueUpdateAtom)({ formId, field });
+    const promiseAtom = (0, exports.valueUpdatePromiseAtom)({ formId, field });
+    const promise = new Promise((resolve) => set(resolveAtom, () => {
+        resolve();
+        set(resolveAtom, undefined);
+        set(promiseAtom, undefined);
+    }));
+    set(promiseAtom, promise);
 });
-const useAllControlledFields = (formId) => (0, hooks_1.useFormAtomValue)((0, exports.controlledFieldsAtom)(formId));
-exports.useAllControlledFields = useAllControlledFields;
-const useControlledFieldValue = (formId, field) => {
-    const fieldAtom = fieldValueAtom({ formId, field });
+const useControlledFieldValue = (context, field) => {
+    const fieldAtom = fieldValueAtom({ formId: context.formId, field });
     const [value, setValue] = (0, hooks_1.useFormAtom)(fieldAtom);
-    const defaultValue = (0, hooks_1.useFieldDefaultValue)(field, { formId });
-    const isHydrated = (0, hooks_1.useFormAtomValue)((0, state_1.isHydratedAtom)(formId));
-    const [isFieldHydrated, setIsFieldHydrated] = (0, hooks_1.useFormAtom)(fieldValueHydratedAtom({ formId, field }));
+    const defaultValue = (0, hooks_1.useFieldDefaultValue)(field, context);
+    const isHydrated = (0, hooks_1.useFormAtomValue)((0, state_1.isHydratedAtom)(context.formId));
+    const [isFieldHydrated, setIsFieldHydrated] = (0, hooks_1.useFormAtom)(fieldValueHydratedAtom({ formId: context.formId, field }));
     (0, react_1.useEffect)(() => {
         if (isHydrated && !isFieldHydrated) {
             setValue(defaultValue);
@@ -66,7 +64,7 @@ const useControlledFieldValue = (formId, field) => {
     }, [
         defaultValue,
         field,
-        formId,
+        context.formId,
         isFieldHydrated,
         isHydrated,
         setIsFieldHydrated,
@@ -75,30 +73,31 @@ const useControlledFieldValue = (formId, field) => {
     return isFieldHydrated ? value : defaultValue;
 };
 exports.useControlledFieldValue = useControlledFieldValue;
-const useControllableValue = (formId, field) => {
-    const pending = (0, hooks_1.useFormAtomValue)(pendingValidateAtom({ formId, field }));
+const useControllableValue = (context, field) => {
+    const resolveUpdate = (0, hooks_1.useFormAtomValue)((0, exports.resolveValueUpdateAtom)({ formId: context.formId, field }));
     (0, react_1.useEffect)(() => {
-        pending === null || pending === void 0 ? void 0 : pending();
-    }, [pending]);
+        resolveUpdate === null || resolveUpdate === void 0 ? void 0 : resolveUpdate();
+    }, [resolveUpdate]);
     const register = (0, hooks_1.useFormUpdateAtom)(registerAtom);
     const unregister = (0, hooks_1.useFormUpdateAtom)(unregisterAtom);
     (0, react_1.useEffect)(() => {
-        register({ formId, field });
-        return () => unregister({ formId, field });
-    }, [field, formId, register, unregister]);
+        register({ formId: context.formId, field });
+        return () => unregister({ formId: context.formId, field });
+    }, [context.formId, field, register, unregister]);
     const setControlledFieldValue = (0, hooks_1.useFormUpdateAtom)(exports.setControlledFieldValueAtom);
-    const setValue = (0, react_1.useCallback)((value) => setControlledFieldValue({ formId, field, value }), [field, formId, setControlledFieldValue]);
-    const value = (0, exports.useControlledFieldValue)(formId, field);
+    const setValue = (0, react_1.useCallback)((value) => setControlledFieldValue({ formId: context.formId, field, value }), [field, context.formId, setControlledFieldValue]);
+    const value = (0, exports.useControlledFieldValue)(context, field);
     return [value, setValue];
 };
 exports.useControllableValue = useControllableValue;
-const useFieldSerializer = (formId, field) => (0, hooks_1.useFormAtomValue)(valueSerializerAtom({ formId, field })).serializer;
-exports.useFieldSerializer = useFieldSerializer;
-const useRegisterFieldSerializer = (formId, field, serializer) => {
-    const setSerializer = (0, hooks_1.useFormUpdateAtom)(valueSerializerAtom({ formId, field }));
-    (0, react_1.useEffect)(() => {
-        if (serializer)
-            setSerializer({ serializer });
-    }, [serializer, setSerializer]);
+const useUpdateControllableValue = (formId) => {
+    const setControlledFieldValue = (0, hooks_1.useFormUpdateAtom)(exports.setControlledFieldValueAtom);
+    return (0, react_1.useCallback)((field, value) => setControlledFieldValue({ formId, field, value }), [formId, setControlledFieldValue]);
+};
+exports.useUpdateControllableValue = useUpdateControllableValue;
+const useAwaitValue = (formId) => {
+    return (0, utils_1.useAtomCallback)((0, react_1.useCallback)(async (get, _set, field) => {
+        await get((0, exports.valueUpdatePromiseAtom)({ formId, field }));
+    }, [formId]));
 };
-exports.useRegisterFieldSerializer = useRegisterFieldSerializer;
+exports.useAwaitValue = useAwaitValue;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fieldDefaultValueAtom = exports.fieldErrorAtom = exports.fieldTouchedAtom = exports.setFieldErrorAtom = exports.setTouchedAtom = exports.endSubmitAtom = exports.startSubmitAtom = exports.resetAtom = exports.isValidAtom = exports.cleanupFormState = exports.formElementAtom = exports.formPropsAtom = exports.touchedFieldsAtom = exports.fieldErrorsAtom = exports.hasBeenSubmittedAtom = exports.isSubmittingAtom = exports.isHydratedAtom = exports.ATOM_SCOPE = void 0;
+exports.fieldDefaultValueAtom = exports.fieldErrorAtom = exports.fieldTouchedAtom = exports.setFieldErrorAtom = exports.setTouchedAtom = exports.endSubmitAtom = exports.startSubmitAtom = exports.isValidAtom = exports.cleanupFormState = exports.formElementAtom = exports.formPropsAtom = exports.touchedFieldsAtom = exports.fieldErrorsAtom = exports.hasBeenSubmittedAtom = exports.isSubmittingAtom = exports.isHydratedAtom = exports.ATOM_SCOPE = void 0;
 const jotai_1 = require("jotai");
 const utils_1 = require("jotai/utils");
 const omit_1 = __importDefault(require("lodash/omit"));
@@ -33,11 +33,6 @@ const cleanupFormState = (formId) => {
 };
 exports.cleanupFormState = cleanupFormState;
 exports.isValidAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)((get) => Object.keys(get((0, exports.fieldErrorsAtom)(formId))).length === 0));
-exports.resetAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (_get, set) => {
-    set((0, exports.fieldErrorsAtom)(formId), {});
-    set((0, exports.touchedFieldsAtom)(formId), {});
-    set((0, exports.hasBeenSubmittedAtom)(formId), false);
-}));
 exports.startSubmitAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (_get, set) => {
     set((0, exports.isSubmittingAtom)(formId), true);
     set((0, exports.hasBeenSubmittedAtom)(formId), true);

package/build/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/build/server.js

@@ -17,13 +17,13 @@ const constants_1 = require("./internal/constants");
  * if (result.error) return validationError(result.error, result.submittedData);
  * ```
  */
-function validationError(error, repopulateFields) {
+function validationError(error, repopulateFields, init) {
     return (0, server_runtime_1.json)({
         fieldErrors: error.fieldErrors,
         subaction: error.subaction,
         repopulateFields,
         formId: error.formId,
-    }, { status: 422 });
+    }, { status: 422, ...init });
 }
 exports.validationError = validationError;
 const setFormDefaults = (formId, defaultValues) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.1.8",
+  "version": "4.3.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -35,7 +35,7 @@
   "peerDependencies": {
     "@remix-run/react": "1.x",
     "@remix-run/server-runtime": "1.x",
-    "react": "^17.0.2"
+    "react": "^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
     "@remix-run/react": "^1.2.1",

package/src/ValidatedForm.tsx

@@ -1,4 +1,5 @@
 import { Form as RemixForm, useFetcher, useSubmit } from "@remix-run/react";
+import { useAtomCallback } from "jotai/utils";
 import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
@@ -24,6 +25,7 @@ import {
   useHasActiveFormSubmit,
 } from "./internal/hooks";
 import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
+import { resetAtom } from "./internal/reset";
 import {
   cleanupFormState,
   endSubmitAtom,
@@ -31,11 +33,11 @@ import {
   formElementAtom,
   formPropsAtom,
   isHydratedAtom,
-  resetAtom,
   setFieldErrorAtom,
   startSubmitAtom,
   SyncedFormProps,
 } from "./internal/state";
+import { useAwaitValue } from "./internal/state/controlledFields";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
   mergeRefs,
@@ -246,9 +248,11 @@ export function ValidatedForm<DataType>({
     return () => cleanupFormState(formId);
   }, [formId, setHydrated]);
 
+  const awaitValue = useAwaitValue(formId);
   const validateField: SyncedFormProps["validateField"] = useCallback(
     async (field) => {
       invariant(formRef.current, "Cannot find reference to form");
+      await awaitValue(field);
       const { error } = await validator.validateField(
         getDataFromForm(formRef.current),
         field
@@ -262,7 +266,7 @@ export function ValidatedForm<DataType>({
         return null;
       }
     },
-    [setFieldError, validator]
+    [awaitValue, setFieldError, validator]
   );
 
   const customFocusHandlers = useMultiValueMap<string, () => void>();

package/src/hooks.ts

@@ -17,6 +17,10 @@ import {
   isSubmittingAtom,
   isValidAtom,
 } from "./internal/state";
+import {
+  useControllableValue,
+  useUpdateControllableValue,
+} from "./internal/state/controlledFields";
 
 /**
  * Returns whether or not the parent form is currently being submitted.
@@ -148,3 +152,14 @@ export const useField = (
 
   return field;
 };
+
+export const useControlField = <T>(name: string, formId?: string) => {
+  const context = useInternalFormContext(formId, "useControlField");
+  const [value, setValue] = useControllableValue(context, name);
+  return [value as T, setValue as (value: T) => void] as const;
+};
+
+export const useUpdateControlledField = (formId?: string) => {
+  const context = useInternalFormContext(formId, "useControlField");
+  return useUpdateControllableValue(context.formId);
+};

package/src/internal/MultiValueMap.ts

@@ -11,6 +11,10 @@ export class MultiValueMap<Key, Value> {
     }
   };
 
+  delete = (key: Key) => {
+    this.dict.delete(key);
+  };
+
   remove = (key: Key, value: Value) => {
     if (!this.dict.has(key)) return;
     const array = this.dict.get(key)!;
@@ -25,6 +29,8 @@ export class MultiValueMap<Key, Value> {
 
   entries = (): IterableIterator<[Key, Value[]]> => this.dict.entries();
 
+  values = (): IterableIterator<Value[]> => this.dict.values();
+
   has = (key: Key): boolean => this.dict.has(key);
 }
 

package/src/internal/getInputProps.ts

@@ -84,7 +84,8 @@ export const createGetInputProps = ({
       inputProps.defaultChecked = getCheckboxChecked(props.value, defaultValue);
     } 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;
     }
 

package/src/internal/reset.ts

@@ -0,0 +1,26 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import lodashGet from "lodash/get";
+import {
+  fieldErrorsAtom,
+  formPropsAtom,
+  hasBeenSubmittedAtom,
+  touchedFieldsAtom,
+} from "./state";
+import { InternalFormId } from "./state/atomUtils";
+import { controlledFieldsAtom } from "./state/controlledFields";
+
+export const resetAtom = atomFamily((formId: InternalFormId) =>
+  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/src/internal/state/controlledFields.ts

@@ -0,0 +1,170 @@
+import { atom, PrimitiveAtom } from "jotai";
+import { useAtomCallback } from "jotai/utils";
+import omit from "lodash/omit";
+import { useCallback, useEffect } from "react";
+import { InternalFormContextValue } from "../formContext";
+import {
+  useFieldDefaultValue,
+  useFormAtomValue,
+  useFormAtom,
+  useFormUpdateAtom,
+} from "../hooks";
+import { isHydratedAtom } from "../state";
+import {
+  fieldAtomFamily,
+  FieldAtomKey,
+  formAtomFamily,
+  InternalFormId,
+} from "./atomUtils";
+
+export const controlledFieldsAtom = formAtomFamily<
+  Record<string, PrimitiveAtom<unknown>>
+>({});
+const refCountAtom = fieldAtomFamily(() => atom(0));
+const fieldValueAtom = fieldAtomFamily(() => atom<unknown>(undefined));
+const fieldValueHydratedAtom = fieldAtomFamily(() => atom(false));
+
+export const valueUpdatePromiseAtom = fieldAtomFamily(() =>
+  atom<Promise<void> | undefined>(undefined)
+);
+export const resolveValueUpdateAtom = fieldAtomFamily(() =>
+  atom<(() => void) | undefined>(undefined)
+);
+
+const registerAtom = atom(null, (get, set, { formId, field }: FieldAtomKey) => {
+  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 }: FieldAtomKey) => {
+    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 });
+      resolveValueUpdateAtom.remove({ formId, field });
+      fieldValueHydratedAtom.remove({ formId, field });
+    }
+  }
+);
+
+export const setControlledFieldValueAtom = atom(
+  null,
+  (
+    _get,
+    set,
+    {
+      formId,
+      field,
+      value,
+    }: { formId: InternalFormId; field: string; value: unknown }
+  ) => {
+    set(fieldValueAtom({ formId, field }), value);
+    const resolveAtom = resolveValueUpdateAtom({ formId, field });
+    const promiseAtom = valueUpdatePromiseAtom({ formId, field });
+
+    const promise = new Promise<void>((resolve) =>
+      set(resolveAtom, () => {
+        resolve();
+        set(resolveAtom, undefined);
+        set(promiseAtom, undefined);
+      })
+    );
+    set(promiseAtom, promise);
+  }
+);
+
+export const useControlledFieldValue = (
+  context: InternalFormContextValue,
+  field: string
+) => {
+  const fieldAtom = fieldValueAtom({ formId: context.formId, field });
+  const [value, setValue] = useFormAtom(fieldAtom);
+
+  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);
+      setIsFieldHydrated(true);
+    }
+  }, [
+    defaultValue,
+    field,
+    context.formId,
+    isFieldHydrated,
+    isHydrated,
+    setIsFieldHydrated,
+    setValue,
+  ]);
+
+  return isFieldHydrated ? value : defaultValue;
+};
+
+export const useControllableValue = (
+  context: InternalFormContextValue,
+  field: string
+) => {
+  const resolveUpdate = useFormAtomValue(
+    resolveValueUpdateAtom({ formId: context.formId, field })
+  );
+  useEffect(() => {
+    resolveUpdate?.();
+  }, [resolveUpdate]);
+
+  const register = useFormUpdateAtom(registerAtom);
+  const unregister = useFormUpdateAtom(unregisterAtom);
+  useEffect(() => {
+    register({ formId: context.formId, field });
+    return () => unregister({ formId: context.formId, field });
+  }, [context.formId, field, register, unregister]);
+
+  const setControlledFieldValue = useFormUpdateAtom(
+    setControlledFieldValueAtom
+  );
+  const setValue = useCallback(
+    (value: unknown) =>
+      setControlledFieldValue({ formId: context.formId, field, value }),
+    [field, context.formId, setControlledFieldValue]
+  );
+
+  const value = useControlledFieldValue(context, field);
+
+  return [value, setValue] as const;
+};
+
+export const useUpdateControllableValue = (formId: InternalFormId) => {
+  const setControlledFieldValue = useFormUpdateAtom(
+    setControlledFieldValueAtom
+  );
+  return useCallback(
+    (field: string, value: unknown) =>
+      setControlledFieldValue({ formId, field, value }),
+    [formId, setControlledFieldValue]
+  );
+};
+
+export const useAwaitValue = (formId: InternalFormId) => {
+  return useAtomCallback(
+    useCallback(
+      async (get, _set, field: string) => {
+        await get(valueUpdatePromiseAtom({ formId, field }));
+      },
+      [formId]
+    )
+  );
+};

package/src/internal/state.ts

@@ -48,14 +48,6 @@ export const isValidAtom = atomFamily((formId: InternalFormId) =>
   atom((get) => Object.keys(get(fieldErrorsAtom(formId))).length === 0)
 );
 
-export const resetAtom = atomFamily((formId: InternalFormId) =>
-  atom(null, (_get, set) => {
-    set(fieldErrorsAtom(formId), {});
-    set(touchedFieldsAtom(formId), {});
-    set(hasBeenSubmittedAtom(formId), false);
-  })
-);
-
 export const startSubmitAtom = atomFamily((formId: InternalFormId) =>
   atom(null, (_get, set) => {
     set(isSubmittingAtom(formId), true);