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

package/browser/internal/getInputProps.js

@@ -1,3 +1,4 @@
+import omitBy from "lodash/omitBy";
 const defaultValidationBehavior = {
     initial: "onBlur",
     whenTouched: "onChange",
@@ -43,17 +44,17 @@ export const createGetInputProps = ({ clearError, validate, defaultValue, touche
             },
             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 omitBy(inputProps, (value) => value === undefined);
     };
 };

package/browser/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/browser/internal/hooks.js

@@ -0,0 +1,110 @@
+import { useActionData, useMatches, useTransition } from "@remix-run/react";
+import { useAtomValue, useUpdateAtom } from "jotai/utils";
+import lodashGet from "lodash/get";
+import identity from "lodash/identity";
+import { useCallback, useContext, useMemo } from "react";
+import { formDefaultValuesKey } from "./constants";
+import { InternalFormContext } from "./formContext";
+import { ATOM_SCOPE, clearErrorAtom, fieldDefaultValueAtom, fieldErrorAtom, fieldTouchedAtom, formRegistry, isHydratedAtom, setTouchedAtom, } from "./state";
+const USE_HYDRATED_STATE = Symbol("USE_HYDRATED_STATE");
+export const useInternalFormContext = (formId, hookName) => {
+    const formContext = useContext(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'.`);
+};
+export const useContextSelectAtom = (formId, selectorAtomCreator) => {
+    const formAtom = formRegistry(formId);
+    const selectorAtom = useMemo(() => selectorAtomCreator(formAtom), [formAtom, selectorAtomCreator]);
+    return useAtomValue(selectorAtom, ATOM_SCOPE);
+};
+export const useHydratableSelector = ({ formId }, atomCreator, dataToUse, selector = identity) => {
+    const dataFromState = useContextSelectAtom(formId, atomCreator);
+    return dataToUse === USE_HYDRATED_STATE ? dataFromState : selector(dataToUse);
+};
+export function useErrorResponseForForm({ fetcher, subaction, formId, }) {
+    var _a;
+    const actionData = useActionData();
+    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;
+}
+export const useFieldErrorsForForm = (context) => {
+    const response = useErrorResponseForForm(context);
+    const hydrated = useContextSelectAtom(context.formId, isHydratedAtom);
+    return hydrated ? USE_HYDRATED_STATE : response === null || response === void 0 ? void 0 : response.fieldErrors;
+};
+export const useDefaultValuesFromLoader = ({ formId, }) => {
+    const matches = useMatches();
+    if (typeof formId === "string") {
+        const dataKey = 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;
+};
+export const useDefaultValuesForForm = (context) => {
+    const { formId, defaultValuesProp } = context;
+    const hydrated = useContextSelectAtom(formId, isHydratedAtom);
+    const errorResponse = useErrorResponseForForm(context);
+    const defaultValuesFromLoader = 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;
+};
+export const useHasActiveFormSubmit = ({ fetcher, }) => {
+    const transition = useTransition();
+    const hasActiveSubmission = fetcher
+        ? fetcher.state === "submitting"
+        : !!transition.submission;
+    return hasActiveSubmission;
+};
+export const useFieldTouched = (name, { formId }) => {
+    const atomCreator = useMemo(() => fieldTouchedAtom(name), [name]);
+    return useContextSelectAtom(formId, atomCreator);
+};
+export const useFieldError = (name, context) => {
+    return useHydratableSelector(context, useMemo(() => fieldErrorAtom(name), [name]), useFieldErrorsForForm(context), (fieldErrors) => fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors[name]);
+};
+export const useFieldDefaultValue = (name, context) => {
+    return useHydratableSelector(context, useMemo(() => fieldDefaultValueAtom(name), [name]), useDefaultValuesForForm(context), (val) => lodashGet(val, name));
+};
+export const useFormUpdateAtom = (atom) => useUpdateAtom(atom, ATOM_SCOPE);
+export const useClearError = (context) => {
+    const clearError = useFormUpdateAtom(clearErrorAtom);
+    return useCallback((name) => {
+        clearError({ name, formAtom: formRegistry(context.formId) });
+    }, [clearError, context.formId]);
+};
+export const useSetTouched = (context) => {
+    const setTouched = useFormUpdateAtom(setTouchedAtom);
+    return useCallback((name, touched) => {
+        setTouched({ name, formAtom: formRegistry(context.formId), touched });
+    }, [setTouched, context.formId]);
+};

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

@@ -0,0 +1,82 @@
+import { atom } from "jotai";
+import { atomWithImmer } from "jotai/immer";
+import { atomFamily, selectAtom } from "jotai/utils";
+import lodashGet from "lodash/get";
+export const ATOM_SCOPE = Symbol("remix-validated-form-scope");
+export const formRegistry = atomFamily((formId) => 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: () => () => { },
+}));
+export const fieldErrorAtom = (name) => (formAtom) => selectAtom(formAtom, (formState) => { var _a; return (_a = formState.fieldErrors) === null || _a === void 0 ? void 0 : _a[name]; });
+export const fieldTouchedAtom = (name) => (formAtom) => selectAtom(formAtom, (formState) => formState.touchedFields[name]);
+export const fieldDefaultValueAtom = (name) => (formAtom) => selectAtom(formAtom, (formState) => formState.defaultValues && lodashGet(formState.defaultValues, name));
+// Selector atoms
+export const formSelectorAtom = (selector) => (formAtom) => selectAtom(formAtom, selector);
+export const fieldErrorsAtom = formSelectorAtom((state) => state.fieldErrors);
+export const touchedFieldsAtom = formSelectorAtom((state) => state.touchedFields);
+export const actionAtom = formSelectorAtom((state) => state.action);
+export const hasBeenSubmittedAtom = formSelectorAtom((state) => state.hasBeenSubmitted);
+export const validateFieldAtom = formSelectorAtom((state) => state.validateField);
+export const registerReceiveFocusAtom = formSelectorAtom((state) => state.registerReceiveFocus);
+export const isSubmittingAtom = formSelectorAtom((state) => state.isSubmitting);
+export const defaultValuesAtom = formSelectorAtom((state) => state.defaultValues);
+export const isValidAtom = formSelectorAtom((state) => { var _a; return Object.keys((_a = state.fieldErrors) !== null && _a !== void 0 ? _a : {}).length === 0; });
+export const isHydratedAtom = formSelectorAtom((state) => state.hydrated);
+export const clearErrorAtom = atom(null, (get, set, { name, formAtom }) => set(formAtom, (state) => {
+    var _a;
+    (_a = state.fieldErrors) === null || _a === void 0 ? true : delete _a[name];
+    return state;
+}));
+export const addErrorAtom = atom(null, (get, set, { name, formAtom, error }) => set(formAtom, (state) => {
+    if (!state.fieldErrors)
+        state.fieldErrors = {};
+    state.fieldErrors[name] = error;
+    return state;
+}));
+export const setFieldErrorsAtom = atom(null, (get, set, { formAtom, fieldErrors }) => set(formAtom, (state) => {
+    state.fieldErrors = fieldErrors;
+    return state;
+}));
+export const setTouchedAtom = atom(null, (get, set, { name, formAtom, touched }) => set(formAtom, (state) => {
+    state.touchedFields[name] = touched;
+    return state;
+}));
+export const resetAtom = atom(null, (get, set, { formAtom }) => {
+    set(formAtom, (state) => {
+        state.fieldErrors = {};
+        state.touchedFields = {};
+        state.hasBeenSubmitted = false;
+        return state;
+    });
+});
+export const startSubmitAtom = atom(null, (get, set, { formAtom }) => {
+    set(formAtom, (state) => {
+        state.hasBeenSubmitted = true;
+        state.isSubmitting = true;
+        return state;
+    });
+});
+export const endSubmitAtom = atom(null, (get, set, { formAtom }) => {
+    set(formAtom, (state) => {
+        state.isSubmitting = false;
+        return state;
+    });
+});
+export const syncFormContextAtom = 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/browser/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/browser/internal/util.js

@@ -1,3 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
 export const omit = (obj, ...keys) => {
     const result = { ...obj };
     for (const key of keys) {
@@ -17,3 +18,4 @@ export const mergeRefs = (refs) => {
         });
     };
 };
+export const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/browser/lowLevelHooks.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -1,4 +1,5 @@
 import { json } from "@remix-run/server-runtime";
+import { formDefaultValuesKey, } from "./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
@@ -18,5 +19,9 @@ export function validationError(error, repopulateFields) {
         fieldErrors: error.fieldErrors,
         subaction: error.subaction,
         repopulateFields,
+        formId: error.formId,
     }, { status: 422 });
 }
+export const setFormDefaults = (formId, defaultValues) => ({
+    [formDefaultValuesKey(formId)]: defaultValues,
+});

package/browser/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;

package/browser/userFacingFormContext.js

@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+import { useIsSubmitting, useIsValid } from "./hooks";
+import { useClearError, useContextSelectAtom, useDefaultValuesForForm, useFieldErrorsForForm, useHydratableSelector, useInternalFormContext, useSetTouched, } from "./internal/hooks";
+import { actionAtom, defaultValuesAtom, fieldErrorsAtom, hasBeenSubmittedAtom, registerReceiveFocusAtom, touchedFieldsAtom, validateFieldAtom, } from "./internal/state";
+/**
+ * Provides access to some of the internal state of the form.
+ */
+export const useFormContext = (formId) => {
+    // Try to access context so we get our error specific to this hook if it's not there
+    const context = useInternalFormContext(formId, "useFormContext");
+    const action = useContextSelectAtom(context.formId, actionAtom);
+    const isSubmitting = useIsSubmitting(formId);
+    const hasBeenSubmitted = useContextSelectAtom(context.formId, hasBeenSubmittedAtom);
+    const isValid = useIsValid(formId);
+    const defaultValues = useHydratableSelector(context, defaultValuesAtom, useDefaultValuesForForm(context));
+    const fieldErrors = useHydratableSelector(context, fieldErrorsAtom, useFieldErrorsForForm(context));
+    const setFieldTouched = useSetTouched(context);
+    const touchedFields = useContextSelectAtom(context.formId, touchedFieldsAtom);
+    const validateField = useContextSelectAtom(context.formId, validateFieldAtom);
+    const registerReceiveFocus = useContextSelectAtom(context.formId, registerReceiveFocusAtom);
+    const internalClearError = useClearError(context);
+    const clearError = useCallback((...names) => {
+        names.forEach((name) => {
+            internalClearError(name);
+        });
+    }, [internalClearError]);
+    return {
+        isSubmitting,
+        hasBeenSubmitted,
+        isValid,
+        defaultValues,
+        clearError,
+        fieldErrors: fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {},
+        action,
+        setFieldTouched,
+        touchedFields,
+        validateField,
+        registerReceiveFocus,
+    };
+};