remix-validated-form 4.0.2 → 4.1.0

package/browser/validation/createValidator.js

@@ -1,3 +1,4 @@
+import { FORM_ID_FIELD } from "../internal/constants";
 import { objectFromPathEntries } from "../internal/flatten";
 const preprocessFormData = (data) => {
     // A slightly janky way of determining if the data is a FormData object
@@ -22,14 +23,17 @@ export function createValidator(validator) {
                     error: {
                         fieldErrors: result.error,
                         subaction: data.subaction,
+                        formId: data[FORM_ID_FIELD],
                     },
                     submittedData: data,
+                    formId: data[FORM_ID_FIELD],
                 };
             }
             return {
                 data: result.data,
                 error: undefined,
                 submittedData: data,
+                formId: data[FORM_ID_FIELD],
             };
         },
         validateField: (data, field) => validator.validateField(preprocessFormData(data), field),

package/browser/validation/types.d.ts

@@ -5,15 +5,18 @@ export declare type GenericObject = {
 };
 export declare type ValidatorError = {
     subaction?: string;
+    formId?: string;
     fieldErrors: FieldErrors;
 };
 export declare type ValidationErrorResponseData = {
     subaction?: string;
+    formId?: string;
     fieldErrors: FieldErrors;
     repopulateFields?: unknown;
 };
 export declare type BaseResult = {
     submittedData: GenericObject;
+    formId?: string;
 };
 export declare type ErrorResult = BaseResult & {
     error: ValidatorError;

package/build/ValidatedForm.d.ts

@@ -10,7 +10,7 @@ export declare type FormProps<DataType> = {
      * A submit callback that gets called when the form is submitted
      * after all validations have been run.
      */
-    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => Promise<void>;
+    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
     /**
      * Allows you to provide a `fetcher` from remix's `useFetcher` hook.
      * The form will use the fetcher for loading states, action data, etc
@@ -47,4 +47,4 @@ export declare type FormProps<DataType> = {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, id, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -28,66 +28,15 @@ const react_1 = require("@remix-run/react");
 const uniq_1 = __importDefault(require("lodash/uniq"));
 const react_2 = __importStar(require("react"));
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const hooks_1 = require("./hooks");
+const constants_1 = require("./internal/constants");
 const formContext_1 = require("./internal/formContext");
+const hooks_2 = require("./internal/hooks");
 const MultiValueMap_1 = require("./internal/MultiValueMap");
+const state_1 = require("./internal/state");
 const submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
-function useErrorResponseForThisForm(fetcher, subaction) {
-    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 ((!subaction && !actionData.subaction) ||
-        actionData.subaction === subaction)
-        return actionData;
-    return null;
-}
-function useFieldErrors(fieldErrorsFromBackend) {
-    const [fieldErrors, setFieldErrors] = (0, react_2.useState)(fieldErrorsFromBackend !== null && fieldErrorsFromBackend !== void 0 ? fieldErrorsFromBackend : {});
-    (0, react_2.useEffect)(() => {
-        if (fieldErrorsFromBackend)
-            setFieldErrors(fieldErrorsFromBackend);
-    }, [fieldErrorsFromBackend]);
-    return [fieldErrors, setFieldErrors];
-}
-const useIsSubmitting = (fetcher) => {
-    const [isSubmitStarted, setSubmitStarted] = (0, react_2.useState)(false);
-    const transition = (0, react_1.useTransition)();
-    const hasActiveSubmission = fetcher
-        ? fetcher.state === "submitting"
-        : !!transition.submission;
-    const startSubmit = () => setSubmitStarted(true);
-    const endSubmit = () => setSubmitStarted(false);
-    (0, submissionCallbacks_1.useSubmitComplete)(hasActiveSubmission, () => {
-        endSubmit();
-    });
-    return [isSubmitStarted, startSubmit, endSubmit];
-};
 const getDataFromForm = (el) => new FormData(el);
-/**
- * The purpose for this logic is to handle validation errors when javascript is disabled.
- * Normally (without js), when a form is submitted and the action returns the validation errors,
- * the form will be reset. The errors will be displayed on the correct fields,
- * but all the values in the form will be gone. This is not good UX.
- *
- * To get around this, we return the submitted form data from the server,
- * and use those to populate the form via `defaultValues`.
- * This results in a more seamless UX akin to what you would see when js is enabled.
- *
- * One potential downside is that resetting the form will reset the form
- * to the _new_ default values that were returned from the server with the validation errors.
- * However, this case is less of a problem than the janky UX caused by losing the form values.
- * It will only ever be a problem if the form includes a `<button type="reset" />`
- * and only if JS is disabled.
- */
-function useDefaultValues(repopulateFieldsFromBackend, defaultValues) {
-    return repopulateFieldsFromBackend !== null && repopulateFieldsFromBackend !== void 0 ? repopulateFieldsFromBackend : defaultValues;
-}
 function nonNull(value) {
     return value !== null;
 }
@@ -131,85 +80,122 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
         }
     }
 };
+const useFormId = (providedId) => {
+    // We can use a `Symbol` here because we only use it after hydration
+    const [symbolId] = (0, react_2.useState)(() => Symbol("remix-validated-form-id"));
+    return providedId !== null && providedId !== void 0 ? providedId : symbolId;
+};
 /**
- * The primary form component of `remix-validated-form`.
+ * Use a component to access the state so we don't cause
+ * any extra rerenders of the whole form.
  */
-function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, ...rest }) {
-    var _a;
-    const backendError = useErrorResponseForThisForm(fetcher, subaction);
-    const [fieldErrors, setFieldErrors] = useFieldErrors(backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors);
-    const [isSubmitting, startSubmit, endSubmit] = useIsSubmitting(fetcher);
-    const defaultsToUse = useDefaultValues(backendError === null || backendError === void 0 ? void 0 : backendError.repopulateFields, defaultValues);
-    const [touchedFields, setTouchedFields] = (0, react_2.useState)({});
-    const [hasBeenSubmitted, setHasBeenSubmitted] = (0, react_2.useState)(false);
-    const submit = (0, react_1.useSubmit)();
-    const formRef = (0, react_2.useRef)(null);
+const FormResetter = ({ resetAfterSubmit, formRef, }) => {
+    const isSubmitting = (0, hooks_1.useIsSubmitting)();
+    const isValid = (0, hooks_1.useIsValid)();
     (0, submissionCallbacks_1.useSubmitComplete)(isSubmitting, () => {
         var _a;
-        endSubmit();
-        if (!backendError && resetAfterSubmit) {
+        if (isValid && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
-    const customFocusHandlers = (0, MultiValueMap_1.useMultiValueMap)();
-    const contextValue = (0, react_2.useMemo)(() => ({
-        fieldErrors,
-        action,
-        defaultValues: defaultsToUse,
-        isSubmitting,
-        isValid: Object.keys(fieldErrors).length === 0,
-        touchedFields,
-        setFieldTouched: (fieldName, touched) => setTouchedFields((prev) => ({
-            ...prev,
-            [fieldName]: touched,
-        })),
-        clearError: (fieldName) => {
-            setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
-        },
-        validateField: async (fieldName) => {
-            (0, tiny_invariant_1.default)(formRef.current, "Cannot find reference to form");
-            const { error } = await validator.validateField(getDataFromForm(formRef.current), fieldName);
-            // By checking and returning `prev` here, we can avoid a re-render
-            // if the validation state is the same.
-            if (error) {
-                setFieldErrors((prev) => {
-                    if (prev[fieldName] === error)
-                        return prev;
-                    return {
-                        ...prev,
-                        [fieldName]: error,
-                    };
-                });
-                return error;
+    return null;
+};
+function formEventProxy(event) {
+    let defaultPrevented = false;
+    return new Proxy(event, {
+        get: (target, prop) => {
+            if (prop === "preventDefault") {
+                return () => {
+                    defaultPrevented = true;
+                };
             }
-            else {
-                setFieldErrors((prev) => {
-                    if (!(fieldName in prev))
-                        return prev;
-                    return (0, util_1.omit)(prev, fieldName);
-                });
-                return null;
+            if (prop === "defaultPrevented") {
+                return defaultPrevented;
             }
+            return target[prop];
         },
-        registerReceiveFocus: (fieldName, handler) => {
-            customFocusHandlers().add(fieldName, handler);
-            return () => {
-                customFocusHandlers().remove(fieldName, handler);
-            };
-        },
-        hasBeenSubmitted,
-    }), [
-        fieldErrors,
+    });
+}
+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: providedDefaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit = false, disableFocusOnError, method, replace, id, ...rest }) {
+    var _a;
+    const formId = useFormId(id);
+    const formAtom = useFormAtom(formId);
+    const contextValue = (0, react_2.useMemo)(() => ({
+        formId,
         action,
-        defaultsToUse,
-        isSubmitting,
-        touchedFields,
-        hasBeenSubmitted,
-        setFieldErrors,
-        validator,
-        customFocusHandlers,
-    ]);
+        subaction,
+        defaultValuesProp: providedDefaultValues,
+        fetcher,
+    }), [action, fetcher, formId, providedDefaultValues, subaction]);
+    const backendError = (0, hooks_2.useErrorResponseForForm)(contextValue);
+    const backendDefaultValues = (0, hooks_2.useDefaultValuesFromLoader)(contextValue);
+    const hasActiveSubmission = (0, hooks_2.useHasActiveFormSubmit)(contextValue);
+    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) => {
+        (0, tiny_invariant_1.default)(formRef.current, "Cannot find reference to form");
+        const { error } = await validator.validateField(getDataFromForm(formRef.current), fieldName);
+        if (error) {
+            addError({ formAtom, name: fieldName, error });
+            return error;
+        }
+        else {
+            clearError({ name: fieldName, formAtom });
+            return null;
+        }
+    }, [addError, clearError, formAtom, validator]);
+    const customFocusHandlers = (0, MultiValueMap_1.useMultiValueMap)();
+    const registerReceiveFocus = (0, react_2.useCallback)((fieldName, handler) => {
+        customFocusHandlers().add(fieldName, handler);
+        return () => {
+            customFocusHandlers().remove(fieldName, handler);
+        };
+    }, [customFocusHandlers]);
+    (0, util_1.useIsomorphicLayoutEffect)(() => {
+        syncFormContext({
+            formAtom,
+            action,
+            defaultValues: providedDefaultValues !== null && providedDefaultValues !== void 0 ? providedDefaultValues : backendDefaultValues,
+            subaction,
+            validateField,
+            registerReceiveFocus,
+        });
+    }, [
+        action,
+        formAtom,
+        providedDefaultValues,
+        registerReceiveFocus,
+        subaction,
+        syncFormContext,
+        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]);
+    (0, submissionCallbacks_1.useSubmitComplete)(hasActiveSubmission, () => {
+        endSubmit({ formAtom });
+    });
     let clickedButtonRef = react_2.default.useRef();
     (0, react_2.useEffect)(() => {
         let form = formRef.current;
@@ -230,36 +216,41 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             window.removeEventListener("click", handleClick);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, method: method, replace: replace, onSubmit: async (e) => {
-            e.preventDefault();
-            setHasBeenSubmitted(true);
-            startSubmit();
-            const result = await validator.validate(getDataFromForm(e.currentTarget));
-            if (result.error) {
-                endSubmit();
-                setFieldErrors(result.error.fieldErrors);
-                if (!disableFocusOnError) {
-                    focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
-                }
+    const handleSubmit = async (e) => {
+        startSubmit({ formAtom });
+        const result = await validator.validate(getDataFromForm(e.currentTarget));
+        if (result.error) {
+            endSubmit({ formAtom });
+            setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
+            if (!disableFocusOnError) {
+                focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
             }
-            else {
-                onSubmit && onSubmit(result.data, e);
-                if (fetcher)
-                    fetcher.submit(clickedButtonRef.current || e.currentTarget);
-                else
-                    submit(clickedButtonRef.current || e.currentTarget, {
-                        method,
-                        replace,
-                    });
-                clickedButtonRef.current = null;
+        }
+        else {
+            const eventProxy = formEventProxy(e);
+            await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, eventProxy));
+            if (eventProxy.defaultPrevented) {
+                endSubmit({ formAtom });
+                return;
             }
+            if (fetcher)
+                fetcher.submit(clickedButtonRef.current || e.currentTarget);
+            else
+                submit(clickedButtonRef.current || e.currentTarget, {
+                    method,
+                    replace,
+                });
+            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) => {
+            e.preventDefault();
+            handleSubmit(e);
         }, onReset: (event) => {
             onReset === null || onReset === void 0 ? void 0 : onReset(event);
             if (event.defaultPrevented)
                 return;
-            setFieldErrors({});
-            setTouchedFields({});
-            setHasBeenSubmitted(false);
-        }, children: (0, jsx_runtime_1.jsxs)(formContext_1.FormContext.Provider, { value: contextValue, children: [subaction && ((0, jsx_runtime_1.jsx)("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), children] }, void 0) }, void 0));
+            reset({ formAtom });
+        }, 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.d.ts

@@ -1,4 +1,18 @@
 import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputProps";
+/**
+ * Returns whether or not the parent form is currently being submitted.
+ * This is different from remix's `useTransition().submission` in that it
+ * is aware of what form it's in and when _that_ form is being submitted.
+ *
+ * @param formId
+ */
+export declare const useIsSubmitting: (formId?: string | undefined) => boolean;
+/**
+ * Returns whether or not the current form is valid.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+export declare const useIsValid: (formId?: string | undefined) => boolean;
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -43,18 +57,9 @@ export declare const useField: (name: string, options?: {
      * Allows you to specify when a field gets validated (when using getInputProps)
      */
     validationBehavior?: Partial<ValidationBehaviorOptions> | undefined;
+    /**
+     * The formId of the form you want to use.
+     * This is not necesary if the input is used inside a form.
+     */
+    formId?: string | undefined;
 } | undefined) => FieldProps;
-/**
- * Provides access to the entire form context.
- */
-export declare const useFormContext: () => import("./internal/formContext").FormContextValue;
-/**
- * Returns whether or not the parent form is currently being submitted.
- * This is different from remix's `useTransition().submission` in that it
- * is aware of what form it's in and when _that_ form is being submitted.
- */
-export declare const useIsSubmitting: () => boolean;
-/**
- * Returns whether or not the current form is valid.
- */
-export declare const useIsValid: () => boolean;

package/build/hooks.js

@@ -1,45 +1,60 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsValid = exports.useIsSubmitting = exports.useFormContext = exports.useField = void 0;
-const get_1 = __importDefault(require("lodash/get"));
-const toPath_1 = __importDefault(require("lodash/toPath"));
+exports.useField = exports.useIsValid = exports.useIsSubmitting = void 0;
 const react_1 = require("react");
-const formContext_1 = require("./internal/formContext");
 const getInputProps_1 = require("./internal/getInputProps");
-const useInternalFormContext = (hookName) => {
-    const context = (0, react_1.useContext)(formContext_1.FormContext);
-    if (!context)
-        throw new Error(`${hookName} must be used within a ValidatedForm component`);
-    return context;
+const hooks_1 = require("./internal/hooks");
+const state_1 = require("./internal/state");
+/**
+ * Returns whether or not the parent form is currently being submitted.
+ * This is different from remix's `useTransition().submission` in that it
+ * is aware of what form it's in and when _that_ form is being submitted.
+ *
+ * @param formId
+ */
+const useIsSubmitting = (formId) => {
+    const formContext = (0, hooks_1.useInternalFormContext)(formId, "useIsSubmitting");
+    return (0, hooks_1.useContextSelectAtom)(formContext.formId, state_1.isSubmittingAtom);
 };
+exports.useIsSubmitting = useIsSubmitting;
+/**
+ * Returns whether or not the current form is valid.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+const useIsValid = (formId) => {
+    const formContext = (0, hooks_1.useInternalFormContext)(formId, "useIsValid");
+    return (0, hooks_1.useContextSelectAtom)(formContext.formId, state_1.isValidAtom);
+};
+exports.useIsValid = useIsValid;
 /**
  * Provides the data and helpers necessary to set up a field.
  */
 const useField = (name, options) => {
-    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = useInternalFormContext("useField");
-    const isTouched = !!touchedFields[name];
-    const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
+    const { handleReceiveFocus, formId: providedFormId } = 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);
     (0, react_1.useEffect)(() => {
         if (handleReceiveFocus)
             return registerReceiveFocus(name, handleReceiveFocus);
     }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = (0, react_1.useMemo)(() => {
         const helpers = {
-            error: fieldErrors[name],
-            clearError: () => {
-                clearError(name);
-            },
+            error,
+            clearError: () => clearError(name),
             validate: () => {
                 validateField(name);
             },
-            defaultValue: defaultValues
-                ? (0, get_1.default)(defaultValues, (0, toPath_1.default)(name), undefined)
-                : undefined,
-            touched: isTouched,
-            setTouched: (touched) => setFieldTouched(name, touched),
+            defaultValue,
+            touched,
+            setTouched: (touched) => setTouched(name, touched),
         };
         const getInputProps = (0, getInputProps_1.createGetInputProps)({
             ...helpers,
@@ -52,33 +67,16 @@ const useField = (name, options) => {
             getInputProps,
         };
     }, [
-        fieldErrors,
+        error,
+        defaultValue,
+        touched,
         name,
-        defaultValues,
-        isTouched,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
         clearError,
         validateField,
-        setFieldTouched,
+        setTouched,
     ]);
     return field;
 };
 exports.useField = useField;
-/**
- * Provides access to the entire form context.
- */
-const useFormContext = () => useInternalFormContext("useFormContext");
-exports.useFormContext = useFormContext;
-/**
- * Returns whether or not the parent form is currently being submitted.
- * This is different from remix's `useTransition().submission` in that it
- * is aware of what form it's in and when _that_ form is being submitted.
- */
-const useIsSubmitting = () => useInternalFormContext("useIsSubmitting").isSubmitting;
-exports.useIsSubmitting = useIsSubmitting;
-/**
- * Returns whether or not the current form is valid.
- */
-const useIsValid = () => useInternalFormContext("useIsValid").isValid;
-exports.useIsValid = useIsValid;

package/build/index.d.ts

@@ -3,4 +3,4 @@ export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/createValidator";
-export type { FormContextValue } from "./internal/formContext";
+export * from "./userFacingFormContext";

package/build/index.js

@@ -15,3 +15,4 @@ __exportStar(require("./server"), exports);
 __exportStar(require("./ValidatedForm"), exports);
 __exportStar(require("./validation/types"), exports);
 __exportStar(require("./validation/createValidator"), exports);
+__exportStar(require("./userFacingFormContext"), exports);

package/build/internal/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const FORM_ID_FIELD: "__rvfInternalFormId";
+export declare const FORM_DEFAULTS_FIELD: "__rvfInternalFormDefaults";
+export declare const formDefaultValuesKey: (formId: string) => string;

package/build/internal/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formDefaultValuesKey = exports.FORM_DEFAULTS_FIELD = exports.FORM_ID_FIELD = void 0;
+exports.FORM_ID_FIELD = "__rvfInternalFormId";
+exports.FORM_DEFAULTS_FIELD = "__rvfInternalFormDefaults";
+const formDefaultValuesKey = (formId) => `${exports.FORM_DEFAULTS_FIELD}_${formId}`;
+exports.formDefaultValuesKey = formDefaultValuesKey;

package/build/internal/formContext.d.ts

@@ -1,54 +1,12 @@
 /// <reference types="react" />
-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.
-     */
+import { useFetcher } from "@remix-run/react";
+export declare type InternalFormContextValue = {
+    formId: string | symbol;
     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?: {
+    subaction?: string;
+    defaultValuesProp?: {
         [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;
+    fetcher?: ReturnType<typeof useFetcher>;
 };
-export declare const FormContext: import("react").Context<FormContextValue | null>;
+export declare const InternalFormContext: import("react").Context<InternalFormContextValue | null>;

package/build/internal/formContext.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormContext = void 0;
+exports.InternalFormContext = void 0;
 const react_1 = require("react");
-exports.FormContext = (0, react_1.createContext)(null);
+exports.InternalFormContext = (0, react_1.createContext)(null);