react-hook-form 7.25.0 → 7.26.0

package/dist/index.esm.mjs

@@ -40,6 +40,7 @@ var get = (obj, path, defaultValue) => {
 
 const EVENTS = {
     BLUR: 'blur',
+    FOCUS_OUT: 'focusout',
     CHANGE: 'change',
 };
 const VALIDATION_MODE = {
@@ -66,26 +67,81 @@ var omit = (source, key) => {
 };
 
 const HookFormContext = React.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}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @returns return all useForm methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const methods = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   return (
+ *     <FormProvider {...methods} >
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <NestedInput />
+ *         <input type="submit" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ *  function NestedInput() {
+ *   const { register } = useFormContext(); // retrieve all hook methods
+ *   return <input {...register("test")} />;
+ * }
+ * ```
+ */
 const useFormContext = () => React.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}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @param props - all useFrom methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const methods = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   return (
+ *     <FormProvider {...methods} >
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <NestedInput />
+ *         <input type="submit" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ *  function NestedInput() {
+ *   const { register } = useFormContext(); // retrieve all hook methods
+ *   return <input {...register("test")} />;
+ * }
+ * ```
+ */
 const FormProvider = (props) => (React.createElement(HookFormContext.Provider, { value: omit(props, 'children') }, props.children));
 
 var getProxyFormState = (formState, _proxyFormState, localProxyFormState, isRoot = true) => {
-    function createGetter(prop) {
-        return () => {
-            if (prop in formState) {
-                if (_proxyFormState[prop] !== VALIDATION_MODE.all) {
-                    _proxyFormState[prop] = !isRoot || VALIDATION_MODE.all;
-                }
-                localProxyFormState && (localProxyFormState[prop] = true);
-                return formState[prop];
-            }
-            return undefined;
-        };
-    }
     const result = {};
     for (const key in formState) {
         Object.defineProperty(result, key, {
-            get: createGetter(key),
+            get: () => {
+                const _key = key;
+                if (_proxyFormState[_key] !== VALIDATION_MODE.all) {
+                    _proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
+                }
+                localProxyFormState && (localProxyFormState[_key] = true);
+                return formState[_key];
+            },
         });
     }
     return result;
@@ -129,6 +185,36 @@ function useSubscribe(props) {
     }, [props.disabled]);
 }
 
+/**
+ * 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.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
+ *
+ * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { register, handleSubmit, control } = useForm({
+ *     defaultValues: {
+ *     firstName: "firstName"
+ *   }});
+ *   const { dirtyFields } = useFormState({
+ *     control
+ *   });
+ *   const onSubmit = (data) => console.log(data);
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input {...register("firstName")} placeholder="First Name" />
+ *       {dirtyFields.firstName && <p>Field is dirty.</p>}
+ *       <input type="submit" />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
 function useFormState(props) {
     const methods = useFormContext();
     const { control = methods.control, disabled, name, exact } = props || {};
@@ -186,6 +272,22 @@ var objectHasFunction = (data) => {
     return false;
 };
 
+/**
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/api/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+ *
+ * @example
+ * ```tsx
+ * const { watch } = useForm();
+ * const values = useWatch({
+ *   name: "fieldName"
+ *   control,
+ * })
+ * ```
+ */
 function useWatch(props) {
     const methods = useFormContext();
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
@@ -217,6 +319,30 @@ function useWatch(props) {
     return value;
 }
 
+/**
+ * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
+ *
+ * @param props - the path name to the form field value, and validation rules.
+ *
+ * @returns field properties, field and form state. {@link UseControllerReturn}
+ *
+ * @example
+ * ```tsx
+ * function Input(props) {
+ *   const { field, fieldState, formState } = useController(props);
+ *   return (
+ *     <div>
+ *       <input {...field} placeholder={props.name} />
+ *       <p>{fieldState.isTouched && "Touched"}</p>
+ *       <p>{formState.isSubmitted ? "submitted" : ""}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
 function useController(props) {
     const methods = useFormContext();
     const { name, control = methods.control, shouldUnregister } = props;
@@ -280,13 +406,55 @@ function useController(props) {
                         reportValidity: () => elm.reportValidity(),
                     };
                 }
-            }, [name, control]),
+            }, [name, control._fields]),
         },
         formState,
         fieldState: control.getFieldState(name, formState),
     };
 }
 
+/**
+ * Component based on `useController` hook to work with controlled component.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
+ *
+ * @param props - the path name to the form field value, and validation rules.
+ *
+ * @returns provide field handler functions, field and form state.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { control } = useForm<FormValues>({
+ *     defaultValues: {
+ *       test: ""
+ *     }
+ *   });
+ *
+ *   return (
+ *     <form>
+ *       <Controller
+ *         control={control}
+ *         name="test"
+ *         render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
+ *           <>
+ *             <input
+ *               onChange={onChange} // send value to hook form
+ *               onBlur={onBlur} // notify when input is touched
+ *               value={value} // return updated value
+ *               ref={ref} // set ref for focus management
+ *             />
+ *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
+ *             <p>{fieldState.isTouched ? "touched" : ""}</p>
+ *           </>
+ *         )}
+ *       />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
 const Controller = (props) => props.render(useController(props));
 
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
@@ -436,7 +604,44 @@ var updateAt = (fieldValues, index, value) => {
     return fieldValues;
 };
 
-const useFieldArray = (props) => {
+/**
+ * A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/usefieldarray) • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn)
+ *
+ * @param props - useFieldArray props
+ *
+ * @returns methods - functions to manipulate with the Field Arrays (dynamic inputs) {@link UseFieldArrayReturn}
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { register, control, handleSubmit, reset, trigger, setError } = useForm({
+ *     defaultValues: {
+ *       test: []
+ *     }
+ *   });
+ *   const { fields, append } = useFieldArray({
+ *     control,
+ *     name: "test"
+ *   });
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(data => console.log(data))}>
+ *       {fields.map((item, index) => (
+ *          <input key={item.id} {...register(`test.${index}.firstName`)}  />
+ *       ))}
+ *       <button type="button" onClick={() => append({ firstName: "bill" })}>
+ *         append
+ *       </button>
+ *       <input type="submit" />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+function useFieldArray(props) {
     const methods = useFormContext();
     const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
@@ -460,89 +665,89 @@ const useFieldArray = (props) => {
     });
     const updateValues = React.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
-        set(control._formValues, name, updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues);
     }, [control, name]);
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(cloneObject(value));
         const updatedFieldArrayValues = append(control._getFieldArray(name), appendValue);
         control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
         ids.current = append(ids.current, appendValue.map(generateId));
-        setFields(updatedFieldArrayValues);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, append, {
+        setFields(updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues, append, {
             argA: fillEmptyArray(value),
-        }, updatedFieldArrayValues);
+        });
     };
     const prepend$1 = (value, options) => {
         const prependValue = convertToArrayPayload(cloneObject(value));
         const updatedFieldArrayValues = prepend(control._getFieldArray(name), prependValue);
         control._names.focus = getFocusFieldName(name, 0, options);
         ids.current = prepend(ids.current, prependValue.map(generateId));
-        setFields(updatedFieldArrayValues);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, prepend, {
+        setFields(updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues, prepend, {
             argA: fillEmptyArray(value),
-        }, updatedFieldArrayValues);
+        });
     };
     const remove = (index) => {
         const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
         ids.current = removeArrayAt(ids.current, index);
-        setFields(updatedFieldArrayValues);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, removeArrayAt, {
+        setFields(updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
             argA: index,
-        }, updatedFieldArrayValues);
+        });
     };
     const insert$1 = (index, value, options) => {
         const insertValue = convertToArrayPayload(cloneObject(value));
         const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
-        updateValues(updatedFieldArrayValues);
         control._names.focus = getFocusFieldName(name, index, options);
         ids.current = insert(ids.current, index, insertValue.map(generateId));
+        updateValues(updatedFieldArrayValues);
         setFields(updatedFieldArrayValues);
-        control._updateFieldArray(name, insert, {
+        control._updateFieldArray(name, updatedFieldArrayValues, insert, {
             argA: index,
             argB: fillEmptyArray(value),
-        }, updatedFieldArrayValues);
+        });
     };
     const swap = (indexA, indexB) => {
         const updatedFieldArrayValues = control._getFieldArray(name);
         swapArrayAt(updatedFieldArrayValues, indexA, indexB);
         swapArrayAt(ids.current, indexA, indexB);
-        setFields(updatedFieldArrayValues);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, swapArrayAt, {
+        setFields(updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
             argA: indexA,
             argB: indexB,
-        }, updatedFieldArrayValues, false);
+        }, false);
     };
     const move = (from, to) => {
         const updatedFieldArrayValues = control._getFieldArray(name);
         moveArrayAt(updatedFieldArrayValues, from, to);
         moveArrayAt(ids.current, from, to);
-        setFields(updatedFieldArrayValues);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, moveArrayAt, {
+        setFields(updatedFieldArrayValues);
+        control._updateFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
             argA: from,
             argB: to,
-        }, updatedFieldArrayValues, false);
+        }, false);
     };
     const update = (index, value) => {
         const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, value);
         ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
-        setFields([...updatedFieldArrayValues]);
         updateValues(updatedFieldArrayValues);
-        control._updateFieldArray(name, updateAt, {
+        setFields([...updatedFieldArrayValues]);
+        control._updateFieldArray(name, updatedFieldArrayValues, updateAt, {
             argA: index,
             argB: value,
-        }, updatedFieldArrayValues, true, false);
+        }, true, false);
     };
     const replace = (value) => {
-        const updatedFieldArrayValues = convertToArrayPayload(value);
+        const updatedFieldArrayValues = convertToArrayPayload(cloneObject(value));
         ids.current = updatedFieldArrayValues.map(generateId);
         updateValues([...updatedFieldArrayValues]);
         setFields([...updatedFieldArrayValues]);
-        control._updateFieldArray(name, () => updatedFieldArrayValues, {}, [...updatedFieldArrayValues], true, false);
+        control._updateFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
@@ -568,7 +773,7 @@ const useFieldArray = (props) => {
         control._proxyFormState.isValid && control._updateValid();
     }, [fields, name, control]);
     React.useEffect(() => {
-        !get(control._formValues, name) && set(control._formValues, name, []);
+        !get(control._formValues, name) && control._updateFieldArray(name);
         return () => {
             (control._options.shouldUnregister || shouldUnregister) &&
                 control.unregister(name);
@@ -585,7 +790,7 @@ const useFieldArray = (props) => {
         replace: React.useCallback(replace, [updateValues, name, control]),
         fields: React.useMemo(() => fields.map((field, index) => (Object.assign(Object.assign({}, field), { [keyName]: ids.current[index] || generateId() }))), [fields, keyName]),
     };
-};
+}
 
 function createSubject() {
     let _observers = [];
@@ -974,8 +1179,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         const maxOutput = getValueAndMessage(max);
         const minOutput = getValueAndMessage(min);
         if (!isNaN(inputValue)) {
-            const valueNumber = ref.valueAsNumber ||
-                parseFloat(inputValue);
+            const valueNumber = ref.valueAsNumber || +inputValue;
             if (!isNullOrUndefined(maxOutput.value)) {
                 exceedMax = valueNumber > maxOutput.value;
             }
@@ -1138,33 +1342,38 @@ function createFormControl(props = {}) {
         }
         return isValid;
     };
-    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true) => {
-        _stateFlags.action = true;
-        if (shouldSetFields && Array.isArray(get(_fields, name))) {
-            const fieldValues = method(get(_fields, name), args.argA, args.argB);
-            shouldSetValues && set(_fields, name, fieldValues);
-        }
-        if (_proxyFormState.errors &&
-            shouldSetFields &&
-            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);
-        }
-        if (_proxyFormState.touchedFields &&
-            Array.isArray(get(_formState.touchedFields, name))) {
-            const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
-            shouldSetValues && set(_formState.touchedFields, name, touchedFields);
+    const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndErrors = true) => {
+        if (args && method) {
+            _stateFlags.action = true;
+            if (shouldUpdateFieldsAndErrors && Array.isArray(get(_fields, name))) {
+                const fieldValues = method(get(_fields, name), args.argA, args.argB);
+                shouldSetValues && set(_fields, name, fieldValues);
+            }
+            if (_proxyFormState.errors &&
+                shouldUpdateFieldsAndErrors &&
+                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);
+            }
+            if (_proxyFormState.touchedFields &&
+                Array.isArray(get(_formState.touchedFields, name))) {
+                const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
+                shouldSetValues && set(_formState.touchedFields, name, touchedFields);
+            }
+            if (_proxyFormState.dirtyFields) {
+                _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+            }
+            _subjects.state.next({
+                isDirty: _getDirty(name, values),
+                dirtyFields: _formState.dirtyFields,
+                errors: _formState.errors,
+                isValid: _formState.isValid,
+            });
         }
-        if (_proxyFormState.dirtyFields) {
-            _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
+        else {
+            set(_formValues, name, values);
         }
-        _subjects.state.next({
-            isDirty: _getDirty(name, values),
-            dirtyFields: _formState.dirtyFields,
-            errors: _formState.errors,
-            isValid: _formState.isValid,
-        });
     };
     const updateErrors = (name, error) => (set(_formState.errors, name, error),
         _subjects.state.next({
@@ -1238,7 +1447,8 @@ function createFormControl(props = {}) {
             _subjects.state.next(updatedFormState);
         }
         validateFields[name]--;
-        if (_proxyFormState.isValidating && !validateFields[name]) {
+        if (_proxyFormState.isValidating &&
+            !Object.values(validateFields).some((v) => v)) {
             _subjects.state.next({
                 isValidating: false,
             });
@@ -1343,7 +1553,10 @@ function createFormControl(props = {}) {
                         fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
                     }
                 }
-                else if (!isFileInput(fieldReference.ref)) {
+                else if (isFileInput(fieldReference.ref)) {
+                    fieldReference.ref.value = '';
+                }
+                else {
                     fieldReference.ref.value = fieldValue;
                     if (!fieldReference.ref.type) {
                         _subjects.watch.next({
@@ -1410,7 +1623,7 @@ function createFormControl(props = {}) {
             const fieldValue = target.type
                 ? getFieldValue(field._f)
                 : getEventValue(event);
-            const isBlurEvent = event.type === EVENTS.BLUR;
+            const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
             const shouldSkipValidation = (!hasValidation(field._f) &&
                 !_options.resolver &&
                 !get(_formState.errors, name) &&
@@ -1437,10 +1650,9 @@ function createFormControl(props = {}) {
             }
             !isBlurEvent && watched && _subjects.state.next({});
             validateFields[name] = validateFields[name] ? +1 : 1;
-            _proxyFormState.isValidating &&
-                _subjects.state.next({
-                    isValidating: true,
-                });
+            _subjects.state.next({
+                isValidating: true,
+            });
             if (_options.resolver) {
                 const { errors } = await _executeSchema([name]);
                 const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
@@ -1614,9 +1826,7 @@ function createFormControl(props = {}) {
             e.persist && e.persist();
         }
         let hasNoPromiseError = true;
-        let fieldValues = _options.shouldUnregister
-            ? cloneObject(_formValues)
-            : Object.assign({}, _formValues);
+        let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
         });
@@ -1638,7 +1848,9 @@ function createFormControl(props = {}) {
                 await onValid(fieldValues, e);
             }
             else {
-                onInvalid && (await onInvalid(_formState.errors, e));
+                if (onInvalid) {
+                    await onInvalid(Object.assign({}, _formState.errors), e);
+                }
                 _options.shouldFocusError &&
                     focusFieldBy(_fields, (key) => get(_formState.errors, key), _names.mount);
             }
@@ -1781,15 +1993,9 @@ function createFormControl(props = {}) {
             get _fields() {
                 return _fields;
             },
-            set _fields(value) {
-                _fields = value;
-            },
             get _formValues() {
                 return _formValues;
             },
-            set _formValues(value) {
-                _formValues = value;
-            },
             get _stateFlags() {
                 return _stateFlags;
             },
@@ -1799,9 +2005,6 @@ function createFormControl(props = {}) {
             get _defaultValues() {
                 return _defaultValues;
             },
-            set _defaultValues(value) {
-                _defaultValues = value;
-            },
             get _names() {
                 return _names;
             },
@@ -1837,6 +2040,35 @@ function createFormControl(props = {}) {
     };
 }
 
+/**
+ * Custom hook to mange the entire form.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/api/useform) • [Demo](https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm) • [Video](https://www.youtube.com/watch?v=RkXv4AXXC_4)
+ *
+ * @param props - form configuration and validation parameters.
+ *
+ * @returns methods - individual functions to manage the form state. {@link UseFormReturn}
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { register, handleSubmit, watch, formState: { errors } } = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   console.log(watch("example"));
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input defaultValue="test" {...register("example")} />
+ *       <input {...register("exampleRequired", { required: true })} />
+ *       {errors.exampleRequired && <span>This field is required</span>}
+ *       <input type="submit" />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
 function useForm(props = {}) {
     const _formControl = React.useRef();
     const [formState, updateFormState] = React.useState({