@arco-design/mobile-react 2.30.4 → 2.30.6

package/umd/date-picker/index.js

@@ -10,7 +10,7 @@
     factory(mod.exports, global._extends, global.objectWithoutPropertiesLoose, global.react, global.mobileUtils, global.picker, global.contextProvider, global.helper, global.type);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _objectWithoutPropertiesLoose2, _react, _mobileUtils, _picker, _contextProvider, _helper, _type) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends4, _objectWithoutPropertiesLoose2, _react, _mobileUtils, _picker, _contextProvider, _helper, _type) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -20,7 +20,7 @@
     YEAR: true
   };
   _exports.default = _exports.YEAR = void 0;
-  _extends2 = _interopRequireDefault(_extends2);
+  _extends4 = _interopRequireDefault(_extends4);
   _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
   _react = _interopRequireWildcard(_react);
   _picker = _interopRequireDefault(_picker);
@@ -100,10 +100,8 @@
     });
 
     function _getColumns() {
-      var dateObj = {};
-      allTypes.forEach(function (type) {
-        dateObj[type] = _getActualArray(type, currentDateObjRef.current);
-      });
+      var dateObj = _getActualArray();
+
       var columns = keyOptions.map(function (opt) {
         return dateObj[opt];
       });
@@ -147,32 +145,51 @@
     // @en Dynamically change the options of other columns based on the currently selected date
 
 
-    function _getActualArray(type, nowDateObj) {
-      var normalRange = _getNormalRange(type, nowDateObj);
-
-      var range = [];
-
-      switch (type) {
-        case 'year':
-          range = [minDateObjRef.current.year, maxDateObjRef.current.year];
-          break;
-
-        default:
-          {
-            var checkKeys = allTypes.slice(0, allTypes.indexOf(type));
-            range = normalRange;
-
-            if ((0, _helper.judgeObj)(nowDateObj, minDateObjRef.current, checkKeys)) {
-              range[0] = minDateObjRef.current[type];
-            }
+    function _getActualArray() {
+      var dateObj = {}; // 当前时间对象
+      // @en current Date object
 
-            if ((0, _helper.judgeObj)(nowDateObj, maxDateObjRef.current, checkKeys)) {
-              range[range.length - 1] = maxDateObjRef.current[type];
+      var currentDateObj = (0, _extends4.default)({}, currentDateObjRef.current);
+      allTypes.forEach(function (type) {
+        // 根据日期类型，计算出默认的日期范围
+        // @en According to the date type, calculate the default date range.
+        var normalRange = _getNormalRange(type, currentDateObj);
+
+        var range = [];
+
+        switch (type) {
+          case 'year':
+            // 默认使用minTs和maxTs年份区间
+            // @en Default use minTs and maxTs years.
+            range = [minDateObjRef.current.year, maxDateObjRef.current.year];
+            break;
+
+          default:
+            {
+              // 除了年份外，其他日期类型都需要判断上一级日期是否相同
+              // @en In addition to the year, other date types need to check if the upper-level date is the same.
+              var checkKeys = allTypes.slice(0, allTypes.indexOf(type));
+              range = normalRange;
+
+              if ((0, _helper.judgeObj)(currentDateObj, minDateObjRef.current, checkKeys)) {
+                var _extends2;
+
+                range[0] = minDateObjRef.current[type];
+                currentDateObj = (0, _extends4.default)({}, currentDateObj, (_extends2 = {}, _extends2[type] = Math.max(minDateObjRef.current[type], currentDateObj[type]), _extends2));
+              }
+
+              if ((0, _helper.judgeObj)(currentDateObj, maxDateObjRef.current, checkKeys)) {
+                var _extends3;
+
+                range[range.length - 1] = maxDateObjRef.current[type];
+                currentDateObj = (0, _extends4.default)({}, currentDateObj, (_extends3 = {}, _extends3[type] = Math.min(maxDateObjRef.current[type], currentDateObj[type]), _extends3));
+              }
             }
-          }
-      }
+        }
 
-      return _convertRangeToArr(type, range);
+        dateObj[type] = _convertRangeToArr(type, range);
+      });
+      return dateObj;
     }
 
     function _convertRangeToArr(type, range) {
@@ -320,7 +337,7 @@
     }, [visible]);
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
-      return /*#__PURE__*/_react.default.createElement(_picker.default, (0, _extends2.default)({}, otherProps, {
+      return /*#__PURE__*/_react.default.createElement(_picker.default, (0, _extends4.default)({}, otherProps, {
         ref: pickerRef,
         visible: visible,
         className: (0, _mobileUtils.cls)(className, prefixCls + "-date-picker"),

package/umd/dialog/style/css/index.css

@@ -655,6 +655,10 @@
 .arco-dialog-body.left {
   text-align: left;
 }
+[dir="rtl"] .arco-dialog-header.left,
+[dir="rtl"] .arco-dialog-body.left {
+  text-align: right;
+}
 .arco-dialog-header.center,
 .arco-dialog-body.center {
   text-align: center;
@@ -663,6 +667,10 @@
 .arco-dialog-body.right {
   text-align: right;
 }
+[dir="rtl"] .arco-dialog-header.right,
+[dir="rtl"] .arco-dialog-body.right {
+  text-align: left;
+}
 .arco-dialog-header.android,
 .arco-dialog-body.sub-title.android {
   padding-top:  0.4rem ;
@@ -693,6 +701,9 @@
           justify-content: flex-end;
   text-align: right;
 }
+[dir="rtl"] .arco-dialog-footer.android {
+  text-align: left;
+}
 .arco-dialog-footer.android .dialog-footer-button {
   color:  #1a74ff ;
   font-size:  0.3rem ;
@@ -701,6 +712,10 @@
 .arco-dialog-footer.android .dialog-footer-button:not(:last-child) {
   margin-right:  0.56rem ;
 }
+[dir="rtl"] .arco-dialog-footer.android .dialog-footer-button:not(:last-child) {
+  margin-right: initial;
+  margin-left:  0.56rem ;
+}
 .arco-dialog-footer.ios {
   overflow: hidden;
 }
@@ -793,6 +808,44 @@
     border-radius: 0;
   }
 }
+[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+  content: '';
+  width: 1PX;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-left-style: solid;
+  border-left-width: 1PX;
+  border-left-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.5);
+    -webkit-transform: scaleX(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.33333333);
+    -webkit-transform: scaleX(0.33333333);
+    border-radius: 0;
+  }
+}
+[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+  display: none;
+}
 .arco-dialog-footer.ios.collapsed {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
@@ -962,6 +1015,41 @@
     border-radius: 0;
   }
 }
+.arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+  content: '';
+  width: 1PX;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-left-style: solid;
+  border-left-width: 1PX;
+  border-left-color: #484849;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.5);
+    -webkit-transform: scaleX(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.33333333);
+    -webkit-transform: scaleX(0.33333333);
+    border-radius: 0;
+  }
+}
 .arco-theme-dark .arco-dialog-footer.ios.collapsed .dialog-footer-button {
   position: relative;
   border-width: 0;

package/umd/dialog/style/index.less

@@ -147,7 +147,7 @@
     &-body {
 
         &.left {
-            text-align: left;
+            .set-value-with-rtl(text-align, left);
         }
 
         &.center {
@@ -155,7 +155,7 @@
         }
 
         &.right {
-            text-align: right;
+            .set-value-with-rtl(text-align, right);
         }
     }
 
@@ -185,7 +185,7 @@
             .use-var(padding-top, dialog-android-body-footer-gutter);
             .use-var(padding-bottom, dialog-android-vertical-padding);
             justify-content: flex-end;
-            text-align: right;
+            .set-value-with-rtl(text-align, right);
 
             .dialog-footer-button {
                 .use-var(color, dialog-footer-android-color);
@@ -193,7 +193,7 @@
                 .use-var(line-height, dialog-footer-android-line-height);
 
                 &:not(:last-child) {
-                    .use-var(margin-right, dialog-footer-android-button-gutter);
+                    .use-var-with-rtl(margin-right, dialog-footer-android-button-gutter);
                 }
             }
         }
@@ -218,6 +218,13 @@
 
                     &:not(:last-child) {
                         .onepx-border-var(right, line-color);
+
+                        [dir='rtl'] & {
+                            .onepx-border-var(left, line-color);
+                            &::after {
+                                display: none;
+                            }
+                        }
                     }
                 }
             }
@@ -332,6 +339,11 @@
               @{arco-dark-mode-selector} & {
                 .onepx-border-var(right, dark-line-color);
               }
+              [dir='rtl'] & {
+                @{arco-dark-mode-selector} & {
+                  .onepx-border-var(left, dark-line-color);
+                }
+              }
             }
           }
         }

package/umd/dropdown-menu/helper.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { OptionsItem } from '../dropdown';
 import { CascadeOptions, ValueType } from './type';
 /**
@@ -11,11 +11,6 @@ export declare function isStringArray(options: string[] | OptionsItem[][] | Casc
  * @en Determine if it is a nested array
  * */
 export declare function isCascadeArray(options: string[] | OptionsItem[][] | CascadeOptions[]): options is CascadeOptions[];
-/**
- * 判断是否为string类型
- * @en Determine whether it is of type string
- */
-export declare function isString(icon: string | ReactNode): icon is string;
 /**
  * 格式化传入的数组
  * @en format the input array

package/umd/dropdown-menu/helper.js

@@ -19,7 +19,6 @@
   _exports.getFormattedOptions = void 0;
   _exports.isCascadeArray = isCascadeArray;
   _exports.isRefDom = _exports.isClassNameDom = void 0;
-  _exports.isString = isString;
   _exports.isStringArray = isStringArray;
   _extends2 = _interopRequireDefault(_extends2);
 
@@ -39,15 +38,6 @@
   function isCascadeArray(options) {
     return typeof options[0] === 'object' && !(0, _mobileUtils.isArray)(options[0]);
   }
-  /**
-   * 判断是否为string类型
-   * @en Determine whether it is of type string
-   */
-
-
-  function isString(icon) {
-    return typeof icon === 'string';
-  }
   /**
    * 格式化传入的数组
    * @en format the input array

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

@@ -59,6 +59,13 @@
       }
     }
 
+    function getActualHeight(container) {
+      var _container$getBoundin = container.getBoundingClientRect(),
+          height = _container$getBoundin.height;
+
+      return Math.round(height);
+    }
+
     function truncateText(container, textContainer, max) {
       var content = textContainer.textContent || '';
       var currentText = '';
@@ -74,11 +81,9 @@
 
         var temp = content.slice(l, m);
         textContainer.innerText = currentText + temp;
+        var actualHeight = getActualHeight(container);
 
-        var _container$getBoundin = container.getBoundingClientRect(),
-            height = _container$getBoundin.height;
-
-        if (height > max) {
+        if (actualHeight > max) {
           r = m;
         } else {
           currentText += temp;
@@ -99,6 +104,7 @@
     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];
@@ -110,10 +116,7 @@
 
           node.innerHTML = '';
 
-          var _container$getBoundin2 = container.getBoundingClientRect(),
-              height = _container$getBoundin2.height;
-
-          if (height > max) {
+          if (actualHeight > max) {
             // return after remove the node, if overflow with empty node.
             textContainer.removeChild(node);
             handleOnReflow(true, textContainer.innerHTML);
@@ -132,10 +135,7 @@
         while (i < nodes.length) {
           textContainer.appendChild(nodes[i]);
 
-          var _container$getBoundin3 = container.getBoundingClientRect(),
-              _height = _container$getBoundin3.height;
-
-          if (_height > max) {
+          if (actualHeight > max) {
             if (nodes[i].childNodes && nodes[i].childNodes.length) {
               break;
             } else {
@@ -175,13 +175,10 @@
       }
 
       textRef.current.classList.remove(prefixCls + "-js-content-text-pre");
-
-      var _domRef$current$getBo = domRef.current.getBoundingClientRect(),
-          height = _domRef$current$getBo.height;
-
+      var actualHeight = getActualHeight(domRef.current);
       var max = isNaN(Number(maxHeight)) ? lineHeightRef.current * maxLine : Number(maxHeight);
 
-      if (height <= max) {
+      if (actualHeight <= max) {
         handleOnReflow(false, text);
         return;
       }

package/umd/ellipsis/index.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import { EllipsisProps, EllipsisRef } from './type';
 export * from './type';
 /**
- * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
- * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
+ * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。如果传入的文本内容中包含换行符号`\n`，建议将`\n`替换为`<br/>`，并设置`dangerouslyUseInnerHTML=true`。
+ * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc. If the incoming text contains newline characters `\n`, it is recommended to replace `\n` with `<br/>`, and set `dangerouslyUseInnerHTML=true`.
  * @type 信息展示
  * @type_en Data Display
  * @name 文本缩略

package/umd/ellipsis/index.js

@@ -33,8 +33,8 @@
   function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
   /**
-   * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
-   * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
+   * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。如果传入的文本内容中包含换行符号`\n`，建议将`\n`替换为`<br/>`，并设置`dangerouslyUseInnerHTML=true`。
+   * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc. If the incoming text contains newline characters `\n`, it is recommended to replace `\n` with `<br/>`, and set `dangerouslyUseInnerHTML=true`.
    * @type 信息展示
    * @type_en Data Display
    * @name 文本缩略

package/umd/image-preview/index.js

@@ -258,6 +258,7 @@
           dragMode: 'always',
           transformMode: 'matrix',
           useDomBoundary: false,
+          preventScroll: false,
           cubic: {
             scroll: scrollBezier
           },

package/umd/index-bar/style/css/index.css

@@ -522,6 +522,10 @@
   -webkit-align-items: center;
           align-items: center;
 }
+[dir="rtl"] .arco-index-bar-group-title {
+  padding-left: initial;
+  padding-right:  0.32rem ;
+}
 .arco-index-bar-group-item {
   height:  1.08rem ;
   display: -webkit-box;
@@ -533,6 +537,10 @@
   margin-left:  0.32rem ;
   font-size:  0.32rem ;
 }
+[dir="rtl"] .arco-index-bar-group-item {
+  margin-left: initial;
+  margin-right:  0.32rem ;
+}
 .arco-index-bar-group-item:not(:last-child) {
   position: relative;
   border-width: 0;
@@ -578,9 +586,13 @@
   -webkit-user-select: none;
           user-select: none;
 }
-.arco-index-bar-sidebar-touching {
+[dir="rtl"] .arco-index-bar-sidebar {
+  right: initial;
   left: 0;
 }
+.arco-index-bar-sidebar-touching {
+  width: 100%;
+}
 .arco-index-bar-sidebar-item {
   display: -webkit-box;
   display: -webkit-flex;
@@ -623,25 +635,36 @@
   border-radius: 9999px;
   text-align: center;
   padding:  0 0.16rem ;
-  background:  rgba(0, 0, 0, 0.8) ;
+  background:  #333333 ;
   right:  0.72rem ;
   font-size:  0.48rem ;
   color:  #FFFFFF ;
 }
+[dir="rtl"] .arco-index-bar-sidebar-sweat {
+  right: initial;
+  left:  0.72rem ;
+}
 .arco-index-bar-sidebar-sweat::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
-  right:  -0.54rem ;
+  right:  -0.56rem ;
   width: 0;
   height: 0;
   border:  0.36rem solid transparent ;
-  border: 18px solid transparent;
-  border-left-color:  rgba(0, 0, 0, 0.8) ;
+  border-left-color:  #333333 ;
   border-radius: 4px;
 }
+[dir="rtl"] .arco-index-bar-sidebar-sweat::before {
+  right: initial;
+  left:  -0.56rem ;
+}
+[dir="rtl"] .arco-index-bar-sidebar-sweat::before {
+  border-left-color: initial;
+  border-right-color:  #333333 ;
+}
 .arco-index-bar-sidebar-toast {
   position: absolute;
   background:  rgba(0, 0, 0, 0.8) ;

package/umd/index-bar/style/index.less

@@ -18,7 +18,7 @@
             .use-var(color, index-bar-group-active-color);
         }
         &-title {
-            .use-var(padding-left, index-bar-group-left-spacing);
+            .use-var-with-rtl(padding-left, index-bar-group-left-spacing);
             .use-var(height, index-bar-group-title-height);
             .use-var(background, index-bar-group-title-background);
             .use-var(font-size, index-bar-group-title-font-size);
@@ -30,7 +30,7 @@
             .use-var(height, index-bar-group-item-height);
             display: flex;
             align-items: center;
-            .use-var(margin-left, index-bar-group-left-spacing);
+            .use-var-with-rtl(margin-left, index-bar-group-left-spacing);
             .use-var(font-size, index-bar-group-item-font-size);
 
             &:not(:last-child) {
@@ -40,16 +40,17 @@
     }
 
     &-sidebar {
-        &-touching {
-            left: 0;
-        }
         position: absolute;
         z-index: 2;
-        right: 0;
+        .set-prop-with-rtl(right, 0);
         top: 50%;
         transform: translateY(-50%) translateZ(0);
         user-select: none;
 
+        &-touching {
+            width: 100%;
+        }
+
         &-item {
             display: flex;
             justify-content: flex-end;
@@ -84,7 +85,7 @@
             text-align: center;
             .use-var(padding, index-bar-sidebar-sweat-padding);
             .use-var(background, index-bar-sidebar-sweat-background);
-            .use-var(right, index-bar-sidebar-sweat-right);
+            .use-var-with-rtl(right, index-bar-sidebar-sweat-right);
             .use-var(font-size, index-bar-sidebar-sweat-font-size);
             .use-var(color, index-bar-sidebar-sweat-color);
             &::before {
@@ -93,12 +94,11 @@
                 top: 0;
                 bottom: 0;
                 margin: auto;
-                .use-var(right, index-bar-sidebar-sweat-triangle-position);
+                .use-var-with-rtl(right, index-bar-sidebar-sweat-triangle-position);
                 width: 0;
                 height: 0;
                 .use-var(border, index-bar-sidebar-sweat-triangle-border);
-                border: 18px solid transparent;
-                .use-var(border-left-color, index-bar-sidebar-sweat-background);
+                .use-var-with-rtl(border-left-color, index-bar-sidebar-sweat-background);
                 border-radius: 4px;
             }
         }

package/umd/pagination/arrow.js

@@ -21,10 +21,13 @@
 
   function Arrow() {
     return /*#__PURE__*/_react.default.createElement("svg", {
-      width: "8",
+      width: "2",
       height: "14",
-      viewBox: "0 0 8 14",
-      fill: "none"
+      viewBox: "3 0 2 14",
+      fill: "none",
+      style: {
+        overflow: 'visible'
+      }
     }, /*#__PURE__*/_react.default.createElement("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",

package/umd/pagination/style/css/index.css

@@ -527,6 +527,10 @@
           justify-content: flex-end;
   margin-right:  0.48rem ;
 }
+[dir="rtl"] .arco-pagination-prev-field.flex-center {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}
 .arco-pagination-next-field {
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
@@ -538,6 +542,10 @@
           justify-content: flex-start;
   margin-left:  0.48rem ;
 }
+[dir="rtl"] .arco-pagination-next-field.flex-center {
+  margin-left: initial;
+  margin-right:  0.48rem ;
+}
 .arco-pagination-field {
   cursor: pointer;
   text-align: center;
@@ -572,10 +580,18 @@
   -webkit-align-items: center;
           align-items: center;
 }
+[dir="rtl"] .arco-pagination-field .btn-icon {
+  -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+}
 .arco-pagination-field .btn-icon.next {
   -webkit-transform: rotateY(180deg);
           transform: rotateY(180deg);
 }
+[dir="rtl"] .arco-pagination-field .btn-icon.next {
+  -webkit-transform: none;
+          transform: none;
+}
 .arco-pagination-field.button {
   padding:  0.12rem 0.32rem ;
   border-radius:  0.04rem ;
@@ -592,13 +608,12 @@
 }
 .arco-pagination-field.button .btn-icon + .btn-text,
 .arco-pagination-field.button .btn-text + .btn-icon {
-  margin-left:  0.16rem ;
-}
-.arco-pagination-field.button .btn-icon:first-child {
-  margin-left:  -0.06rem ;
+  margin-left:  0.22rem ;
 }
-.arco-pagination-field.button .btn-icon:last-child {
-  margin-right:  -0.06rem ;
+[dir="rtl"] .arco-pagination-field.button .btn-icon + .btn-text,
+[dir="rtl"] .arco-pagination-field.button .btn-text + .btn-icon {
+  margin-left: initial;
+  margin-right:  0.22rem ;
 }
 .arco-pagination.android .arco-pagination-field.button .btn-text {
   padding-top: 0.04rem;