@arco-design/mobile-react 2.30.4 → 2.30.6

package/esm/date-picker/index.js

@@ -71,10 +71,8 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   });
 
   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];
     });
@@ -118,32 +116,52 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   // @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 = [];
+  function _getActualArray() {
+    var dateObj = {}; // 当前时间对象
+    // @en current Date object
 
-    switch (type) {
-      case 'year':
-        range = [minDateObjRef.current.year, maxDateObjRef.current.year];
-        break;
-
-      default:
-        {
-          var checkKeys = allTypes.slice(0, allTypes.indexOf(type));
-          range = normalRange;
+    var currentDateObj = _extends({}, currentDateObjRef.current);
 
-          if (judgeObj(nowDateObj, minDateObjRef.current, checkKeys)) {
-            range[0] = minDateObjRef.current[type];
-          }
-
-          if (judgeObj(nowDateObj, maxDateObjRef.current, checkKeys)) {
-            range[range.length - 1] = maxDateObjRef.current[type];
+    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 (judgeObj(currentDateObj, minDateObjRef.current, checkKeys)) {
+              var _extends2;
+
+              range[0] = minDateObjRef.current[type];
+              currentDateObj = _extends({}, currentDateObj, (_extends2 = {}, _extends2[type] = Math.max(minDateObjRef.current[type], currentDateObj[type]), _extends2));
+            }
+
+            if (judgeObj(currentDateObj, maxDateObjRef.current, checkKeys)) {
+              var _extends3;
+
+              range[range.length - 1] = maxDateObjRef.current[type];
+              currentDateObj = _extends({}, 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) {

package/esm/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/esm/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/esm/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/esm/dropdown-menu/helper.js

@@ -16,14 +16,6 @@ export function isStringArray(options) {
 export function isCascadeArray(options) {
   return typeof options[0] === 'object' && !isArray(options[0]);
 }
-/**
- * 判断是否为string类型
- * @en Determine whether it is of type string
- */
-
-export function isString(icon) {
-  return typeof icon === 'string';
-}
 /**
  * 格式化传入的数组
  * @en format the input array

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

@@ -36,6 +36,13 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }
 
+  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 = '';
@@ -51,11 +58,9 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
 
       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;
@@ -76,6 +81,7 @@ 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];
@@ -87,10 +93,7 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
 
         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);
@@ -109,10 +112,7 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
       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 {
@@ -152,13 +152,10 @@ var JsEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     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/esm/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/esm/ellipsis/index.js

@@ -6,8 +6,8 @@ import JsEllipsis from './components/js-ellipsis';
 import NativeEllipsis from './components/native-ellipsis';
 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/esm/image-preview/index.js

@@ -230,6 +230,7 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
         dragMode: 'always',
         transformMode: 'matrix',
         useDomBoundary: false,
+        preventScroll: false,
         cubic: {
           scroll: scrollBezier
         },

package/esm/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/esm/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/esm/pagination/arrow.js

@@ -1,10 +1,13 @@
 import React from 'react';
 export default function Arrow() {
   return /*#__PURE__*/React.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.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",

package/esm/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;

package/esm/pagination/style/index.less

@@ -16,14 +16,14 @@
         justify-content: flex-start;
         &.flex-center {
             justify-content: flex-end;
-            .use-var(margin-right, pagination-center-field-gutter);
+            .use-var-with-rtl(margin-right, pagination-center-field-gutter);
         }
     }
     &-next-field {
         justify-content: flex-end;
         &.flex-center {
             justify-content: flex-start;
-            .use-var(margin-left, pagination-center-field-gutter);
+            .use-var-with-rtl(margin-left, pagination-center-field-gutter);
         }
     }
 
@@ -41,8 +41,14 @@
         .btn-icon {
             display: inline-flex;
             align-items: center;
+            [dir="rtl"] & {
+                transform: scaleX(-1);
+            }
             &.next {
                 transform: rotateY(180deg);
+                [dir="rtl"] & {
+                    transform: none;
+                }
             }
         }
     }
@@ -61,13 +67,7 @@
         }
         .btn-icon + .btn-text,
         .btn-text + .btn-icon {
-            .use-var(margin-left, pagination-field-btn-icon-text-gutter);
-        }
-        .btn-icon:first-child {
-            .use-var(margin-left, pagination-field-btn-icon-side-margin);
-        }
-        .btn-icon:last-child {
-            .use-var(margin-right, pagination-field-btn-icon-side-margin);
+            .use-var-with-rtl(margin-left, pagination-field-btn-icon-text-gutter);
         }
     }
     &.android &-field.button {