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

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export * from './useFormContext';
 export * from './useFormState';
 export * from './useWatch';
 export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

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,19 +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]
-                    : fieldValues);
-            }
-        },
+        callback,
     });
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? control._getWatch(name)
@@ -235,14 +239,11 @@ function useController(props) {
         updateMounted(name, true);
         return () => {
             const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-            if (isArrayField
+            isArrayField
                 ? _shouldUnregisterField && !control._stateFlags.action
-                : _shouldUnregisterField) {
-                control.unregister(name, { keepDefaultValue: true });
-            }
-            else {
-                updateMounted(name, false);
-            }
+                : _shouldUnregisterField
+                    ? control.unregister(name)
+                    : updateMounted(name, false);
         };
     }, [name, control, isArrayField, shouldUnregister]);
     return {
@@ -353,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) => {
@@ -366,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)];
@@ -449,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, {
@@ -481,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, {
@@ -490,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, {
@@ -498,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, {
@@ -508,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);
@@ -518,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);
@@ -528,21 +533,22 @@ 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,
             argB: value,
-        }, fieldArrayValues, true, false);
+        }, 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);
+        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, fieldArrayValues, true, false, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
@@ -1139,13 +1145,13 @@ function createFormControl(props = {}) {
         }
         return isValid;
     };
-    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true) => {
+    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true, shouldSetError = true) => {
         _stateFlags.action = true;
         if (shouldSetFields && get(_fields, name)) {
             const fieldValues = method(get(_fields, name), args.argA, args.argB);
             shouldSetValues && set(_fields, name, fieldValues);
         }
-        if (Array.isArray(get(_formState.errors, name))) {
+        if (shouldSetError && Array.isArray(get(_formState.errors, name))) {
             const errors = method(get(_formState.errors, name), args.argA, args.argB);
             shouldSetValues && set(_formState.errors, name, errors);
             unsetEmptyArray(_formState.errors, name);
@@ -1179,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;
@@ -1321,7 +1327,8 @@ function createFormControl(props = {}) {
         if (field) {
             const fieldReference = field._f;
             if (fieldReference) {
-                set(_formValues, name, getFieldValueAs(value, fieldReference));
+                !fieldReference.disabled &&
+                    set(_formValues, name, getFieldValueAs(value, fieldReference));
                 fieldValue =
                     isWeb && isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
                         ? ''
@@ -1584,7 +1591,7 @@ function createFormControl(props = {}) {
                         _f: radioOrCheckbox
                             ? Object.assign(Object.assign({}, field._f), { refs: [...compact(field._f.refs).filter(live), fieldRef], ref: { type: fieldRef.type, name } }) : Object.assign(Object.assign({}, field._f), { ref: fieldRef }),
                     });
-                    !options.disabled && updateValidAndValue(name, false, fieldRef);
+                    updateValidAndValue(name, false, fieldRef);
                 }
                 else {
                     field = get(_fields, name, {});
@@ -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) {