@arco-design/mobile-react 2.32.0 → 2.34.0

package/esm/avatar/type.d.ts

@@ -42,6 +42,12 @@ export interface AvatarProps<T extends ImageProps = ImageProps> extends BaseProp
      * @default {}
      */
     avatarStyle?: React.CSSProperties;
+    /**
+     * 头像元素的自定义类名
+     * @en Custom classname for avatar element
+     * @default ""
+     */
+    avatarClass?: string;
     /**
      * 是否自动根据头像尺寸调整字体大小
      * @en Whether to automatically adjust the font size according to the avatar size

package/esm/carousel/index.js

@@ -228,6 +228,12 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
 
     if (posAdjustingRef.current) {
       return;
+    } // touchMove触发时，阻止handleTouchStart多次执行（如点击事件）
+    // @en When touchMove is triggered, prevent handleTouchStart from executing multiple times (such as click events)
+
+
+    if (touchStartedRef.current && touchMovedRef.current) {
+      return;
     }
 
     touchStartedRef.current = true;
@@ -684,12 +690,23 @@ var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
       return;
     }
 
-    if (!touchStartedRef.current || !touchMovedRef.current || posAdjustingRef.current || touchStoppedRef.current) {
+    if (!touchStartedRef.current) {
       return;
     }
 
     touchStartedRef.current = false;
+
+    if (!touchMovedRef.current) {
+      setPlayIntervalRef.current();
+      return;
+    }
+
     touchMovedRef.current = false;
+
+    if (posAdjustingRef.current || touchStoppedRef.current) {
+      return;
+    }
+
     var touchEndTime = new Date().getTime();
     var dis = Math.abs(distance);
     var speed = dis / (touchEndTime - touchStartTimeRef.current) * 1000;

package/esm/divider/style/css/index.css

@@ -542,10 +542,12 @@
 .arco-divider::before {
   content: '';
 }
-.arco-divider--hairline::before,
-.arco-divider--hairline::after {
-  -webkit-transform: scaleY(0.5);
-          transform: scaleY(0.5);
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-divider--hairline::before,
+  .arco-divider--hairline::after {
+    -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+  }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .arco-divider--hairline::before,

package/esm/divider/style/index.less

@@ -27,7 +27,9 @@
     &--hairline {
         &::before,
         &::after {
-            transform: scaleY(0.5);
+            @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+                transform: scaleY(0.5);
+            }
 
             @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
                 transform: scaleY(0.33333333);

package/esm/notice-bar/index.js

@@ -1,4 +1,4 @@
-import { cls, removeElement, fadeColor, nextTick } from '@arco-design/mobile-utils';
+import { cls, fadeColor, nextTick } from '@arco-design/mobile-utils';
 import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useMemo, useContext } from 'react';
 import { ContextLayout, GlobalContext } from '../context-provider';
 import IconClose from '../icon/IconClose';
@@ -43,9 +43,13 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var contentRef = useRef(null);
   var timerRef = useRef(null);
 
-  var _useState = useState(false),
-      needMarquee = _useState[0],
-      setNeedMarquee = _useState[1];
+  var _useState = useState(true),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  var _useState2 = useState(false),
+      needMarquee = _useState2[0],
+      setNeedMarquee = _useState2[1];
 
   var extraClass = useMemo(function () {
     var classList = []; // 字幕可滚动时，或不可滚动且不可以换行时，添加不换行效果
@@ -86,9 +90,8 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [useRtl]);
 
   function close() {
-    if (domRef.current) {
-      removeElement(domRef.current);
-    }
+    setVisible(false);
+    clear();
   }
 
   function handleClose(e) {
@@ -153,7 +156,7 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   function renderNoticeBar(prefix) {
-    return /*#__PURE__*/React.createElement("div", {
+    return visible ? /*#__PURE__*/React.createElement("div", {
       className: cls(prefix, className, extraClass),
       style: style,
       ref: domRef,
@@ -179,7 +182,7 @@ var NoticeBar = /*#__PURE__*/forwardRef(function (props, ref) {
     }, rightContent) : null, closeable ? /*#__PURE__*/React.createElement("div", {
       className: prefix + "-close",
       onClick: handleClose
-    }, closeIcon) : null);
+    }, closeIcon) : null) : null;
   }
 
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {

package/esm/popover/popover-inner.js

@@ -47,7 +47,15 @@ export var PopoverInner = /*#__PURE__*/forwardRef(function (props, ref) {
     if (left || width || top || height || bottom) {
       if (!show) {
         setTimeout(function () {
-          setShow(true);
+          setShow(function () {
+            var _domRef$current;
+
+            // bugfix:
+            // 外层CSSTransition使用dom API而非通过react className属性修改class
+            // 如果内部通过react className属性动态修改class会覆盖CSSTransition的设置，导致CSSTransition enter相关的class无法应用到组件
+            (_domRef$current = domRef.current) == null ? void 0 : _domRef$current.classList.add('show');
+            return true;
+          });
         }, 0);
       }
     }
@@ -99,7 +107,6 @@ export var PopoverInner = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", {
     ref: domRef,
     className: cls(prefixCls + "-popover-inner", 'popover-inner', 'all-border-box', mode + "-mode", className, {
-      show: show,
       'with-shadow': needShadow,
       'with-suffix': showCloseIcon || textSuffix,
       'custom-content': typeof content !== 'string'

package/esm/steps/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StepsProps, StepsRef } from './type';
 export * from './type';
-export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "align" | "iconType" | "current"> & {
+export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "align" | "iconType" | "current" | "reverseOrder"> & {
     index?: number | undefined;
     changeIndex: (newIndex: number) => void;
 }>;

package/esm/steps/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useImperativeHandle, Children, createContext, useCallback, useState, useEffect } from 'react';
-import { componentWrapper } from '@arco-design/mobile-utils';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import Step from './step';
 import { useSystem, useRefState } from '../_helpers';
@@ -24,6 +24,8 @@ var Steps = /*#__PURE__*/forwardRef(function (props, ref) {
       _props$status = props.status,
       status = _props$status === void 0 ? 'process' : _props$status,
       items = props.items,
+      _props$reverseOrder = props.reverseOrder,
+      reverseOrder = _props$reverseOrder === void 0 ? false : _props$reverseOrder,
       onClick = props.onClick,
       onChange = props.onChange;
   var defaultAlign = direction === 'vertical' ? 'start' : 'center';
@@ -64,6 +66,7 @@ var Steps = /*#__PURE__*/forwardRef(function (props, ref) {
         index: index,
         status: activeIndex === index ? status : void 0,
         align: align,
+        reverseOrder: reverseOrder,
         changeIndex: changeIndex
       },
       key: index
@@ -72,7 +75,9 @@ var Steps = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {
-      className: prefixCls + "-steps all-border-box " + className + " " + direction + " " + system,
+      className: cls(prefixCls + "-steps all-border-box " + className + " " + direction + " " + system, {
+        'reverse-order': reverseOrder
+      }),
       style: style,
       ref: domRef
     }, items ? items.map(function (item, index) {

package/esm/steps/style/css/index.css

@@ -516,6 +516,12 @@
   display: flex;
   padding:  0.32rem 0 ;
 }
+.arco-steps.reverse-order {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: row-reverse;
+          flex-direction: row-reverse;
+}
 .arco-steps-item {
   position: relative;
   display: -webkit-box;
@@ -548,6 +554,14 @@
 .arco-steps-item:last-child .arco-steps-item-tail::after {
   visibility: hidden;
 }
+.reverse-order .arco-steps-item:first-child .arco-steps-item-tail::after,
+.reverse-order .arco-steps-item:last-child .arco-steps-item-tail::before {
+  visibility: hidden;
+}
+.reverse-order .arco-steps-item:first-child .arco-steps-item-tail::before,
+.reverse-order .arco-steps-item:last-child .arco-steps-item-tail::after {
+  visibility: visible;
+}
 .arco-steps-item-tail {
   position: absolute;
   display: -webkit-box;
@@ -577,13 +591,13 @@
   right:  9PX ;
 }
 .horizontal .arco-steps-item-tail-align-start::after {
-  content: "";
+  content: '';
   width: 100%;
   border-radius:  2PX ;
 }
 .horizontal .arco-steps-item-tail-align-center::before,
 .horizontal .arco-steps-item-tail-align-center::after {
-  content: "";
+  content: '';
   width: 50%;
 }
 .horizontal .arco-steps-item-tail-align-center::before {
@@ -637,13 +651,13 @@
   padding:  14PX 0 ;
 }
 .vertical .arco-steps-item-tail-align-start::after {
-  content: "";
+  content: '';
   height: 100%;
   border-radius:  2PX ;
 }
 .vertical .arco-steps-item-tail-align-center::before,
 .vertical .arco-steps-item-tail-align-center::after {
-  content: "";
+  content: '';
   height: 50%;
 }
 .vertical .arco-steps-item-tail-align-center::before {
@@ -667,6 +681,15 @@
 .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
   background:  #165DFF ;
 }
+.reverse-order .arco-steps-item-tail-status-finish::before,
+.reverse-order .arco-steps-item-tail-status-process::after,
+.reverse-order .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::after {
+  background:  #165DFF ;
+}
+.reverse-order .arco-steps-item-tail-status-process::before,
+.reverse-order .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
+  background:  #e5e6eb ;
+}
 .arco-steps-item-custom-icon,
 .arco-steps-item-icon {
   display: -webkit-inline-box;
@@ -796,6 +819,12 @@
   padding-bottom:  0 ;
   padding-left:  0.4rem ;
 }
+.arco-steps.vertical.reverse-order {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -webkit-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
 [dir="rtl"] .arco-steps.vertical {
   padding-left: initial;
   padding-right:  0.4rem ;
@@ -823,6 +852,15 @@
 .arco-theme-dark .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
   background:  #3C7EFF ;
 }
+.arco-theme-dark .reverse-order .arco-steps-item-tail-status-finish::before,
+.arco-theme-dark .reverse-order .arco-steps-item-tail-status-process::after,
+.arco-theme-dark .reverse-order .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::after {
+  background:  #3C7EFF ;
+}
+.arco-theme-dark .reverse-order .arco-steps-item-tail-status-process::before,
+.arco-theme-dark .reverse-order .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
+  background:  #484849 ;
+}
 .arco-theme-dark .number.finish .arco-steps-item-icon {
   background:  #000D4D ;
 }

package/esm/steps/style/index.less

@@ -1,9 +1,13 @@
-@import "../../../style/mixin.less";
+@import '../../../style/mixin.less';
 
 .@{prefix}-steps {
     display: flex;
     .use-var(padding, steps-padding);
 
+    &.reverse-order {
+        flex-direction: row-reverse;
+    }
+
     &-item {
         position: relative;
         display: flex;
@@ -30,6 +34,20 @@
             visibility: hidden;
         }
 
+        &:first-child &-tail::after,
+        &:last-child &-tail::before {
+            .reverse-order & {
+                visibility: hidden;
+            }
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            .reverse-order & {
+                visibility: visible;
+            }
+        }
+
         &-tail {
             position: absolute;
             display: flex;
@@ -50,7 +68,7 @@
                     .use-var(padding, steps-tail-horizontal-padding);
 
                     &::after {
-                        content: "";
+                        content: '';
                         width: 100%;
                         .use-var(border-radius, steps-tail-border-radius);
                     }
@@ -59,7 +77,7 @@
                 &-align-center {
                     &::before,
                     &::after {
-                        content: "";
+                        content: '';
                         width: 50%;
                     }
                     &::before {
@@ -90,7 +108,7 @@
                     .use-var(padding, steps-tail-vertical-padding);
 
                     &::after {
-                        content: "";
+                        content: '';
                         height: 100%;
                         .use-var(border-radius, steps-tail-border-radius);
                     }
@@ -99,7 +117,7 @@
                 &-align-center {
                     &::before,
                     &::after {
-                        content: "";
+                        content: '';
                         height: 50%;
                     }
                     &::before {
@@ -127,6 +145,20 @@
             &-align-center&-status-error::before {
                 .use-var(background, steps-tail-finish-background);
             }
+
+            &-status-finish::before,
+            &-status-process::after,
+            &-align-center&-status-error::after {
+                .reverse-order & {
+                    .use-var(background, steps-tail-finish-background);
+                }
+            }
+            &-status-process::before,
+            &-align-center&-status-error::before {
+                .reverse-order & {
+                    .use-var(background, steps-tail-standard-background);
+                }
+            }
         }
 
         &-custom-icon,
@@ -206,7 +238,6 @@
         }
 
         &-content {
-
             .horizontal & {
                 .use-var(margin-top, steps-horizontal-content-margin-top);
                 &-align-center {
@@ -262,6 +293,10 @@
     }
 
     &.vertical {
+        &.reverse-order {
+            flex-direction: column-reverse;
+        }
+
         flex-direction: column;
         .use-var(padding-bottom, steps-vertical-padding-bottom);
         .use-var-with-rtl(padding-left, steps-vertical-padding-left);
@@ -307,6 +342,23 @@
             .use-var(background, dark-steps-tail-finish-background);
           }
         }
+        &-status-finish::before,
+        &-status-process::after,
+        &-align-center&-status-error::after {
+          .reverse-order & {
+            @{arco-dark-mode-selector} & {
+              .use-var(background, dark-steps-tail-finish-background);
+            }
+          }
+        }
+        &-status-process::before,
+        &-align-center&-status-error::before {
+          .reverse-order & {
+            @{arco-dark-mode-selector} & {
+              .use-var(background, dark-steps-tail-standard-background);
+            }
+          }
+        }
       }
       &-icon {
         .number.finish & {

package/esm/steps/type.d.ts

@@ -32,6 +32,11 @@ export interface StepsProps {
      * @en Custom classname
      */
     className?: string;
+    /**
+     *  顺序反转，设置为true后，顺序将从右到左，从下到上
+     * @en reverse the order from right to left and from bottom to top
+     */
+    reverseOrder?: boolean;
     /**
      * 自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '.set-steps-color(@color)'
      * @en Custom stylesheet. If want to use CSS to control icon color, use public mixin '.set-steps-color(@color)'

package/esnext/_helpers/hooks.js

@@ -60,8 +60,12 @@ export function useMountedState(initialState) {
         }
         setState(value);
     }, []);
-    useEffect(() => () => {
-        leavingRef.current = true;
+    useEffect(() => {
+        // see: https://github.com/arco-design/arco-design-mobile/pull/292
+        leavingRef.current = false;
+        return () => {
+            leavingRef.current = true;
+        };
     }, []);
     const result = [state, setValidState];
     return result;

package/esnext/avatar/index.js

@@ -9,7 +9,7 @@ export function componentGenerator(Comp) {
     return forwardRef((props, ref) => {
         const { prefixCls } = useContext(GlobalContext);
         const { shape: groupShape, size: groupSize, isGroup } = useContext(AvatarGroupContext);
-        const { shape = props.shape || (isGroup ? groupShape : 'circle'), size = props.size || (isGroup ? groupSize : 'small'), src, decoration = null, textAvatar = '', avatarStyle = {}, autoFixFontSize = true, autoFixFontOffset = 2, avatarName = '', avatarDesc = '', children = null, renderInfo = null, className = '', style = {}, imageProps = {}, defaultOverLap, onClickDecoration, onClick, } = props;
+        const { shape = props.shape || (isGroup ? groupShape : 'circle'), size = props.size || (isGroup ? groupSize : 'small'), src, decoration = null, textAvatar = '', avatarStyle = {}, avatarClass = '', autoFixFontSize = true, autoFixFontOffset = 2, avatarName = '', avatarDesc = '', children = null, renderInfo = null, className = '', style = {}, imageProps = {}, defaultOverLap, onClickDecoration, onClick, } = props;
         const domRef = useRef(null);
         const avatarRef = useRef(null);
         const avatarTextRef = useRef(null);
@@ -51,7 +51,7 @@ export function componentGenerator(Comp) {
         return (React.createElement("div", { ref: domRef, style: style, className: cls(`${prefixCls}-avatar-wrapper`, className, size, shape, `${prefixCls}-avatar-wrapper-shape-${shape}`, {
                 [`${prefixCls}-avatar-wrapper-with-info ${prefixCls}-avatar-wrapper-with-info-size-${size} with-info`]: Boolean(avatarName),
             }), onClick: onClick },
-            React.createElement("div", { className: cls(`${prefixCls}-avatar`, `${prefixCls}-avatar-size-${size}`, size, `${prefixCls}-avatar-shape-${shape}`, shape, {
+            React.createElement("div", { className: cls(`${prefixCls}-avatar`, avatarClass, `${prefixCls}-avatar-size-${size}`, size, `${prefixCls}-avatar-shape-${shape}`, shape, {
                     [`${prefixCls}-text-avatar ${prefixCls}-avatar-mode-text`]: isTextAvatar,
                     [`${prefixCls}-image-avatar ${prefixCls}-avatar-mode-image`]: isImageAvatar,
                     [`${prefixCls}-avatar-default-overlap default-overlap`]: useDefaultAvatar,

package/esnext/avatar/type.d.ts

@@ -42,6 +42,12 @@ export interface AvatarProps<T extends ImageProps = ImageProps> extends BaseProp
      * @default {}
      */
     avatarStyle?: React.CSSProperties;
+    /**
+     * 头像元素的自定义类名
+     * @en Custom classname for avatar element
+     * @default ""
+     */
+    avatarClass?: string;
     /**
      * 是否自动根据头像尺寸调整字体大小
      * @en Whether to automatically adjust the font size according to the avatar size

package/esnext/carousel/index.js

@@ -94,6 +94,11 @@ const Carousel = forwardRef((props, ref) => {
         if (posAdjustingRef.current) {
             return;
         }
+        // touchMove触发时，阻止handleTouchStart多次执行（如点击事件）
+        // @en When touchMove is triggered, prevent handleTouchStart from executing multiple times (such as click events)
+        if (touchStartedRef.current && touchMovedRef.current) {
+            return;
+        }
         touchStartedRef.current = true;
         touchMovedRef.current = false;
         clear();
@@ -507,14 +512,18 @@ const Carousel = forwardRef((props, ref) => {
             jumpTo(index, false);
             return;
         }
-        if (!touchStartedRef.current ||
-            !touchMovedRef.current ||
-            posAdjustingRef.current ||
-            touchStoppedRef.current) {
+        if (!touchStartedRef.current) {
             return;
         }
         touchStartedRef.current = false;
+        if (!touchMovedRef.current) {
+            setPlayIntervalRef.current();
+            return;
+        }
         touchMovedRef.current = false;
+        if (posAdjustingRef.current || touchStoppedRef.current) {
+            return;
+        }
         const touchEndTime = new Date().getTime();
         const dis = Math.abs(distance);
         const speed = (dis / (touchEndTime - touchStartTimeRef.current)) * 1000;

package/esnext/divider/style/css/index.css

@@ -542,10 +542,12 @@
 .arco-divider::before {
   content: '';
 }
-.arco-divider--hairline::before,
-.arco-divider--hairline::after {
-  -webkit-transform: scaleY(0.5);
-          transform: scaleY(0.5);
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-divider--hairline::before,
+  .arco-divider--hairline::after {
+    -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+  }
 }
 @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
   .arco-divider--hairline::before,

package/esnext/divider/style/index.less

@@ -27,7 +27,9 @@
     &--hairline {
         &::before,
         &::after {
-            transform: scaleY(0.5);
+            @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+                transform: scaleY(0.5);
+            }
 
             @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
                 transform: scaleY(0.33333333);

package/esnext/notice-bar/index.js

@@ -1,4 +1,4 @@
-import { cls, removeElement, fadeColor, nextTick } from '@arco-design/mobile-utils';
+import { cls, fadeColor, nextTick } from '@arco-design/mobile-utils';
 import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useMemo, useContext, } from 'react';
 import { ContextLayout, GlobalContext } from '../context-provider';
 import IconClose from '../icon/IconClose';
@@ -17,6 +17,7 @@ const NoticeBar = forwardRef((props, ref) => {
     const wrapRef = useRef(null);
     const contentRef = useRef(null);
     const timerRef = useRef(null);
+    const [visible, setVisible] = useState(true);
     const [needMarquee, setNeedMarquee] = useState(false);
     const extraClass = useMemo(() => {
         const classList = [];
@@ -53,9 +54,8 @@ const NoticeBar = forwardRef((props, ref) => {
         updateData();
     }, [useRtl]);
     function close() {
-        if (domRef.current) {
-            removeElement(domRef.current);
-        }
+        setVisible(false);
+        clear();
     }
     function handleClose(e) {
         e.stopPropagation();
@@ -112,14 +112,14 @@ const NoticeBar = forwardRef((props, ref) => {
         }
     }
     function renderNoticeBar(prefix) {
-        return (React.createElement("div", { className: cls(prefix, className, extraClass), style: style, ref: domRef, onClick: onClick },
+        return visible ? (React.createElement("div", { className: cls(prefix, className, extraClass), style: style, ref: domRef, onClick: onClick },
             leftContent ? React.createElement("div", { className: `${prefix}-left-part` }, leftContent) : null,
             React.createElement("div", { className: `${prefix}-content`, ref: wrapRef },
                 needMarquee ? (React.createElement("i", { className: `${prefix}-gradient left`, style: gradientStyle })) : null,
                 React.createElement("div", { className: cls(`${prefix}-content-inner`, { animate: needMarquee }), ref: contentRef }, children),
                 needMarquee ? (React.createElement("i", { className: `${prefix}-gradient right`, style: gradientStyle })) : null),
             rightContent ? React.createElement("div", { className: `${prefix}-right-part` }, rightContent) : null,
-            closeable ? (React.createElement("div", { className: `${prefix}-close`, onClick: handleClose }, closeIcon)) : null));
+            closeable ? (React.createElement("div", { className: `${prefix}-close`, onClick: handleClose }, closeIcon)) : null)) : null;
     }
     return (React.createElement(ContextLayout, null, ({ prefixCls }) => renderNoticeBar(`${prefixCls}-notice-bar`)));
 });

package/esnext/popover/popover-inner.js

@@ -18,7 +18,13 @@ export const PopoverInner = forwardRef((props, ref) => {
         if (left || width || top || height || bottom) {
             if (!show) {
                 setTimeout(() => {
-                    setShow(true);
+                    setShow(() => {
+                        // bugfix:
+                        // 外层CSSTransition使用dom API而非通过react className属性修改class
+                        // 如果内部通过react className属性动态修改class会覆盖CSSTransition的设置，导致CSSTransition enter相关的class无法应用到组件
+                        domRef.current?.classList.add('show');
+                        return true;
+                    });
                 }, 0);
             }
         }
@@ -60,7 +66,6 @@ export const PopoverInner = forwardRef((props, ref) => {
         };
     };
     return (React.createElement("div", { ref: domRef, className: cls(`${prefixCls}-popover-inner`, 'popover-inner', 'all-border-box', `${mode}-mode`, className, {
-            show,
             'with-shadow': needShadow,
             'with-suffix': showCloseIcon || textSuffix,
             'custom-content': typeof content !== 'string',

package/esnext/steps/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StepsProps, StepsRef } from './type';
 export * from './type';
-export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "align" | "iconType" | "current"> & {
+export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "align" | "iconType" | "current" | "reverseOrder"> & {
     index?: number | undefined;
     changeIndex: (newIndex: number) => void;
 }>;