rsuite 5.70.1 → 5.70.2

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [5.70.2](https://github.com/rsuite/rsuite/compare/v5.70.1...v5.70.2) (2024-09-13)
+
+
+### Bug Fixes
+
+* **Form:** fix the error message of the nested field not displayed when the form is submitted ([#3960](https://github.com/rsuite/rsuite/issues/3960)) ([384dd70](https://github.com/rsuite/rsuite/commit/384dd70b0477470da233217d46af77315ff7089d))
+
+
+
 ## [5.70.1](https://github.com/rsuite/rsuite/compare/v5.70.0...v5.70.1) (2024-09-06)
 
 

package/cjs/Form/Form.js

@@ -58,7 +58,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onError = props.onError,
     onChange = props.onChange,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var _useSchemaModel = (0, _useSchemaModel2.default)(formModel),
+  var _useSchemaModel = (0, _useSchemaModel2.default)(formModel, nestedField),
     getCombinedModel = _useSchemaModel.getCombinedModel,
     pushFieldRule = _useSchemaModel.pushFieldRule,
     removeFieldRule = _useSchemaModel.removeFieldRule;

package/cjs/Form/hooks/useFormValidate.js

@@ -37,12 +37,29 @@ function useFormValidate(formError, props) {
     var formError = {};
     var errorCount = 0;
     var model = getCombinedModel();
-    Object.keys(model.getSchemaSpec()).forEach(function (key) {
-      var checkResult = model.checkForField(key, formValue || {}, checkOptions);
+    var checkField = function checkField(key, type, value, formErrorObj) {
+      var checkResult = type.check(value);
       if (checkResult.hasError === true) {
         errorCount += 1;
-        formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;
+        formErrorObj[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;
+      }
+
+      // Check nested object
+      if (type !== null && type !== void 0 && type.objectTypeSchemaSpec) {
+        Object.entries(type.objectTypeSchemaSpec).forEach(function (_ref) {
+          var nestedKey = _ref[0],
+            nestedType = _ref[1];
+          formErrorObj[key] = formErrorObj[key] || {
+            object: {}
+          };
+          checkField(nestedKey, nestedType, value === null || value === void 0 ? void 0 : value[nestedKey], formErrorObj[key].object);
+        });
       }
+    };
+    Object.entries(model.getSchemaSpec()).forEach(function (_ref2) {
+      var key = _ref2[0],
+        type = _ref2[1];
+      checkField(key, type, formValue[key], formError);
     });
     setFormError(formError);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);

package/cjs/Form/hooks/useSchemaModel.d.ts

@@ -1,7 +1,7 @@
 import type { MutableRefObject } from 'react';
 import type { CheckType, Schema } from 'schema-typed';
 export type FieldRuleType = MutableRefObject<CheckType<unknown, any> | undefined>;
-declare function useSchemaModel(formModel: Schema): {
+declare function useSchemaModel(formModel: Schema, nestedField: boolean): {
     getCombinedModel: () => Schema<any, string>;
     pushFieldRule: (name: string, fieldRule: FieldRuleType) => void;
     removeFieldRule: (name: string) => void;

package/cjs/Form/hooks/useSchemaModel.js

@@ -5,7 +5,59 @@ exports.__esModule = true;
 exports.default = void 0;
 var _schemaTyped = require("schema-typed");
 var _react = require("react");
-function useSchemaModel(formModel) {
+/**
+ * Convert a flat schema object to a nested schema object
+ *
+ * @example
+ *
+ * ```js
+ * const schema = {
+ *  'address.city': StringType().isRequired('City is required'),
+ *  'address.street': StringType().isRequired('Street is required')
+ * };
+ *
+ * const result = unflattenSchemaObject(schema);
+ *
+ * // result
+ * {
+ *    address: ObjectType().shape({
+ *      city: StringType().isRequired('City is required'),
+ *      street: StringType().isRequired('Street is required')
+ *    })
+ * }
+ * ```
+ */
+function unflattenSchemaObject(schema) {
+  var result = {};
+  var $type = Symbol('schema-type');
+  Object.keys(schema).forEach(function (key) {
+    if (key.includes('.')) {
+      var keys = key.split('.');
+      var lastKey = keys.pop() || '';
+      var current = result;
+      keys.forEach(function (subKey) {
+        var _ref;
+        current[subKey] = current[subKey] || (_ref = {}, _ref[$type] = 'object-type', _ref);
+        current = current[subKey];
+      });
+      current[lastKey] = schema[key];
+    } else {
+      result[key] = schema[key];
+    }
+  });
+  function convertToShape(obj) {
+    Object.keys(obj).forEach(function (key) {
+      var _obj$key;
+      if (((_obj$key = obj[key]) === null || _obj$key === void 0 ? void 0 : _obj$key[$type]) === 'object-type') {
+        delete obj[key][$type];
+        obj[key] = (0, _schemaTyped.ObjectType)().shape(convertToShape(obj[key]));
+      }
+    });
+    return obj;
+  }
+  return convertToShape(result);
+}
+function useSchemaModel(formModel, nestedField) {
   var subRulesRef = (0, _react.useRef)([]);
   var pushFieldRule = (0, _react.useCallback)(function (name, fieldRule) {
     subRulesRef.current.push({
@@ -28,15 +80,16 @@ function useSchemaModel(formModel) {
     if (realSubRules.length === 0) {
       return formModel;
     }
-    return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(realSubRules.map(function (_ref) {
-      var _ref2;
-      var name = _ref.name,
-        fieldRule = _ref.fieldRule;
-      return _ref2 = {}, _ref2[name] = fieldRule.current, _ref2;
+    var subRuleObject = realSubRules.map(function (_ref2) {
+      var _ref3;
+      var name = _ref2.name,
+        fieldRule = _ref2.fieldRule;
+      return _ref3 = {}, _ref3[name] = fieldRule.current, _ref3;
     }).reduce(function (a, b) {
       return Object.assign(a, b);
-    }, {})));
-  }, [formModel]);
+    }, {});
+    return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(nestedField ? unflattenSchemaObject(subRuleObject) : subRuleObject));
+  }, [formModel, nestedField]);
   return {
     getCombinedModel: getCombinedModel,
     pushFieldRule: pushFieldRule,

package/cjs/FormControl/hooks/useField.js

@@ -11,6 +11,10 @@ var _set = _interopRequireDefault(require("lodash/set"));
 var _utils = require("../utils");
 function getErrorMessage(error) {
   var _error$array;
+  if (typeof error === 'string') {
+    return error;
+  }
+
   /**
    * When using some components as the field, such as TagInput, and using `ArrayType().of` as the validation rule,
    * the error object won't contain the errorMessage directly. @see https://github.com/rsuite/rsuite/issues/3866

package/dist/rsuite.js

@@ -7473,7 +7473,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _FormContext = __webpack_require__(/*! ./FormContext */ \"./src/Form/FormContext.tsx\");\nvar _FormControl = _interopRequireDefault(__webpack_require__(/*! ../FormControl */ \"./src/FormControl/index.tsx\"));\nvar _FormControlLabel = _interopRequireDefault(__webpack_require__(/*! ../FormControlLabel */ \"./src/FormControlLabel/index.tsx\"));\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\nvar _FormGroup = _interopRequireDefault(__webpack_require__(/*! ../FormGroup */ \"./src/FormGroup/index.tsx\"));\nvar _FormHelpText = _interopRequireDefault(__webpack_require__(/*! ../FormHelpText */ \"./src/FormHelpText/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _useSchemaModel2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useSchemaModel */ \"./src/Form/hooks/useSchemaModel.ts\"));\nvar _useFormValidate2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValidate */ \"./src/Form/hooks/useFormValidate.ts\"));\nvar _useFormValue2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValue */ \"./src/Form/hooks/useFormValue.ts\"));\nvar _useFormClassNames = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormClassNames */ \"./src/Form/hooks/useFormClassNames.ts\"));\nvar _useFormRef = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormRef */ \"./src/Form/hooks/useFormRef.ts\"));\nvar _excluded = [\"checkTrigger\", \"classPrefix\", \"errorFromContext\", \"formDefaultValue\", \"formValue\", \"formError\", \"fluid\", \"nestedField\", \"layout\", \"model\", \"readOnly\", \"plaintext\", \"className\", \"children\", \"disabled\", \"onSubmit\", \"onReset\", \"onCheck\", \"onError\", \"onChange\"];\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Form/Form.tsx\",\n  _this = void 0;\nvar defaultSchema = (0, _schemaTyped.SchemaModel)({});\n\n/**\n * The `Form` component is a form interface for collecting and validating user input.\n * @see https://rsuitejs.com/components/form\n */\nvar Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$checkTrigger = props.checkTrigger,\n    checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'form' : _props$classPrefix,\n    _props$errorFromConte = props.errorFromContext,\n    errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,\n    _props$formDefaultVal = props.formDefaultValue,\n    formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,\n    controlledFormValue = props.formValue,\n    controlledFormError = props.formError,\n    fluid = props.fluid,\n    _props$nestedField = props.nestedField,\n    nestedField = _props$nestedField === void 0 ? false : _props$nestedField,\n    _props$layout = props.layout,\n    layout = _props$layout === void 0 ? 'vertical' : _props$layout,\n    _props$model = props.model,\n    formModel = _props$model === void 0 ? defaultSchema : _props$model,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    className = props.className,\n    children = props.children,\n    disabled = props.disabled,\n    onSubmit = props.onSubmit,\n    onReset = props.onReset,\n    onCheck = props.onCheck,\n    onError = props.onError,\n    onChange = props.onChange,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);\n  var _useSchemaModel = (0, _useSchemaModel2.default)(formModel),\n    getCombinedModel = _useSchemaModel.getCombinedModel,\n    pushFieldRule = _useSchemaModel.pushFieldRule,\n    removeFieldRule = _useSchemaModel.removeFieldRule;\n  var _useFormValue = (0, _useFormValue2.default)(controlledFormValue, {\n      formDefaultValue: formDefaultValue,\n      nestedField: nestedField\n    }),\n    formValue = _useFormValue.formValue,\n    onRemoveValue = _useFormValue.onRemoveValue,\n    setFieldValue = _useFormValue.setFieldValue,\n    resetFormValue = _useFormValue.resetFormValue;\n  var formValidateProps = {\n    formValue: formValue,\n    getCombinedModel: getCombinedModel,\n    onCheck: onCheck,\n    onError: onError,\n    nestedField: nestedField\n  };\n  var _useFormValidate = (0, _useFormValidate2.default)(controlledFormError, formValidateProps),\n    formError = _useFormValidate.formError,\n    onRemoveError = _useFormValidate.onRemoveError,\n    check = _useFormValidate.check,\n    checkAsync = _useFormValidate.checkAsync,\n    checkForField = _useFormValidate.checkForField,\n    checkFieldForNextValue = _useFormValidate.checkFieldForNextValue,\n    checkForFieldAsync = _useFormValidate.checkForFieldAsync,\n    checkFieldAsyncForNextValue = _useFormValidate.checkFieldAsyncForNextValue,\n    cleanErrors = _useFormValidate.cleanErrors,\n    resetErrors = _useFormValidate.resetErrors,\n    cleanErrorForField = _useFormValidate.cleanErrorForField;\n  var classes = (0, _useFormClassNames.default)({\n    classPrefix: classPrefix,\n    className: className,\n    fluid: fluid,\n    layout: layout,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled\n  });\n  var submit = (0, _hooks.useEventCallback)(function (event) {\n    // Check the form before submitting\n    if (check()) {\n      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formValue, event);\n    }\n  });\n  var reset = (0, _hooks.useEventCallback)(function (event) {\n    resetErrors();\n    onReset === null || onReset === void 0 ? void 0 : onReset(resetFormValue(), event);\n  });\n  var handleSubmit = (0, _hooks.useEventCallback)(function (event) {\n    var _event$preventDefault, _event$stopPropagatio;\n    event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);\n    event === null || event === void 0 ? void 0 : (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 ? void 0 : _event$stopPropagatio.call(event);\n\n    // Prevent submission when the form is disabled, readOnly, or plaintext\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    submit();\n  });\n  var handleReset = (0, _hooks.useEventCallback)(function (event) {\n    var _event$preventDefault2, _event$stopPropagatio2;\n    event === null || event === void 0 ? void 0 : (_event$preventDefault2 = event.preventDefault) === null || _event$preventDefault2 === void 0 ? void 0 : _event$preventDefault2.call(event);\n    event === null || event === void 0 ? void 0 : (_event$stopPropagatio2 = event.stopPropagation) === null || _event$stopPropagatio2 === void 0 ? void 0 : _event$stopPropagatio2.call(event);\n\n    // Prevent reset when the form is disabled, readOnly, or plaintext\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    reset(event);\n  });\n  var imperativeMethods = {\n    check: check,\n    checkForField: checkForField,\n    checkAsync: checkAsync,\n    checkForFieldAsync: checkForFieldAsync,\n    cleanErrors: cleanErrors,\n    cleanErrorForField: cleanErrorForField,\n    reset: reset,\n    resetErrors: resetErrors,\n    submit: submit\n  };\n  var formRef = (0, _useFormRef.default)(ref, {\n    imperativeMethods: imperativeMethods\n  });\n  var removeFieldValue = (0, _hooks.useEventCallback)(function (name) {\n    var formValue = onRemoveValue(name);\n    onChange === null || onChange === void 0 ? void 0 : onChange(formValue);\n  });\n  var removeFieldError = (0, _hooks.useEventCallback)(function (name) {\n    onRemoveError(name);\n  });\n  var onFieldChange = (0, _hooks.useEventCallback)(function (name, value, event) {\n    var nextFormValue = setFieldValue(name, value);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);\n  });\n  var formContextValue = {\n    errorFromContext: errorFromContext,\n    checkTrigger: checkTrigger,\n    plaintext: plaintext,\n    readOnly: readOnly,\n    disabled: disabled,\n    formError: formError,\n    nestedField: nestedField,\n    pushFieldRule: pushFieldRule,\n    removeFieldValue: removeFieldValue,\n    removeFieldError: removeFieldError,\n    removeFieldRule: removeFieldRule,\n    onFieldChange: onFieldChange,\n    checkFieldForNextValue: checkFieldForNextValue,\n    checkFieldAsyncForNextValue: checkFieldAsyncForNextValue\n  };\n  return /*#__PURE__*/_react.default.createElement(\"form\", (0, _extends2.default)({}, rest, {\n    ref: formRef,\n    onSubmit: handleSubmit,\n    onReset: handleReset,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 285,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_FormContext.FormProvider, {\n    value: formContextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 286,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueProvider, {\n    value: formValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 287,\n      columnNumber: 9\n    }\n  }, children)));\n});\nForm.Control = _FormControl.default;\nForm.ControlLabel = _FormControlLabel.default;\nForm.ErrorMessage = _FormErrorMessage.default;\nForm.Group = _FormGroup.default;\nForm.HelpText = _FormHelpText.default;\nForm.displayName = 'Form';\nForm.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  errorFromContext: _propTypes.default.bool,\n  layout: (0, _propTypes2.oneOf)(['horizontal', 'vertical', 'inline']),\n  fluid: _propTypes.default.bool,\n  formValue: _propTypes.default.object,\n  formDefaultValue: _propTypes.default.object,\n  formError: _propTypes.default.object,\n  checkTrigger: (0, _propTypes2.oneOf)(['change', 'blur', 'none']),\n  onChange: _propTypes.default.func,\n  onError: _propTypes.default.func,\n  onCheck: _propTypes.default.func,\n  onSubmit: _propTypes.default.func,\n  model: _propTypes.default.any,\n  readOnly: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  disabled: _propTypes.default.bool\n};\nvar _default = exports[\"default\"] = Form;\n\n//# sourceURL=webpack://rsuite/./src/Form/Form.tsx?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _react = _interopRequireDefault(__webpack_require__(/*! react */ \"react\"));\nvar _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\"));\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _FormContext = __webpack_require__(/*! ./FormContext */ \"./src/Form/FormContext.tsx\");\nvar _FormControl = _interopRequireDefault(__webpack_require__(/*! ../FormControl */ \"./src/FormControl/index.tsx\"));\nvar _FormControlLabel = _interopRequireDefault(__webpack_require__(/*! ../FormControlLabel */ \"./src/FormControlLabel/index.tsx\"));\nvar _FormErrorMessage = _interopRequireDefault(__webpack_require__(/*! ../FormErrorMessage */ \"./src/FormErrorMessage/index.tsx\"));\nvar _FormGroup = _interopRequireDefault(__webpack_require__(/*! ../FormGroup */ \"./src/FormGroup/index.tsx\"));\nvar _FormHelpText = _interopRequireDefault(__webpack_require__(/*! ../FormHelpText */ \"./src/FormHelpText/index.tsx\"));\nvar _hooks = __webpack_require__(/*! ../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _propTypes2 = __webpack_require__(/*! ../internals/propTypes */ \"./src/internals/propTypes/index.ts\");\nvar _useSchemaModel2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useSchemaModel */ \"./src/Form/hooks/useSchemaModel.ts\"));\nvar _useFormValidate2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValidate */ \"./src/Form/hooks/useFormValidate.ts\"));\nvar _useFormValue2 = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormValue */ \"./src/Form/hooks/useFormValue.ts\"));\nvar _useFormClassNames = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormClassNames */ \"./src/Form/hooks/useFormClassNames.ts\"));\nvar _useFormRef = _interopRequireDefault(__webpack_require__(/*! ./hooks/useFormRef */ \"./src/Form/hooks/useFormRef.ts\"));\nvar _excluded = [\"checkTrigger\", \"classPrefix\", \"errorFromContext\", \"formDefaultValue\", \"formValue\", \"formError\", \"fluid\", \"nestedField\", \"layout\", \"model\", \"readOnly\", \"plaintext\", \"className\", \"children\", \"disabled\", \"onSubmit\", \"onReset\", \"onCheck\", \"onError\", \"onChange\"];\nvar _jsxFileName = \"/home/runner/work/rsuite/rsuite/src/Form/Form.tsx\",\n  _this = void 0;\nvar defaultSchema = (0, _schemaTyped.SchemaModel)({});\n\n/**\n * The `Form` component is a form interface for collecting and validating user input.\n * @see https://rsuitejs.com/components/form\n */\nvar Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {\n  var _props$checkTrigger = props.checkTrigger,\n    checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,\n    _props$classPrefix = props.classPrefix,\n    classPrefix = _props$classPrefix === void 0 ? 'form' : _props$classPrefix,\n    _props$errorFromConte = props.errorFromContext,\n    errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,\n    _props$formDefaultVal = props.formDefaultValue,\n    formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,\n    controlledFormValue = props.formValue,\n    controlledFormError = props.formError,\n    fluid = props.fluid,\n    _props$nestedField = props.nestedField,\n    nestedField = _props$nestedField === void 0 ? false : _props$nestedField,\n    _props$layout = props.layout,\n    layout = _props$layout === void 0 ? 'vertical' : _props$layout,\n    _props$model = props.model,\n    formModel = _props$model === void 0 ? defaultSchema : _props$model,\n    readOnly = props.readOnly,\n    plaintext = props.plaintext,\n    className = props.className,\n    children = props.children,\n    disabled = props.disabled,\n    onSubmit = props.onSubmit,\n    onReset = props.onReset,\n    onCheck = props.onCheck,\n    onError = props.onError,\n    onChange = props.onChange,\n    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);\n  var _useSchemaModel = (0, _useSchemaModel2.default)(formModel, nestedField),\n    getCombinedModel = _useSchemaModel.getCombinedModel,\n    pushFieldRule = _useSchemaModel.pushFieldRule,\n    removeFieldRule = _useSchemaModel.removeFieldRule;\n  var _useFormValue = (0, _useFormValue2.default)(controlledFormValue, {\n      formDefaultValue: formDefaultValue,\n      nestedField: nestedField\n    }),\n    formValue = _useFormValue.formValue,\n    onRemoveValue = _useFormValue.onRemoveValue,\n    setFieldValue = _useFormValue.setFieldValue,\n    resetFormValue = _useFormValue.resetFormValue;\n  var formValidateProps = {\n    formValue: formValue,\n    getCombinedModel: getCombinedModel,\n    onCheck: onCheck,\n    onError: onError,\n    nestedField: nestedField\n  };\n  var _useFormValidate = (0, _useFormValidate2.default)(controlledFormError, formValidateProps),\n    formError = _useFormValidate.formError,\n    onRemoveError = _useFormValidate.onRemoveError,\n    check = _useFormValidate.check,\n    checkAsync = _useFormValidate.checkAsync,\n    checkForField = _useFormValidate.checkForField,\n    checkFieldForNextValue = _useFormValidate.checkFieldForNextValue,\n    checkForFieldAsync = _useFormValidate.checkForFieldAsync,\n    checkFieldAsyncForNextValue = _useFormValidate.checkFieldAsyncForNextValue,\n    cleanErrors = _useFormValidate.cleanErrors,\n    resetErrors = _useFormValidate.resetErrors,\n    cleanErrorForField = _useFormValidate.cleanErrorForField;\n  var classes = (0, _useFormClassNames.default)({\n    classPrefix: classPrefix,\n    className: className,\n    fluid: fluid,\n    layout: layout,\n    readOnly: readOnly,\n    plaintext: plaintext,\n    disabled: disabled\n  });\n  var submit = (0, _hooks.useEventCallback)(function (event) {\n    // Check the form before submitting\n    if (check()) {\n      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formValue, event);\n    }\n  });\n  var reset = (0, _hooks.useEventCallback)(function (event) {\n    resetErrors();\n    onReset === null || onReset === void 0 ? void 0 : onReset(resetFormValue(), event);\n  });\n  var handleSubmit = (0, _hooks.useEventCallback)(function (event) {\n    var _event$preventDefault, _event$stopPropagatio;\n    event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);\n    event === null || event === void 0 ? void 0 : (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 ? void 0 : _event$stopPropagatio.call(event);\n\n    // Prevent submission when the form is disabled, readOnly, or plaintext\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    submit();\n  });\n  var handleReset = (0, _hooks.useEventCallback)(function (event) {\n    var _event$preventDefault2, _event$stopPropagatio2;\n    event === null || event === void 0 ? void 0 : (_event$preventDefault2 = event.preventDefault) === null || _event$preventDefault2 === void 0 ? void 0 : _event$preventDefault2.call(event);\n    event === null || event === void 0 ? void 0 : (_event$stopPropagatio2 = event.stopPropagation) === null || _event$stopPropagatio2 === void 0 ? void 0 : _event$stopPropagatio2.call(event);\n\n    // Prevent reset when the form is disabled, readOnly, or plaintext\n    if (disabled || readOnly || plaintext) {\n      return;\n    }\n    reset(event);\n  });\n  var imperativeMethods = {\n    check: check,\n    checkForField: checkForField,\n    checkAsync: checkAsync,\n    checkForFieldAsync: checkForFieldAsync,\n    cleanErrors: cleanErrors,\n    cleanErrorForField: cleanErrorForField,\n    reset: reset,\n    resetErrors: resetErrors,\n    submit: submit\n  };\n  var formRef = (0, _useFormRef.default)(ref, {\n    imperativeMethods: imperativeMethods\n  });\n  var removeFieldValue = (0, _hooks.useEventCallback)(function (name) {\n    var formValue = onRemoveValue(name);\n    onChange === null || onChange === void 0 ? void 0 : onChange(formValue);\n  });\n  var removeFieldError = (0, _hooks.useEventCallback)(function (name) {\n    onRemoveError(name);\n  });\n  var onFieldChange = (0, _hooks.useEventCallback)(function (name, value, event) {\n    var nextFormValue = setFieldValue(name, value);\n    onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);\n  });\n  var formContextValue = {\n    errorFromContext: errorFromContext,\n    checkTrigger: checkTrigger,\n    plaintext: plaintext,\n    readOnly: readOnly,\n    disabled: disabled,\n    formError: formError,\n    nestedField: nestedField,\n    pushFieldRule: pushFieldRule,\n    removeFieldValue: removeFieldValue,\n    removeFieldError: removeFieldError,\n    removeFieldRule: removeFieldRule,\n    onFieldChange: onFieldChange,\n    checkFieldForNextValue: checkFieldForNextValue,\n    checkFieldAsyncForNextValue: checkFieldAsyncForNextValue\n  };\n  return /*#__PURE__*/_react.default.createElement(\"form\", (0, _extends2.default)({}, rest, {\n    ref: formRef,\n    onSubmit: handleSubmit,\n    onReset: handleReset,\n    className: classes,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 288,\n      columnNumber: 5\n    }\n  }), /*#__PURE__*/_react.default.createElement(_FormContext.FormProvider, {\n    value: formContextValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 289,\n      columnNumber: 7\n    }\n  }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueProvider, {\n    value: formValue,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 290,\n      columnNumber: 9\n    }\n  }, children)));\n});\nForm.Control = _FormControl.default;\nForm.ControlLabel = _FormControlLabel.default;\nForm.ErrorMessage = _FormErrorMessage.default;\nForm.Group = _FormGroup.default;\nForm.HelpText = _FormHelpText.default;\nForm.displayName = 'Form';\nForm.propTypes = {\n  className: _propTypes.default.string,\n  classPrefix: _propTypes.default.string,\n  children: _propTypes.default.node,\n  errorFromContext: _propTypes.default.bool,\n  layout: (0, _propTypes2.oneOf)(['horizontal', 'vertical', 'inline']),\n  fluid: _propTypes.default.bool,\n  formValue: _propTypes.default.object,\n  formDefaultValue: _propTypes.default.object,\n  formError: _propTypes.default.object,\n  checkTrigger: (0, _propTypes2.oneOf)(['change', 'blur', 'none']),\n  onChange: _propTypes.default.func,\n  onError: _propTypes.default.func,\n  onCheck: _propTypes.default.func,\n  onSubmit: _propTypes.default.func,\n  model: _propTypes.default.any,\n  readOnly: _propTypes.default.bool,\n  plaintext: _propTypes.default.bool,\n  disabled: _propTypes.default.bool\n};\nvar _default = exports[\"default\"] = Form;\n\n//# sourceURL=webpack://rsuite/./src/Form/Form.tsx?");
 
 /***/ }),
 
@@ -7517,7 +7517,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = useFormValidate;\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _set = _interopRequireDefault(__webpack_require__(/*! lodash/set */ \"./node_modules/lodash/set.js\"));\nvar _hooks = __webpack_require__(/*! ../../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../../FormControl/utils */ \"./src/FormControl/utils.ts\");\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != typeof i) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction useFormValidate(formError, props) {\n  var formValue = props.formValue,\n    getCombinedModel = props.getCombinedModel,\n    onCheck = props.onCheck,\n    onError = props.onError,\n    nestedField = props.nestedField;\n  var _useControlled = (0, _hooks.useControlled)(formError, {}),\n    realFormError = _useControlled[0],\n    setFormError = _useControlled[1];\n  var checkOptions = {\n    nestedObject: nestedField\n  };\n  var realFormErrorRef = (0, _react.useRef)(realFormError);\n  realFormErrorRef.current = realFormError;\n\n  /**\n   * Validate the form data and return a boolean.\n   * The error message after verification is returned in the callback.\n   * @param callback\n   */\n  var check = (0, _hooks.useEventCallback)(function (callback) {\n    var formError = {};\n    var errorCount = 0;\n    var model = getCombinedModel();\n    Object.keys(model.getSchemaSpec()).forEach(function (key) {\n      var checkResult = model.checkForField(key, formValue || {}, checkOptions);\n      if (checkResult.hasError === true) {\n        errorCount += 1;\n        formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;\n      }\n    });\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    callback === null || callback === void 0 ? void 0 : callback(formError);\n    if (errorCount > 0) {\n      onError === null || onError === void 0 ? void 0 : onError(formError);\n      return false;\n    }\n    return true;\n  });\n  var checkFieldForNextValue = (0, _hooks.useEventCallback)(function (fieldName, nextValue, callback) {\n    var model = getCombinedModel();\n    var resultOfCurrentField = model.checkForField(fieldName, nextValue, checkOptions);\n    var nextFormError = (0, _extends2.default)({}, formError);\n    /**\n     * when using proxy of schema-typed, we need to use getCheckResult to get all errors,\n     * but if nestedField is used, it is impossible to distinguish whether the nested object has an error here,\n     * so nestedField does not support proxy here\n     */\n    if (nestedField) {\n      nextFormError = (0, _set.default)(nextFormError, (0, _utils.nameToPath)(fieldName), resultOfCurrentField);\n      setFormError(nextFormError);\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n      callback === null || callback === void 0 ? void 0 : callback(resultOfCurrentField);\n      if (resultOfCurrentField.hasError) {\n        onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n      }\n      return !resultOfCurrentField.hasError;\n    } else {\n      var allResults = model.getCheckResult();\n      var hasError = false;\n      Object.keys(allResults).forEach(function (key) {\n        var currentResult = allResults[key];\n        if (currentResult.hasError) {\n          nextFormError[key] = currentResult.errorMessage || currentResult;\n          hasError = true;\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          var _nextFormError = nextFormError,\n            _ = _nextFormError[key],\n            rest = (0, _objectWithoutPropertiesLoose2.default)(_nextFormError, [key].map(_toPropertyKey));\n          nextFormError = rest;\n        }\n      });\n      setFormError(nextFormError);\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n      callback === null || callback === void 0 ? void 0 : callback(resultOfCurrentField);\n      if (hasError) {\n        onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n      }\n      return !hasError;\n    }\n  });\n  /**\n   * Check the data field\n   * @param fieldName\n   * @param callback\n   */\n  var checkForField = (0, _hooks.useEventCallback)(function (fieldName, callback) {\n    return checkFieldForNextValue(fieldName, formValue || {}, callback);\n  });\n\n  /**\n   * Check form data asynchronously and return a Promise\n   */\n  var checkAsync = (0, _hooks.useEventCallback)(function () {\n    var promises = [];\n    var keys = [];\n    var model = getCombinedModel();\n    Object.keys(model.getSchemaSpec()).forEach(function (key) {\n      keys.push(key);\n      promises.push(model.checkForFieldAsync(key, formValue || {}, checkOptions));\n    });\n    return Promise.all(promises).then(function (values) {\n      var formError = {};\n      var errorCount = 0;\n      for (var i = 0; i < values.length; i++) {\n        if (values[i].hasError) {\n          errorCount += 1;\n          formError[keys[i]] = values[i].errorMessage;\n        }\n      }\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n      setFormError(formError);\n      if (errorCount > 0) {\n        onError === null || onError === void 0 ? void 0 : onError(formError);\n      }\n      return {\n        hasError: errorCount > 0,\n        formError: formError\n      };\n    });\n  });\n  var checkFieldAsyncForNextValue = (0, _hooks.useEventCallback)(function (fieldName, nextValue) {\n    var model = getCombinedModel();\n    return model.checkForFieldAsync(fieldName, nextValue, checkOptions).then(function (resultOfCurrentField) {\n      var nextFormError = (0, _extends2.default)({}, formError);\n      /**\n       * when using proxy of schema-typed, we need to use getCheckResult to get all errors,\n       * but if nestedField is used, it is impossible to distinguish whether the nested object has an error here,\n       * so nestedField does not support proxy here\n       */\n\n      if (nestedField) {\n        nextFormError = (0, _set.default)(nextFormError, (0, _utils.nameToPath)(fieldName), resultOfCurrentField);\n        onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n        setFormError(nextFormError);\n        if (resultOfCurrentField.hasError) {\n          onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n        }\n        return resultOfCurrentField;\n      } else {\n        var allResults = model.getCheckResult();\n        var hasError = false;\n        Object.keys(allResults).forEach(function (key) {\n          var currentResult = allResults[key];\n          if (currentResult.hasError) {\n            nextFormError[key] = currentResult.errorMessage || currentResult;\n            hasError = true;\n          } else {\n            // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            var _nextFormError2 = nextFormError,\n              _ = _nextFormError2[key],\n              rest = (0, _objectWithoutPropertiesLoose2.default)(_nextFormError2, [key].map(_toPropertyKey));\n            nextFormError = rest;\n          }\n        });\n        setFormError(nextFormError);\n        onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n        if (hasError) {\n          onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n        }\n        return resultOfCurrentField;\n      }\n    });\n  });\n\n  /**\n   * Asynchronously check form fields and return Promise\n   * @param fieldName\n   */\n  var checkForFieldAsync = (0, _hooks.useEventCallback)(function (fieldName) {\n    return checkFieldAsyncForNextValue(fieldName, formValue || {});\n  });\n  var onRemoveError = (0, _react.useCallback)(function (name) {\n    /**\n     * when this function is called when the children component is unmount,\n     * it's an old render frame so use Ref to get future error\n     */\n    var formError = (0, _omit.default)(realFormErrorRef.current, [nestedField ? (0, _utils.nameToPath)(name) : name]);\n    realFormErrorRef.current = formError;\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    return formError;\n  }, [nestedField, onCheck, setFormError]);\n  var cleanErrors = (0, _hooks.useEventCallback)(function () {\n    setFormError({});\n  });\n  var resetErrors = (0, _hooks.useEventCallback)(function (formError) {\n    if (formError === void 0) {\n      formError = {};\n    }\n    setFormError(formError);\n  });\n  var cleanErrorForField = (0, _hooks.useEventCallback)(function (fieldName) {\n    setFormError((0, _omit.default)(formError, [nestedField ? (0, _utils.nameToPath)(fieldName) : fieldName]));\n  });\n  return {\n    formError: realFormError,\n    check: check,\n    checkForField: checkForField,\n    checkFieldForNextValue: checkFieldForNextValue,\n    checkAsync: checkAsync,\n    checkForFieldAsync: checkForFieldAsync,\n    checkFieldAsyncForNextValue: checkFieldAsyncForNextValue,\n    cleanErrors: cleanErrors,\n    resetErrors: resetErrors,\n    cleanErrorForField: cleanErrorForField,\n    onRemoveError: onRemoveError\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useFormValidate.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = useFormValidate;\nvar _objectWithoutPropertiesLoose2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js\"));\nvar _extends2 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _omit = _interopRequireDefault(__webpack_require__(/*! lodash/omit */ \"./node_modules/lodash/omit.js\"));\nvar _set = _interopRequireDefault(__webpack_require__(/*! lodash/set */ \"./node_modules/lodash/set.js\"));\nvar _hooks = __webpack_require__(/*! ../../internals/hooks */ \"./src/internals/hooks/index.ts\");\nvar _utils = __webpack_require__(/*! ../../FormControl/utils */ \"./src/FormControl/utils.ts\");\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != typeof i) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction useFormValidate(formError, props) {\n  var formValue = props.formValue,\n    getCombinedModel = props.getCombinedModel,\n    onCheck = props.onCheck,\n    onError = props.onError,\n    nestedField = props.nestedField;\n  var _useControlled = (0, _hooks.useControlled)(formError, {}),\n    realFormError = _useControlled[0],\n    setFormError = _useControlled[1];\n  var checkOptions = {\n    nestedObject: nestedField\n  };\n  var realFormErrorRef = (0, _react.useRef)(realFormError);\n  realFormErrorRef.current = realFormError;\n\n  /**\n   * Validate the form data and return a boolean.\n   * The error message after verification is returned in the callback.\n   * @param callback\n   */\n  var check = (0, _hooks.useEventCallback)(function (callback) {\n    var formError = {};\n    var errorCount = 0;\n    var model = getCombinedModel();\n    var checkField = function checkField(key, type, value, formErrorObj) {\n      var checkResult = type.check(value);\n      if (checkResult.hasError === true) {\n        errorCount += 1;\n        formErrorObj[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;\n      }\n\n      // Check nested object\n      if (type !== null && type !== void 0 && type.objectTypeSchemaSpec) {\n        Object.entries(type.objectTypeSchemaSpec).forEach(function (_ref) {\n          var nestedKey = _ref[0],\n            nestedType = _ref[1];\n          formErrorObj[key] = formErrorObj[key] || {\n            object: {}\n          };\n          checkField(nestedKey, nestedType, value === null || value === void 0 ? void 0 : value[nestedKey], formErrorObj[key].object);\n        });\n      }\n    };\n    Object.entries(model.getSchemaSpec()).forEach(function (_ref2) {\n      var key = _ref2[0],\n        type = _ref2[1];\n      checkField(key, type, formValue[key], formError);\n    });\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    callback === null || callback === void 0 ? void 0 : callback(formError);\n    if (errorCount > 0) {\n      onError === null || onError === void 0 ? void 0 : onError(formError);\n      return false;\n    }\n    return true;\n  });\n  var checkFieldForNextValue = (0, _hooks.useEventCallback)(function (fieldName, nextValue, callback) {\n    var model = getCombinedModel();\n    var resultOfCurrentField = model.checkForField(fieldName, nextValue, checkOptions);\n    var nextFormError = (0, _extends2.default)({}, formError);\n    /**\n     * when using proxy of schema-typed, we need to use getCheckResult to get all errors,\n     * but if nestedField is used, it is impossible to distinguish whether the nested object has an error here,\n     * so nestedField does not support proxy here\n     */\n    if (nestedField) {\n      nextFormError = (0, _set.default)(nextFormError, (0, _utils.nameToPath)(fieldName), resultOfCurrentField);\n      setFormError(nextFormError);\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n      callback === null || callback === void 0 ? void 0 : callback(resultOfCurrentField);\n      if (resultOfCurrentField.hasError) {\n        onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n      }\n      return !resultOfCurrentField.hasError;\n    } else {\n      var allResults = model.getCheckResult();\n      var hasError = false;\n      Object.keys(allResults).forEach(function (key) {\n        var currentResult = allResults[key];\n        if (currentResult.hasError) {\n          nextFormError[key] = currentResult.errorMessage || currentResult;\n          hasError = true;\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          var _nextFormError = nextFormError,\n            _ = _nextFormError[key],\n            rest = (0, _objectWithoutPropertiesLoose2.default)(_nextFormError, [key].map(_toPropertyKey));\n          nextFormError = rest;\n        }\n      });\n      setFormError(nextFormError);\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n      callback === null || callback === void 0 ? void 0 : callback(resultOfCurrentField);\n      if (hasError) {\n        onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n      }\n      return !hasError;\n    }\n  });\n  /**\n   * Check the data field\n   * @param fieldName\n   * @param callback\n   */\n  var checkForField = (0, _hooks.useEventCallback)(function (fieldName, callback) {\n    return checkFieldForNextValue(fieldName, formValue || {}, callback);\n  });\n\n  /**\n   * Check form data asynchronously and return a Promise\n   */\n  var checkAsync = (0, _hooks.useEventCallback)(function () {\n    var promises = [];\n    var keys = [];\n    var model = getCombinedModel();\n    Object.keys(model.getSchemaSpec()).forEach(function (key) {\n      keys.push(key);\n      promises.push(model.checkForFieldAsync(key, formValue || {}, checkOptions));\n    });\n    return Promise.all(promises).then(function (values) {\n      var formError = {};\n      var errorCount = 0;\n      for (var i = 0; i < values.length; i++) {\n        if (values[i].hasError) {\n          errorCount += 1;\n          formError[keys[i]] = values[i].errorMessage;\n        }\n      }\n      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n      setFormError(formError);\n      if (errorCount > 0) {\n        onError === null || onError === void 0 ? void 0 : onError(formError);\n      }\n      return {\n        hasError: errorCount > 0,\n        formError: formError\n      };\n    });\n  });\n  var checkFieldAsyncForNextValue = (0, _hooks.useEventCallback)(function (fieldName, nextValue) {\n    var model = getCombinedModel();\n    return model.checkForFieldAsync(fieldName, nextValue, checkOptions).then(function (resultOfCurrentField) {\n      var nextFormError = (0, _extends2.default)({}, formError);\n      /**\n       * when using proxy of schema-typed, we need to use getCheckResult to get all errors,\n       * but if nestedField is used, it is impossible to distinguish whether the nested object has an error here,\n       * so nestedField does not support proxy here\n       */\n\n      if (nestedField) {\n        nextFormError = (0, _set.default)(nextFormError, (0, _utils.nameToPath)(fieldName), resultOfCurrentField);\n        onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n        setFormError(nextFormError);\n        if (resultOfCurrentField.hasError) {\n          onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n        }\n        return resultOfCurrentField;\n      } else {\n        var allResults = model.getCheckResult();\n        var hasError = false;\n        Object.keys(allResults).forEach(function (key) {\n          var currentResult = allResults[key];\n          if (currentResult.hasError) {\n            nextFormError[key] = currentResult.errorMessage || currentResult;\n            hasError = true;\n          } else {\n            // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            var _nextFormError2 = nextFormError,\n              _ = _nextFormError2[key],\n              rest = (0, _objectWithoutPropertiesLoose2.default)(_nextFormError2, [key].map(_toPropertyKey));\n            nextFormError = rest;\n          }\n        });\n        setFormError(nextFormError);\n        onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);\n        if (hasError) {\n          onError === null || onError === void 0 ? void 0 : onError(nextFormError);\n        }\n        return resultOfCurrentField;\n      }\n    });\n  });\n\n  /**\n   * Asynchronously check form fields and return Promise\n   * @param fieldName\n   */\n  var checkForFieldAsync = (0, _hooks.useEventCallback)(function (fieldName) {\n    return checkFieldAsyncForNextValue(fieldName, formValue || {});\n  });\n  var onRemoveError = (0, _react.useCallback)(function (name) {\n    /**\n     * when this function is called when the children component is unmount,\n     * it's an old render frame so use Ref to get future error\n     */\n    var formError = (0, _omit.default)(realFormErrorRef.current, [nestedField ? (0, _utils.nameToPath)(name) : name]);\n    realFormErrorRef.current = formError;\n    setFormError(formError);\n    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);\n    return formError;\n  }, [nestedField, onCheck, setFormError]);\n  var cleanErrors = (0, _hooks.useEventCallback)(function () {\n    setFormError({});\n  });\n  var resetErrors = (0, _hooks.useEventCallback)(function (formError) {\n    if (formError === void 0) {\n      formError = {};\n    }\n    setFormError(formError);\n  });\n  var cleanErrorForField = (0, _hooks.useEventCallback)(function (fieldName) {\n    setFormError((0, _omit.default)(formError, [nestedField ? (0, _utils.nameToPath)(fieldName) : fieldName]));\n  });\n  return {\n    formError: realFormError,\n    check: check,\n    checkForField: checkForField,\n    checkFieldForNextValue: checkFieldForNextValue,\n    checkAsync: checkAsync,\n    checkForFieldAsync: checkForFieldAsync,\n    checkFieldAsyncForNextValue: checkFieldAsyncForNextValue,\n    cleanErrors: cleanErrors,\n    resetErrors: resetErrors,\n    cleanErrorForField: cleanErrorForField,\n    onRemoveError: onRemoveError\n  };\n}\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useFormValidate.ts?");
 
 /***/ }),
 
@@ -7539,7 +7539,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _react = __webpack_require__(/*! react */ \"react\");\nfunction useSchemaModel(formModel) {\n  var subRulesRef = (0, _react.useRef)([]);\n  var pushFieldRule = (0, _react.useCallback)(function (name, fieldRule) {\n    subRulesRef.current.push({\n      name: name,\n      fieldRule: fieldRule\n    });\n  }, []);\n  var removeFieldRule = (0, _react.useCallback)(function (name) {\n    var index = subRulesRef.current.findIndex(function (v) {\n      return v.name === name;\n    });\n    subRulesRef.current.splice(index, 1);\n  }, []);\n  var getCombinedModel = (0, _react.useCallback)(function () {\n    var realSubRules = subRulesRef.current.filter(function (v) {\n      return Boolean(v.fieldRule.current);\n    });\n\n    // If there is no sub rule, return the original form model\n    if (realSubRules.length === 0) {\n      return formModel;\n    }\n    return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(realSubRules.map(function (_ref) {\n      var _ref2;\n      var name = _ref.name,\n        fieldRule = _ref.fieldRule;\n      return _ref2 = {}, _ref2[name] = fieldRule.current, _ref2;\n    }).reduce(function (a, b) {\n      return Object.assign(a, b);\n    }, {})));\n  }, [formModel]);\n  return {\n    getCombinedModel: getCombinedModel,\n    pushFieldRule: pushFieldRule,\n    removeFieldRule: removeFieldRule\n  };\n}\nvar _default = exports[\"default\"] = useSchemaModel;\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useSchemaModel.ts?");
+eval("\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _schemaTyped = __webpack_require__(/*! schema-typed */ \"./node_modules/schema-typed/es/index.js\");\nvar _react = __webpack_require__(/*! react */ \"react\");\n/**\n * Convert a flat schema object to a nested schema object\n *\n * @example\n *\n * ```js\n * const schema = {\n *  'address.city': StringType().isRequired('City is required'),\n *  'address.street': StringType().isRequired('Street is required')\n * };\n *\n * const result = unflattenSchemaObject(schema);\n *\n * // result\n * {\n *    address: ObjectType().shape({\n *      city: StringType().isRequired('City is required'),\n *      street: StringType().isRequired('Street is required')\n *    })\n * }\n * ```\n */\nfunction unflattenSchemaObject(schema) {\n  var result = {};\n  var $type = Symbol('schema-type');\n  Object.keys(schema).forEach(function (key) {\n    if (key.includes('.')) {\n      var keys = key.split('.');\n      var lastKey = keys.pop() || '';\n      var current = result;\n      keys.forEach(function (subKey) {\n        var _ref;\n        current[subKey] = current[subKey] || (_ref = {}, _ref[$type] = 'object-type', _ref);\n        current = current[subKey];\n      });\n      current[lastKey] = schema[key];\n    } else {\n      result[key] = schema[key];\n    }\n  });\n  function convertToShape(obj) {\n    Object.keys(obj).forEach(function (key) {\n      var _obj$key;\n      if (((_obj$key = obj[key]) === null || _obj$key === void 0 ? void 0 : _obj$key[$type]) === 'object-type') {\n        delete obj[key][$type];\n        obj[key] = (0, _schemaTyped.ObjectType)().shape(convertToShape(obj[key]));\n      }\n    });\n    return obj;\n  }\n  return convertToShape(result);\n}\nfunction useSchemaModel(formModel, nestedField) {\n  var subRulesRef = (0, _react.useRef)([]);\n  var pushFieldRule = (0, _react.useCallback)(function (name, fieldRule) {\n    subRulesRef.current.push({\n      name: name,\n      fieldRule: fieldRule\n    });\n  }, []);\n  var removeFieldRule = (0, _react.useCallback)(function (name) {\n    var index = subRulesRef.current.findIndex(function (v) {\n      return v.name === name;\n    });\n    subRulesRef.current.splice(index, 1);\n  }, []);\n  var getCombinedModel = (0, _react.useCallback)(function () {\n    var realSubRules = subRulesRef.current.filter(function (v) {\n      return Boolean(v.fieldRule.current);\n    });\n\n    // If there is no sub rule, return the original form model\n    if (realSubRules.length === 0) {\n      return formModel;\n    }\n    var subRuleObject = realSubRules.map(function (_ref2) {\n      var _ref3;\n      var name = _ref2.name,\n        fieldRule = _ref2.fieldRule;\n      return _ref3 = {}, _ref3[name] = fieldRule.current, _ref3;\n    }).reduce(function (a, b) {\n      return Object.assign(a, b);\n    }, {});\n    return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(nestedField ? unflattenSchemaObject(subRuleObject) : subRuleObject));\n  }, [formModel, nestedField]);\n  return {\n    getCombinedModel: getCombinedModel,\n    pushFieldRule: pushFieldRule,\n    removeFieldRule: removeFieldRule\n  };\n}\nvar _default = exports[\"default\"] = useSchemaModel;\n\n//# sourceURL=webpack://rsuite/./src/Form/hooks/useSchemaModel.ts?");
 
 /***/ }),
 
@@ -7572,7 +7572,7 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _set = _interopRequireDefault(__webpack_require__(/*! lodash/set */ \"./node_modules/lodash/set.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/FormControl/utils.ts\");\nfunction getErrorMessage(error) {\n  var _error$array;\n  /**\n   * When using some components as the field, such as TagInput, and using `ArrayType().of` as the validation rule,\n   * the error object won't contain the errorMessage directly. @see https://github.com/rsuite/rsuite/issues/3866\n   */\n  if (error !== null && error !== void 0 && error.array && ((_error$array = error.array) === null || _error$array === void 0 ? void 0 : _error$array.length) > 0) {\n    return error.array[0].errorMessage;\n  }\n  return error === null || error === void 0 ? void 0 : error.errorMessage;\n}\nfunction useField(props) {\n  var name = props.name,\n    formValue = props.formValue,\n    formError = props.formError,\n    value = props.value,\n    nestedField = props.nestedField,\n    errorMessage = props.errorMessage,\n    errorFromContext = props.errorFromContext;\n  var fieldValue = (0, _react.useMemo)(function () {\n    if (typeof value !== 'undefined') {\n      return value;\n    }\n    return nestedField ? (0, _get.default)(formValue, name) : formValue === null || formValue === void 0 ? void 0 : formValue[name];\n  }, [formValue, name, nestedField, value]);\n  var fieldError = (0, _react.useMemo)(function () {\n    if (typeof errorMessage !== 'undefined' || !errorFromContext) {\n      return errorMessage;\n    }\n    if (nestedField) {\n      return getErrorMessage((0, _get.default)(formError, (0, _utils.nameToPath)(name)));\n    }\n    var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];\n    if (typeof fieldError === 'string') {\n      return fieldError;\n    }\n    return getErrorMessage(fieldError);\n  }, [errorFromContext, errorMessage, formError, name, nestedField]);\n  var setFieldValue = (0, _react.useCallback)(function (fieldName, fieldValue) {\n    var _extends2;\n    if (nestedField) {\n      return (0, _set.default)((0, _extends3.default)({}, formValue), fieldName, fieldValue);\n    }\n    return (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));\n  }, [formValue, nestedField]);\n  return {\n    fieldValue: fieldValue,\n    fieldError: fieldError,\n    setFieldValue: setFieldValue\n  };\n}\nvar _default = exports[\"default\"] = useField;\n\n//# sourceURL=webpack://rsuite/./src/FormControl/hooks/useField.ts?");
+eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nexports.__esModule = true;\nexports[\"default\"] = void 0;\nvar _extends3 = _interopRequireDefault(__webpack_require__(/*! @babel/runtime/helpers/extends */ \"./node_modules/@babel/runtime/helpers/extends.js\"));\nvar _react = __webpack_require__(/*! react */ \"react\");\nvar _get = _interopRequireDefault(__webpack_require__(/*! lodash/get */ \"./node_modules/lodash/get.js\"));\nvar _set = _interopRequireDefault(__webpack_require__(/*! lodash/set */ \"./node_modules/lodash/set.js\"));\nvar _utils = __webpack_require__(/*! ../utils */ \"./src/FormControl/utils.ts\");\nfunction getErrorMessage(error) {\n  var _error$array;\n  if (typeof error === 'string') {\n    return error;\n  }\n\n  /**\n   * When using some components as the field, such as TagInput, and using `ArrayType().of` as the validation rule,\n   * the error object won't contain the errorMessage directly. @see https://github.com/rsuite/rsuite/issues/3866\n   */\n  if (error !== null && error !== void 0 && error.array && ((_error$array = error.array) === null || _error$array === void 0 ? void 0 : _error$array.length) > 0) {\n    return error.array[0].errorMessage;\n  }\n  return error === null || error === void 0 ? void 0 : error.errorMessage;\n}\nfunction useField(props) {\n  var name = props.name,\n    formValue = props.formValue,\n    formError = props.formError,\n    value = props.value,\n    nestedField = props.nestedField,\n    errorMessage = props.errorMessage,\n    errorFromContext = props.errorFromContext;\n  var fieldValue = (0, _react.useMemo)(function () {\n    if (typeof value !== 'undefined') {\n      return value;\n    }\n    return nestedField ? (0, _get.default)(formValue, name) : formValue === null || formValue === void 0 ? void 0 : formValue[name];\n  }, [formValue, name, nestedField, value]);\n  var fieldError = (0, _react.useMemo)(function () {\n    if (typeof errorMessage !== 'undefined' || !errorFromContext) {\n      return errorMessage;\n    }\n    if (nestedField) {\n      return getErrorMessage((0, _get.default)(formError, (0, _utils.nameToPath)(name)));\n    }\n    var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];\n    if (typeof fieldError === 'string') {\n      return fieldError;\n    }\n    return getErrorMessage(fieldError);\n  }, [errorFromContext, errorMessage, formError, name, nestedField]);\n  var setFieldValue = (0, _react.useCallback)(function (fieldName, fieldValue) {\n    var _extends2;\n    if (nestedField) {\n      return (0, _set.default)((0, _extends3.default)({}, formValue), fieldName, fieldValue);\n    }\n    return (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));\n  }, [formValue, nestedField]);\n  return {\n    fieldValue: fieldValue,\n    fieldError: fieldError,\n    setFieldValue: setFieldValue\n  };\n}\nvar _default = exports[\"default\"] = useField;\n\n//# sourceURL=webpack://rsuite/./src/FormControl/hooks/useField.ts?");
 
 /***/ }),
 
@@ -15820,9 +15820,9 @@ eval("var toFinite = __webpack_require__(/*! ./toFinite */ \"./node_modules/loda
 /*!*****************************************!*\
   !*** ./node_modules/lodash/toNumber.js ***!
   \*****************************************/
-/***/ (function(module) {
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
-eval("/**\n * This method returns the first argument it receives.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Util\n * @param {*} value Any value.\n * @returns {*} Returns `value`.\n * @example\n *\n * var object = { 'a': 1 };\n *\n * console.log(_.identity(object) === object);\n * // => true\n */\nfunction identity(value) {\n  return value;\n}\n\nmodule.exports = identity;\n\n\n//# sourceURL=webpack://rsuite/./node_modules/lodash/toNumber.js?");
+eval("var baseTrim = __webpack_require__(/*! ./_baseTrim */ \"./node_modules/lodash/_baseTrim.js\"),\n    isObject = __webpack_require__(/*! ./isObject */ \"./node_modules/lodash/isObject.js\"),\n    isSymbol = __webpack_require__(/*! ./isSymbol */ \"./node_modules/lodash/isSymbol.js\");\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n  if (typeof value == 'number') {\n    return value;\n  }\n  if (isSymbol(value)) {\n    return NAN;\n  }\n  if (isObject(value)) {\n    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n    value = isObject(other) ? (other + '') : other;\n  }\n  if (typeof value != 'string') {\n    return value === 0 ? value : +value;\n  }\n  value = baseTrim(value);\n  var isBinary = reIsBinary.test(value);\n  return (isBinary || reIsOctal.test(value))\n    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n    : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = toNumber;\n\n\n//# sourceURL=webpack://rsuite/./node_modules/lodash/toNumber.js?");
 
 /***/ }),
 
@@ -15840,9 +15840,9 @@ eval("var copyObject = __webpack_require__(/*! ./_copyObject */ \"./node_modules
 /*!*****************************************!*\
   !*** ./node_modules/lodash/toString.js ***!
   \*****************************************/
-/***/ (function(module) {
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
-eval("/**\n * This method returns the first argument it receives.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Util\n * @param {*} value Any value.\n * @returns {*} Returns `value`.\n * @example\n *\n * var object = { 'a': 1 };\n *\n * console.log(_.identity(object) === object);\n * // => true\n */\nfunction identity(value) {\n  return value;\n}\n\nmodule.exports = identity;\n\n\n//# sourceURL=webpack://rsuite/./node_modules/lodash/toString.js?");
+eval("var baseToString = __webpack_require__(/*! ./_baseToString */ \"./node_modules/lodash/_baseToString.js\");\n\n/**\n * Converts `value` to a string. An empty string is returned for `null`\n * and `undefined` values. The sign of `-0` is preserved.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {string} Returns the converted string.\n * @example\n *\n * _.toString(null);\n * // => ''\n *\n * _.toString(-0);\n * // => '-0'\n *\n * _.toString([1, 2, 3]);\n * // => '1,2,3'\n */\nfunction toString(value) {\n  return value == null ? '' : baseToString(value);\n}\n\nmodule.exports = toString;\n\n\n//# sourceURL=webpack://rsuite/./node_modules/lodash/toString.js?");
 
 /***/ }),