@arco-design/mobile-react 2.30.6 → 2.30.8

package/esm/checkbox/style/css/index.css

@@ -502,9 +502,6 @@
   -webkit-align-items: center;
           align-items: center;
 }
-.arco-checkbox:focus {
-  outline: none;
-}
 .arco-checkbox .checkbox-icon {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/esm/checkbox/style/index.less

@@ -4,11 +4,6 @@
     display: inline-flex;
     align-items: center;
 
-    // iOS low-end machine style compatibility issues
-    &:focus {
-        outline: none;
-    }
-
     .checkbox-icon {
         display: inline-flex;
         align-items: center;

package/esm/ellipsis/components/js-ellipsis.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, forwardRef, useImperativeHandle, useCallback } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 import { getLineHeight, wrapTextChildNodesWithSpan } from '../utils/dom';
+import { useLatestRef } from '../../_helpers';
 var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
   var prefixCls = props.prefixCls,
       text = props.text,
@@ -20,10 +21,11 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
   var domRef = useRef(null);
   var textRef = useRef(null);
   var ellipsisRef = useRef(null);
+  var ellipsisValueRef = useLatestRef(ellipsis);
   var lineHeightRef = useRef(0);
   var setCurLineHeight = useCallback(function () {
     if (domRef.current) {
-      lineHeightRef.current = getLineHeight(domRef.current);
+      lineHeightRef.current = Math.round(getLineHeight(domRef.current));
     }
   }, []);
   useEffect(function () {
@@ -81,7 +83,6 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
   function truncateHTML(container, textContainer, max) {
     // only enter this function when container overflow.
     var children = textContainer.childNodes;
-    var actualHeight = getActualHeight(container);
 
     if (children.length === 1) {
       var node = children[0];
@@ -92,6 +93,7 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
         var html = node.innerHTML; // clear content to determine whether the empty node can be placed.
 
         node.innerHTML = '';
+        var actualHeight = getActualHeight(container);
 
         if (actualHeight > max) {
           // return after remove the node, if overflow with empty node.
@@ -112,7 +114,9 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
       while (i < nodes.length) {
         textContainer.appendChild(nodes[i]);
 
-        if (actualHeight > max) {
+        var _actualHeight = getActualHeight(container);
+
+        if (_actualHeight > max) {
           if (nodes[i].childNodes && nodes[i].childNodes.length) {
             break;
           } else {
@@ -147,7 +151,7 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
       textRef.current.innerText = text;
     }
 
-    if (!ellipsis) {
+    if (!ellipsisValueRef.current) {
       return;
     }
 

package/esm/radio/style/css/index.css

@@ -502,9 +502,6 @@
   -webkit-align-items: center;
           align-items: center;
 }
-.arco-radio:focus {
-  outline: none;
-}
 .arco-radio .radio-icon {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/esm/radio/style/index.less

@@ -4,11 +4,6 @@
     display: inline-flex;
     align-items: center;
 
-    // iOS low-end machine style compatibility issues
-    &:focus {
-        outline: none;
-    }
-
     .radio-icon {
         display: inline-flex;
         align-items: center;

package/esm/skeleton/type.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { BaseProps, SimpleBaseProps } from '../_helpers';
+export { BaseProps, SimpleBaseProps };
 export interface SkeletonProps extends SimpleBaseProps {
     /**
      * 是否显示标题占位图

package/esm/skeleton/type.js

@@ -1 +1,2 @@
-export {};
+import { BaseProps, SimpleBaseProps } from '../_helpers';
+export { BaseProps, SimpleBaseProps };

package/esm/swipe-load/index.js

@@ -56,7 +56,8 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useContext = useContext(GlobalContext),
       _useContext$locale = _useContext.locale,
-      locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale;
+      locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale,
+      useRtl = _useContext.useRtl;
 
   var _useState = useState(disabled),
       disableState = _useState[0],
@@ -138,16 +139,20 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
       // 判断元素是否属于滚动元素 先置为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;
@@ -165,14 +170,14 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
       // @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();
@@ -192,22 +197,22 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
 
         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;
@@ -252,7 +257,7 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
       // @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
 
@@ -280,6 +285,8 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   });
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var _ref2, _ref3;
+
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-swipe-load " + className,
@@ -290,19 +297,17 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
     }, children), renderLabel ? /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-custom-loading-area"),
       ref: loadingRef,
-      style: {
-        position: 'absolute',
-        right: initPos + "px"
-      }
+      style: (_ref2 = {
+        position: 'absolute'
+      }, _ref2[useRtl ? 'left' : 'right'] = initPos + "px", _ref2)
     }, renderLabel.length ? renderLabel(labelOffsetState) : renderLabel()) : /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-loading-area"),
       ref: loadingRef,
-      style: {
+      style: (_ref3 = {
         width: circleSize + "px",
         height: circleSize + "px",
-        position: 'absolute',
-        right: "-" + circleSize + "px"
-      }
+        position: 'absolute'
+      }, _ref3[useRtl ? 'left' : 'right'] = "-" + circleSize + "px", _ref3)
     }, /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-loading-label"),
       ref: loadingLabelRef

package/esm/swipe-load/style/css/index.css

@@ -519,6 +519,10 @@
   color:  #1d2129 ;
   font-size:  0.24rem ;
 }
+[dir="rtl"] .arco-swipe-load .arco-loading-area .arco-loading-label {
+  margin-left: initial;
+  margin-right:  0.4rem ;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *

package/esm/swipe-load/style/index.less

@@ -20,7 +20,7 @@
         .use-var(border-radius, swipe-load-label-border-radius);
 
         .@{prefix}-loading-label {
-            .use-var(margin-left, swipe-load-label-text-margin-left);
+            .use-var-with-rtl(margin-left, swipe-load-label-text-margin-left);
             .use-var(width, swipe-load-label-text-width);
             .use-var(color, swipe-load-label-text-color);
             .use-var(font-size, swipe-load-label-text-font-size);

package/esm/tabs/index.js

@@ -440,11 +440,12 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     changeFromRef.current = changeFrom || '';
     setCellTrans(true);
     setInnerIndex(newIndex);
-    setDistance(0);
 
     if (newIndex !== activeIndexRef.current) {
       onChange && onChange(tabs[newIndex], newIndex, changeFrom);
     }
+
+    setDistance(0);
   }
 
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.30.6",
+    "version": "2.30.8",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.17.6",
+        "@arco-design/mobile-utils": "2.17.8",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a6778485284e4fe9c39e79695d3665371fc2c9c8"
+    "gitHead": "2838b15919944eb0a2122b01cb1a9e8e0e0af75a"
 }

package/style/css/public.css

@@ -549,6 +549,9 @@ samp {
 .all-border-box * {
   box-sizing: border-box;
 }
+[tabIndex='0']:focus {
+  outline: none;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *

package/umd/checkbox/style/css/index.css

@@ -502,9 +502,6 @@
   -webkit-align-items: center;
           align-items: center;
 }
-.arco-checkbox:focus {
-  outline: none;
-}
 .arco-checkbox .checkbox-icon {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/umd/checkbox/style/index.less

@@ -4,11 +4,6 @@
     display: inline-flex;
     align-items: center;
 
-    // iOS low-end machine style compatibility issues
-    &:focus {
-        outline: none;
-    }
-
     .checkbox-icon {
         display: inline-flex;
         align-items: center;

package/umd/ellipsis/components/js-ellipsis.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "resize-observer-polyfill", "../utils/dom"], factory);
+    define(["exports", "react", "resize-observer-polyfill", "../utils/dom", "../../_helpers"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("resize-observer-polyfill"), require("../utils/dom"));
+    factory(exports, require("react"), require("resize-observer-polyfill"), require("../utils/dom"), require("../../_helpers"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.resizeObserverPolyfill, global.dom);
+    factory(mod.exports, global.react, global.resizeObserverPolyfill, global.dom, global._helpers);
     global.jsEllipsis = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _resizeObserverPolyfill, _dom) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _resizeObserverPolyfill, _dom, _helpers) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -43,10 +43,11 @@
     var domRef = (0, _react.useRef)(null);
     var textRef = (0, _react.useRef)(null);
     var ellipsisRef = (0, _react.useRef)(null);
+    var ellipsisValueRef = (0, _helpers.useLatestRef)(ellipsis);
     var lineHeightRef = (0, _react.useRef)(0);
     var setCurLineHeight = (0, _react.useCallback)(function () {
       if (domRef.current) {
-        lineHeightRef.current = (0, _dom.getLineHeight)(domRef.current);
+        lineHeightRef.current = Math.round((0, _dom.getLineHeight)(domRef.current));
       }
     }, []);
     (0, _react.useEffect)(function () {
@@ -104,7 +105,6 @@
     function truncateHTML(container, textContainer, max) {
       // only enter this function when container overflow.
       var children = textContainer.childNodes;
-      var actualHeight = getActualHeight(container);
 
       if (children.length === 1) {
         var node = children[0];
@@ -115,6 +115,7 @@
           var html = node.innerHTML; // clear content to determine whether the empty node can be placed.
 
           node.innerHTML = '';
+          var actualHeight = getActualHeight(container);
 
           if (actualHeight > max) {
             // return after remove the node, if overflow with empty node.
@@ -135,7 +136,9 @@
         while (i < nodes.length) {
           textContainer.appendChild(nodes[i]);
 
-          if (actualHeight > max) {
+          var _actualHeight = getActualHeight(container);
+
+          if (_actualHeight > max) {
             if (nodes[i].childNodes && nodes[i].childNodes.length) {
               break;
             } else {
@@ -170,7 +173,7 @@
         textRef.current.innerText = text;
       }
 
-      if (!ellipsis) {
+      if (!ellipsisValueRef.current) {
         return;
       }
 

package/umd/radio/style/css/index.css

@@ -502,9 +502,6 @@
   -webkit-align-items: center;
           align-items: center;
 }
-.arco-radio:focus {
-  outline: none;
-}
 .arco-radio .radio-icon {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/umd/radio/style/index.less

@@ -4,11 +4,6 @@
     display: inline-flex;
     align-items: center;
 
-    // iOS low-end machine style compatibility issues
-    &:focus {
-        outline: none;
-    }
-
     .radio-icon {
         display: inline-flex;
         align-items: center;

package/umd/skeleton/type.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { BaseProps, SimpleBaseProps } from '../_helpers';
+export { BaseProps, SimpleBaseProps };
 export interface SkeletonProps extends SimpleBaseProps {
     /**
      * 是否显示标题占位图

package/umd/skeleton/type.js

@@ -1,17 +1,19 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports"], factory);
+    define(["exports", "../_helpers"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports);
+    factory(exports, require("../_helpers"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports);
+    factory(mod.exports, global._helpers);
     global.type = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _helpers) {
   "use strict";
 
   _exports.__esModule = true;
+  _exports.BaseProps = _helpers.BaseProps;
+  _exports.SimpleBaseProps = _helpers.SimpleBaseProps;
 });

package/umd/swipe-load/index.js

@@ -79,7 +79,8 @@
 
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
         _useContext$locale = _useContext.locale,
-        locale = _useContext$locale === void 0 ? _mobileUtils.defaultLocale : _useContext$locale;
+        locale = _useContext$locale === void 0 ? _mobileUtils.defaultLocale : _useContext$locale,
+        useRtl = _useContext.useRtl;
 
     var _useState = (0, _react.useState)(disabled),
         disableState = _useState[0],
@@ -161,16 +162,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 = (0, _mobileUtils.fingerDisToLabelDis)(Math.abs(diff), damping); // 滑动到最左侧，处理回弹效果
+        var labelDiff = (0, _mobileUtils.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;
@@ -188,14 +193,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();
@@ -215,22 +220,22 @@
 
           (0, _helpers.setStyleWithVendor)(loadingCurrent, {
             transition: 'none',
-            transform: "translateX(-" + labelRightMargin + "px) translateZ(0)"
+            transform: useRtl ? "translateX(" + labelRightMargin + "px) translateZ(0)" : "translateX(-" + labelRightMargin + "px) translateZ(0)"
           });
           (0, _helpers.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;
@@ -275,7 +280,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
 
@@ -303,6 +308,8 @@
       };
     });
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+      var _ref2, _ref3;
+
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-swipe-load " + className,
@@ -313,19 +320,17 @@
       }, children), renderLabel ? /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-custom-loading-area"),
         ref: loadingRef,
-        style: {
-          position: 'absolute',
-          right: initPos + "px"
-        }
+        style: (_ref2 = {
+          position: 'absolute'
+        }, _ref2[useRtl ? 'left' : 'right'] = initPos + "px", _ref2)
       }, renderLabel.length ? renderLabel(labelOffsetState) : renderLabel()) : /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-loading-area"),
         ref: loadingRef,
-        style: {
+        style: (_ref3 = {
           width: circleSize + "px",
           height: circleSize + "px",
-          position: 'absolute',
-          right: "-" + circleSize + "px"
-        }
+          position: 'absolute'
+        }, _ref3[useRtl ? 'left' : 'right'] = "-" + circleSize + "px", _ref3)
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-loading-label"),
         ref: loadingLabelRef

package/umd/swipe-load/style/css/index.css

@@ -519,6 +519,10 @@
   color:  #1d2129 ;
   font-size:  0.24rem ;
 }
+[dir="rtl"] .arco-swipe-load .arco-loading-area .arco-loading-label {
+  margin-left: initial;
+  margin-right:  0.4rem ;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *

package/umd/swipe-load/style/index.less

@@ -20,7 +20,7 @@
         .use-var(border-radius, swipe-load-label-border-radius);
 
         .@{prefix}-loading-label {
-            .use-var(margin-left, swipe-load-label-text-margin-left);
+            .use-var-with-rtl(margin-left, swipe-load-label-text-margin-left);
             .use-var(width, swipe-load-label-text-width);
             .use-var(color, swipe-load-label-text-color);
             .use-var(font-size, swipe-load-label-text-font-size);

package/umd/tabs/index.js

@@ -466,11 +466,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.createElement(_contextProvider.ContextLayout, null, function (_ref) {