react-hook-form 7.46.0-next.0 → 7.46.0

package/dist/index.esm.mjs

@@ -198,7 +198,9 @@ var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, is
 var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
 
 var shouldSubscribeByName = (name, signalName, exact) => exact && signalName
-    ? name === signalName
+    ? name === signalName ||
+        (Array.isArray(name) &&
+            name.some((currentName) => currentName && exact && currentName === signalName))
     : !name ||
         !signalName ||
         name === signalName ||
@@ -390,7 +392,7 @@ function set(object, path, value) {
  */
 function useController(props) {
     const methods = useFormContext();
-    const { name, control = methods.control, shouldUnregister } = props;
+    const { name, disabled, control = methods.control, shouldUnregister } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
     const value = useWatch({
         control,
@@ -431,11 +433,17 @@ function useController(props) {
                 : updateMounted(name, false);
         };
     }, [name, control, isArrayField, shouldUnregister]);
+    React.useEffect(() => {
+        control._updateDisabledField({
+            disabled,
+            fields: control._fields,
+            name,
+        });
+    }, [disabled, name, control]);
     return {
         field: {
             name,
             value,
-            disabled: formState.disabled,
             onChange: React.useCallback((event) => _registerProps.current.onChange({
                 target: {
                     value: getEventValue(event),
@@ -636,6 +644,28 @@ var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => va
     }
     : {};
 
+const focusFieldBy = (fields, callback, fieldsNames) => {
+    for (const key of fieldsNames || Object.keys(fields)) {
+        const field = get(fields, key);
+        if (field) {
+            const { _f, ...currentField } = field;
+            if (_f && callback(_f.name)) {
+                if (_f.ref.focus) {
+                    _f.ref.focus();
+                    break;
+                }
+                else if (_f.refs && _f.refs[0].focus) {
+                    _f.refs[0].focus();
+                    break;
+                }
+            }
+            else if (isObject(currentField)) {
+                focusFieldBy(currentField, callback);
+            }
+        }
+    }
+};
+
 var generateId = () => {
     const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -663,26 +693,6 @@ var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
         [..._names.watch].some((watchName) => name.startsWith(watchName) &&
             /^\.\w+/.test(name.slice(watchName.length))));
 
-const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
-    for (const key of fieldsNames || Object.keys(fields)) {
-        const field = get(fields, key);
-        if (field) {
-            const { _f, ...currentField } = field;
-            if (_f) {
-                if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
-                    break;
-                }
-                else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
-                    break;
-                }
-            }
-            else if (isObject(currentField)) {
-                iterateFieldsByAction(currentField, action);
-            }
-        }
-    }
-};
-
 var updateFieldArrayRootError = (errors, error, name) => {
     const fieldArrayErrors = compact(get(errors, name));
     set(fieldArrayErrors, 'root', error[name]);
@@ -1226,15 +1236,7 @@ function useFieldArray(props) {
             values: { ...control._formValues },
         });
         control._names.focus &&
-            iterateFieldsByAction(control._fields, (ref, key) => {
-                if (control._names.focus &&
-                    key.startsWith(control._names.focus) &&
-                    ref.focus) {
-                    ref.focus();
-                    return 1;
-                }
-                return;
-            });
+            focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus || ''));
         control._names.focus = '';
         control._updateValid();
         _actioned.current = false;
@@ -1515,7 +1517,6 @@ function createFormControl(props = {}, flushRootRender) {
         touchedFields: {},
         dirtyFields: {},
         errors: {},
-        disabled: false,
     };
     let _fields = {};
     let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values)
@@ -1698,7 +1699,7 @@ function createFormControl(props = {}, flushRootRender) {
     };
     const _executeSchema = async (name) => _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
     const executeSchemaAndUpdateState = async (names) => {
-        const { errors } = await _executeSchema();
+        const { errors } = await _executeSchema(names);
         if (names) {
             for (const name of names) {
                 const error = get(errors, name);
@@ -1924,13 +1925,6 @@ function createFormControl(props = {}, flushRootRender) {
             }
         }
     };
-    const _focusInput = (ref, key) => {
-        if (get(_formState.errors, key) && ref.focus) {
-            ref.focus();
-            return 1;
-        }
-        return;
-    };
     const trigger = async (name, options = {}) => {
         let isValid;
         let validationResult;
@@ -1964,7 +1958,7 @@ function createFormControl(props = {}, flushRootRender) {
         });
         options.shouldFocus &&
             !validationResult &&
-            iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
+            focusFieldBy(_fields, (key) => key && get(_formState.errors, key), name ? fieldNames : _names.mount);
         return validationResult;
     };
     const getValues = (fieldNames) => {
@@ -2033,6 +2027,15 @@ function createFormControl(props = {}, flushRootRender) {
         });
         !options.keepIsValid && _updateValid();
     };
+    const _updateDisabledField = ({ disabled, name, field, fields, }) => {
+        if (isBoolean(disabled)) {
+            const value = disabled
+                ? undefined
+                : get(_formValues, name, getFieldValue(field ? field._f : get(fields, name)._f));
+            set(_formValues, name, value);
+            updateTouchAndDirty(name, value, false, false, true);
+        }
+    };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
         const disabledIsDefined = isBoolean(options.disabled);
@@ -2046,12 +2049,16 @@ function createFormControl(props = {}, flushRootRender) {
             },
         });
         _names.mount.add(name);
-        field
-            ? disabledIsDefined &&
-                set(_formValues, name, options.disabled
-                    ? undefined
-                    : get(_formValues, name, getFieldValue(field._f)))
-            : updateValidAndValue(name, true, options.value);
+        if (field) {
+            _updateDisabledField({
+                field,
+                disabled: options.disabled,
+                name,
+            });
+        }
+        else {
+            updateValidAndValue(name, true, options.value);
+        }
         return {
             ...(disabledIsDefined ? { disabled: options.disabled } : {}),
             ...(_options.progressive
@@ -2113,15 +2120,7 @@ function createFormControl(props = {}, flushRootRender) {
         };
     };
     const _focusError = () => _options.shouldFocusError &&
-        iterateFieldsByAction(_fields, _focusInput, _names.mount);
-    const _disableForm = (disabled) => {
-        if (isBoolean(props.disabled)) {
-            _subjects.state.next({ disabled: props.disabled });
-            iterateFieldsByAction(_fields, (ref) => {
-                ref.disabled = disabled;
-            }, 0, false);
-        }
-    };
+        focusFieldBy(_fields, (key) => key && get(_formState.errors, key), _names.mount);
     const handleSubmit = (onValid, onInvalid) => async (e) => {
         if (e) {
             e.preventDefault && e.preventDefault();
@@ -2187,7 +2186,7 @@ function createFormControl(props = {}, flushRootRender) {
         }
     };
     const _reset = (formValues, keepStateOptions = {}) => {
-        const updatedValues = formValues || _defaultValues;
+        const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
         const cloneUpdatedValues = cloneObject(updatedValues);
         const values = formValues && !isEmptyObject(formValues)
             ? cloneUpdatedValues
@@ -2312,11 +2311,11 @@ function createFormControl(props = {}, flushRootRender) {
             _updateValid,
             _removeUnmounted,
             _updateFieldArray,
+            _updateDisabledField,
             _getFieldArray,
             _reset,
             _resetDefaultValues,
             _updateFormState,
-            _disableForm,
             _subjects,
             _proxyFormState,
             get _fields() {
@@ -2416,7 +2415,6 @@ function useForm(props = {}) {
         dirtyFields: {},
         touchedFields: {},
         errors: {},
-        disabled: false,
         defaultValues: isFunction(props.defaultValues)
             ? undefined
             : props.defaultValues,
@@ -2457,7 +2455,6 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
-    React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }