remix-validated-form 4.1.4-beta.0 → 4.1.6

package/browser/internal/state.js

@@ -1,82 +1,69 @@
 import { atom } from "jotai";
-import { atomWithImmer } from "jotai/immer";
 import { atomFamily, selectAtom } from "jotai/utils";
-import lodashGet from "lodash/get";
+import omit from "lodash/omit";
+import { fieldAtomFamily, formAtomFamily, } from "./state/atomUtils";
 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
+export const isHydratedAtom = formAtomFamily(false);
+export const isSubmittingAtom = formAtomFamily(false);
+export const hasBeenSubmittedAtom = formAtomFamily(false);
+export const fieldErrorsAtom = formAtomFamily({});
+export const touchedFieldsAtom = formAtomFamily({});
+export const formPropsAtom = formAtomFamily({
     validateField: () => Promise.resolve(null),
     registerReceiveFocus: () => () => { },
+    defaultValues: {},
+});
+export const formElementAtom = formAtomFamily(null);
+//// Everything below is derived from the above
+export const cleanupFormState = (formId) => {
+    [
+        isHydratedAtom,
+        isSubmittingAtom,
+        hasBeenSubmittedAtom,
+        fieldErrorsAtom,
+        touchedFieldsAtom,
+        formPropsAtom,
+    ].forEach((formAtom) => formAtom.remove(formId));
+};
+export const isValidAtom = atomFamily((formId) => atom((get) => Object.keys(get(fieldErrorsAtom(formId))).length === 0));
+export const resetAtom = atomFamily((formId) => atom(null, (_get, set) => {
+    set(fieldErrorsAtom(formId), {});
+    set(touchedFieldsAtom(formId), {});
+    set(hasBeenSubmittedAtom(formId), false);
 }));
-export const 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 startSubmitAtom = atomFamily((formId) => atom(null, (_get, set) => {
+    set(isSubmittingAtom(formId), true);
+    set(hasBeenSubmittedAtom(formId), true);
 }));
-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 endSubmitAtom = atomFamily((formId) => atom(null, (_get, set) => {
+    set(isSubmittingAtom(formId), false);
 }));
-export const setFieldErrorsAtom = atom(null, (get, set, { formAtom, fieldErrors }) => set(formAtom, (state) => {
-    state.fieldErrors = fieldErrors;
-    return state;
+export const setTouchedAtom = atomFamily((formId) => atom(null, (get, set, { field, touched }) => {
+    const prev = get(touchedFieldsAtom(formId));
+    if (prev[field] !== touched) {
+        set(touchedFieldsAtom(formId), {
+            ...prev,
+            [field]: touched,
+        });
+    }
 }));
-export const setTouchedAtom = atom(null, (get, set, { name, formAtom, touched }) => set(formAtom, (state) => {
-    state.touchedFields[name] = touched;
-    return state;
+export const setFieldErrorAtom = atomFamily((formId) => atom(null, (get, set, { field, error }) => {
+    const prev = get(fieldErrorsAtom(formId));
+    if (error === undefined && field in prev) {
+        set(fieldErrorsAtom(formId), omit(prev, field));
+    }
+    if (error !== undefined && prev[field] !== error) {
+        set(fieldErrorsAtom(formId), {
+            ...get(fieldErrorsAtom(formId)),
+            [field]: error,
+        });
+    }
 }));
-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;
-    });
-});
+//// Field specific
+export const fieldTouchedAtom = fieldAtomFamily(({ formId, field }) => atom((get) => get(touchedFieldsAtom(formId))[field], (_get, set, touched) => {
+    set(setTouchedAtom(formId), { field, touched });
+}));
+export const fieldErrorAtom = fieldAtomFamily(({ formId, field }) => atom((get) => get(fieldErrorsAtom(formId))[field], (_get, set, error) => {
+    set(setFieldErrorAtom(formId), { field, error });
+}));
+export const fieldDefaultValueAtom = fieldAtomFamily(({ formId, field }) => selectAtom(formPropsAtom(formId), (state) => state.defaultValues[field]));

package/browser/internal/watch.d.ts

@@ -0,0 +1,18 @@
+declare type ParseInfo = {
+    value: unknown;
+    type: string;
+    isRepeated: boolean;
+    checked?: boolean;
+};
+declare type BaseWatchOptions<T> = {
+    formId?: string;
+    parse?: (info: ParseInfo) => T;
+};
+declare type UseWatchType = {
+    <T, U extends boolean | undefined>(name: string, options?: BaseWatchOptions<T> & {
+        repeatable: U | undefined;
+    }): U extends true ? T[] : T;
+    <T>(name: string, options?: BaseWatchOptions<T>): T;
+};
+export declare const useWatch: UseWatchType;
+export {};

package/browser/internal/watch.js

@@ -0,0 +1,122 @@
+import { atom } from "jotai";
+import { selectAtom } from "jotai/utils";
+import isNaN from "lodash/isNaN";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import invariant from "tiny-invariant";
+import { useInternalFormContext, useFieldDefaultValue, useFormAtomValue, } from "./hooks";
+import { isCheckbox, isMultiselect, isRadio } from "./logic/elementUtils";
+import { formElementAtom } from "./state";
+import { fieldAtomFamily } from "./state/atomUtils";
+import { controlledFieldsAtom } from "./state/controlledFields";
+const emptyAtom = atom(undefined); // Always empty -- just used as a default value
+const watchControlledFieldAtom = fieldAtomFamily(({ field, formId }) => selectAtom(controlledFieldsAtom(formId), (fields) => {
+    var _a;
+    return ({
+        present: field in fields,
+        valueAtom: (_a = fields[field]) !== null && _a !== void 0 ? _a : emptyAtom,
+    });
+}, (a, b) => a.present === b.present && a.valueAtom === b.valueAtom));
+const defaultParse = ({ value, type, isRepeated, checked, }) => {
+    if (type === "number") {
+        if (value === "")
+            return undefined;
+        const result = Number(value);
+        if (isNaN(result))
+            throw new Error("Value is not a number");
+        return result;
+    }
+    if (type === "checkbox" && !isRepeated) {
+        return checked;
+    }
+    return value;
+};
+const getInputValues = (node, multipleInputs = false) => {
+    if (!node)
+        return [];
+    if (node instanceof RadioNodeList) {
+        return [...node].flatMap((el) => getInputValues(el, true));
+    }
+    if (isMultiselect(node)) {
+        return [
+            {
+                type: "select",
+                value: [...node.options]
+                    .filter((opt) => opt.selected)
+                    .map((opt) => opt.value),
+            },
+        ];
+    }
+    if (isCheckbox(node)) {
+        if (node.checked || !multipleInputs)
+            return [{ type: "checkbox", value: node.value, checked: node.checked }];
+        return [];
+    }
+    if (isRadio(node)) {
+        if (node.checked)
+            return [{ type: "radio", value: node.value, checked: node.checked }];
+        return [];
+    }
+    const input = node;
+    return [{ type: input.type, value: input.value, checked: input.checked }];
+};
+export const useWatch = (field, options) => {
+    const { formId, parse = defaultParse, repeatable = false, } = options !== null && options !== void 0 ? options : {};
+    const context = useInternalFormContext(formId, "useWatch");
+    const defaultValue = useFieldDefaultValue(field, context);
+    const hasSynced = useRef(false);
+    const [inputValues, setValue] = useState([]);
+    const formElement = useFormAtomValue(formElementAtom(context.formId));
+    const controlledField = useFormAtomValue(watchControlledFieldAtom({ formId: context.formId, field }));
+    const controlledValue = useFormAtomValue(controlledField.valueAtom);
+    const shouldSyncNativeInputValue = !controlledField.present && formElement;
+    const syncFieldValue = useCallback(() => {
+        invariant(formElement, `Unable to find form element for form. Watching field ${field}`);
+        hasSynced.current = true;
+        // We pull the values out using `form.elements` instead of `FormData`
+        // so that we can access the `type` of the input.
+        setValue(getInputValues(formElement.elements.namedItem(field)));
+    }, [field, formElement]);
+    // Should set the field values after the initial render
+    useEffect(() => {
+        if (shouldSyncNativeInputValue)
+            syncFieldValue();
+    }, [
+        controlledField.present,
+        formElement,
+        shouldSyncNativeInputValue,
+        syncFieldValue,
+    ]);
+    useEffect(() => {
+        if (shouldSyncNativeInputValue) {
+            const listener = async (event) => {
+                if (!(event.target instanceof HTMLElement))
+                    return;
+                const target = event.target;
+                const { form: targetForm, name: targetName } = target;
+                if (targetForm === formElement && targetName === field) {
+                    syncFieldValue();
+                }
+            };
+            window.addEventListener("change", listener);
+            window.addEventListener("input", listener);
+            return () => {
+                window.removeEventListener("change", listener);
+                window.removeEventListener("input", listener);
+            };
+        }
+    }, [field, formElement, shouldSyncNativeInputValue, syncFieldValue]);
+    const parsedValue = useMemo(() => {
+        const parsed = inputValues.map(({ type, value, checked }) => parse({
+            value,
+            type,
+            isRepeated: inputValues.length > 1 || repeatable,
+            checked,
+        }));
+        return parsed.length > 1 || repeatable ? parsed : parsed[0];
+    }, [parse, repeatable, inputValues]);
+    if (controlledField.present)
+        return controlledValue;
+    if (!hasSynced.current)
+        return defaultValue !== null && defaultValue !== void 0 ? defaultValue : (repeatable ? [] : undefined);
+    return parsedValue;
+};

package/browser/unreleased/formStateHooks.d.ts

@@ -0,0 +1,39 @@
+import { FieldErrors, TouchedFields } from "../validation/types";
+export declare type FormState = {
+    fieldErrors: FieldErrors;
+    isSubmitting: boolean;
+    hasBeenSubmitted: boolean;
+    touchedFields: TouchedFields;
+    defaultValues: {
+        [fieldName: string]: any;
+    };
+    action?: string;
+    subaction?: string;
+    isValid: boolean;
+};
+/**
+ * Returns information about the form.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+export declare const useFormState: (formId?: string | undefined) => FormState;
+export declare type FormHelpers = {
+    /**
+     * Clear the error of the specified field.
+     */
+    clearError: (fieldName: string) => void;
+    /**
+     * Validate the specified field.
+     */
+    validateField: (fieldName: string) => Promise<string | null>;
+    /**
+     * Change the touched state of the specified field.
+     */
+    setTouched: (fieldName: string, touched: boolean) => void;
+};
+/**
+ * Returns helpers that can be used to update the form state.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+export declare const useFormHelpers: (formId?: string | undefined) => FormHelpers;

package/browser/unreleased/formStateHooks.js

@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+import { useInternalFormContext, useClearError, useSetTouched, useDefaultValuesForForm, useFieldErrorsForForm, useFormAtomValue, } from "../internal/hooks";
+import { fieldErrorsAtom, formPropsAtom, hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, touchedFieldsAtom, } from "../internal/state";
+/**
+ * Returns information about the form.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+export const useFormState = (formId) => {
+    const formContext = useInternalFormContext(formId, "useIsValid");
+    const formProps = useFormAtomValue(formPropsAtom(formContext.formId));
+    const isSubmitting = useFormAtomValue(isSubmittingAtom(formContext.formId));
+    const hasBeenSubmitted = useFormAtomValue(hasBeenSubmittedAtom(formContext.formId));
+    const touchedFields = useFormAtomValue(touchedFieldsAtom(formContext.formId));
+    const isValid = useFormAtomValue(isValidAtom(formContext.formId));
+    const defaultValuesToUse = useDefaultValuesForForm(formContext);
+    const hydratedDefaultValues = defaultValuesToUse.hydrateTo(formProps.defaultValues);
+    const fieldErrorsFromState = useFormAtomValue(fieldErrorsAtom(formContext.formId));
+    const fieldErrorsToUse = useFieldErrorsForForm(formContext);
+    const hydratedFieldErrors = fieldErrorsToUse.hydrateTo(fieldErrorsFromState);
+    return useMemo(() => ({
+        ...formProps,
+        defaultValues: hydratedDefaultValues,
+        fieldErrors: hydratedFieldErrors !== null && hydratedFieldErrors !== void 0 ? hydratedFieldErrors : {},
+        hasBeenSubmitted,
+        isSubmitting,
+        touchedFields,
+        isValid,
+    }), [
+        formProps,
+        hasBeenSubmitted,
+        hydratedDefaultValues,
+        hydratedFieldErrors,
+        isSubmitting,
+        isValid,
+        touchedFields,
+    ]);
+};
+/**
+ * Returns helpers that can be used to update the form state.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+export const useFormHelpers = (formId) => {
+    const formContext = useInternalFormContext(formId, "useFormHelpers");
+    const setTouched = useSetTouched(formContext);
+    const { validateField } = useFormAtomValue(formPropsAtom(formContext.formId));
+    const clearError = useClearError(formContext);
+    return useMemo(() => ({
+        setTouched,
+        validateField,
+        clearError,
+    }), [clearError, setTouched, validateField]);
+};

package/browser/userFacingFormContext.js

@@ -1,40 +1,26 @@
 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";
+import { useFormAtomValue, useInternalFormContext } from "./internal/hooks";
+import { formPropsAtom } from "./internal/state";
+import { useFormHelpers, useFormState } from "./unreleased/formStateHooks";
 /**
  * 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 state = useFormState(formId);
+    const { clearError: internalClearError, setTouched, validateField, } = useFormHelpers(formId);
+    const { registerReceiveFocus } = useFormAtomValue(formPropsAtom(context.formId));
     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,
+        ...state,
+        setFieldTouched: setTouched,
         validateField,
+        clearError,
         registerReceiveFocus,
     };
 };

package/build/ValidatedForm.js

@@ -116,18 +116,12 @@ function formEventProxy(event) {
         },
     });
 }
-const useFormAtom = (formId) => {
-    const formAtom = (0, state_1.formRegistry)(formId);
-    (0, react_2.useEffect)(() => () => state_1.formRegistry.remove(formId), [formId]);
-    return formAtom;
-};
 /**
  * The primary form component of `remix-validated-form`.
  */
 function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues: unMemoizedDefaults, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
     var _a;
     const formId = useFormId(id);
-    const formAtom = useFormAtom(formId);
     const providedDefaultValues = (0, util_1.useDeepEqualsMemo)(unMemoizedDefaults);
     const contextValue = (0, react_2.useMemo)(() => ({
         formId,
@@ -142,25 +136,30 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
     const formRef = (0, react_2.useRef)(null);
     const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : react_1.Form;
     const submit = (0, react_1.useSubmit)();
-    const clearError = (0, hooks_2.useFormUpdateAtom)(state_1.clearErrorAtom);
-    const addError = (0, hooks_2.useFormUpdateAtom)(state_1.addErrorAtom);
-    const setFieldErrors = (0, hooks_2.useFormUpdateAtom)(state_1.setFieldErrorsAtom);
-    const reset = (0, hooks_2.useFormUpdateAtom)(state_1.resetAtom);
-    const startSubmit = (0, hooks_2.useFormUpdateAtom)(state_1.startSubmitAtom);
-    const endSubmit = (0, hooks_2.useFormUpdateAtom)(state_1.endSubmitAtom);
-    const syncFormContext = (0, hooks_2.useFormUpdateAtom)(state_1.syncFormContextAtom);
-    const validateField = (0, react_2.useCallback)(async (fieldName) => {
+    const setFieldErrors = (0, hooks_2.useFormUpdateAtom)((0, state_1.fieldErrorsAtom)(formId));
+    const setFieldError = (0, hooks_2.useFormUpdateAtom)((0, state_1.setFieldErrorAtom)(formId));
+    const reset = (0, hooks_2.useFormUpdateAtom)((0, state_1.resetAtom)(formId));
+    const startSubmit = (0, hooks_2.useFormUpdateAtom)((0, state_1.startSubmitAtom)(formId));
+    const endSubmit = (0, hooks_2.useFormUpdateAtom)((0, state_1.endSubmitAtom)(formId));
+    const syncFormProps = (0, hooks_2.useFormUpdateAtom)((0, state_1.formPropsAtom)(formId));
+    const setHydrated = (0, hooks_2.useFormUpdateAtom)((0, state_1.isHydratedAtom)(formId));
+    const setFormElementInState = (0, hooks_2.useFormUpdateAtom)((0, state_1.formElementAtom)(formId));
+    (0, react_2.useEffect)(() => {
+        setHydrated(true);
+        return () => (0, state_1.cleanupFormState)(formId);
+    }, [formId, setHydrated]);
+    const validateField = (0, react_2.useCallback)(async (field) => {
         (0, tiny_invariant_1.default)(formRef.current, "Cannot find reference to form");
-        const { error } = await validator.validateField(getDataFromForm(formRef.current), fieldName);
+        const { error } = await validator.validateField(getDataFromForm(formRef.current), field);
         if (error) {
-            addError({ formAtom, name: fieldName, error });
+            setFieldError({ field, error });
             return error;
         }
         else {
-            clearError({ name: fieldName, formAtom });
+            setFieldError({ field, error: undefined });
             return null;
         }
-    }, [addError, clearError, formAtom, validator]);
+    }, [setFieldError, validator]);
     const customFocusHandlers = (0, MultiValueMap_1.useMultiValueMap)();
     const registerReceiveFocus = (0, react_2.useCallback)((fieldName, handler) => {
         customFocusHandlers().add(fieldName, handler);
@@ -169,33 +168,29 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         };
     }, [customFocusHandlers]);
     (0, util_1.useIsomorphicLayoutEffect)(() => {
-        syncFormContext({
-            formAtom,
+        var _a;
+        syncFormProps({
             action,
-            defaultValues: providedDefaultValues !== null && providedDefaultValues !== void 0 ? providedDefaultValues : backendDefaultValues,
+            defaultValues: (_a = providedDefaultValues !== null && providedDefaultValues !== void 0 ? providedDefaultValues : backendDefaultValues) !== null && _a !== void 0 ? _a : {},
             subaction,
             validateField,
             registerReceiveFocus,
         });
     }, [
         action,
-        formAtom,
         providedDefaultValues,
         registerReceiveFocus,
         subaction,
-        syncFormContext,
+        syncFormProps,
         validateField,
         backendDefaultValues,
     ]);
     (0, react_2.useEffect)(() => {
         var _a;
-        setFieldErrors({
-            fieldErrors: (_a = backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors) !== null && _a !== void 0 ? _a : {},
-            formAtom,
-        });
-    }, [backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors, formAtom, setFieldErrors]);
+        setFieldErrors((_a = backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors) !== null && _a !== void 0 ? _a : {});
+    }, [backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors, setFieldErrors, setFieldError]);
     (0, submissionCallbacks_1.useSubmitComplete)(hasActiveSubmission, () => {
-        endSubmit({ formAtom });
+        endSubmit();
     });
     let clickedButtonRef = react_2.default.useRef();
     (0, react_2.useEffect)(() => {
@@ -218,11 +213,11 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         };
     }, []);
     const handleSubmit = async (e) => {
-        startSubmit({ formAtom });
+        startSubmit();
         const result = await validator.validate(getDataFromForm(e.currentTarget));
         if (result.error) {
-            endSubmit({ formAtom });
-            setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
+            endSubmit();
+            setFieldErrors(result.error.fieldErrors);
             if (!disableFocusOnError) {
                 focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
             }
@@ -231,7 +226,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             const eventProxy = formEventProxy(e);
             await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, eventProxy));
             if (eventProxy.defaultPrevented) {
-                endSubmit({ formAtom });
+                endSubmit();
                 return;
             }
             // We deviate from the remix code here a bit because of our async submit.
@@ -249,14 +244,14 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             clickedButtonRef.current = null;
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: (e) => {
+    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp, setFormElementInState]), ...rest, id: id, action: action, method: method, replace: replace, onSubmit: (e) => {
             e.preventDefault();
             handleSubmit(e);
         }, onReset: (event) => {
             onReset === null || onReset === void 0 ? void 0 : onReset(event);
             if (event.defaultPrevented)
                 return;
-            reset({ formAtom });
+            reset();
         }, children: (0, jsx_runtime_1.jsxs)(formContext_1.InternalFormContext.Provider, { value: contextValue, children: [(0, jsx_runtime_1.jsx)(FormResetter, { formRef: formRef, resetAfterSubmit: resetAfterSubmit }, void 0), subaction && ((0, jsx_runtime_1.jsx)("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), id && (0, jsx_runtime_1.jsx)("input", { type: "hidden", value: id, name: constants_1.FORM_ID_FIELD }, void 0), children] }, void 0) }, void 0));
 }
 exports.ValidatedForm = ValidatedForm;

package/build/hooks.js

@@ -14,7 +14,7 @@ const state_1 = require("./internal/state");
  */
 const useIsSubmitting = (formId) => {
     const formContext = (0, hooks_1.useInternalFormContext)(formId, "useIsSubmitting");
-    return (0, hooks_1.useContextSelectAtom)(formContext.formId, state_1.isSubmittingAtom);
+    return (0, hooks_1.useFormAtomValue)((0, state_1.isSubmittingAtom)(formContext.formId));
 };
 exports.useIsSubmitting = useIsSubmitting;
 /**
@@ -24,23 +24,20 @@ exports.useIsSubmitting = useIsSubmitting;
  */
 const useIsValid = (formId) => {
     const formContext = (0, hooks_1.useInternalFormContext)(formId, "useIsValid");
-    return (0, hooks_1.useContextSelectAtom)(formContext.formId, state_1.isValidAtom);
+    return (0, hooks_1.useFormAtomValue)((0, state_1.isValidAtom)(formContext.formId));
 };
 exports.useIsValid = useIsValid;
 /**
  * Provides the data and helpers necessary to set up a field.
  */
 const useField = (name, options) => {
-    const { handleReceiveFocus, formId: providedFormId } = options !== null && options !== void 0 ? options : {};
+    const { formId: providedFormId, handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
     const formContext = (0, hooks_1.useInternalFormContext)(providedFormId, "useField");
     const defaultValue = (0, hooks_1.useFieldDefaultValue)(name, formContext);
-    const touched = (0, hooks_1.useFieldTouched)(name, formContext);
-    const error = (0, hooks_1.useFieldError)(name, formContext);
-    const clearError = (0, hooks_1.useClearError)(formContext);
-    const setTouched = (0, hooks_1.useSetTouched)(formContext);
-    const hasBeenSubmitted = (0, hooks_1.useContextSelectAtom)(formContext.formId, state_1.hasBeenSubmittedAtom);
-    const validateField = (0, hooks_1.useContextSelectAtom)(formContext.formId, state_1.validateFieldAtom);
-    const registerReceiveFocus = (0, hooks_1.useContextSelectAtom)(formContext.formId, state_1.registerReceiveFocusAtom);
+    const [touched, setTouched] = (0, hooks_1.useFieldTouched)(name, formContext);
+    const [error, setError] = (0, hooks_1.useFieldError)(name, formContext);
+    const hasBeenSubmitted = (0, hooks_1.useFormAtomValue)((0, state_1.hasBeenSubmittedAtom)(formContext.formId));
+    const { validateField, registerReceiveFocus } = (0, hooks_1.useFormAtomValue)((0, state_1.formPropsAtom)(formContext.formId));
     (0, react_1.useEffect)(() => {
         if (handleReceiveFocus)
             return registerReceiveFocus(name, handleReceiveFocus);
@@ -48,13 +45,13 @@ const useField = (name, options) => {
     const field = (0, react_1.useMemo)(() => {
         const helpers = {
             error,
-            clearError: () => clearError(name),
+            clearError: () => setError(undefined),
             validate: () => {
                 validateField(name);
             },
             defaultValue,
             touched,
-            setTouched: (touched) => setTouched(name, touched),
+            setTouched,
         };
         const getInputProps = (0, getInputProps_1.createGetInputProps)({
             ...helpers,
@@ -70,12 +67,12 @@ const useField = (name, options) => {
         error,
         defaultValue,
         touched,
+        setTouched,
         name,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
-        clearError,
+        setError,
         validateField,
-        setTouched,
     ]);
     return field;
 };