react-hook-form 7.56.0 → 7.57.0-next.0

package/dist/index.esm.mjs

@@ -1,4 +1,5 @@
-import React, { useRef, useEffect } from 'react';
+import * as React from 'react';
+import React__default, { useEffect } from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -130,7 +131,7 @@ const INPUT_VALIDATION_RULES = {
     validate: 'validate',
 };
 
-const HookFormContext = React.createContext(null);
+const HookFormContext = React__default.createContext(null);
 /**
  * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
  *
@@ -161,7 +162,7 @@ const HookFormContext = React.createContext(null);
  * }
  * ```
  */
-const useFormContext = () => React.useContext(HookFormContext);
+const useFormContext = () => React__default.useContext(HookFormContext);
 /**
  * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.
  *
@@ -194,7 +195,7 @@ const useFormContext = () => React.useContext(HookFormContext);
  */
 const FormProvider = (props) => {
     const { children, ...data } = props;
-    return (React.createElement(HookFormContext.Provider, { value: data }, children));
+    return (React__default.createElement(HookFormContext.Provider, { value: data }, children));
 };
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
@@ -250,12 +251,12 @@ function deepEqual(object1, object2) {
 }
 
 const useDeepEqualEffect = (effect, deps) => {
-    const ref = useRef(deps);
+    const ref = React.useRef(deps);
     if (!deepEqual(deps, ref.current)) {
         ref.current = deps;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(effect, ref.current);
+    React.useEffect(effect, ref.current);
 };
 
 /**
@@ -291,8 +292,8 @@ const useDeepEqualEffect = (effect, deps) => {
 function useFormState(props) {
     const methods = useFormContext();
     const { control = methods.control, disabled, name, exact } = props || {};
-    const [formState, updateFormState] = React.useState(control._formState);
-    const _localProxyFormState = React.useRef({
+    const [formState, updateFormState] = React__default.useState(control._formState);
+    const _localProxyFormState = React__default.useRef({
         isDirty: false,
         isLoading: false,
         dirtyFields: false,
@@ -314,10 +315,10 @@ function useFormState(props) {
                 });
         },
     }), [name, disabled, exact]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
-    return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+    return React__default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 
 var isString = (value) => typeof value === 'string';
@@ -352,18 +353,35 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
  */
 function useWatch(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
-    const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
+    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
+    const _compute = React__default.useRef(compute);
+    const _computeFormValues = React__default.useRef(undefined);
+    _compute.current = compute;
+    const defaultValueMemo = React__default.useMemo(() => control._getWatch(name, defaultValue), [control, name, defaultValue]);
+    const [value, updateValue] = React__default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
     useDeepEqualEffect(() => control._subscribe({
         name: name,
         formState: {
             values: true,
         },
         exact,
-        callback: (formState) => !disabled &&
-            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, defaultValue)),
-    }), [name, defaultValue, disabled, exact]);
-    React.useEffect(() => control._removeUnmounted());
+        callback: (formState) => {
+            if (!disabled) {
+                const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, defaultValue);
+                if (_compute.current) {
+                    const computedFormValues = _compute.current(formValues);
+                    if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+                        updateValue(computedFormValues);
+                        _computeFormValues.current = computedFormValues;
+                    }
+                }
+                else {
+                    updateValue(formValues);
+                }
+            }
+        },
+    }), [defaultValue, disabled, name, exact]);
+    React__default.useEffect(() => control._removeUnmounted());
     return value;
 }
 
@@ -393,12 +411,13 @@ function useWatch(props) {
  */
 function useController(props) {
     const methods = useFormContext();
-    const { name, disabled, control = methods.control, shouldUnregister } = props;
+    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
+    const defaultValueMemo = React__default.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
         control,
         name,
-        defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
+        defaultValue: defaultValueMemo,
         exact: true,
     });
     const formState = useFormState({
@@ -406,13 +425,14 @@ function useController(props) {
         name,
         exact: true,
     });
-    const _props = React.useRef(props);
-    const _registerProps = React.useRef(control.register(name, {
+    const _props = React__default.useRef(props);
+    const _registerProps = React__default.useRef(control.register(name, {
         ...props.rules,
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
-    const fieldState = React.useMemo(() => Object.defineProperties({}, {
+    _props.current = props;
+    const fieldState = React__default.useMemo(() => Object.defineProperties({}, {
         invalid: {
             enumerable: true,
             get: () => !!get(formState.errors, name),
@@ -434,32 +454,27 @@ function useController(props) {
             get: () => get(formState.errors, name),
         },
     }), [formState, name]);
-    const onChange = React.useCallback((event) => _registerProps.current.onChange({
+    const onChange = React__default.useCallback((event) => _registerProps.current.onChange({
         target: {
             value: getEventValue(event),
             name: name,
         },
         type: EVENTS.CHANGE,
     }), [name]);
-    const onBlur = React.useCallback(() => _registerProps.current.onBlur({
+    const onBlur = React__default.useCallback(() => _registerProps.current.onBlur({
         target: {
             value: get(control._formValues, name),
             name: name,
         },
         type: EVENTS.BLUR,
     }), [name, control._formValues]);
-    const ref = React.useCallback((elm) => {
+    const ref = React__default.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(),
-            };
+            field._f.ref = elm;
         }
     }, [control._fields, name]);
-    const field = React.useMemo(() => ({
+    const field = React__default.useMemo(() => ({
         name,
         value,
         ...(isBoolean(disabled) || formState.disabled
@@ -469,7 +484,7 @@ function useController(props) {
         onBlur,
         ref,
     }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         control.register(name, {
             ..._props.current.rules,
@@ -500,13 +515,13 @@ function useController(props) {
                 : updateMounted(name, false);
         };
     }, [name, control, isArrayField, shouldUnregister]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         control._setDisabledField({
             disabled,
             name,
         });
     }, [disabled, name, control]);
-    return React.useMemo(() => ({
+    return React__default.useMemo(() => ({
         field,
         formState,
         fieldState,
@@ -598,7 +613,7 @@ const POST_REQUEST = 'post';
  */
 function Form(props) {
     const methods = useFormContext();
-    const [mounted, setMounted] = React.useState(false);
+    const [mounted, setMounted] = React__default.useState(false);
     const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
     const submit = async (event) => {
         let hasError = false;
@@ -664,12 +679,12 @@ function Form(props) {
             });
         }
     };
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         setMounted(true);
     }, []);
-    return render ? (React.createElement(React.Fragment, null, render({
+    return render ? (React__default.createElement(React__default.Fragment, null, render({
         submit,
-    }))) : (React.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
+    }))) : (React__default.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
 }
 
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
@@ -2386,28 +2401,26 @@ var updateAt = (fieldValues, index, value) => {
 function useFieldArray(props) {
     const methods = useFormContext();
     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);
-    const _name = React.useRef(name);
-    const _actioned = React.useRef(false);
-    _name.current = name;
+    const [fields, setFields] = React__default.useState(control._getFieldArray(name));
+    const ids = React__default.useRef(control._getFieldArray(name).map(generateId));
+    const _fieldIds = React__default.useRef(fields);
+    const _actioned = React__default.useRef(false);
     _fieldIds.current = fields;
     control._names.array.add(name);
-    rules &&
-        control.register(name, rules);
-    React.useEffect(() => control._subjects.array.subscribe({
+    React__default.useMemo(() => rules &&
+        control.register(name, rules), [control, rules, name]);
+    useEffect(() => control._subjects.array.subscribe({
         next: ({ values, name: fieldArrayName, }) => {
-            if (fieldArrayName === _name.current || !fieldArrayName) {
-                const fieldValues = get(values, _name.current);
+            if (fieldArrayName === name || !fieldArrayName) {
+                const fieldValues = get(values, name);
                 if (Array.isArray(fieldValues)) {
                     setFields(fieldValues);
                     ids.current = fieldValues.map(generateId);
                 }
             }
         },
-    }).unsubscribe, [control]);
-    const updateValues = React.useCallback((updatedFieldArrayValues) => {
+    }).unsubscribe, [control, name]);
+    const updateValues = React__default.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         control._setFieldArray(name, updatedFieldArrayValues);
     }, [control, name]);
@@ -2496,7 +2509,7 @@ function useFieldArray(props) {
         setFields([...updatedFieldArrayValues]);
         control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
     };
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         control._state.action = false;
         isWatched(name, control._names) &&
             control._subjects.state.next({
@@ -2556,7 +2569,7 @@ function useFieldArray(props) {
         control._setValid();
         _actioned.current = false;
     }, [fields, name, control]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         !get(control._formValues, name) && control._setFieldArray(name);
         return () => {
             const updateMounted = (name, value) => {
@@ -2571,22 +2584,22 @@ function useFieldArray(props) {
         };
     }, [name, control, keyName, shouldUnregister]);
     return {
-        swap: React.useCallback(swap, [updateValues, name, control]),
-        move: React.useCallback(move, [updateValues, name, control]),
-        prepend: React.useCallback(prepend, [updateValues, name, control]),
-        append: React.useCallback(append, [updateValues, name, control]),
-        remove: React.useCallback(remove, [updateValues, name, control]),
-        insert: React.useCallback(insert$1, [updateValues, name, control]),
-        update: React.useCallback(update, [updateValues, name, control]),
-        replace: React.useCallback(replace, [updateValues, name, control]),
-        fields: React.useMemo(() => fields.map((field, index) => ({
+        swap: React__default.useCallback(swap, [updateValues, name, control]),
+        move: React__default.useCallback(move, [updateValues, name, control]),
+        prepend: React__default.useCallback(prepend, [updateValues, name, control]),
+        append: React__default.useCallback(append, [updateValues, name, control]),
+        remove: React__default.useCallback(remove, [updateValues, name, control]),
+        insert: React__default.useCallback(insert$1, [updateValues, name, control]),
+        update: React__default.useCallback(update, [updateValues, name, control]),
+        replace: React__default.useCallback(replace, [updateValues, name, control]),
+        fields: React__default.useMemo(() => fields.map((field, index) => ({
             ...field,
             [keyName]: ids.current[index] || generateId(),
         })), [fields, keyName]),
     };
 }
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
 /**
  * Custom hook to manage the entire form.
  *
@@ -2617,9 +2630,9 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React.useRef(undefined);
-    const _values = React.useRef(undefined);
-    const [formState, updateFormState] = React.useState({
+    const _formControl = React__default.useRef(undefined);
+    const _values = React__default.useRef(undefined);
+    const [formState, updateFormState] = React__default.useState({
         isDirty: false,
         isValidating: false,
         isLoading: isFunction(props.defaultValues),
@@ -2661,10 +2674,11 @@ function useForm(props = {}) {
             ...data,
             isReady: true,
         }));
+        control._formState.isReady = true;
         return sub;
     }, [control]);
-    React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-    React.useEffect(() => {
+    React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+    React__default.useEffect(() => {
         if (props.mode) {
             control._options.mode = props.mode;
         }
@@ -2675,13 +2689,13 @@ function useForm(props = {}) {
             control._setErrors(props.errors);
         }
     }, [control, props.errors, props.mode, props.reValidateMode]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         props.shouldUnregister &&
             control._subjects.state.next({
                 values: control._getWatch(),
             });
     }, [control, props.shouldUnregister]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         if (control._proxyFormState.isDirty) {
             const isDirty = control._getDirty();
             if (isDirty !== formState.isDirty) {
@@ -2691,7 +2705,7 @@ function useForm(props = {}) {
             }
         }
     }, [control, formState.isDirty]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         if (props.values && !deepEqual(props.values, _values.current)) {
             control._reset(props.values, control._options.resetOptions);
             _values.current = props.values;
@@ -2701,7 +2715,7 @@ function useForm(props = {}) {
             control._resetDefaultValues();
         }
     }, [control, props.values]);
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         if (!control._state.mount) {
             control._setValid();
             control._state.mount = true;