react-hook-form 7.76.0 → 7.77.0

package/dist/index.esm.mjs

@@ -18,15 +18,9 @@ var getEventValue = (event) => isObject(event) && event.target
         : event.target.value
     : event;
 
-var getFieldArrayParentNames = (names, name) => {
-    const parts = name.split('.');
-    const matches = [];
-    let prefix = parts[0];
-    for (let i = 1; i < parts.length; prefix += '.' + parts[i++]) {
-        !isNaN(+parts[i]) && names.has(prefix) && matches.push(prefix);
-    }
-    return matches;
-};
+var isNameInFieldArray = (names, name) => name
+    .split('.')
+    .some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join('.')));
 
 var isPlainObject = (tempObject) => {
     const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
@@ -58,19 +52,48 @@ function cloneObject(data) {
     return copy;
 }
 
+const EVENTS = {
+    BLUR: 'blur',
+    FOCUS_OUT: 'focusout',
+    CHANGE: 'change',
+    SUBMIT: 'submit',
+    TRIGGER: 'trigger',
+    VALID: 'valid',
+};
+const VALIDATION_MODE = {
+    onBlur: 'onBlur',
+    onChange: 'onChange',
+    onSubmit: 'onSubmit',
+    onTouched: 'onTouched',
+    all: 'all',
+};
+const INPUT_VALIDATION_RULES = {
+    max: 'max',
+    min: 'min',
+    maxLength: 'maxLength',
+    minLength: 'minLength',
+    pattern: 'pattern',
+    required: 'required',
+    validate: 'validate',
+};
+const FORM_ERROR_TYPE = 'form';
+const ROOT_ERROR_TYPE = 'root';
+const PROTOTYPE_KEYWORDS = ['__proto__', 'constructor', 'prototype'];
+
 var isKey = (value) => /^\w*$/.test(value);
 
 var isUndefined = (val) => val === undefined;
 
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
-
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+var stringToPath = (input) => input.split(/[.[\]'"]/g).filter(Boolean);
 
 var get = (object, path, defaultValue) => {
     if (!path || !isObject(object)) {
         return defaultValue;
     }
     const paths = isKey(path) ? [path] : stringToPath(path);
+    if (paths.some((key) => PROTOTYPE_KEYWORDS.includes(key))) {
+        return defaultValue;
+    }
     const result = paths.reduce((result, key) => {
         return isNullOrUndefined(result) ? undefined : result[key];
     }, object);
@@ -102,7 +125,7 @@ var set = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+        if (PROTOTYPE_KEYWORDS.includes(key)) {
             return;
         }
         object[key] = newValue;
@@ -110,33 +133,6 @@ var set = (object, path, value) => {
     }
 };
 
-const EVENTS = {
-    BLUR: 'blur',
-    FOCUS_OUT: 'focusout',
-    CHANGE: 'change',
-    SUBMIT: 'submit',
-    TRIGGER: 'trigger',
-    VALID: 'valid',
-};
-const VALIDATION_MODE = {
-    onBlur: 'onBlur',
-    onChange: 'onChange',
-    onSubmit: 'onSubmit',
-    onTouched: 'onTouched',
-    all: 'all',
-};
-const INPUT_VALIDATION_RULES = {
-    max: 'max',
-    min: 'min',
-    maxLength: 'maxLength',
-    minLength: 'minLength',
-    pattern: 'pattern',
-    required: 'required',
-    validate: 'validate',
-};
-const FORM_ERROR_TYPE = 'form';
-const ROOT_ERROR_TYPE = 'root';
-
 /**
  * Separate context for `control` to prevent unnecessary rerenders.
  * Internal hooks that only need control use this instead of full form context.
@@ -165,7 +161,9 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = isWeb
+    ? React.useLayoutEffect
+    : React.useEffect;
 
 /**
  * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
@@ -402,8 +400,7 @@ function useWatch(props) {
 function useController(props) {
     const formControl = useFormControlContext();
     const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true, } = props;
-    const isArrayField = !!getFieldArrayParentNames(control._names.array, name)
-        .length;
+    const isArrayField = isNameInFieldArray(control._names.array, name);
     const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
         control,
@@ -647,8 +644,7 @@ const useFormContext = () => React.useContext(HookFormContext);
  * }
  * ```
  */
-const FormProvider = (props) => {
-    const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, } = props;
+const FormProvider = ({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, }) => {
     const memoizedValue = React.useMemo(() => ({
         watch,
         getValues,
@@ -813,6 +809,8 @@ var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => va
     }
     : {};
 
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+
 var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
 
 var createSubject = () => {
@@ -1122,8 +1120,7 @@ var hasValidation = (options) => options.mount &&
 var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
     (_names.watchAll ||
         _names.watch.has(name) ||
-        [..._names.watch].some((watchName) => name.startsWith(watchName) &&
-            /^\.\w+/.test(name.slice(watchName.length))));
+        [..._names.watch].some((watchName) => name.startsWith(`${watchName}.`)));
 
 const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
     for (const key of fieldsNames || Object.keys(fields)) {
@@ -1226,7 +1223,8 @@ var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode)
 var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
 
 var updateFieldArrayRootError = (errors, error, name) => {
-    const fieldArrayErrors = convertToArrayPayload(get(errors, name));
+    const existingErrors = get(errors, name);
+    const fieldArrayErrors = Array.isArray(existingErrors) ? existingErrors : [];
     set(fieldArrayErrors, ROOT_ERROR_TYPE, error[name]);
     set(errors, name, fieldArrayErrors);
     return errors;
@@ -1273,8 +1271,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
         isUndefined(inputValue)) ||
         (isHTMLElement(ref) && ref.value === '') ||
         inputValue === '' ||
-        (Array.isArray(inputValue) && !inputValue.length) ||
-        (valueAsNumber && typeof inputValue === 'number' && isNaN(inputValue));
+        (Array.isArray(inputValue) && !inputValue.length);
     const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
     const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
         const message = exceedMax ? maxLengthMessage : minLengthMessage;
@@ -1742,7 +1739,9 @@ function createFormControl(props = {}) {
             for (const name of names) {
                 const error = get(errors, name);
                 error
-                    ? _names.array.has(name) && isObject(error)
+                    ? _names.array.has(name) &&
+                        isObject(error) &&
+                        !Object.keys(error).some((key) => !Number.isNaN(Number(key)))
                         ? updateFieldArrayRootError(_formState.errors, { [name]: error }, name)
                         : set(_formState.errors, name, error)
                     : unset(_formState.errors, name);
@@ -1872,7 +1871,7 @@ function createFormControl(props = {}) {
                     : defaultValue),
     }, isGlobal, defaultValue);
     const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
-    const setFieldValue = (name, value, options = {}) => {
+    const setFieldValue = (name, value, options = {}, skipClone = false) => {
         const field = get(_fields, name);
         let fieldValue = value;
         if (field) {
@@ -1913,7 +1912,7 @@ function createFormControl(props = {}) {
                     if (!fieldReference.ref.type) {
                         _subjects.state.next({
                             name,
-                            values: cloneObject(_formValues),
+                            values: skipClone ? _formValues : cloneObject(_formValues),
                         });
                     }
                 }
@@ -1923,7 +1922,7 @@ function createFormControl(props = {}) {
             updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
         options.shouldValidate && trigger(name);
     };
-    const setFieldValues = (name, value, options) => {
+    const setFieldValues = (name, value, options, skipClone = false) => {
         for (const fieldKey in value) {
             if (!value.hasOwnProperty(fieldKey)) {
                 return;
@@ -1935,14 +1934,14 @@ function createFormControl(props = {}) {
                 isObject(fieldValue) ||
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
-                ? setFieldValues(fieldName, fieldValue, options)
-                : setFieldValue(fieldName, fieldValue, options);
+                ? setFieldValues(fieldName, fieldValue, options, skipClone)
+                : setFieldValue(fieldName, fieldValue, options, skipClone);
         }
     };
-    const setValue = (name, value, options = {}) => {
+    const _setValue = (name, value, options, skipClone) => {
         const field = get(_fields, name);
         const isFieldArray = _names.array.has(name);
-        const cloneValue = cloneObject(value);
+        const cloneValue = skipClone ? value : cloneObject(value);
         const previousValue = get(_formValues, name);
         const isValueUnchanged = deepEqual(previousValue, cloneValue);
         if (!isValueUnchanged) {
@@ -1951,7 +1950,7 @@ function createFormControl(props = {}) {
         if (isFieldArray) {
             _subjects.array.next({
                 name,
-                values: cloneObject(_formValues),
+                values: skipClone ? _formValues : cloneObject(_formValues),
             });
             if ((_proxyFormState.isDirty ||
                 _proxyFormState.dirtyFields ||
@@ -1970,20 +1969,15 @@ function createFormControl(props = {}) {
             const isEmpty = (Array.isArray(cloneValue) && !cloneValue.length) ||
                 isEmptyObject(cloneValue);
             if (!field || field._f || isNullOrUndefined(cloneValue) || isEmpty) {
-                setFieldValue(name, cloneValue, options);
+                setFieldValue(name, cloneValue, options, skipClone);
             }
             else {
-                setFieldValues(name, cloneValue, options);
+                setFieldValues(name, cloneValue, options, skipClone);
             }
         }
         if (!isValueUnchanged) {
             const watched = isWatched(name, _names);
-            const values = cloneObject(_formValues);
-            if (!isFieldArray) {
-                for (const arrayName of getFieldArrayParentNames(_names.array, name)) {
-                    _subjects.array.next({ name: arrayName, values });
-                }
-            }
+            const values = skipClone ? _formValues : cloneObject(_formValues);
             _subjects.state.next({
                 ...(watched && _formState),
                 name: _state.mount || watched ? name : undefined,
@@ -1991,7 +1985,8 @@ function createFormControl(props = {}) {
             });
         }
     };
-    const setValues = (formValues) => {
+    const setValue = (name, value, options = {}) => _setValue(name, value, options, false);
+    const setValues = (formValues, options = {}) => {
         const updatedFormValues = isFunction(formValues)
             ? formValues(_formValues)
             : formValues;
@@ -2001,9 +1996,17 @@ function createFormControl(props = {}) {
                 ...updatedFormValues,
             };
             for (const fieldName of _names.mount) {
-                setValue(fieldName, get(updatedFormValues, fieldName));
+                _setValue(fieldName, get(updatedFormValues, fieldName), options, true);
+            }
+            _subjects.state.next({
+                ..._formState,
+                name: undefined,
+                type: undefined,
+                values: _formValues,
+            });
+            if (options.shouldValidate) {
+                _setValid();
             }
-            _subjects.state.next({ ..._formState, values: _formValues });
         }
     };
     const onChange = async (event) => {
@@ -2373,8 +2376,7 @@ function createFormControl(props = {}) {
                         field._f.mount = false;
                     }
                     (_options.shouldUnregister || options.shouldUnregister) &&
-                        !(getFieldArrayParentNames(_names.array, name).length &&
-                            _state.action) &&
+                        !(isNameInFieldArray(_names.array, name) && _state.action) &&
                         _names.unMount.add(name);
                 }
             },
@@ -2486,7 +2488,7 @@ function createFormControl(props = {}) {
         const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
         const cloneUpdatedValues = cloneObject(updatedValues);
         const isEmptyResetValues = isEmptyObject(formValues);
-        const values = isEmptyResetValues ? _defaultValues : cloneUpdatedValues;
+        const values = cloneUpdatedValues;
         if (!keepStateOptions.keepDefaultValues) {
             _defaultValues = updatedValues;
         }
@@ -2535,11 +2537,19 @@ function createFormControl(props = {}) {
                     _fields = {};
                 }
             }
-            _formValues = _options.shouldUnregister
-                ? keepStateOptions.keepDefaultValues
+            if (_options.shouldUnregister) {
+                _formValues = keepStateOptions.keepDefaultValues
                     ? cloneObject(_defaultValues)
-                    : {}
-                : cloneObject(values);
+                    : {};
+                if (keepStateOptions.keepFieldsRef) {
+                    for (const fieldName of _names.mount) {
+                        set(_formValues, fieldName, get(values, fieldName));
+                    }
+                }
+            }
+            else {
+                _formValues = cloneObject(values);
+            }
             _subjects.array.next({
                 values: { ...values },
             });
@@ -2579,8 +2589,10 @@ function createFormControl(props = {}) {
                 ? false
                 : keepStateOptions.keepDirty
                     ? _formState.isDirty
-                    : !!(keepStateOptions.keepDefaultValues &&
-                        !deepEqual(formValues, _defaultValues)),
+                    : keepStateOptions.keepValues
+                        ? _getDirty()
+                        : !!(keepStateOptions.keepDefaultValues &&
+                            !deepEqual(formValues, _defaultValues)),
             isSubmitted: keepStateOptions.keepIsSubmitted
                 ? _formState.isSubmitted
                 : false,
@@ -2641,6 +2653,21 @@ function createFormControl(props = {}) {
                 isLoading: false,
             });
         });
+    const resetDefaultValues = (values, options = {}) => {
+        _defaultValues = cloneObject(values);
+        if (!options.keepDirty) {
+            const newDirtyFields = getDirtyFields(_defaultValues, _formValues);
+            _formState.dirtyFields = newDirtyFields;
+            _formState.isDirty = !isEmptyObject(newDirtyFields);
+        }
+        if (!options.keepIsValid) {
+            _setValid();
+        }
+        _subjects.state.next({
+            ..._formState,
+            defaultValues: _defaultValues,
+        });
+    };
     const methods = {
         control: {
             register,
@@ -2709,6 +2736,7 @@ function createFormControl(props = {}) {
         getValues,
         reset,
         resetField,
+        resetDefaultValues,
         clearErrors,
         unregister,
         setError,
@@ -2845,6 +2873,10 @@ function useFieldArray(props) {
                     setFields(fieldValues);
                     ids.current = fieldValues.map(generateId);
                 }
+                else if (!fieldArrayName) {
+                    setFields([]);
+                    ids.current = [];
+                }
             }
         },
     }).unsubscribe, [control, name]);