@arco-design/mobile-react 2.36.2 → 2.38.0

package/esm/tabs/type.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode, ReactNodeArray } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export declare type TabData = string | {
     title: ReactNode;
     [x: string]: any;
@@ -533,6 +533,11 @@ export interface TabCellProps extends Pick<TabsProps, 'tabs' | 'type' | 'onTabCl
      * @en Does the touch event of the current TabBar require stopPropagation
      */
     tabBarStopPropagation: boolean;
+    /**
+     * underline 首次展示时的回调
+     * @en Callback when underline is first shown
+     */
+    onUnderlineFirstShow?: () => void;
 }
 export interface TabCellRef {
     /**
@@ -573,7 +578,7 @@ export interface TabCellRef {
 }
 export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll' | 'swipeEnergySaving'> {
     prefixCls?: string;
-    panes: ReactNodeArray;
+    panes: ReactNode[];
     activeIndex: number;
     activeIndexRef: React.MutableRefObject<number>;
     tabDirection: 'horizontal' | 'vertical';

package/esm/tag/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/esm/textarea/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/esm/toast/index.d.ts

@@ -185,8 +185,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -196,8 +196,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -207,8 +207,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -218,8 +218,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -229,8 +229,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -240,8 +240,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };

package/esm/toast/index.js

@@ -37,7 +37,7 @@ var Toast = /*#__PURE__*/forwardRef(function (props, ref) {
       direction = _props$direction === void 0 ? 'center' : _props$direction,
       typeIconMap = props.typeIconMap,
       initialBodyOverflow = props.initialBodyOverflow;
-  var closeTimerRef = useRef();
+  var closeTimerRef = useRef(undefined);
   var domRef = useRef(null);
   var wrapDomRef = useRef(null);
   var isInitialMount = useRef(false);

package/esm/toast/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/esm/transition/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { ReactNode } from 'react';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 export declare type TransitionProps = Omit<CSSTransitionProps, 'timeout'> & {
     /**
      * 待执行动画内容
      * @en Animation content to be executed
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * 待执行动画css类名
      * @en Css classname of the animation to be executed
@@ -37,6 +37,12 @@ export declare type TransitionProps = Omit<CSSTransitionProps, 'timeout'> & {
      * @default true
      */
     unmountOnExit?: boolean;
+    /**
+     * 动画时长变量标识
+     * @en Animation duration variable identifier
+     * @default type 属性值
+     */
+    transitionVarType?: string;
 };
 /**
  * react-transition-group/CSSTransition 的简单封装。

package/esm/transition/index.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit"];
-import React from 'react';
+var _excluded = ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit", "transitionVarType"];
+import React, { cloneElement, useMemo } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { ContextLayout } from '../context-provider';
-
+var DEFAULT_TIMEOUT = 300;
 /**
  * react-transition-group/CSSTransition 的简单封装。
  * @en Simple wrapper for react-transition-group/CSSTransition.
@@ -13,27 +13,52 @@ import { ContextLayout } from '../context-provider';
  * @name 动画过渡
  * @name_en Transition
  */
+
 export default function Transition(props) {
   var _props$children = props.children,
       children = _props$children === void 0 ? /*#__PURE__*/React.createElement("div", null) : _props$children,
       type = props.type,
       transIn = props.in,
       _props$timeout = props.timeout,
-      timeout = _props$timeout === void 0 ? 300 : _props$timeout,
+      timeout = _props$timeout === void 0 ? DEFAULT_TIMEOUT : _props$timeout,
       _props$mountOnEnter = props.mountOnEnter,
       mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
       _props$unmountOnExit = props.unmountOnExit,
       unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
+      transitionVarType = props.transitionVarType,
       restProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
-    var prefixCls = _ref.prefixCls;
+  var varPrefix = "builtin-transition-" + (transitionVarType || type); // 计算动画时长，支持对象形式的 timeout
+
+  var getDuration = function getDuration(phase) {
+    if (typeof timeout === 'number') {
+      return timeout;
+    }
+
+    return timeout[phase] || DEFAULT_TIMEOUT;
+  }; // 生成 CSS 变量样式
+
+
+  var cssVariables = useMemo(function () {
+    var _ref;
+
+    var enterDuration = getDuration('enter');
+    var exitDuration = getDuration('exit');
+    var appearDuration = getDuration('appear');
+    return _ref = {}, _ref["--" + varPrefix + "-enter-duration"] = enterDuration + "ms", _ref["--" + varPrefix + "-exit-duration"] = exitDuration + "ms", _ref["--" + varPrefix + "-appear-duration"] = appearDuration + "ms", _ref;
+  }, [timeout, varPrefix]);
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref2) {
+    var _props;
+
+    var prefixCls = _ref2.prefixCls;
     return /*#__PURE__*/React.createElement(CSSTransition, _extends({
       in: transIn,
       timeout: timeout,
       classNames: prefixCls + "-" + type,
       mountOnEnter: mountOnEnter,
       unmountOnExit: unmountOnExit
-    }, restProps), children);
+    }, restProps), /*#__PURE__*/cloneElement(children, {
+      style: _extends({}, cssVariables, children == null ? void 0 : (_props = children.props) == null ? void 0 : _props.style)
+    }));
   });
 }

package/esm/transition/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
@@ -517,8 +535,8 @@
   opacity: 1;
   -webkit-transition-property: opacity;
   transition-property: opacity;
-  -webkit-transition-duration:  300ms ;
-          transition-duration:  300ms ;
+  -webkit-transition-duration: var(--builtin-transition-fade-enter-duration,  300ms );
+          transition-duration: var(--builtin-transition-fade-enter-duration,  300ms );
 }
 .arco-fade-exit {
   opacity: 1;
@@ -527,8 +545,8 @@
   opacity: 0;
   -webkit-transition-property: opacity;
   transition-property: opacity;
-  -webkit-transition-duration:  300ms ;
-          transition-duration:  300ms ;
+  -webkit-transition-duration: var(--builtin-transition-fade-exit-duration,  300ms );
+          transition-duration: var(--builtin-transition-fade-exit-duration,  300ms );
 }
 .arco-fade-exit-done {
   display: none;

package/esm/transition/style/index.less

@@ -9,7 +9,7 @@
     &-enter-active {
         opacity: 1;
         transition-property: opacity;
-        .use-var(transition-duration, transition-fade-duration);
+        .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
     }
 
     &-exit {
@@ -19,7 +19,7 @@
     &-exit-active {
         opacity: 0;
         transition-property: opacity;
-        .use-var(transition-duration, transition-fade-duration);
+        .use-transition-var(builtin-transition-fade-exit-duration, transition-fade-duration);
     }
 
     &-exit-done {

package/esm/uploader/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/esnext/_helpers/hooks.js

@@ -626,7 +626,7 @@ export function useProgress(mountedTransition, percentage, duration, mountedBezi
  */
 export function useSingleAndDoubleClick(onClick, onDoubleClick, delay = 200) {
     const [clickTimes, setClickTimes] = useState(0);
-    const eventRef = useRef();
+    const eventRef = useRef(undefined);
     useEffect(() => {
         const timer = setTimeout(() => {
             if (clickTimes === 1)

package/esnext/_helpers/react-dom.d.ts

@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
 export interface RootType {
-    render: (container: ReactElement) => void;
+    render: (element: ReactElement) => void;
     _unmount: () => void;
 }
 export interface RootTypeReact extends RootType {
     unmount?: () => void;
 }
-export declare type CreateRootFnType = (container: Element | DocumentFragment) => RootTypeReact;
-export declare const render: (app: ReactElement, container: Element | DocumentFragment) => {
-    render: (container: ReactElement) => void;
-    _unmount: () => void;
+export declare type CreateRootFnType = (container: Element | DocumentFragment) => {
+    render: (element: ReactElement) => void;
+    unmount?: () => void;
 };
+export declare const render: (app: ReactElement, container: Element | DocumentFragment, createRootFunction?: CreateRootFnType | undefined) => RootType;

package/esnext/_helpers/react-dom.js

@@ -2,50 +2,69 @@ import * as ReactDOM from 'react-dom';
 function isObject(obj) {
     return Object.prototype.toString.call(obj) === '[object Object]';
 }
-const CopyReactDOM = {
-    ...ReactDOM,
-};
+// Cast ReactDOM to a version that might have createRoot and other properties
+const typedReactDOM = ReactDOM;
 let copyRender;
-const { version, render: reactRender, unmountComponentAtNode } = CopyReactDOM;
-const isReact18 = Number((version || '').split('.')[0]) > 17;
 const updateUsingClientEntryPoint = (skipWarning) => {
     // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
     // Avoid console warning
-    const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = CopyReactDOM;
-    if (isObject(__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)) {
-        __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = skipWarning;
+    const secretInternals = typedReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    if (isObject(secretInternals)) {
+        secretInternals.usingClientEntryPoint = skipWarning;
     }
 };
-let createRoot;
-try {
-    ({ createRoot } = CopyReactDOM);
-}
-catch (_) { }
-if (isReact18 && createRoot) {
-    copyRender = (app, container) => {
-        updateUsingClientEntryPoint(true);
-        const root = createRoot(container);
-        updateUsingClientEntryPoint(false);
-        root.render(app);
-        root._unmount = function () {
+const createRootFn = typedReactDOM.createRoot;
+const getRender = (createRootFunction) => (app, container) => {
+    updateUsingClientEntryPoint(true);
+    const root = createRootFunction(container);
+    updateUsingClientEntryPoint(false);
+    root.render(app);
+    return {
+        render: (elementToRender) => {
+            root.render(elementToRender);
+        },
+        _unmount() {
             setTimeout(() => {
-                root?.unmount?.();
+                if (root && typeof root.unmount === 'function') {
+                    root.unmount();
+                }
             });
-        };
-        return root;
+        },
     };
+};
+if (createRootFn) {
+    // React 18
+    copyRender = getRender(createRootFn);
 }
-else {
+else if (typeof typedReactDOM.render === 'function' &&
+    typeof typedReactDOM.unmountComponentAtNode === 'function') {
+    // React 16/17
     copyRender = function (app, container) {
-        reactRender(app, container);
+        typedReactDOM.render(app, container); // Use non-null assertion
         return {
-            render: (comment) => {
-                reactRender(comment, container);
+            render: (elementToRender) => {
+                typedReactDOM.render(elementToRender, container); // Use non-null assertion
             },
             _unmount() {
-                unmountComponentAtNode(container);
+                typedReactDOM.unmountComponentAtNode(container); // Use non-null assertion
             },
         };
     };
 }
+else {
+    copyRender = (app, container, createRootFunction) => {
+        const defaultCb = () => {
+            // Fallback if no rendering method is found
+            console.error('ArcoDesign: ReactDOM.createRoot() or ReactDOM.render() not found. ' +
+                'This usually means you are using an unsupported version of React, ' +
+                'or ReactDOM is not properly initialized. ' +
+                'ArcoDesign Mobile React requires React 16, 17, 18, or 19.');
+            return { render: (_element) => { }, _unmount: () => { } };
+        };
+        if (createRootFunction) {
+            return getRender(createRootFunction)(app, container);
+        }
+        return defaultCb();
+    };
+}
 export const render = copyRender;

package/esnext/_helpers/render.js

@@ -6,12 +6,13 @@ export class ReactDOMRender {
     root) {
         this.render = props => {
             const CustomApp = this.app;
-            const propsWithContext = { ...props, context: this.context };
+            const propsWithContext = { context: this.context, ...props };
             if (this.root) {
                 this.root.render(React.createElement(CustomApp, Object.assign({}, propsWithContext)));
             }
             else {
-                this.root = copyRender(React.createElement(CustomApp, Object.assign({}, propsWithContext)), this.container);
+                const { createRoot } = this.context || {};
+                this.root = copyRender(React.createElement(CustomApp, Object.assign({}, propsWithContext)), this.container, createRoot);
             }
         };
         this.setRootCache = () => {

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

@@ -1,4 +1,5 @@
 import React, { ReactNode, CSSProperties } from 'react';
+import { Promise } from 'es6-promise';
 import { PopupProps } from '../popup';
 import { OpenBaseProps } from '../masking';
 export interface ActionSheetItemOptions {
@@ -86,11 +87,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" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "className" | "context" | "translateZ" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "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" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "className" | "context" | "translateZ" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
             key?: string | undefined;
         }) => void;
     };

package/esnext/action-sheet/index.js

@@ -24,7 +24,7 @@ const ActionSheet = forwardRef((props, ref) => {
         title || subTitle ? (React.createElement("div", { className: `${prefixCls}-action-sheet-header` },
             title ? (React.createElement("div", { className: `${prefixCls}-action-sheet-title` }, title)) : null,
             subTitle ? (React.createElement("div", { className: `${prefixCls}-action-sheet-sub-title` }, subTitle)) : null)) : null,
-        React.createElement("div", { className: `${prefixCls}-action-sheet-list` }, (items || []).map((item, index) => (React.createElement("div", { className: cls(`${prefixCls}-action-sheet-item`, item.className, item.status || 'normal'), key: index, style: item.style, onClick: e => handleItemClick(e, item) }, item.content)))),
+        React.createElement("div", { className: `${prefixCls}-action-sheet-list` }, (items || []).map((item, index) => item.content ? (React.createElement("div", { className: cls(`${prefixCls}-action-sheet-item`, item.className, item.status || 'normal'), key: index, style: item.style, onClick: e => handleItemClick(e, item) }, item.content)) : null)),
         cancelText ? (React.createElement("div", { className: `${prefixCls}-action-sheet-item cancel-item`, onClick: e => {
                 e.stopPropagation();
                 close?.(e);

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

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/esnext/avatar/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode