@arco-design/mobile-react 2.36.2 → 2.38.0

package/esnext/picker-view/index.js

@@ -117,7 +117,11 @@ const PickerView = forwardRef((props, ref) => {
         ...itemStyle,
     };
     return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: `${prefixCls}-picker-view all-border-box ${className}`, style: { height: `${itemHeight * rows}px` }, ref: wrapperRef },
-        cascade ? (React.createElement(Cascader, { prefixCls: prefixCls || '', cols: cols, itemStyle: newItemStyle, data: data, selectedValue: scrollValue, onValueChange: _onValueChange, clickable: clickable, itemHeight: itemHeight, wrapperHeight: wrapperHeight, disabled: disabled, rows: rows, hideEmptyCols: hideEmptyCols, ref: cascaderRef, touchToStop: touchToStop })) : (React.createElement(MultiPicker, { prefixCls: `${prefixCls}-picker`, data: innerData, itemHeight: itemHeight, selectedValue: scrollValue, onValueChange: _onValueChange }, innerData.map((item, index) => (React.createElement(PickerCell, { key: `${index}_picker_cell_normal`, data: item, style: newItemStyle, prefixCls: `${prefixCls}-picker`, clickable: clickable, itemHeight: itemHeight, wrapperHeight: wrapperHeight, disabled: disabled, rows: rows, hideEmptyCols: hideEmptyCols, ref: cellRef => cellRef && (pickerCellsRef.current[index] = cellRef), touchToStop: touchToStop }))))),
+        cascade ? (React.createElement(Cascader, { prefixCls: prefixCls || '', cols: cols, itemStyle: newItemStyle, data: data, selectedValue: scrollValue, onValueChange: _onValueChange, clickable: clickable, itemHeight: itemHeight, wrapperHeight: wrapperHeight, disabled: disabled, rows: rows, hideEmptyCols: hideEmptyCols, ref: cascaderRef, touchToStop: touchToStop })) : (React.createElement(MultiPicker, { prefixCls: `${prefixCls}-picker`, data: innerData, itemHeight: itemHeight, selectedValue: scrollValue, onValueChange: _onValueChange }, innerData.map((item, index) => (React.createElement(PickerCell, { key: `${index}_picker_cell_normal`, data: item, style: newItemStyle, prefixCls: `${prefixCls}-picker`, clickable: clickable, itemHeight: itemHeight, wrapperHeight: wrapperHeight, disabled: disabled, rows: rows, hideEmptyCols: hideEmptyCols, ref: cellRef => {
+                if (cellRef) {
+                    pickerCellsRef.current[index] = cellRef;
+                }
+            }, touchToStop: touchToStop }))))),
         React.createElement("div", { className: `${prefixCls}-picker-selection` },
             React.createElement("div", { className: `${prefixCls}-picker-selection-mask ${prefixCls}-picker-selection-mask-top` }),
             React.createElement("div", { ref: barRef, className: `${prefixCls}-picker-selection-bar`, style: selectionBarHeight }),

package/esnext/picker-view/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/popover/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/popover/style/css/menu.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/popup/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MaskingCommonProps, MaskingRef, OpenBaseProps } from '../masking';
+import type { MaskingCommonProps, MaskingRef, OpenBaseProps } from '../masking';
 export * from './methods';
 export declare type DirectionType = 'left' | 'right' | 'top' | 'bottom';
 export interface PopupProps extends MaskingCommonProps {
@@ -66,11 +66,11 @@ declare const _default: React.ForwardRefExoticComponent<PopupProps & React.RefAt
      * @param {PopupProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: PopupProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "className" | "context" | "translateZ" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "className" | "context" | "translateZ" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset"> & {
             key?: string | undefined;
         }) => void;
     };

package/esnext/popup/index.js

@@ -10,7 +10,7 @@ const Popup = forwardRef((props, ref) => {
     useImperativeHandle(ref, () => maskingRef.current);
     function renderPopup({ prefixCls }) {
         const prefix = `${prefixCls}-popup`;
-        return (React.createElement(Masking, Object.assign({ className: cls(prefix, className), ref: maskingRef, maskClass: cls(`${prefix}-mask`, { translateZ }, maskClass), contentTransitionType: contentTransitionType || `slide-from-${direction}`, contentClass: cls(`${prefix}-content`, direction, {
+        return (React.createElement(Masking, Object.assign({ className: cls(prefix, className), ref: maskingRef, maskClass: cls(`${prefix}-mask`, { translateZ }, maskClass), contentTransitionType: contentTransitionType || `slide-from-${direction}`, contentTransitionVarType: "popup-slide", contentClass: cls(`${prefix}-content`, direction, {
                 'need-bottom-offset': needBottomOffset,
             }, { translateZ }, contentClass), maskTransitionTimeout: maskTransitionTimeout, contentTransitionTimeout: contentTransitionTimeout }, restProps), children));
     }

package/esnext/popup/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
@@ -579,7 +597,16 @@
   position: fixed;
   z-index: 1001;
 }
+.arco-popup-content[class*="-enter-active"] {
+  -webkit-transition-duration: var(--builtin-transition-popup-slide-enter-duration, 450ms);
+          transition-duration: var(--builtin-transition-popup-slide-enter-duration, 450ms);
+}
+.arco-popup-content[class*="-exit-active"] {
+  -webkit-transition-duration: var(--builtin-transition-popup-slide-exit-duration, 240ms);
+          transition-duration: var(--builtin-transition-popup-slide-exit-duration, 240ms);
+}
 .arco-popup-content.need-bottom-offset {
+  padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
 .arco-popup-content.left {
@@ -615,6 +642,14 @@
   z-index: 1000;
   background:  rgba(0, 0, 0, 0.6) ;
 }
+.arco-popup-mask[class*="-enter-active"] {
+  -webkit-transition-duration: var(--builtin-transition-fade-enter-duration, 450ms);
+          transition-duration: var(--builtin-transition-fade-enter-duration, 450ms);
+}
+.arco-popup-mask[class*="-exit-active"] {
+  -webkit-transition-duration: var(--builtin-transition-fade-exit-duration, 240ms);
+          transition-duration: var(--builtin-transition-fade-exit-duration, 240ms);
+}
 .arco-popup-mask.translateZ {
   -webkit-transform: translateZ(1PX);
           transform: translateZ(1PX);

package/esnext/popup/style/index.less

@@ -1,8 +1,12 @@
 @import '../../../style/mixin.less';
 
 .set-popup-transform(@transform) {
-    &-enter, &-exit-active, &-exit-done {
+
+    &-enter,
+    &-exit-active,
+    &-exit-done {
         transform: @transform;
+
         &.translateZ {
             transform: @transform translateZ(2PX);
         }
@@ -14,63 +18,92 @@
         &-left {
             .set-popup-transform(translate(-100%, 0));
         }
+
         &-right {
             .set-popup-transform(translate(100%, 0));
         }
+
         &-top {
             .set-popup-transform(translate(0, -100%));
         }
+
         &-bottom {
             .set-popup-transform(translate(0, 100%));
         }
     }
-    &-content, &-mask {
+
+    &-content,
+    &-mask {
         &[class*="-enter-active"] {
             &.translateZ {
                 transform: translateZ(2PX);
             }
+
             transform: translate(0, 0);
             .use-var(transition, popup-enter-transition);
         }
     }
+
     [class*="-exit-active"] {
         .use-var(transition, popup-exit-transition);
     }
+
     &-content {
+        &[class*="-enter-active"] {
+            transition-duration: var(--builtin-transition-popup-slide-enter-duration, 450ms);
+        }
+        &[class*="-exit-active"] {
+            transition-duration: var(--builtin-transition-popup-slide-exit-duration, 240ms);
+        }
         &.need-bottom-offset {
+            padding-bottom: constant(safe-area-inset-bottom);
             padding-bottom: env(safe-area-inset-bottom);
         }
+
         &.left {
             left: 0;
             top: 0;
             height: 100%;
         }
+
         &.top {
             left: 0;
             top: 0;
             width: 100%;
         }
+
         &.right {
             right: 0;
             top: 0;
             height: 100%;
         }
+
         &.bottom {
             left: 0;
             bottom: 0;
             width: 100%;
         }
+
         &.translateZ {
             transform: translateZ(2PX);
         }
+
         .use-var(background, popup-content-background);
         position: fixed;
-        z-index: @full-screen-z-index + 1;
+        z-index: @full-screen-z-index+1;
     }
+
     &-mask {
+        &[class*="-enter-active"] {
+            transition-duration: var(--builtin-transition-fade-enter-duration, 450ms);
+        }
+        &[class*="-exit-active"] {
+            transition-duration: var(--builtin-transition-fade-exit-duration, 240ms);
+        }
         &.translateZ {
             transform: translateZ(1PX);
         }
+
         position: fixed;
         width: 100%;
         height: 100%;

package/esnext/popup-swiper/index.d.ts

@@ -73,11 +73,11 @@ declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React
      * @param {string | PopupSwiperProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: PopupSwiperProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "className" | "context" | "translateZ" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "className" | "context" | "translateZ" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
             key?: string | undefined;
         }) => void;
     };

package/esnext/popup-swiper/index.js

@@ -5,7 +5,7 @@ import Popup from '../popup';
 import { open } from './methods';
 import { getStyleWithVendor, useRefState } from '../_helpers';
 const PopupSwiper = forwardRef((props, ref) => {
-    const { className = '', visible, children, maskStyle, contentStyle, direction = 'bottom', percentToClose = 0.3, distanceToClose = 10, speedToClose = 200, allowSwipeDirections, exitDirection, onTouchMove, onTouchStart, onTouchEnd, onOpen, onClose, close, ...otherProps } = props;
+    const { className = '', visible, children, maskStyle, contentStyle, direction = 'bottom', percentToClose = 0.3, distanceToClose = 10, speedToClose = 200, allowSwipeDirections, exitDirection, onTouchMove, onTouchStart, onTouchEnd, onOpen, onClose, close, maskTransitionTimeout = { enter: 450, exit: 240 }, contentTransitionTimeout = { enter: 450, exit: 240 }, ...otherProps } = props;
     const [opened, setOpened] = useState(visible);
     const [distance, distanceRef, setDistance] = useRefState({
         direction: 'X',
@@ -121,6 +121,11 @@ const PopupSwiper = forwardRef((props, ref) => {
                 direction: 'X',
                 value: 0,
             });
+            // 动画完成后需重置
+            // @en Reset after animation is complete
+            setTimeout(() => {
+                setHasTrans(false);
+            }, Math.max(typeof maskTransitionTimeout === 'number' ? maskTransitionTimeout : maskTransitionTimeout?.exit || 0, typeof contentTransitionTimeout === 'number' ? contentTransitionTimeout : contentTransitionTimeout?.exit || 0, 240));
         }
         touchStartTimeRef.current = 0;
     }, [onTouchEnd, percentToClose, distanceToClose, speedToClose, close]);
@@ -167,7 +172,7 @@ const PopupSwiper = forwardRef((props, ref) => {
         }, maskStyle: {
             ...(maskStyle || {}),
             opacity: percent ? 1 - percent : void 0,
-        }, contentStyle: getContentStyle() }, otherProps), children))));
+        }, contentStyle: getContentStyle(), maskTransitionTimeout: maskTransitionTimeout, contentTransitionTimeout: contentTransitionTimeout }, otherProps), children))));
 });
 export function methodsGenerator(Comp) {
     return {

package/esnext/popup-swiper/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/progress/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/pull-refresh/hooks.d.ts

@@ -17,14 +17,14 @@ export declare const useCommonState: ({ onRefresh, loosingMinHeight, }: {
     tipsHeight: number;
 };
 export declare const useAddScrollEvents: ({ domRef, handleTouchStart, handleTouchMove, handleTouchEnd, }: {
-    domRef: RefObject<HTMLDivElement>;
+    domRef: RefObject<HTMLDivElement | null>;
     handleTouchStart: (evt: HTMLElementEventMap['touchstart']) => void;
     handleTouchMove: (evt: HTMLElementEventMap['touchmove']) => void;
     handleTouchEnd: (evt: HTMLElementEventMap['touchend']) => void;
 }) => void;
 export declare const useCheckAsStart: ({ allowPullWhenNotTop, domRef, }: {
     allowPullWhenNotTop: boolean;
-    domRef: RefObject<HTMLDivElement>;
+    domRef: RefObject<HTMLDivElement | null>;
 }) => {
     ifShouldHandle: () => boolean | null;
 };

package/esnext/pull-refresh/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/radio/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/rate/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/search-bar/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/skeleton/elements.js

@@ -80,7 +80,11 @@ export const SkeletonParagraph = forwardRef((props, ref) => {
     return (React.createElement("div", { className: cls(`${prefixCls}-skeleton-paragraph`, className), style: style, ref: domRef }, Array.from(new Array(rows)).map((_, idx) => (React.createElement("div", { key: idx, className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-paragraph-line`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`), style: {
             width: getWidth(idx),
             backgroundColor,
-        }, ref: el => el && (lineDomRefs.current[idx] = el) }, isGradientAnimation && offsets !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: { left: 0 - (offsets[idx] || 0) } })))))));
+        }, ref: el => {
+            if (el) {
+                lineDomRefs.current[idx] = el;
+            }
+        } }, isGradientAnimation && offsets !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: { left: 0 - (offsets[idx] || 0) } })))))));
 });
 export const SkeletonAvatar = forwardRef((props, ref) => {
     const { className = '', style } = props;
@@ -108,10 +112,18 @@ export const SkeletonGrid = forwardRef((props, ref) => {
         dom: domRef.current,
     }));
     return (React.createElement("div", { className: cls(`${prefixCls}-skeleton-grid`, className), style: style, ref: domRef }, Array.from(new Array(columns)).map((_, idx) => (React.createElement("div", { key: idx, className: cls(`${prefixCls}-skeleton-grid-item`) },
-        React.createElement("div", { className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-grid-icon`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`), style: { backgroundColor }, ref: el => el && (iconDomRefs.current[idx] = el) }, isGradientAnimation && iconOffsets !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: {
+        React.createElement("div", { className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-grid-icon`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`), style: { backgroundColor }, ref: el => {
+                if (el) {
+                    iconDomRefs.current[idx] = el;
+                }
+            } }, isGradientAnimation && iconOffsets !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: {
                 left: 0 - (iconOffsets?.[idx] || 0),
             } }))),
-        React.createElement("div", { className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-grid-text`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`), style: { backgroundColor }, ref: el => el && (textDomRefs.current[idx] = el) }, isGradientAnimation && textOffsets !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: {
+        React.createElement("div", { className: cls(`${prefixCls}-skeleton-item`, `${prefixCls}-skeleton-grid-text`, showAnimation && `${prefixCls}-skeleton-animation-${animation}`), style: { backgroundColor }, ref: el => {
+                if (el) {
+                    textDomRefs.current[idx] = el;
+                }
+            } }, isGradientAnimation && textOffsets !== undefined && (React.createElement("div", { className: `${prefixCls}-skeleton-animation-item`, style: {
                 left: 0 - (textOffsets?.[idx] || 0),
             } }))))))));
 });

package/esnext/skeleton/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/slider/hooks/useSliderEvents.d.ts

@@ -7,7 +7,7 @@ declare enum IsTouchingStatus {
 }
 export declare const useSliderEvents: ({ getLinePosition, lineRef, valueGroup, setValueGroup, setCommonIsTouching, }: {
     getLinePosition: () => LinePosition;
-    lineRef: RefObject<HTMLDivElement>;
+    lineRef: RefObject<HTMLDivElement | null>;
     valueGroup: number | number[];
     setValueGroup: React.Dispatch<React.SetStateAction<number | [number, number]>>;
     setCommonIsTouching: React.Dispatch<React.SetStateAction<number>>;

package/esnext/slider/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/stepper/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