react-hook-form 7.44.0-next.0 → 7.44.0-next.1

package/dist/index.esm.mjs

@@ -59,8 +59,7 @@ const INPUT_VALIDATION_RULES = {
     pattern: 'pattern',
     required: 'required',
     validate: 'validate',
-};
-const SERVER_ERROR_TYPE = 'root.server';
+};
 
 const HookFormContext = React__default.createContext(null);
 /**
@@ -523,55 +522,69 @@ const POST_REQUEST = 'post';
 function Form(props) {
     const methods = useFormContext();
     const [mounted, setMounted] = React.useState(false);
-    const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
+    const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, fetcher, ...rest } = props;
     const isPostRequest = method === POST_REQUEST;
-    const submit = control.handleSubmit(async (data) => {
-        onSubmit && onSubmit(data);
-        if (action) {
-            const formData = new FormData();
-            let shouldStringifySubmissionData = false;
-            if (headers) {
-                shouldStringifySubmissionData =
-                    headers['Content-Type'].includes('json');
-            }
-            else {
-                control._names.mount.forEach((name) => formData.append(name, get(data, name)));
-            }
-            try {
-                const response = await fetch(action, {
-                    method,
-                    headers: {
-                        ...headers,
-                        ...(encType ? { 'Content-Type': encType } : {}),
-                    },
-                    ...(isPostRequest
-                        ? {
-                            body: shouldStringifySubmissionData
-                                ? JSON.stringify(data)
-                                : formData,
+    const submit = async (event) => {
+        let serverError = false;
+        await control.handleSubmit(async (values) => {
+            onSubmit && onSubmit(values);
+            if (action) {
+                const formData = new FormData();
+                let shouldStringifySubmissionData = false;
+                if (headers) {
+                    shouldStringifySubmissionData =
+                        headers['Content-Type'].includes('json');
+                }
+                else {
+                    control._names.mount.forEach((name) => formData.append(name, get(values, name)));
+                }
+                if (!fetcher) {
+                    try {
+                        const response = await fetch(action, {
+                            method,
+                            headers: {
+                                ...headers,
+                                ...(encType ? { 'Content-Type': encType } : {}),
+                            },
+                            ...(isPostRequest
+                                ? {
+                                    body: shouldStringifySubmissionData
+                                        ? JSON.stringify(values)
+                                        : formData,
+                                }
+                                : {}),
+                        });
+                        if (response &&
+                            (validateStatus
+                                ? !validateStatus(response.status)
+                                : response.status < 200 || response.status >= 300)) {
+                            serverError = true;
+                            onError && onError({ response });
                         }
-                        : {}),
-                });
-                if (validateStatus
-                    ? !validateStatus(response.status)
-                    : response.status < 200 || response.status >= 300) {
-                    control.setError(SERVER_ERROR_TYPE, {
-                        type: String(response.status),
-                    });
-                    onError && onError({ response });
+                        else {
+                            onSuccess && onSuccess({ response });
+                        }
+                    }
+                    catch (error) {
+                        serverError = true;
+                        onError && onError({ error });
+                    }
                 }
                 else {
-                    onSuccess && onSuccess({ response });
+                    await fetcher(action, {
+                        method,
+                        values,
+                        event,
+                    });
                 }
             }
-            catch (error) {
-                control.setError(SERVER_ERROR_TYPE, {
-                    type: 'error',
-                });
-                onError && onError({ error });
-            }
-        }
-    });
+        })(event);
+        serverError &&
+            props.control &&
+            props.control._subjects.state.next({
+                isSubmitSuccessful: false,
+            });
+    };
     React.useEffect(() => {
         setMounted(true);
     }, []);
@@ -688,7 +701,7 @@ var isHTMLElement = (value) => {
         (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
 };
 
-var isMessage = (value) => isString(value) || React__default.isValidElement(value);
+var isMessage = (value) => isString(value);
 
 var isRadioInput = (element) => element.type === 'radio';
 
@@ -1950,9 +1963,6 @@ function createFormControl(props = {}, flushRootRender) {
             name,
             errors: _formState.errors,
             isValid: false,
-            ...(error.type === SERVER_ERROR_TYPE
-                ? { isSubmitSuccessful: false }
-                : {}),
         });
         options && options.shouldFocus && ref && ref.focus && ref.focus();
     };