@arco-design/mobile-react 2.21.3 → 2.22.0

package/umd/_helpers/react-dom.js

@@ -0,0 +1,78 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react-dom"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react-dom"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.reactDom);
+    global.reactDom = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _reactDom) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.render = void 0;
+  _reactDom = _interopRequireDefault(_reactDom);
+
+  var _CopyReactDOM$version;
+
+  function isObject(obj) {
+    return Object.prototype.toString.call(obj) === '[object Object]';
+  }
+
+  var __SECRET_INTERNALS__ = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED';
+  var CopyReactDOM = _reactDom.default;
+  var copyRender;
+  var isReact18 = Number((_CopyReactDOM$version = CopyReactDOM.version) == null ? void 0 : _CopyReactDOM$version.split('.')[0]) > 17;
+
+  var updateUsingClientEntryPoint = function updateUsingClientEntryPoint(skipWarning) {
+    // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
+    // Avoid console warning
+    if (isObject(CopyReactDOM[__SECRET_INTERNALS__])) {
+      CopyReactDOM[__SECRET_INTERNALS__].usingClientEntryPoint = skipWarning;
+    }
+  };
+
+  var createRoot;
+
+  try {
+    createRoot = CopyReactDOM.createRoot;
+  } catch (_) {}
+
+  if (isReact18 && createRoot) {
+    copyRender = function copyRender(app, container) {
+      updateUsingClientEntryPoint(true);
+      var root = createRoot(container);
+      updateUsingClientEntryPoint(false);
+      root.render(app);
+
+      root._unmount = function () {
+        setTimeout(function () {
+          root == null ? void 0 : root.unmount == null ? void 0 : root.unmount();
+        });
+      };
+
+      return root;
+    };
+  } else {
+    copyRender = function copyRender(app, container) {
+      CopyReactDOM.render(app, container);
+      return {
+        render: function render(comment) {
+          CopyReactDOM.render(comment, container);
+        },
+        _unmount: function _unmount() {
+          CopyReactDOM.unmountComponentAtNode(container);
+        }
+      };
+    };
+  }
+
+  var render = copyRender;
+  _exports.render = render;
+});

package/umd/_helpers/render.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import { RootType } from './react-dom';
+export declare class ReactDOMRender {
+    root: RootType | undefined;
+    app: FunctionComponent;
+    container: Element | DocumentFragment;
+    constructor(app: FunctionComponent, container: Element | DocumentFragment);
+    render: (props: any) => void;
+    unmount: () => void;
+}

package/umd/_helpers/render.js

@@ -0,0 +1,51 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "./react-dom"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("./react-dom"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.reactDom);
+    global.render = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _reactDom) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.ReactDOMRender = void 0;
+  _react = _interopRequireDefault(_react);
+
+  var ReactDOMRender = function ReactDOMRender(app, container) {
+    var _this = this;
+
+    this.root = void 0;
+    this.app = void 0;
+    this.container = void 0;
+
+    this.render = function (props) {
+      var CustomApp = _this.app;
+
+      if (_this.root) {
+        _this.root.render( /*#__PURE__*/_react.default.createElement(CustomApp, props));
+      } else {
+        _this.root = (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(CustomApp, props), _this.container);
+      }
+    };
+
+    this.unmount = function () {
+      var _this$root;
+
+      (_this$root = _this.root) == null ? void 0 : _this$root._unmount();
+      _this.root = undefined;
+    };
+
+    this.app = app;
+    this.container = container;
+  };
+
+  _exports.ReactDOMRender = ReactDOMRender;
+});

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

@@ -26,7 +26,7 @@ export interface ActionSheetItemOptions {
      * 点击选项事件，返回值为 true 时可以阻止动作面板关闭
      * @en Click option event, actionSheet will be prevent from closing when returning true
      */
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => (void | boolean) | Promise<void | boolean>;
 }
 export interface ActionSheetProps extends Omit<PopupProps, 'children' | 'getScrollContainer' | 'orientationDirection' | 'direction'> {
     /**

package/umd/image-picker/index.js

@@ -191,7 +191,6 @@
     var timeOutEvent;
 
     var handleTouchStart = function handleTouchStart(e, image, index) {
-      e.preventDefault();
       timeOutEvent = setTimeout(function () {
         timeOutEvent = 0;
         onLongPress == null ? void 0 : onLongPress(e, image, index);

package/umd/image-preview/index.d.ts

@@ -254,11 +254,7 @@ export declare function methodsGenerator<P extends ImagePreviewProps>(Comp: Reac
      */
     open: (config: Pick<P, Exclude<keyof P, "close">>) => {
         close: () => void;
-        update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void; /**
-         * 是否可循环滑动
-         * @en Whether it can be swiped circularly
-         * @default false
-         */
+        update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void;
     };
 };
 declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>> & {
@@ -270,11 +266,7 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      */
     open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
         close: () => void;
-        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
-         * 是否可循环滑动
-         * @en Whether it can be swiped circularly
-         * @default false
-         */
+        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
     };
 };
 /**

package/umd/image-preview/methods.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "react-dom", "@arco-design/mobile-utils"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "@arco-design/mobile-utils", "../_helpers/render"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("react-dom"), require("@arco-design/mobile-utils"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("@arco-design/mobile-utils"), require("../_helpers/render"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.reactDom, global.mobileUtils);
+    factory(mod.exports, global._extends, global.mobileUtils, global.render);
     global.methods = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _reactDom, _mobileUtils) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _mobileUtils, _render) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -18,8 +18,6 @@
   _exports.__esModule = true;
   _exports.open = open;
   _extends2 = _interopRequireDefault(_extends2);
-  _react = _interopRequireDefault(_react);
-  _reactDom = _interopRequireDefault(_reactDom);
 
   function open(Component) {
     return function (config) {
@@ -38,13 +36,8 @@
 
       var leaving = false;
 
-      function render(props) {
-        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-          getContainer: function getContainer() {
-            return div;
-          }
-        })), div);
-      }
+      var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+          render = _ReactDOMRender.render;
 
       function update(newConfig) {
         dynamicProps = (0, _extends2.default)({}, dynamicProps, newConfig || {});

package/umd/masking/index.d.ts

@@ -192,6 +192,11 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
     open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;
     }) => {
+        /**
+         * 点击蒙层是否关闭菜单
+         * @en Whether to click the mask to close the menu
+         * @default true
+         */
         close: () => void;
         update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
             key?: string | undefined;
@@ -208,6 +213,11 @@ declare const _default: React.ForwardRefExoticComponent<MaskingProps & React.Ref
     open: (config: Pick<MaskingProps & React.RefAttributes<MaskingRef>, "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
         key?: string | undefined;
     }) => {
+        /**
+         * 点击蒙层是否关闭菜单
+         * @en Whether to click the mask to close the menu
+         * @default true
+         */
         close: () => void;
         update: (newConfig: Pick<MaskingProps & React.RefAttributes<MaskingRef>, "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
             key?: string | undefined;

package/umd/masking/methods.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "react-dom", "@arco-design/mobile-utils"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "@arco-design/mobile-utils", "../_helpers/render"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("react-dom"), require("@arco-design/mobile-utils"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("@arco-design/mobile-utils"), require("../_helpers/render"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.reactDom, global.mobileUtils);
+    factory(mod.exports, global._extends, global.mobileUtils, global.render);
     global.methods = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _reactDom, _mobileUtils) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _mobileUtils, _render) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -19,8 +19,6 @@
   _exports.getOpenMethod = getOpenMethod;
   _exports.open = open;
   _extends2 = _interopRequireDefault(_extends2);
-  _react = _interopRequireDefault(_react);
-  _reactDom = _interopRequireDefault(_reactDom);
 
   function getOpenMethod(Component, containerId, normalize) {
     if (normalize === void 0) {
@@ -45,13 +43,8 @@
 
       var leaving = false;
 
-      function render(props) {
-        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-          getContainer: function getContainer() {
-            return div;
-          }
-        })), div);
-      }
+      var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+          render = _ReactDOMRender.render;
 
       function update(newConfig) {
         dynamicProps = (0, _extends2.default)({}, dynamicProps, normalize(newConfig));

package/umd/notify/methods.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "@arco-design/mobile-utils", "react", "react-dom"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "@arco-design/mobile-utils", "../_helpers/render"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("@arco-design/mobile-utils"), require("react"), require("react-dom"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("@arco-design/mobile-utils"), require("../_helpers/render"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.mobileUtils, global.react, global.reactDom);
+    factory(mod.exports, global._extends, global.mobileUtils, global.render);
     global.methods = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _mobileUtils, _react, _reactDom) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _mobileUtils, _render) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -18,8 +18,6 @@
   _exports.__esModule = true;
   _exports.notify = notify;
   _extends2 = _interopRequireDefault(_extends2);
-  _react = _interopRequireDefault(_react);
-  _reactDom = _interopRequireDefault(_reactDom);
 
   function notify(Component, type) {
     return function (originConfig) {
@@ -41,17 +39,16 @@
         document.body.appendChild(div);
       }
 
-      function render(props) {
-        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, props), div);
-      }
+      var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+          render = _ReactDOMRender.render,
+          unmount = _ReactDOMRender.unmount;
 
       function destroy() {
         var onClose = config.onClose;
         onClose && onClose();
+        unmount();
 
-        var unmountResult = _reactDom.default.unmountComponentAtNode(div);
-
-        if (unmountResult && div.parentNode) {
+        if (div.parentNode) {
           div.parentNode.removeChild(div);
         }
       }

package/umd/popover/hooks/useEvent.js

@@ -56,6 +56,7 @@
       onVisibleChange(false);
       window.clearTimeout(closeTimer.current);
       closeTimer.current = 0;
+      mayRemoveEventListenerOnBody();
     };
 
     var throttleHandleVerticalScroll = (0, _react.useMemo)(function () {
@@ -75,7 +76,7 @@
       };
     }, [throttleHandleVerticalScroll, getVerticalScrollContainer, autoVerticalDirection, visibleRef]);
     var mayRemoveEventListenerOnBody = (0, _react.useCallback)(function () {
-      document.body.removeEventListener('click', handleClickBody);
+      document.body.removeEventListener('click', handleClickBody, true);
       document.body.removeEventListener('touchstart', handleTouchBody);
       var el = getVerticalScrollContainer();
 
@@ -90,7 +91,6 @@
       // 仅处理子元素和气泡元素外的点击事件
       // @en Only handle click events outside of children elements and bubble elements
       if (!(0, _mobileUtils.isContains)(wrapperRef.current, e.target) && !(0, _mobileUtils.isContains)(((_popoverInnerRef$curr = popoverInnerRef.current) == null ? void 0 : _popoverInnerRef$curr.dom) || null, e.target)) {
-        // TODO: 这里仅阻止了react事件，react 18 将不再在document上挂事件，这里的stop会失效
         if (preventBodyClick) {
           e.stopPropagation();
           e.preventDefault();
@@ -116,13 +116,13 @@
       var handle = function handle(e) {
         e.stopPropagation();
         e.preventDefault();
-        document.body.removeEventListener('click', handle);
+        document.body.removeEventListener('click', handle, true);
         clearTimeout(preventRecentClickTimer);
       };
 
-      document.body.addEventListener('click', handle);
+      document.body.addEventListener('click', handle, true);
       preventRecentClickTimer = window.setTimeout(function () {
-        document.body.removeEventListener('click', handle);
+        document.body.removeEventListener('click', handle, true);
       }, 500);
     };
 
@@ -165,7 +165,7 @@
         var el = getVerticalScrollContainer();
         el && el.addEventListener('scroll', handleScrollBody);
       } else if (clickOtherToClose) {
-        document.body.addEventListener('click', handleClickBody);
+        document.body.addEventListener('click', handleClickBody, true);
       }
     };
     /**

package/umd/swipe-action/index.js

@@ -71,6 +71,7 @@
 
     var dampRateRef = (0, _helpers.useLatestRef)(dampRate);
     var forbidClick = (0, _react.useRef)(false);
+    var scrollingRef = (0, _react.useRef)(null);
 
     var _useRefState = (0, _helpers.useRefState)(false),
         moving = _useRefState[0],
@@ -87,6 +88,7 @@
 
     var startRef = (0, _react.useRef)(0);
     var startX = (0, _react.useRef)(0);
+    var startY = (0, _react.useRef)(0);
     var slideX = (0, _react.useRef)(0);
     var isLayer = openStyleType === 'layer';
     var transitionStyle = (0, _react.useMemo)(function () {
@@ -97,6 +99,7 @@
 
     function resetMoveData() {
       startX.current = 0;
+      startY.current = 0;
       slideX.current = 0;
     }
 
@@ -108,19 +111,34 @@
     function touchstart(e) {
       startRef.current = offsetRef.current;
       resetMoveData();
+      scrollingRef.current = null;
       startX.current = e.touches[0].pageX;
+      startY.current = e.touches[0].pageY;
     }
 
     function touchmove(e) {
-      e.preventDefault();
-      slideX.current = e.touches[0].pageX - startX.current;
+      var x = e.changedTouches[0].pageX - startX.current;
+      var y = e.changedTouches[0].pageY - startY.current;
+
+      if (scrollingRef.current === null) {
+        scrollingRef.current = Math.abs(x) < Math.abs(y);
+      }
+
+      if (scrollingRef.current) {
+        setMoving(false);
+        setOffset(0);
+        return;
+      }
+
+      e.cancelable && e.preventDefault();
+      slideX.current = x;
       forbidClick.current = true;
       setMoving(true);
       setOffset(getMenuCurrentWidth(slideX.current + startRef.current, -rightMenuWidthRef.current, leftMenuWidthRef.current));
     }
 
     function touchend() {
-      if (movingRef.current) {
+      if (movingRef.current && !scrollingRef.current) {
         var currentMenu = offsetRef.current > 0 ? 'left' : 'right';
         changeMenu(currentMenu);
         setMoving(false);

package/umd/tabs/index.js

@@ -143,7 +143,9 @@
         _props$translateZ = props.translateZ,
         translateZ = _props$translateZ === void 0 ? true : _props$translateZ,
         fullScreen = props.fullScreen,
-        autoHeight = props.autoHeight;
+        autoHeight = props.autoHeight,
+        _props$tabBarStopProp = props.tabBarStopPropagation,
+        tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp;
     var domRef = (0, _react.useRef)(null);
     var cellRef = (0, _react.useRef)(null);
     var paneRef = (0, _react.useRef)(null);
@@ -497,7 +499,8 @@
         renderTabBarItem: renderTabBarItem,
         renderTabBarInner: renderTabBarInner,
         tabBarStyle: tabBarStyle,
-        tabBarClass: tabBarClass
+        tabBarClass: tabBarClass,
+        tabBarStopPropagation: tabBarStopPropagation
       }, commonProps);
 
       var CellComp = /*#__PURE__*/_react.default.createElement(_tabCell.default, cellProps);

package/umd/tabs/tab-cell.js

@@ -70,7 +70,8 @@
         renderTabBarInner = props.renderTabBarInner,
         tabBarStyle = props.tabBarStyle,
         tabBarClass = props.tabBarClass,
-        translateZ = props.translateZ;
+        translateZ = props.translateZ,
+        tabBarStopPropagation = props.tabBarStopPropagation;
     var prefix = prefixCls + "-tab-cell";
     var domRef = (0, _react.useRef)(null);
     var underlineRef = (0, _react.useRef)(null);
@@ -162,13 +163,13 @@
         return e.stopPropagation();
       };
 
-      if (isVertical && hasOverflow && domRef.current) {
+      if (isVertical && hasOverflow && domRef.current && tabBarStopPropagation) {
         domRef.current.addEventListener('touchstart', stopFunc);
         domRef.current.addEventListener('touchmove', stopFunc);
       }
 
       return function () {
-        if (isVertical && hasOverflow && domRef.current) {
+        if (isVertical && hasOverflow && domRef.current && tabBarStopPropagation) {
           domRef.current.removeEventListener('touchstart', stopFunc);
           domRef.current.removeEventListener('touchmove', stopFunc);
         }

package/umd/tabs/type.d.ts

@@ -421,6 +421,12 @@ export interface TabsProps {
      * @en Tabbar underline inner style, applied to tab-cell-underline-inner
      */
     underlineInnerStyle?: React.CSSProperties;
+    /**
+     * 当前 TabBar 的触摸事件是否需要 stopPropagation
+     * @en Does the touch event of the current TabBar require stopPropagation
+     * @default true
+     */
+    tabBarStopPropagation?: boolean;
 }
 export interface TabsRef {
     /**
@@ -510,6 +516,11 @@ export interface TabCellProps extends Pick<TabsProps, 'tabs' | 'type' | 'onTabCl
      * @en The distance the underline has been swiped
      */
     jumpingDis: number;
+    /**
+     * 当前 TabBar 的触摸事件是否需要 stopPropagation
+     * @en Does the touch event of the current TabBar require stopPropagation
+     */
+    tabBarStopPropagation: boolean;
 }
 export interface TabCellRef {
     /**

package/umd/toast/methods.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "react-dom", "@arco-design/mobile-utils"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "@arco-design/mobile-utils", "../_helpers/render"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("react-dom"), require("@arco-design/mobile-utils"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("@arco-design/mobile-utils"), require("../_helpers/render"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global._extends, global.react, global.reactDom, global.mobileUtils);
+    factory(mod.exports, global._extends, global.mobileUtils, global.render);
     global.methods = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _reactDom, _mobileUtils) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _mobileUtils, _render) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -18,8 +18,6 @@
   _exports.__esModule = true;
   _exports.toast = toast;
   _extends2 = _interopRequireDefault(_extends2);
-  _react = _interopRequireDefault(_react);
-  _reactDom = _interopRequireDefault(_reactDom);
 
   function toast(Component, type) {
     return function (originConfig) {
@@ -36,17 +34,16 @@
       var div = document.createElement('div');
       document.body.appendChild(div);
 
-      function render(props) {
-        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, props), div);
-      }
+      var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+          render = _ReactDOMRender.render,
+          unmount = _ReactDOMRender.unmount;
 
-      function destory() {
+      function destroy() {
         var onClose = config.onClose;
         onClose && onClose();
+        unmount();
 
-        var unmountResult = _reactDom.default.unmountComponentAtNode(div);
-
-        if (unmountResult && div.parentNode) {
+        if (div.parentNode) {
           div.parentNode.removeChild(div);
         }
       }
@@ -56,7 +53,7 @@
         getContainer: function getContainer() {
           return div;
         },
-        onClose: destory,
+        onClose: destroy,
         visible: false
       });
       var leaving = false;