react-hook-form 7.83.0 → 7.84.0

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 export * from './controller';
 export { FieldArray } from './fieldArray';
 export * from './form';
-export * from './formStateSubscribe';
+export type { FormStateProps, FormStateSubscribeProps, } from './formStateSubscribe';
+export { FormState, FormStateSubscribe } from './formStateSubscribe';
 export * from './logic';
 export * from './types';
 export * from './useController';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,cAAc,QAAQ,CAAC;AACvB,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,cAAc,QAAQ,CAAC;AACvB,YAAY,EACV,cAAc,EACd,uBAAuB,GACxB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.esm.mjs

@@ -644,9 +644,12 @@ var isWatched = (name, _names, isBlurEvent) => {
 
 const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
     for (const key of fieldsNames || Object.keys(fields)) {
-        const field = get(fields, key);
+        if (key === '_f') {
+            continue;
+        }
+        const field = fieldsNames ? get(fields, key) : fields[key];
         if (field) {
-            const { _f, ...currentField } = field;
+            const { _f } = field;
             if (_f) {
                 if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
                     return true;
@@ -655,13 +658,13 @@ const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
                     return true;
                 }
                 else {
-                    if (iterateFieldsByAction(currentField, action)) {
+                    if (iterateFieldsByAction(field, action)) {
                         break;
                     }
                 }
             }
-            else if (isObject(currentField)) {
-                if (iterateFieldsByAction(currentField, action)) {
+            else if (isObject(field) || Array.isArray(field)) {
+                if (iterateFieldsByAction(field, action)) {
                     break;
                 }
             }
@@ -998,7 +1001,7 @@ var swapArrayAt = (data, indexA, indexB) => {
 };
 
 function baseGet(object, updatePath) {
-    const length = updatePath.slice(0, -1).length;
+    const length = updatePath.length - 1;
     let index = 0;
     while (index < length) {
         if (isNullOrUndefined(object)) {
@@ -1417,6 +1420,26 @@ const flatten = (obj) => {
     return output;
 };
 
+function jsonToFormData(json) {
+    const result = new FormData();
+    const flattenFormValues = flatten(json);
+    for (const key in flattenFormValues) {
+        result.append(key, flattenFormValues[key]);
+    }
+    return result;
+}
+
+function safeJSONStringify(value) {
+    try {
+        return JSON.stringify(value);
+    }
+    catch (_a) {
+        return '';
+    }
+}
+
+function noop() { }
+
 const HookFormContext = React.createContext(null);
 HookFormContext.displayName = 'HookFormContext';
 /**
@@ -1525,6 +1548,9 @@ const FormProvider = ({ children, watch, getValues, getFieldState, setError, cle
 };
 
 const POST_REQUEST = 'post';
+function defaultValidateStatus(status) {
+    return status >= 200 && status < 300;
+}
 /**
  * Form component to manage submission.
  *
@@ -1550,21 +1576,11 @@ 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 submit = React.useCallback(async (event) => {
-        let hasError = false;
-        let type = '';
-        await control.handleSubmit(async (data) => {
-            const formData = new FormData();
-            let formDataJson = '';
-            try {
-                formDataJson = JSON.stringify(data);
-            }
-            catch (_a) { }
-            const flattenFormValues = flatten(data);
-            for (const key in flattenFormValues) {
-                formData.append(key, flattenFormValues[key]);
-            }
+    const { control = methods.control, onSubmit = noop, children, action, method = POST_REQUEST, headers, encType, onError = noop, render, onSuccess = noop, validateStatus = defaultValidateStatus, ...rest } = props;
+    const handleSubmit = React.useMemo(() => {
+        return control.handleSubmit(async (data, event) => {
+            const formData = jsonToFormData(data);
+            const formDataJson = safeJSONStringify(data);
             if (onSubmit) {
                 await onSubmit({
                     data,
@@ -1574,48 +1590,48 @@ function Form(props) {
                     formDataJson,
                 });
             }
-            if (action) {
+            if (isString(action)) {
                 try {
-                    const shouldStringifySubmissionData = [
-                        headers && headers['Content-Type'],
-                        encType,
-                    ].some((value) => value && value.includes('json'));
-                    const response = await fetch(String(action), {
+                    const shouldStringifySubmissionData = (headers &&
+                        headers['Content-Type'] &&
+                        headers['Content-Type'].includes('json')) ||
+                        (encType && encType.includes('json'));
+                    const response = await fetch(action, {
                         method,
                         headers: {
                             ...headers,
-                            ...(encType && encType !== 'multipart/form-data'
-                                ? { 'Content-Type': encType }
-                                : {}),
+                            ...(encType &&
+                                encType !== 'multipart/form-data' && {
+                                'Content-Type': encType,
+                            }),
                         },
                         body: shouldStringifySubmissionData ? formDataJson : formData,
                     });
-                    if (response &&
-                        (validateStatus
-                            ? !validateStatus(response.status)
-                            : response.status < 200 || response.status >= 300)) {
-                        hasError = true;
-                        onError && onError({ response });
-                        type = String(response.status);
+                    if (response && !validateStatus(response.status)) {
+                        onError({ response });
+                        return { type: String(response.status) };
                     }
                     else {
-                        onSuccess && onSuccess({ response });
+                        onSuccess({ response });
                     }
                 }
                 catch (error) {
-                    hasError = true;
-                    onError && onError({ error });
+                    onError({ error });
+                    return { type: '' };
                 }
             }
-        })(event);
-        if (hasError && control) {
-            control._subjects.state.next({
-                isSubmitSuccessful: false,
-            });
-            control.setError('root.server', {
-                type,
-            });
-        }
+            if (isFunction(action)) {
+                try {
+                    await action(formData);
+                }
+                catch (error) {
+                    onError({ error });
+                    return { type: '' };
+                }
+            }
+            // Return nothing when successful.
+            return;
+        });
     }, [
         control,
         onSubmit,
@@ -1627,15 +1643,28 @@ function Form(props) {
         onError,
         onSuccess,
     ]);
+    const submit = React.useCallback(async (event) => {
+        const err = await handleSubmit(event);
+        if (err && control) {
+            control._subjects.state.next({ isSubmitSuccessful: false });
+            control.setError('root.server', err);
+        }
+    }, [handleSubmit, control]);
     React.useEffect(() => {
         setMounted(true);
     }, []);
-    return render ? (React.createElement(React.Fragment, null, render({
-        submit,
-    }))) : (React.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
+    if (render) {
+        return render({ submit });
+    }
+    // React forbids passing `method`/`encType` alongside a function `action`
+    // (a Server-Action-style submission) -- it manages those itself and warns
+    // if they're present, so they're only rendered for string/URL actions.
+    return (React.createElement("form", { noValidate: mounted, action: action, ...(!isFunction(action) && { method, encType }), onSubmit: submit, ...rest }, children));
 }
 
-const FormStateSubscribe = ({ control, disabled, exact, name, render, }) => render(useFormState({ control, name, disabled, exact }));
+const FormState = ({ control, disabled, exact, name, render, }) => render(useFormState({ control, name, disabled, exact }));
+/** @deprecated Use `FormState` instead. Kept as an alias for backward compatibility. */
+const FormStateSubscribe = FormState;
 
 var createSubject = () => {
     let _observers = [];
@@ -1691,6 +1720,24 @@ var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
 
 var live = (ref) => isHTMLElement(ref) && ref.isConnected;
 
+function isDirtyContainer(value) {
+    return Array.isArray(value) || isObject(value);
+}
+function collectDirtyFieldNames(dirtyTree, cachedDirtyFields, prefix = '', names = []) {
+    for (const key in dirtyTree) {
+        const path = prefix ? `${prefix}.${key}` : key;
+        const value = dirtyTree[key];
+        if (isDirtyContainer(value) &&
+            isDirtyContainer(get(cachedDirtyFields, path))) {
+            collectDirtyFieldNames(value, cachedDirtyFields, path, names);
+        }
+        else {
+            names.push(path);
+        }
+    }
+    return names;
+}
+
 var objectHasFunction = (data) => {
     for (const key in data) {
         if (isFunction(data[key])) {
@@ -1794,7 +1841,7 @@ function getFieldValue(_f) {
     if (isCheckBoxInput(ref)) {
         return getCheckboxValue(_f.refs).value;
     }
-    return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
+    return getFieldValueAs(ref.value, _f);
 }
 
 var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
@@ -1885,8 +1932,7 @@ function schemaErrorLookup(errors, _fields, name) {
 
 var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
     updateFormState(formStateData);
-    const { name, ...formState } = formStateData;
-    const keys = Object.keys(formState);
+    const keys = Object.keys(formStateData).filter((key) => key !== 'name');
     return (!keys.length ||
         (isRoot && keys.length >= Object.keys(_proxyFormState).length) ||
         keys.find((key) => _proxyFormState[key] ===
@@ -2437,6 +2483,12 @@ function createFormControl(props = {}) {
             });
     };
     const setFieldValues = (name, value, options, skipClone = false, skipRender = false) => {
+        if (_names.array.has(name)) {
+            _subjects.array.next({
+                name,
+                values: skipClone ? _formValues : cloneObject(_formValues),
+            });
+        }
         for (const fieldKey in value) {
             if (!value.hasOwnProperty(fieldKey)) {
                 return;
@@ -2972,6 +3024,7 @@ function createFormControl(props = {}) {
         }
     };
     const handleSubmit = (onValid, onInvalid) => async (e) => {
+        let result = undefined;
         let onValidError = undefined;
         if (e) {
             e.preventDefault && e.preventDefault();
@@ -3005,7 +3058,7 @@ function createFormControl(props = {}) {
                 errors: {},
             });
             try {
-                await onValid(fieldValues, e);
+                result = await onValid(fieldValues, e);
             }
             catch (error) {
                 onValidError = error;
@@ -3028,6 +3081,7 @@ function createFormControl(props = {}) {
         if (onValidError) {
             throw onValidError;
         }
+        return result;
     };
     const resetField = (name, options = {}) => {
         if (get(_fields, name)) {
@@ -3067,7 +3121,7 @@ function createFormControl(props = {}) {
             if (keepStateOptions.keepDirtyValues) {
                 const fieldsToCheck = new Set([
                     ..._names.mount,
-                    ...Object.keys(getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs)),
+                    ...collectDirtyFieldNames(getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs), _formState.dirtyFields),
                 ]);
                 for (const fieldName of Array.from(fieldsToCheck)) {
                     const isDirty = get(_formState.dirtyFields, fieldName);
@@ -3496,5 +3550,5 @@ function useForm(props = {}) {
  */
 const Watch = (props) => props.render(useWatch({ name: props.names, ...props }));
 
-export { Controller, FieldArray, Form, FormProvider, FormStateSubscribe, Watch, appendErrors, createFormControl, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { Controller, FieldArray, Form, FormProvider, FormState, FormStateSubscribe, Watch, appendErrors, createFormControl, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.mjs.map