@sunggang/ui-lib 0.4.3 → 0.4.5

package/index.esm.cjs.js

@@ -4,26 +4,7 @@ var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -328,10 +309,8 @@ function cloneObject(data) {
     var isFileListInstance = typeof FileList !== "undefined" ? _instanceof(data, FileList) : false;
     if (_instanceof(data, Date)) {
         copy = new Date(data);
-    } else if (_instanceof(data, Set)) {
-        copy = new Set(data);
     } else if (!(isWeb && (_instanceof(data, Blob) || isFileListInstance)) && (isArray || isObject(data))) {
-        copy = isArray ? [] : {};
+        copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
         if (!isArray && !isPlainObject(data)) {
             copy = data;
         } else {
@@ -346,17 +325,25 @@ function cloneObject(data) {
     }
     return copy;
 }
-var compact = function(value1) {
-    return Array.isArray(value1) ? value1.filter(Boolean) : [];
+var isKey = function(value1) {
+    return /^\w*$/.test(value1);
 };
 var isUndefined = function(val) {
     return val === undefined;
 };
+var compact = function(value1) {
+    return Array.isArray(value1) ? value1.filter(Boolean) : [];
+};
+var stringToPath = function(input) {
+    return compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
+};
 var get = function(object, path, defaultValue) {
     if (!path || !isObject(object)) {
         return defaultValue;
     }
-    var result = compact(path.split(/[,[\].]+?/)).reduce(function(result, key) {
+    var result = (isKey(path) ? [
+        path
+    ] : stringToPath(path)).reduce(function(result, key) {
         return isNullOrUndefined(result) ? result : result[key];
     }, object);
     return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
@@ -364,12 +351,6 @@ var get = function(object, path, defaultValue) {
 var isBoolean = function(value1) {
     return typeof value1 === "boolean";
 };
-var isKey = function(value1) {
-    return /^\w*$/.test(value1);
-};
-var stringToPath = function(input) {
-    return compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
-};
 var set = function(object, path, value1) {
     var index = -1;
     var tempPath = isKey(path) ? [
@@ -413,6 +394,7 @@ var INPUT_VALIDATION_RULES = {
     validate: "validate"
 };
 var HookFormContext = React__default["default"].createContext(null);
+HookFormContext.displayName = "HookFormContext";
 /**
  * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
  *
@@ -502,7 +484,7 @@ var getProxyFormState = function(formState, control, localProxyFormState) {
     for(var key in formState)_loop(key);
     return result;
 };
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__default["default"].useLayoutEffect : React__default["default"].useEffect;
 /**
  * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
  *
@@ -535,7 +517,7 @@ var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace
  */ function useFormState(props) {
     var methods = useFormContext();
     var _ref = props || {}, _ref_control = _ref.control, control = _ref_control === void 0 ? methods.control : _ref_control, disabled = _ref.disabled, name = _ref.name, exact = _ref.exact;
-    var _React__default_useState = _sliced_to_array(React__default["default"].useState(control._formState), 2), formState = _React__default_useState[0], updateFormState = _React__default_useState[1];
+    var _React_useState = _sliced_to_array(React__default["default"].useState(control._formState), 2), formState = _React_useState[0], updateFormState = _React_useState[1];
     var _localProxyFormState = React__default["default"].useRef({
         isDirty: false,
         isLoading: false,
@@ -588,6 +570,58 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
     isGlobal && (_names.watchAll = true);
     return formValues;
 };
+var isPrimitive = function(value1) {
+    return isNullOrUndefined(value1) || !isObjectType(value1);
+};
+function deepEqual(object1, object2) {
+    var _internal_visited = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : new WeakSet();
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return object1 === object2;
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
+    var keys1 = Object.keys(object1);
+    var keys2 = Object.keys(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);
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = keys1[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var key = _step.value;
+            var val1 = object1[key];
+            if (!keys2.includes(key)) {
+                return false;
+            }
+            if (key !== "ref") {
+                var val2 = object2[key];
+                if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : val1 !== val2) {
+                    return false;
+                }
+            }
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return true;
+}
 /**
  * Custom hook to subscribe to field change and isolate re-rendering at the component level.
  *
@@ -605,9 +639,18 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
  * ```
  */ function useWatch(props) {
     var methods = useFormContext();
-    var _ref = props || {}, _ref_control = _ref.control, control = _ref_control === void 0 ? methods.control : _ref_control, name = _ref.name, defaultValue = _ref.defaultValue, disabled = _ref.disabled, exact = _ref.exact;
+    var _ref = props || {}, _ref_control = _ref.control, control = _ref_control === void 0 ? methods.control : _ref_control, name = _ref.name, defaultValue = _ref.defaultValue, disabled = _ref.disabled, exact = _ref.exact, compute = _ref.compute;
     var _defaultValue = React__default["default"].useRef(defaultValue);
-    var _React__default_useState = _sliced_to_array(React__default["default"].useState(control._getWatch(name, _defaultValue.current)), 2), value1 = _React__default_useState[0], updateValue = _React__default_useState[1];
+    var _compute = React__default["default"].useRef(compute);
+    var _computeFormValues = React__default["default"].useRef(undefined);
+    _compute.current = compute;
+    var defaultValueMemo = React__default["default"].useMemo(function() {
+        return control._getWatch(name, _defaultValue.current);
+    }, [
+        control,
+        name
+    ]);
+    var _React_useState = _sliced_to_array(React__default["default"].useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo), 2), value1 = _React_useState[0], updateValue = _React_useState[1];
     useIsomorphicLayoutEffect(function() {
         return control._subscribe({
             name: name,
@@ -616,13 +659,24 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
             },
             exact: exact,
             callback: function(formState) {
-                return !disabled && updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current));
+                if (!disabled) {
+                    var formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
+                    if (_compute.current) {
+                        var computedFormValues = _compute.current(formValues);
+                        if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+                            updateValue(computedFormValues);
+                            _computeFormValues.current = computedFormValues;
+                        }
+                    } else {
+                        updateValue(formValues);
+                    }
+                }
             }
         });
     }, [
-        name,
         control,
         disabled,
+        name,
         exact
     ]);
     React__default["default"].useEffect(function() {
@@ -655,12 +709,19 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
  * ```
  */ function useController(props) {
     var methods = useFormContext();
-    var name = props.name, disabled = props.disabled, _props_control = props.control, control = _props_control === void 0 ? methods.control : _props_control, shouldUnregister = props.shouldUnregister;
+    var name = props.name, disabled = props.disabled, _props_control = props.control, control = _props_control === void 0 ? methods.control : _props_control, shouldUnregister = props.shouldUnregister, defaultValue = props.defaultValue;
     var isArrayField = isNameInFieldArray(control._names.array, name);
+    var defaultValueMemo = React__default["default"].useMemo(function() {
+        return get(control._formValues, name, get(control._defaultValues, name, defaultValue));
+    }, [
+        control,
+        name,
+        defaultValue
+    ]);
     var value1 = useWatch({
         control: control,
         name: name,
-        defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
+        defaultValue: defaultValueMemo,
         exact: true
     });
     var formState = useFormState({
@@ -674,6 +735,7 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
     }), isBoolean(props.disabled) ? {
         disabled: props.disabled
     } : {})));
+    _props.current = props;
     var fieldState = React__default["default"].useMemo(function() {
         return Object.defineProperties({}, {
             invalid: {
@@ -739,10 +801,10 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
         if (field && elm) {
             field._f.ref = {
                 focus: function() {
-                    return elm.focus();
+                    return elm.focus && elm.focus();
                 },
                 select: function() {
-                    return elm.select();
+                    return elm.select && elm.select();
                 },
                 setCustomValidity: function(message) {
                     return elm.setCustomValidity(message);
@@ -927,52 +989,6 @@ var createSubject = function() {
         unsubscribe: unsubscribe
     };
 };
-var isPrimitive = function(value1) {
-    return isNullOrUndefined(value1) || !isObjectType(value1);
-};
-function deepEqual(object1, object2) {
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
-    }
-    var keys1 = Object.keys(object1);
-    var keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-    try {
-        for(var _iterator = keys1[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-            var key = _step.value;
-            var val1 = object1[key];
-            if (!keys2.includes(key)) {
-                return false;
-            }
-            if (key !== "ref") {
-                var val2 = object2[key];
-                if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2) : val1 !== val2) {
-                    return false;
-                }
-            }
-        }
-    } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-    } finally{
-        try {
-            if (!_iteratorNormalCompletion && _iterator.return != null) {
-                _iterator.return();
-            }
-        } finally{
-            if (_didIteratorError) {
-                throw _iteratorError;
-            }
-        }
-    }
-    return true;
-}
 var isEmptyObject = function(value1) {
     return isObject(value1) && !Object.keys(value1).length;
 };
@@ -1265,6 +1281,12 @@ function schemaErrorLookup(errors, _fields, name) {
                 error: foundError
             };
         }
+        if (foundError && foundError.root && foundError.root.type) {
+            return {
+                name: "".concat(fieldName, ".root"),
+                error: foundError.root
+            };
+        }
         names.pop();
     }
     return {
@@ -2042,7 +2064,7 @@ function createFormControl() {
                 return;
             }
             var fieldValue = value1[fieldKey];
-            var fieldName = "".concat(name, ".").concat(fieldKey);
+            var fieldName = name + "." + fieldKey;
             var field = get(_fields, fieldName);
             (_names.array.has(name) || isObject(fieldValue) || field && !field._f) && !isDateObject(fieldValue) ? setValues(fieldName, fieldValue, options) : setFieldValue(fieldName, fieldValue, options);
         }
@@ -2068,7 +2090,9 @@ function createFormControl() {
         } else {
             field && !field._f && !isNullOrUndefined(cloneValue) ? setValues(name, cloneValue, options) : setFieldValue(name, cloneValue, options);
         }
-        isWatched(name, _names) && _subjects.state.next(_object_spread({}, _formState));
+        isWatched(name, _names) && _subjects.state.next(_object_spread_props(_object_spread({}, _formState), {
+            name: name
+        }));
         _subjects.state.next({
             name: _state.mount ? name : undefined,
             values: cloneObject(_formValues)
@@ -2100,8 +2124,10 @@ function createFormControl() {
                         watched = isWatched(name, _names, isBlurEvent);
                         set(_formValues, name, fieldValue);
                         if (isBlurEvent) {
-                            field._f.onBlur && field._f.onBlur(event);
-                            delayErrorCallback && delayErrorCallback(0);
+                            if (!target || !target.readOnly) {
+                                field._f.onBlur && field._f.onBlur(event);
+                                delayErrorCallback && delayErrorCallback(0);
+                            }
                         } else if (field._f.onChange) {
                             field._f.onChange(event);
                         }
@@ -2357,7 +2383,7 @@ function createFormControl() {
     var watch = function(name, defaultValue) {
         return isFunction(name) ? _subjects.state.subscribe({
             next: function(payload) {
-                return name(_getWatch(undefined, defaultValue), payload);
+                return "values" in payload && name(_getWatch(undefined, defaultValue), payload);
             }
         }) : _getWatch(name, defaultValue, true);
     };
@@ -2365,9 +2391,11 @@ function createFormControl() {
         return _subjects.state.subscribe({
             next: function(formState) {
                 if (shouldSubscribeByName(props.name, formState.name, props.exact) && shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
-                    props.callback(_object_spread({
+                    props.callback(_object_spread_props(_object_spread({
                         values: _object_spread({}, _formValues)
-                    }, _formState, formState));
+                    }, _formState, formState), {
+                        defaultValues: _defaultValues
+                    }));
                 }
             }
         }).unsubscribe;
@@ -2547,7 +2575,7 @@ function createFormControl() {
                         case 1:
                             _ref = _state.sent(), errors = _ref.errors, values = _ref.values;
                             _formState.errors = errors;
-                            fieldValues = values;
+                            fieldValues = cloneObject(values);
                             return [
                                 3,
                                 4
@@ -2566,7 +2594,7 @@ function createFormControl() {
                                 try {
                                     for(_iterator = _names.disabled[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                                         name = _step.value;
-                                        set(fieldValues, name, undefined);
+                                        unset(fieldValues, name);
                                     }
                                 } catch (err) {
                                     _didIteratorError = true;
@@ -2747,28 +2775,32 @@ function createFormControl() {
                         }
                     }
                 }
-                var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = undefined;
-                try {
-                    for(var _iterator2 = _names.mount[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true){
-                        var fieldName1 = _step2.value;
-                        setValue(fieldName1, get(values, fieldName1));
-                    }
-                } catch (err) {
-                    _didIteratorError2 = true;
-                    _iteratorError2 = err;
-                } finally{
+                if (keepStateOptions.keepFieldsRef) {
+                    var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = undefined;
                     try {
-                        if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
-                            _iterator2.return();
+                        for(var _iterator2 = _names.mount[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true){
+                            var fieldName1 = _step2.value;
+                            setValue(fieldName1, get(values, fieldName1));
                         }
+                    } catch (err) {
+                        _didIteratorError2 = true;
+                        _iteratorError2 = err;
                     } finally{
-                        if (_didIteratorError2) {
-                            throw _iteratorError2;
+                        try {
+                            if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+                                _iterator2.return();
+                            }
+                        } finally{
+                            if (_didIteratorError2) {
+                                throw _iteratorError2;
+                            }
                         }
                     }
+                } else {
+                    _fields = {};
                 }
             }
-            _formValues = cloneObject(values);
+            _formValues = _options.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneObject(values);
             _subjects.array.next({
                 values: _object_spread({}, values)
             });
@@ -2795,7 +2827,8 @@ function createFormControl() {
             touchedFields: keepStateOptions.keepTouched ? _formState.touchedFields : {},
             errors: keepStateOptions.keepErrors ? _formState.errors : {},
             isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful ? _formState.isSubmitSuccessful : false,
-            isSubmitting: false
+            isSubmitting: false,
+            defaultValues: _defaultValues
         });
     };
     var reset = function(formValues, keepStateOptions) {
@@ -2833,6 +2866,7 @@ function createFormControl() {
             setError: setError,
             _subscribe: _subscribe,
             _runSchema: _runSchema,
+            _focusError: _focusError,
             _getWatch: _getWatch,
             _getDirty: _getDirty,
             _setValid: _setValid,
@@ -2897,6 +2931,9 @@ function createFormControl() {
     });
 }
 var generateId = function() {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
     var d = typeof performance === "undefined" ? Date.now() : performance.now() * 1000;
     return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
         var r = (Math.random() * 16 + d) % 16 | 0;
@@ -3012,21 +3049,25 @@ var updateAt = function(fieldValues, index, value1) {
  */ function useFieldArray(props) {
     var methods = useFormContext();
     var _props_control = props.control, control = _props_control === void 0 ? methods.control : _props_control, name = props.name, _props_keyName = props.keyName, keyName = _props_keyName === void 0 ? "id" : _props_keyName, shouldUnregister = props.shouldUnregister, rules = props.rules;
-    var _React__default_useState = _sliced_to_array(React__default["default"].useState(control._getFieldArray(name)), 2), fields = _React__default_useState[0], setFields = _React__default_useState[1];
+    var _React_useState = _sliced_to_array(React__default["default"].useState(control._getFieldArray(name)), 2), fields = _React_useState[0], setFields = _React_useState[1];
     var ids = React__default["default"].useRef(control._getFieldArray(name).map(generateId));
     var _fieldIds = React__default["default"].useRef(fields);
-    var _name = React__default["default"].useRef(name);
     var _actioned = React__default["default"].useRef(false);
-    _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
-    rules && control.register(name, rules);
-    React__default["default"].useEffect(function() {
+    React__default["default"].useMemo(function() {
+        return rules && control.register(name, rules);
+    }, [
+        control,
+        rules,
+        name
+    ]);
+    useIsomorphicLayoutEffect(function() {
         return control._subjects.array.subscribe({
             next: function(param) {
                 var values = param.values, fieldArrayName = param.name;
-                if (fieldArrayName === _name.current || !fieldArrayName) {
-                    var fieldValues = get(values, _name.current);
+                if (fieldArrayName === name || !fieldArrayName) {
+                    var fieldValues = get(values, name);
                     if (Array.isArray(fieldValues)) {
                         setFields(fieldValues);
                         ids.current = fieldValues.map(generateId);
@@ -3035,7 +3076,8 @@ var updateAt = function(fieldValues, index, value1) {
             }
         }).unsubscribe;
     }, [
-        control
+        control,
+        name
     ]);
     var updateValues = React__default["default"].useCallback(function(updatedFieldArrayValues) {
         _actioned.current = true;
@@ -3279,7 +3321,7 @@ var updateAt = function(fieldValues, index, value1) {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _formControl = React__default["default"].useRef(undefined);
     var _values = React__default["default"].useRef(undefined);
-    var _React__default_useState = _sliced_to_array(React__default["default"].useState({
+    var _React_useState = _sliced_to_array(React__default["default"].useState({
         isDirty: false,
         isValidating: false,
         isLoading: isFunction(props.defaultValues),
@@ -3295,13 +3337,22 @@ var updateAt = function(fieldValues, index, value1) {
         disabled: props.disabled || false,
         isReady: false,
         defaultValues: isFunction(props.defaultValues) ? undefined : props.defaultValues
-    }), 2), formState = _React__default_useState[0], updateFormState = _React__default_useState[1];
+    }), 2), formState = _React_useState[0], updateFormState = _React_useState[1];
     if (!_formControl.current) {
-        _formControl.current = _object_spread_props(_object_spread({}, props.formControl ? props.formControl : createFormControl(props)), {
-            formState: formState
-        });
-        if (props.formControl && props.defaultValues && !isFunction(props.defaultValues)) {
-            props.formControl.reset(props.defaultValues, props.resetOptions);
+        if (props.formControl) {
+            _formControl.current = _object_spread_props(_object_spread({}, props.formControl), {
+                formState: formState
+            });
+            if (props.defaultValues && !isFunction(props.defaultValues)) {
+                props.formControl.reset(props.defaultValues, props.resetOptions);
+            }
+        } else {
+            var _createFormControl = createFormControl(props); _createFormControl.formControl; var rest = _object_without_properties(_createFormControl, [
+                "formControl"
+            ]);
+            _formControl.current = _object_spread_props(_object_spread({}, rest), {
+                formState: formState
+            });
         }
     }
     var control = _formControl.current.control;
@@ -3337,15 +3388,20 @@ var updateAt = function(fieldValues, index, value1) {
         if (props.reValidateMode) {
             control._options.reValidateMode = props.reValidateMode;
         }
-        if (props.errors && !isEmptyObject(props.errors)) {
-            control._setErrors(props.errors);
-        }
     }, [
         control,
-        props.errors,
         props.mode,
         props.reValidateMode
     ]);
+    React__default["default"].useEffect(function() {
+        if (props.errors) {
+            control._setErrors(props.errors);
+            control._focusError();
+        }
+    }, [
+        control,
+        props.errors
+    ]);
     React__default["default"].useEffect(function() {
         props.shouldUnregister && control._subjects.state.next({
             values: control._getWatch()
@@ -3369,7 +3425,9 @@ var updateAt = function(fieldValues, index, value1) {
     ]);
     React__default["default"].useEffect(function() {
         if (props.values && !deepEqual(props.values, _values.current)) {
-            control._reset(props.values, control._options.resetOptions);
+            control._reset(props.values, _object_spread({
+                keepFieldsRef: true
+            }, control._options.resetOptions));
             _values.current = props.values;
             updateFormState(function(state) {
                 return _object_spread({}, state);

package/index.esm.css

@@ -3070,13 +3070,10 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 .backdrop-filter {
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }