remix-validated-form 3.0.0-beta.1 → 3.2.0

package/build/ValidatedForm.js

@@ -9,6 +9,7 @@ const react_1 = require("@remix-run/react");
 const react_2 = require("react");
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const formContext_1 = require("./internal/formContext");
+const SingleTypeMultiValueMap_1 = require("./internal/SingleTypeMultiValueMap");
 const submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
 function useFieldErrorsFromBackend(fetcher, subaction) {
@@ -70,15 +71,39 @@ function useDefaultValues(fieldErrors, defaultValues) {
     const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
     return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
 }
+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) => {
+                handler();
+            });
+            break;
+        }
+        // We don't filter these out ahead of time because
+        // they could have a custom focus handler
+        if (input.type === "hidden") {
+            continue;
+        }
+        input.focus();
+        break;
+    }
+};
 /**
  * The primary form component of `remix-validated-form`.
  */
-function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
+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 isSubmitting = useIsSubmitting(action, subaction, fetcher);
     const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
+    const [touchedFields, setTouchedFields] = (0, react_2.useState)({});
+    const [hasBeenSubmitted, setHasBeenSubmitted] = (0, react_2.useState)(false);
     const formRef = (0, react_2.useRef)(null);
     (0, submissionCallbacks_1.useSubmitComplete)(isSubmitting, () => {
         var _a;
@@ -86,11 +111,18 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
+    const customFocusHandlers = (0, SingleTypeMultiValueMap_1.useMultiValueMap)();
     const contextValue = (0, react_2.useMemo)(() => ({
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
         isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        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));
         },
@@ -103,21 +135,38 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                     [fieldName]: error,
                 }));
             }
+            else {
+                setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
+            }
+        },
+        registerReceiveFocus: (fieldName, handler) => {
+            customFocusHandlers().add(fieldName, handler);
+            return () => {
+                customFocusHandlers().remove(fieldName, handler);
+            };
         },
+        hasBeenSubmitted,
     }), [
         fieldErrors,
         action,
         defaultsToUse,
         isSubmitting,
+        touchedFields,
+        hasBeenSubmitted,
         setFieldErrors,
         validator,
+        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) => {
+            setHasBeenSubmitted(true);
             const result = validator.validate(getDataFromForm(event.currentTarget));
             if (result.error) {
                 event.preventDefault();
                 setFieldErrors(result.error);
+                if (!disableFocusOnError) {
+                    focusFirstInvalidInput(result.error, customFocusHandlers(), formRef.current);
+                }
             }
             else {
                 onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
@@ -127,6 +176,8 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             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));
 }
 exports.ValidatedForm = ValidatedForm;

package/build/hooks.d.ts

@@ -1,3 +1,4 @@
+import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputProps";
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -15,11 +16,34 @@ export declare type FieldProps = {
      * The default value of the field, if there is one.
      */
     defaultValue?: any;
+    /**
+     * Whether or not the field has been touched.
+     */
+    touched: boolean;
+    /**
+     * Helper to set the touched state of the field.
+     */
+    setTouched: (touched: boolean) => void;
+    /**
+     * Helper to get all the props necessary for a regular input.
+     */
+    getInputProps: GetInputProps;
 };
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export declare const useField: (name: string) => FieldProps;
+export declare const useField: (name: string, options?: {
+    /**
+     * Allows you to configure a custom function that will be called
+     * when the input needs to receive focus due to a validation error.
+     * This is useful for custom components that use a hidden input.
+     */
+    handleReceiveFocus?: (() => void) | undefined;
+    /**
+     * Allows you to specify when a field gets validated (when using getInputProps)
+     */
+    validationBehavior?: Partial<ValidationBehaviorOptions> | undefined;
+} | undefined) => FieldProps;
 /**
  * Provides access to the entire form context.
  * This is not usually necessary, but can be useful for advanced use cases.

package/build/hooks.js

@@ -8,21 +8,52 @@ 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");
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-const useField = (name) => {
-    const { fieldErrors, clearError, validateField, defaultValues } = (0, react_1.useContext)(formContext_1.FormContext);
-    const field = (0, react_1.useMemo)(() => ({
-        error: fieldErrors[name],
-        clearError: () => {
-            clearError(name);
-        },
-        validate: () => validateField(name),
-        defaultValue: defaultValues
-            ? (0, get_1.default)(defaultValues, (0, toPath_1.default)(name), undefined)
-            : undefined,
-    }), [clearError, defaultValues, fieldErrors, name, validateField]);
+const useField = (name, options) => {
+    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = (0, react_1.useContext)(formContext_1.FormContext);
+    const isTouched = !!touchedFields[name];
+    const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
+    (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);
+            },
+            validate: () => validateField(name),
+            defaultValue: defaultValues
+                ? (0, get_1.default)(defaultValues, (0, toPath_1.default)(name), undefined)
+                : undefined,
+            touched: isTouched,
+            setTouched: (touched) => setFieldTouched(name, touched),
+        };
+        const getInputProps = (0, getInputProps_1.createGetInputProps)({
+            ...helpers,
+            name,
+            hasBeenSubmitted,
+            validationBehavior: options === null || options === void 0 ? void 0 : options.validationBehavior,
+        });
+        return {
+            ...helpers,
+            getInputProps,
+        };
+    }, [
+        fieldErrors,
+        name,
+        defaultValues,
+        isTouched,
+        hasBeenSubmitted,
+        options === null || options === void 0 ? void 0 : options.validationBehavior,
+        clearError,
+        validateField,
+        setFieldTouched,
+    ]);
     return field;
 };
 exports.useField = useField;

package/build/internal/SingleTypeMultiValueMap.d.ts

@@ -0,0 +1,8 @@
+export declare class MultiValueMap<Key, Value> {
+    private dict;
+    add: (key: Key, value: Value) => void;
+    remove: (key: Key, value: Value) => void;
+    getAll: (key: Key) => Value[];
+    has: (key: Key) => boolean;
+}
+export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/build/internal/SingleTypeMultiValueMap.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMultiValueMap = exports.MultiValueMap = void 0;
+const react_1 = require("react");
+class MultiValueMap {
+    constructor() {
+        this.dict = new Map();
+        this.add = (key, value) => {
+            var _a;
+            this.dict.set(key, [...((_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : []), value]);
+            if (this.dict.has(key)) {
+                this.dict.get(key).push(value);
+            }
+            else {
+                this.dict.set(key, [value]);
+            }
+        };
+        this.remove = (key, value) => {
+            if (!this.dict.has(key))
+                return;
+            const array = this.dict.get(key);
+            const index = array.indexOf(value);
+            if (index !== -1)
+                array.splice(index, 1);
+            if (array.length === 0)
+                this.dict.delete(key);
+        };
+        this.getAll = (key) => {
+            var _a;
+            return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
+        };
+        this.has = (key) => this.dict.has(key);
+    }
+}
+exports.MultiValueMap = MultiValueMap;
+const useMultiValueMap = () => {
+    const ref = (0, react_1.useRef)(null);
+    return () => {
+        if (ref.current)
+            return ref.current;
+        ref.current = new MultiValueMap();
+        return ref.current;
+    };
+};
+exports.useMultiValueMap = useMultiValueMap;

package/build/internal/formContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FieldErrors } from "../validation/types";
+import { FieldErrors, TouchedFields } from "../validation/types";
 export declare type FormContextValue = {
     /**
      * All the errors in all the fields in the form.
@@ -21,11 +21,35 @@ export declare type FormContextValue = {
      * 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.
+     * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
+     */
+    isValid: boolean;
     /**
      * The default values of the form.
      */
     defaultValues?: {
         [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;
 };
 export declare const FormContext: import("react").Context<FormContextValue>;

package/build/internal/formContext.js

@@ -7,4 +7,9 @@ exports.FormContext = (0, react_1.createContext)({
     clearError: () => { },
     validateField: () => { },
     isSubmitting: false,
+    hasBeenSubmitted: false,
+    isValid: true,
+    registerReceiveFocus: () => () => { },
+    touchedFields: {},
+    setFieldTouched: () => { },
 });

package/build/internal/getInputProps.d.ts

@@ -0,0 +1,28 @@
+export declare type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
+export declare type ValidationBehaviorOptions = {
+    initial: ValidationBehavior;
+    whenTouched: ValidationBehavior;
+    whenSubmitted: ValidationBehavior;
+};
+export declare type CreateGetInputPropsOptions = {
+    clearError: () => void;
+    validate: () => void;
+    defaultValue?: any;
+    touched: boolean;
+    setTouched: (touched: boolean) => void;
+    hasBeenSubmitted: boolean;
+    validationBehavior?: Partial<ValidationBehaviorOptions>;
+    name: string;
+};
+export declare type MinimalInputProps = {
+    onChange?: (...args: any[]) => void;
+    onBlur?: (...args: any[]) => void;
+};
+export declare type MinimalResult = {
+    name: string;
+    onChange: (...args: any[]) => void;
+    onBlur: (...args: any[]) => void;
+    defaultValue?: any;
+};
+export declare type GetInputProps = <T extends {}>(props?: T & MinimalInputProps) => T & MinimalResult;
+export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;

package/build/internal/getInputProps.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createGetInputProps = void 0;
+const defaultValidationBehavior = {
+    initial: "onBlur",
+    whenTouched: "onChange",
+    whenSubmitted: "onChange",
+};
+const createGetInputProps = ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }) => {
+    const validationBehaviors = {
+        ...defaultValidationBehavior,
+        ...validationBehavior,
+    };
+    return (props = {}) => {
+        const behavior = hasBeenSubmitted
+            ? validationBehaviors.whenSubmitted
+            : touched
+                ? validationBehaviors.whenTouched
+                : validationBehaviors.initial;
+        return {
+            ...props,
+            onChange: (...args) => {
+                var _a;
+                if (behavior === "onChange")
+                    validate();
+                else
+                    clearError();
+                return (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
+            },
+            onBlur: (...args) => {
+                var _a;
+                if (behavior === "onBlur")
+                    validate();
+                setTouched(true);
+                return (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
+            },
+            defaultValue,
+            name,
+        };
+    };
+};
+exports.createGetInputProps = createGetInputProps;

package/build/internal/test.d.ts

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

package/build/internal/test.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const getInputProps_1 = require("./getInputProps");
+const CompRequired = (props) => null;
+const getProps = (0, getInputProps_1.createGetInputProps)({});
+(0, jsx_runtime_1.jsx)(CompRequired, { ...getProps({
+        temp: 21,
+        bob: "ross",
+        onBlur: () => { },
+        // onChange: () => {},
+    }) }, void 0);

package/build/server.d.ts

@@ -4,4 +4,4 @@ import { FieldErrors } from "./validation/types";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export declare const validationError: (errors: FieldErrors) => Response;
+export declare const validationError: (errors: FieldErrors, submittedData?: unknown) => Response;

package/build/server.js

@@ -7,5 +7,15 @@ const server_runtime_1 = require("@remix-run/server-runtime");
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-const validationError = (errors) => (0, server_runtime_1.json)({ fieldErrors: errors }, { status: 422 });
+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 });
+};
 exports.validationError = validationError;

package/build/validation/types.d.ts

@@ -1,4 +1,5 @@
 export declare type FieldErrors = Record<string, string>;
+export declare type TouchedFields = Record<string, boolean>;
 export declare type FieldErrorsWithData = FieldErrors & {
     _submittedData: any;
 };
@@ -28,3 +29,4 @@ export declare type Validator<DataType> = {
     validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
     validateField: (unvalidatedData: GenericObject, field: string) => 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.0.0-beta.1",
+  "version": "3.2.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -14,8 +14,6 @@
     "build": "npm run build:browser && npm run build:main",
     "build:browser": "tsc --module ESNext --outDir ./browser",
     "build:main": "tsc --module CommonJS --outDir ./build",
-    "test": "jest src",
-    "test:watch": "jest src --watch",
     "prepublishOnly": "cp ../../README.md ./README.md && npm run build",
     "postpublish": "rm ./README.md"
   },

package/src/ValidatedForm.tsx

@@ -14,12 +14,17 @@ import React, {
 } from "react";
 import invariant from "tiny-invariant";
 import { FormContext, FormContextValue } from "./internal/formContext";
+import {
+  MultiValueMap,
+  useMultiValueMap,
+} from "./internal/SingleTypeMultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
 import {
   FieldErrors,
   Validator,
   FieldErrorsWithData,
+  TouchedFields,
 } from "./validation/types";
 
 export type FormProps<DataType> = {
@@ -59,6 +64,11 @@ export type FormProps<DataType> = {
    * and don't redirect in-between submissions.
    */
   resetAfterSubmit?: boolean;
+  /**
+   * Normally, the first invalid input will be focused when the validation fails on form submit.
+   * Set this to `false` to disable this behavior.
+   */
+  disableFocusOnError?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
 
 function useFieldErrorsFromBackend(
@@ -136,6 +146,36 @@ function useDefaultValues<DataType>(
   return defaultsFromValidationError ?? defaultValues;
 }
 
+const focusFirstInvalidInput = (
+  fieldErrors: FieldErrors,
+  customFocusHandlers: MultiValueMap<string, () => void>,
+  formElement: HTMLFormElement
+) => {
+  const invalidInputSelector = Object.keys(fieldErrors)
+    .map((fieldName) => `input[name="${fieldName}"]`)
+    .join(",");
+  const invalidInputs = formElement.querySelectorAll(invalidInputSelector);
+  for (const element of invalidInputs) {
+    const input = element as HTMLInputElement;
+
+    if (customFocusHandlers.has(input.name)) {
+      customFocusHandlers.getAll(input.name).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") {
+      continue;
+    }
+
+    input.focus();
+    break;
+  }
+};
+
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -150,18 +190,22 @@ export function ValidatedForm<DataType>({
   onReset,
   subaction,
   resetAfterSubmit,
+  disableFocusOnError,
   ...rest
 }: FormProps<DataType>) {
   const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
   const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
   const isSubmitting = useIsSubmitting(action, subaction, fetcher);
   const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
+  const [touchedFields, setTouchedFields] = useState<TouchedFields>({});
+  const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
   useSubmitComplete(isSubmitting, () => {
     if (!fieldErrorsFromBackend && resetAfterSubmit) {
       formRef.current?.reset();
     }
   });
+  const customFocusHandlers = useMultiValueMap<string, () => void>();
 
   const contextValue = useMemo<FormContextValue>(
     () => ({
@@ -169,6 +213,13 @@ export function ValidatedForm<DataType>({
       action,
       defaultValues: defaultsToUse,
       isSubmitting: isSubmitting ?? false,
+      isValid: Object.keys(fieldErrors).length === 0,
+      touchedFields,
+      setFieldTouched: (fieldName: string, touched: boolean) =>
+        setTouchedFields((prev) => ({
+          ...prev,
+          [fieldName]: touched,
+        })),
       clearError: (fieldName) => {
         setFieldErrors((prev) => omit(prev, fieldName));
       },
@@ -183,16 +234,28 @@ export function ValidatedForm<DataType>({
             ...prev,
             [fieldName]: error,
           }));
+        } else {
+          setFieldErrors((prev) => omit(prev, fieldName));
         }
       },
+      registerReceiveFocus: (fieldName, handler) => {
+        customFocusHandlers().add(fieldName, handler);
+        return () => {
+          customFocusHandlers().remove(fieldName, handler);
+        };
+      },
+      hasBeenSubmitted,
     }),
     [
       fieldErrors,
       action,
       defaultsToUse,
       isSubmitting,
+      touchedFields,
+      hasBeenSubmitted,
       setFieldErrors,
       validator,
+      customFocusHandlers,
     ]
   );
 
@@ -204,10 +267,18 @@ export function ValidatedForm<DataType>({
       {...rest}
       action={action}
       onSubmit={(event) => {
+        setHasBeenSubmitted(true);
         const result = validator.validate(getDataFromForm(event.currentTarget));
         if (result.error) {
           event.preventDefault();
           setFieldErrors(result.error);
+          if (!disableFocusOnError) {
+            focusFirstInvalidInput(
+              result.error,
+              customFocusHandlers(),
+              formRef.current!
+            );
+          }
         } else {
           onSubmit?.(result.data, event);
         }
@@ -216,6 +287,8 @@ export function ValidatedForm<DataType>({
         onReset?.(event);
         if (event.defaultPrevented) return;
         setFieldErrors({});
+        setTouchedFields({});
+        setHasBeenSubmitted(false);
       }}
     >
       <FormContext.Provider value={contextValue}>