react-hook-form 7.53.1 → 7.54.0

package/dist/index.esm.mjs

@@ -34,13 +34,14 @@ var isWeb = typeof window !== 'undefined' &&
 function cloneObject(data) {
     let copy;
     const isArray = Array.isArray(data);
+    const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
     if (data instanceof Date) {
         copy = new Date(data);
     }
     else if (data instanceof Set) {
         copy = new Set(data);
     }
-    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
+    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
         (isArray || isObject(data))) {
         copy = isArray ? [] : {};
         if (!isArray && !isPlainObject(data)) {
@@ -99,7 +100,7 @@ var set = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__') {
+        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
             return;
         }
         object[key] = newValue;
@@ -318,7 +319,7 @@ function useFormState(props) {
             _mounted.current = false;
         };
     }, [control]);
-    return getProxyFormState(formState, control, _localProxyFormState.current, false);
+    return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -414,6 +415,67 @@ function useController(props) {
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
+    const fieldState = React.useMemo(() => Object.defineProperties({}, {
+        invalid: {
+            enumerable: true,
+            get: () => !!get(formState.errors, name),
+        },
+        isDirty: {
+            enumerable: true,
+            get: () => !!get(formState.dirtyFields, name),
+        },
+        isTouched: {
+            enumerable: true,
+            get: () => !!get(formState.touchedFields, name),
+        },
+        isValidating: {
+            enumerable: true,
+            get: () => !!get(formState.validatingFields, name),
+        },
+        error: {
+            enumerable: true,
+            get: () => get(formState.errors, name),
+        },
+    }), [formState, name]);
+    const field = React.useMemo(() => ({
+        name,
+        value,
+        ...(isBoolean(disabled) || formState.disabled
+            ? { disabled: formState.disabled || disabled }
+            : {}),
+        onChange: (event) => _registerProps.current.onChange({
+            target: {
+                value: getEventValue(event),
+                name: name,
+            },
+            type: EVENTS.CHANGE,
+        }),
+        onBlur: () => _registerProps.current.onBlur({
+            target: {
+                value: get(control._formValues, name),
+                name: name,
+            },
+            type: EVENTS.BLUR,
+        }),
+        ref: (elm) => {
+            const field = get(control._fields, name);
+            if (field && elm) {
+                field._f.ref = {
+                    focus: () => elm.focus(),
+                    select: () => elm.select(),
+                    setCustomValidity: (message) => elm.setCustomValidity(message),
+                    reportValidity: () => elm.reportValidity(),
+                };
+            }
+        },
+    }), [
+        name,
+        control._formValues,
+        disabled,
+        formState.disabled,
+        value,
+        control._fields,
+    ]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         const updateMounted = (name, value) => {
@@ -439,7 +501,7 @@ function useController(props) {
         };
     }, [name, control, isArrayField, shouldUnregister]);
     React.useEffect(() => {
-        if (get(control._fields, name)) {
+        if (isBoolean(disabled) && get(control._fields, name)) {
             control._updateDisabledField({
                 disabled,
                 fields: control._fields,
@@ -448,63 +510,11 @@ function useController(props) {
             });
         }
     }, [disabled, name, control]);
-    return {
-        field: {
-            name,
-            value,
-            ...(isBoolean(disabled) || formState.disabled
-                ? { disabled: formState.disabled || disabled }
-                : {}),
-            onChange: React.useCallback((event) => _registerProps.current.onChange({
-                target: {
-                    value: getEventValue(event),
-                    name: name,
-                },
-                type: EVENTS.CHANGE,
-            }), [name]),
-            onBlur: React.useCallback(() => _registerProps.current.onBlur({
-                target: {
-                    value: get(control._formValues, name),
-                    name: name,
-                },
-                type: EVENTS.BLUR,
-            }), [name, control]),
-            ref: React.useCallback((elm) => {
-                const field = get(control._fields, name);
-                if (field && elm) {
-                    field._f.ref = {
-                        focus: () => elm.focus(),
-                        select: () => elm.select(),
-                        setCustomValidity: (message) => elm.setCustomValidity(message),
-                        reportValidity: () => elm.reportValidity(),
-                    };
-                }
-            }, [control._fields, name]),
-        },
+    return React.useMemo(() => ({
+        field,
         formState,
-        fieldState: Object.defineProperties({}, {
-            invalid: {
-                enumerable: true,
-                get: () => !!get(formState.errors, name),
-            },
-            isDirty: {
-                enumerable: true,
-                get: () => !!get(formState.dirtyFields, name),
-            },
-            isTouched: {
-                enumerable: true,
-                get: () => !!get(formState.touchedFields, name),
-            },
-            isValidating: {
-                enumerable: true,
-                get: () => !!get(formState.validatingFields, name),
-            },
-            error: {
-                enumerable: true,
-                get: () => get(formState.errors, name),
-            },
-        }),
-    };
+        fieldState,
+    }), [field, formState, fieldState]);
 }
 
 /**
@@ -554,7 +564,7 @@ const Controller = (props) => props.render(useController(props));
 const flatten = (obj) => {
     const output = {};
     for (const key of Object.keys(obj)) {
-        if (isObjectType(obj[key])) {
+        if (isObjectType(obj[key]) && obj[key] !== null) {
             const nested = flatten(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 output[`${key}.${nestedKey}`] = nested[nestedKey];
@@ -1121,7 +1131,7 @@ var updateAt = (fieldValues, index, value) => {
  */
 function useFieldArray(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
+    const { control = methods.control, name, keyName = 'id', shouldUnregister, rules, } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
@@ -1130,8 +1140,8 @@ function useFieldArray(props) {
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
-    props.rules &&
-        control.register(name, props.rules);
+    rules &&
+        control.register(name, rules);
     useSubscribe({
         next: ({ values, name: fieldArrayName, }) => {
             if (fieldArrayName === _name.current || !fieldArrayName) {
@@ -1175,6 +1185,8 @@ function useFieldArray(props) {
         ids.current = removeArrayAt(ids.current, index);
         updateValues(updatedFieldArrayValues);
         setFields(updatedFieldArrayValues);
+        !Array.isArray(get(control._fields, name)) &&
+            set(control._fields, name, undefined);
         control._updateFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
             argA: index,
         });
@@ -1489,7 +1501,8 @@ var getRuleValue = (rule) => isUndefined(rule)
             : rule;
 
 const ASYNC_FUNCTION = 'AsyncFunction';
-var hasPromiseValidation = (fieldReference) => (!fieldReference || !fieldReference.validate) &&
+var hasPromiseValidation = (fieldReference) => !!fieldReference &&
+    !!fieldReference.validate &&
     !!((isFunction(fieldReference.validate) &&
         fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
         (isObject(fieldReference.validate) &&
@@ -1618,7 +1631,7 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
-        if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
+        if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -1630,7 +1643,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (!props.disabled &&
+        if (!_options.disabled &&
             (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
@@ -1646,7 +1659,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method && !props.disabled) {
+        if (args && method && !_options.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
                 const fieldValues = method(get(_fields, name), args.argA, args.argB);
@@ -1710,7 +1723,7 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!props.disabled) {
+        if (!_options.disabled) {
             const disabledField = !!(get(_fields, name) &&
                 get(_fields, name)._f &&
                 get(_fields, name)._f.disabled);
@@ -1751,9 +1764,9 @@ function createFormControl(props = {}) {
         const shouldUpdateValid = _proxyFormState.isValid &&
             isBoolean(isValid) &&
             _formState.isValid !== isValid;
-        if (props.delayError && error) {
+        if (_options.delayError && error) {
             delayErrorCallback = debounce(() => updateErrors(name, error));
-            delayErrorCallback(props.delayError);
+            delayErrorCallback(_options.delayError);
         }
         else {
             clearTimeout(timer);
@@ -1846,7 +1859,7 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !props.disabled &&
+    const _getDirty = (name, data) => !_options.disabled &&
         (name && data && set(_formValues, name, data),
             !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -1858,7 +1871,7 @@ function createFormControl(props = {}) {
                     ? { [names]: defaultValue }
                     : defaultValue),
     }, isGlobal, defaultValue);
-    const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
+    const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
     const setFieldValue = (name, value, options = {}) => {
         const field = get(_fields, name);
         let fieldValue = value;
@@ -1991,7 +2004,7 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 if (_proxyFormState.isValid) {
-                    if (props.mode === 'onBlur') {
+                    if (_options.mode === 'onBlur') {
                         if (isBlurEvent) {
                             _updateValid();
                         }
@@ -2156,13 +2169,15 @@ function createFormControl(props = {}) {
                 : isUndefined(value)
                     ? getFieldValue(field ? field._f : get(fields, name)._f)
                     : value;
-            set(_formValues, name, inputValue);
+            if (disabled || (!disabled && !isUndefined(inputValue))) {
+                set(_formValues, name, inputValue);
+            }
             updateTouchAndDirty(name, inputValue, false, false, true);
         }
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
         set(_fields, name, {
             ...(field || {}),
             _f: {
@@ -2178,7 +2193,7 @@ function createFormControl(props = {}) {
                 field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : props.disabled,
+                    : _options.disabled,
                 name,
                 value: options.value,
             });
@@ -2188,7 +2203,7 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || props.disabled }
+                ? { disabled: options.disabled || _options.disabled }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -2272,6 +2287,12 @@ function createFormControl(props = {}) {
             e.preventDefault && e.preventDefault();
             e.persist && e.persist();
         }
+        if (_options.disabled) {
+            if (onInvalid) {
+                await onInvalid({ ..._formState.errors }, e);
+            }
+            return;
+        }
         let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
@@ -2379,7 +2400,7 @@ function createFormControl(props = {}) {
                 }
                 _fields = {};
             }
-            _formValues = props.shouldUnregister
+            _formValues = _options.shouldUnregister
                 ? keepStateOptions.keepDefaultValues
                     ? cloneObject(_defaultValues)
                     : {}
@@ -2403,7 +2424,7 @@ function createFormControl(props = {}) {
             !_proxyFormState.isValid ||
                 !!keepStateOptions.keepIsValid ||
                 !!keepStateOptions.keepDirtyValues;
-        _state.watch = !!props.shouldUnregister;
+        _state.watch = !!_options.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
@@ -2450,7 +2471,9 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect && fieldRef.select();
+                options.shouldSelect &&
+                    isFunction(fieldRef.select) &&
+                    fieldRef.select();
             }
         }
     };
@@ -2651,13 +2674,10 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
-    React.useEffect(() => {
-        if (_formControl.current) {
-            _formControl.current.watch = _formControl.current.watch.bind({});
-        }
-    }, [formState]);
-    _formControl.current.formState = getProxyFormState(formState, control);
-    return _formControl.current;
+    return React.useMemo(() => ({
+        ..._formControl.current,
+        formState: getProxyFormState(formState, control),
+    }), [formState, control]);
 }
 
 export { Controller, Form, FormProvider, appendErrors, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };