react-hook-form 7.68.0 → 7.69.0

package/dist/index.esm.mjs

@@ -32,29 +32,23 @@ var isWeb = typeof window !== 'undefined' &&
     typeof document !== '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);
+        return new Date(data);
     }
-    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
-        (isArray || isObject(data))) {
-        copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
-        if (!isArray && !isPlainObject(data)) {
-            copy = data;
-        }
-        else {
-            for (const key in data) {
-                if (data.hasOwnProperty(key)) {
-                    copy[key] = cloneObject(data[key]);
-                }
-            }
-        }
+    const isFileListInstance = typeof FileList !== 'undefined' && data instanceof FileList;
+    if (isWeb && (data instanceof Blob || isFileListInstance)) {
+        return data;
     }
-    else {
+    const isArray = Array.isArray(data);
+    if (!isArray && !(isObject(data) && isPlainObject(data))) {
         return data;
     }
+    const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+    for (const key in data) {
+        if (Object.prototype.hasOwnProperty.call(data, key)) {
+            copy[key] = cloneObject(data[key]);
+        }
+    }
     return copy;
 }
 
@@ -80,6 +74,8 @@ var get = (object, path, defaultValue) => {
 
 var isBoolean = (value) => typeof value === 'boolean';
 
+var isFunction = (value) => typeof value === 'function';
+
 var set = (object, path, value) => {
     let index = -1;
     const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -503,12 +499,12 @@ function useController(props) {
     }), [name, control._formValues]);
     const ref = React.useCallback((elm) => {
         const field = get(control._fields, name);
-        if (field && elm) {
+        if (field && field._f && elm) {
             field._f.ref = {
-                focus: () => elm.focus && elm.focus(),
-                select: () => elm.select && elm.select(),
-                setCustomValidity: (message) => elm.setCustomValidity(message),
-                reportValidity: () => elm.reportValidity(),
+                focus: () => isFunction(elm.focus) && elm.focus(),
+                select: () => isFunction(elm.select) && elm.select(),
+                setCustomValidity: (message) => isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
+                reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity(),
             };
         }
     }, [control._fields, name]);
@@ -798,8 +794,6 @@ var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
 var isFileInput = (element) => element.type === 'file';
 
-var isFunction = (value) => typeof value === 'function';
-
 var isHTMLElement = (value) => {
     if (!isWeb) {
         return false;
@@ -1367,6 +1361,7 @@ function createFormControl(props = {}) {
         action: false,
         mount: false,
         watch: false,
+        keepIsValid: false,
     };
     let _names = {
         mount: new Set(),
@@ -1377,7 +1372,7 @@ function createFormControl(props = {}) {
     };
     let delayErrorCallback;
     let timer = 0;
-    const _proxyFormState = {
+    const defaultProxyFormState = {
         isDirty: false,
         dirtyFields: false,
         validatingFields: false,
@@ -1386,6 +1381,9 @@ function createFormControl(props = {}) {
         isValid: false,
         errors: false,
     };
+    const _proxyFormState = {
+        ...defaultProxyFormState,
+    };
     let _proxySubscribeFormState = {
         ..._proxyFormState,
     };
@@ -1399,13 +1397,21 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _setValid = async (shouldUpdateValid) => {
+        if (_state.keepIsValid) {
+            return;
+        }
         if (!_options.disabled &&
             (_proxyFormState.isValid ||
                 _proxySubscribeFormState.isValid ||
                 shouldUpdateValid)) {
-            const isValid = _options.resolver
-                ? isEmptyObject((await _runSchema()).errors)
-                : await executeBuiltInValidation(_fields, true);
+            let isValid;
+            if (_options.resolver) {
+                isValid = isEmptyObject((await _runSchema()).errors);
+                _updateIsValidating();
+            }
+            else {
+                isValid = await executeBuiltInValidation(_fields, true);
+            }
             if (isValid !== _formState.isValid) {
                 _subjects.state.next({
                     isValid,
@@ -1568,11 +1574,11 @@ function createFormControl(props = {}) {
     const _runSchema = async (name) => {
         _updateIsValidating(name, true);
         const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
-        _updateIsValidating(name);
         return result;
     };
     const executeSchemaAndUpdateState = async (names) => {
         const { errors } = await _runSchema(names);
+        _updateIsValidating(names);
         if (names) {
             for (const name of names) {
                 const error = get(errors, name);
@@ -1808,6 +1814,7 @@ function createFormControl(props = {}) {
             !isBlurEvent && watched && _subjects.state.next({ ..._formState });
             if (_options.resolver) {
                 const { errors } = await _runSchema([name]);
+                _updateIsValidating([name]);
                 _updateIsFieldValueUpdated(fieldValue);
                 if (isFieldValueUpdated) {
                     const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
@@ -1953,7 +1960,10 @@ function createFormControl(props = {}) {
         };
         return _subscribe({
             ...props,
-            formState: _proxySubscribeFormState,
+            formState: {
+                ...defaultProxyFormState,
+                ...props.formState,
+            },
         });
     };
     const unregister = (name, options = {}) => {
@@ -2106,6 +2116,7 @@ function createFormControl(props = {}) {
         });
         if (_options.resolver) {
             const { errors, values } = await _runSchema();
+            _updateIsValidating();
             _formState.errors = errors;
             fieldValues = cloneObject(values);
         }
@@ -2246,6 +2257,7 @@ function createFormControl(props = {}) {
                 !!keepStateOptions.keepDirtyValues ||
                 (!_options.shouldUnregister && !isEmptyObject(values));
         _state.watch = !!_options.shouldUnregister;
+        _state.keepIsValid = !!keepStateOptions.keepIsValid;
         _state.action = false;
         // Clear errors synchronously to prevent validation errors on subsequent submissions
         // This fixes the issue where form.reset() causes validation errors on subsequent
@@ -2290,7 +2302,7 @@ function createFormControl(props = {}) {
     };
     const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues)
         ? formValues(_formValues)
-        : formValues, keepStateOptions);
+        : formValues, { ..._options.resetOptions, ...keepStateOptions });
     const setFocus = (name, options = {}) => {
         const field = get(_fields, name);
         const fieldReference = field && field._f;
@@ -2299,10 +2311,14 @@ function createFormControl(props = {}) {
                 ? fieldReference.refs[0]
                 : fieldReference.ref;
             if (fieldRef.focus) {
-                fieldRef.focus();
-                options.shouldSelect &&
-                    isFunction(fieldRef.select) &&
-                    fieldRef.select();
+                // Use setTimeout to ensure focus happens after any pending state updates
+                // This fixes the issue where setFocus doesn't work immediately after setError
+                setTimeout(() => {
+                    fieldRef.focus();
+                    options.shouldSelect &&
+                        isFunction(fieldRef.select) &&
+                        fieldRef.select();
+                });
             }
         }
     };
@@ -2328,6 +2344,7 @@ function createFormControl(props = {}) {
             setError,
             _subscribe,
             _runSchema,
+            _updateIsValidating,
             _focusError,
             _getWatch,
             _getDirty,
@@ -2403,7 +2420,7 @@ var generateId = () => {
     }
     const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = (Math.random() * 16 + d) % 16 | 0;
+        const r = ((Math.random() * 16 + d) % 16) | 0;
         return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
     });
 };
@@ -2625,6 +2642,7 @@ function useFieldArray(props) {
             !getValidationModes(control._options.reValidateMode).isOnSubmit) {
             if (control._options.resolver) {
                 control._runSchema([name]).then((result) => {
+                    control._updateIsValidating([name]);
                     const error = get(result.errors, name);
                     const existingError = get(control._formState.errors, name);
                     if (existingError
@@ -2854,7 +2872,11 @@ function useForm(props = {}) {
  * Watch component that subscribes to form field changes and re-renders when watched fields update.
  *
  * @param control - The form control object from useForm
- * @param names - Array of field names to watch for changes
+ * @param name - Can be field name, array of field names, or undefined to watch the entire form
+ * @param disabled - Disable subscription
+ * @param exact - Whether to watch exact field names or not
+ * @param defaultValue - The default value to use if the field is not yet set
+ * @param compute - Function to compute derived values from watched fields
  * @param render - The function that receives watched values and returns ReactNode
  * @returns The result of calling render function with watched values
  *
@@ -2872,7 +2894,7 @@ function useForm(props = {}) {
  * />
  * ```
  */
-const Watch = ({ control, names, render, }) => render(useWatch({ control, name: names }));
+const Watch = ({ render, names, ...props }) => render(useWatch({ ...props, name: names }));
 
 export { Controller, Form, FormProvider, FormStateSubscribe, Watch, appendErrors, createFormControl, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.mjs.map