@arco-design/mobile-react 2.30.7 → 2.30.9

package/dist/index.js

@@ -40,15 +40,15 @@
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     }
 
-    var __assign$2 = function() {
-        __assign$2 = Object.assign || function __assign(t) {
+    var __assign$3 = function() {
+        __assign$3 = Object.assign || function __assign(t) {
             for (var s, i = 1, n = arguments.length; i < n; i++) {
                 s = arguments[i];
                 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
             }
             return t;
         };
-        return __assign$2.apply(this, arguments);
+        return __assign$3.apply(this, arguments);
     };
 
     function __rest$1(s, e) {
@@ -1696,6 +1696,7 @@
           max: '%s 超过 %s 个字符',
           min: '%s 少于 %s 个字符',
           len: '%s 字符个数应为 %s',
+          equal: '%s 不等于 `%s`',
           match: '`%s` 不匹配 %s 模式',
           uppercase: '%s 需全为大写字符',
           lowercase: '%s 需全为小写字符',
@@ -1845,8 +1846,8 @@
       ValidatorType["Custom"] = "custom";
     })(ValidatorType || (ValidatorType = {}));
 
-    var __assign$1 = undefined && undefined.__assign || function () {
-      __assign$1 = Object.assign || function (t) {
+    var __assign$2 = undefined && undefined.__assign || function () {
+      __assign$2 = Object.assign || function (t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
           s = arguments[i];
 
@@ -1858,7 +1859,7 @@
         return t;
       };
 
-      return __assign$1.apply(this, arguments);
+      return __assign$2.apply(this, arguments);
     };
     var defaultMessageTemplate = '%s is not a %s type';
     var messageTemplate = {
@@ -1884,6 +1885,7 @@
         max: '%s cannot be longer than %s characters',
         min: '%s must be at least %s characters',
         len: '%s must be exactly %s characters',
+        equal: '%s is not equal to `%s`',
         match: '`%s` does not match the pattern %s',
         uppercase: '%s must be all uppercased',
         lowercase: '%s must be all lowercased',
@@ -1930,7 +1932,7 @@
         Object.keys(originMT).forEach(function (key) {
           var originValue = originMT[key];
           var curValue = newMT === null || newMT === void 0 ? void 0 : newMT[key];
-          targetMT[key] = isObject$2(originValue) ? __assign$1(__assign$1({}, originValue), curValue) : curValue || originValue;
+          targetMT[key] = isObject$2(originValue) ? __assign$2(__assign$2({}, originValue), curValue) : curValue || originValue;
         });
       }
 
@@ -1963,6 +1965,22 @@
       };
     }();
 
+    var __assign$1 = undefined && undefined.__assign || function () {
+      __assign$1 = Object.assign || function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+
+          for (var p in s) {
+            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+          }
+        }
+
+        return t;
+      };
+
+      return __assign$1.apply(this, arguments);
+    };
+
     var __rest = undefined && undefined.__rest || function (s, e) {
       var t = {};
 
@@ -2042,6 +2060,28 @@
       return BaseValidator;
     }();
 
+    var BooleanValidator =
+    /** @class */
+    function (_super) {
+      __extends(BooleanValidator, _super);
+
+      function BooleanValidator(value, rules, options) {
+        var _this = _super.call(this, value, rules, options) || this;
+
+        _this.validateRules = ['equal'];
+        return _this;
+      }
+
+      BooleanValidator.prototype.equal = function (str) {
+        return this.dealError(!isEmptyValue(this.value) && this.value !== str, {
+          errTemplate: 'boolean.equal',
+          values: [this.field, "" + str]
+        });
+      };
+
+      return BooleanValidator;
+    }(BaseValidator);
+
     var NumberValidator =
     /** @class */
     function (_super) {
@@ -2100,7 +2140,7 @@
       function StringValidator(value, rules, options) {
         var _this = _super.call(this, value, rules, options) || this;
 
-        _this.validateRules = ['min', 'max', 'len', 'match', 'uppercase', 'lowercase', 'whitespace'];
+        _this.validateRules = ['min', 'max', 'len', 'equal', 'match', 'uppercase', 'lowercase', 'whitespace'];
         return _this;
       }
 
@@ -2119,12 +2159,19 @@
       };
 
       StringValidator.prototype.len = function (num) {
-        return this.dealError(!isEmptyValue(this.value) && this.value !== num, {
-          errTemplate: 'string.equal',
+        return this.dealError(!isEmptyValue(this.value) && this.value.length !== num, {
+          errTemplate: 'string.len',
           values: [this.field, "" + num]
         });
       };
 
+      StringValidator.prototype.equal = function (str) {
+        return this.dealError(!isEmptyValue(this.value) && this.value !== str, {
+          errTemplate: 'string.equal',
+          values: [this.field, "" + str]
+        });
+      };
+
       StringValidator.prototype.match = function (regStr) {
         var reg = new RegExp(regStr);
         return this.dealError(!isEmptyValue(this.value) && !reg.test(this.value), {
@@ -2252,6 +2299,7 @@
 
         if (validatorTool) {
           return new Promise(function (resolve) {
+            var validateLevel = _this.rule.validateLevel || 'error';
             var ret = validatorTool(_this.value, function (message) {
               if (message === void 0) {
                 message = '';
@@ -2262,10 +2310,14 @@
 
             if (ret && (ret === null || ret === void 0 ? void 0 : ret.then)) {
               ret.then(function () {
-                return resolve(_this.getErrors());
+                return resolve(__assign$1(__assign$1({}, _this.getErrors()), {
+                  validateLevel: validateLevel
+                }));
               });
             } else {
-              resolve(_this.getErrors());
+              resolve(__assign$1(__assign$1({}, _this.getErrors()), {
+                validateLevel: validateLevel
+              }));
             }
           });
         }
@@ -3512,6 +3564,7 @@
           validateMessage: (_a = this.options) === null || _a === void 0 ? void 0 : _a.validateMessages
         };
         return {
+          boolean: new BooleanValidator(value, rule, curOption),
           number: new NumberValidator(value, rule, curOption),
           array: new ArrayValidator(value, rule, curOption),
           string: new StringValidator(value, rule, curOption),
@@ -3842,7 +3895,7 @@
         };
       }, [theme]);
       return /*#__PURE__*/React__default["default"].createElement(GlobalContext.Provider, {
-        value: __assign$2(__assign$2(__assign$2({}, defaultContext), restProps), {
+        value: __assign$3(__assign$3(__assign$3({}, defaultContext), restProps), {
           isDarkMode: isDarkMode,
           useDarkMode: useDarkMode,
           locale: locale || defaultLocale
@@ -3856,7 +3909,7 @@
             others = __rest$1(props, ["context"]);
 
         return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (context) {
-          return /*#__PURE__*/React__default["default"].createElement(ContextProvider, __assign$2({}, __assign$2(__assign$2({}, context), propsContext)), /*#__PURE__*/React__default["default"].createElement(Component, __assign$2({}, others)));
+          return /*#__PURE__*/React__default["default"].createElement(ContextProvider, __assign$3({}, __assign$3(__assign$3({}, context), propsContext)), /*#__PURE__*/React__default["default"].createElement(Component, __assign$3({}, others)));
         });
       };
     }
@@ -4695,7 +4748,7 @@
         var webkitStyle = allowReg.test(key) ? (_a = {}, _a["Webkit" + key.replace(/^(.)/, function (_, p1) {
           return p1.toUpperCase();
         })] = style[key], _a) : {};
-        return __assign$2(__assign$2(__assign$2({}, acc), (_b = {}, _b[key] = style[key], _b)), webkitStyle);
+        return __assign$3(__assign$3(__assign$3({}, acc), (_b = {}, _b[key] = style[key], _b)), webkitStyle);
       }, {});
       return newStyle;
     }
@@ -4935,10 +4988,10 @@
           width: underlineThick
         };
         return {
-          outer: __assign$2(__assign$2({
+          outer: __assign$3(__assign$3({
             transform: "translate" + direc + "(" + (comparedDis > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
           }, outerSize), adaptiveOuterStyle),
-          inner: __assign$2(__assign$2({}, transStyle), adaptiveStyle)
+          inner: __assign$3(__assign$3({}, transStyle), adaptiveStyle)
         };
       }
 
@@ -4961,10 +5014,10 @@
 
         var lineStyle = getLineStyle();
         return {
-          outer: getStyleWithVendor(__assign$2({
+          outer: getStyleWithVendor(__assign$3({
             transitionDuration: cellTrans ? duration + "ms" : '0ms'
           }, lineStyle.outer || {})),
-          inner: getStyleWithVendor(__assign$2(__assign$2({}, transStyle), lineStyle.inner || {}))
+          inner: getStyleWithVendor(__assign$3(__assign$3({}, transStyle), lineStyle.inner || {}))
         };
       }
 
@@ -5009,7 +5062,7 @@
           'custom-animate': animationKey,
           'caterpillar-moving': caterpillar || useCaterpillar && distance
         }, tabDirection),
-        style: __assign$2(__assign$2({}, underlineStyle.inner || {}), underlineInnerStyle || {})
+        style: __assign$3(__assign$3({}, underlineStyle.inner || {}), underlineInnerStyle || {})
       }));
     });
 
@@ -5209,7 +5262,7 @@
             } : {
               top: position
             };
-            domRef.current.scrollTo(__assign$2(__assign$2({}, disObj), rightNow ? {} : {
+            domRef.current.scrollTo(__assign$3(__assign$3({}, disObj), rightNow ? {} : {
               behavior: 'smooth'
             }));
           } catch (e) {
@@ -5309,7 +5362,7 @@
           underlineAdaptive: underlineAdaptive,
           renderUnderline: renderUnderline
         };
-        return /*#__PURE__*/React__default["default"].createElement(TabCellUnderline, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(TabCellUnderline, __assign$3({
           ref: underlineRef,
           getTabCenterLeft: getTabCenterLeft,
           getTabRect: getTabRect
@@ -6061,7 +6114,7 @@
         var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
           height: currentPaneHeight
         } : {};
-        return getStyleWithVendor(__assign$2(__assign$2(__assign$2(__assign$2({}, swipeEnergySaving ? {} : sizeStyle), {
+        return getStyleWithVendor(__assign$3(__assign$3(__assign$3(__assign$3({}, swipeEnergySaving ? {} : sizeStyle), {
           transitionDuration: getTransition() + "ms"
         }), heightStyle), commonStyle));
       }
@@ -6085,7 +6138,7 @@
         } : {
           transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
         };
-        return getStyleWithVendor(__assign$2(__assign$2({}, sizeStyle), {
+        return getStyleWithVendor(__assign$3(__assign$3({}, sizeStyle), {
           transitionDuration: getTransition() + "ms"
         }));
       }
@@ -6104,28 +6157,28 @@
         // @en Render directly when in scroll mode or in loading scope
 
         if (mode === 'scroll' || index >= shownIndexes[0] && index <= shownIndexes[1]) {
-          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
+          return /*#__PURE__*/React__default["default"].createElement("div", __assign$3({}, contentProps, {
             style: energySavingStyle
           }), pane);
         }
 
-        var energySavingHideStyle = __assign$2(__assign$2({}, energySavingStyle), hideContentStyle || {}); // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
+        var energySavingHideStyle = __assign$3(__assign$3({}, energySavingStyle), hideContentStyle || {}); // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
         // @en Not in the loading range, depending on renderHideContent and hideContentStyle
 
 
         if (renderHideContent) {
-          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
+          return /*#__PURE__*/React__default["default"].createElement("div", __assign$3({}, contentProps, {
             style: energySavingHideStyle
           }), renderHideContent(index, pane));
         }
 
         if (hideContentStyle === null) {
-          return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
+          return /*#__PURE__*/React__default["default"].createElement("div", __assign$3({}, contentProps, {
             style: energySavingStyle
           }));
         }
 
-        return /*#__PURE__*/React__default["default"].createElement("div", __assign$2({}, contentProps, {
+        return /*#__PURE__*/React__default["default"].createElement("div", __assign$3({}, contentProps, {
           style: energySavingHideStyle
         }), pane);
       }
@@ -6574,11 +6627,12 @@
         changeFromRef.current = changeFrom || '';
         setCellTrans(true);
         setInnerIndex(newIndex);
-        setDistance(0);
 
         if (newIndex !== activeIndexRef.current) {
           onChange && onChange(tabs[newIndex], newIndex, changeFrom);
         }
+
+        setDistance(0);
       }
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
@@ -6600,7 +6654,7 @@
           fullScreen: fullScreen
         };
 
-        var cellProps = __assign$2({
+        var cellProps = __assign$3({
           ref: cellRef,
           tabs: tabs,
           onTabClick: onTabClick,
@@ -6639,14 +6693,14 @@
           tabBarStopPropagation: tabBarStopPropagation
         }, commonProps);
 
-        var CellComp = /*#__PURE__*/React__default["default"].createElement(TabCell, __assign$2({}, cellProps));
+        var CellComp = /*#__PURE__*/React__default["default"].createElement(TabCell, __assign$3({}, cellProps));
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefix + " " + prefix + "-" + tabBarPosition + " " + prefix + "-" + tabDirection + " all-border-box", {
             'full-screen': fullScreen
           }, className || ''),
           style: style,
           ref: domRef
-        }, renderTabBar ? renderTabBar(CellComp, cellProps) : CellComp, /*#__PURE__*/React__default["default"].createElement(TabPane, __assign$2({
+        }, renderTabBar ? renderTabBar(CellComp, cellProps) : CellComp, /*#__PURE__*/React__default["default"].createElement(TabPane, __assign$3({
           ref: paneRef,
           panes: allPanes,
           handlePaneTouchEnd: handlePaneTouchEnd,
@@ -6778,7 +6832,7 @@
         var stickyCssStyle = {};
 
         if (newStickyState) {
-          stickyCssStyle = __assign$2(__assign$2(__assign$2(__assign$2({
+          stickyCssStyle = __assign$3(__assign$3(__assign$3(__assign$3({
             transform: 'translateZ(0)',
             WebkitTransform: 'translateZ(0)',
             position: stickyStyle === 'absolute' ? 'absolute' : 'fixed',
@@ -6875,7 +6929,7 @@
         };
       }, [recalculatePosition, updatePlaceholderLayout]);
       var computedStyle = React.useMemo(function () {
-        return __assign$2(__assign$2({}, style || {}), stickyStateStyle);
+        return __assign$3(__assign$3({}, style || {}), stickyStateStyle);
       }, [stickyStateStyle, style]);
 
       function renderSticky(prefixCls) {
@@ -6906,7 +6960,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-square-checked " + className,
           width: "1em",
           height: "1em",
@@ -6930,7 +6984,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-square-disabled " + className,
           width: "1em",
           height: "1em",
@@ -6954,7 +7008,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-circle-checked " + className,
           width: "1em",
           height: "1em",
@@ -6980,7 +7034,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-square-unchecked " + className,
           width: "1em",
           height: "1em",
@@ -7004,7 +7058,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-circle-unchecked " + className,
           width: "1em",
           height: "1em",
@@ -7028,7 +7082,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-circle-disabled " + className,
           width: "1em",
           height: "1em",
@@ -7054,7 +7108,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-minus " + className,
           width: "1em",
           height: "1em",
@@ -7078,7 +7132,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-star-fill " + className,
           width: "1em",
           height: "1em",
@@ -7102,7 +7156,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-search " + className,
           width: "1em",
           height: "1em",
@@ -7126,7 +7180,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-check " + className,
           width: "1em",
           height: "1em",
@@ -7153,7 +7207,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-tri-down " + className,
           width: "1em",
           height: "1em",
@@ -7177,7 +7231,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-close " + className,
           width: "1em",
           height: "1em",
@@ -7201,7 +7255,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-arrow-down " + className,
           width: "1em",
           height: "1em",
@@ -7225,7 +7279,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-add " + className,
           width: "1em",
           height: "1em",
@@ -7249,7 +7303,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-user-fill " + className,
           width: "1em",
           height: "1em",
@@ -7274,7 +7328,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-clear " + className,
           width: "1em",
           height: "1em",
@@ -7298,7 +7352,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-success-circle " + className,
           width: "1em",
           height: "1em",
@@ -7324,7 +7378,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-warn-circle " + className,
           width: "1em",
           height: "1em",
@@ -7350,7 +7404,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-error-circle " + className,
           width: "1em",
           height: "1em",
@@ -7376,7 +7430,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-check-bold " + className,
           width: "1em",
           height: "1em",
@@ -7404,7 +7458,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-close-bold " + className,
           width: "1em",
           height: "1em",
@@ -7432,7 +7486,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-star-half " + className,
           width: "1em",
           height: "1em",
@@ -7456,7 +7510,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-keyboard " + className,
           width: "1em",
           height: "1em",
@@ -7489,7 +7543,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement("svg", __assign$3({
           className: prefixCls + "-icon " + prefixCls + "-icon-keyboard-delete " + className,
           width: "1em",
           height: "1em",
@@ -7656,7 +7710,7 @@
           style: style,
           ref: domRef
         }, items ? items.map(function (item, index) {
-          return renderStep( /*#__PURE__*/React__default["default"].createElement(Step, __assign$2({}, item, {
+          return renderStep( /*#__PURE__*/React__default["default"].createElement(Step, __assign$3({}, item, {
             key: index
           })), index);
         }) : React.Children.toArray(children).map(function (child, index) {
@@ -8492,7 +8546,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement(CSSTransition, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(CSSTransition, __assign$3({
           in: transIn,
           timeout: timeout,
           classNames: prefixCls + "-" + type,
@@ -8502,23 +8556,38 @@
       });
     }
 
+    var renderRootCache = {};
+
     var ReactDOMRender =
     /** @class */
     function () {
-      function ReactDOMRender(app, container, context) {
+      function ReactDOMRender(app, container, context, rootCacheId, // root id in cache
+      root) {
         var _this = this;
 
         this.render = function (props) {
           var CustomApp = _this.app;
 
-          var propsWithContext = __assign$2(__assign$2({}, props), {
+          var propsWithContext = __assign$3(__assign$3({}, props), {
             context: _this.context
           });
 
           if (_this.root) {
-            _this.root.render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign$2({}, propsWithContext)));
+            _this.root.render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign$3({}, propsWithContext)));
           } else {
-            _this.root = render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign$2({}, propsWithContext)), _this.container);
+            _this.root = render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign$3({}, propsWithContext)), _this.container);
+          }
+        };
+
+        this.setRootCache = function () {
+          if (_this.rootCacheId) {
+            renderRootCache[_this.rootCacheId] = _this.root;
+          }
+        };
+
+        this.clearRootCache = function () {
+          if (_this.rootCacheId) {
+            delete renderRootCache[_this.rootCacheId];
           }
         };
 
@@ -8527,11 +8596,15 @@
 
           (_a = _this.root) === null || _a === void 0 ? void 0 : _a._unmount();
           _this.root = undefined;
+
+          _this.clearRootCache();
         };
 
         this.app = app;
         this.container = container;
         this.context = context;
+        this.rootCacheId = rootCacheId;
+        this.root = root;
       }
 
       return ReactDOMRender;
@@ -8545,7 +8618,7 @@
       }
 
       return function (config, context) {
-        var baseProps = __assign$2(__assign$2({
+        var baseProps = __assign$3(__assign$3({
           unmountOnExit: true
         }, normalize(config)), {
           visible: false,
@@ -8554,18 +8627,23 @@
 
 
         var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
-        var div = appendElementById(id, baseProps.getContainer).child;
+        var existedDiv = baseProps.unmountOnExit ? null : document.getElementById(id);
+        var div = existedDiv || appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-        var render = new ReactDOMRender(Component, div, context).render;
 
-        var dynamicProps = __assign$2(__assign$2({}, baseProps), {
+        var _a = new ReactDOMRender(Component, div, context, id, existedDiv ? renderRootCache[id] : undefined),
+            render = _a.render,
+            unmount = _a.unmount,
+            setRootCache = _a.setRootCache;
+
+        var dynamicProps = __assign$3(__assign$3({}, baseProps), {
           getContainer: function getContainer() {
             return div;
           }
         });
 
         function update(newConfig) {
-          dynamicProps = __assign$2(__assign$2({}, dynamicProps), normalize(newConfig));
+          dynamicProps = __assign$3(__assign$3({}, dynamicProps), normalize(newConfig));
           render(dynamicProps);
         }
 
@@ -8581,11 +8659,17 @@
           baseProps.onClose && baseProps.onClose(scene);
 
           if (baseProps.unmountOnExit) {
+            unmount();
             removeElement(div);
           }
         };
 
         render(dynamicProps);
+
+        if (!baseProps.unmountOnExit) {
+          setRootCache();
+        }
+
         nextTick(function () {
           if (leaving) return;
           dynamicProps.visible = true;
@@ -8835,7 +8919,7 @@
       function renderPopup(_a) {
         var prefixCls = _a.prefixCls;
         var prefix = prefixCls + "-popup";
-        return /*#__PURE__*/React__default["default"].createElement(Masking$1, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(Masking$1, __assign$3({
           className: cls(prefix, className),
           ref: maskingRef,
           maskClass: cls(prefix + "-mask", {
@@ -8918,7 +9002,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement(Popup$1, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(Popup$1, __assign$3({
           ref: popupRef,
           className: cls(prefixCls + "-action-sheet", className),
           contentClass: prefixCls + "-action-sheet-content",
@@ -9072,7 +9156,7 @@
             })
           }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "spin-cell-inner bg-color-with-config",
-            style: __assign$2({
+            style: __assign$3({
               backgroundColor: color
             }, filleted ? {
               borderRadius: stroke
@@ -9173,7 +9257,7 @@
           r: radius,
           strokeWidth: stroke,
           fill: "none"
-        }), /*#__PURE__*/React__default["default"].createElement("circle", __assign$2({
+        }), /*#__PURE__*/React__default["default"].createElement("circle", __assign$3({
           className: "arc-line stroke-color-with-config",
           cx: circlePos,
           cy: circlePos,
@@ -9214,7 +9298,7 @@
           width: circleSize,
           height: circleSize
         } : {};
-        return getStyleWithVendor(__assign$2(__assign$2({
+        return getStyleWithVendor(__assign$3(__assign$3({
           animationDuration: duration + "ms"
         }, circleStyle), style || {}));
       }
@@ -9490,7 +9574,7 @@
           } : {
             overflowY: 'auto'
           };
-          return __assign$2({
+          return __assign$3({
             width: actualBoxWidth,
             height: actualBoxHeight
           }, overflow);
@@ -9510,7 +9594,7 @@
           className: cls(prefixCls + "-image all-border-box", {
             preview: isPreview
           }, system, wrapClass, className),
-          style: __assign$2(__assign$2({}, getImageStyle()), style || {}),
+          style: __assign$3(__assign$3({}, getImageStyle()), style || {}),
           ref: wrapRef
         }, bottomOverlap !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: "image-content image-bottom-overlap",
@@ -9531,7 +9615,7 @@
           }),
           onClick: onClick,
           ref: imageRef
-        }, staticLabel && showImage && !staticRetrying ? /*#__PURE__*/React__default["default"].createElement("img", __assign$2({}, nativeProps, attrs, {
+        }, staticLabel && showImage && !staticRetrying ? /*#__PURE__*/React__default["default"].createElement("img", __assign$3({}, nativeProps, attrs, {
           ref: imageDomRef,
           onLoad: function onLoad(e) {
             return handleStaticImageLoaded(e.nativeEvent, imageDomRef.current);
@@ -9613,11 +9697,11 @@
       }, childrenArr.map(function (child, i) {
         var childProps = (child || {}).props;
 
-        var avatarStyle = __assign$2({
+        var avatarStyle = __assign$3({
           zIndex: zIndexOrder === 'asc' ? i + 1 : length - i
         }, childProps.style);
 
-        return /*#__PURE__*/React__default["default"].cloneElement(child, __assign$2(__assign$2({}, childProps), {
+        return /*#__PURE__*/React__default["default"].cloneElement(child, __assign$3(__assign$3({}, childProps), {
           style: avatarStyle
         }));
       })));
@@ -9726,7 +9810,7 @@
           ref: avatarRef
         }, children, useDefaultAvatar && (defaultOverLap === void 0 ? /*#__PURE__*/React__default["default"].createElement(IconUserFill, {
           className: prefixCls + "-avatar-default " + prefixCls + "-avatar-default-icon-size-" + size
-        }) : defaultOverLap), isImageAvatar && src && /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({}, {
+        }) : defaultOverLap), isImageAvatar && src && /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({}, {
           className: prefixCls + "-avatar-img",
           src: src
         }, imageProps)), isTextAvatar && /*#__PURE__*/React__default["default"].createElement("span", {
@@ -9982,7 +10066,7 @@
       return /*#__PURE__*/React__default["default"].createElement("button", {
         type: "button",
         ref: domRef,
-        style: __assign$2(__assign$2({}, customColorStyle), style),
+        style: __assign$3(__assign$3({}, customColorStyle), style),
         className: cls.apply(void 0, __spreadArrays$1([prefix, prefix + "-type-" + type + " type-" + type, prefix + "-size-" + size + " " + prefix + "-size-" + size + "-is-" + shape + " size-" + size, className, "is-" + shape, system, (_a = {}, _a[prefix + "-inline inline"] = inline, _a[prefix + "-type-" + type + "-disabled disabled"] = disabled, _a.loading = loading, _a[prefix + "-type-" + type + "-active active"] = isActive, _a)], customColorClass)),
         onTouchStart: handleTouchStart,
         onTouchEnd: handleTouchEnd,
@@ -10724,7 +10808,7 @@
           var translateStyle_1 = getStyleWithVendor({
             transform: "translateY(" + transStr + ") translateZ(0)"
           });
-          return __assign$2(__assign$2(__assign$2({}, transitionStyle), translateStyle_1), {
+          return __assign$3(__assign$3(__assign$3({}, transitionStyle), translateStyle_1), {
             width: '100%'
           });
         }
@@ -10732,7 +10816,7 @@
         var translateStyle = getStyleWithVendor({
           transform: "translateX(" + transStr + ") translateZ(0)"
         });
-        return __assign$2(__assign$2({
+        return __assign$3(__assign$3({
           width: Math.max(0, innerSize) || 'auto',
           height: height
         }, transitionStyle), translateStyle);
@@ -10740,7 +10824,7 @@
 
       function getCarouselStyle() {
         if (vertical) {
-          return __assign$2({
+          return __assign$3({
             height: userSetBoxHeight
           }, style || {});
         }
@@ -10748,7 +10832,7 @@
         var heightStyle = currentItemHeight && currentItemHeight !== 'auto' ? {
           height: currentItemHeight
         } : {};
-        return __assign$2(__assign$2({
+        return __assign$3(__assign$3({
           width: userSetBoxWidth
         }, heightStyle), style || {});
       } // 当最前或最后的滑块通过transform手动被放置到最后或最前时，在展示层可以认为是第total个或第-1个模块
@@ -10894,7 +10978,7 @@
           transform: getItemTranslateStyle(childIndex, ratio) + " scale(" + scale + ")",
           transformOrigin: getItemOriginStyle(childIndex)
         };
-        return getStyleWithVendor(__assign$2(__assign$2({}, transitionStyle), transformStyle));
+        return getStyleWithVendor(__assign$3(__assign$3({}, transitionStyle), transformStyle));
       }
 
       function getItemFakeStyle(childIndex) {
@@ -10906,7 +10990,7 @@
           otherDirec: vertical ? 'left' : 'top',
           trans: vertical ? 'Y' : 'X'
         };
-        return __assign$2((_a = {
+        return __assign$3((_a = {
           position: 'absolute'
         }, _a[styleMap.otherDirec] = 0, _a), childIndex >= 0 ? (_b = {}, _b[styleMap.leftDirec] = childSize > 0 ? '100%' : total * 100 + "%", _b.transform = "translate" + styleMap.trans + "(" + (childIndex - total) * rtlRatio * 100 + "%)", _b) : (_c = {}, _c[styleMap.rightDirec] = '100%', _c.transform = "translate" + styleMap.trans + "(" + (childIndex + 1) * rtlRatio * 100 + "%)", _c));
       }
@@ -10941,7 +11025,7 @@
           delete fakeStyle.transform;
         }
 
-        return getStyleWithVendor(__assign$2(__assign$2(__assign$2({}, transformStyle), layoutStyle), fakeStyle));
+        return getStyleWithVendor(__assign$3(__assign$3(__assign$3({}, transformStyle), layoutStyle), fakeStyle));
       }
 
       function renderChild(child, childIndex, prefix) {
@@ -11080,7 +11164,7 @@
               isFromGroup: true
             }
           }, children, options && options.map(function (option, index) {
-            return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({
+            return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({
               key: index
             }, option));
           }))), footer ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -11256,7 +11340,7 @@
               onChange: handleChange
             }
           }, children, !children && options && options.map(function (option) {
-            return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({
+            return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({
               key: option.value
             }, option));
           })));
@@ -11307,7 +11391,7 @@
           isGroup = _a.isGroup;
 
       if (!isGroup) return props;
-      return __assign$2(__assign$2({
+      return __assign$3(__assign$3({
         disabled: disabled,
         shape: shape,
         layout: layout,
@@ -11632,7 +11716,7 @@
           "aria-valuemax": 100,
           "aria-valuenow": percentage,
           className: cls(prefixCls + "-circle-progress", disabled ? prefixCls + "-circle-progress-disabled" : '', "" + className),
-          style: __assign$2({
+          style: __assign$3({
             width: circleSize,
             height: circleSize
           }, style),
@@ -11958,13 +12042,13 @@
             value: children ? childActiveItems : void 0
           }
         }, children || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, items.map(function (item, index) {
-          var compProps = __assign$2({
+          var compProps = __assign$3({
             active: activeItems[index],
             disabled: disabled || item.disabled,
             defaultActive: formatArray(defaultActiveItems)[index]
           }, item);
 
-          return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({
+          return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({
             key: item.value
           }, compProps));
         })))));
@@ -12481,7 +12565,7 @@
       var unmountCallbackRef = React.useRef();
       var timeRef = React.useRef(null);
       var colStyle = React.useMemo(function () {
-        return getStyleWithVendor(__assign$2(__assign$2({
+        return getStyleWithVendor(__assign$3(__assign$3({
           transform: "translate3d(0px, " + (transformY || 0) + "px, 0px)"
         }, transitionDuration ? {
           transitionDuration: transitionDuration
@@ -13089,7 +13173,7 @@
         setScrollValue(value);
       }
 
-      var newItemStyle = __assign$2({
+      var newItemStyle = __assign$3({
         height: itemHeight + "px"
       }, itemStyle);
 
@@ -13282,7 +13366,7 @@
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls,
             locale = _a.locale;
-        return /*#__PURE__*/React__default["default"].createElement(Popup$1, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(Popup$1, __assign$3({
           visible: visible,
           className: cls(className, prefixCls + "-picker all-border-box"),
           close: function close() {
@@ -13494,7 +13578,7 @@
         var dateObj = {}; // 当前时间对象
         // @en current Date object
 
-        var currentDateObj = __assign$2({}, currentDateObjRef.current);
+        var currentDateObj = __assign$3({}, currentDateObjRef.current);
 
         allTypes.forEach(function (type) {
           var _a, _b; // 根据日期类型，计算出默认的日期范围
@@ -13521,12 +13605,12 @@
 
                 if (judgeObj(currentDateObj, minDateObjRef.current, checkKeys)) {
                   range[0] = minDateObjRef.current[type];
-                  currentDateObj = __assign$2(__assign$2({}, currentDateObj), (_a = {}, _a[type] = Math.max(minDateObjRef.current[type], currentDateObj[type]), _a));
+                  currentDateObj = __assign$3(__assign$3({}, currentDateObj), (_a = {}, _a[type] = Math.max(minDateObjRef.current[type], currentDateObj[type]), _a));
                 }
 
                 if (judgeObj(currentDateObj, maxDateObjRef.current, checkKeys)) {
                   range[range.length - 1] = maxDateObjRef.current[type];
-                  currentDateObj = __assign$2(__assign$2({}, currentDateObj), (_b = {}, _b[type] = Math.min(maxDateObjRef.current[type], currentDateObj[type]), _b));
+                  currentDateObj = __assign$3(__assign$3({}, currentDateObj), (_b = {}, _b[type] = Math.min(maxDateObjRef.current[type], currentDateObj[type]), _b));
                 }
               }
           }
@@ -13681,7 +13765,7 @@
       }, [visible]);
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement(Picker$1, __assign$2({}, otherProps, {
+        return /*#__PURE__*/React__default["default"].createElement(Picker$1, __assign$3({}, otherProps, {
           ref: pickerRef,
           visible: visible,
           className: cls(className, prefixCls + "-date-picker"),
@@ -13712,7 +13796,7 @@
           okText = _a.okText,
           restConfig = __rest$1(_a, ["onOk", "okText"]);
 
-      return __assign$2({
+      return __assign$3({
         footer: [{
           content: okText || function (locale) {
             return locale.Dialog.okText;
@@ -13730,7 +13814,7 @@
           cancelText = _a.cancelText,
           restConfig = __rest$1(_a, ["onOk", "okText", "onCancel", "cancelText"]);
 
-      return __assign$2({
+      return __assign$3({
         footer: [{
           content: cancelText || function (locale) {
             return locale.Dialog.cancelText;
@@ -13825,7 +13909,7 @@
         var prefixCls = _a.prefixCls,
             locale = _a.locale;
         var prefix = prefixCls + "-dialog";
-        return /*#__PURE__*/React__default["default"].createElement(Masking$1, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(Masking$1, __assign$3({
           close: close,
           className: cls(prefix, nowSystem, className),
           ref: maskingRef,
@@ -13937,7 +14021,7 @@
 
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefix, className, (_a = {}, _a[prefix + "--hairline"] = hairline, _a[prefix + "--with-text " + prefix + "--text-" + align] = children, _a[prefix + "--with-width"] = hasCustomWidth, _a)),
-          style: __assign$2(__assign$2({}, style), hasCustomWidth ? getStyleWithVendor({
+          style: __assign$3(__assign$3({}, style), hasCustomWidth ? getStyleWithVendor({
             flexBasis: width
           }) : {}),
           ref: domRef
@@ -14274,7 +14358,7 @@
             transform: optionsWrapperHeight ? 'translateY(0)' : trans,
             transition: "all " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction
           };
-          return getStyleWithVendor(__assign$2(__assign$2({}, transStyle), {
+          return getStyleWithVendor(__assign$3(__assign$3({}, transStyle), {
             overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
             maxHeight: maxHeight + "px"
           }));
@@ -14296,7 +14380,7 @@
               (_a = props.onOptionChange) === null || _a === void 0 ? void 0 : _a.call(props, vals, op);
             }
           };
-          return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({}, optionProps));
+          return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({}, optionProps));
         }
 
         return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
@@ -14322,7 +14406,7 @@
               'drop-up': !down
             }),
             ref: domRef,
-            style: __assign$2(__assign$2({
+            style: __assign$3(__assign$3({
               height: maskHeight.current + "px",
               maxWidth: windowWidth + "px"
             }, style), positionStyle)
@@ -14406,7 +14490,7 @@
 
         var _loop_1 = function _loop_1() {
           formattedOptions.push(ops.map(function (item) {
-            return __assign$2(__assign$2({}, item), {
+            return __assign$3(__assign$3({}, item), {
               disabled: item.disabled || false
             });
           }));
@@ -14628,7 +14712,7 @@
           return handleShowDropdownChange(false);
         };
 
-        var dropdownCommonProps = __assign$2(__assign$2({
+        var dropdownCommonProps = __assign$3(__assign$3({
           showDropdown: dropdownShown,
           top: (extraForDropdown === null || extraForDropdown === void 0 ? void 0 : extraForDropdown.top) || defaultTop,
           onCancel: onCancel
@@ -14682,7 +14766,7 @@
               'is-show': dropdownShown && selectedIndex === index
             })
           }) : icon));
-        }), props.multiple === true ? /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({}, __assign$2(__assign$2({
+        }), props.multiple === true ? /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({}, __assign$3(__assign$3({
           multiple: true,
           options: formattedOptions[selectedIndex] || [],
           selectedValue: currentValues[selectedIndex] || [],
@@ -14699,7 +14783,7 @@
           }
         }, dropdownCommonProps), {
           children: children
-        }))) : /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({}, __assign$2(__assign$2({
+        }))) : /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({}, __assign$3(__assign$3({
           multiple: props.multiple,
           options: formattedOptions[selectedIndex] || [],
           selectedValue: currentValues[selectedIndex] || 0,
@@ -15739,10 +15823,11 @@
       var domRef = React.useRef(null);
       var textRef = React.useRef(null);
       var ellipsisRef = React.useRef(null);
+      var ellipsisValueRef = useLatestRef(ellipsis);
       var lineHeightRef = React.useRef(0);
       var setCurLineHeight = React.useCallback(function () {
         if (domRef.current) {
-          lineHeightRef.current = getLineHeight(domRef.current);
+          lineHeightRef.current = Math.round(getLineHeight(domRef.current));
         }
       }, []);
       React.useEffect(function () {
@@ -15865,7 +15950,7 @@
           textRef.current.innerText = text;
         }
 
-        if (!ellipsis) {
+        if (!ellipsisValueRef.current) {
           return;
         }
 
@@ -16107,7 +16192,7 @@
         this._callbacks = {};
 
         this.setFieldsValue = function (values) {
-          _this._formData = __assign$2(__assign$2({}, _this._formData), values);
+          _this._formData = __assign$3(__assign$3({}, _this._formData), values);
 
           _this.notifyField(values);
 
@@ -16124,7 +16209,7 @@
         this.setFieldValue = function (name, value) {
           var _a, _b, _c;
 
-          _this._formData = __assign$2(__assign$2({}, _this._formData), (_a = {}, _a[name] = value, _a));
+          _this._formData = __assign$3(__assign$3({}, _this._formData), (_a = {}, _a[name] = value, _a));
           var onValuesChange = _this._callbacks.onValuesChange;
           onValuesChange && onValuesChange((_b = {}, _b[name] = value, _b), _this._formData);
 
@@ -16207,9 +16292,9 @@
           var initialValue = self.props.initialValue;
 
           if (initialValue !== undefined && name) {
-            _this._initialValues = __assign$2(__assign$2({}, _this._initialValues), (_a = {}, _a[name] = initialValue, _a));
+            _this._initialValues = __assign$3(__assign$3({}, _this._initialValues), (_a = {}, _a[name] = initialValue, _a));
 
-            _this.setFieldsValue(__assign$2(__assign$2({}, _this._formData), (_b = {}, _b[name] = initialValue, _b)));
+            _this.setFieldsValue(__assign$3(__assign$3({}, _this._formData), (_b = {}, _b[name] = initialValue, _b)));
           }
 
           return function () {
@@ -16221,7 +16306,7 @@
         };
 
         this.setInitialValues = function (initVal) {
-          _this._initialValues = __assign$2({}, initVal || {});
+          _this._initialValues = __assign$3({}, initVal || {});
 
           _this.setFieldsValue(initVal);
         };
@@ -16757,7 +16842,7 @@
         className: cls(prefixCls + "-form-item-control-wrapper")
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-form-item-control")
-      }, /*#__PURE__*/React__default["default"].createElement(FormItemInner, __assign$2({}, rest, {
+      }, /*#__PURE__*/React__default["default"].createElement(FormItemInner, __assign$3({}, rest, {
         rules: fieldRules,
         disabled: fieldDisabled,
         field: field,
@@ -16826,7 +16911,7 @@
             form.submit();
           }
         }, /*#__PURE__*/React__default["default"].createElement(FormItemContext.Provider, {
-          value: __assign$2(__assign$2({}, contextValue), {
+          value: __assign$3(__assign$3({}, contextValue), {
             validateMessages: (locale === null || locale === void 0 ? void 0 : locale.Form) || {}
           })
         }, children));
@@ -16915,7 +17000,7 @@
           var marginStyle = (_a = {}, _a[useRtl ? 'marginLeft' : 'marginRight'] = marginValue, _a);
           return /*#__PURE__*/React__default["default"].createElement("div", {
             key: index,
-            style: __assign$2(__assign$2({
+            style: __assign$3(__assign$3({
               marginBottom: marginBottom
             }, marginStyle), itemStyle),
             onClick: function onClick() {
@@ -18287,7 +18372,7 @@
                 });
 
                 if (index !== -1) {
-                  cacheRef.current[index] = __assign$2(__assign$2(__assign$2({}, cacheRef.current[index]), data), {
+                  cacheRef.current[index] = __assign$3(__assign$3(__assign$3({}, cacheRef.current[index]), data), {
                     status: undefined
                   });
                 }
@@ -18385,7 +18470,7 @@
                 return handleClick(e, image, index);
               },
               className: prefixCls + "-image-picker-image-container"
-            }, /*#__PURE__*/React__default["default"].createElement(BaseImage, __assign$2({
+            }, /*#__PURE__*/React__default["default"].createElement(BaseImage, __assign$3({
               showLoading: true,
               showError: true
             }, imageProps || {}, {
@@ -18467,7 +18552,7 @@
     var index$g = componentWrapper(ImagePicker, 'ImagePicker');
 
     /*!
-    * @arco-design/transformable v1.0.2
+    * @arco-design/transformable v1.0.1
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {
@@ -20625,9 +20710,7 @@
 
     function open$1(Component) {
       return function (config, context) {
-        var baseProps = __assign$2(__assign$2({
-          unmountOnExit: true
-        }, config || {}), {
+        var baseProps = __assign$3(__assign$3({}, config || {}), {
           close: function close() {}
         }); // 不同的key用不同的容器挂载
         // @en Different keys are mounted in different containers
@@ -20638,14 +20721,14 @@
         var leaving = false;
         var render = new ReactDOMRender(Component, div, context).render;
 
-        var dynamicProps = __assign$2(__assign$2({}, baseProps), {
+        var dynamicProps = __assign$3(__assign$3({}, baseProps), {
           getContainer: function getContainer() {
             return div;
           }
         });
 
         function update(newConfig) {
-          dynamicProps = __assign$2(__assign$2({}, dynamicProps), newConfig || {});
+          dynamicProps = __assign$3(__assign$3({}, dynamicProps), newConfig || {});
           render(dynamicProps);
         }
 
@@ -20659,10 +20742,7 @@
 
         dynamicProps.onClose = function () {
           baseProps.onClose && baseProps.onClose();
-
-          if (baseProps.unmountOnExit) {
-            removeElement(div);
-          }
+          removeElement(div);
         };
 
         dynamicProps.openIndex = -1;
@@ -20803,7 +20883,7 @@
           // @en Reset image state
 
           setImagesStatus(imagesStatusRef.current.map(function (status) {
-            return __assign$2(__assign$2({}, status), {
+            return __assign$3(__assign$3({}, status), {
               animated: false,
               loaded: false
             });
@@ -20931,7 +21011,7 @@
               setPlaceholders(function (holders) {
                 var _a;
 
-                return __assign$2(__assign$2({}, holders), (_a = {}, _a[index] = false, _a));
+                return __assign$3(__assign$3({}, holders), (_a = {}, _a[index] = false, _a));
               });
               var image = imageDomsRef.current[index];
               var transformer = transformersRef.current[index];
@@ -21335,7 +21415,7 @@
       function setImagesStatusByIndex(index, data) {
         setImagesStatus(function (current) {
           var newStatus = current.slice();
-          newStatus[index] = __assign$2(__assign$2({}, newStatus[index] || {}), data);
+          newStatus[index] = __assign$3(__assign$3({}, newStatus[index] || {}), data);
           return newStatus;
         });
       }
@@ -21396,7 +21476,7 @@
               setPlaceholders(function (holders) {
                 var _a;
 
-                return __assign$2(__assign$2({}, holders), (_a = {}, _a[index] = true, _a));
+                return __assign$3(__assign$3({}, holders), (_a = {}, _a[index] = true, _a));
               });
             }, Math.max(0, displayDuration - 80));
             var transitionEndDelay = images[index].transitionEndDelay || 30;
@@ -21467,7 +21547,7 @@
 
 
       function renderContent(carouselProps, allImages, getImageProps) {
-        return /*#__PURE__*/React__default["default"].createElement(Carousel, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(Carousel, __assign$3({
           autoPlay: false,
           loop: loop,
           lazyloadCount: lazyloadCount,
@@ -21479,7 +21559,7 @@
             style: {
               padding: "0 " + spaceBetween + "px"
             }
-          }, /*#__PURE__*/React__default["default"].createElement(BaseImage, __assign$2({
+          }, /*#__PURE__*/React__default["default"].createElement(BaseImage, __assign$3({
             className: "preview-image",
             fit: image.fit || fit || 'preview-y',
             boxWidth: windowWidth - spaceBetween * 2,
@@ -21551,7 +21631,7 @@
         } : {};
         return system === 'ios' && showPlaceholders[index] && originWidth && originHeight ? /*#__PURE__*/React__default["default"].createElement("img", {
           src: src,
-          style: __assign$2(__assign$2({
+          style: __assign$3(__assign$3({
             position: 'absolute',
             width: originWidth,
             height: originHeight,
@@ -21590,7 +21670,7 @@
           ref: domRef,
           onClick: handleClick,
           onDoubleClick: handleImageDoubleClick
-        }, renderContent(__assign$2({
+        }, renderContent(__assign$3({
           indicatorPos: indicatorPos,
           initialIndex: openIndex,
           ref: carouselRef,
@@ -21643,7 +21723,7 @@
                 setPlaceholders(function (holders) {
                   var _a;
 
-                  return __assign$2(__assign$2({}, holders), (_a = {}, _a[index] = true, _a));
+                  return __assign$3(__assign$3({}, holders), (_a = {}, _a[index] = true, _a));
                 });
               }
             },
@@ -22413,7 +22493,7 @@
           className: cls(prefixCls + "-label", {
             required: required
           })
-        }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React__default["default"].createElement("div", __assign$2({
+        }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React__default["default"].createElement("div", __assign$3({
           className: prefixCls + "-clear"
         }, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-suffix"
@@ -22474,7 +22554,7 @@
       function renderInput(_a) {
         var prefixCls = _a.prefixCls;
         var prefix = prefixCls + "-input";
-        return renderWrapper(prefix, type, /*#__PURE__*/React__default["default"].createElement("input", __assign$2({}, nativeProps, {
+        return renderWrapper(prefix, type, /*#__PURE__*/React__default["default"].createElement("input", __assign$3({}, nativeProps, {
           id: id,
           name: name,
           maxLength: maxLength,
@@ -22663,7 +22743,7 @@
         };
       }, []);
       React.useImperativeHandle(ref, function () {
-        return __assign$2({
+        return __assign$3({
           keyboard: keyboardRef.current
         }, popupRef.current);
       });
@@ -22724,7 +22804,7 @@
         }), getConfirmButton()) : null;
       };
 
-      return /*#__PURE__*/React__default["default"].createElement(Popup$1, __assign$2({
+      return /*#__PURE__*/React__default["default"].createElement(Popup$1, __assign$3({
         ref: popupRef,
         maskClass: prefix + "-popup",
         close: close
@@ -23097,7 +23177,7 @@
         return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: navBarRef,
           className: cls(wrapClass, prefixCls + "-nav-bar", (_b = {}, _b[prefixCls + "-nav-bar-fixed"] = fixed, _b[prefixCls + "-nav-bar-float"] = !placeholder, _b[prefixCls + "-nav-bar-hide"] = scrollToggleHide, _b)),
-          style: __assign$2(__assign$2({
+          style: __assign$3(__assign$3({
             paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : '0px'
           }, style || {}), relBackground ? {
             background: relBackground
@@ -23106,7 +23186,7 @@
           role: ariaRole
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(className, system, prefixCls + "-nav-bar-wrapper", (_c = {}, _c[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _c[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _c)),
-          style: __assign$2({
+          style: __assign$3({
             paddingTop: statusBarHeight ? statusBarHeight + "px" : '0px'
           }, customStyle)
         }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23342,7 +23422,7 @@
           }
         }
 
-        var dynamicProps = __assign$2(__assign$2({}, config), {
+        var dynamicProps = __assign$3(__assign$3({}, config), {
           close: close,
           onClose: destroy,
           getContainer: function getContainer() {
@@ -23354,7 +23434,7 @@
         var leaving = false;
 
         function update(newConfig) {
-          dynamicProps = __assign$2(__assign$2({}, dynamicProps), newConfig);
+          dynamicProps = __assign$3(__assign$3({}, dynamicProps), newConfig);
           render(dynamicProps);
         }
 
@@ -23456,7 +23536,7 @@
         return content ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixClass + "-content " + (visible ? prefixClass + "-content-transition-Y0" : prefixClass + "-content-transition-Y100"),
           ref: innerRef,
-          style: __assign$2({}, hasTrans ? getStyleWithVendor({
+          style: __assign$3({}, hasTrans ? getStyleWithVendor({
             transitionDuration: transitionDuration + "ms"
           }) : {})
         }, content) : null;
@@ -23465,7 +23545,7 @@
       var render = function render(prefixCls) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-notify " + prefixCls + "-notify-" + type + " " + className,
-          style: __assign$2(__assign$2(__assign$2({}, style), hasTrans ? getStyleWithVendor({
+          style: __assign$3(__assign$3(__assign$3({}, style), hasTrans ? getStyleWithVendor({
             transitionDuration: transitionDuration + "ms"
           }) : {}), {
             height: visible ? innerHeight : 0
@@ -23845,7 +23925,7 @@
             }, text));
           }));
         }, [prefixCls, menuLayout, formattedMenu, activeIndex, useClickStatus, clickStatusDuration, onClickMenuItem, onSelect]);
-        return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({
           ref: popoverRef,
           visible: visibleState,
           clickSelfToClose: clickSelfToClose,
@@ -24116,7 +24196,7 @@
         var childRect = _a.childRect,
             config = _a.config;
 
-        var newConfig = __assign$2(__assign$2({}, config), {
+        var newConfig = __assign$3(__assign$3({}, config), {
           adjustOffset: 0
         });
 
@@ -25151,12 +25231,12 @@
         var disStyle = getStyleWithVendor({
           transform: distance.value ? "translate" + distance.direction + "(" + distance.value + "px) translateZ(2px)" : void 0
         });
-        return __assign$2(__assign$2({}, contentStyle || {}), disStyle);
+        return __assign$3(__assign$3({}, contentStyle || {}), disStyle);
       }
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
-        return /*#__PURE__*/React__default["default"].createElement(Popup$1, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(Popup$1, __assign$3({
           ref: popupRef,
           visible: visible,
           close: close,
@@ -25177,7 +25257,7 @@
             });
             _onClose === null || _onClose === void 0 ? void 0 : _onClose(scene);
           },
-          maskStyle: __assign$2(__assign$2({}, maskStyle || {}), {
+          maskStyle: __assign$3(__assign$3({}, maskStyle || {}), {
             opacity: percent ? 1 - percent : void 0
           }),
           contentStyle: getContentStyle()
@@ -25299,7 +25379,7 @@
           }, {
             'progress-disabled': disabled
           }, className),
-          style: __assign$2({
+          style: __assign$3({
             top: top
           }, style),
           ref: domRef
@@ -25520,7 +25600,7 @@
       var currentLabelStyle = React.useMemo(function () {
         var _a, _b;
 
-        return useHideAsNestedScroll && !touching && status === PullRefreshStatus.Pulling && ((_b = (_a = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0) > 0 || disabled ? __assign$2(__assign$2({}, labelStyle), {
+        return useHideAsNestedScroll && !touching && status === PullRefreshStatus.Pulling && ((_b = (_a = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0) > 0 || disabled ? __assign$3(__assign$3({}, labelStyle), {
           opacity: 0
         }) : labelStyle;
       }, [labelStyle, useHideAsNestedScroll, touching, disabled]);
@@ -25635,7 +25715,7 @@
           'is-disabled': disabled || !touching && useHideAsNestedScroll
         }),
         ref: domRef,
-        style: contentHeight > 0 ? __assign$2({
+        style: contentHeight > 0 ? __assign$3({
           height: contentHeight
         }, style || {}) : style
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -25744,7 +25824,7 @@
 
         var translateY = dampRateCalculate(y, loosingHeight, dampRate);
         currentTranslateYRef.current = translateY;
-        placeRef.current && setStyleWithVendor(placeRef.current, __assign$2({
+        placeRef.current && setStyleWithVendor(placeRef.current, __assign$3({
           transform: translateY ? "translateY(" + translateY + "px) translateZ(0)" : ''
         }, ms ? {
           transition: "all " + ms / 1000 + "s"
@@ -25925,7 +26005,7 @@
 
       var system = useSystem();
       var Container = type === 'ios' || useIosOptimize && (type || system) === 'ios' ? PullRefresh$2 : PullRefresh$1;
-      return /*#__PURE__*/React__default["default"].createElement(Container, __assign$2({}, __assign$2(__assign$2({}, rest), {
+      return /*#__PURE__*/React__default["default"].createElement(Container, __assign$3({}, __assign$3(__assign$3({}, rest), {
         ref: ref
       })), children);
     });
@@ -26003,7 +26083,7 @@
               onChange: handleChange
             }
           }, children, !children && options && options.map(function (option) {
-            return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({
+            return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({
               key: option.value
             }, option, {
               isRadio: true
@@ -26020,7 +26100,7 @@
         React.useImperativeHandle(ref, function () {
           return radioRef.current;
         });
-        return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({
           ref: radioRef
         }, mergedProps, {
           isRadio: true
@@ -26287,7 +26367,7 @@
         splitIndex = i;
       }
 
-      return splitIndex > -1 ? [createHighlightNode(__assign$2(__assign$2({}, otherConfig), {
+      return splitIndex > -1 ? [createHighlightNode(__assign$3(__assign$3({}, otherConfig), {
         keyword: content.substring(0, splitIndex + 1)
       }), 0), content.substring(splitIndex + 1)] : content;
     }
@@ -26503,7 +26583,7 @@
         }) : null);
       };
 
-      var _l = useInputLogic(__assign$2({
+      var _l = useInputLogic(__assign$3({
         className: cls(className, searchBarPrefixCls + "-" + shape),
         prefix: prefix,
         clearable: clearable,
@@ -26576,7 +26656,7 @@
       };
 
       var renderSearchBar = function renderSearchBar() {
-        return renderWrapper(searchBarPrefixCls, type, /*#__PURE__*/React__default["default"].createElement("input", __assign$2({}, nativeProps, {
+        return renderWrapper(searchBarPrefixCls, type, /*#__PURE__*/React__default["default"].createElement("input", __assign$3({}, nativeProps, {
           id: id,
           name: name,
           maxLength: maxLength,
@@ -27183,7 +27263,7 @@
       });
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-node", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
-        style: __assign$2({
+        style: __assign$3({
           backgroundColor: backgroundColor
         }, style),
         ref: domRef
@@ -27220,7 +27300,7 @@
       });
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-title", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
-        style: __assign$2({
+        style: __assign$3({
           width: width,
           backgroundColor: backgroundColor
         }, style),
@@ -27319,7 +27399,7 @@
       });
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-skeleton-item", prefixCls + "-skeleton-avatar", showAnimation && prefixCls + "-skeleton-animation-" + animation, className),
-        style: __assign$2({
+        style: __assign$3({
           backgroundColor: backgroundColor
         }, style),
         ref: domRef
@@ -27434,12 +27514,12 @@
       var hasTitle = !!title;
       var hasParagraph = !!paragraph;
       var hasAvatar = !!avatar;
-      var content = isGrid ? /*#__PURE__*/React__default["default"].createElement(SkeletonGrid, __assign$2({}, getComponentProps(grid))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasAvatar && /*#__PURE__*/React__default["default"].createElement(SkeletonAvatar, __assign$2({}, getComponentProps(avatar))), (hasTitle || hasParagraph) && /*#__PURE__*/React__default["default"].createElement("div", {
+      var content = isGrid ? /*#__PURE__*/React__default["default"].createElement(SkeletonGrid, __assign$3({}, getComponentProps(grid))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasAvatar && /*#__PURE__*/React__default["default"].createElement(SkeletonAvatar, __assign$3({}, getComponentProps(avatar))), (hasTitle || hasParagraph) && /*#__PURE__*/React__default["default"].createElement("div", {
         className: prefixCls + "-skeleton-content"
-      }, hasTitle && /*#__PURE__*/React__default["default"].createElement(SkeletonTitle, __assign$2({}, getComponentProps(title))), hasParagraph && /*#__PURE__*/React__default["default"].createElement(SkeletonParagraph, __assign$2({}, getComponentProps(paragraph)))));
+      }, hasTitle && /*#__PURE__*/React__default["default"].createElement(SkeletonTitle, __assign$3({}, getComponentProps(title))), hasParagraph && /*#__PURE__*/React__default["default"].createElement(SkeletonParagraph, __assign$3({}, getComponentProps(paragraph)))));
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-skeleton", (_a = {}, _a[prefixCls + "-skeleton-with-avatar"] = hasAvatar, _a), className),
-        style: __assign$2({
+        style: __assign$3({
           color: animationGradientColor
         }, style),
         ref: domRef
@@ -28066,7 +28146,7 @@
           className: cls(prefixCls + "-slider-marks-item", {
             'is-activated': activated
           }, className),
-          style: __assign$2(__assign$2({}, genMarkStyle(value)), style)
+          style: __assign$3(__assign$3({}, genMarkStyle(value)), style)
         }, showMarks && /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-slider-marks-item-label"
         }, label));
@@ -28213,11 +28293,11 @@
         ref: lineRef
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: prefixCls + "-slider-line is-activated " + transitionClass,
-        style: __assign$2(__assign$2({}, heightStyle), activeLineStyle)
+        style: __assign$3(__assign$3({}, heightStyle), activeLineStyle)
       }, thumbConfig.map(function (cfg, idx) {
-        return /*#__PURE__*/React__default["default"].createElement(Thumb, __assign$2({
+        return /*#__PURE__*/React__default["default"].createElement(Thumb, __assign$3({
           key: idx
-        }, __assign$2({
+        }, __assign$3({
           value: Array.isArray(valueGroup) ? valueGroup[idx] : valueGroup,
           idx: idx,
           min: min,
@@ -28231,7 +28311,7 @@
           prefixCls = _a === void 0 ? '' : _a;
       var defaultProps = React.useContext(SliderContext);
 
-      var newProps = __assign$2(__assign$2(__assign$2({}, defaultProps), {
+      var newProps = __assign$3(__assign$3(__assign$3({}, defaultProps), {
         renderThumb: baseRenderThumb(prefixCls)
       }), props);
 
@@ -28595,7 +28675,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-" + type + " " + prefixCls + "-info-container", className),
-        style: __assign$2({
+        style: __assign$3({
           zIndex: index
         }, actionStyle),
         onClick: click
@@ -28888,7 +28968,7 @@
 
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-swipe-action", className, offset === 0 ? 'action-close' : 'action-open'),
-        style: getStyleWithVendor(__assign$2(__assign$2(__assign$2({}, style || {}), transitionStyle), {
+        style: getStyleWithVendor(__assign$3(__assign$3(__assign$3({}, style || {}), transitionStyle), {
           transform: "translateX(" + offset + "px)"
         })),
         ref: domRef,
@@ -28896,13 +28976,13 @@
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-swipe-action-menu-left", prefixCls + "-swipe-action-menu", offset > 0 ? 'action-open' : 'action-close'),
         ref: leftRef,
-        style: isLayer && offset >= 0 ? __assign$2({
+        style: isLayer && offset >= 0 ? __assign$3({
           width: offset
         }, transitionStyle) : {}
       }, leftActions === null || leftActions === void 0 ? void 0 : leftActions.map(function (action, index) {
         return /*#__PURE__*/React__default["default"].createElement(renderAction, {
-          action: __assign$2(__assign$2({}, action || {}), {
-            style: __assign$2(__assign$2({}, isLayer ? {
+          action: __assign$3(__assign$3({}, action || {}), {
+            style: __assign$3(__assign$3({}, isLayer ? {
               right: getActionRightByIndex(index)
             } : {}), action.style || {}),
             className: cls(action.className, "open-style-" + openStyleType)
@@ -28918,13 +28998,13 @@
       }, children), /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-swipe-action-menu-right", prefixCls + "-swipe-action-menu", offset < 0 ? 'action-open' : 'action-close'),
         ref: rightRef,
-        style: isLayer && offset <= 0 ? __assign$2({
+        style: isLayer && offset <= 0 ? __assign$3({
           width: -1 * offset
         }, transitionStyle) : {}
       }, rightActions === null || rightActions === void 0 ? void 0 : rightActions.map(function (action, index) {
         return /*#__PURE__*/React__default["default"].createElement(renderAction, {
-          action: __assign$2(__assign$2({}, action || {}), {
-            style: __assign$2(__assign$2({}, isLayer ? {
+          action: __assign$3(__assign$3({}, action || {}), {
+            style: __assign$3(__assign$3({}, isLayer ? {
               left: getActionLeftByIndex(index)
             } : {}), action.style || {}),
             className: cls(action.className, "open-style-" + openStyleType)
@@ -28987,16 +29067,19 @@
           onTouchCancel = props.onTouchCancel,
           onTouchMove = props.onTouchMove,
           renderLabel = props.renderLabel;
-      var _q = React.useContext(GlobalContext).locale,
-          locale = _q === void 0 ? defaultLocale : _q;
 
-      var _r = React.useState(disabled),
-          disableState = _r[0],
-          setDisableState = _r[1];
+      var _q = React.useContext(GlobalContext),
+          _r = _q.locale,
+          locale = _r === void 0 ? defaultLocale : _r,
+          useRtl = _q.useRtl;
 
-      var _s = React.useState(0),
-          labelOffsetState = _s[0],
-          setLabelOffsetState = _s[1];
+      var _s = React.useState(disabled),
+          disableState = _s[0],
+          setDisableState = _s[1];
+
+      var _t = React.useState(0),
+          labelOffsetState = _t[0],
+          setLabelOffsetState = _t[1];
 
       var containerRef = React.useRef(null);
       var loadingRef = React.useRef(null);
@@ -29070,16 +29153,20 @@
           // 判断元素是否属于滚动元素 先置为1 之后变成0表示非滚动容器
           // @en Determine whether the element belongs to a scrolling element. Set it to 1 and then change to 0 to indicate a non-scrolling container
           if (!scrollContainer.scrollLeft) {
-            scrollContainer.scrollLeft = 1;
+            scrollContainer.scrollLeft = useRtl ? -1 : 1;
           }
 
           endX = e.touches[0].clientX || 0;
           var diff = endX - startX;
           offsetRef.current = diff;
-          var labelDiff = fingerDisToLabelDis(Math.abs(diff), damping); // 滑动到最左侧，处理回弹效果
+          var labelDiff = fingerDisToLabelDis(Math.abs(diff), damping); // 判断是否是滚动到列表开始方向，ltr模式下是向左滚动，rtl模式下是向右滚动
+
+          var isScrollToLeft = useRtl ? diff < 0 : diff > 0; // 判断是否是滚动到列表结束方向，ltr模式下是向右滚动，rtl模式下是向左滚动
+
+          var isScrollToRight = useRtl ? diff > 0 : diff < 0; // 滑动到最左侧，处理回弹效果
           // @en Swipe to the far left to handle the rebound effect
 
-          if (diff > 0 && scrollContainer.scrollLeft <= 1 && bounceWhenBumpBoundary) {
+          if (isScrollToLeft && Math.abs(scrollContainer.scrollLeft) <= 1 && bounceWhenBumpBoundary) {
             e.stopPropagation();
             e.cancelBubble && e.preventDefault();
             bouncingRef.current = true;
@@ -29097,14 +29184,14 @@
           // @en Swipe left to the end and the 'more' label is loaded. Judging by scrollLeft, the scroll container reaches the edge and the non-scroll container does not judge
 
 
-          if (diff < 0 && (scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && !ifToRightRef.current) {
+          if (isScrollToRight && (Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && !ifToRightRef.current) {
             showLoadMoreRef.current = true;
             loadingCurrent.style.display = 'flex';
           } // 继续滑动露出标签
           // @en Continue swiping to reveal labels
 
 
-          if (showLoadMoreRef.current && diff < 0) {
+          if (showLoadMoreRef.current && isScrollToRight) {
             // 此时禁止list原生滚动
             // @en Disable list native scrolling at this time
             e.stopPropagation();
@@ -29124,22 +29211,22 @@
 
             setStyleWithVendor(loadingCurrent, {
               transition: 'none',
-              transform: "translateX(-" + labelRightMargin + "px) translateZ(0)"
+              transform: useRtl ? "translateX(" + labelRightMargin + "px) translateZ(0)" : "translateX(-" + labelRightMargin + "px) translateZ(0)"
             });
             setStyleWithVendor(scrollContainer, {
               transition: 'none',
-              transform: "translateX(-" + listRightMargin + "px) translateZ(0)"
+              transform: useRtl ? "translateX(" + listRightMargin + "px) translateZ(0)" : "translateX(-" + listRightMargin + "px) translateZ(0)"
             });
           }
 
-          if (diff > 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
+          if (isScrollToLeft && Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
             showLoadMoreRef.current = false;
             loadingCurrent.style.display = 'none';
           } // 针对ios惯性滚动处理
           // @en Handling inertial scrolling for ios
 
 
-          if (diff < 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
+          if (isScrollToRight && Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
             ifToRightRef.current = false;
           } else {
             ifToRightRef.current = true;
@@ -29184,7 +29271,7 @@
           // @em Swipe left,  labels are all displayed
 
 
-          if (labelDiff >= minConfirmOffset && (scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && showLoadMoreRef.current) {
+          if (labelDiff >= minConfirmOffset && (Math.abs(scrollContainer.scrollLeft) + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && showLoadMoreRef.current) {
             onConfirm(); // 安卓机型返回动画优化
             // @en Return animation optimization on Android
 
@@ -29212,6 +29299,8 @@
         };
       });
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var _b, _c;
+
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-swipe-load " + className,
@@ -29222,19 +29311,17 @@
         }, children), renderLabel ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-custom-loading-area"),
           ref: loadingRef,
-          style: {
-            position: 'absolute',
-            right: initPos + "px"
-          }
+          style: (_b = {
+            position: 'absolute'
+          }, _b[useRtl ? 'left' : 'right'] = initPos + "px", _b)
         }, renderLabel.length ? renderLabel(labelOffsetState) : renderLabel()) : /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-loading-area"),
           ref: loadingRef,
-          style: {
+          style: (_c = {
             width: circleSize + "px",
             height: circleSize + "px",
-            position: 'absolute',
-            right: "-" + circleSize + "px"
-          }
+            position: 'absolute'
+          }, _c[useRtl ? 'left' : 'right'] = "-" + circleSize + "px", _c)
         }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-loading-label"),
           ref: loadingLabelRef
@@ -29435,7 +29522,7 @@
             style: style,
             ref: domRef
           }, dataSource ? dataSource.map(function (data, index) {
-            return renderItem( /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({
+            return renderItem( /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({
               key: index
             }, data)), index);
           }) : React.Children.toArray(children).map(function (child, index) {
@@ -29493,7 +29580,7 @@
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-tab-bar-item", (_b = {}, _b[prefixCls + "-tab-bar-item-active"] = active, _b), className),
-          style: __assign$2(__assign$2({}, style), active ? activeCustomStyle : {}),
+          style: __assign$3(__assign$3({}, style), active ? activeCustomStyle : {}),
           ref: domRef,
           onClick: function onClick(e) {
             return handleClick(e);
@@ -29547,7 +29634,7 @@
       });
 
       function getTagStyle() {
-        return __assign$2({
+        return __assign$3({
           color: color,
           background: bgColor,
           borderColor: borderColor,
@@ -29607,7 +29694,7 @@
           var paddingStyle = index === list.length - 1 && !showAddButton ? {} : {
             marginRight: horizontalPadding
           };
-          return __assign$2(__assign$2(__assign$2({}, baseStyle), paddingStyle), {
+          return __assign$3(__assign$3(__assign$3({}, baseStyle), paddingStyle), {
             marginBottom: verticalPadding
           });
         }
@@ -29625,7 +29712,7 @@
             };
           }
 
-          return __assign$2(__assign$2({}, style || {}), marginStyle);
+          return __assign$3(__assign$3({}, style || {}), marginStyle);
         }
 
         return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
@@ -29637,7 +29724,7 @@
             style: getListStyle(),
             ref: domRef
           }, list.map(function (tag, index) {
-            return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$2({
+            return /*#__PURE__*/React__default["default"].createElement(Comp, __assign$3({
               key: index
             }, tag, {
               style: getTagStyle(tag, index),
@@ -29788,7 +29875,7 @@
       function renderTextarea(_a) {
         var prefixCls = _a.prefixCls;
         var prefix = prefixCls + "-input";
-        return renderWrapper(prefix, "textarea " + (showStatistics ? 'has-stat' : ''), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("textarea", __assign$2({}, nativeProps, {
+        return renderWrapper(prefix, "textarea " + (showStatistics ? 'has-stat' : ''), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("textarea", __assign$3({}, nativeProps, {
           id: id,
           name: name,
           rows: rows,
@@ -29858,7 +29945,7 @@
           }
         }
 
-        var dynamicProps = __assign$2(__assign$2({}, config), {
+        var dynamicProps = __assign$3(__assign$3({}, config), {
           close: close,
           getContainer: function getContainer() {
             return div;
@@ -29870,7 +29957,7 @@
         var leaving = false;
 
         function update(newConfig) {
-          dynamicProps = __assign$2(__assign$2({}, dynamicProps), newConfig);
+          dynamicProps = __assign$3(__assign$3({}, dynamicProps), newConfig);
           render(dynamicProps);
         }