remix-validated-form 4.0.1 → 4.1.0-beta.3

package/build/internal/getInputProps.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createGetInputProps = void 0;
+const omitBy_1 = __importDefault(require("lodash/omitBy"));
 const defaultValidationBehavior = {
     initial: "onBlur",
     whenTouched: "onChange",
@@ -46,18 +50,18 @@ const createGetInputProps = ({ clearError, validate, defaultValue, touched, setT
             },
             name,
         };
-        if (inputProps.type === "checkbox") {
+        if (props.type === "checkbox") {
             const value = (_a = props.value) !== null && _a !== void 0 ? _a : "on";
             inputProps.defaultChecked = getCheckboxDefaultChecked(value, defaultValue);
         }
-        else if (inputProps.type === "radio") {
+        else if (props.type === "radio") {
             const value = (_b = props.value) !== null && _b !== void 0 ? _b : "on";
             inputProps.defaultChecked = defaultValue === value;
         }
         else {
             inputProps.defaultValue = defaultValue;
         }
-        return inputProps;
+        return (0, omitBy_1.default)(inputProps, (value) => value === undefined);
     };
 };
 exports.createGetInputProps = createGetInputProps;

package/build/internal/hooks.d.ts

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

package/build/internal/hooks.js

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

package/build/internal/state.d.ts

@@ -0,0 +1,269 @@
+import { FieldErrors, TouchedFields } from "../validation/types";
+export declare const ATOM_SCOPE: unique symbol;
+export declare type FormState = {
+    hydrated: boolean;
+    fieldErrors?: FieldErrors;
+    isSubmitting: boolean;
+    hasBeenSubmitted: boolean;
+    touchedFields: TouchedFields;
+    formId?: string;
+    action?: string;
+    subaction?: string;
+    defaultValues?: {
+        [fieldName: string]: any;
+    };
+    validateField: (fieldName: string) => Promise<string | null>;
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+};
+export declare type FormAtom = ReturnType<typeof formRegistry>;
+export declare type FieldState = {
+    touched: boolean;
+    defaultValue?: any;
+    error?: string;
+};
+export declare const formRegistry: {
+    (param: string | symbol): import("jotai").WritableAtom<FormState, FormState | ((draft: import("immer/dist/internal").WritableDraft<FormState>) => void), void>;
+    remove(param: string | symbol): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: string | symbol) => boolean) | null): void;
+};
+export declare const fieldErrorAtom: (name: string) => (formAtom: FormAtom) => import("jotai").Atom<string | undefined>;
+export declare const fieldTouchedAtom: (name: string) => (formAtom: FormAtom) => import("jotai").Atom<boolean>;
+export declare const fieldDefaultValueAtom: (name: string) => (formAtom: FormAtom) => import("jotai").Atom<any>;
+export declare const formSelectorAtom: <T>(selector: (state: FormState) => T) => (formAtom: FormAtom) => import("jotai").Atom<T>;
+export declare const fieldErrorsAtom: (formAtom: FormAtom) => import("jotai").Atom<FieldErrors | undefined>;
+export declare const touchedFieldsAtom: (formAtom: FormAtom) => import("jotai").Atom<TouchedFields>;
+export declare const actionAtom: (formAtom: FormAtom) => import("jotai").Atom<string | undefined>;
+export declare const hasBeenSubmittedAtom: (formAtom: FormAtom) => import("jotai").Atom<boolean>;
+export declare const validateFieldAtom: (formAtom: FormAtom) => import("jotai").Atom<(fieldName: string) => Promise<string | null>>;
+export declare const registerReceiveFocusAtom: (formAtom: FormAtom) => import("jotai").Atom<(fieldName: string, handler: () => void) => () => void>;
+export declare const isSubmittingAtom: (formAtom: FormAtom) => import("jotai").Atom<boolean>;
+export declare const defaultValuesAtom: (formAtom: FormAtom) => import("jotai").Atom<{
+    [fieldName: string]: any;
+} | undefined>;
+export declare const isValidAtom: (formAtom: FormAtom) => import("jotai").Atom<boolean>;
+export declare const isHydratedAtom: (formAtom: FormAtom) => import("jotai").Atom<boolean>;
+export declare type FieldAtomArgs = {
+    name: string;
+    formAtom: FormAtom;
+};
+export declare const clearErrorAtom: 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: FieldAtomArgs) => void;
+    onMount?: (<S extends (update: FieldAtomArgs) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+export declare const addErrorAtom: 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: FieldAtomArgs & {
+        error: string;
+    }) => void;
+    onMount?: (<S extends (update: FieldAtomArgs & {
+        error: string;
+    }) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+export declare const setFieldErrorsAtom: 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: {
+        fieldErrors: FieldErrors;
+        formAtom: FormAtom;
+    }) => void;
+    onMount?: (<S extends (update: {
+        fieldErrors: FieldErrors;
+        formAtom: FormAtom;
+    }) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+export declare const setTouchedAtom: 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: FieldAtomArgs & {
+        touched: boolean;
+    }) => void;
+    onMount?: (<S extends (update: FieldAtomArgs & {
+        touched: boolean;
+    }) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+export declare const resetAtom: 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: {
+        formAtom: FormAtom;
+    }) => void;
+    onMount?: (<S extends (update: {
+        formAtom: FormAtom;
+    }) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+export declare const startSubmitAtom: 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: {
+        formAtom: FormAtom;
+    }) => void;
+    onMount?: (<S extends (update: {
+        formAtom: FormAtom;
+    }) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+export declare const endSubmitAtom: 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: {
+        formAtom: FormAtom;
+    }) => void;
+    onMount?: (<S extends (update: {
+        formAtom: FormAtom;
+    }) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+declare type SyncFormContextArgs = {
+    defaultValues?: {
+        [fieldName: string]: any;
+    };
+    action?: string;
+    subaction?: string;
+    validateField: FormState["validateField"];
+    registerReceiveFocus: FormState["registerReceiveFocus"];
+    formAtom: FormAtom;
+};
+export declare const syncFormContextAtom: 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: SyncFormContextArgs) => void;
+    onMount?: (<S extends (update: SyncFormContextArgs) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+export {};

package/build/internal/state.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.syncFormContextAtom = exports.endSubmitAtom = exports.startSubmitAtom = exports.resetAtom = exports.setTouchedAtom = exports.setFieldErrorsAtom = exports.addErrorAtom = exports.clearErrorAtom = exports.isHydratedAtom = exports.isValidAtom = exports.defaultValuesAtom = exports.isSubmittingAtom = exports.registerReceiveFocusAtom = exports.validateFieldAtom = exports.hasBeenSubmittedAtom = exports.actionAtom = exports.touchedFieldsAtom = exports.fieldErrorsAtom = exports.formSelectorAtom = exports.fieldDefaultValueAtom = exports.fieldTouchedAtom = exports.fieldErrorAtom = exports.formRegistry = exports.ATOM_SCOPE = void 0;
+const jotai_1 = require("jotai");
+const immer_1 = require("jotai/immer");
+const utils_1 = require("jotai/utils");
+const get_1 = __importDefault(require("lodash/get"));
+exports.ATOM_SCOPE = Symbol("remix-validated-form-scope");
+exports.formRegistry = (0, utils_1.atomFamily)((formId) => (0, immer_1.atomWithImmer)({
+    hydrated: false,
+    isSubmitting: false,
+    hasBeenSubmitted: false,
+    touchedFields: {},
+    // The symbol version is just to keep things straight with the `atomFamily`
+    formId: typeof formId === "string" ? formId : undefined,
+    // Will change upon hydration -- these will never actually be used
+    validateField: () => Promise.resolve(null),
+    registerReceiveFocus: () => () => { },
+}));
+const fieldErrorAtom = (name) => (formAtom) => (0, utils_1.selectAtom)(formAtom, (formState) => { var _a; return (_a = formState.fieldErrors) === null || _a === void 0 ? void 0 : _a[name]; });
+exports.fieldErrorAtom = fieldErrorAtom;
+const fieldTouchedAtom = (name) => (formAtom) => (0, utils_1.selectAtom)(formAtom, (formState) => formState.touchedFields[name]);
+exports.fieldTouchedAtom = fieldTouchedAtom;
+const fieldDefaultValueAtom = (name) => (formAtom) => (0, utils_1.selectAtom)(formAtom, (formState) => formState.defaultValues && (0, get_1.default)(formState.defaultValues, name));
+exports.fieldDefaultValueAtom = fieldDefaultValueAtom;
+// Selector atoms
+const formSelectorAtom = (selector) => (formAtom) => (0, utils_1.selectAtom)(formAtom, selector);
+exports.formSelectorAtom = formSelectorAtom;
+exports.fieldErrorsAtom = (0, exports.formSelectorAtom)((state) => state.fieldErrors);
+exports.touchedFieldsAtom = (0, exports.formSelectorAtom)((state) => state.touchedFields);
+exports.actionAtom = (0, exports.formSelectorAtom)((state) => state.action);
+exports.hasBeenSubmittedAtom = (0, exports.formSelectorAtom)((state) => state.hasBeenSubmitted);
+exports.validateFieldAtom = (0, exports.formSelectorAtom)((state) => state.validateField);
+exports.registerReceiveFocusAtom = (0, exports.formSelectorAtom)((state) => state.registerReceiveFocus);
+exports.isSubmittingAtom = (0, exports.formSelectorAtom)((state) => state.isSubmitting);
+exports.defaultValuesAtom = (0, exports.formSelectorAtom)((state) => state.defaultValues);
+exports.isValidAtom = (0, exports.formSelectorAtom)((state) => { var _a; return Object.keys((_a = state.fieldErrors) !== null && _a !== void 0 ? _a : {}).length === 0; });
+exports.isHydratedAtom = (0, exports.formSelectorAtom)((state) => state.hydrated);
+exports.clearErrorAtom = (0, jotai_1.atom)(null, (get, set, { name, formAtom }) => set(formAtom, (state) => {
+    var _a;
+    (_a = state.fieldErrors) === null || _a === void 0 ? true : delete _a[name];
+    return state;
+}));
+exports.addErrorAtom = (0, jotai_1.atom)(null, (get, set, { name, formAtom, error }) => set(formAtom, (state) => {
+    if (!state.fieldErrors)
+        state.fieldErrors = {};
+    state.fieldErrors[name] = error;
+    return state;
+}));
+exports.setFieldErrorsAtom = (0, jotai_1.atom)(null, (get, set, { formAtom, fieldErrors }) => set(formAtom, (state) => {
+    state.fieldErrors = fieldErrors;
+    return state;
+}));
+exports.setTouchedAtom = (0, jotai_1.atom)(null, (get, set, { name, formAtom, touched }) => set(formAtom, (state) => {
+    state.touchedFields[name] = touched;
+    return state;
+}));
+exports.resetAtom = (0, jotai_1.atom)(null, (get, set, { formAtom }) => {
+    set(formAtom, (state) => {
+        state.fieldErrors = {};
+        state.touchedFields = {};
+        state.hasBeenSubmitted = false;
+        return state;
+    });
+});
+exports.startSubmitAtom = (0, jotai_1.atom)(null, (get, set, { formAtom }) => {
+    set(formAtom, (state) => {
+        state.hasBeenSubmitted = true;
+        state.isSubmitting = true;
+        return state;
+    });
+});
+exports.endSubmitAtom = (0, jotai_1.atom)(null, (get, set, { formAtom }) => {
+    set(formAtom, (state) => {
+        state.isSubmitting = false;
+        return state;
+    });
+});
+exports.syncFormContextAtom = (0, jotai_1.atom)(null, (get, set, { defaultValues, action, subaction, formAtom, validateField, registerReceiveFocus, }) => {
+    set(formAtom, (state) => {
+        state.defaultValues = defaultValues;
+        state.action = action;
+        state.subaction = subaction;
+        state.registerReceiveFocus = registerReceiveFocus;
+        state.validateField = validateField;
+        state.hydrated = true;
+        return state;
+    });
+});

package/build/internal/util.d.ts

@@ -1,3 +1,4 @@
 import type React from "react";
 export declare const omit: (obj: any, ...keys: string[]) => any;
 export declare const mergeRefs: <T = any>(refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]) => (instance: T | null) => void;
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;

package/build/internal/util.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeRefs = exports.omit = void 0;
+exports.useIsomorphicLayoutEffect = exports.mergeRefs = exports.omit = void 0;
+const react_1 = require("react");
 const omit = (obj, ...keys) => {
     const result = { ...obj };
     for (const key of keys) {
@@ -22,3 +23,4 @@ const mergeRefs = (refs) => {
     };
 };
 exports.mergeRefs = mergeRefs;
+exports.useIsomorphicLayoutEffect = typeof window !== "undefined" ? react_1.useLayoutEffect : react_1.useEffect;

package/build/server.d.ts

@@ -1,3 +1,4 @@
+import { FORM_DEFAULTS_FIELD } from "./internal/constants";
 import { ValidatorError } from "./validation/types";
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
@@ -14,3 +15,7 @@ import { ValidatorError } from "./validation/types";
  * ```
  */
 export declare function validationError(error: ValidatorError, repopulateFields?: unknown): Response;
+export declare type FormDefaults = {
+    [formDefaultsKey: `${typeof FORM_DEFAULTS_FIELD}_${string}`]: any;
+};
+export declare const setFormDefaults: <DataType = any>(formId: string, defaultValues: Partial<DataType>) => FormDefaults;

package/build/server.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validationError = void 0;
+exports.setFormDefaults = exports.validationError = void 0;
 const server_runtime_1 = require("@remix-run/server-runtime");
+const constants_1 = require("./internal/constants");
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
  * When you return this from your action, `ValidatedForm` on the frontend will automatically
@@ -21,6 +22,11 @@ function validationError(error, repopulateFields) {
         fieldErrors: error.fieldErrors,
         subaction: error.subaction,
         repopulateFields,
+        formId: error.formId,
     }, { status: 422 });
 }
 exports.validationError = validationError;
+const setFormDefaults = (formId, defaultValues) => ({
+    [(0, constants_1.formDefaultValuesKey)(formId)]: defaultValues,
+});
+exports.setFormDefaults = setFormDefaults;

package/build/userFacingFormContext.d.ts

@@ -0,0 +1,56 @@
+import { FieldErrors, TouchedFields } from "./validation/types";
+export declare type FormContextValue = {
+    /**
+     * All the errors in all the fields in the form.
+     */
+    fieldErrors: FieldErrors;
+    /**
+     * Clear the errors of the specified fields.
+     */
+    clearError: (...names: string[]) => void;
+    /**
+     * Validate the specified field.
+     */
+    validateField: (fieldName: string) => Promise<string | null>;
+    /**
+     * The `action` prop of the form.
+     */
+    action?: string;
+    /**
+     * Whether or not the form is submitting.
+     */
+    isSubmitting: boolean;
+    /**
+     * Whether or not a submission has been attempted.
+     * This is true once the form has been submitted, even if there were validation errors.
+     * Resets to false when the form is reset.
+     */
+    hasBeenSubmitted: boolean;
+    /**
+     * Whether or not the form is valid.
+     */
+    isValid: boolean;
+    /**
+     * The default values of the form.
+     */
+    defaultValues?: {
+        [fieldName: string]: any;
+    };
+    /**
+     * Register a custom focus handler to be used when
+     * the field needs to receive focus due to a validation error.
+     */
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    /**
+     * Any fields that have been touched by the user.
+     */
+    touchedFields: TouchedFields;
+    /**
+     * Change the touched state of the specified field.
+     */
+    setFieldTouched: (fieldName: string, touched: boolean) => void;
+};
+/**
+ * Provides access to some of the internal state of the form.
+ */
+export declare const useFormContext: (formId?: string | undefined) => FormContextValue;