@arco-design/mobile-react 2.30.4 → 2.30.5

package/cjs/search-bar/style/css/index.css

@@ -538,9 +538,15 @@
 .arco-search-bar-input-left {
   text-align: left;
 }
+[dir="rtl"] .arco-search-bar-input-left {
+  text-align: right;
+}
 .arco-search-bar-input-right {
   text-align: right;
 }
+[dir="rtl"] .arco-search-bar-input-right {
+  text-align: left;
+}
 .arco-search-bar-input-center {
   text-align: center;
 }
@@ -570,11 +576,19 @@
 .arco-search-bar-prefix {
   margin-right:  0.18rem ;
 }
+[dir="rtl"] .arco-search-bar-prefix {
+  margin-right: initial;
+  margin-left:  0.18rem ;
+}
 .arco-search-bar-clear {
   color:  #c9cdd4 ;
   font-size:  16PX ;
   padding-left:  0.32rem ;
 }
+[dir="rtl"] .arco-search-bar-clear {
+  padding-left: initial;
+  padding-right:  0.32rem ;
+}
 .arco-search-bar-search-icon {
   color:  #86909c ;
   font-size:  0.32rem ;
@@ -584,6 +598,10 @@
   color:  #165DFF ;
   font-size:  0.3rem ;
 }
+[dir="rtl"] .arco-search-bar-cancel-btn {
+  margin-left: initial;
+  margin-right:  0.32rem ;
+}
 .arco-search-bar-association {
   position: absolute;
   left: 0;

package/cjs/search-bar/style/index.less

@@ -34,10 +34,10 @@
         .use-var(height, search-bar-input-height);
         .use-var(caret-color, search-bar-input-caret-color);
         &-left {
-            text-align: left;
+            .set-value-with-rtl(text-align, left);
         }
         &-right {
-            text-align: right;
+            .set-value-with-rtl(text-align, right);
         }
         &-center {
             text-align: center;
@@ -62,13 +62,13 @@
     }
 
     &-prefix {
-        .use-var(margin-right, search-bar-prefix-margin-right);
+        .use-var-with-rtl(margin-right, search-bar-prefix-margin-right);
     }
 
     &-clear {
         .use-var(color, search-bar-clear-icon-color);
         .use-var(font-size, search-bar-clear-icon-font-size);
-        .use-var(padding-left, search-bar-clear-icon-padding-left);
+        .use-var-with-rtl(padding-left, search-bar-clear-icon-padding-left);
     }
 
     &-search-icon {
@@ -77,7 +77,7 @@
     }
 
     &-cancel-btn {
-        .use-var(margin-left, search-bar-cancel-btn-margin-left);
+        .use-var-with-rtl(margin-left, search-bar-cancel-btn-margin-left);
         .use-var(color, search-bar-cancel-btn-color);
         .use-var(font-size, search-bar-cancel-btn-font-size);
     }

package/cjs/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/cjs/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/cjs/slider/index.js

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

package/cjs/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/cjs/slider/thumb.js

@@ -1,12 +1,8 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _popover = require("./popover");
@@ -19,11 +15,13 @@ 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; }
 
-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 = (0, _react.useContext)(_contextProvider.GlobalContext),
       _useContext$prefixCls = _useContext.prefixCls,
@@ -32,7 +30,8 @@ var Thumb = function Thumb(_ref) {
   var _useContext2 = (0, _react.useContext)(_hooks.SliderContext),
       showTooltip = _useContext2.showTooltip,
       renderThumb = _useContext2.renderThumb,
-      formatTooltip = _useContext2.formatTooltip;
+      formatTooltip = _useContext2.formatTooltip,
+      renderThumbPopover = _useContext2.renderThumbPopover;
 
   var isHidden = showTooltip === 'never';
   var renderValue = (0, _react.useMemo)(function () {
@@ -43,21 +42,21 @@ var Thumb = function Thumb(_ref) {
     if (showTooltip === 'always') return true;
     return isTouching;
   }, [showTooltip, isTouching]);
-
-  var renderWrapper = function renderWrapper(el) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: prefixCls + "-slider-thumb-wrapper " + className,
-      style: (0, _extends2.default)({}, style)
-    }, el);
-  };
-
   var thumbEl = typeof renderThumb === 'function' ? renderThumb(value) : renderThumb;
-  if (isHidden) return renderWrapper(thumbEl);
-  return renderWrapper( /*#__PURE__*/_react.default.createElement(_popover.Popover, {
+  var popoverEl = typeof renderThumbPopover === 'function' ? renderThumbPopover({
+    value: value,
+    visible: isTooltipVisible,
+    thumbEl: thumbEl,
+    index: idx
+  }) : /*#__PURE__*/_react.default.createElement(_popover.Popover, {
     visible: isTooltipVisible,
     content: renderValue
-  }, thumbEl));
-};
+  }, thumbEl);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-slider-thumb-wrapper " + className,
+    style: style
+  }, isHidden ? thumbEl : popoverEl);
+}
 
 var _default = Thumb;
 exports.default = _default;

package/dist/index.js

@@ -15964,8 +15964,8 @@
     var NativeEllipsis$1 = /*#__PURE__*/React__default["default"].memo(NativeEllipsis);
 
     /**
-     * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
-     * @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 文本缩略
@@ -20875,6 +20875,7 @@
             dragMode: 'always',
             transformMode: 'matrix',
             useDomBoundary: false,
+            preventScroll: false,
             cubic: {
               scroll: scrollBezier
             },
@@ -23506,10 +23507,13 @@
 
     function Arrow() {
       return /*#__PURE__*/React__default["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["default"].createElement("path", {
         fillRule: "evenodd",
         clipRule: "evenodd",
@@ -27963,18 +27967,21 @@
       }))), children);
     }
 
-    var Thumb = function Thumb(_a) {
-      var className = _a.className,
+    function Thumb(_a) {
+      var _b = _a.className,
+          className = _b === void 0 ? '' : _b,
           value = _a.value,
           style = _a.style,
-          isTouching = _a.isTouching;
-      var _b = React.useContext(GlobalContext).prefixCls,
-          prefixCls = _b === void 0 ? '' : _b;
+          isTouching = _a.isTouching,
+          idx = _a.idx;
+      var _c = React.useContext(GlobalContext).prefixCls,
+          prefixCls = _c === void 0 ? '' : _c;
 
-      var _c = React.useContext(SliderContext),
-          showTooltip = _c.showTooltip,
-          renderThumb = _c.renderThumb,
-          formatTooltip = _c.formatTooltip;
+      var _d = React.useContext(SliderContext),
+          showTooltip = _d.showTooltip,
+          renderThumb = _d.renderThumb,
+          formatTooltip = _d.formatTooltip,
+          renderThumbPopover = _d.renderThumbPopover;
 
       var isHidden = showTooltip === 'never';
       var renderValue = React.useMemo(function () {
@@ -27985,21 +27992,21 @@
         if (showTooltip === 'always') return true;
         return isTouching;
       }, [showTooltip, isTouching]);
-
-      var renderWrapper = function renderWrapper(el) {
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: prefixCls + "-slider-thumb-wrapper " + className,
-          style: __assign$2({}, style)
-        }, el);
-      };
-
       var thumbEl = typeof renderThumb === 'function' ? renderThumb(value) : renderThumb;
-      if (isHidden) return renderWrapper(thumbEl);
-      return renderWrapper( /*#__PURE__*/React__default["default"].createElement(Popover, {
+      var popoverEl = typeof renderThumbPopover === 'function' ? renderThumbPopover({
+        value: value,
+        visible: isTooltipVisible,
+        thumbEl: thumbEl,
+        index: idx
+      }) : /*#__PURE__*/React__default["default"].createElement(Popover, {
         visible: isTooltipVisible,
         content: renderValue
-      }, thumbEl));
-    };
+      }, thumbEl);
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: prefixCls + "-slider-thumb-wrapper " + className,
+        style: style
+      }, isHidden ? thumbEl : popoverEl);
+    }
 
     function Marks(_a) {
       var runTimeConfig = _a.runTimeConfig,
@@ -28190,6 +28197,7 @@
           key: idx
         }, __assign$2({
           value: Array.isArray(valueGroup) ? valueGroup[idx] : valueGroup,
+          idx: idx,
           min: min,
           max: max,
           isTouching: commonIsTouching === idx