react-hook-form 7.76.1 → 7.78.0

package/dist/index.esm.mjs

@@ -52,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);
@@ -96,7 +125,7 @@ var set = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+        if (PROTOTYPE_KEYWORDS.includes(key)) {
             return;
         }
         object[key] = newValue;
@@ -104,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.
@@ -159,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.
@@ -244,6 +248,7 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
+const isEmptyObjectWithCustomPrototype = (object, keys) => keys.length === 0 && !Array.isArray(object) && !isPlainObject(object);
 function deepEqual(object1, object2, visited = new WeakSet()) {
     if (object1 === object2) {
         return true;
@@ -259,6 +264,10 @@ function deepEqual(object1, object2, visited = new WeakSet()) {
     if (keys1.length !== keys2.length) {
         return false;
     }
+    if (isEmptyObjectWithCustomPrototype(object1, keys1) ||
+        isEmptyObjectWithCustomPrototype(object2, keys2)) {
+        return Object.is(object1, object2);
+    }
     if (visited.has(object1) || visited.has(object2)) {
         return true;
     }
@@ -438,13 +447,22 @@ function useController(props) {
             get: () => get(formState.errors, name),
         },
     }), [formState, name]);
-    const onChange = React.useCallback((event) => _registerProps.current.onChange({
-        target: {
-            value: getEventValue(event),
-            name: name,
-        },
-        type: EVENTS.CHANGE,
-    }), [name]);
+    const onChange = React.useCallback((event) => {
+        const value = getEventValue(event);
+        if (!get(control._fields, name)) {
+            _registerProps.current = control.register(name, {
+                ..._props.current.rules,
+                value,
+            });
+        }
+        _registerProps.current.onChange({
+            target: {
+                value: getEventValue(event),
+                name: name,
+            },
+            type: EVENTS.CHANGE,
+        });
+    }, [name, control]);
     const onBlur = React.useCallback(() => _registerProps.current.onBlur({
         target: {
             value: get(control._formValues, name),
@@ -489,7 +507,9 @@ function useController(props) {
         };
         updateMounted(name, true);
         if (_shouldUnregisterField) {
-            const value = cloneObject(get(control._defaultValues, name, get(control._options.defaultValues, name, _props.current.defaultValue)));
+            const value = cloneObject(get(shouldUnregister
+                ? control._defaultValues
+                : control._options.values || control._defaultValues, name, get(control._options.defaultValues, name, _props.current.defaultValue)));
             set(control._defaultValues, name, value);
             if (isUndefined(get(control._formValues, name))) {
                 set(control._formValues, name, value);
@@ -640,8 +660,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,
@@ -806,6 +825,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 = () => {
@@ -1115,8 +1136,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)) {
@@ -1219,7 +1239,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;
@@ -1734,7 +1755,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);
@@ -2073,13 +2096,15 @@ function createFormControl(props = {}) {
                 const { errors } = await _runSchema([name]);
                 _updateIsValidating([name]);
                 _updateIsFieldValueUpdated(fieldValue);
-                if (isFieldValueUpdated) {
-                    const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
-                    const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
-                    error = errorLookupResult.error;
-                    name = errorLookupResult.name;
-                    isValid = isEmptyObject(errors);
+                if (!isFieldValueUpdated) {
+                    !isEmptyObject(fieldState) && _subjects.state.next(fieldState);
+                    return;
                 }
+                const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
+                const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
+                error = errorLookupResult.error;
+                name = errorLookupResult.name;
+                isValid = isEmptyObject(errors);
             }
             else {
                 _updateIsValidating([name], true);
@@ -2481,7 +2506,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;
         }
@@ -2530,11 +2555,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 },
             });
@@ -2574,8 +2607,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,
@@ -2636,6 +2671,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,
@@ -2704,6 +2754,7 @@ function createFormControl(props = {}) {
         getValues,
         reset,
         resetField,
+        resetDefaultValues,
         clearErrors,
         unregister,
         setError,
@@ -2840,6 +2891,10 @@ function useFieldArray(props) {
                     setFields(fieldValues);
                     ids.current = fieldValues.map(generateId);
                 }
+                else if (!fieldArrayName) {
+                    setFields([]);
+                    ids.current = [];
+                }
             }
         },
     }).unsubscribe, [control, name]);