remix-validated-form 2.1.0 → 3.1.0

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

@@ -28,3 +28,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": "2.1.0",
+  "version": "3.1.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"
   },
@@ -31,6 +29,7 @@
     "react",
     "form",
     "yup",
+    "zod",
     "validation"
   ],
   "peerDependencies": {
@@ -41,16 +40,12 @@
   "devDependencies": {
     "@remix-run/react": "^1.0.6",
     "@remix-run/server-runtime": "^1.0.6",
-    "@types/jest": "^27.0.3",
     "@types/lodash": "^4.14.178",
     "@types/react": "^17.0.37",
     "fetch-blob": "^3.1.3",
     "react": "^17.0.2",
-    "ts-jest": "^27.1.1",
     "tsconfig": "*",
-    "typescript": "^4.5.3",
-    "yup": "^0.32.11",
-    "zod": "^3.11.6"
+    "typescript": "^4.5.3"
   },
   "dependencies": {
     "lodash": "^4.17.21",

package/src/ValidatedForm.tsx

@@ -14,6 +14,10 @@ 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 {
@@ -59,6 +63,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 +145,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,6 +189,7 @@ export function ValidatedForm<DataType>({
   onReset,
   subaction,
   resetAfterSubmit,
+  disableFocusOnError,
   ...rest
 }: FormProps<DataType>) {
   const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
@@ -162,6 +202,7 @@ export function ValidatedForm<DataType>({
       formRef.current?.reset();
     }
   });
+  const customFocusHandlers = useMultiValueMap<string, () => void>();
 
   const contextValue = useMemo<FormContextValue>(
     () => ({
@@ -169,6 +210,7 @@ export function ValidatedForm<DataType>({
       action,
       defaultValues: defaultsToUse,
       isSubmitting: isSubmitting ?? false,
+      isValid: Object.keys(fieldErrors).length === 0,
       clearError: (fieldName) => {
         setFieldErrors((prev) => omit(prev, fieldName));
       },
@@ -185,6 +227,12 @@ export function ValidatedForm<DataType>({
           }));
         }
       },
+      registerReceiveFocus: (fieldName, handler) => {
+        customFocusHandlers().add(fieldName, handler);
+        return () => {
+          customFocusHandlers().remove(fieldName, handler);
+        };
+      },
     }),
     [
       fieldErrors,
@@ -193,6 +241,7 @@ export function ValidatedForm<DataType>({
       isSubmitting,
       setFieldErrors,
       validator,
+      customFocusHandlers,
     ]
   );
 
@@ -208,6 +257,13 @@ export function ValidatedForm<DataType>({
         if (result.error) {
           event.preventDefault();
           setFieldErrors(result.error);
+          if (!disableFocusOnError) {
+            focusFirstInvalidInput(
+              result.error,
+              customFocusHandlers(),
+              formRef.current!
+            );
+          }
         } else {
           onSubmit?.(result.data, event);
         }
@@ -219,7 +275,9 @@ export function ValidatedForm<DataType>({
       }}
     >
       <FormContext.Provider value={contextValue}>
-        <input type="hidden" value={subaction} name="subaction" />
+        {subaction && (
+          <input type="hidden" value={subaction} name="subaction" />
+        )}
         {children}
       </FormContext.Provider>
     </Form>

package/src/hooks.ts

@@ -1,6 +1,6 @@
 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";
 
 export type FieldProps = {
@@ -25,9 +25,31 @@ export type FieldProps = {
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export const useField = (name: string): FieldProps => {
-  const { fieldErrors, clearError, validateField, defaultValues } =
-    useContext(FormContext);
+export 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;
+  }
+): FieldProps => {
+  const {
+    fieldErrors,
+    clearError,
+    validateField,
+    defaultValues,
+    registerReceiveFocus,
+  } = useContext(FormContext);
+
+  const { handleReceiveFocus } = options ?? {};
+
+  useEffect(() => {
+    if (handleReceiveFocus)
+      return registerReceiveFocus(name, handleReceiveFocus);
+  }, [handleReceiveFocus, name, registerReceiveFocus]);
 
   const field = useMemo<FieldProps>(
     () => ({

package/src/index.ts

@@ -2,7 +2,5 @@ export * from "./hooks";
 export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
-export * from "./validation/withYup";
-export * from "./validation/withZod";
 export * from "./validation/createValidator";
 export type { FormContextValue } from "./internal/formContext";

package/src/internal/SingleTypeMultiValueMap.ts

@@ -0,0 +1,37 @@
+import { useRef } from "react";
+
+export class MultiValueMap<Key, Value> {
+  private dict: Map<Key, Value[]> = new Map();
+
+  add = (key: Key, value: Value) => {
+    this.dict.set(key, [...(this.dict.get(key) ?? []), value]);
+    if (this.dict.has(key)) {
+      this.dict.get(key)!.push(value);
+    } else {
+      this.dict.set(key, [value]);
+    }
+  };
+
+  remove = (key: Key, value: 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);
+  };
+
+  getAll = (key: Key): Value[] => {
+    return this.dict.get(key) ?? [];
+  };
+
+  has = (key: Key): boolean => this.dict.has(key);
+}
+
+export const useMultiValueMap = <Key, Value>() => {
+  const ref = useRef<MultiValueMap<Key, Value> | null>(null);
+  return () => {
+    if (ref.current) return ref.current;
+    ref.current = new MultiValueMap();
+    return ref.current;
+  };
+};

package/src/internal/formContext.ts

@@ -22,10 +22,20 @@ export type FormContextValue = {
    * Whether or not the form is submitting.
    */
   isSubmitting: 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;
 };
 
 export const FormContext = createContext<FormContextValue>({
@@ -33,4 +43,6 @@ export const FormContext = createContext<FormContextValue>({
   clearError: () => {},
   validateField: () => {},
   isSubmitting: false,
+  isValid: true,
+  registerReceiveFocus: () => () => {},
 });

package/src/server.ts

@@ -6,5 +6,21 @@ import { FieldErrors } from "./validation/types";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export const validationError = (errors: FieldErrors) =>
-  json({ fieldErrors: errors }, { status: 422 });
+export const validationError = (
+  errors: FieldErrors,
+  submittedData?: unknown
+) => {
+  if (submittedData) {
+    return json(
+      {
+        fieldErrors: {
+          ...errors,
+          _submittedData: submittedData,
+        },
+      },
+      { status: 422 }
+    );
+  }
+
+  return json({ fieldErrors: errors }, { status: 422 });
+};

package/src/validation/types.ts

@@ -26,3 +26,9 @@ export type Validator<DataType> = {
     field: string
   ) => ValidateFieldResult;
 };
+
+export type ValidatorData<T extends Validator<any>> = T extends Validator<
+  infer U
+>
+  ? U
+  : never;

package/build/test-data/testFormData.d.ts

@@ -1,15 +0,0 @@
-export declare class TestFormData implements FormData {
-    private _params;
-    constructor(body?: string);
-    append(name: string, value: string | Blob, fileName?: string): void;
-    delete(name: string): void;
-    get(name: string): FormDataEntryValue | null;
-    getAll(name: string): FormDataEntryValue[];
-    has(name: string): boolean;
-    set(name: string, value: string | Blob, fileName?: string): void;
-    forEach(callbackfn: (value: FormDataEntryValue, key: string, parent: FormData) => void, thisArg?: any): void;
-    entries(): IterableIterator<[string, FormDataEntryValue]>;
-    keys(): IterableIterator<string>;
-    values(): IterableIterator<FormDataEntryValue>;
-    [Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]>;
-}

package/build/test-data/testFormData.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestFormData = void 0;
-// Copied from remix to use in tests
-// https://github.com/remix-run/remix/blob/a69a631cb5add72d5fb24211ab2a0be367b6f2fd/packages/remix-node/form-data.ts
-class TestFormData {
-    constructor(body) {
-        this._params = new URLSearchParams(body);
-    }
-    append(name, value, fileName) {
-        if (typeof value !== "string") {
-            throw new Error("formData.append can only accept a string");
-        }
-        this._params.append(name, value);
-    }
-    delete(name) {
-        this._params.delete(name);
-    }
-    get(name) {
-        return this._params.get(name);
-    }
-    getAll(name) {
-        return this._params.getAll(name);
-    }
-    has(name) {
-        return this._params.has(name);
-    }
-    set(name, value, fileName) {
-        if (typeof value !== "string") {
-            throw new Error("formData.set can only accept a string");
-        }
-        this._params.set(name, value);
-    }
-    forEach(callbackfn, thisArg) {
-        this._params.forEach(callbackfn, thisArg);
-    }
-    entries() {
-        return this._params.entries();
-    }
-    keys() {
-        return this._params.keys();
-    }
-    values() {
-        return this._params.values();
-    }
-    *[Symbol.iterator]() {
-        yield* this._params;
-    }
-}
-exports.TestFormData = TestFormData;

package/build/validation/validation.test.d.ts

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