remix-validated-form 3.4.2 → 4.0.0-beta.0

package/.turbo/turbo-build.log

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

package/README.md

@@ -120,7 +120,7 @@ const validator = withYup(
 );
 
 export const action: ActionFunction = async ({ request }) => {
-  const fieldValues = validator.validate(await request.formData());
+  const fieldValues = await validator.validate(await request.formData());
   if (fieldValues.error) return validationError(fieldValues.error);
   const { firstName, lastName, email } = fieldValues.data;
 

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>) => void;
+    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => 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

package/browser/ValidatedForm.js

@@ -1,25 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Form as RemixForm, useActionData, useFormAction, useTransition, } from "@remix-run/react";
-import { useEffect, useMemo, useRef, useState, } from "react";
+import { Form as RemixForm, useActionData, useFormAction, useSubmit, useTransition, } from "@remix-run/react";
+import uniq from "lodash/uniq";
+import React, { useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
 import { FormContext } from "./internal/formContext";
 import { useMultiValueMap } from "./internal/MultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
-function useFieldErrorsFromBackend(fetcher, subaction) {
-    var _a, _b;
+function useErrorResponseForThisForm(fetcher, subaction) {
+    var _a;
     const actionData = useActionData();
-    if (fetcher)
-        return (_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors;
-    if (!actionData)
+    if (fetcher) {
+        if ((_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors)
+            return fetcher.data;
         return null;
-    if (actionData.fieldErrors) {
-        const submittedData = (_b = actionData.fieldErrors) === null || _b === void 0 ? void 0 : _b._submittedData;
-        const subactionsMatch = subaction
-            ? subaction === (submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction)
-            : !(submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction);
-        return subactionsMatch ? actionData.fieldErrors : 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) {
@@ -61,30 +61,50 @@ const getDataFromForm = (el) => new FormData(el);
  * It will only ever be a problem if the form includes a `<button type="reset" />`
  * and only if JS is disabled.
  */
-function useDefaultValues(fieldErrors, defaultValues) {
-    const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
-    return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
+function useDefaultValues(repopulateFieldsFromBackend, defaultValues) {
+    return repopulateFieldsFromBackend !== null && repopulateFieldsFromBackend !== void 0 ? repopulateFieldsFromBackend : defaultValues;
+}
+function nonNull(value) {
+    return value !== null;
 }
 const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) => {
-    const invalidInputSelector = Object.keys(fieldErrors)
-        .map((fieldName) => `input[name="${fieldName}"]`)
-        .join(",");
-    const invalidInputs = formElement.querySelectorAll(invalidInputSelector);
-    for (const element of invalidInputs) {
-        const input = element;
-        if (customFocusHandlers.has(input.name)) {
-            customFocusHandlers.getAll(input.name).forEach((handler) => {
+    var _a;
+    const namesInOrder = [...formElement.elements]
+        .map((el) => {
+        const input = el instanceof RadioNodeList ? el[0] : el;
+        if (input instanceof HTMLInputElement)
+            return input.name;
+        return null;
+    })
+        .filter(nonNull)
+        .filter((name) => name in fieldErrors);
+    const uniqueNamesInOrder = uniq(namesInOrder);
+    for (const fieldName of uniqueNamesInOrder) {
+        if (customFocusHandlers.has(fieldName)) {
+            customFocusHandlers.getAll(fieldName).forEach((handler) => {
                 handler();
             });
             break;
         }
-        // We don't filter these out ahead of time because
-        // they could have a custom focus handler
-        if (input.type === "hidden") {
+        const elem = formElement.elements.namedItem(fieldName);
+        if (!elem)
             continue;
+        if (elem instanceof RadioNodeList) {
+            const selectedRadio = (_a = [...elem]
+                .filter((item) => item instanceof HTMLInputElement)
+                .find((item) => item.value === elem.value)) !== null && _a !== void 0 ? _a : elem[0];
+            if (selectedRadio && selectedRadio instanceof HTMLInputElement) {
+                selectedRadio.focus();
+                break;
+            }
+        }
+        if (elem instanceof HTMLInputElement) {
+            if (elem.type === "hidden") {
+                continue;
+            }
+            elem.focus();
+            break;
         }
-        input.focus();
-        break;
     }
 };
 /**
@@ -92,16 +112,17 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
  */
 export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }) {
     var _a;
-    const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
-    const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
+    const backendError = useErrorResponseForThisForm(fetcher, subaction);
+    const [fieldErrors, setFieldErrors] = useFieldErrors(backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors);
     const isSubmitting = useIsSubmitting(action, subaction, fetcher);
-    const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
+    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);
     useSubmitComplete(isSubmitting, () => {
         var _a;
-        if (!fieldErrorsFromBackend && resetAfterSubmit) {
+        if (!backendError && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
@@ -120,9 +141,9 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         clearError: (fieldName) => {
             setFieldErrors((prev) => omit(prev, fieldName));
         },
-        validateField: (fieldName) => {
+        validateField: async (fieldName) => {
             invariant(formRef.current, "Cannot find reference to form");
-            const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            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) {
@@ -134,6 +155,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                         [fieldName]: error,
                     };
                 });
+                return error;
             }
             else {
                 setFieldErrors((prev) => {
@@ -141,6 +163,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                         return prev;
                     return omit(prev, fieldName);
                 });
+                return null;
             }
         },
         registerReceiveFocus: (fieldName, handler) => {
@@ -162,18 +185,43 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         customFocusHandlers,
     ]);
     const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : RemixForm;
-    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, onSubmit: (event) => {
+    let clickedButtonRef = React.useRef();
+    useEffect(() => {
+        let form = formRef.current;
+        if (!form)
+            return;
+        function handleClick(event) {
+            if (!(event.target instanceof HTMLElement))
+                return;
+            let submitButton = event.target.closest("button,input[type=submit]");
+            if (submitButton &&
+                submitButton.form === form &&
+                submitButton.type === "submit") {
+                clickedButtonRef.current = submitButton;
+            }
+        }
+        window.addEventListener("click", handleClick);
+        return () => {
+            window.removeEventListener("click", handleClick);
+        };
+    }, []);
+    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, onSubmit: async (e) => {
+            e.preventDefault();
             setHasBeenSubmitted(true);
-            const result = validator.validate(getDataFromForm(event.currentTarget));
+            const result = await validator.validate(getDataFromForm(e.currentTarget));
             if (result.error) {
-                event.preventDefault();
-                setFieldErrors(result.error);
+                setFieldErrors(result.error.fieldErrors);
                 if (!disableFocusOnError) {
-                    focusFirstInvalidInput(result.error, customFocusHandlers(), formRef.current);
+                    focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
                 }
             }
             else {
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
+                onSubmit && onSubmit(result.data, e);
+                if (fetcher)
+                    fetcher.submit(clickedButtonRef.current || e.currentTarget);
+                else
+                    submit(clickedButtonRef.current || e.currentTarget);
+                clickedButtonRef.current = null;
             }
         }, onReset: (event) => {
             onReset === null || onReset === void 0 ? void 0 : onReset(event);

package/browser/components.d.ts

@@ -0,0 +1,10 @@
+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;
+export {};

package/browser/components.js

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

package/browser/hooks.d.ts

@@ -1,4 +1,5 @@
 import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputProps";
+import { ValidationState } from "./types";
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -12,6 +13,14 @@ export declare type FieldProps = {
      * Validates the field.
      */
     validate: () => void;
+    /**
+     * The validation state of the field.
+     * - idle: the field has not been validated yet.
+     * - validating: the field is currently being validated.
+     * - valid: the field is valid.
+     * - invalid: the field is invalid.
+     */
+    validationState: ValidationState;
     /**
      * The default value of the field, if there is one.
      */
@@ -46,7 +55,6 @@ export declare const useField: (name: string, options?: {
 } | undefined) => FieldProps;
 /**
  * Provides access to the entire form context.
- * This is not usually necessary, but can be useful for advanced use cases.
  */
 export declare const useFormContext: () => import("./internal/formContext").FormContextValue;
 /**
@@ -55,3 +63,7 @@ export declare const useFormContext: () => import("./internal/formContext").Form
  * 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,31 +1,52 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useEffect, useMemo } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { FormContext } from "./internal/formContext";
 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;
+};
 /**
  * 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, } = useContext(FormContext);
+    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = useInternalFormContext("useField");
     const isTouched = !!touchedFields[name];
     const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
+    const [isValidating, setValidating] = useState(false);
     useEffect(() => {
         if (handleReceiveFocus)
             return registerReceiveFocus(name, handleReceiveFocus);
     }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = useMemo(() => {
+        const error = fieldErrors[name];
+        const getValidationState = () => {
+            if (isValidating)
+                return "validating";
+            if (error)
+                return "invalid";
+            if (!isTouched && !hasBeenSubmitted)
+                return "idle";
+            return "valid";
+        };
         const helpers = {
-            error: fieldErrors[name],
+            error,
             clearError: () => {
                 clearError(name);
             },
-            validate: () => validateField(name),
+            validate: () => {
+                setValidating(true);
+                validateField(name).then((error) => setValidating(false));
+            },
             defaultValue: defaultValues
                 ? get(defaultValues, toPath(name), undefined)
                 : undefined,
             touched: isTouched,
             setTouched: (touched) => setFieldTouched(name, touched),
+            validationState: getValidationState(),
         };
         const getInputProps = createGetInputProps({
             ...helpers,
@@ -44,6 +65,7 @@ export const useField = (name, options) => {
         isTouched,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
+        isValidating,
         clearError,
         validateField,
         setFieldTouched,
@@ -52,12 +74,15 @@ export const useField = (name, options) => {
 };
 /**
  * Provides access to the entire form context.
- * This is not usually necessary, but can be useful for advanced use cases.
  */
-export const useFormContext = () => useContext(FormContext);
+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 = () => useFormContext().isSubmitting;
+export const useIsSubmitting = () => useInternalFormContext("useIsSubmitting").isSubmitting;
+/**
+ * Returns whether or not the current form is valid.
+ */
+export const useIsValid = () => useInternalFormContext("useIsValid").isValid;

package/browser/internal/formContext.d.ts

@@ -12,7 +12,7 @@ export declare type FormContextValue = {
     /**
      * Validate the specified field.
      */
-    validateField: (fieldName: string) => void;
+    validateField: (fieldName: string) => Promise<string | null>;
     /**
      * The `action` prop of the form.
      */
@@ -29,7 +29,6 @@ export declare type FormContextValue = {
     hasBeenSubmitted: boolean;
     /**
      * Whether or not the form is valid.
-     * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
      */
     isValid: boolean;
     /**
@@ -52,4 +51,4 @@ export declare type FormContextValue = {
      */
     setFieldTouched: (fieldName: string, touched: boolean) => void;
 };
-export declare const FormContext: import("react").Context<FormContextValue>;
+export declare const FormContext: import("react").Context<FormContextValue | null>;

package/browser/internal/formContext.js

@@ -1,12 +1,2 @@
 import { createContext } from "react";
-export const FormContext = createContext({
-    fieldErrors: {},
-    clearError: () => { },
-    validateField: () => { },
-    isSubmitting: false,
-    hasBeenSubmitted: false,
-    isValid: true,
-    registerReceiveFocus: () => () => { },
-    touchedFields: {},
-    setFieldTouched: () => { },
-});
+export const FormContext = createContext(null);

package/browser/server.d.ts

@@ -1,7 +1,16 @@
-import { FieldErrors } from "./validation/types";
+import { ValidatorError } from "./validation/types";
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
- * The `ValidatedForm` on the frontend will automatically display the errors
- * if this is returned from the action.
+ * When you return this from your action, `ValidatedForm` on the frontend will automatically
+ * display the errors on the correct fields on the correct form.
+ *
+ * _Recommended_: You can also provide a second argument to `validationError`
+ * to specify how to repopulate the form when JS is disabled.
+ *
+ * @example
+ * ```ts
+ * const result = validator.validate(await request.formData());
+ * if (result.error) return validationError(result.error, result.submittedData);
+ * ```
  */
-export declare const validationError: (errors: FieldErrors, submittedData?: unknown) => Response;
+export declare function validationError(error: ValidatorError, repopulateFields?: unknown): Response;

package/browser/server.js

@@ -1,17 +1,22 @@
 import { json } from "@remix-run/server-runtime";
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
- * The `ValidatedForm` on the frontend will automatically display the errors
- * if this is returned from the action.
+ * When you return this from your action, `ValidatedForm` on the frontend will automatically
+ * display the errors on the correct fields on the correct form.
+ *
+ * _Recommended_: You can also provide a second argument to `validationError`
+ * to specify how to repopulate the form when JS is disabled.
+ *
+ * @example
+ * ```ts
+ * const result = validator.validate(await request.formData());
+ * if (result.error) return validationError(result.error, result.submittedData);
+ * ```
  */
-export const validationError = (errors, submittedData) => {
-    if (submittedData) {
-        return json({
-            fieldErrors: {
-                ...errors,
-                _submittedData: submittedData,
-            },
-        }, { status: 422 });
-    }
-    return json({ fieldErrors: errors }, { status: 422 });
-};
+export function validationError(error, repopulateFields) {
+    return json({
+        fieldErrors: error.fieldErrors,
+        subaction: error.subaction,
+        repopulateFields,
+    }, { status: 422 });
+}

package/browser/types.d.ts

@@ -0,0 +1 @@
+export declare type ValidationState = "idle" | "validating" | "valid" | "invalid";

package/browser/types.js

@@ -0,0 +1 @@
+export {};

package/browser/validation/createValidator.d.ts

@@ -1,7 +1,7 @@
-import { Validator } from "..";
+import { CreateValidatorArg, Validator } from "..";
 /**
  * Used to create a validator for a form.
  * It provides built-in handling for unflattening nested objects and
  * extracting the values from FormData.
  */
-export declare function createValidator<T>(validator: Validator<T>): Validator<T>;
+export declare function createValidator<T>(validator: CreateValidatorArg<T>): Validator<T>;

package/browser/validation/createValidator.js

@@ -13,17 +13,24 @@ const preprocessFormData = (data) => {
  */
 export function createValidator(validator) {
     return {
-        validate: (value) => {
+        validate: async (value) => {
             const data = preprocessFormData(value);
-            const result = validator.validate(data);
+            const result = await validator.validate(data);
             if (result.error) {
-                // Ideally, we should probably be returning a nested object like
-                // { fieldErrors: {}, submittedData: {} }
-                // We should do this in the next major version of the library
-                // but for now, we can sneak it in with the fieldErrors.
-                result.error._submittedData = data;
+                return {
+                    data: undefined,
+                    error: {
+                        fieldErrors: result.error,
+                        subaction: data.subaction,
+                    },
+                    submittedData: data,
+                };
             }
-            return result;
+            return {
+                data: result.data,
+                error: undefined,
+                submittedData: data,
+            };
         },
         validateField: (data, field) => validator.validateField(preprocessFormData(data), field),
     };

package/browser/validation/types.d.ts

@@ -1,21 +1,32 @@
 export declare type FieldErrors = Record<string, string>;
 export declare type TouchedFields = Record<string, boolean>;
-export declare type FieldErrorsWithData = FieldErrors & {
-    _submittedData: any;
-};
 export declare type GenericObject = {
     [key: string]: any;
 };
-/**
- * The result when validating a form.
- */
-export declare type ValidationResult<DataType> = {
+export declare type ValidatorError = {
+    subaction?: string;
+    fieldErrors: FieldErrors;
+};
+export declare type ValidationErrorResponseData = {
+    subaction?: string;
+    fieldErrors: FieldErrors;
+    repopulateFields?: unknown;
+};
+export declare type BaseResult = {
+    submittedData: GenericObject;
+};
+export declare type ErrorResult = BaseResult & {
+    error: ValidatorError;
+    data: undefined;
+};
+export declare type SuccessResult<DataType> = BaseResult & {
     data: DataType;
     error: undefined;
-} | {
-    error: FieldErrors;
-    data: undefined;
 };
+/**
+ * The result when validating a form.
+ */
+export declare type ValidationResult<DataType> = SuccessResult<DataType> | ErrorResult;
 /**
  * The result when validating an individual field in a form.
  */
@@ -26,7 +37,19 @@ export declare type ValidateFieldResult = {
  * A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
  */
 export declare type Validator<DataType> = {
-    validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
-    validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
+    validate: (unvalidatedData: GenericObject) => Promise<ValidationResult<DataType>>;
+    validateField: (unvalidatedData: GenericObject, field: string) => Promise<ValidateFieldResult>;
+};
+export declare type Valid<DataType> = {
+    data: DataType;
+    error: undefined;
+};
+export declare type Invalid = {
+    error: FieldErrors;
+    data: undefined;
+};
+export declare type CreateValidatorArg<DataType> = {
+    validate: (unvalidatedData: GenericObject) => Promise<Valid<DataType> | Invalid>;
+    validateField: (unvalidatedData: GenericObject, field: string) => Promise<ValidateFieldResult>;
 };
 export declare type ValidatorData<T extends Validator<any>> = T extends Validator<infer U> ? U : never;

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>) => void;
+    onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => 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