react-hook-form 7.82.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

@@ -2,6 +2,8 @@ import React from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
+var isFileInput = (element) => element.type === 'file';
+
 var isDateObject = (value) => value instanceof Date;
 
 var isNullOrUndefined = (value) => value == null;
@@ -15,7 +17,9 @@ var isObject = (value) => !isNullOrUndefined(value) &&
 var getEventValue = (event) => isObject(event) && event.target
     ? isCheckBoxInput(event.target)
         ? event.target.checked
-        : event.target.value
+        : isFileInput(event.target)
+            ? event.target.files
+            : event.target.value
     : event;
 
 var isNameInFieldArray = (names, name) => name
@@ -167,12 +171,12 @@ const useIsomorphicLayoutEffect = isWeb
     : React.useEffect;
 
 /**
- * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
+ * Subscribes to each form state and isolates re-renders at the custom hook level. It has its own scope for form state subscriptions, so it will not affect other useFormState or useForm instances. Using this hook can reduce the re-render impact on large and complex form applications.
  *
  * @remarks
  * [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
  *
- * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
+ * @param props - Include options to specify fields to subscribe to. {@link UseFormStateReturn}
  *
  * @example
  * ```tsx
@@ -304,7 +308,7 @@ function deepEqual(object1, object2, visited = new WeakMap()) {
 }
 
 /**
- * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+ * Custom hook to subscribe to field changes and isolate re-rendering at the component level.
  *
  * @remarks
  *
@@ -314,7 +318,7 @@ function deepEqual(object1, object2, visited = new WeakMap()) {
  * ```tsx
  * const { control } = useForm();
  * const values = useWatch({
- *   name: "fieldName"
+ *   name: "fieldName",
  *   control,
  * })
  * ```
@@ -508,7 +512,7 @@ function useController(props) {
     }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-        control.register(name, {
+        _registerProps.current = control.register(name, {
             ..._props.current.rules,
             ...(isBoolean(_props.current.disabled)
                 ? { disabled: _props.current.disabled }
@@ -640,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;
@@ -651,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;
                 }
             }
@@ -676,8 +683,6 @@ var updateFieldArrayRootError = (errors, error, name) => {
 
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
-var isFileInput = (element) => element.type === 'file';
-
 var isHTMLElement = (value) => {
     if (!isWeb) {
         return false;
@@ -996,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)) {
@@ -1415,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';
 /**
@@ -1523,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.
  *
@@ -1548,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,
@@ -1572,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,
@@ -1625,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 = [];
@@ -1689,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])) {
@@ -1792,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) => {
@@ -1883,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] ===
@@ -1924,6 +1972,14 @@ const defaultOptions = {
     shouldFocusError: true,
 };
 const FORM_ERROR_TYPE = 'form';
+const updateDirtyFields = (dirtyFields, nextDirtyFields) => {
+    for (const key in dirtyFields) {
+        if (!(key in nextDirtyFields)) {
+            delete dirtyFields[key];
+        }
+    }
+    Object.assign(dirtyFields, nextDirtyFields);
+};
 const DEFAULT_FORM_STATE = {
     submitCount: 0,
     isDirty: false,
@@ -2166,7 +2222,7 @@ function createFormControl(props = {}) {
                 }
                 isPreviousDirty = !!get(_formState.dirtyFields, name);
                 if (isCurrentFieldPristine !== _formState.isDirty) {
-                    _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues, undefined, _fields);
+                    updateDirtyFields(_formState.dirtyFields, getDirtyFields(_defaultValues, _formValues, undefined, _fields));
                 }
                 else {
                     isCurrentFieldPristine
@@ -2427,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;
@@ -2723,8 +2785,9 @@ function createFormControl(props = {}) {
             });
         }
         else {
+            _formState.errors = {};
             _subjects.state.next({
-                errors: {},
+                errors: _formState.errors,
             });
         }
     };
@@ -2909,20 +2972,23 @@ function createFormControl(props = {}) {
                         : fieldRef === field._f.ref) {
                         return;
                     }
+                    const newField = {
+                        ...field._f,
+                    };
+                    if (radioOrCheckbox) {
+                        newField.refs = [
+                            ...refs.filter(live),
+                            fieldRef,
+                            ...(Array.isArray(get(_defaultValues, name)) ? [{}] : []),
+                        ];
+                        newField.ref = { type: fieldRef.type, name };
+                    }
+                    else {
+                        newField.ref = fieldRef;
+                        delete newField.refs;
+                    }
                     set(_fields, name, {
-                        _f: {
-                            ...field._f,
-                            ...(radioOrCheckbox
-                                ? {
-                                    refs: [
-                                        ...refs.filter(live),
-                                        fieldRef,
-                                        ...(Array.isArray(get(_defaultValues, name)) ? [{}] : []),
-                                    ],
-                                    ref: { type: fieldRef.type, name },
-                                }
-                                : { ref: fieldRef }),
-                        },
+                        _f: newField,
                     });
                     updateValidAndValue(name, false, undefined, fieldRef);
                 }
@@ -2958,6 +3024,7 @@ function createFormControl(props = {}) {
         }
     };
     const handleSubmit = (onValid, onInvalid) => async (e) => {
+        let result = undefined;
         let onValidError = undefined;
         if (e) {
             e.preventDefault && e.preventDefault();
@@ -2991,7 +3058,7 @@ function createFormControl(props = {}) {
                 errors: {},
             });
             try {
-                await onValid(fieldValues, e);
+                result = await onValid(fieldValues, e);
             }
             catch (error) {
                 onValidError = error;
@@ -3014,6 +3081,7 @@ function createFormControl(props = {}) {
         if (onValidError) {
             throw onValidError;
         }
+        return result;
     };
     const resetField = (name, options = {}) => {
         if (get(_fields, name)) {
@@ -3053,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);
@@ -3482,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