react-hook-form 7.22.5 → 7.23.0-next.0

package/dist/index.esm.mjs

@@ -143,11 +143,12 @@ function useFormState(props) {
     });
     const _name = React.useRef(name);
     _name.current = name;
+    const callback = React.useCallback((value) => shouldSubscribeByName(_name.current, value.name, exact) &&
+        shouldRenderFormState(value, _localProxyFormState.current) &&
+        updateFormState(Object.assign(Object.assign({}, control._formState), value)), [control, exact]);
     useSubscribe({
         disabled,
-        callback: (value) => shouldSubscribeByName(_name.current, value.name, exact) &&
-            shouldRenderFormState(value, _localProxyFormState.current) &&
-            updateFormState(Object.assign(Object.assign({}, control._formState), value)),
+        callback,
         subject: control._subjects.state,
     });
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
@@ -185,21 +186,22 @@ 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))
+                ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
+                ? [...fieldValues]
+                : isUndefined(fieldValues)
+                    ? defaultValue
+                    : fieldValues);
+        }
+    }, [control, exact, defaultValue]);
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback: (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))
-                    ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
-                    ? [...fieldValues]
-                    : isUndefined(fieldValues)
-                        ? defaultValue
-                        : fieldValues);
-            }
-        },
+        callback,
     });
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? control._getWatch(name)
@@ -352,11 +354,6 @@ var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
         [..._names.watch].some((watchName) => name.startsWith(watchName) &&
             /^\.\w+/.test(name.slice(watchName.length))));
 
-var mapCurrentIds = (values, _fieldIds, keyName) => values.map((value, index) => {
-    const output = _fieldIds.current[index];
-    return Object.assign(Object.assign({}, value), (output ? { [keyName]: output[keyName] } : {}));
-});
-
 var generateId = () => {
     const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -365,7 +362,9 @@ var generateId = () => {
     });
 };
 
-var mapIds = (values = [], keyName) => values.map((value) => (Object.assign(Object.assign({}, (value[keyName] ? {} : { [keyName]: generateId() })), value)));
+var mapCurrentIds = (values, keyName, _fieldIds) => values.map((value, index) => (Object.assign(Object.assign({}, value), { [keyName]: _fieldIds && _fieldIds.current[index]
+        ? _fieldIds.current[index][keyName]
+        : value[keyName] || generateId() })));
 
 function append(data, value) {
     return [...convertToArrayPayload(data), ...convertToArrayPayload(value)];
@@ -448,31 +447,36 @@ var updateAt = (fieldValues, index, value) => {
 const useFieldArray = (props) => {
     const methods = useFormContext();
     const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
-    const [fields, setFields] = React.useState(mapIds(control._getFieldArray(name), keyName));
+    const _shouldKeepKeyName = React.useRef(get(control._getFieldArray(name)[0], keyName));
+    const [fields, setFields] = React.useState(mapCurrentIds(control._getFieldArray(name), keyName));
     const _fieldIds = React.useRef(fields);
     const _name = React.useRef(name);
     const _actioned = React.useRef(false);
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
+    const callback = React.useCallback(({ values, name: fieldArrayName }) => {
+        if (fieldArrayName === _name.current || !fieldArrayName) {
+            setFields(mapCurrentIds(get(values, _name.current, []), keyName));
+        }
+    }, [keyName]);
     useSubscribe({
-        callback: ({ values, name: fieldArrayName }) => {
-            if (fieldArrayName === _name.current || !fieldArrayName) {
-                setFields(mapIds(get(values, _name.current), keyName));
-            }
-        },
+        callback,
         subject: control._subjects.array,
     });
-    const updateValues = React.useCallback((updatedFieldArrayValuesWithKey) => {
-        const updatedFieldArrayValues = omitKeys(updatedFieldArrayValuesWithKey, keyName);
+    const updateValues = React.useCallback((updatedFieldArrayValuesWithKey, hasKey = _shouldKeepKeyName.current) => {
+        const updatedFieldArrayValues = hasKey
+            ? updatedFieldArrayValuesWithKey
+            : omitKeys(updatedFieldArrayValuesWithKey, keyName);
+        hasKey && (_shouldKeepKeyName.current = true);
         _actioned.current = true;
         set(control._formValues, name, updatedFieldArrayValues);
         return updatedFieldArrayValues;
     }, [control, name, keyName]);
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(appendValue, keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds), mapCurrentIds(appendValue, keyName));
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey, appendValue[0][keyName]);
         control._names.focus = getFocusFieldName(name, fieldArrayValues.length - 1, options);
         setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, append, {
@@ -480,8 +484,9 @@ const useFieldArray = (props) => {
         }, fieldArrayValues);
     };
     const prepend$1 = (value, options) => {
-        const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(convertToArrayPayload(cloneObject(value)), keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        const prependValue = convertToArrayPayload(cloneObject(value));
+        const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds), mapCurrentIds(prependValue, keyName));
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey, prependValue[0][keyName]);
         control._names.focus = getFocusFieldName(name, 0, options);
         setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, prepend, {
@@ -489,7 +494,7 @@ const useFieldArray = (props) => {
         }, fieldArrayValues);
     };
     const remove = (index) => {
-        const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index);
+        const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds), index);
         const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
         setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, removeArrayAt, {
@@ -497,8 +502,9 @@ const useFieldArray = (props) => {
         }, fieldArrayValues);
     };
     const insert$1 = (index, value, options) => {
-        const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index, mapIds(convertToArrayPayload(cloneObject(value)), keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        const insertValue = convertToArrayPayload(cloneObject(value));
+        const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds), index, mapCurrentIds(insertValue, keyName));
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey, insertValue[0][keyName]);
         control._names.focus = getFocusFieldName(name, index, options);
         setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, insert, {
@@ -507,7 +513,7 @@ const useFieldArray = (props) => {
         }, fieldArrayValues);
     };
     const swap = (indexA, indexB) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
+        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds);
         swapArrayAt(updatedFieldArrayValuesWithKey, indexA, indexB);
         const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
         setFields(updatedFieldArrayValuesWithKey);
@@ -517,7 +523,7 @@ const useFieldArray = (props) => {
         }, fieldArrayValues, false);
     };
     const move = (from, to) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
+        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds);
         moveArrayAt(updatedFieldArrayValuesWithKey, from, to);
         const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
         setFields(updatedFieldArrayValuesWithKey);
@@ -527,10 +533,10 @@ const useFieldArray = (props) => {
         }, fieldArrayValues, false);
     };
     const update = (index, value) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
+        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), keyName, _fieldIds);
         const updatedFieldArrayValues = updateAt(updatedFieldArrayValuesWithKey, index, value);
-        _fieldIds.current = mapIds(updatedFieldArrayValues, keyName);
-        const fieldArrayValues = updateValues(_fieldIds.current);
+        _fieldIds.current = mapCurrentIds(updatedFieldArrayValues, keyName);
+        const fieldArrayValues = updateValues(_fieldIds.current, get(value, keyName));
         setFields(_fieldIds.current);
         control._updateFieldArray(name, updateAt, {
             argA: index,
@@ -538,8 +544,9 @@ const useFieldArray = (props) => {
         }, fieldArrayValues, true, false, false);
     };
     const replace = (value) => {
-        const updatedFieldArrayValuesWithKey = mapIds(convertToArrayPayload(value), keyName);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        const updateValue = convertToArrayPayload(value);
+        const updatedFieldArrayValuesWithKey = mapCurrentIds(updateValue, keyName);
+        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey, updateValue[0][keyName]);
         setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, fieldArrayValues, true, false, false);
     };
@@ -1178,8 +1185,8 @@ function createFormControl(props = {}) {
                 shouldSkipSetValueAs
                 ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
                 : setFieldValue(name, defaultValue);
+            _stateFlags.mount && _updateValid();
         }
-        _stateFlags.mount && _updateValid();
     };
     const updateTouchAndDirty = (name, fieldValue, isCurrentTouched, shouldRender = true) => {
         let isFieldDirty = false;
@@ -1843,14 +1850,15 @@ function useForm(props = {}) {
         _formControl.current = Object.assign(Object.assign({}, createFormControl(props)), { formState });
     }
     const control = _formControl.current.control;
+    const callback = React.useCallback((value) => {
+        if (shouldRenderFormState(value, control._proxyFormState, true)) {
+            control._formState = Object.assign(Object.assign({}, control._formState), value);
+            updateFormState(Object.assign({}, control._formState));
+        }
+    }, [control]);
     useSubscribe({
         subject: control._subjects.state,
-        callback: (value) => {
-            if (shouldRenderFormState(value, control._proxyFormState, true)) {
-                control._formState = Object.assign(Object.assign({}, control._formState), value);
-                updateFormState(Object.assign({}, control._formState));
-            }
-        },
+        callback,
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {