@arco-design/mobile-react 2.30.4 → 2.30.5

package/esm/slider/hooks/index.d.ts

@@ -5,7 +5,7 @@ export declare type LinePosition = {
     length: number;
     start: number;
 };
-export declare const SliderContext: React.Context<Required<Pick<SliderProps, "max" | "disabled" | "style" | "size" | "step" | "type" | "className" | "onChange" | "onAfterChange" | "min" | "suffixLabel" | "prefixLabel" | "useRange" | "useAnimation" | "showTooltip" | "showMarks" | "useMarkOnly" | "draggableTrackOnly" | "formatTooltip" | "renderThumb">> & Pick<SliderProps, "value" | "defaultValue" | "marks">>;
+export declare const SliderContext: React.Context<Required<Pick<SliderProps, "max" | "disabled" | "style" | "size" | "step" | "type" | "className" | "onChange" | "onAfterChange" | "min" | "suffixLabel" | "prefixLabel" | "useRange" | "useAnimation" | "showTooltip" | "showMarks" | "useMarkOnly" | "draggableTrackOnly" | "formatTooltip" | "renderThumb">> & Pick<SliderProps, "value" | "defaultValue" | "marks" | "renderThumbPopover">>;
 export * from './useSliderIcon';
 export * from './useSliderInit';
 export * from './useSliderStyle';

package/esm/slider/index.d.ts

@@ -130,6 +130,16 @@ export interface SliderProps {
      * @en Custom slider
      */
     renderThumb?: (value: number) => ReactNode;
+    /**
+     * 自定义滑块的Popover，优先级高于formatTooltip。value表示当前滑动进度，visible表示气泡的可见性，index表示当前滑块索引，thumbEl表示当前滑块元素。
+     * @en Custom slider popover，priority is higher than formatTooltip. value - current sliding progress, visible - visibility of the bubble, index - current slider index, thumbEl - current slider element.
+     */
+    renderThumbPopover?: (config: {
+        value: number;
+        visible: boolean;
+        index: number;
+        thumbEl: React.ReactNode;
+    }) => ReactNode;
 }
 export interface SliderRef {
     /**

package/esm/slider/index.js

@@ -151,6 +151,7 @@ var Slider = /*#__PURE__*/forwardRef(function (_, ref) {
       key: idx
     }, _extends({
       value: Array.isArray(valueGroup) ? valueGroup[idx] : valueGroup,
+      idx: idx,
       min: min,
       max: max,
       isTouching: commonIsTouching === idx

package/esm/slider/thumb.d.ts

@@ -1,8 +1,9 @@
-import React, { CSSProperties } from 'react';
-declare const Thumb: ({ className, value, style, isTouching, }: {
-    className?: string | undefined;
+import { CSSProperties } from 'react';
+declare function Thumb({ className, value, style, isTouching, idx, }: {
+    className?: string;
     value: number;
     isTouching: boolean;
-    style?: React.CSSProperties | undefined;
-}) => JSX.Element;
+    style?: CSSProperties;
+    idx: number;
+}): JSX.Element;
 export default Thumb;

package/esm/slider/thumb.js

@@ -1,14 +1,15 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo, useContext } from 'react';
 import { Popover } from './popover';
 import { SliderContext } from './hooks';
 import { GlobalContext } from '../context-provider';
 
-var Thumb = function Thumb(_ref) {
-  var className = _ref.className,
+function Thumb(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
       value = _ref.value,
       style = _ref.style,
-      isTouching = _ref.isTouching;
+      isTouching = _ref.isTouching,
+      idx = _ref.idx;
 
   var _useContext = useContext(GlobalContext),
       _useContext$prefixCls = _useContext.prefixCls,
@@ -17,7 +18,8 @@ var Thumb = function Thumb(_ref) {
   var _useContext2 = useContext(SliderContext),
       showTooltip = _useContext2.showTooltip,
       renderThumb = _useContext2.renderThumb,
-      formatTooltip = _useContext2.formatTooltip;
+      formatTooltip = _useContext2.formatTooltip,
+      renderThumbPopover = _useContext2.renderThumbPopover;
 
   var isHidden = showTooltip === 'never';
   var renderValue = useMemo(function () {
@@ -28,20 +30,20 @@ var Thumb = function Thumb(_ref) {
     if (showTooltip === 'always') return true;
     return isTouching;
   }, [showTooltip, isTouching]);
-
-  var renderWrapper = function renderWrapper(el) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: prefixCls + "-slider-thumb-wrapper " + className,
-      style: _extends({}, style)
-    }, el);
-  };
-
   var thumbEl = typeof renderThumb === 'function' ? renderThumb(value) : renderThumb;
-  if (isHidden) return renderWrapper(thumbEl);
-  return renderWrapper( /*#__PURE__*/React.createElement(Popover, {
+  var popoverEl = typeof renderThumbPopover === 'function' ? renderThumbPopover({
+    value: value,
+    visible: isTooltipVisible,
+    thumbEl: thumbEl,
+    index: idx
+  }) : /*#__PURE__*/React.createElement(Popover, {
     visible: isTooltipVisible,
     content: renderValue
-  }, thumbEl));
-};
+  }, thumbEl);
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-slider-thumb-wrapper " + className,
+    style: style
+  }, isHidden ? thumbEl : popoverEl);
+}
 
 export default Thumb;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.30.4",
+    "version": "2.30.5",
     "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.4",
+        "@arco-design/mobile-utils": "2.17.5",
         "@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": "d6403cfadaf2d5557a3ffdcf47213c6e9181b74e"
+    "gitHead": "ea9576d1c323fc6117d9437452d35a460d8ddf08"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -806,8 +806,7 @@
     --pagination-field-button-border-radius: ~`pxtorem(2)`;
     --pagination-field-button-padding: ~`pxtorem(6)` ~`pxtorem(16)`;
     --pagination-field-btn-text-font-size: ~`pxtorem(14)`;
-    --pagination-field-btn-icon-text-gutter: ~`pxtorem(8)`;
-    --pagination-field-btn-icon-side-margin: ~`pxtorem(-3)`;
+    --pagination-field-btn-icon-text-gutter: ~`pxtorem(11)`;
     --dark-pagination-field-primary-background: var(--dark-primary-color);
     --pagination-field-primary-background: var(--primary-color);
     --dark-pagination-field-primary-text-color: var(--dark-mask-content-color);
@@ -949,13 +948,13 @@
     --index-bar-sidebar-item-padding: ~`pxtorem(2)` ~`pxtorem(8)`;
     --index-bar-sidebar-item-width: ~`pxtorem(10)`;
     --index-bar-sidebar-sweat-padding: 0 ~`pxtorem(8)`;
-    --index-bar-sidebar-sweat-background: rgba(0, 0, 0, 0.8);
+    --index-bar-sidebar-sweat-background: #333333;
     --dark-index-bar-sidebar-sweat-color: var(--dark-mask-content-color);
     --index-bar-sidebar-sweat-color: var(--mask-content-color);
     --index-bar-sidebar-sweat-right: ~`pxtorem(36)`;
     --index-bar-sidebar-sweat-font-size: ~`pxtorem(24)`;
     --index-bar-sidebar-sweat-radius: ~`pxtorem(50)`;
-    --index-bar-sidebar-sweat-triangle-position: ~`pxtorem(-27)`;
+    --index-bar-sidebar-sweat-triangle-position: ~`pxtorem(-28)`;
     --index-bar-sidebar-sweat-triangle-border: ~`pxtorem(18)` solid transparent;
     --index-bar-sidebar-toast-background: rgba(0, 0, 0, 0.8);
     --dark-index-bar-sidebar-toast-color: var(--dark-mask-content-color);

package/tokens/app/arcodesign/default/index.d.ts

@@ -806,7 +806,6 @@ export interface ArcodesignToken extends Record<string, string> {
     'pagination-field-button-padding': string;
     'pagination-field-btn-text-font-size': string;
     'pagination-field-btn-icon-text-gutter': string;
-    'pagination-field-btn-icon-side-margin': string;
     'dark-pagination-field-primary-background': string;
     'pagination-field-primary-background': string;
     'dark-pagination-field-primary-text-color': string;

package/tokens/app/arcodesign/default/index.js

@@ -817,8 +817,7 @@ var tokens = {
   "pagination-field-button-border-radius": "0.04rem",
   "pagination-field-button-padding": "0.12rem 0.32rem",
   "pagination-field-btn-text-font-size": "0.28rem",
-  "pagination-field-btn-icon-text-gutter": "0.16rem",
-  "pagination-field-btn-icon-side-margin": "-0.06rem",
+  "pagination-field-btn-icon-text-gutter": "0.22rem",
   "dark-pagination-field-primary-background": "var(--dark-primary-color)",
   "pagination-field-primary-background": "var(--primary-color)",
   "dark-pagination-field-primary-text-color": "var(--dark-mask-content-color)",
@@ -960,13 +959,13 @@ var tokens = {
   "index-bar-sidebar-item-padding": "0.04rem 0.16rem",
   "index-bar-sidebar-item-width": "0.2rem",
   "index-bar-sidebar-sweat-padding": "0 0.16rem",
-  "index-bar-sidebar-sweat-background": "rgba(0, 0, 0, 0.8)",
+  "index-bar-sidebar-sweat-background": "#333333",
   "dark-index-bar-sidebar-sweat-color": "var(--dark-mask-content-color)",
   "index-bar-sidebar-sweat-color": "var(--mask-content-color)",
   "index-bar-sidebar-sweat-right": "0.72rem",
   "index-bar-sidebar-sweat-font-size": "0.48rem",
   "index-bar-sidebar-sweat-radius": "1rem",
-  "index-bar-sidebar-sweat-triangle-position": "-0.54rem",
+  "index-bar-sidebar-sweat-triangle-position": "-0.56rem",
   "index-bar-sidebar-sweat-triangle-border": "0.36rem solid transparent",
   "index-bar-sidebar-toast-background": "rgba(0, 0, 0, 0.8)",
   "dark-index-bar-sidebar-toast-color": "var(--dark-mask-content-color)",

package/tokens/app/arcodesign/default/index.json

@@ -6089,9 +6089,9 @@
         "cssKey": "index-bar-sidebar-sweat-background",
         "desc": "索引栏侧边栏水滴提示气泡背景颜色",
         "override": "",
-        "value": "rgba(0, 0, 0, 0.8)",
-        "jsValue": "rgba(0, 0, 0, 0.8)",
-        "staticValue": "rgba(0, 0, 0, 0.8)",
+        "value": "#333333",
+        "jsValue": "#333333",
+        "staticValue": "#333333",
         "localeDesc": {
             "ch": "索引栏侧边栏水滴提示气泡背景颜色",
             "en": "IndexBar sidebar water drop prompt bubble background color"
@@ -6173,9 +6173,9 @@
         "cssKey": "index-bar-sidebar-sweat-triangle-position",
         "desc": "索引栏侧边栏三角气泡位置",
         "override": "",
-        "value": "~`pxtorem(-27)`",
-        "jsValue": "@getRem@-27",
-        "staticValue": "-0.54rem",
+        "value": "~`pxtorem(-28)`",
+        "jsValue": "@getRem@-28",
+        "staticValue": "-0.56rem",
         "localeDesc": {
             "ch": "索引栏侧边栏三角气泡位置",
             "en": "The position of the triangle bubble in the sidebar of the IndexBar"
@@ -7069,25 +7069,13 @@
             "en": "The spacing between the button and the page number when pagination is centered"
         }
     },
-    "paginationFieldBtnIconSideMargin": {
-        "cssKey": "pagination-field-btn-icon-side-margin",
-        "desc": "分页器翻页按钮图标与按钮边缘的间距",
-        "override": "",
-        "value": "~`pxtorem(-3)`",
-        "jsValue": "@getRem@-3",
-        "staticValue": "-0.06rem",
-        "localeDesc": {
-            "ch": "分页器翻页按钮图标与按钮边缘的间距",
-            "en": "The spacing between the button's icon and the edge of the button"
-        }
-    },
     "paginationFieldBtnIconTextGutter": {
         "cssKey": "pagination-field-btn-icon-text-gutter",
         "desc": "分页器翻页按钮文字与图标的间距",
         "override": "",
-        "value": "~`pxtorem(8)`",
-        "jsValue": "@getRem@8",
-        "staticValue": "0.16rem",
+        "value": "~`pxtorem(11)`",
+        "jsValue": "@getRem@11",
+        "staticValue": "0.22rem",
         "localeDesc": {
             "ch": "分页器翻页按钮文字与图标的间距",
             "en": "The spacing between the text and the icon of the pagination button"

package/tokens/app/arcodesign/default/index.less

@@ -805,8 +805,7 @@
 @pagination-field-button-border-radius: ~`pxtorem(2)`;
 @pagination-field-button-padding: ~`pxtorem(6)` ~`pxtorem(16)`;
 @pagination-field-btn-text-font-size: ~`pxtorem(14)`;
-@pagination-field-btn-icon-text-gutter: ~`pxtorem(8)`;
-@pagination-field-btn-icon-side-margin: ~`pxtorem(-3)`;
+@pagination-field-btn-icon-text-gutter: ~`pxtorem(11)`;
 @dark-pagination-field-primary-background: @dark-primary-color;
 @pagination-field-primary-background: @primary-color;
 @dark-pagination-field-primary-text-color: @dark-mask-content-color;
@@ -948,13 +947,13 @@
 @index-bar-sidebar-item-padding: ~`pxtorem(2)` ~`pxtorem(8)`;
 @index-bar-sidebar-item-width: ~`pxtorem(10)`;
 @index-bar-sidebar-sweat-padding: 0 ~`pxtorem(8)`;
-@index-bar-sidebar-sweat-background: rgba(0, 0, 0, 0.8);
+@index-bar-sidebar-sweat-background: #333333;
 @dark-index-bar-sidebar-sweat-color: @dark-mask-content-color;
 @index-bar-sidebar-sweat-color: @mask-content-color;
 @index-bar-sidebar-sweat-right: ~`pxtorem(36)`;
 @index-bar-sidebar-sweat-font-size: ~`pxtorem(24)`;
 @index-bar-sidebar-sweat-radius: ~`pxtorem(50)`;
-@index-bar-sidebar-sweat-triangle-position: ~`pxtorem(-27)`;
+@index-bar-sidebar-sweat-triangle-position: ~`pxtorem(-28)`;
 @index-bar-sidebar-sweat-triangle-border: ~`pxtorem(18)` solid transparent;
 @index-bar-sidebar-toast-background: rgba(0, 0, 0, 0.8);
 @dark-index-bar-sidebar-toast-color: @dark-mask-content-color;

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/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",