@arco-design/mobile-react 2.30.4 → 2.30.6

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.30.6](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.5...@arco-design/mobile-react@2.30.6) (2023-12-26)
+
+
+### Bug Fixes
+
+* optimize `Ellipsis` height calculation ([#216](https://github.com/arco-design/arco-design-mobile/issues/216)) ([555723f](https://github.com/arco-design/arco-design-mobile/commit/555723f0091b6f0e28523a0aa37394bceacd6dc5))
+* remove system default outline on iOS low-end machine of `Radio` & `Checkbox` ([#215](https://github.com/arco-design/arco-design-mobile/issues/215)) ([76dc29a](https://github.com/arco-design/arco-design-mobile/commit/76dc29ad26a1dcd37ab8935d8fbcebaa9ebe134f))
+* resolve `DatePicker` rangeTs computed error ([#214](https://github.com/arco-design/arco-design-mobile/issues/214)) ([3dede0b](https://github.com/arco-design/arco-design-mobile/commit/3dede0bca7f0214d5e2b802038cafcc9390b2727))
+
+
+
+
+
+## [2.30.5](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.4...@arco-design/mobile-react@2.30.5) (2023-12-19)
+
+
+### Bug Fixes
+
+* `ImagePreview` disable duplicate preventDefault ([#212](https://github.com/arco-design/arco-design-mobile/issues/212)) ([d91d251](https://github.com/arco-design/arco-design-mobile/commit/d91d251a64bd64ae914e88c119dda442bd72d722))
+* `Slider` support custom "Popover" element ([#211](https://github.com/arco-design/arco-design-mobile/issues/211)) ([716dda1](https://github.com/arco-design/arco-design-mobile/commit/716dda1d273d3b77aa5072d2b3849776790c01e3))
+* rtl for `Progress`, `Pagination`, `Picker`, `SearchBar`, `Dialog`, `IndexBar` ([#213](https://github.com/arco-design/arco-design-mobile/issues/213)) ([498a777](https://github.com/arco-design/arco-design-mobile/commit/498a777992fc44410944ddc17bd2090c9b06a2f2))
+
+
+
+
+
 ## [2.30.4](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.3...@arco-design/mobile-react@2.30.4) (2023-12-14)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.5/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.5/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.30.5/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.30.5/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/checkbox/style/css/index.css

@@ -502,6 +502,9 @@
   -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/cjs/checkbox/style/index.less

@@ -4,6 +4,11 @@
     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/cjs/date-picker/index.js

@@ -8,7 +8,7 @@ var _exportNames = {
 };
 exports.default = exports.YEAR = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -100,10 +100,8 @@ var DatePicker = /*#__PURE__*/(0, _react.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];
     });
@@ -147,32 +145,51 @@ var DatePicker = /*#__PURE__*/(0, _react.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 = [];
-
-    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 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [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/cjs/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/cjs/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/cjs/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/cjs/dropdown-menu/helper.js

@@ -6,7 +6,6 @@ exports.__esModule = true;
 exports.getFormattedOptions = void 0;
 exports.isCascadeArray = isCascadeArray;
 exports.isRefDom = exports.isClassNameDom = void 0;
-exports.isString = isString;
 exports.isStringArray = isStringArray;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -29,15 +28,6 @@ function isStringArray(options) {
 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/cjs/ellipsis/components/js-ellipsis.js

@@ -50,6 +50,13 @@ var JsEllipsis = /*#__PURE__*/(0, _react.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 = '';
@@ -65,11 +72,9 @@ var JsEllipsis = /*#__PURE__*/(0, _react.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;
@@ -90,6 +95,7 @@ var JsEllipsis = /*#__PURE__*/(0, _react.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];
@@ -101,10 +107,7 @@ var JsEllipsis = /*#__PURE__*/(0, _react.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);
@@ -123,10 +126,7 @@ var JsEllipsis = /*#__PURE__*/(0, _react.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 {
@@ -166,13 +166,10 @@ var JsEllipsis = /*#__PURE__*/(0, _react.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/cjs/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/cjs/ellipsis/index.js

@@ -32,8 +32,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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/cjs/image-preview/index.js

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

package/cjs/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/cjs/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;
             }
         }