@bombillazo/rhf-plus 7.56.4-plus.0 → 7.59.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';
 
@@ -63,15 +63,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 +85,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);
@@ -266,7 +266,7 @@ function useFormState(props) {
         errors: false,
     });
     useIsomorphicLayoutEffect(() => control._subscribe({
-        name: name,
+        name,
         formState: _localProxyFormState.current,
         exact,
         callback: (formState) => {
@@ -319,7 +319,7 @@ function useWatch(props) {
     const _defaultValue = React__default.useRef(defaultValue);
     const [value, updateValue] = React__default.useState(control._getWatch(name, _defaultValue.current));
     useIsomorphicLayoutEffect(() => control._subscribe({
-        name: name,
+        name,
         formState: {
             values: true,
         },
@@ -419,8 +419,8 @@ function useController(props) {
         const field = get(control._fields, name);
         if (field && elm) {
             field._f.ref = {
-                focus: () => elm.focus(),
-                select: () => elm.select(),
+                focus: () => elm.focus && elm.focus(),
+                select: () => elm.select && elm.select(),
                 setCustomValidity: (message) => elm.setCustomValidity(message),
                 reportValidity: () => elm.reportValidity(),
             };
@@ -504,25 +504,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 +660,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 +695,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 +707,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 +722,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;
             }
@@ -1039,6 +1048,12 @@ function schemaErrorLookup(errors, _fields, name) {
                 error: foundError,
             };
         }
+        if (foundError && foundError.root && foundError.root.type) {
+            return {
+                name: `${fieldName}.root`,
+                error: foundError.root,
+            };
+        }
         names.pop();
     }
     return {
@@ -1665,7 +1680,7 @@ function createFormControl(props = {}) {
                 return;
             }
             const fieldValue = value[fieldKey];
-            const fieldName = `${name}.${fieldKey}`;
+            const fieldName = name + '.' + fieldKey;
             const field = get(_fields, fieldName);
             (_names.array.has(name) ||
                 isObject(fieldValue) ||
@@ -2061,14 +2076,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');
@@ -2165,7 +2180,11 @@ function createFormControl(props = {}) {
                     }
                 }
                 for (const fieldName of _names.mount) {
-                    setValue(fieldName, get(values, fieldName));
+                    const value = get(values, fieldName, get(_defaultValues, fieldName));
+                    if (!isUndefined(value)) {
+                        set(values, fieldName, value);
+                        setValue(fieldName, get(values, fieldName));
+                    }
                 }
             }
             _formValues = cloneObject(values);
@@ -2307,6 +2326,7 @@ function createFormControl(props = {}) {
             setError,
             _subscribe,
             _runSchema,
+            _focusError,
             _getWatch,
             _getDirty,
             _setValid,
@@ -2381,6 +2401,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;
@@ -2496,7 +2519,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);
@@ -2742,14 +2765,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;
@@ -2778,10 +2808,13 @@ function useForm(props = {}) {
         if (props.reValidateMode) {
             control._options.reValidateMode = props.reValidateMode;
         }
-        if (props.errors && !isEmptyObject(props.errors)) {
+    }, [control, props.mode, props.reValidateMode]);
+    React__default.useEffect(() => {
+        if (props.errors) {
             control._setErrors(props.errors);
+            control._focusError();
         }
-    }, [control, props.errors, props.mode, props.reValidateMode]);
+    }, [control, props.errors]);
     React__default.useEffect(() => {
         props.shouldUnregister &&
             control._subjects.state.next({