@arco-design/mobile-react 2.30.2 → 2.30.4

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* `ImagePreview` fix problem that long image cannot scroll ([#207](https://github.com/arco-design/arco-design-mobile/issues/207)) ([78cf5a6](https://github.com/arco-design/arco-design-mobile/commit/78cf5a6f225f40a637368e85f998575be8148ba4))
+* export `Skeleton` type ([#208](https://github.com/arco-design/arco-design-mobile/issues/208)) ([067907f](https://github.com/arco-design/arco-design-mobile/commit/067907f5432746690b5f8fa4a87a5560e9730d82))
+* rtl for `PullRefresh`, `Avatar`, `Collapse`, `ImagePicker`, `Steps`, `Tag` ([#201](https://github.com/arco-design/arco-design-mobile/issues/201)) ([213a003](https://github.com/arco-design/arco-design-mobile/commit/213a003134d4e43539db1772b8b8dbd1dd37c907))
+* support rtl for `DropdownMenu` ([#204](https://github.com/arco-design/arco-design-mobile/issues/204)) ([453dddb](https://github.com/arco-design/arco-design-mobile/commit/453dddb60b8f64e02654a8c3ece79bdc90e08fa6))
+* support rtl for `Grid`, `Divider` ([#203](https://github.com/arco-design/arco-design-mobile/issues/203)) ([55a1f61](https://github.com/arco-design/arco-design-mobile/commit/55a1f619e430801d6cdb29f8fe90fe391eb26014))
+
+
+
+
+
+## [2.30.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.2...@arco-design/mobile-react@2.30.3) (2023-11-24)
+
+
+### Bug Fixes
+
+* `ImagePreview` support shrinking animation before closed ([#195](https://github.com/arco-design/arco-design-mobile/issues/195)) ([7420bd5](https://github.com/arco-design/arco-design-mobile/commit/7420bd533a6e22a38a6fbd64407918580f64e095))
+* support rtl for `Slider` & `Popover` ([#200](https://github.com/arco-design/arco-design-mobile/issues/200)) ([1756c8a](https://github.com/arco-design/arco-design-mobile/commit/1756c8a875f5e6fb3f8bdee7222d69c32a142ec3))
+
+
+
+
+
 ## [2.30.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.30.1...@arco-design/mobile-react@2.30.2) (2023-11-09)
 
 

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.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.1/dist/index.min.js"></script>
+<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>
 ```
 
 ## 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.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.30.1/dist/index.min.js"></script>
+<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>
 ```
 
 ## 引入全部

package/cjs/action-sheet/index.d.ts

@@ -86,11 +86,11 @@ declare const _default: React.ForwardRefExoticComponent<ActionSheetProps & React
      * @param {ActionSheetProps} config setting
      * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "items" | "cancelText" | "subTitle"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "items" | "cancelText" | "subTitle"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
             key?: string | undefined;
         }) => void;
     };

package/cjs/action-sheet/style/css/index.css

@@ -4,7 +4,7 @@
  * @name_en General Mixin
  */
 /**
- * 根据base-font-size，设置单位尺寸为rem
+ * 根据 base-font-size，设置单位尺寸为 rem
  * @desc {en} set the unit size to rem based on base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -21,7 +21,7 @@
  * ```
  */
 /**
- * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
+ * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
  * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -38,8 +38,8 @@
  * ```
  */
 /**
- * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
- * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
+ * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
+ * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
  * @param @rules 对应的暗黑模式规则
  * @param @rules {en} Corresponding dark mode rules
  * @example
@@ -54,7 +54,7 @@
  * ```
  */
 /**
- * 为属性设置arco提供的token变量
+ * 为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute
  * @param @property css属性名
  * @param @property {en} css property
@@ -76,11 +76,11 @@
  * ```
  */
 /**
- * 在常规模式和rtl模式下为属性设置arco提供的token变量
+ * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
- * @param @variables token变量名
+ * @param @variables token 变量名
  * @param @variables {en} token variable name
  * @param @preValues
  * @param @preValues {en}
@@ -96,9 +96,9 @@
  * ```
  */
 /**
- * 0.5px的边框线
+ * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
- * @param @color 使用css变量为线设置颜色
+ * @param @color 使用 css 变量为线设置颜色
  * @param @color {en} set border-color by CSS variable
  * @param @direction 边框方向，默认为全部方向
  * @param @direction {en} border direction，default to all directions.
@@ -115,9 +115,9 @@
 /**
  * 字体加粗
  * @desc {en} font bold
- * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
  * @param @color {en} set color by CSS variable
- * @param @stroke 字体粗细，默认0.3px
+ * @param @stroke 字体粗细，默认 0.3px
  * @param @stroke {en} font weight, default 0.3 pixel
  * @example
  * ```
@@ -130,17 +130,17 @@
  * ```
  */
 /**
- * 1px边框
+ * 1px 边框
  * @desc {en} 1 pixel border
  * @param @direction 边框方向
  * @param @direction {en} border direction
- * @param @borderColor 使用css变量设置边框颜色
+ * @param @borderColor 使用 css 变量设置边框颜色
  * @param @borderColor {en} set border-color by CSS variable
- * @param @borderRadius border-radius，默认为0
+ * @param @borderRadius border-radius，默认为 0
  * @param @borderRadius {en} border-radius, default value is 0
- * @param @borderWidth border-width，默认为1px
+ * @param @borderWidth border-width，默认为 1px
  * @param @borderWidth {en} border-width, default value is 1 pixel
- * @param @borderStyle border-style，默认为solid
+ * @param @borderStyle border-style，默认为 solid
  * @param @borderStyle {en} border-style, default value is solid
  * @example
  * ```
@@ -153,9 +153,9 @@
  * ```
  */
 /**
- * 元素右下0.5px边框
+ * 元素右下 0.5px 边框
  * @desc {en} 0.5px border on bottom right
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -167,9 +167,9 @@
  * ```
  */
 /**
- * 元素左上0.5px边框
+ * 元素左上 0.5px 边框
  * @desc {en} 0.5px border on top left
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -181,9 +181,9 @@
  * ```
  */
 /**
- * 设置Loading组件颜色
+ * 设置 Loading 组件颜色
  * @desc {en} set Loading component color
- * @param @color 使用css变量设置颜色
+ * @param @color 使用 css 变量设置颜色
  * @param @color {en} set color by CSS variable
  * @example
  * ```
@@ -197,9 +197,9 @@
 /**
  * 设置最小字号
  * @desc {en} set minimum font-size
- * @param @size 使用css变量设置最小字号
+ * @param @size 使用 css 变量设置最小字号
  * @param @size {en} set minimum font-size by CSS variable
- * @param @scale 设置最小字号下文字缩放比例，默认为0.9
+ * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
  * @param @scale {en} set minimum font-size down text scale，default value is 0.9
  * @example
  * ```
@@ -212,9 +212,9 @@
  * ```
  */
 /**
- * 设置content-box盒模型下元素宽度
+ * 设置 content-box 盒模型下元素宽度
  * @desc {en} set box width in content-box
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
  * @param @width 元素总宽度，包含内边距
  * @param @width element width, include padding
@@ -232,11 +232,11 @@
  * ```
  */
 /**
- * 设置Steps组件颜色
+ * 设置 Steps 组件颜色
  * @desc {en} set Steps component color
- * @param @color 使用css变量设置主颜色
+ * @param @color 使用 css 变量设置主颜色
  * @param @color {en} set main step color by CSS variable
- * @param @finish-color 使用css变量设置已完成步骤的颜色
+ * @param @finish-color 使用 css 变量设置已完成步骤的颜色
  * @param @finish-color {en} set finished step color by CSS variable
  * @example
  * ```

package/cjs/action-sheet/style/index.less

@@ -61,7 +61,7 @@
  *               Arco Theme Style                  *
  *                                                 *
  ***************************************************/
-    & when (@use-dark-mode = 1) {
+& when (@use-dark-mode = 1) {
     
   .process-bg-color-with-config,
   .process-custom-icon-bg-color-with-config {

package/cjs/avatar/style/css/index.css

@@ -4,7 +4,7 @@
  * @name_en General Mixin
  */
 /**
- * 根据base-font-size，设置单位尺寸为rem
+ * 根据 base-font-size，设置单位尺寸为 rem
  * @desc {en} set the unit size to rem based on base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -21,7 +21,7 @@
  * ```
  */
 /**
- * 根据base-font-size，设置常规模式和rtl模式下单位尺寸为rem
+ * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
  * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
  * @param @property css属性名
  * @param @property {en} css property
@@ -38,8 +38,8 @@
  * ```
  */
 /**
- * 当less变量use-dark-mode=1时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则
- * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark when the less variable use-dark-mode=1.
+ * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
+ * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
  * @param @rules 对应的暗黑模式规则
  * @param @rules {en} Corresponding dark mode rules
  * @example
@@ -54,7 +54,7 @@
  * ```
  */
 /**
- * 为属性设置arco提供的token变量
+ * 为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute
  * @param @property css属性名
  * @param @property {en} css property
@@ -76,11 +76,11 @@
  * ```
  */
 /**
- * 在常规模式和rtl模式下为属性设置arco提供的token变量
+ * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
- * @param @variables token变量名
+ * @param @variables token 变量名
  * @param @variables {en} token variable name
  * @param @preValues
  * @param @preValues {en}
@@ -96,9 +96,9 @@
  * ```
  */
 /**
- * 0.5px的边框线
+ * 0.5px 的边框线
  * @desc {en} a border line of 0.5 pixels
- * @param @color 使用css变量为线设置颜色
+ * @param @color 使用 css 变量为线设置颜色
  * @param @color {en} set border-color by CSS variable
  * @param @direction 边框方向，默认为全部方向
  * @param @direction {en} border direction，default to all directions.
@@ -115,9 +115,9 @@
 /**
  * 字体加粗
  * @desc {en} font bold
- * @param @color 使用css变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
  * @param @color {en} set color by CSS variable
- * @param @stroke 字体粗细，默认0.3px
+ * @param @stroke 字体粗细，默认 0.3px
  * @param @stroke {en} font weight, default 0.3 pixel
  * @example
  * ```
@@ -130,17 +130,17 @@
  * ```
  */
 /**
- * 1px边框
+ * 1px 边框
  * @desc {en} 1 pixel border
  * @param @direction 边框方向
  * @param @direction {en} border direction
- * @param @borderColor 使用css变量设置边框颜色
+ * @param @borderColor 使用 css 变量设置边框颜色
  * @param @borderColor {en} set border-color by CSS variable
- * @param @borderRadius border-radius，默认为0
+ * @param @borderRadius border-radius，默认为 0
  * @param @borderRadius {en} border-radius, default value is 0
- * @param @borderWidth border-width，默认为1px
+ * @param @borderWidth border-width，默认为 1px
  * @param @borderWidth {en} border-width, default value is 1 pixel
- * @param @borderStyle border-style，默认为solid
+ * @param @borderStyle border-style，默认为 solid
  * @param @borderStyle {en} border-style, default value is solid
  * @example
  * ```
@@ -153,9 +153,9 @@
  * ```
  */
 /**
- * 元素右下0.5px边框
+ * 元素右下 0.5px 边框
  * @desc {en} 0.5px border on bottom right
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -167,9 +167,9 @@
  * ```
  */
 /**
- * 元素左上0.5px边框
+ * 元素左上 0.5px 边框
  * @desc {en} 0.5px border on top left
- * @param @color 使用css变量设置边框颜色
+ * @param @color 使用 css 变量设置边框颜色
  * @param @color {en} set border-color by CSS variable
  * @example
  * ```
@@ -181,9 +181,9 @@
  * ```
  */
 /**
- * 设置Loading组件颜色
+ * 设置 Loading 组件颜色
  * @desc {en} set Loading component color
- * @param @color 使用css变量设置颜色
+ * @param @color 使用 css 变量设置颜色
  * @param @color {en} set color by CSS variable
  * @example
  * ```
@@ -197,9 +197,9 @@
 /**
  * 设置最小字号
  * @desc {en} set minimum font-size
- * @param @size 使用css变量设置最小字号
+ * @param @size 使用 css 变量设置最小字号
  * @param @size {en} set minimum font-size by CSS variable
- * @param @scale 设置最小字号下文字缩放比例，默认为0.9
+ * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
  * @param @scale {en} set minimum font-size down text scale，default value is 0.9
  * @example
  * ```
@@ -212,9 +212,9 @@
  * ```
  */
 /**
- * 设置content-box盒模型下元素宽度
+ * 设置 content-box 盒模型下元素宽度
  * @desc {en} set box width in content-box
- * @param @property css属性名
+ * @param @property css 属性名
  * @param @property {en} css property
  * @param @width 元素总宽度，包含内边距
  * @param @width element width, include padding
@@ -232,11 +232,11 @@
  * ```
  */
 /**
- * 设置Steps组件颜色
+ * 设置 Steps 组件颜色
  * @desc {en} set Steps component color
- * @param @color 使用css变量设置主颜色
+ * @param @color 使用 css 变量设置主颜色
  * @param @color {en} set main step color by CSS variable
- * @param @finish-color 使用css变量设置已完成步骤的颜色
+ * @param @finish-color 使用 css 变量设置已完成步骤的颜色
  * @param @finish-color {en} set finished step color by CSS variable
  * @example
  * ```
@@ -674,6 +674,10 @@
           flex-direction: column;
   margin-left: 0.32rem;
 }
+[dir="rtl"] .arco-avatar-info {
+  margin-left: initial;
+  margin-right: 0.32rem;
+}
 .arco-avatar-name {
   color:  #1d2129 ;
 }
@@ -693,30 +697,50 @@
 .arco-avatar-group-size-ultra-small .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
+[dir="rtl"] .arco-avatar-group-size-ultra-small .arco-avatar-wrapper {
+  margin-left: initial;
+  margin-right:  -0.16rem ;
+}
 .arco-avatar-group-size-ultra-small .arco-avatar {
   border-width:  0.02rem ;
 }
 .arco-avatar-group-size-smaller .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
+[dir="rtl"] .arco-avatar-group-size-smaller .arco-avatar-wrapper {
+  margin-left: initial;
+  margin-right:  -0.16rem ;
+}
 .arco-avatar-group-size-smaller .arco-avatar {
   border-width:  0.02rem ;
 }
 .arco-avatar-group-size-small .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
+[dir="rtl"] .arco-avatar-group-size-small .arco-avatar-wrapper {
+  margin-left: initial;
+  margin-right:  -0.24rem ;
+}
 .arco-avatar-group-size-small .arco-avatar {
   border-width:  0.03rem ;
 }
 .arco-avatar-group-size-medium .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
+[dir="rtl"] .arco-avatar-group-size-medium .arco-avatar-wrapper {
+  margin-left: initial;
+  margin-right:  -0.24rem ;
+}
 .arco-avatar-group-size-medium .arco-avatar {
   border-width:  0.03rem ;
 }
 .arco-avatar-group-size-large .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
+[dir="rtl"] .arco-avatar-group-size-large .arco-avatar-wrapper {
+  margin-left: initial;
+  margin-right:  -0.24rem ;
+}
 .arco-avatar-group-size-large .arco-avatar {
   border-width:  0.03rem ;
 }

package/cjs/avatar/style/index.less

@@ -56,7 +56,7 @@
         display: flex;
         justify-content: center;
         flex-direction: column;
-        .rem(margin-left, 16);
+        .rem-with-rtl(margin-left, 16);
     }
 
     &-name {
@@ -99,7 +99,7 @@
 
     &-size-@{size} {
         .@{prefix}-avatar-wrapper {
-            .use-var(margin-left, "avatar-group-@{size}-size-offset");
+            .use-var-with-rtl(margin-left, "avatar-group-@{size}-size-offset");
         }
         .@{prefix}-avatar {
             .use-var(border-width, "avatar-group-@{size}-size-border");
@@ -152,7 +152,7 @@
  *               Arco Theme Style                  *
  *                                                 *
  ***************************************************/
-    & when (@use-dark-mode = 1) {
+& when (@use-dark-mode = 1) {
     
   .process-bg-color-with-config,
   .process-custom-icon-bg-color-with-config {