remix-validated-form 4.0.0 → 4.0.2

package/.turbo/turbo-build.log

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

package/browser/ValidatedForm.d.ts

@@ -47,4 +47,4 @@ export declare type FormProps<DataType> = {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Form as RemixForm, useActionData, useFormAction, useSubmit, useTransition, } from "@remix-run/react";
+import { Form as RemixForm, useActionData, useSubmit, useTransition, } from "@remix-run/react";
 import uniq from "lodash/uniq";
 import React, { useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
@@ -30,19 +30,18 @@ function useFieldErrors(fieldErrorsFromBackend) {
     }, [fieldErrorsFromBackend]);
     return [fieldErrors, setFieldErrors];
 }
-const useIsSubmitting = (action, subaction, fetcher) => {
-    const actionForCurrentPage = useFormAction();
-    const pendingFormSubmit = useTransition().submission;
-    if (fetcher)
-        return fetcher.state === "submitting";
-    if (!pendingFormSubmit)
-        return false;
-    const { formData, action: pendingAction } = pendingFormSubmit;
-    const pendingSubAction = formData.get("subaction");
-    const expectedAction = action !== null && action !== void 0 ? action : actionForCurrentPage;
-    if (subaction)
-        return expectedAction === pendingAction && subaction === pendingSubAction;
-    return expectedAction === pendingAction && !pendingSubAction;
+const useIsSubmitting = (fetcher) => {
+    const [isSubmitStarted, setSubmitStarted] = useState(false);
+    const transition = useTransition();
+    const hasActiveSubmission = fetcher
+        ? fetcher.state === "submitting"
+        : !!transition.submission;
+    const startSubmit = () => setSubmitStarted(true);
+    const endSubmit = () => setSubmitStarted(false);
+    useSubmitComplete(hasActiveSubmission, () => {
+        endSubmit();
+    });
+    return [isSubmitStarted, startSubmit, endSubmit];
 };
 const getDataFromForm = (el) => new FormData(el);
 /**
@@ -110,12 +109,11 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
 /**
  * The primary form component of `remix-validated-form`.
  */
-export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }) {
+export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, ...rest }) {
     var _a;
     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 [isSubmitting, startSubmit, endSubmit] = useIsSubmitting(fetcher);
     const defaultsToUse = useDefaultValues(backendError === null || backendError === void 0 ? void 0 : backendError.repopulateFields, defaultValues);
     const [touchedFields, setTouchedFields] = useState({});
     const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
@@ -123,7 +121,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     const formRef = useRef(null);
     useSubmitComplete(isSubmitting, () => {
         var _a;
-        setIsValidating(false);
+        endSubmit();
         if (!backendError && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
@@ -133,7 +131,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
-        isSubmitting: isValidating || isSubmitting,
+        isSubmitting,
         isValid: Object.keys(fieldErrors).length === 0,
         touchedFields,
         setFieldTouched: (fieldName, touched) => setTouchedFields((prev) => ({
@@ -179,7 +177,6 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         fieldErrors,
         action,
         defaultsToUse,
-        isValidating,
         isSubmitting,
         touchedFields,
         hasBeenSubmitted,
@@ -208,13 +205,13 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             window.removeEventListener("click", handleClick);
         };
     }, []);
-    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, onSubmit: async (e) => {
+    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, method: method, replace: replace, onSubmit: async (e) => {
             e.preventDefault();
             setHasBeenSubmitted(true);
-            setIsValidating(true);
+            startSubmit();
             const result = await validator.validate(getDataFromForm(e.currentTarget));
             if (result.error) {
-                setIsValidating(false);
+                endSubmit();
                 setFieldErrors(result.error.fieldErrors);
                 if (!disableFocusOnError) {
                     focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
@@ -225,7 +222,10 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 if (fetcher)
                     fetcher.submit(clickedButtonRef.current || e.currentTarget);
                 else
-                    submit(clickedButtonRef.current || e.currentTarget);
+                    submit(clickedButtonRef.current || e.currentTarget, {
+                        method,
+                        replace,
+                    });
                 clickedButtonRef.current = null;
             }
         }, onReset: (event) => {

package/build/ValidatedForm.d.ts

@@ -47,4 +47,4 @@ export declare type FormProps<DataType> = {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -55,19 +55,18 @@ function useFieldErrors(fieldErrorsFromBackend) {
     }, [fieldErrorsFromBackend]);
     return [fieldErrors, setFieldErrors];
 }
-const useIsSubmitting = (action, subaction, fetcher) => {
-    const actionForCurrentPage = (0, react_1.useFormAction)();
-    const pendingFormSubmit = (0, react_1.useTransition)().submission;
-    if (fetcher)
-        return fetcher.state === "submitting";
-    if (!pendingFormSubmit)
-        return false;
-    const { formData, action: pendingAction } = pendingFormSubmit;
-    const pendingSubAction = formData.get("subaction");
-    const expectedAction = action !== null && action !== void 0 ? action : actionForCurrentPage;
-    if (subaction)
-        return expectedAction === pendingAction && subaction === pendingSubAction;
-    return expectedAction === pendingAction && !pendingSubAction;
+const useIsSubmitting = (fetcher) => {
+    const [isSubmitStarted, setSubmitStarted] = (0, react_2.useState)(false);
+    const transition = (0, react_1.useTransition)();
+    const hasActiveSubmission = fetcher
+        ? fetcher.state === "submitting"
+        : !!transition.submission;
+    const startSubmit = () => setSubmitStarted(true);
+    const endSubmit = () => setSubmitStarted(false);
+    (0, submissionCallbacks_1.useSubmitComplete)(hasActiveSubmission, () => {
+        endSubmit();
+    });
+    return [isSubmitStarted, startSubmit, endSubmit];
 };
 const getDataFromForm = (el) => new FormData(el);
 /**
@@ -135,12 +134,11 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
 /**
  * The primary form component of `remix-validated-form`.
  */
-function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }) {
+function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, ...rest }) {
     var _a;
     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 [isSubmitting, startSubmit, endSubmit] = useIsSubmitting(fetcher);
     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);
@@ -148,7 +146,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);
+        endSubmit();
         if (!backendError && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
@@ -158,7 +156,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
-        isSubmitting: isValidating || isSubmitting,
+        isSubmitting,
         isValid: Object.keys(fieldErrors).length === 0,
         touchedFields,
         setFieldTouched: (fieldName, touched) => setTouchedFields((prev) => ({
@@ -204,7 +202,6 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         fieldErrors,
         action,
         defaultsToUse,
-        isValidating,
         isSubmitting,
         touchedFields,
         hasBeenSubmitted,
@@ -233,13 +230,13 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             window.removeEventListener("click", handleClick);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, onSubmit: async (e) => {
+    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, method: method, replace: replace, onSubmit: async (e) => {
             e.preventDefault();
             setHasBeenSubmitted(true);
-            setIsValidating(true);
+            startSubmit();
             const result = await validator.validate(getDataFromForm(e.currentTarget));
             if (result.error) {
-                setIsValidating(false);
+                endSubmit();
                 setFieldErrors(result.error.fieldErrors);
                 if (!disableFocusOnError) {
                     focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
@@ -250,7 +247,10 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                 if (fetcher)
                     fetcher.submit(clickedButtonRef.current || e.currentTarget);
                 else
-                    submit(clickedButtonRef.current || e.currentTarget);
+                    submit(clickedButtonRef.current || e.currentTarget, {
+                        method,
+                        replace,
+                    });
                 clickedButtonRef.current = null;
             }
         }, onReset: (event) => {

package/package.json

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

package/src/ValidatedForm.tsx

@@ -6,6 +6,7 @@ import {
   useSubmit,
   useTransition,
 } from "@remix-run/react";
+import { Fetcher } from "@remix-run/react/transition";
 import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
@@ -106,22 +107,22 @@ function useFieldErrors(
 }
 
 const useIsSubmitting = (
-  action?: string,
-  subaction?: string,
-  fetcher?: ReturnType<typeof useFetcher>
-) => {
-  const actionForCurrentPage = useFormAction();
-  const pendingFormSubmit = useTransition().submission;
+  fetcher?: Fetcher
+): [boolean, () => void, () => void] => {
+  const [isSubmitStarted, setSubmitStarted] = useState(false);
+  const transition = useTransition();
+  const hasActiveSubmission = fetcher
+    ? fetcher.state === "submitting"
+    : !!transition.submission;
+
+  const startSubmit = () => setSubmitStarted(true);
+  const endSubmit = () => setSubmitStarted(false);
 
-  if (fetcher) return fetcher.state === "submitting";
-  if (!pendingFormSubmit) return false;
+  useSubmitComplete(hasActiveSubmission, () => {
+    endSubmit();
+  });
 
-  const { formData, action: pendingAction } = pendingFormSubmit;
-  const pendingSubAction = formData.get("subaction");
-  const expectedAction = action ?? actionForCurrentPage;
-  if (subaction)
-    return expectedAction === pendingAction && subaction === pendingSubAction;
-  return expectedAction === pendingAction && !pendingSubAction;
+  return [isSubmitStarted, startSubmit, endSubmit];
 };
 
 const getDataFromForm = (el: HTMLFormElement) => new FormData(el);
@@ -218,14 +219,16 @@ export function ValidatedForm<DataType>({
   subaction,
   resetAfterSubmit,
   disableFocusOnError,
+  method,
+  replace,
   ...rest
 }: FormProps<DataType>) {
   const backendError = useErrorResponseForThisForm(fetcher, subaction);
   const [fieldErrors, setFieldErrors] = useFieldErrors(
     backendError?.fieldErrors
   );
-  const isSubmitting = useIsSubmitting(action, subaction, fetcher);
-  const [isValidating, setIsValidating] = useState(false);
+  const [isSubmitting, startSubmit, endSubmit] = useIsSubmitting(fetcher);
+
   const defaultsToUse = useDefaultValues(
     backendError?.repopulateFields,
     defaultValues
@@ -235,7 +238,7 @@ export function ValidatedForm<DataType>({
   const submit = useSubmit();
   const formRef = useRef<HTMLFormElement>(null);
   useSubmitComplete(isSubmitting, () => {
-    setIsValidating(false);
+    endSubmit();
     if (!backendError && resetAfterSubmit) {
       formRef.current?.reset();
     }
@@ -247,7 +250,7 @@ export function ValidatedForm<DataType>({
       fieldErrors,
       action,
       defaultValues: defaultsToUse,
-      isSubmitting: isValidating || isSubmitting,
+      isSubmitting,
       isValid: Object.keys(fieldErrors).length === 0,
       touchedFields,
       setFieldTouched: (fieldName: string, touched: boolean) =>
@@ -296,7 +299,6 @@ export function ValidatedForm<DataType>({
       fieldErrors,
       action,
       defaultsToUse,
-      isValidating,
       isSubmitting,
       touchedFields,
       hasBeenSubmitted,
@@ -339,15 +341,17 @@ export function ValidatedForm<DataType>({
       ref={mergeRefs([formRef, formRefProp])}
       {...rest}
       action={action}
+      method={method}
+      replace={replace}
       onSubmit={async (e) => {
         e.preventDefault();
         setHasBeenSubmitted(true);
-        setIsValidating(true);
+        startSubmit();
         const result = await validator.validate(
           getDataFromForm(e.currentTarget)
         );
         if (result.error) {
-          setIsValidating(false);
+          endSubmit();
           setFieldErrors(result.error.fieldErrors);
           if (!disableFocusOnError) {
             focusFirstInvalidInput(
@@ -360,7 +364,11 @@ export function ValidatedForm<DataType>({
           onSubmit && onSubmit(result.data, e);
           if (fetcher)
             fetcher.submit(clickedButtonRef.current || e.currentTarget);
-          else submit(clickedButtonRef.current || e.currentTarget);
+          else
+            submit(clickedButtonRef.current || e.currentTarget, {
+              method,
+              replace,
+            });
           clickedButtonRef.current = null;
         }
       }}