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

package/browser/ValidatedForm.js

@@ -115,6 +115,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     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 [isValidating, setIsValidating] = useState(false);
     const defaultsToUse = useDefaultValues(backendError === null || backendError === void 0 ? void 0 : backendError.repopulateFields, defaultValues);
     const [touchedFields, setTouchedFields] = useState({});
     const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
@@ -122,6 +123,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     const formRef = useRef(null);
     useSubmitComplete(isSubmitting, () => {
         var _a;
+        setIsValidating(false);
         if (!backendError && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
@@ -131,7 +133,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
-        isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        isSubmitting: isValidating || isSubmitting,
         isValid: Object.keys(fieldErrors).length === 0,
         touchedFields,
         setFieldTouched: (fieldName, touched) => setTouchedFields((prev) => ({
@@ -177,6 +179,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         fieldErrors,
         action,
         defaultsToUse,
+        isValidating,
         isSubmitting,
         touchedFields,
         hasBeenSubmitted,
@@ -208,8 +211,10 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, onSubmit: async (e) => {
             e.preventDefault();
             setHasBeenSubmitted(true);
+            setIsValidating(true);
             const result = await validator.validate(getDataFromForm(e.currentTarget));
             if (result.error) {
+                setIsValidating(false);
                 setFieldErrors(result.error.fieldErrors);
                 if (!disableFocusOnError) {
                     focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);

package/browser/hooks.d.ts

@@ -1,5 +1,4 @@
 import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputProps";
-import { ValidationState } from "./types";
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -13,14 +12,6 @@ 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.
      */

package/browser/hooks.js

@@ -1,6 +1,6 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
 import { createGetInputProps, } from "./internal/getInputProps";
 const useInternalFormContext = (hookName) => {
@@ -16,37 +16,24 @@ export const useField = (name, options) => {
     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,
+            error: fieldErrors[name],
             clearError: () => {
                 clearError(name);
             },
             validate: () => {
-                setValidating(true);
-                validateField(name).then((error) => setValidating(false));
+                validateField(name);
             },
             defaultValue: defaultValues
                 ? get(defaultValues, toPath(name), undefined)
                 : undefined,
             touched: isTouched,
             setTouched: (touched) => setFieldTouched(name, touched),
-            validationState: getValidationState(),
         };
         const getInputProps = createGetInputProps({
             ...helpers,
@@ -65,7 +52,6 @@ export const useField = (name, options) => {
         isTouched,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
-        isValidating,
         clearError,
         validateField,
         setFieldTouched,

package/browser/server.d.ts

@@ -4,7 +4,7 @@ import { ValidatorError } from "./validation/types";
  * 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`
+ * You can also provide a second argument to `validationError`
  * to specify how to repopulate the form when JS is disabled.
  *
  * @example

package/browser/server.js

@@ -4,7 +4,7 @@ import { json } from "@remix-run/server-runtime";
  * 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`
+ * You can also provide a second argument to `validationError`
  * to specify how to repopulate the form when JS is disabled.
  *
  * @example

package/build/ValidatedForm.js

@@ -140,6 +140,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
     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 [isValidating, setIsValidating] = (0, react_2.useState)(false);
     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);
@@ -147,6 +148,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
     const formRef = (0, react_2.useRef)(null);
     (0, submissionCallbacks_1.useSubmitComplete)(isSubmitting, () => {
         var _a;
+        setIsValidating(false);
         if (!backendError && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
@@ -156,7 +158,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
-        isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        isSubmitting: isValidating || isSubmitting,
         isValid: Object.keys(fieldErrors).length === 0,
         touchedFields,
         setFieldTouched: (fieldName, touched) => setTouchedFields((prev) => ({
@@ -202,6 +204,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         fieldErrors,
         action,
         defaultsToUse,
+        isValidating,
         isSubmitting,
         touchedFields,
         hasBeenSubmitted,
@@ -233,8 +236,10 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
     return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, onSubmit: async (e) => {
             e.preventDefault();
             setHasBeenSubmitted(true);
+            setIsValidating(true);
             const result = await validator.validate(getDataFromForm(e.currentTarget));
             if (result.error) {
+                setIsValidating(false);
                 setFieldErrors(result.error.fieldErrors);
                 if (!disableFocusOnError) {
                     focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);

package/build/hooks.d.ts

@@ -1,5 +1,4 @@
 import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputProps";
-import { ValidationState } from "./types";
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -13,14 +12,6 @@ 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.
      */

package/build/hooks.js

@@ -22,37 +22,24 @@ const useField = (name, options) => {
     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,
+            error: fieldErrors[name],
             clearError: () => {
                 clearError(name);
             },
             validate: () => {
-                setValidating(true);
-                validateField(name).then((error) => setValidating(false));
+                validateField(name);
             },
             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,
@@ -71,7 +58,6 @@ const useField = (name, options) => {
         isTouched,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
-        isValidating,
         clearError,
         validateField,
         setFieldTouched,

package/build/server.d.ts

@@ -4,7 +4,7 @@ import { ValidatorError } from "./validation/types";
  * 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`
+ * You can also provide a second argument to `validationError`
  * to specify how to repopulate the form when JS is disabled.
  *
  * @example

package/build/server.js

@@ -7,7 +7,7 @@ const server_runtime_1 = require("@remix-run/server-runtime");
  * 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`
+ * You can also provide a second argument to `validationError`
  * to specify how to repopulate the form when JS is disabled.
  *
  * @example

package/package.json

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

package/src/ValidatedForm.tsx

@@ -225,6 +225,7 @@ export function ValidatedForm<DataType>({
     backendError?.fieldErrors
   );
   const isSubmitting = useIsSubmitting(action, subaction, fetcher);
+  const [isValidating, setIsValidating] = useState(false);
   const defaultsToUse = useDefaultValues(
     backendError?.repopulateFields,
     defaultValues
@@ -234,6 +235,7 @@ export function ValidatedForm<DataType>({
   const submit = useSubmit();
   const formRef = useRef<HTMLFormElement>(null);
   useSubmitComplete(isSubmitting, () => {
+    setIsValidating(false);
     if (!backendError && resetAfterSubmit) {
       formRef.current?.reset();
     }
@@ -245,7 +247,7 @@ export function ValidatedForm<DataType>({
       fieldErrors,
       action,
       defaultValues: defaultsToUse,
-      isSubmitting: isSubmitting ?? false,
+      isSubmitting: isValidating || isSubmitting,
       isValid: Object.keys(fieldErrors).length === 0,
       touchedFields,
       setFieldTouched: (fieldName: string, touched: boolean) =>
@@ -294,6 +296,7 @@ export function ValidatedForm<DataType>({
       fieldErrors,
       action,
       defaultsToUse,
+      isValidating,
       isSubmitting,
       touchedFields,
       hasBeenSubmitted,
@@ -339,10 +342,12 @@ export function ValidatedForm<DataType>({
       onSubmit={async (e) => {
         e.preventDefault();
         setHasBeenSubmitted(true);
+        setIsValidating(true);
         const result = await validator.validate(
           getDataFromForm(e.currentTarget)
         );
         if (result.error) {
+          setIsValidating(false);
           setFieldErrors(result.error.fieldErrors);
           if (!disableFocusOnError) {
             focusFirstInvalidInput(

package/src/hooks.ts

@@ -1,13 +1,12 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
 import {
   createGetInputProps,
   GetInputProps,
   ValidationBehaviorOptions,
 } from "./internal/getInputProps";
-import { ValidationState } from "./types";
 
 const useInternalFormContext = (hookName: string) => {
   const context = useContext(FormContext);
@@ -31,14 +30,6 @@ export 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.
    */
@@ -88,7 +79,6 @@ export const useField = (
 
   const isTouched = !!touchedFields[name];
   const { handleReceiveFocus } = options ?? {};
-  const [isValidating, setValidating] = useState(false);
 
   useEffect(() => {
     if (handleReceiveFocus)
@@ -96,28 +86,19 @@ export const useField = (
   }, [handleReceiveFocus, name, registerReceiveFocus]);
 
   const field = useMemo<FieldProps>(() => {
-    const error = fieldErrors[name];
-    const getValidationState = (): ValidationState => {
-      if (isValidating) return "validating";
-      if (error) return "invalid";
-      if (!isTouched && !hasBeenSubmitted) return "idle";
-      return "valid";
-    };
     const helpers = {
-      error,
+      error: fieldErrors[name],
       clearError: () => {
         clearError(name);
       },
       validate: () => {
-        setValidating(true);
-        validateField(name).then((error) => setValidating(false));
+        validateField(name);
       },
       defaultValue: defaultValues
         ? get(defaultValues, toPath(name), undefined)
         : undefined,
       touched: isTouched,
       setTouched: (touched: boolean) => setFieldTouched(name, touched),
-      validationState: getValidationState(),
     };
     const getInputProps = createGetInputProps({
       ...helpers,
@@ -136,7 +117,6 @@ export const useField = (
     isTouched,
     hasBeenSubmitted,
     options?.validationBehavior,
-    isValidating,
     clearError,
     validateField,
     setFieldTouched,

package/src/server.ts

@@ -9,7 +9,7 @@ import {
  * 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`
+ * You can also provide a second argument to `validationError`
  * to specify how to repopulate the form when JS is disabled.
  *
  * @example

package/src/types.ts

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