react-hook-form 7.82.0 → 7.83.0

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 }
@@ -676,8 +680,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;
@@ -1924,6 +1926,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 +2176,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
@@ -2723,8 +2733,9 @@ function createFormControl(props = {}) {
             });
         }
         else {
+            _formState.errors = {};
             _subjects.state.next({
-                errors: {},
+                errors: _formState.errors,
             });
         }
     };
@@ -2909,20 +2920,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);
                 }