react-hook-form 7.36.0 → 7.37.0-next.0

package/dist/index.esm.mjs

@@ -127,14 +127,16 @@ const FormProvider = (props) => {
     return (React.createElement(HookFormContext.Provider, { value: data }, children));
 };
 
-var getProxyFormState = (formState, _proxyFormState, localProxyFormState, isRoot = true) => {
-    const result = {};
+var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
+    const result = {
+        defaultValues: control._defaultValues,
+    };
     for (const key in formState) {
         Object.defineProperty(result, key, {
             get: () => {
                 const _key = key;
-                if (_proxyFormState[_key] !== VALIDATION_MODE.all) {
-                    _proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
+                if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {
+                    control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
                 }
                 localProxyFormState && (localProxyFormState[_key] = true);
                 return formState[_key];
@@ -169,16 +171,13 @@ function useSubscribe(props) {
     const _props = React.useRef(props);
     _props.current = props;
     React.useEffect(() => {
-        const tearDown = (subscription) => {
-            if (subscription) {
-                subscription.unsubscribe();
-            }
-        };
         const subscription = !props.disabled &&
             _props.current.subject.subscribe({
                 next: _props.current.callback,
             });
-        return () => tearDown(subscription);
+        return () => {
+            subscription && subscription.unsubscribe();
+        };
     }, [props.disabled]);
 }
 
@@ -216,6 +215,7 @@ function useFormState(props) {
     const methods = useFormContext();
     const { control = methods.control, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React.useState(control._formState);
+    const _mounted = React.useRef(true);
     const _localProxyFormState = React.useRef({
         isDirty: false,
         dirtyFields: false,
@@ -225,18 +225,16 @@ function useFormState(props) {
         errors: false,
     });
     const _name = React.useRef(name);
-    const _mounted = React.useRef(true);
     _name.current = name;
-    const callback = React.useCallback((value) => _mounted.current &&
-        shouldSubscribeByName(_name.current, value.name, exact) &&
-        shouldRenderFormState(value, _localProxyFormState.current) &&
-        updateFormState({
-            ...control._formState,
-            ...value,
-        }), [control, exact]);
     useSubscribe({
         disabled,
-        callback,
+        callback: React.useCallback((value) => _mounted.current &&
+            shouldSubscribeByName(_name.current, value.name, exact) &&
+            shouldRenderFormState(value, _localProxyFormState.current) &&
+            updateFormState({
+                ...control._formState,
+                ...value,
+            }), [control, exact]),
         subject: control._subjects.state,
     });
     React.useEffect(() => {
@@ -245,7 +243,7 @@ function useFormState(props) {
             _mounted.current = false;
         };
     }, []);
-    return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
+    return getProxyFormState(formState, control, _localProxyFormState.current, false);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -296,30 +294,27 @@ function useWatch(props) {
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
     const _name = React.useRef(name);
     _name.current = name;
-    const callback = React.useCallback((formState) => {
-        if (shouldSubscribeByName(_name.current, formState.name, exact)) {
-            const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-            updateValue(isUndefined(_name.current) ||
-                (isObject(fieldValues) && !objectHasFunction(fieldValues))
-                ? { ...fieldValues }
-                : Array.isArray(fieldValues)
-                    ? [...fieldValues]
-                    : isUndefined(fieldValues)
-                        ? defaultValue
-                        : fieldValues);
-        }
-    }, [control, exact, defaultValue]);
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback,
+        callback: React.useCallback((formState) => {
+            if (shouldSubscribeByName(_name.current, formState.name, exact)) {
+                const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
+                updateValue(isUndefined(_name.current) ||
+                    (isObject(fieldValues) && !objectHasFunction(fieldValues))
+                    ? { ...fieldValues }
+                    : Array.isArray(fieldValues)
+                        ? [...fieldValues]
+                        : isUndefined(fieldValues)
+                            ? defaultValue
+                            : fieldValues);
+            }
+        }, [control, exact, defaultValue]),
     });
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? control._getWatch(name)
         : defaultValue);
-    React.useEffect(() => {
-        control._removeUnmounted();
-    });
+    React.useEffect(() => control._removeUnmounted());
     return value;
 }
 
@@ -386,24 +381,20 @@ function useController(props) {
         field: {
             name,
             value,
-            onChange: React.useCallback((event) => {
-                _registerProps.current.onChange({
-                    target: {
-                        value: getEventValue(event),
-                        name: name,
-                    },
-                    type: EVENTS.CHANGE,
-                });
-            }, [name]),
-            onBlur: React.useCallback(() => {
-                _registerProps.current.onBlur({
-                    target: {
-                        value: get(control._formValues, name),
-                        name: name,
-                    },
-                    type: EVENTS.BLUR,
-                });
-            }, [name, control]),
+            onChange: React.useCallback((event) => _registerProps.current.onChange({
+                target: {
+                    value: getEventValue(event),
+                    name: name,
+                },
+                type: EVENTS.CHANGE,
+            }), [name]),
+            onBlur: React.useCallback(() => _registerProps.current.onBlur({
+                target: {
+                    value: get(control._formValues, name),
+                    name: name,
+                },
+                type: EVENTS.BLUR,
+            }), [name, control]),
             ref: React.useCallback((elm) => {
                 const field = get(control._fields, name);
                 if (elm && field && elm.focus) {
@@ -525,10 +516,11 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
         if (field) {
             const { _f, ...currentField } = field;
             if (_f && callback(_f.name)) {
-                if (_f.ref.focus && isUndefined(_f.ref.focus())) {
+                if (_f.ref.focus) {
+                    _f.ref.focus();
                     break;
                 }
-                else if (_f.refs) {
+                else if (_f.refs && _f.refs[0].focus) {
                     _f.refs[0].focus();
                     break;
                 }
@@ -801,6 +793,11 @@ function append(data, value) {
     return [...data, ...convertToArrayPayload(value)];
 }
 
+function isPlainObject(tempObject) {
+    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+}
+
 var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
     typeof document !== 'undefined';
@@ -817,12 +814,13 @@ function cloneObject(data) {
     else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
         (isArray || isObject(data))) {
         copy = isArray ? [] : {};
-        for (const key in data) {
-            if (isFunction(data[key])) {
-                copy = data;
-                break;
+        if (!Array.isArray(data) && !isPlainObject(data)) {
+            copy = data;
+        }
+        else {
+            for (const key in data) {
+                copy[key] = cloneObject(data[key]);
             }
-            copy[key] = cloneObject(data[key]);
         }
     }
     else {
@@ -1383,15 +1381,15 @@ function createFormControl(props = {}) {
         ...props,
     };
     let _formState = {
+        submitCount: 0,
         isDirty: false,
         isValidating: false,
-        dirtyFields: {},
         isSubmitted: false,
-        submitCount: 0,
-        touchedFields: {},
         isSubmitting: false,
         isSubmitSuccessful: false,
         isValid: false,
+        touchedFields: {},
+        dirtyFields: {},
         errors: {},
     };
     let _fields = {};
@@ -1662,7 +1660,7 @@ function createFormControl(props = {}) {
                 else if (fieldReference.refs) {
                     if (isCheckBoxInput(fieldReference.ref)) {
                         fieldReference.refs.length > 1
-                            ? fieldReference.refs.forEach((checkboxRef) => !checkboxRef.disabled &&
+                            ? fieldReference.refs.forEach((checkboxRef) => (!checkboxRef.defaultChecked || !checkboxRef.disabled) &&
                                 (checkboxRef.checked = Array.isArray(fieldValue)
                                     ? !!fieldValue.find((data) => data === checkboxRef.value)
                                     : fieldValue === checkboxRef.value))
@@ -2130,9 +2128,7 @@ function createFormControl(props = {}) {
             touchedFields: keepStateOptions.keepTouched
                 ? _formState.touchedFields
                 : {},
-            errors: keepStateOptions.keepErrors
-                ? _formState.errors
-                : {},
+            errors: keepStateOptions.keepErrors ? _formState.errors : {},
             isSubmitting: false,
             isSubmitSuccessful: false,
         });
@@ -2141,10 +2137,17 @@ function createFormControl(props = {}) {
         ? formValues(_formValues)
         : formValues, keepStateOptions);
     const setFocus = (name, options = {}) => {
-        const field = get(_fields, name)._f;
-        const fieldRef = field.refs ? field.refs[0] : field.ref;
-        fieldRef.focus();
-        options.shouldSelect && fieldRef.select();
+        const field = get(_fields, name);
+        const fieldReference = field && field._f;
+        if (fieldReference) {
+            const fieldRef = fieldReference.refs
+                ? fieldReference.refs[0]
+                : fieldReference.ref;
+            if (fieldRef.focus) {
+                fieldRef.focus();
+                options.shouldSelect && fieldRef.select();
+            }
+        }
     };
     return {
         control: {
@@ -2247,37 +2250,35 @@ function useForm(props = {}) {
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
-        dirtyFields: {},
         isSubmitted: false,
-        submitCount: 0,
-        touchedFields: {},
         isSubmitting: false,
         isSubmitSuccessful: false,
         isValid: false,
+        submitCount: 0,
+        dirtyFields: {},
+        touchedFields: {},
         errors: {},
+        defaultValues: props.defaultValues,
     });
-    if (_formControl.current) {
-        _formControl.current.control._options = props;
-    }
-    else {
+    if (!_formControl.current) {
         _formControl.current = {
             ...createFormControl(props),
             formState,
         };
     }
     const control = _formControl.current.control;
-    const callback = React.useCallback((value) => {
-        if (shouldRenderFormState(value, control._proxyFormState, true)) {
-            control._formState = {
-                ...control._formState,
-                ...value,
-            };
-            updateFormState({ ...control._formState });
-        }
-    }, [control]);
+    control._options = props;
     useSubscribe({
         subject: control._subjects.state,
-        callback,
+        callback: React.useCallback((value) => {
+            if (shouldRenderFormState(value, control._proxyFormState, true)) {
+                control._formState = {
+                    ...control._formState,
+                    ...value,
+                };
+                updateFormState({ ...control._formState });
+            }
+        }, [control]),
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {
@@ -2290,7 +2291,7 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
-    _formControl.current.formState = getProxyFormState(formState, control._proxyFormState);
+    _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }