@arco-design/mobile-react 2.30.4 → 2.30.6

package/esm/picker/style/css/index.css

@@ -536,10 +536,18 @@
   left: 0;
   color:  #165DFF ;
 }
+[dir="rtl"] .arco-picker-header-btn.left {
+  left: initial;
+  right: 0;
+}
 .arco-picker-header-btn.right {
   right: 0;
   color:  #165DFF ;
 }
+[dir="rtl"] .arco-picker-header-btn.right {
+  right: initial;
+  left: 0;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *

package/esm/picker/style/index.less

@@ -33,12 +33,12 @@
             .use-var(padding, picker-button-padding);
 
             &.left {
-                left: 0;
+                .set-prop-with-rtl(left, 0);
                 .use-var(color, picker-left-btn-color);
             }
 
             &.right {
-                right: 0;
+                .set-prop-with-rtl(right, 0);
                 .use-var(color, picker-right-btn-color);
             }
         }

package/esm/progress/style/css/index.css

@@ -500,6 +500,10 @@
   left: 0;
   z-index: 1001;
 }
+[dir="rtl"] .arco-progress.progress-fixed {
+  left: initial;
+  right: 0;
+}
 .arco-progress .progress-wrapper {
   position: relative;
   width: 100%;
@@ -540,6 +544,10 @@
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+[dir="rtl"] .arco-progress .progress-wrapper .progress-bar .wrapper {
+  right: initial;
+  left: 0;
+}
 .arco-progress .progress-wrapper .filleted {
   border-radius: 100PX;
 }
@@ -548,10 +556,22 @@
   margin-left:  0.16rem ;
   color:  #165DFF ;
 }
+[dir="rtl"] .arco-progress .progress-wrapper .text {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
 .arco-progress .progress-wrapper .text-left {
   margin-left: 0;
   margin-right:  0.16rem ;
 }
+[dir="rtl"] .arco-progress .progress-wrapper .text-left {
+  margin-left: initial;
+  margin-right: 0;
+}
+[dir="rtl"] .arco-progress .progress-wrapper .text-left {
+  margin-right: initial;
+  margin-left:  0.16rem ;
+}
 .arco-progress .progress-wrapper .text-innerLeft {
   position: absolute;
   z-index: 1;

package/esm/progress/style/index.less

@@ -5,7 +5,7 @@
     &.progress-fixed {
         position: fixed;
         width: 100%;
-        left: 0;
+        .set-prop-with-rtl(left, 0);
         z-index: @full-screen-z-index + 1;;
     }
 
@@ -39,7 +39,7 @@
 
             .wrapper {
                 position: absolute;
-                right: 0;
+                .set-prop-with-rtl(right, 0);
                 top: 50%;
                 transform: translateY(-50%);
             }
@@ -51,13 +51,13 @@
 
         .text {
             .use-var(font-size, progress-text-font-size);
-            .use-var(margin-left, progress-text-gutter);
+            .use-var-with-rtl(margin-left, progress-text-gutter);
             .use-var(color, progress-primary-color);
         }
 
         .text-left {
-            margin-left: 0;
-            .use-var(margin-right, progress-text-gutter);
+            .set-prop-with-rtl(margin-left, 0);
+            .use-var-with-rtl(margin-right, progress-text-gutter);
         }
 
         .text-innerLeft {

package/esm/radio/style/css/index.css

@@ -502,6 +502,9 @@
   -webkit-align-items: center;
           align-items: center;
 }
+.arco-radio:focus {
+  outline: none;
+}
 .arco-radio .radio-icon {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/esm/radio/style/index.less

@@ -4,6 +4,11 @@
     display: inline-flex;
     align-items: center;
 
+    // iOS low-end machine style compatibility issues
+    &:focus {
+        outline: none;
+    }
+
     .radio-icon {
         display: inline-flex;
         align-items: center;

package/esm/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/esm/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/esm/show-monitor/index.d.ts

@@ -97,6 +97,11 @@ export interface ShowMonitorRef {
      * @en Ignore the state of the element before and after, manually check whether the element is in the viewport, trigger the onVisibleChange callback function
      */
     checkVisible: () => boolean;
+    /**
+     * 重置元素初始可见态为false，并重新对元素可见度发起检测，优先级低于disabled（通常用在对ShowMonitor内部元素变化时发起的重新监听）
+     * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
+     */
+    flushVisibleStatus: () => void;
 }
 /**
  * 通过滚动事件监测 children 是否进入视口或离开视口。

package/esm/show-monitor/index.js

@@ -187,6 +187,7 @@ var ShowMonitor = /*#__PURE__*/forwardRef(function (props, ref) {
 
 
     curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+    component.isVisible = curVisible;
     var key = wrapperKey.current;
     /**
      * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉

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.6",
     "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.6",
         "@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": "a6778485284e4fe9c39e79695d3665371fc2c9c8"
 }

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/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/umd/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;