@bombillazo/rhf-plus 7.57.0-plus.0 → 7.60.0-plus.0

package/dist/index.esm.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-import crypto from 'crypto';
+import crypto$1 from 'crypto';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -40,9 +40,6 @@ function cloneObject(data) {
     if (data instanceof Date) {
         copy = new Date(data);
     }
-    else if (data instanceof Set) {
-        copy = new Set(data);
-    }
     else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
         (isArray || isObject(data))) {
         copy = isArray ? [] : {};
@@ -63,15 +60,19 @@ function cloneObject(data) {
     return copy;
 }
 
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var isKey = (value) => /^\w*$/.test(value);
 
 var isUndefined = (val) => val === undefined;
 
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+
 var get = (object, path, defaultValue) => {
     if (!path || !isObject(object)) {
         return defaultValue;
     }
-    const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+    const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
     return isUndefined(result) || result === object
         ? isUndefined(object[path])
             ? defaultValue
@@ -81,10 +82,6 @@ var get = (object, path, defaultValue) => {
 
 var isBoolean = (value) => typeof value === 'boolean';
 
-var isKey = (value) => /^\w*$/.test(value);
-
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
-
 var set = (object, path, value) => {
     let index = -1;
     const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -291,7 +288,8 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
         return get(formValues, names, defaultValue);
     }
     if (Array.isArray(names)) {
-        return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
+        return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName),
+            get(formValues, fieldName)));
     }
     isGlobal && (_names.watchAll = true);
     return formValues;
@@ -504,25 +502,29 @@ function useController(props) {
  *       <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>
- *           </>
- *         )}
- *       />
+ *       >
+ *       ({ 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>
+ *         </>
+ *       )
+ *       </Controller>
  *     </form>
  *   );
  * }
  * ```
  */
-const Controller = (props) => props.render(useController(props));
+const Controller = (props) => {
+    const renderedController = useController(props);
+    return ('children' in props ? props.children : props.render)(renderedController);
+};
 
 const flatten = (obj) => {
     const output = {};
@@ -656,7 +658,7 @@ var uuid = () => {
         typeof window.crypto.randomUUID === 'function') {
         return window.crypto.randomUUID();
     }
-    return crypto.randomBytes(16).toString('hex');
+    return crypto$1.randomBytes(16).toString('hex');
 };
 
 var createId = (id) => id || `form-${uuid()}`;
@@ -691,7 +693,7 @@ var createSubject = () => {
 
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
-function deepEqual(object1, object2) {
+function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
     if (isPrimitive(object1) || isPrimitive(object2)) {
         return object1 === object2;
     }
@@ -703,6 +705,11 @@ function deepEqual(object1, object2) {
     if (keys1.length !== keys2.length) {
         return false;
     }
+    if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
+        return true;
+    }
+    _internal_visited.add(object1);
+    _internal_visited.add(object2);
     for (const key of keys1) {
         const val1 = object1[key];
         if (!keys2.includes(key)) {
@@ -713,7 +720,7 @@ function deepEqual(object1, object2) {
             if ((isDateObject(val1) && isDateObject(val2)) ||
                 (isObject(val1) && isObject(val2)) ||
                 (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual(val1, val2)
+                ? !deepEqual(val1, val2, _internal_visited)
                 : val1 !== val2) {
                 return false;
             }
@@ -1323,7 +1330,7 @@ function createFormControl(props = {}) {
         disabled: _options.disabled || false,
         metadata: _options.defaultMetadata || {},
     };
-    const _fields = {};
+    let _fields = {};
     let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values)
         ? cloneObject(_options.defaultValues || _options.values) || {}
         : {};
@@ -2067,14 +2074,14 @@ function createFormControl(props = {}) {
         if (_options.resolver) {
             const { errors, values } = await _runSchema();
             _formState.errors = errors;
-            fieldValues = values;
+            fieldValues = cloneObject(values);
         }
         else {
             await executeBuiltInValidation(_fields);
         }
         if (_names.disabled.size) {
             for (const name of _names.disabled) {
-                set(fieldValues, name, undefined);
+                unset(fieldValues, name);
             }
         }
         unset(_formState.errors, 'root');
@@ -2170,11 +2177,20 @@ function createFormControl(props = {}) {
                         }
                     }
                 }
-                for (const fieldName of _names.mount) {
-                    setValue(fieldName, get(values, fieldName));
+                if (keepStateOptions.keepFieldsRef) {
+                    for (const fieldName of _names.mount) {
+                        setValue(fieldName, get(values, fieldName));
+                    }
+                }
+                else {
+                    _fields = {};
                 }
             }
-            _formValues = cloneObject(values);
+            _formValues = _options.shouldUnregister
+                ? keepStateOptions.keepDefaultValues
+                    ? cloneObject(_defaultValues)
+                    : {}
+                : cloneObject(values);
             _subjects.array.next({
                 values: { ...values },
             });
@@ -2388,6 +2404,9 @@ function createFormControl(props = {}) {
 }
 
 var generateId = () => {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
     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;
@@ -2503,7 +2522,7 @@ function useFieldArray(props) {
     control._names.array.add(name);
     rules &&
         control.register(name, rules);
-    React__default.useEffect(() => control._subjects.array.subscribe({
+    useIsomorphicLayoutEffect(() => control._subjects.array.subscribe({
         next: ({ values, name: fieldArrayName, }) => {
             if (fieldArrayName === _name.current || !fieldArrayName) {
                 const fieldValues = get(values, _name.current);
@@ -2749,14 +2768,21 @@ function useForm(props = {}) {
             {},
     });
     if (!_formControl.current) {
-        _formControl.current = {
-            ...(props.formControl ? props.formControl : createFormControl(props)),
-            formState,
-        };
-        if (props.formControl &&
-            props.defaultValues &&
-            !isFunction(props.defaultValues)) {
-            props.formControl.reset(props.defaultValues, props.resetOptions);
+        if (props.formControl) {
+            _formControl.current = {
+                ...props.formControl,
+                formState,
+            };
+            if (props.defaultValues && !isFunction(props.defaultValues)) {
+                props.formControl.reset(props.defaultValues, props.resetOptions);
+            }
+        }
+        else {
+            const { formControl, ...rest } = createFormControl(props);
+            _formControl.current = {
+                ...rest,
+                formState,
+            };
         }
     }
     const control = _formControl.current.control;
@@ -2810,7 +2836,10 @@ function useForm(props = {}) {
     }, [control, formState.isDirty]);
     React__default.useEffect(() => {
         if (props.values && !deepEqual(props.values, _values.current)) {
-            control._reset(props.values, control._options.resetOptions);
+            control._reset(props.values, {
+                keepFieldsRef: true,
+                ...control._options.resetOptions,
+            });
             _values.current = props.values;
             updateFormState((state) => ({ ...state }));
         }