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

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 $ npm run build:browser && npm run build:main
 
-> remix-validated-form@4.0.1-beta.1 build:browser
+> remix-validated-form@4.0.2 build:browser
 > tsc --module ESNext --outDir ./browser
 
 
-> remix-validated-form@4.0.1-beta.1 build:main
+> remix-validated-form@4.0.2 build:main
 > tsc --module CommonJS --outDir ./build
 

package/README.md

@@ -2,13 +2,13 @@
 
 A form library built for [remix](https://remix.run) to make validation easy.
 
-- Client-side, field-by-field validation (e.g. validate on blur) and form-level validation
-- Set default values for the entire form in one place
+- Client-side, field-by-field and form-level validation
 - Re-use validation on the server
-- Show validation errors from the server even without JS
-- Detect if the current form is submitting when there are multiple forms on the page
+- Set default values for the entire form in one place
 - Supports nested objects and arrays
+- Easily detect if a specific form is being sumitted
 - Validation library agnostic
+- Can work without JS
 
 # Docs
 

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

@@ -1,66 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Form as RemixForm, useActionData, useSubmit, useTransition, } from "@remix-run/react";
+import { Form as RemixForm, useSubmit } from "@remix-run/react";
 import uniq from "lodash/uniq";
-import React, { useEffect, useMemo, useRef, useState, } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
-import { FormContext } from "./internal/formContext";
+import { useIsSubmitting, useIsValid } from "./hooks";
+import { FORM_ID_FIELD } from "./internal/constants";
+import { InternalFormContext, } from "./internal/formContext";
+import { useDefaultValuesFromLoader, useErrorResponseForForm, useFormUpdateAtom, useHasActiveFormSubmit, } from "./internal/hooks";
 import { useMultiValueMap } from "./internal/MultiValueMap";
+import { addErrorAtom, clearErrorAtom, endSubmitAtom, formRegistry, resetAtom, setFieldErrorsAtom, startSubmitAtom, syncFormContextAtom, } from "./internal/state";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
-import { omit, mergeRefs } from "./internal/util";
-function useErrorResponseForThisForm(fetcher, subaction) {
-    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 ((!subaction && !actionData.subaction) ||
-        actionData.subaction === subaction)
-        return actionData;
-    return null;
-}
-function useFieldErrors(fieldErrorsFromBackend) {
-    const [fieldErrors, setFieldErrors] = useState(fieldErrorsFromBackend !== null && fieldErrorsFromBackend !== void 0 ? fieldErrorsFromBackend : {});
-    useEffect(() => {
-        if (fieldErrorsFromBackend)
-            setFieldErrors(fieldErrorsFromBackend);
-    }, [fieldErrorsFromBackend]);
-    return [fieldErrors, setFieldErrors];
-}
-const useIsSubmitting = (fetcher) => {
-    const [isSubmitStarted, setSubmitStarted] = useState(false);
-    const transition = useTransition();
-    const hasActiveSubmission = fetcher
-        ? fetcher.state === "submitting"
-        : !!transition.submission;
-    const isSubmitting = hasActiveSubmission && isSubmitStarted;
-    const startSubmit = () => setSubmitStarted(true);
-    const endSubmit = () => setSubmitStarted(false);
-    return [isSubmitting, startSubmit, endSubmit];
-};
+import { mergeRefs, useIsomorphicLayoutEffect as useLayoutEffect, } from "./internal/util";
 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;
 }
@@ -104,85 +55,122 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
         }
     }
 };
+const useFormId = (providedId) => {
+    // We can use a `Symbol` here because we only use it after hydration
+    const [symbolId] = 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.
  */
-export 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] = useState({});
-    const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
-    const submit = useSubmit();
-    const formRef = useRef(null);
+const FormResetter = ({ resetAfterSubmit, formRef, }) => {
+    const isSubmitting = useIsSubmitting();
+    const isValid = useIsValid();
     useSubmitComplete(isSubmitting, () => {
         var _a;
-        endSubmit();
-        if (!backendError && resetAfterSubmit) {
+        if (isValid && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
-    const customFocusHandlers = useMultiValueMap();
-    const contextValue = 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) => omit(prev, fieldName));
-        },
-        validateField: async (fieldName) => {
-            invariant(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 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 = formRegistry(formId);
+    useEffect(() => () => formRegistry.remove(formId), [formId]);
+    return formAtom;
+};
+/**
+ * The primary form component of `remix-validated-form`.
+ */
+export 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 = useMemo(() => ({
+        formId,
         action,
-        defaultsToUse,
-        isSubmitting,
-        touchedFields,
-        hasBeenSubmitted,
-        setFieldErrors,
-        validator,
-        customFocusHandlers,
-    ]);
+        subaction,
+        defaultValuesProp: providedDefaultValues,
+        fetcher,
+    }), [action, fetcher, formId, providedDefaultValues, subaction]);
+    const backendError = useErrorResponseForForm(contextValue);
+    const backendDefaultValues = useDefaultValuesFromLoader(contextValue);
+    const hasActiveSubmission = useHasActiveFormSubmit(contextValue);
+    const formRef = useRef(null);
     const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : RemixForm;
+    const submit = useSubmit();
+    const clearError = useFormUpdateAtom(clearErrorAtom);
+    const addError = useFormUpdateAtom(addErrorAtom);
+    const setFieldErrors = useFormUpdateAtom(setFieldErrorsAtom);
+    const reset = useFormUpdateAtom(resetAtom);
+    const startSubmit = useFormUpdateAtom(startSubmitAtom);
+    const endSubmit = useFormUpdateAtom(endSubmitAtom);
+    const syncFormContext = useFormUpdateAtom(syncFormContextAtom);
+    const validateField = useCallback(async (fieldName) => {
+        invariant(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 = useMultiValueMap();
+    const registerReceiveFocus = useCallback((fieldName, handler) => {
+        customFocusHandlers().add(fieldName, handler);
+        return () => {
+            customFocusHandlers().remove(fieldName, handler);
+        };
+    }, [customFocusHandlers]);
+    useLayoutEffect(() => {
+        syncFormContext({
+            formAtom,
+            action,
+            defaultValues: providedDefaultValues !== null && providedDefaultValues !== void 0 ? providedDefaultValues : backendDefaultValues,
+            subaction,
+            validateField,
+            registerReceiveFocus,
+        });
+    }, [
+        action,
+        formAtom,
+        providedDefaultValues,
+        registerReceiveFocus,
+        subaction,
+        syncFormContext,
+        validateField,
+        backendDefaultValues,
+    ]);
+    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]);
+    useSubmitComplete(hasActiveSubmission, () => {
+        endSubmit({ formAtom });
+    });
     let clickedButtonRef = React.useRef();
     useEffect(() => {
         let form = formRef.current;
@@ -203,35 +191,40 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             window.removeEventListener("click", handleClick);
         };
     }, []);
-    return (_jsx(Form, { ref: 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 (_jsx(Form, { ref: 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: _jsxs(FormContext.Provider, { value: contextValue, children: [subaction && (_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), children] }, void 0) }, void 0));
+            reset({ formAtom });
+        }, children: _jsxs(InternalFormContext.Provider, { value: contextValue, children: [_jsx(FormResetter, { formRef: formRef, resetAfterSubmit: resetAfterSubmit }, void 0), subaction && (_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), id && _jsx("input", { type: "hidden", value: id, name: FORM_ID_FIELD }, void 0), children] }, void 0) }, void 0));
 }

package/browser/components.d.ts

@@ -1,10 +1,7 @@
 import { HTMLProps } from "react";
-declare type ValidatedInputProps = HTMLProps<HTMLInputElement> & {
-    name: string;
-};
-export declare const ValidatedInput: ({ name, ...rest }: ValidatedInputProps) => JSX.Element;
-declare type ErrorMessageProps = {
-    name: string;
-};
-export declare const ErrorMessage: ({ name }: ErrorMessageProps) => string | undefined;
+declare type WithRequiredName<T extends {
+    name?: string;
+}> = T & Required<Pick<T, "name">>;
+export declare const ValidatedInput: ({ name, form, ...rest }: WithRequiredName<HTMLProps<HTMLInputElement>>) => JSX.Element;
+export declare const ValidatedTextarea: ({ name, form, ...rest }: WithRequiredName<HTMLProps<HTMLTextAreaElement>>) => JSX.Element;
 export {};

package/browser/components.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useField } from ".";
-export const ValidatedInput = ({ name, ...rest }) => {
-    const { getInputProps } = useField(name);
+export const ValidatedInput = ({ name, form, ...rest }) => {
+    const { getInputProps } = useField(name, { formId: form });
     return _jsx("input", { ...getInputProps(rest) }, void 0);
 };
-export const ErrorMessage = ({ name }) => {
-    const { error } = useField(name);
-    return error;
+export const ValidatedTextarea = ({ name, form, ...rest }) => {
+    const { getInputProps } = useField(name, { formId: form });
+    return _jsx("textarea", { ...getInputProps(rest) }, void 0);
 };

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

@@ -1,39 +1,55 @@
-import get from "lodash/get";
-import toPath from "lodash/toPath";
-import { useContext, useEffect, useMemo } from "react";
-import { FormContext } from "./internal/formContext";
+import { useEffect, useMemo } from "react";
 import { createGetInputProps, } from "./internal/getInputProps";
-const useInternalFormContext = (hookName) => {
-    const context = useContext(FormContext);
-    if (!context)
-        throw new Error(`${hookName} must be used within a ValidatedForm component`);
-    return context;
+import { useInternalFormContext, useFieldTouched, useFieldError, useFieldDefaultValue, useContextSelectAtom, useClearError, useSetTouched, } from "./internal/hooks";
+import { hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, registerReceiveFocusAtom, validateFieldAtom, } from "./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
+ */
+export const useIsSubmitting = (formId) => {
+    const formContext = useInternalFormContext(formId, "useIsSubmitting");
+    return useContextSelectAtom(formContext.formId, isSubmittingAtom);
+};
+/**
+ * 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 const useIsValid = (formId) => {
+    const formContext = useInternalFormContext(formId, "useIsValid");
+    return useContextSelectAtom(formContext.formId, isValidAtom);
 };
 /**
  * Provides the data and helpers necessary to set up a field.
  */
 export 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 = useInternalFormContext(providedFormId, "useField");
+    const defaultValue = useFieldDefaultValue(name, formContext);
+    const touched = useFieldTouched(name, formContext);
+    const error = useFieldError(name, formContext);
+    const clearError = useClearError(formContext);
+    const setTouched = useSetTouched(formContext);
+    const hasBeenSubmitted = useContextSelectAtom(formContext.formId, hasBeenSubmittedAtom);
+    const validateField = useContextSelectAtom(formContext.formId, validateFieldAtom);
+    const registerReceiveFocus = useContextSelectAtom(formContext.formId, registerReceiveFocusAtom);
     useEffect(() => {
         if (handleReceiveFocus)
             return registerReceiveFocus(name, handleReceiveFocus);
     }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = useMemo(() => {
         const helpers = {
-            error: fieldErrors[name],
-            clearError: () => {
-                clearError(name);
-            },
+            error,
+            clearError: () => clearError(name),
             validate: () => {
                 validateField(name);
             },
-            defaultValue: defaultValues
-                ? get(defaultValues, toPath(name), undefined)
-                : undefined,
-            touched: isTouched,
-            setTouched: (touched) => setFieldTouched(name, touched),
+            defaultValue,
+            touched,
+            setTouched: (touched) => setTouched(name, touched),
         };
         const getInputProps = createGetInputProps({
             ...helpers,
@@ -46,29 +62,15 @@ export 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;
 };
-/**
- * Provides access to the entire form context.
- */
-export const useFormContext = () => useInternalFormContext("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.
- */
-export const useIsSubmitting = () => useInternalFormContext("useIsSubmitting").isSubmitting;
-/**
- * Returns whether or not the current form is valid.
- */
-export const useIsValid = () => useInternalFormContext("useIsValid").isValid;

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

@@ -3,3 +3,4 @@ export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/createValidator";
+export * from "./userFacingFormContext";

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

@@ -0,0 +1,3 @@
+export const FORM_ID_FIELD = "__rvfInternalFormId";
+export const FORM_DEFAULTS_FIELD = "__rvfInternalFormDefaults";
+export const formDefaultValuesKey = (formId) => `${FORM_DEFAULTS_FIELD}_${formId}`;

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

@@ -1,2 +1,2 @@
 import { createContext } from "react";
-export const FormContext = createContext(null);
+export const InternalFormContext = createContext(null);