@arco-design/mobile-react 2.37.0 → 2.38.1

package/cjs/tabs/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/cjs/tabs/tab-cell.js

@@ -68,7 +68,8 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       tabBarStyle = props.tabBarStyle,
       tabBarClass = props.tabBarClass,
       translateZ = props.translateZ,
-      tabBarStopPropagation = props.tabBarStopPropagation;
+      tabBarStopPropagation = props.tabBarStopPropagation,
+      onUnderlineFirstShow = props.onUnderlineFirstShow;
   var prefix = prefixCls + "-tab-cell";
 
   var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
@@ -147,6 +148,13 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useEffect)(function () {
     updateScrollPosition();
   }, [activeIndex, wrapSize]);
+  (0, _react.useEffect)(function () {
+    // underline 首次展示时，通知父组件启用 cellTrans
+    // @en When underline is first shown, notify parent component to enable cellTrans
+    if (showLine && onUnderlineFirstShow) {
+      onUnderlineFirstShow();
+    }
+  }, [showLine]);
   (0, _helpers.useUpdateEffect)(function () {
     var _underlineRef$current2;
 

package/cjs/tabs/type.d.ts

@@ -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 {
     /**

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/transition/index.js

@@ -9,14 +9,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
 
 var _contextProvider = require("../context-provider");
 
-var _excluded = ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit"];
+var _excluded = ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit", "transitionVarType"];
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var DEFAULT_TIMEOUT = 300;
 /**
  * react-transition-group/CSSTransition 的简单封装。
  * @en Simple wrapper for react-transition-group/CSSTransition.
@@ -25,26 +30,51 @@ var _excluded = ["children", "type", "in", "timeout", "mountOnEnter", "unmountOn
  * @name 动画过渡
  * @name_en Transition
  */
+
 function Transition(props) {
   var _props$children = props.children,
       children = _props$children === void 0 ? /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_contextProvider.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 = (0, _react.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.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
+    var _props;
+
+    var prefixCls = _ref2.prefixCls;
     return /*#__PURE__*/_react.default.createElement(_CSSTransition.default, (0, _extends2.default)({
       in: transIn,
       timeout: timeout,
       classNames: prefixCls + "-" + type,
       mountOnEnter: mountOnEnter,
       unmountOnExit: unmountOnExit
-    }, restProps), children);
+    }, restProps), /*#__PURE__*/(0, _react.cloneElement)(children, {
+      style: (0, _extends2.default)({}, cssVariables, children == null ? void 0 : (_props = children.props) == null ? void 0 : _props.style)
+    }));
   });
 }

package/cjs/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/cjs/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/cjs/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/dist/index.js

@@ -5240,7 +5240,8 @@
           tabBarStyle = props.tabBarStyle,
           tabBarClass = props.tabBarClass,
           translateZ = props.translateZ,
-          tabBarStopPropagation = props.tabBarStopPropagation;
+          tabBarStopPropagation = props.tabBarStopPropagation,
+          onUnderlineFirstShow = props.onUnderlineFirstShow;
       var prefix = prefixCls + "-tab-cell";
       var useRtl = React.useContext(GlobalContext).useRtl;
       var domRef = React.useRef(null);
@@ -5316,6 +5317,13 @@
       React.useEffect(function () {
         updateScrollPosition();
       }, [activeIndex, wrapSize]);
+      React.useEffect(function () {
+        // underline 首次展示时，通知父组件启用 cellTrans
+        // @en When underline is first shown, notify parent component to enable cellTrans
+        if (showLine && onUnderlineFirstShow) {
+          onUnderlineFirstShow();
+        }
+      }, [showLine]);
       useUpdateEffect(function () {
         var _a;
 
@@ -6703,13 +6711,14 @@
           cellRef.current && cellRef.current.scrollToCenter();
         }
 
+        setCellTrans(true);
+        setPaneTrans(true);
+
         if (!touchStartedRef.current || posAdjustingRef.current || scrollingRef.current || !touchMovedRef.current) {
           return;
         }
 
         touchStartedRef.current = false;
-        setCellTrans(true);
-        setPaneTrans(true);
         var touchEndTime = new Date().getTime();
         var dis = distanceRef.current;
         var speed = dis / (touchEndTime - touchStartTimeRef.current) * 1000;
@@ -6843,7 +6852,10 @@
           renderTabBarInner: renderTabBarInner,
           tabBarStyle: tabBarStyle,
           tabBarClass: tabBarClass,
-          tabBarStopPropagation: tabBarStopPropagation
+          tabBarStopPropagation: tabBarStopPropagation,
+          onUnderlineFirstShow: function onUnderlineFirstShow() {
+            return setCellTrans(true);
+          }
         }, commonProps);
 
         var CellComp = /*#__PURE__*/React__default["default"].createElement(TabCell, __assign$3({}, cellProps));
@@ -8778,6 +8790,7 @@
     };
     CSSTransition.propTypes = {};
 
+    var DEFAULT_TIMEOUT = 300;
     /**
      * react-transition-group/CSSTransition 的简单封装。
      * @en Simple wrapper for react-transition-group/CSSTransition.
@@ -8793,14 +8806,36 @@
           type = props.type,
           transIn = props.in,
           _b = props.timeout,
-          timeout = _b === void 0 ? 300 : _b,
+          timeout = _b === void 0 ? DEFAULT_TIMEOUT : _b,
           _c = props.mountOnEnter,
           mountOnEnter = _c === void 0 ? true : _c,
           _d = props.unmountOnExit,
           unmountOnExit = _d === void 0 ? true : _d,
-          restProps = __rest$1(props, ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit"]);
+          transitionVarType = props.transitionVarType,
+          restProps = __rest$1(props, ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit", "transitionVarType"]);
 
+      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 = React.useMemo(function () {
+        var _a;
+
+        var enterDuration = getDuration('enter');
+        var exitDuration = getDuration('exit');
+        var appearDuration = getDuration('appear');
+        return _a = {}, _a["--" + varPrefix + "-enter-duration"] = enterDuration + "ms", _a["--" + varPrefix + "-exit-duration"] = exitDuration + "ms", _a["--" + varPrefix + "-appear-duration"] = appearDuration + "ms", _a;
+      }, [timeout, varPrefix]);
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var _b, _c;
+
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement(CSSTransition, __assign$3({
           in: transIn,
@@ -8808,7 +8843,9 @@
           classNames: prefixCls + "-" + type,
           mountOnEnter: mountOnEnter,
           unmountOnExit: unmountOnExit
-        }, restProps), children);
+        }, restProps), /*#__PURE__*/React.cloneElement(children, {
+          style: __assign$3(__assign$3({}, cssVariables), (_c = (_b = children) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.style)
+        }));
       });
     }
 
@@ -8904,6 +8941,7 @@
           maskTransitionType = _b === void 0 ? 'fade' : _b,
           _c = props.contentTransitionType,
           contentTransitionType = _c === void 0 ? 'fade' : _c,
+          contentTransitionVarType = props.contentTransitionVarType,
           _d = props.maskTransitionTimeout,
           maskTransitionTimeout = _d === void 0 ? 300 : _d,
           _e = props.contentTransitionTimeout,
@@ -9048,6 +9086,7 @@
           in: innerVisible,
           timeout: contentTransitionTimeout,
           type: contentTransitionType,
+          transitionVarType: contentTransitionVarType,
           mountOnEnter: mountOnEnter,
           unmountOnExit: unmountOnExit,
           nodeRef: contentRef
@@ -9128,6 +9167,7 @@
             translateZ: translateZ
           }, maskClass),
           contentTransitionType: contentTransitionType || "slide-from-" + direction,
+          contentTransitionVarType: "popup-slide",
           contentClass: cls(prefix + "-content", direction, {
             'need-bottom-offset': needBottomOffset
           }, {
@@ -10077,7 +10117,7 @@
           _h = props.bordered,
           bordered = _h === void 0 ? false : _h,
           _j = props.timeout,
-          timeout = _j === void 0 ? 300 : _j;
+          timeout = _j === void 0 ? 400 : _j;
       var domRef = React.useRef(null);
       React.useImperativeHandle(ref, function () {
         return {
@@ -14365,7 +14405,10 @@
           _h = props.maskTransitionTimeout,
           maskTransitionTimeout = _h === void 0 ? 300 : _h,
           _j = props.contentTransitionTimeout,
-          contentTransitionTimeout = _j === void 0 ? 450 : _j,
+          contentTransitionTimeout = _j === void 0 ? nowSystem === 'android' ? 300 : {
+        enter: 450,
+        exit: 150
+      } : _j,
           extra = props.extra,
           restProps = __rest$1(props, ["close", "children", "title", "footer", "footerType", "renderFooter", "footerCollapseCount", "titleAlign", "contentAlign", "className", "maskClass", "contentClass", "contentStyle", "contentTransitionType", "maskTransitionTimeout", "contentTransitionTimeout", "extra"]);
 
@@ -21645,6 +21688,7 @@
         };
       });
       var uploadFunc = new Upload(__assign$3(__assign$3({}, props), {
+        onUploadClick: props.onUploadClick || props.onSelectClick,
         files: images
       }), fileRef, cacheRef);
 
@@ -28294,23 +28338,33 @@
           _onOpen = props.onOpen,
           _onClose = props.onClose,
           close = props.close,
-          otherProps = __rest$1(props, ["className", "visible", "children", "maskStyle", "contentStyle", "direction", "percentToClose", "distanceToClose", "speedToClose", "allowSwipeDirections", "exitDirection", "onTouchMove", "onTouchStart", "onTouchEnd", "onOpen", "onClose", "close"]);
+          _f = props.maskTransitionTimeout,
+          maskTransitionTimeout = _f === void 0 ? {
+        enter: 450,
+        exit: 240
+      } : _f,
+          _g = props.contentTransitionTimeout,
+          contentTransitionTimeout = _g === void 0 ? {
+        enter: 450,
+        exit: 240
+      } : _g,
+          otherProps = __rest$1(props, ["className", "visible", "children", "maskStyle", "contentStyle", "direction", "percentToClose", "distanceToClose", "speedToClose", "allowSwipeDirections", "exitDirection", "onTouchMove", "onTouchStart", "onTouchEnd", "onOpen", "onClose", "close", "maskTransitionTimeout", "contentTransitionTimeout"]);
 
-      var _f = React.useState(visible),
-          opened = _f[0],
-          setOpened = _f[1];
+      var _h = React.useState(visible),
+          opened = _h[0],
+          setOpened = _h[1];
 
-      var _g = useRefState({
+      var _j = useRefState({
         direction: 'X',
         value: 0
       }),
-          distance = _g[0],
-          distanceRef = _g[1],
-          setDistance = _g[2];
+          distance = _j[0],
+          distanceRef = _j[1],
+          setDistance = _j[2];
 
-      var _h = React.useState(false),
-          hasTrans = _h[0],
-          setHasTrans = _h[1];
+      var _k = React.useState(false),
+          hasTrans = _k[0],
+          setHasTrans = _k[1];
 
       var popupRef = React.useRef(null);
       var touchStartXRef = React.useRef(0);
@@ -28439,7 +28493,12 @@
           setDistance({
             direction: 'X',
             value: 0
-          });
+          }); // 动画完成后需重置
+          // @en Reset after animation is complete
+
+          setTimeout(function () {
+            setHasTrans(false);
+          }, Math.max(typeof maskTransitionTimeout === 'number' ? maskTransitionTimeout : (maskTransitionTimeout === null || maskTransitionTimeout === void 0 ? void 0 : maskTransitionTimeout.exit) || 0, typeof contentTransitionTimeout === 'number' ? contentTransitionTimeout : (contentTransitionTimeout === null || contentTransitionTimeout === void 0 ? void 0 : contentTransitionTimeout.exit) || 0, 240));
         }
 
         touchStartTimeRef.current = 0;
@@ -28504,7 +28563,9 @@
           maskStyle: __assign$3(__assign$3({}, maskStyle || {}), {
             opacity: percent ? 1 - percent : void 0
           }),
-          contentStyle: getContentStyle()
+          contentStyle: getContentStyle(),
+          maskTransitionTimeout: maskTransitionTimeout,
+          contentTransitionTimeout: contentTransitionTimeout
         }, otherProps), children);
       });
     });