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

package/build/ValidatedForm.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,26 +25,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ValidatedForm = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@remix-run/react");
-const react_2 = require("react");
+const uniq_1 = __importDefault(require("lodash/uniq"));
+const react_2 = __importStar(require("react"));
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const formContext_1 = require("./internal/formContext");
 const MultiValueMap_1 = require("./internal/MultiValueMap");
 const submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
-function useFieldErrorsFromBackend(fetcher, subaction) {
-    var _a, _b;
+function useErrorResponseForThisForm(fetcher, subaction) {
+    var _a;
     const actionData = (0, react_1.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) {
@@ -67,30 +86,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 = (0, uniq_1.default)(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;
     }
 };
 /**
@@ -98,16 +137,17 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
  */
 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] = (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);
     (0, submissionCallbacks_1.useSubmitComplete)(isSubmitting, () => {
         var _a;
-        if (!fieldErrorsFromBackend && resetAfterSubmit) {
+        if (!backendError && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
@@ -126,9 +166,9 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         clearError: (fieldName) => {
             setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
         },
-        validateField: (fieldName) => {
+        validateField: async (fieldName) => {
             (0, tiny_invariant_1.default)(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) {
@@ -140,6 +180,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                         [fieldName]: error,
                     };
                 });
+                return error;
             }
             else {
                 setFieldErrors((prev) => {
@@ -147,6 +188,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                         return prev;
                     return (0, util_1.omit)(prev, fieldName);
                 });
+                return null;
             }
         },
         registerReceiveFocus: (fieldName, handler) => {
@@ -168,18 +210,43 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         customFocusHandlers,
     ]);
     const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : react_1.Form;
-    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, onSubmit: (event) => {
+    let clickedButtonRef = react_2.default.useRef();
+    (0, react_2.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 ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.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/build/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/build/hooks.js

@@ -3,35 +3,56 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsSubmitting = exports.useFormContext = exports.useField = void 0;
+exports.useIsValid = exports.useIsSubmitting = exports.useFormContext = exports.useField = void 0;
 const get_1 = __importDefault(require("lodash/get"));
 const toPath_1 = __importDefault(require("lodash/toPath"));
 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;
+};
 /**
  * Provides the data and helpers necessary to set up a field.
  */
 const useField = (name, options) => {
-    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = (0, react_1.useContext)(formContext_1.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] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         if (handleReceiveFocus)
             return registerReceiveFocus(name, handleReceiveFocus);
     }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = (0, react_1.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
                 ? (0, get_1.default)(defaultValues, (0, toPath_1.default)(name), undefined)
                 : undefined,
             touched: isTouched,
             setTouched: (touched) => setFieldTouched(name, touched),
+            validationState: getValidationState(),
         };
         const getInputProps = (0, getInputProps_1.createGetInputProps)({
             ...helpers,
@@ -50,6 +71,7 @@ const useField = (name, options) => {
         isTouched,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
+        isValidating,
         clearError,
         validateField,
         setFieldTouched,
@@ -59,14 +81,18 @@ const useField = (name, options) => {
 exports.useField = useField;
 /**
  * Provides access to the entire form context.
- * This is not usually necessary, but can be useful for advanced use cases.
  */
-const useFormContext = () => (0, react_1.useContext)(formContext_1.FormContext);
+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 = () => (0, exports.useFormContext)().isSubmitting;
+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/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/build/internal/formContext.js

@@ -2,14 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormContext = void 0;
 const react_1 = require("react");
-exports.FormContext = (0, react_1.createContext)({
-    fieldErrors: {},
-    clearError: () => { },
-    validateField: () => { },
-    isSubmitting: false,
-    hasBeenSubmitted: false,
-    isValid: true,
-    registerReceiveFocus: () => () => { },
-    touchedFields: {},
-    setFieldTouched: () => { },
-});
+exports.FormContext = (0, react_1.createContext)(null);

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

@@ -4,18 +4,23 @@ exports.validationError = void 0;
 const server_runtime_1 = require("@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);
+ * ```
  */
-const validationError = (errors, submittedData) => {
-    if (submittedData) {
-        return (0, server_runtime_1.json)({
-            fieldErrors: {
-                ...errors,
-                _submittedData: submittedData,
-            },
-        }, { status: 422 });
-    }
-    return (0, server_runtime_1.json)({ fieldErrors: errors }, { status: 422 });
-};
+function validationError(error, repopulateFields) {
+    return (0, server_runtime_1.json)({
+        fieldErrors: error.fieldErrors,
+        subaction: error.subaction,
+        repopulateFields,
+    }, { status: 422 });
+}
 exports.validationError = validationError;

package/build/types.d.ts

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

package/build/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/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/build/validation/createValidator.js

@@ -16,17 +16,24 @@ const preprocessFormData = (data) => {
  */
 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/build/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "3.4.2",
+  "version": "4.0.0-beta.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",