@arco-design/mobile-react 2.27.4 → 2.28.0

package/esm/_helpers/hooks.js

@@ -4,7 +4,7 @@
  * @name_en General Hooks
  */
 import { useState, useRef, useEffect, useCallback, useContext } from 'react';
-import { getSystem, scrollWithAnimation } from '@arco-design/mobile-utils';
+import { getSystem, scrollWithAnimation, safeGetComputedStyle } from '@arco-design/mobile-utils';
 import { GlobalContext } from '../context-provider';
 export function useListenResize(resizeHandler, deps, needListen) {
   if (deps === void 0) {
@@ -58,11 +58,25 @@ export function useMountedState(initialState) {
   var result = [state, setValidState];
   return result;
 }
-export function useRefState(initialValue) {
+export function useSameRefState(initialValue) {
   var _useState2 = useState(initialValue),
       state = _useState2[0],
       setState = _useState2[1];
 
+  var stateRef = useRef(state);
+
+  var setStateProxy = function setStateProxy(data) {
+    stateRef.current = data;
+    setState(data);
+  };
+
+  return [state, stateRef, setStateProxy];
+}
+export function useRefState(initialValue) {
+  var _useState3 = useState(initialValue),
+      state = _useState3[0],
+      setState = _useState3[1];
+
   var stateRef = useRef(state);
   useEffect(function () {
     stateRef.current = state;
@@ -95,8 +109,8 @@ export function useUpdateEffect(effect, dependencies) {
   }, dependencies);
 }
 export function useForceUpdate() {
-  var _useState3 = useState(0),
-      setTick = _useState3[1];
+  var _useState4 = useState(0),
+      setTick = _useState4[1];
 
   var update = useCallback(function () {
     setTick(function (tick) {
@@ -116,11 +130,11 @@ export function useSystem() {
   var _useContext = useContext(GlobalContext),
       currentSystem = _useContext.system;
 
-  var _useState4 = useState(function () {
+  var _useState5 = useState(function () {
     return currentSystem || getSystem();
   }),
-      system = _useState4[0],
-      setSystem = _useState4[1];
+      system = _useState5[0],
+      setSystem = _useState5[1];
 
   useEffect(function () {
     setSystem(currentSystem || getSystem());
@@ -128,13 +142,13 @@ export function useSystem() {
   return system;
 }
 export function useWindowSize(listenResize) {
-  var _useState5 = useState(0),
-      windowWidth = _useState5[0],
-      setWindowWidth = _useState5[1];
-
   var _useState6 = useState(0),
-      windowHeight = _useState6[0],
-      setWindowHeight = _useState6[1];
+      windowWidth = _useState6[0],
+      setWindowWidth = _useState6[1];
+
+  var _useState7 = useState(0),
+      windowHeight = _useState7[0],
+      setWindowHeight = _useState7[1];
 
   function setSize() {
     setWindowWidth(window.innerWidth);
@@ -178,7 +192,7 @@ export function usePopupScroll(visible, popupDom, getScrollContainer, orientatio
     if (ele) {
       var actualEle = Array.isArray(ele) ? ele : [ele];
       scrollRef.current = actualEle.reduce(function (acc, nowEle) {
-        return [].concat(acc, nowEle && window.getComputedStyle(nowEle).overflow !== 'hidden' ? [{
+        return [].concat(acc, nowEle && safeGetComputedStyle(nowEle).overflow !== 'hidden' ? [{
           ele: nowEle,
           maxScrollX: orientationDirection === 'left' || orientationDirection === 'right' ? nowEle.scrollHeight - nowEle.clientHeight : nowEle.scrollWidth - nowEle.clientWidth,
           maxScrollY: orientationDirection === 'left' || orientationDirection === 'right' ? nowEle.scrollWidth - nowEle.clientWidth : nowEle.scrollHeight - nowEle.clientHeight
@@ -436,17 +450,17 @@ export function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOver
   }, [visible]);
 }
 export var useProgress = function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
-  var _useState7 = useState(0),
-      currentPercentage = _useState7[0],
-      setCurrentPercentage = _useState7[1];
+  var _useState8 = useState(0),
+      currentPercentage = _useState8[0],
+      setCurrentPercentage = _useState8[1];
 
-  var _useState8 = useState(false),
-      transitionControl = _useState8[0],
-      setTransitionControl = _useState8[1];
+  var _useState9 = useState(false),
+      transitionControl = _useState9[0],
+      setTransitionControl = _useState9[1];
 
-  var _useState9 = useState(0),
-      count = _useState9[0],
-      setCount = _useState9[1];
+  var _useState10 = useState(0),
+      count = _useState10[0],
+      setCount = _useState10[1];
 
   var latestPercentage = useRef(percentage);
   useEffect(function () {
@@ -475,9 +489,9 @@ export function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
     delay = 200;
   }
 
-  var _useState10 = useState(0),
-      clickTimes = _useState10[0],
-      setClickTimes = _useState10[1];
+  var _useState11 = useState(0),
+      clickTimes = _useState11[0],
+      setClickTimes = _useState11[1];
 
   var eventRef = useRef();
   useEffect(function () {
@@ -499,9 +513,9 @@ export function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
 }
 var arcoSvgKeyCount = 0;
 export function useGenSvgKey(userSetSvgKey) {
-  var _useState11 = useState(''),
-      innerSvgKey = _useState11[0],
-      setInnerSvgKey = _useState11[1];
+  var _useState12 = useState(''),
+      innerSvgKey = _useState12[0],
+      setInnerSvgKey = _useState12[1];
 
   var svgKey = userSetSvgKey || innerSvgKey;
   useEffect(function () {

package/esm/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" | "className" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "items" | "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" | "className" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "translateZ" | "className" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "items" | "cancelText" | "subTitle"> & {
             key?: string | undefined;
         }) => void;
     };

package/esm/badge/index.js

@@ -51,7 +51,8 @@ var Badge = /*#__PURE__*/forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(Transition, {
       in: visible,
       timeout: timeout,
-      type: "scale"
+      type: "scale",
+      nodeRef: domRef
     }, /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-badge", className, (_cls = {}, _cls[prefixCls + "-badge-dot dot"] = dot, _cls[prefixCls + "-badge-bordered bordered"] = bordered, _cls[prefixCls + "-badge-absolute absolute"] = absolute, _cls)),
       style: style,

package/esm/badge/style/css/index.css

@@ -89,7 +89,19 @@
   margin-left:  -8PX ;
   margin-top:  -8PX ;
 }
+[dir="rtl"] .arco-badge-absolute {
+  left: initial;
+  right: 100%;
+}
+[dir="rtl"] .arco-badge-absolute {
+  margin-left: initial;
+  margin-right:  -8PX ;
+}
 .arco-badge-absolute.arco-badge-dot {
   margin-left:  -4PX ;
   margin-top:  -4PX ;
 }
+[dir="rtl"] .arco-badge-absolute.arco-badge-dot {
+  margin-left: initial;
+  margin-right:  -4PX ;
+}

package/esm/badge/style/index.less

@@ -60,13 +60,13 @@
     &-absolute {
         position: absolute;
         top: 0;
-        left: 100%;
-        .use-var(margin-left, badge-text-deviation);
+        .set-prop-with-rtl(left, 100%);
+        .use-var-with-rtl(margin-left, badge-text-deviation);
         .use-var(margin-top, badge-text-deviation);
     }
 
     &-absolute&-dot {
-        .use-var(margin-left, badge-dot-deviation);
+        .use-var-with-rtl(margin-left, badge-dot-deviation);
         .use-var(margin-top, badge-dot-deviation);
     }
 }

package/esm/button/style/css/index.css

@@ -210,6 +210,10 @@
 .arco-button-text-has-icon {
   margin-left:  0.08rem ;
 }
+[dir="rtl"] .arco-button-text-has-icon {
+  margin-left: initial;
+  margin-right:  0.08rem ;
+}
 .arco-button-loading-icon {
   display: inline-block;
   vertical-align: middle;

package/esm/button/style/index.less

@@ -84,7 +84,7 @@
         vertical-align: middle;
     }
     &-text-has-icon {
-        .use-var(margin-left, button-icon-text-gutter);
+        .use-var-with-rtl(margin-left, button-icon-text-gutter);
     }
 
     &-loading-icon {

package/esm/cell/style/css/index.css

@@ -164,6 +164,9 @@
   -webkit-box-orient: vertical;
   white-space: normal;
 }
+[dir="rtl"] .arco-cell .cell-content .cell-text {
+  text-align: left;
+}
 .arco-cell .cell-label-icon {
   margin-right:  0.24rem ;
   font-size: 0;
@@ -181,6 +184,10 @@
   margin-left:  0.16rem ;
   font-size: 0;
 }
+[dir="rtl"] .arco-cell .cell-arrow-icon {
+  -webkit-transform: scale(-1);
+          transform: scale(-1);
+}
 [dir="rtl"] .arco-cell .cell-arrow-icon {
   margin-left: initial;
   margin-right:  0.16rem ;

package/esm/cell/style/index.less

@@ -54,7 +54,7 @@
 
         .cell-text {
             width: 100%;
-            text-align: right;
+            .set-value-with-rtl(text-align, right);
             .use-var(font-size, cell-content-font-size);
             .text-overflow(2);
         }
@@ -71,6 +71,9 @@
     }
 
     .cell-arrow-icon {
+        [dir="rtl"] & {
+            transform: scale(-1);
+        }
         .use-var-with-rtl(margin-left, cell-arrow-gutter);
         font-size: 0;
         .@{prefix}-icon {

package/esm/checkbox/style/css/index.css

@@ -32,6 +32,10 @@
 .arco-checkbox .checkbox-icon + .checkbox-text {
   margin-left:  0.16rem ;
 }
+[dir="rtl"] .arco-checkbox .checkbox-icon + .checkbox-text {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
 .arco-checkbox.disabled .checkbox-text {
   opacity:  0.5 ;
 }
@@ -47,7 +51,16 @@
 .arco-checkbox-group .arco-checkbox:not(:last-child) {
   margin-right:  0.48rem ;
 }
+[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child) {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}
 .arco-checkbox-group .arco-checkbox:not(:last-child).block,
 .arco-checkbox-group .arco-checkbox:not(:last-child).justify {
   margin-right: 0;
 }
+[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child).block,
+[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child).justify {
+  margin-right: initial;
+  margin-left: 0;
+}

package/esm/checkbox/style/index.less

@@ -29,7 +29,7 @@
     }
 
     .checkbox-icon + .checkbox-text {
-        .use-var(margin-left, checkbox-icon-margin-right);
+        .use-var-with-rtl(margin-left, checkbox-icon-margin-right);
     }
 
     &.disabled .checkbox-text {
@@ -48,11 +48,11 @@
 
 .@{prefix}-checkbox-group {
     .@{prefix}-checkbox:not(:last-child) {
-        .use-var(margin-right, checkbox-group-gutter);
+        .use-var-with-rtl(margin-right, checkbox-group-gutter);
 
         &.block,
         &.justify {
-            margin-right: 0;
+            .set-prop-with-rtl(margin-right, 0);
         }
     }
 }

package/esm/collapse/collapse.js

@@ -1,7 +1,7 @@
-import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useContext, useMemo } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useContext } from 'react';
 import { cls, convertCssDuration, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
-import { useRefState, useUpdateEffect } from '../_helpers';
+import { useRefState, useSameRefState, useUpdateEffect } from '../_helpers';
 import IconArrowDown from '../icon/IconArrowDown';
 import { allContexts, CollapseKeyContext } from './utils';
 export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -46,7 +46,13 @@ export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var CollapseContext = allContexts[groupKey] || {};
   var groupContext = useContext(CollapseContext) || {};
-  var opened = useMemo(function () {
+
+  var _useSameRefState = useSameRefState(false),
+      opened = _useSameRefState[0],
+      openedRef = _useSameRefState[1],
+      setOpened = _useSameRefState[2];
+
+  useEffect(function () {
     var show = false; // 优先级： group > children
     // @en Priority: group > children
 
@@ -60,7 +66,7 @@ export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
       show = itemActive;
     }
 
-    return show;
+    setOpened(show);
   }, [value, active, itemActive, groupContext.isGroup, groupContext.value]);
 
   var getContentHeight = function getContentHeight() {
@@ -78,8 +84,8 @@ export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
     contentWrapRef.current.style.height = newHeight;
     var transTimeout = convertCssDuration(contentWrapRef.current, 'transitionDuration');
     setTimeout(function () {
-      return contentWrapRef.current && (contentWrapRef.current.style.height = opened ? 'auto' : '0px');
-    }, opened ? transTimeout : 20);
+      return contentWrapRef.current && (contentWrapRef.current.style.height = openedRef.current ? 'auto' : '0px');
+    }, openedRef.current ? transTimeout : 20);
   };
 
   var toggleOpened = function toggleOpened() {
@@ -102,10 +108,10 @@ export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     var height = getContentHeight();
-    contentWrapRef.current.style.height = opened ? contentHeightRef.current + "px" : '0px';
+    contentWrapRef.current.style.height = openedRef.current ? contentHeightRef.current + "px" : '0px';
     nextTick(function () {
       contentHeightRef.current = height;
-      resetHeight(opened ? height + "px" : '0px');
+      resetHeight(openedRef.current ? height + "px" : '0px');
     });
   };
 

package/esm/dialog/index.d.ts

@@ -193,11 +193,11 @@ declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefA
      * @param {DialogProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
             key?: string | undefined;
         }) => void;
     };

package/esm/form/style/css/index.css

@@ -27,6 +27,10 @@
   padding-right:  0.32rem ;
   width:  1.92rem ;
 }
+[dir="rtl"] .arco-form-label-item {
+  padding-right: initial;
+  padding-left:  0.32rem ;
+}
 .arco-form-label-item-required-asterisk {
   position: absolute;
   left: -0.6em;
@@ -35,6 +39,10 @@
   line-height:  1.08rem ;
   color:  #f53f3f ;
 }
+[dir="rtl"] .arco-form-label-item-required-asterisk {
+  left: initial;
+  right: -0.6em;
+}
 .disabled .arco-form-label-item {
   color:  #c9cdd4 ;
 }
@@ -68,6 +76,10 @@
 .arco-form-item-message svg {
   margin-right: 0.08rem;
 }
+[dir="rtl"] .arco-form-item-message svg {
+  margin-right: initial;
+  margin-left: 0.08rem;
+}
 .arco-form-item-error-message {
   color:  #f53f3f ;
 }
@@ -80,6 +92,10 @@
 .arco-form-item.arco-form-item-vertical .arco-input-wrap {
   padding-left: 0;
 }
+[dir="rtl"] .arco-form-item.arco-form-item-vertical .arco-input-wrap {
+  padding-left: initial;
+  padding-right: 0;
+}
 .arco-form-item.arco-form-item-vertical .arco-form-label-item {
   width: auto;
   margin-top: 16px;

package/esm/form/style/index.less

@@ -20,12 +20,12 @@
         .use-var(font-size, form-item-label-item-font-size);
         .use-var(line-height, form-item-label-item-line-height);
         .use-var(color, form-item-label-item-color);
-        .use-var(padding-right, form-item-label-item-gutter);
+        .use-var-with-rtl(padding-right, form-item-label-item-gutter);
         .use-var(width, form-item-label-item-width);
 
         &-required-asterisk {
             position: absolute;
-            left: -0.6em;
+            .set-prop-with-rtl(left, -0.6em);
             top: 0;
 
             .use-var(font-size, form-item-label-item-font-size);
@@ -60,7 +60,7 @@
         }
 
         svg {
-            .rem(margin-right, 4);
+            .rem-with-rtl(margin-right, 4);
         }
         margin-bottom: 16px;
     }
@@ -75,7 +75,7 @@
     &-item.@{prefix}-form-item-vertical {
         display: block;
         .arco-input-wrap {
-            padding-left: 0;
+            .set-prop-with-rtl(padding-left, 0);
         }
         .@{prefix}-form-label-item {
             width: auto;

package/esm/image-preview/index.d.ts

@@ -269,9 +269,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      * @param {ImagePreviewProps} config configuration
      * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "getContainer" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "loadingArea" | "onClose" | "fit" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "getContainer" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "loadingArea" | "onClose" | "fit" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
     };
 };
 /**

package/esm/image-preview/index.js

@@ -766,7 +766,8 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(Carousel, _extends({
       autoPlay: false,
       loop: loop,
-      lazyloadCount: lazyloadCount
+      lazyloadCount: lazyloadCount,
+      stopPropagation: false
     }, carouselProps), (allImages || []).map(function (image, index) {
       var innerNode = /*#__PURE__*/React.createElement("div", {
         key: index,
@@ -875,7 +876,8 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
       timeout: displayDuration,
       type: "fade",
       mountOnEnter: true,
-      unmountOnExit: true
+      unmountOnExit: true,
+      nodeRef: domRef
     }, /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-image-preview", 'all-border-box', {
         noselect: noselect

package/esm/image-preview/style/css/index.css

@@ -46,6 +46,9 @@
   height: 100%;
   will-change: transform;
 }
+.arco-image-preview .preview-image .image-container {
+  overflow: visible;
+}
 .arco-image-preview .preview-image.preview-hidden {
   pointer-events: none;
 }

package/esm/image-preview/style/index.less

@@ -41,6 +41,10 @@
         height: 100%;
         will-change: transform;
 
+        .image-container {
+            overflow: visible;
+        }
+
         &.preview-hidden {
             pointer-events: none;
 

package/esm/index.d.ts

@@ -1,34 +1,31 @@
-export { default as Button } from './button';
+export { default as Tabs } from './tabs';
+export { default as Sticky } from './sticky';
+export { default as LoadMore } from './load-more';
+export { default as Cell } from './cell';
 export { default as ActionSheet } from './action-sheet';
 export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
+export { default as Button } from './button';
 export { default as Carousel } from './carousel';
-export { default as Cell } from './cell';
 export { default as Checkbox } from './checkbox';
 export { default as CircleProgress } from './circle-progress';
 export { default as Collapse } from './collapse';
 export { default as ContextProvider } from './context-provider';
 export { default as CountDown } from './count-down';
 export { default as DatePicker } from './date-picker';
-export { default as Divider } from './divider';
 export { default as Dialog } from './dialog';
+export { default as Divider } from './divider';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as Ellipsis } from './ellipsis';
 export { default as Form } from './form';
-export { default as Input } from './input';
-export { default as Textarea } from './textarea';
-export { default as Radio } from './radio';
-export { default as Rate } from './rate';
-export { default as Slider } from './slider';
 export { default as Grid } from './grid';
 export { default as Image } from './image';
-export { default as ShowMonitor } from './show-monitor';
 export { default as ImagePicker } from './image-picker';
 export { default as ImagePreview } from './image-preview';
 export { default as IndexBar } from './index-bar';
+export { default as Input } from './input';
 export { default as Keyboard } from './keyboard';
-export { default as LoadMore } from './load-more';
 export { default as Loading } from './loading';
 export { default as Masking } from './masking';
 export { default as NavBar } from './nav-bar';
@@ -43,15 +40,18 @@ export { default as PopupSwiper } from './popup-swiper';
 export { default as Portal } from './portal';
 export { default as Progress } from './progress';
 export { default as PullRefresh } from './pull-refresh';
+export { default as Radio } from './radio';
+export { default as Rate } from './rate';
 export { default as SearchBar } from './search-bar';
+export { default as ShowMonitor } from './show-monitor';
+export { default as Slider } from './slider';
 export { default as Stepper } from './stepper';
 export { default as Steps } from './steps';
-export { default as Sticky } from './sticky';
 export { default as SwipeAction } from './swipe-action';
 export { default as SwipeLoad } from './swipe-load';
 export { default as Switch } from './switch';
 export { default as TabBar } from './tab-bar';
-export { default as Tabs } from './tabs';
 export { default as Tag } from './tag';
+export { default as Textarea } from './textarea';
 export { default as Toast } from './toast';
 export { default as Transition } from './transition';