@arco-design/mobile-react 2.27.4 → 2.28.0

package/cjs/tabs/tab-cell-underline.js

@@ -13,6 +13,8 @@ var _mobileUtils = require("@arco-design/mobile-utils");
 
 var _helpers = require("../_helpers");
 
+var _contextProvider = require("../context-provider");
+
 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; }
@@ -40,6 +42,9 @@ var TabCellUnderline = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       getTabRect = props.getTabRect,
       getTabCenterLeft = props.getTabCenterLeft;
 
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      useRtl = _useContext.useRtl;
+
   var _useState = (0, _react.useState)({}),
       underlineStyle = _useState[0],
       setUnderlineStyle = _useState[1];
@@ -59,6 +64,7 @@ var TabCellUnderline = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var isVertical = tabDirection === 'vertical';
   var maxScaleWithDefault = caterpillarMaxScale || 2;
   var translateZStr = translateZ ? ' translateZ(0)' : '';
+  var rtlRatio = isVertical && useRtl ? -1 : 1;
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       setCaterpillarAnimate: setCaterpillarAnimate,
@@ -130,11 +136,13 @@ var TabCellUnderline = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }
 
   function getDescIndex() {
-    if (distance > 0) {
+    var comparedDis = distance * rtlRatio;
+
+    if (comparedDis > 0) {
       return activeIndex - 1;
     }
 
-    if (distance < 0) {
+    if (comparedDis < 0) {
       return activeIndex + 1;
     }
 
@@ -156,7 +164,8 @@ var TabCellUnderline = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     var currentLeft = getLineLeft(activeIndex);
     var descIndex = getDescIndex();
     var descLeft = getLineLeft(descIndex);
-    var moveRatio = wrapWidth ? distance / wrapWidth : 0;
+    var comparedDis = distance * rtlRatio;
+    var moveRatio = wrapWidth ? comparedDis / wrapWidth : 0;
     var leftOffset = moveRatio * (currentLeft - descLeft);
     var direc = isVertical ? 'X' : 'Y';
     var transStyle = useCaterpillar && !jumpingDis && !underlineAdaptive ? caterpillarProperty === 'size' ? (_ref = {}, _ref[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _ref.willChange = 'width', _ref) : {
@@ -171,7 +180,7 @@ var TabCellUnderline = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       var currentWidth = getLineWidth(activeIndex);
       var descWidth = getLineWidth(descIndex);
       var widthOffset = moveRatio * (currentWidth - descWidth);
-      adaptiveStyle = (_adaptiveStyle = {}, _adaptiveStyle[isVertical ? 'width' : 'height'] = distance > 0 ? currentWidth - widthOffset : currentWidth + widthOffset, _adaptiveStyle.willChange = 'width', _adaptiveStyle);
+      adaptiveStyle = (_adaptiveStyle = {}, _adaptiveStyle[isVertical ? 'width' : 'height'] = comparedDis > 0 ? currentWidth - widthOffset : currentWidth + widthOffset, _adaptiveStyle.willChange = 'width', _adaptiveStyle);
       adaptiveOuterStyle = isVertical ? {
         width: 'auto'
       } : {
@@ -188,7 +197,7 @@ var TabCellUnderline = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     };
     return {
       outer: (0, _extends2.default)({
-        transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
+        transform: "translate" + direc + "(" + (comparedDis > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
       }, outerSize, adaptiveOuterStyle),
       inner: (0, _extends2.default)({}, transStyle, adaptiveStyle)
     };

package/cjs/tabs/tab-cell.js

@@ -15,6 +15,8 @@ var _helpers = require("../_helpers");
 
 var _tabCellUnderline = _interopRequireDefault(require("./tab-cell-underline"));
 
+var _contextProvider = require("../context-provider");
+
 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; }
@@ -68,6 +70,10 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       translateZ = props.translateZ,
       tabBarStopPropagation = props.tabBarStopPropagation;
   var prefix = prefixCls + "-tab-cell";
+
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      useRtl = _useContext.useRtl;
+
   var domRef = (0, _react.useRef)(null);
   var underlineRef = (0, _react.useRef)(null);
   var allCellRectRef = (0, _react.useRef)([]);
@@ -262,20 +268,22 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   function getCellStyle(index) {
+    var _ref2;
+
     if (!isVertical) {
       return {};
     }
 
+    var marginStart = useRtl ? 'marginRight' : 'marginLeft';
+    var marginEnd = useRtl ? 'marginLeft' : 'marginRight';
+
     if (index === 0) {
-      return {
-        marginRight: cellGutter,
-        marginLeft: getCellPadding('left')
-      };
+      var _ref;
+
+      return _ref = {}, _ref[marginEnd] = cellGutter, _ref[marginStart] = getCellPadding('left'), _ref;
     }
 
-    return {
-      marginRight: index === tabs.length - 1 ? void 0 : cellGutter
-    };
+    return _ref2 = {}, _ref2[marginEnd] = index === tabs.length - 1 ? void 0 : cellGutter, _ref2;
   }
 
   function renderBarItem(tab, index) {

package/cjs/tabs/tab-pane.js

@@ -52,7 +52,8 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       autoHeight = props.autoHeight,
       swipeEnergySaving = props.swipeEnergySaving,
       changeIndex = props.changeIndex,
-      onScroll = props.onScroll;
+      onScroll = props.onScroll,
+      rtlRatio = props.rtlRatio;
   var domRef = (0, _react.useRef)(null);
   var panesRef = (0, _react.useRef)([]);
   var autoScrollingRef = (0, _react.useRef)(false);
@@ -251,7 +252,7 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var translateStr = translateZ ? ' translateZ(0)' : '';
     var sizeStyle = tabDirection === 'vertical' ? {
       width: 100 * panes.length + "%",
-      transform: "translateX(" + (distance - wrapWidth * activeIndex) + "px)" + translateStr
+      transform: "translateX(" + (distance - wrapWidth * activeIndex * rtlRatio) + "px)" + translateStr
     } : {
       height: 100 * panes.length + "%",
       transform: "translateY(" + (distance - wrapHeight * activeIndex) + "px)" + translateStr
@@ -279,7 +280,7 @@ var TabPane = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     var translateStr = translateZ ? ' translateZ(0)' : '';
     var sizeStyle = tabDirection === 'vertical' ? {
-      transform: "translateX(" + (distance - wrapWidth * (activeIndex - index)) + "px)" + translateStr
+      transform: "translateX(" + (distance - wrapWidth * (activeIndex - index) * rtlRatio) + "px)" + translateStr
     } : {
       transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
     };

package/cjs/tabs/type.d.ts

@@ -579,6 +579,7 @@ export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDu
     paneTrans: boolean;
     swipeable: boolean;
     changeIndex: (newIndex: number, from?: string) => void;
+    rtlRatio: number;
 }
 export interface TabPaneRef {
     /**

package/cjs/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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => 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;
         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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => 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;
         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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => 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;
         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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => 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;
         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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => 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;
         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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "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" | "className" | "duration" | "loadingIcon" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => 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;
         close: () => void;
         hide: () => void;
     };

package/cjs/toast/index.js

@@ -71,6 +71,7 @@ var Toast = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       initialBodyOverflow = props.initialBodyOverflow;
   var closeTimerRef = (0, _react.useRef)();
   var domRef = (0, _react.useRef)(null);
+  var wrapDomRef = (0, _react.useRef)(null);
   var isInitialMount = (0, _react.useRef)(false);
   var hasType = type && type !== 'info';
   (0, _react.useImperativeHandle)(ref, function () {
@@ -139,7 +140,8 @@ var Toast = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       className: (0, _mobileUtils.cls)(prefixClass + "-wrapper", "from-" + direction, {
         'no-event': !disableBodyTouch
       }),
-      onClick: handleClickMask
+      onClick: handleClickMask,
+      ref: wrapDomRef
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixClass + "-inner", layout, (_cls = {}, _cls[prefixClass + "-inner-mixin"] = (loading || hasType || icon) && layout === 'vertical', _cls))
     }, loading && /*#__PURE__*/_react.default.createElement("div", {
@@ -166,7 +168,8 @@ var Toast = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, /*#__PURE__*/_react.default.createElement(_transition.default, {
       in: visible,
       timeout: transitionDuration,
-      type: "fade"
+      type: "fade",
+      nodeRef: wrapDomRef
     }, renderComponent(prefixCls + "-toast"))));
   });
 });