react-hook-form 7.60.0 → 7.61.0

package/dist/index.esm.mjs

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import React__default from 'react';
+import React from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -128,7 +127,7 @@ const INPUT_VALIDATION_RULES = {
     validate: 'validate',
 };
 
-const HookFormContext = React__default.createContext(null);
+const HookFormContext = React.createContext(null);
 HookFormContext.displayName = 'HookFormContext';
 /**
  * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
@@ -160,7 +159,7 @@ HookFormContext.displayName = 'HookFormContext';
  * }
  * ```
  */
-const useFormContext = () => React__default.useContext(HookFormContext);
+const useFormContext = () => React.useContext(HookFormContext);
 /**
  * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.
  *
@@ -193,7 +192,7 @@ const useFormContext = () => React__default.useContext(HookFormContext);
  */
 const FormProvider = (props) => {
     const { children, ...data } = props;
-    return (React__default.createElement(HookFormContext.Provider, { value: data }, children));
+    return (React.createElement(HookFormContext.Provider, { value: data }, children));
 };
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
@@ -250,8 +249,8 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
 function useFormState(props) {
     const methods = useFormContext();
     const { control = methods.control, disabled, name, exact } = props || {};
-    const [formState, updateFormState] = React__default.useState(control._formState);
-    const _localProxyFormState = React__default.useRef({
+    const [formState, updateFormState] = React.useState(control._formState);
+    const _localProxyFormState = React.useRef({
         isDirty: false,
         isLoading: false,
         dirtyFields: false,
@@ -273,10 +272,10 @@ function useFormState(props) {
                 });
         },
     }), [name, disabled, exact]);
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
-    return React__default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+    return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -294,6 +293,44 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
     return formValues;
 };
 
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return object1 === object2;
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
+        return true;
+    }
+    _internal_visited.add(object1);
+    _internal_visited.add(object2);
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!keys2.includes(key)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                (isObject(val1) && isObject(val2)) ||
+                (Array.isArray(val1) && Array.isArray(val2))
+                ? !deepEqual(val1, val2, _internal_visited)
+                : val1 !== val2) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
 /**
  * Custom hook to subscribe to field change and isolate re-rendering at the component level.
  *
@@ -312,19 +349,36 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
  */
 function useWatch(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
-    const _defaultValue = React__default.useRef(defaultValue);
-    const [value, updateValue] = React__default.useState(control._getWatch(name, _defaultValue.current));
+    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
+    const _defaultValue = React.useRef(defaultValue);
+    const _compute = React.useRef(compute);
+    const _computeFormValues = React.useRef(undefined);
+    _compute.current = compute;
+    const defaultValueMemo = React.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
+    const [value, updateValue] = React.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
     useIsomorphicLayoutEffect(() => control._subscribe({
         name,
         formState: {
             values: true,
         },
         exact,
-        callback: (formState) => !disabled &&
-            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current)),
-    }), [name, control, disabled, exact]);
-    React__default.useEffect(() => control._removeUnmounted());
+        callback: (formState) => {
+            if (!disabled) {
+                const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
+                if (_compute.current) {
+                    const computedFormValues = _compute.current(formValues);
+                    if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+                        updateValue(computedFormValues);
+                        _computeFormValues.current = computedFormValues;
+                    }
+                }
+                else {
+                    updateValue(formValues);
+                }
+            }
+        },
+    }), [control, disabled, name, exact]);
+    React.useEffect(() => control._removeUnmounted());
     return value;
 }
 
@@ -354,12 +408,13 @@ function useWatch(props) {
  */
 function useController(props) {
     const methods = useFormContext();
-    const { name, disabled, control = methods.control, shouldUnregister } = props;
+    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
+    const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
         control,
         name,
-        defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
+        defaultValue: defaultValueMemo,
         exact: true,
     });
     const formState = useFormState({
@@ -367,13 +422,14 @@ function useController(props) {
         name,
         exact: true,
     });
-    const _props = React__default.useRef(props);
-    const _registerProps = React__default.useRef(control.register(name, {
+    const _props = React.useRef(props);
+    const _registerProps = React.useRef(control.register(name, {
         ...props.rules,
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
-    const fieldState = React__default.useMemo(() => Object.defineProperties({}, {
+    _props.current = props;
+    const fieldState = React.useMemo(() => Object.defineProperties({}, {
         invalid: {
             enumerable: true,
             get: () => !!get(formState.errors, name),
@@ -395,21 +451,21 @@ function useController(props) {
             get: () => get(formState.errors, name),
         },
     }), [formState, name]);
-    const onChange = React__default.useCallback((event) => _registerProps.current.onChange({
+    const onChange = React.useCallback((event) => _registerProps.current.onChange({
         target: {
             value: getEventValue(event),
             name: name,
         },
         type: EVENTS.CHANGE,
     }), [name]);
-    const onBlur = React__default.useCallback(() => _registerProps.current.onBlur({
+    const onBlur = React.useCallback(() => _registerProps.current.onBlur({
         target: {
             value: get(control._formValues, name),
             name: name,
         },
         type: EVENTS.BLUR,
     }), [name, control._formValues]);
-    const ref = React__default.useCallback((elm) => {
+    const ref = React.useCallback((elm) => {
         const field = get(control._fields, name);
         if (field && elm) {
             field._f.ref = {
@@ -420,7 +476,7 @@ function useController(props) {
             };
         }
     }, [control._fields, name]);
-    const field = React__default.useMemo(() => ({
+    const field = React.useMemo(() => ({
         name,
         value,
         ...(isBoolean(disabled) || formState.disabled
@@ -430,7 +486,7 @@ function useController(props) {
         onBlur,
         ref,
     }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         control.register(name, {
             ..._props.current.rules,
@@ -461,13 +517,13 @@ function useController(props) {
                 : updateMounted(name, false);
         };
     }, [name, control, isArrayField, shouldUnregister]);
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         control._setDisabledField({
             disabled,
             name,
         });
     }, [disabled, name, control]);
-    return React__default.useMemo(() => ({
+    return React.useMemo(() => ({
         field,
         formState,
         fieldState,
@@ -559,7 +615,7 @@ const POST_REQUEST = 'post';
  */
 function Form(props) {
     const methods = useFormContext();
-    const [mounted, setMounted] = React__default.useState(false);
+    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 = async (event) => {
         let hasError = false;
@@ -594,7 +650,9 @@ function Form(props) {
                         method,
                         headers: {
                             ...headers,
-                            ...(encType ? { 'Content-Type': encType } : {}),
+                            ...(encType && encType !== 'multipart/form-data'
+                                ? { 'Content-Type': encType }
+                                : {}),
                         },
                         body: shouldStringifySubmissionData ? formDataJson : formData,
                     });
@@ -625,12 +683,12 @@ function Form(props) {
             });
         }
     };
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         setMounted(true);
     }, []);
-    return render ? (React__default.createElement(React__default.Fragment, null, render({
+    return render ? (React.createElement(React.Fragment, null, render({
         submit,
-    }))) : (React__default.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
+    }))) : (React.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
 }
 
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
@@ -673,44 +731,6 @@ var createSubject = () => {
     };
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
-        return true;
-    }
-    _internal_visited.add(object1);
-    _internal_visited.add(object2);
-    for (const key of keys1) {
-        const val1 = object1[key];
-        if (!keys2.includes(key)) {
-            return false;
-        }
-        if (key !== 'ref') {
-            const val2 = object2[key];
-            if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject(val1) && isObject(val2)) ||
-                (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual(val1, val2, _internal_visited)
-                : val1 !== val2) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
 var isFileInput = (element) => element.type === 'file';
@@ -1662,7 +1682,7 @@ function createFormControl(props = {}) {
                 ? setValues(name, cloneValue, options)
                 : setFieldValue(name, cloneValue, options);
         }
-        isWatched(name, _names) && _subjects.state.next({ ..._formState });
+        isWatched(name, _names) && _subjects.state.next({ ..._formState, name });
         _subjects.state.next({
             name: _state.mount ? name : undefined,
             values: cloneObject(_formValues),
@@ -1844,7 +1864,8 @@ function createFormControl(props = {}) {
     };
     const watch = (name, defaultValue) => isFunction(name)
         ? _subjects.state.subscribe({
-            next: (payload) => name(_getWatch(undefined, defaultValue), payload),
+            next: (payload) => 'values' in payload &&
+                name(_getWatch(undefined, defaultValue), payload),
         })
         : _getWatch(name, defaultValue, true);
     const _subscribe = (props) => _subjects.state.subscribe({
@@ -1855,6 +1876,7 @@ function createFormControl(props = {}) {
                     values: { ..._formValues },
                     ..._formState,
                     ...formState,
+                    defaultValues: _defaultValues,
                 });
             }
         },
@@ -2411,28 +2433,26 @@ var updateAt = (fieldValues, index, value) => {
 function useFieldArray(props) {
     const methods = useFormContext();
     const { control = methods.control, name, keyName = 'id', shouldUnregister, rules, } = props;
-    const [fields, setFields] = React__default.useState(control._getFieldArray(name));
-    const ids = React__default.useRef(control._getFieldArray(name).map(generateId));
-    const _fieldIds = React__default.useRef(fields);
-    const _name = React__default.useRef(name);
-    const _actioned = React__default.useRef(false);
-    _name.current = name;
+    const [fields, setFields] = React.useState(control._getFieldArray(name));
+    const ids = React.useRef(control._getFieldArray(name).map(generateId));
+    const _fieldIds = React.useRef(fields);
+    const _actioned = React.useRef(false);
     _fieldIds.current = fields;
     control._names.array.add(name);
-    rules &&
-        control.register(name, rules);
+    React.useMemo(() => rules &&
+        control.register(name, rules), [control, rules, name]);
     useIsomorphicLayoutEffect(() => control._subjects.array.subscribe({
         next: ({ values, name: fieldArrayName, }) => {
-            if (fieldArrayName === _name.current || !fieldArrayName) {
-                const fieldValues = get(values, _name.current);
+            if (fieldArrayName === name || !fieldArrayName) {
+                const fieldValues = get(values, name);
                 if (Array.isArray(fieldValues)) {
                     setFields(fieldValues);
                     ids.current = fieldValues.map(generateId);
                 }
             }
         },
-    }).unsubscribe, [control]);
-    const updateValues = React__default.useCallback((updatedFieldArrayValues) => {
+    }).unsubscribe, [control, name]);
+    const updateValues = React.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         control._setFieldArray(name, updatedFieldArrayValues);
     }, [control, name]);
@@ -2521,7 +2541,7 @@ function useFieldArray(props) {
         setFields([...updatedFieldArrayValues]);
         control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
     };
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         control._state.action = false;
         isWatched(name, control._names) &&
             control._subjects.state.next({
@@ -2581,7 +2601,7 @@ function useFieldArray(props) {
         control._setValid();
         _actioned.current = false;
     }, [fields, name, control]);
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         !get(control._formValues, name) && control._setFieldArray(name);
         return () => {
             const updateMounted = (name, value) => {
@@ -2596,15 +2616,15 @@ function useFieldArray(props) {
         };
     }, [name, control, keyName, shouldUnregister]);
     return {
-        swap: React__default.useCallback(swap, [updateValues, name, control]),
-        move: React__default.useCallback(move, [updateValues, name, control]),
-        prepend: React__default.useCallback(prepend, [updateValues, name, control]),
-        append: React__default.useCallback(append, [updateValues, name, control]),
-        remove: React__default.useCallback(remove, [updateValues, name, control]),
-        insert: React__default.useCallback(insert$1, [updateValues, name, control]),
-        update: React__default.useCallback(update, [updateValues, name, control]),
-        replace: React__default.useCallback(replace, [updateValues, name, control]),
-        fields: React__default.useMemo(() => fields.map((field, index) => ({
+        swap: React.useCallback(swap, [updateValues, name, control]),
+        move: React.useCallback(move, [updateValues, name, control]),
+        prepend: React.useCallback(prepend, [updateValues, name, control]),
+        append: React.useCallback(append, [updateValues, name, control]),
+        remove: React.useCallback(remove, [updateValues, name, control]),
+        insert: React.useCallback(insert$1, [updateValues, name, control]),
+        update: React.useCallback(update, [updateValues, name, control]),
+        replace: React.useCallback(replace, [updateValues, name, control]),
+        fields: React.useMemo(() => fields.map((field, index) => ({
             ...field,
             [keyName]: ids.current[index] || generateId(),
         })), [fields, keyName]),
@@ -2641,9 +2661,9 @@ function useFieldArray(props) {
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React__default.useRef(undefined);
-    const _values = React__default.useRef(undefined);
-    const [formState, updateFormState] = React__default.useState({
+    const _formControl = React.useRef(undefined);
+    const _values = React.useRef(undefined);
+    const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
         isLoading: isFunction(props.defaultValues),
@@ -2695,8 +2715,8 @@ function useForm(props = {}) {
         control._formState.isReady = true;
         return sub;
     }, [control]);
-    React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-    React__default.useEffect(() => {
+    React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+    React.useEffect(() => {
         if (props.mode) {
             control._options.mode = props.mode;
         }
@@ -2704,19 +2724,19 @@ function useForm(props = {}) {
             control._options.reValidateMode = props.reValidateMode;
         }
     }, [control, props.mode, props.reValidateMode]);
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         if (props.errors) {
             control._setErrors(props.errors);
             control._focusError();
         }
     }, [control, props.errors]);
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         props.shouldUnregister &&
             control._subjects.state.next({
                 values: control._getWatch(),
             });
     }, [control, props.shouldUnregister]);
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         if (control._proxyFormState.isDirty) {
             const isDirty = control._getDirty();
             if (isDirty !== formState.isDirty) {
@@ -2726,7 +2746,7 @@ function useForm(props = {}) {
             }
         }
     }, [control, formState.isDirty]);
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         if (props.values && !deepEqual(props.values, _values.current)) {
             control._reset(props.values, {
                 keepFieldsRef: true,
@@ -2739,7 +2759,7 @@ function useForm(props = {}) {
             control._resetDefaultValues();
         }
     }, [control, props.values]);
-    React__default.useEffect(() => {
+    React.useEffect(() => {
         if (!control._state.mount) {
             control._setValid();
             control._state.mount = true;