rsuite 5.59.0 → 5.59.1

package/AvatarGroup/styles/index.css

@@ -20,6 +20,8 @@
   -webkit-box-align: end;
       -ms-flex-align: end;
           align-items: flex-end;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 .rs-avatar-group-stack .rs-avatar {
   -webkit-box-sizing: content-box;

package/AvatarGroup/styles/index.less

@@ -4,6 +4,8 @@
 .rs-avatar-group {
   display: flex;
   align-items: flex-end;
+  flex-wrap: wrap;
+
   &-stack {
     .rs-avatar {
       box-sizing: content-box;

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [5.59.1](https://github.com/rsuite/rsuite/compare/v5.59.0...v5.59.1) (2024-04-12)
+
+
+### Bug Fixes
+
+* **AvatarGroup:** fix avatar deformation in group ([#3727](https://github.com/rsuite/rsuite/issues/3727)) ([466e428](https://github.com/rsuite/rsuite/commit/466e4285d794f081f90e79fc28e8f57783c438c1))
+* **Checkbox:** fix Checkbox not clickable in Firefox ([#3728](https://github.com/rsuite/rsuite/issues/3728)) ([2fc23aa](https://github.com/rsuite/rsuite/commit/2fc23aa841532f4340f5bef9a7a70009b912a4b9))
+* **docs:** typo on Form name ([#3723](https://github.com/rsuite/rsuite/issues/3723)) ([8f328e1](https://github.com/rsuite/rsuite/commit/8f328e10e16cbe978aa6737baefa67ca2b4f6867))
+* **Placeholder:** fix Placeholder SSR and CSR mismatch ([#3735](https://github.com/rsuite/rsuite/issues/3735)) ([8a9c8bd](https://github.com/rsuite/rsuite/commit/8a9c8bd81003b54f930e3dfd4f99356db44f125f))
+* **Sidenav:** fix secondary menu cannot expand ([#3732](https://github.com/rsuite/rsuite/issues/3732)) ([d680fa3](https://github.com/rsuite/rsuite/commit/d680fa3b7b498c72148ccff95b5ea1ad10ad7382))
+* remove debug code ([#3720](https://github.com/rsuite/rsuite/issues/3720)) ([637b8dc](https://github.com/rsuite/rsuite/commit/637b8dc6bb19a6775eda692534282a0dce1ebfbc))
+
+
+
 # [5.59.0](https://github.com/rsuite/rsuite/compare/v5.58.1...v5.59.0) (2024-04-03)
 
 

package/CheckPicker/styles/index.css

@@ -456,6 +456,8 @@
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/CheckTree/styles/index.css

@@ -3173,6 +3173,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/CheckTreePicker/styles/index.css

@@ -3173,6 +3173,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/Checkbox/styles/index.css

@@ -207,6 +207,8 @@
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/Checkbox/styles/index.less

@@ -86,6 +86,8 @@
     right: -@checkbox-sense-width;
     bottom: -@checkbox-sense-width;
     left: -@checkbox-sense-width;
+    min-width: 36px;
+    min-height: 36px;
   }
 
   &::before,

package/MultiCascadeTree/styles/index.css

@@ -3367,6 +3367,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/MultiCascader/styles/index.css

@@ -3385,6 +3385,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/Placeholder/styles/index.css

@@ -119,12 +119,40 @@
   background: var(--rs-bg-card);
   position: absolute;
 }
-.rs-placeholder-paragraph-rows {
+.rs-placeholder-paragraph-group {
   width: 100%;
 }
-.rs-placeholder-paragraph-rows > p {
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(9) {
+  width: 75%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(8) {
+  width: 60%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(7) {
+  width: 85%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(6) {
+  width: 70%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(5) {
+  width: 90%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(4) {
+  width: 65%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(3) {
+  width: 80%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(2) {
+  width: 50%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(1) {
+  width: 100%;
+}
+.rs-placeholder-row {
   background-color: #f2f2f5;
   background-color: var(--rs-placeholder);
+  width: 100%;
 }
 .rs-placeholder-grid-col {
   -webkit-box-flex: 1;
@@ -141,15 +169,23 @@
       -ms-flex-align: end;
           align-items: flex-end;
 }
-.rs-placeholder-grid-col > p {
-  background-color: #f2f2f5;
-  background-color: var(--rs-placeholder);
-}
 .rs-placeholder-grid-col:first-child {
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
 }
+.rs-placeholder-grid-col .rs-placeholder-row {
+  width: 30%;
+}
+.rs-placeholder-grid-col .rs-placeholder-row:nth-child(3) {
+  width: 35%;
+}
+.rs-placeholder-grid-col .rs-placeholder-row:nth-child(2) {
+  width: 25%;
+}
+.rs-placeholder-grid-col .rs-placeholder-row:nth-child(1) {
+  width: 50%;
+}
 .rs-placeholder-graph {
   display: inline-block;
   width: 100%;

package/Placeholder/styles/index.less

@@ -1,4 +1,5 @@
-@import '../../styles/common';
+@import '../../styles/common.less';
+@import './mixin.less';
 
 //
 // Placeholder
@@ -67,15 +68,21 @@
       }
     }
 
-    &-rows {
+    &-group {
       width: 100%;
+    }
 
-      & > p {
-        background-color: var(--rs-placeholder);
-      }
+    .rs-placeholder-row {
+      @widths: 100% 50% 80% 65% 90% 70% 85% 60% 75%;
+      .generate-row-width(@widths, length(@widths));
     }
   }
 
+  &-row {
+    background-color: var(--rs-placeholder);
+    width: 100%;
+  }
+
   &-grid {
     &-col {
       flex: 1;
@@ -83,13 +90,15 @@
       flex-direction: column;
       align-items: flex-end;
 
-      & > p {
-        background-color: var(--rs-placeholder);
-      }
-
       &:first-child {
         align-items: flex-start; //first col align left
       }
+
+      .rs-placeholder-row {
+        width: 30%;
+        @widths: 50% 25% 35%;
+        .generate-row-width(@widths, length(@widths));
+      }
     }
   }
 

package/Placeholder/styles/mixin.less

@@ -0,0 +1,7 @@
+.generate-row-width(@widths, @n) when (@n > 0) {
+  &:nth-child(@{n}) {
+    width: extract(@widths, @n);
+  }
+
+  .generate-row-width(@widths, @n - 1);
+}

package/Sidenav/styles/index.css

@@ -154,6 +154,9 @@
   -webkit-transition: none;
   transition: none;
 }
+.rs-sidenav-nav .rs-dropdown-item {
+  display: block;
+}
 .rs-sidenav-nav > .rs-sidenav-item,
 .rs-sidenav-nav > .rs-dropdown {
   margin: 0 !important;

package/Sidenav/styles/index.less

@@ -34,6 +34,10 @@
     });
   }
 
+  .rs-dropdown-item {
+    display: block;
+  }
+
   > .rs-sidenav-item,
   > .rs-dropdown {
     margin: 0 !important;

package/TagInput/styles/index.css

@@ -469,6 +469,8 @@
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/TagPicker/styles/index.css

@@ -469,6 +469,8 @@
   right: -10px;
   bottom: -10px;
   left: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,

package/cjs/Avatar/Avatar.js

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 exports.__esModule = true;
 exports.default = void 0;
 var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -21,8 +21,10 @@ var _templateObject, _templateObject2;
  * @see https://rsuitejs.com/components/avatar
  */
 var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _extends2;
   var _useContext = (0, _react.useContext)(_AvatarGroup.AvatarGroupContext),
-    groupSize = _useContext.size;
+    groupSize = _useContext.size,
+    spacing = _useContext.spacing;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     bordered = props.bordered,
@@ -38,9 +40,10 @@ var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     src = props.src,
     srcSet = props.srcSet,
     sizes = props.sizes,
+    style = props.style,
     imgProps = props.imgProps,
     onError = props.onError,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "alt", "className", "children", "circle", "color", "classPrefix", "size", "src", "srcSet", "sizes", "imgProps", "onError"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "alt", "className", "children", "circle", "color", "classPrefix", "size", "src", "srcSet", "sizes", "style", "imgProps", "onError"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
@@ -49,16 +52,18 @@ var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     circle: circle,
     bordered: bordered
   }));
-  var imageProps = (0, _extends2.default)({}, imgProps, {
+  var imageProps = (0, _extends3.default)({}, imgProps, {
     alt: alt,
     src: src,
     srcSet: srcSet,
     sizes: sizes
   });
-  var _useImage = (0, _useImage2.default)((0, _extends2.default)({}, imageProps, {
+  var _useImage = (0, _useImage2.default)((0, _extends3.default)({}, imageProps, {
       onError: onError
     })),
     loaded = _useImage.loaded;
+  var _useCustom = (0, _utils.useCustom)('Avatar'),
+    rtl = _useCustom.rtl;
   var altComponent = (0, _react.useMemo)(function () {
     if (alt) {
       return /*#__PURE__*/_react.default.createElement("span", {
@@ -71,12 +76,15 @@ var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var placeholder = children || altComponent || /*#__PURE__*/_react.default.createElement(_AvatarIcon.default, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["icon"])))
   });
-  var image = loaded ? /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, imageProps, {
+  var image = loaded ? /*#__PURE__*/_react.default.createElement("img", (0, _extends3.default)({}, imageProps, {
     className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["image"])))
   })) : placeholder;
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  var margin = rtl ? 'marginLeft' : 'marginRight';
+  var insertStyles = (0, _utils.isIE)() && spacing ? (0, _extends3.default)((_extends2 = {}, _extends2[margin] = spacing, _extends2), style) : style;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({}, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    style: insertStyles
   }), src ? image : placeholder);
 });
 Avatar.displayName = 'Avatar';

package/cjs/Avatar/useImage.js

@@ -65,7 +65,6 @@ var useImage = function useImage(props) {
   (0, _react.useEffect)(function () {
     return flush;
   }, []);
-  console.log('status', status);
   return {
     loaded: status === 'loaded',
     status: status

package/cjs/AvatarGroup/AvatarGroup.d.ts

@@ -18,6 +18,7 @@ export interface AvatarGroupProps extends WithAsProps {
 }
 export declare const AvatarGroupContext: React.Context<{
     size?: Size | undefined;
+    spacing?: number | undefined;
 }>;
 /**
  * The AvatarGroup component is used to represent a collection of avatars.

package/cjs/AvatarGroup/AvatarGroup.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = exports.AvatarGroupContext = void 0;
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -28,9 +28,8 @@ var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     children = props.children,
     stack = props.stack,
     size = props.size,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size"]);
-  var _useCustom = (0, _utils.useCustom)('AvatarGroup'),
-    rtl = _useCustom.rtl;
+    style = props.style,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size", "style"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
@@ -42,17 +41,18 @@ var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       size: size
     };
   }, [size]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({}, rest, {
+  var styles = (0, _utils.isIE)() ? style : (0, _extends2.default)({}, style, {
+    gap: spacing
+  });
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    role: "group"
+  }, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    style: styles
   }), /*#__PURE__*/_react.default.createElement(AvatarGroupContext.Provider, {
     value: contextValue
-  }, spacing ? _react.default.Children.map(children, function (child) {
-    var _extends2;
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      style: (0, _extends3.default)((_extends2 = {}, _extends2[rtl ? 'marginLeft' : 'marginRight'] = spacing, _extends2), child.props.style)
-    });
-  }) : children));
+  }, children));
 });
 AvatarGroup.displayName = 'AvatarGroup';
 AvatarGroup.propTypes = {

package/cjs/Checkbox/Checkbox.js

@@ -137,7 +137,7 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   })), /*#__PURE__*/_react.default.createElement("span", {
     className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["inner"]))),
     "aria-hidden": true,
-    role: "presentation"
+    "data-testid": "checkbox-control-inner"
   }));
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restProps, {
     ref: ref,

package/cjs/Form/Form.js

@@ -18,10 +18,12 @@ var _FormControlLabel = _interopRequireDefault(require("../FormControlLabel"));
 var _FormErrorMessage = _interopRequireDefault(require("../FormErrorMessage"));
 var _FormGroup = _interopRequireDefault(require("../FormGroup"));
 var _FormHelpText = _interopRequireDefault(require("../FormHelpText"));
-var _useFormClassNames = require("./useFormClassNames");
-var _useSchemaModel2 = _interopRequireDefault(require("./useSchemaModel"));
 var _utils = require("../utils");
 var _propTypes2 = require("../internals/propTypes");
+var _useSchemaModel2 = _interopRequireDefault(require("./hooks/useSchemaModel"));
+var _useFormError2 = _interopRequireDefault(require("./hooks/useFormError"));
+var _useFormValue2 = _interopRequireDefault(require("./hooks/useFormValue"));
+var _useFormClassNames = _interopRequireDefault(require("./hooks/useFormClassNames"));
 /**
  * The `Form` component is a form interface for collecting and validating user input.
  * @see https://rsuitejs.com/components/form
@@ -35,8 +37,8 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,
     _props$formDefaultVal = props.formDefaultValue,
     formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,
-    formValue = props.formValue,
-    formError = props.formError,
+    formValueProp = props.formValue,
+    formErrorProp = props.formError,
     fluid = props.fluid,
     _props$nestedField = props.nestedField,
     nestedField = _props$nestedField === void 0 ? false : _props$nestedField,
@@ -58,7 +60,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     getCombinedModel = _useSchemaModel.getCombinedModel,
     pushFieldRule = _useSchemaModel.pushFieldRule,
     removeFieldRule = _useSchemaModel.removeFieldRule;
-  var classes = (0, _useFormClassNames.useFormClassNames)({
+  var classes = (0, _useFormClassNames.default)({
     classPrefix: classPrefix,
     className: className,
     fluid: fluid,
@@ -67,29 +69,25 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     plaintext: plaintext,
     disabled: disabled
   });
-  var _useControlled = (0, _utils.useControlled)(formValue, formDefaultValue),
-    realFormValue = _useControlled[0],
-    setFormValue = _useControlled[1];
-  var _useControlled2 = (0, _utils.useControlled)(formError, {}),
-    realFormError = _useControlled2[0],
-    setFormError = _useControlled2[1];
-  var realFormValueRef = (0, _react.useRef)(realFormValue);
-  realFormValueRef.current = realFormValue;
-  var realFormErrorRef = (0, _react.useRef)(realFormError);
-  realFormErrorRef.current = realFormError;
-
+  var _useFormValue = (0, _useFormValue2.default)(formValueProp, formDefaultValue),
+    formValue = _useFormValue.formValue,
+    setFormValue = _useFormValue.setFormValue,
+    onRemoveValue = _useFormValue.onRemoveValue;
+  var _useFormError = (0, _useFormError2.default)(formErrorProp),
+    formError = _useFormError.formError,
+    setFormError = _useFormError.setFormError,
+    onRemoveError = _useFormError.onRemoveError;
   /**
    * Validate the form data and return a boolean.
    * The error message after verification is returned in the callback.
    * @param callback
    */
   var check = (0, _utils.useEventCallback)(function (callback) {
-    var formValue = realFormValue || {};
     var formError = {};
     var errorCount = 0;
     var model = getCombinedModel();
-    Object.keys(model.spec).forEach(function (key) {
-      var checkResult = model.checkForField(key, formValue);
+    Object.keys(model.getSchemaSpec()).forEach(function (key) {
+      var checkResult = model.checkForField(key, formValue || {});
       if (checkResult.hasError === true) {
         errorCount += 1;
         formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;
@@ -112,15 +110,14 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    */
   var checkForField = (0, _utils.useEventCallback)(function (fieldName, callback) {
     var _extends2;
-    var formValue = realFormValue || {};
     var model = getCombinedModel();
-    var checkResult = model.checkForField(fieldName, formValue);
-    var formError = (0, _extends6.default)({}, realFormError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
-    setFormError(formError);
-    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
+    var checkResult = model.checkForField(fieldName, formValue || {});
+    var nextFormError = (0, _extends6.default)({}, formError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
+    setFormError(nextFormError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
     callback === null || callback === void 0 ? void 0 : callback(checkResult);
     if (checkResult.hasError) {
-      onError === null || onError === void 0 ? void 0 : onError(formError);
+      onError === null || onError === void 0 ? void 0 : onError(nextFormError);
     }
     return !checkResult.hasError;
   });
@@ -129,13 +126,12 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * Check form data asynchronously and return a Promise
    */
   var checkAsync = (0, _utils.useEventCallback)(function () {
-    var formValue = realFormValue || {};
     var promises = [];
     var keys = [];
     var model = getCombinedModel();
-    Object.keys(model.spec).forEach(function (key) {
+    Object.keys(model.getSchemaSpec()).forEach(function (key) {
       keys.push(key);
-      promises.push(model.checkForFieldAsync(key, formValue));
+      promises.push(model.checkForFieldAsync(key, formValue || {}));
     });
     return Promise.all(promises).then(function (values) {
       var formError = {};
@@ -163,15 +159,14 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * @param fieldName
    */
   var checkForFieldAsync = (0, _utils.useEventCallback)(function (fieldName) {
-    var formValue = realFormValue || {};
     var model = getCombinedModel();
-    return model.checkForFieldAsync(fieldName, formValue).then(function (checkResult) {
+    return model.checkForFieldAsync(fieldName, formValue || {}).then(function (checkResult) {
       var _extends3;
-      var formError = (0, _extends6.default)({}, realFormError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
-      onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
-      setFormError(formError);
+      var nextFormError = (0, _extends6.default)({}, formError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
+      setFormError(nextFormError);
       if (checkResult.hasError) {
-        onError === null || onError === void 0 ? void 0 : onError(formError);
+        onError === null || onError === void 0 ? void 0 : onError(nextFormError);
       }
       return checkResult;
     });
@@ -180,7 +175,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setFormError({});
   });
   var cleanErrorForField = (0, _utils.useEventCallback)(function (fieldName) {
-    setFormError((0, _omit.default)(realFormError, [fieldName]));
+    setFormError((0, _omit.default)(formError, [fieldName]));
   });
   var resetErrors = (0, _utils.useEventCallback)(function (formError) {
     if (formError === void 0) {
@@ -201,23 +196,12 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     };
   });
   var removeFieldError = (0, _utils.useEventCallback)(function (name) {
-    /**
-     * when this function is called when the children component is unmount, it's an old render frame
-     * so use Ref to get future error
-     */
-    var formError = (0, _omit.default)(realFormErrorRef.current, [name]);
-    realFormErrorRef.current = formError;
+    var formError = onRemoveError(name);
     setFormError(formError);
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
   });
   var removeFieldValue = (0, _utils.useEventCallback)(function (name) {
-    /**
-     * when this function is called when the children component is unmount, it's an old render frame
-     * so use Ref to get future value
-     */
-    var formValue = (0, _omit.default)(realFormValueRef.current, [name]);
-    realFormValueRef.current = formValue;
-    setFormValue(formValue);
+    var formValue = onRemoveValue(name);
     onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
   });
   var handleSubmit = (0, _utils.useEventCallback)(function (event) {
@@ -231,10 +215,10 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   });
   var handleFieldError = (0, _utils.useEventCallback)(function (name, errorMessage) {
     var _extends4;
-    var formError = (0, _extends6.default)({}, realFormError, (_extends4 = {}, _extends4[name] = errorMessage, _extends4));
-    setFormError(formError);
-    onError === null || onError === void 0 ? void 0 : onError(formError);
-    onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
+    var nextFormError = (0, _extends6.default)({}, formError, (_extends4 = {}, _extends4[name] = errorMessage, _extends4));
+    setFormError(nextFormError);
+    onError === null || onError === void 0 ? void 0 : onError(nextFormError);
+    onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
   });
   var handleFieldSuccess = (0, _utils.useEventCallback)(function (name) {
     removeFieldError(name);
@@ -247,7 +231,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return (0, _extends6.default)({}, formValue, (_extends5 = {}, _extends5[fieldName] = fieldValue, _extends5));
   };
   var handleFieldChange = (0, _utils.useEventCallback)(function (name, value, event) {
-    var nextFormValue = setFieldValue(realFormValue, name, value);
+    var nextFormValue = setFieldValue(formValue, name, value);
     setFormValue(nextFormValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);
   });
@@ -260,7 +244,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       readOnly: readOnly,
       plaintext: plaintext,
       disabled: disabled,
-      formError: realFormError,
+      formError: formError,
       nestedField: nestedField,
       removeFieldValue: removeFieldValue,
       removeFieldError: removeFieldError,
@@ -270,7 +254,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onFieldError: handleFieldError,
       onFieldSuccess: handleFieldSuccess
     };
-  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, realFormError, nestedField, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
+  }, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, formError, nestedField, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
   return /*#__PURE__*/_react.default.createElement("form", (0, _extends6.default)({}, rest, {
     ref: rootRef,
     onSubmit: handleSubmit,
@@ -278,7 +262,7 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), /*#__PURE__*/_react.default.createElement(_FormContext.default.Provider, {
     value: formContextValue
   }, /*#__PURE__*/_react.default.createElement(_FormContext.FormValueContext.Provider, {
-    value: realFormValue
+    value: formValue
   }, children)));
 });
 Form.Control = _FormControl.default;