react-hook-form 7.25.0 → 8.0.0-alpha.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 = {
@@ -70,22 +71,17 @@ const useFormContext = () => React.useContext(HookFormContext);
 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;
@@ -231,7 +227,7 @@ function useController(props) {
         control,
         name,
     });
-    const _registerProps = React.useRef(control.register(name, Object.assign(Object.assign({}, props.rules), { value })));
+    const _registerProps = React.useRef(control.register(name, Object.assign(Object.assign({}, props.rules), { value: value })));
     React.useEffect(() => {
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
@@ -251,7 +247,7 @@ function useController(props) {
     }, [name, control, isArrayField, shouldUnregister]);
     return {
         field: {
-            name,
+            name: name,
             value,
             onChange: React.useCallback((event) => {
                 _registerProps.current.onChange({
@@ -280,7 +276,7 @@ function useController(props) {
                         reportValidity: () => elm.reportValidity(),
                     };
                 }
-            }, [name, control]),
+            }, [name, control._fields]),
         },
         formState,
         fieldState: control.getFieldState(name, formState),
@@ -292,6 +288,37 @@ const Controller = (props) => props.render(useController(props));
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
     ? Object.assign(Object.assign({}, errors[name]), { types: Object.assign(Object.assign({}, (errors[name] && errors[name].types ? errors[name].types : {})), { [type]: message || true }) }) : {};
 
+/**
+ * Function for joining two paths / path strings to a {@link TypedFieldPath}.
+ * @param path      - base path
+ * @param childPath - the path which should be appended to the base path
+ * @example
+ * ```
+ * type Baz = { baz: string }
+ * type FooBarBaz = { foo: { bar: Baz }}
+ *
+ * const path: TypedFieldPath<FooBarBaz, Baz> = of('foo.bar')
+ * const joinedPath: TypedFieldPath<FooBar, string> = join(path, 'baz')
+ * ```
+ */
+function join(path, childPath) {
+    return `${path}.${childPath}`;
+}
+
+/**
+ * Function for creating a {@link TypedFieldPath} from a path string.
+ * @param path - path string
+ * @example
+ * ```
+ * type FooBar = { foo: { bar: string }}
+ *
+ * const path: TypedFieldPath<FooBar, string> = of('foo.bar')
+ * ```
+ */
+function of(path) {
+    return path;
+}
+
 var isKey = (value) => /^\w*$/.test(value);
 
 var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
@@ -438,7 +465,7 @@ var updateAt = (fieldValues, index, value) => {
 
 const useFieldArray = (props) => {
     const methods = useFormContext();
-    const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
+    const { control = methods.control, name, shouldUnregister } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
@@ -460,89 +487,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,12 +595,12 @@ 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);
         };
-    }, [name, control, keyName, shouldUnregister]);
+    }, [name, control, shouldUnregister]);
     return {
         swap: React.useCallback(swap, [updateValues, name, control]),
         move: React.useCallback(move, [updateValues, name, control]),
@@ -583,7 +610,7 @@ const useFieldArray = (props) => {
         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) => (Object.assign(Object.assign({}, field), { [keyName]: ids.current[index] || generateId() }))), [fields, keyName]),
+        fields: React.useMemo(() => fields.map((field, index) => (Object.assign(Object.assign({}, field), { id: ids.current[index] || generateId() }))), [fields]),
     };
 };
 
@@ -974,8 +1001,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 +1164,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({
@@ -1343,7 +1374,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 +1444,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 +1471,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);
@@ -1546,7 +1579,7 @@ function createFormControl(props = {}) {
         }
         _subjects.watch.next({});
         _subjects.state.next(Object.assign(Object.assign({}, _formState), (!options.keepDirty ? {} : { isDirty: _getDirty() })));
-        !options.keepIsValid && _updateValid();
+        _proxyFormState.isValid && _updateValid();
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
@@ -1730,8 +1763,7 @@ function createFormControl(props = {}) {
             watchAll: false,
             focus: '',
         };
-        _stateFlags.mount =
-            !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
+        _stateFlags.mount = !_proxyFormState.isValid;
         _stateFlags.watch = !!props.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
@@ -1781,15 +1813,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 +1825,6 @@ function createFormControl(props = {}) {
             get _defaultValues() {
                 return _defaultValues;
             },
-            set _defaultValues(value) {
-                _defaultValues = value;
-            },
             get _names() {
                 return _names;
             },
@@ -1883,5 +1906,5 @@ function useForm(props = {}) {
     return _formControl.current;
 }
 
-export { Controller, FormProvider, appendErrors, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { Controller, FormProvider, appendErrors, get, join, of, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.mjs.map