react-hook-form 7.48.1 → 7.49.0

package/dist/index.esm.mjs

@@ -64,15 +64,15 @@ var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
 
 var isUndefined = (val) => val === undefined;
 
-var get = (obj, path, defaultValue) => {
-    if (!path || !isObject(obj)) {
+var get = (object, path, defaultValue) => {
+    if (!path || !isObject(object)) {
         return defaultValue;
     }
-    const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], obj);
-    return isUndefined(result) || result === obj
-        ? isUndefined(obj[path])
+    const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+    return isUndefined(result) || result === object
+        ? isUndefined(object[path])
             ? defaultValue
-            : obj[path]
+            : object[path]
         : result;
 };
 
@@ -343,7 +343,7 @@ var isKey = (value) => /^\w*$/.test(value);
 
 var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
 
-function set(object, path, value) {
+var set = (object, path, value) => {
     let index = -1;
     const tempPath = isKey(path) ? [path] : stringToPath(path);
     const length = tempPath.length;
@@ -364,7 +364,7 @@ function set(object, path, value) {
         object = object[key];
     }
     return object;
-}
+};
 
 /**
  * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
@@ -407,6 +407,7 @@ function useController(props) {
     const _registerProps = React.useRef(control.register(name, {
         ...props.rules,
         value,
+        disabled: props.disabled,
     }));
     _registerProps.current = control.register(name, props.rules);
     React.useEffect(() => {
@@ -689,6 +690,9 @@ const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
                 else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
                     break;
                 }
+                else {
+                    iterateFieldsByAction(currentField, action);
+                }
             }
             else if (isObject(currentField)) {
                 iterateFieldsByAction(currentField, action);
@@ -959,9 +963,10 @@ var validateField = async (field, formValues, validateAllFieldCriteria, shouldUs
     return error;
 };
 
-function append(data, value) {
-    return [...data, ...convertToArrayPayload(value)];
-}
+var appendAt = (data, value) => [
+    ...data,
+    ...convertToArrayPayload(value),
+];
 
 var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => undefined) : undefined;
 
@@ -984,9 +989,10 @@ var moveArrayAt = (data, from, to) => {
     return data;
 };
 
-function prepend(data, value) {
-    return [...convertToArrayPayload(value), ...convertToArrayPayload(data)];
-}
+var prependAt = (data, value) => [
+    ...convertToArrayPayload(value),
+    ...convertToArrayPayload(data),
+];
 
 function removeAtIndexes(data, indexes) {
     let i = 0;
@@ -1002,7 +1008,7 @@ var removeArrayAt = (data, index) => isUndefined(index)
     : removeAtIndexes(data, convertToArrayPayload(index).sort((a, b) => a - b));
 
 var swapArrayAt = (data, indexA, indexB) => {
-    data[indexA] = [data[indexB], (data[indexB] = data[indexA])][0];
+    [data[indexA], data[indexB]] = [data[indexB], data[indexA]];
 };
 
 function baseGet(object, updatePath) {
@@ -1112,25 +1118,25 @@ function useFieldArray(props) {
         _actioned.current = true;
         control._updateFieldArray(name, updatedFieldArrayValues);
     }, [control, name]);
-    const append$1 = (value, options) => {
+    const append = (value, options) => {
         const appendValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValues = append(control._getFieldArray(name), appendValue);
+        const updatedFieldArrayValues = appendAt(control._getFieldArray(name), appendValue);
         control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
-        ids.current = append(ids.current, appendValue.map(generateId));
+        ids.current = appendAt(ids.current, appendValue.map(generateId));
         updateValues(updatedFieldArrayValues);
         setFields(updatedFieldArrayValues);
-        control._updateFieldArray(name, updatedFieldArrayValues, append, {
+        control._updateFieldArray(name, updatedFieldArrayValues, appendAt, {
             argA: fillEmptyArray(value),
         });
     };
-    const prepend$1 = (value, options) => {
+    const prepend = (value, options) => {
         const prependValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValues = prepend(control._getFieldArray(name), prependValue);
+        const updatedFieldArrayValues = prependAt(control._getFieldArray(name), prependValue);
         control._names.focus = getFocusFieldName(name, 0, options);
-        ids.current = prepend(ids.current, prependValue.map(generateId));
+        ids.current = prependAt(ids.current, prependValue.map(generateId));
         updateValues(updatedFieldArrayValues);
         setFields(updatedFieldArrayValues);
-        control._updateFieldArray(name, updatedFieldArrayValues, prepend, {
+        control._updateFieldArray(name, updatedFieldArrayValues, prependAt, {
             argA: fillEmptyArray(value),
         });
     };
@@ -1261,8 +1267,8 @@ function useFieldArray(props) {
     return {
         swap: React.useCallback(swap, [updateValues, name, control]),
         move: React.useCallback(move, [updateValues, name, control]),
-        prepend: React.useCallback(prepend$1, [updateValues, name, control]),
-        append: React.useCallback(append$1, [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]),
@@ -1274,7 +1280,7 @@ function useFieldArray(props) {
     };
 }
 
-function createSubject() {
+var createSubject = () => {
     let _observers = [];
     const next = (value) => {
         for (const observer of _observers) {
@@ -1300,7 +1306,7 @@ function createSubject() {
         subscribe,
         unsubscribe,
     };
-}
+};
 
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
@@ -1526,7 +1532,7 @@ function createFormControl(props = {}, flushRootRender) {
         isValid: false,
         touchedFields: {},
         dirtyFields: {},
-        errors: {},
+        errors: _options.errors || {},
         disabled: false,
     };
     let _fields = {};
@@ -1626,6 +1632,13 @@ function createFormControl(props = {}, flushRootRender) {
             errors: _formState.errors,
         });
     };
+    const _setErrors = (errors) => {
+        _formState.errors = errors;
+        _subjects.state.next({
+            errors: _formState.errors,
+            isValid: false,
+        });
+    };
     const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
         if (field) {
@@ -2148,10 +2161,15 @@ 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;
+        if (isBoolean(disabled)) {
+            _subjects.state.next({ disabled });
+            iterateFieldsByAction(_fields, (ref, name) => {
+                let requiredDisabledState = disabled;
+                const currentField = get(_fields, name);
+                if (currentField && isBoolean(currentField._f.disabled)) {
+                    requiredDisabledState || (requiredDisabledState = currentField._f.disabled);
+                }
+                ref.disabled = requiredDisabledState;
             }, 0, false);
         }
     };
@@ -2355,6 +2373,7 @@ function createFormControl(props = {}, flushRootRender) {
             _disableForm,
             _subjects,
             _proxyFormState,
+            _setErrors,
             get _fields() {
                 return _fields;
             },
@@ -2451,7 +2470,7 @@ function useForm(props = {}) {
         submitCount: 0,
         dirtyFields: {},
         touchedFields: {},
-        errors: {},
+        errors: props.errors || {},
         disabled: false,
         defaultValues: isFunction(props.defaultValues)
             ? undefined
@@ -2474,15 +2493,31 @@ function useForm(props = {}) {
         },
     });
     React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+    React.useEffect(() => {
+        if (control._proxyFormState.isDirty) {
+            const isDirty = control._getDirty();
+            if (isDirty !== formState.isDirty) {
+                control._subjects.state.next({
+                    isDirty,
+                });
+            }
+        }
+    }, [control, formState.isDirty]);
     React.useEffect(() => {
         if (props.values && !deepEqual(props.values, _values.current)) {
             control._reset(props.values, control._options.resetOptions);
             _values.current = props.values;
+            updateFormState((state) => ({ ...state }));
         }
         else {
             control._resetDefaultValues();
         }
     }, [props.values, control]);
+    React.useEffect(() => {
+        if (props.errors) {
+            control._setErrors(props.errors);
+        }
+    }, [props.errors, control]);
     React.useEffect(() => {
         if (!control._state.mount) {
             control._updateValid();