remix-validated-form 3.0.0 → 3.2.1

package/.turbo/turbo-build.log

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

package/README.md

@@ -10,6 +10,10 @@ A form library built for [remix](https://remix.run) to make validation easy.
 - Supports nested objects and arrays
 - Validation library agnostic
 
+# Docs
+
+The docs are located a [remix-validated-form.io](https://www.remix-validated-form.io).
+
 # Demo
 
 https://user-images.githubusercontent.com/2811287/145734901-700a5085-a10b-4d89-88e1-5de9142b1e85.mov
@@ -60,18 +64,14 @@ type MyInputProps = {
 };
 
 export const MyInput = ({ name, label }: InputProps) => {
-  const { validate, clearError, defaultValue, error } = useField(name);
+  const { error, getInputProps } = useField(name);
   return (
     <div>
       <label htmlFor={name}>{label}</label>
-      <input
-        id={name}
-        name={name}
-        onBlur={validate}
-        onChange={clearError}
-        defaultValue={defaultValue}
-      />
-      {error && <span className="my-error-class">{error}</span>}
+      <input {...getInputProps({ id: name })} />
+      {error && (
+        <span className="my-error-class">{error}</span>
+      )}
     </div>
   );
 };
@@ -82,18 +82,22 @@ export const MyInput = ({ name, label }: InputProps) => {
 To best take advantage of the per-form submission detection, we can create a submit button component.
 
 ```tsx
-import { useIsSubmitting } from "remix-validated-form";
+import { useFormContext, useIsSubmitting } from "remix-validated-form";
 
 export const MySubmitButton = () => {
   const isSubmitting = useIsSubmitting();
+  const { isValid } = useFormContext();
+  const disabled = isSubmitting || !isValid;
+
   return (
-    <button type="submit" disabled={isSubmitting}>
+    <button type="submit" disabled={disabled} className={disabled ? "disabled-btn" : "btn"}>
       {isSubmitting ? "Submitting..." : "Submit"}
     </button>
   );
 };
 ```
 
+
 ## Use the form!
 
 Now that we have our components, making a form is easy!
@@ -245,3 +249,12 @@ This is happening because you or the library you are using is passing the `requi
 This library doesn't take care of eliminating them and it's up to the user how they want to manage the validation errors.
 If you wan't to disable all native HTML validations you can add `noValidate` to `<ValidatedForm>`.
 We recommend this approach since the validation will still work even if JS is disabled.
+
+## How do we trigger toast messages on success?
+
+Problem: how do we trigger a toast message on success if the action redirects away from the form route? The Remix solution is to flash a message in the session and pick this up in a loader function, probably in root.tsx
+See the [Remix](https://remix.run/docs/en/v1/api/remix#sessionflashkey-value) documentation for more information.
+
+## Why is my cancel button triggering form submission?
+Problem: the cancel button has an onClick handler to navigate away from the form route but instead it is submitting the form.
+A button defaults to `type="submit"` in a form which will submit the form by default. If you want to prevent this you can add `type="reset"` or `type="button"` to the cancel button.

package/browser/ValidatedForm.d.ts

@@ -38,8 +38,13 @@ export declare 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">;
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -3,6 +3,7 @@ import { Form as RemixForm, useActionData, useFormAction, useTransition, } from
 import { useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
 import { FormContext } from "./internal/formContext";
+import { useMultiValueMap, } from "./internal/SingleTypeMultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
 function useFieldErrorsFromBackend(fetcher, subaction) {
@@ -64,15 +65,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`.
  */
-export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
+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 isSubmitting = useIsSubmitting(action, subaction, fetcher);
     const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
+    const [touchedFields, setTouchedFields] = useState({});
+    const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
     const formRef = useRef(null);
     useSubmitComplete(isSubmitting, () => {
         var _a;
@@ -80,11 +105,18 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
+    const customFocusHandlers = useMultiValueMap();
     const contextValue = 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) => omit(prev, fieldName));
         },
@@ -97,21 +129,38 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                     [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,
     ]);
     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) => {
+            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);
@@ -121,5 +170,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             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));
 }

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

@@ -1,22 +1,53 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useMemo } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
+import { createGetInputProps, } from "./internal/getInputProps";
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export const useField = (name) => {
-    const { fieldErrors, clearError, validateField, defaultValues } = useContext(FormContext);
-    const field = useMemo(() => ({
-        error: fieldErrors[name],
-        clearError: () => {
-            clearError(name);
-        },
-        validate: () => validateField(name),
-        defaultValue: defaultValues
-            ? get(defaultValues, toPath(name), undefined)
-            : undefined,
-    }), [clearError, defaultValues, fieldErrors, name, validateField]);
+export const useField = (name, options) => {
+    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = useContext(FormContext);
+    const isTouched = !!touchedFields[name];
+    const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
+    useEffect(() => {
+        if (handleReceiveFocus)
+            return registerReceiveFocus(name, handleReceiveFocus);
+    }, [handleReceiveFocus, name, registerReceiveFocus]);
+    const field = useMemo(() => {
+        const helpers = {
+            error: fieldErrors[name],
+            clearError: () => {
+                clearError(name);
+            },
+            validate: () => validateField(name),
+            defaultValue: defaultValues
+                ? get(defaultValues, toPath(name), undefined)
+                : undefined,
+            touched: isTouched,
+            setTouched: (touched) => setFieldTouched(name, touched),
+        };
+        const getInputProps = 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;
 };
 /**

package/browser/internal/MultiValueMap.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,40 @@
+import { useRef } from "react";
+export 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);
+    }
+}
+export const useMultiValueMap = () => {
+    const ref = useRef(null);
+    return () => {
+        if (ref.current)
+            return ref.current;
+        ref.current = new MultiValueMap();
+        return ref.current;
+    };
+};

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

@@ -4,4 +4,9 @@ export const FormContext = createContext({
     clearError: () => { },
     validateField: () => { },
     isSubmitting: false,
+    hasBeenSubmitted: false,
+    isValid: true,
+    registerReceiveFocus: () => () => { },
+    touchedFields: {},
+    setFieldTouched: () => { },
 });

package/browser/internal/getInputProps.d.ts

@@ -0,0 +1,21 @@
+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;
+};
+declare type HandledProps = "name" | "defaultValue";
+declare type Callbacks = "onChange" | "onBlur";
+export declare type GetInputProps = <T extends Record<string, any>>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
+export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
+export {};

package/browser/internal/getInputProps.js

@@ -0,0 +1,39 @@
+const defaultValidationBehavior = {
+    initial: "onBlur",
+    whenTouched: "onChange",
+    whenSubmitted: "onChange",
+};
+export 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;
+        const result = {
+            ...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,
+        };
+        return result;
+    };
+};

package/browser/internal/test.d.ts

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

package/browser/internal/test.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createGetInputProps } from "./getInputProps";
+const CompRequired = (props) => null;
+const getProps = createGetInputProps({});
+_jsx(CompRequired, { ...getProps({
+        temp: 21,
+        bob: "ross",
+        onBlur: () => { },
+        // onChange: () => {},
+    }) }, void 0);

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

@@ -4,4 +4,14 @@ import { json } from "@remix-run/server-runtime";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export const validationError = (errors) => json({ fieldErrors: errors }, { status: 422 });
+export const validationError = (errors, submittedData) => {
+    if (submittedData) {
+        return json({
+            fieldErrors: {
+                ...errors,
+                _submittedData: submittedData,
+            },
+        }, { status: 422 });
+    }
+    return json({ fieldErrors: errors }, { status: 422 });
+};

package/browser/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/build/ValidatedForm.d.ts

@@ -38,8 +38,13 @@ export declare 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">;
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }: FormProps<DataType>): JSX.Element;