react-hook-form 7.26.1 → 8.0.0-alpha.1

package/dist/index.esm.mjs

@@ -281,11 +281,8 @@ var objectHasFunction = (data) => {
  *
  * @example
  * ```tsx
- * const { watch } = useForm();
- * const values = useWatch({
- *   name: "fieldName"
- *   control,
- * })
+ * // can skip passing down the control into useWatch if the form is wrapped with the FormProvider
+ * const values = useWatch()
  * ```
  */
 function useWatch(props) {
@@ -357,7 +354,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);
@@ -377,7 +374,7 @@ function useController(props) {
     }, [name, control, isArrayField, shouldUnregister]);
     return {
         field: {
-            name,
+            name: name,
             value,
             onChange: React.useCallback((event) => {
                 _registerProps.current.onChange({
@@ -460,6 +457,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(/\.|\[/));
@@ -643,7 +671,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, shouldUnregister } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
@@ -778,7 +806,7 @@ function useFieldArray(props) {
             (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]),
@@ -788,7 +816,7 @@ function 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]),
     };
 }
 
@@ -909,7 +937,9 @@ function unset(object, path) {
             if (currentPathsLength === index &&
                 ((isObject(objectRef) && isEmptyObject(objectRef)) ||
                     (Array.isArray(objectRef) &&
-                        !objectRef.filter((data) => (isObject(data) && !isEmptyObject(data)) || isBoolean(data)).length))) {
+                        !objectRef.filter((data) => (isObject(data) && !isEmptyObject(data)) ||
+                            isBoolean(data) ||
+                            (Array.isArray(data) && data.length)).length))) {
                 previousObjRef ? delete previousObjRef[item] : delete object[item];
             }
             previousObjRef = objectRef;
@@ -1758,7 +1788,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);
@@ -1905,22 +1935,6 @@ function createFormControl(props = {}) {
             _defaultValues = updatedValues;
         }
         if (!keepStateOptions.keepValues) {
-            if (isWeb && isUndefined(formValues)) {
-                for (const name of _names.mount) {
-                    const field = get(_fields, name);
-                    if (field && field._f) {
-                        const fieldReference = Array.isArray(field._f.refs)
-                            ? field._f.refs[0]
-                            : field._f.ref;
-                        try {
-                            isHTMLElement(fieldReference) &&
-                                fieldReference.closest('form').reset();
-                            break;
-                        }
-                        catch (_a) { }
-                    }
-                }
-            }
             _formValues = props.shouldUnregister
                 ? keepStateOptions.keepDefaultValues
                     ? cloneObject(_defaultValues)
@@ -1942,8 +1956,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
@@ -1972,9 +1985,10 @@ function createFormControl(props = {}) {
             isSubmitSuccessful: false,
         });
     };
-    const setFocus = (name) => {
+    const setFocus = (name, options = {}) => {
         const field = get(_fields, name)._f;
-        (field.ref.focus ? field.ref : field.refs[0]).focus();
+        const fieldRef = field.refs ? field.refs[0] : field.ref;
+        options.shouldSelect ? fieldRef.select() : fieldRef.focus();
     };
     return {
         control: {
@@ -2115,5 +2129,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