@arco-design/mobile-react 2.21.2 → 2.22.0

package/dist/index.js

@@ -60,7 +60,7 @@
     function isArray(obj) {
       return opt.call(obj) === '[object Array]';
     }
-    function isObject$1(obj) {
+    function isObject$2(obj) {
       return opt.call(obj) === '[object Object]';
     }
     function isString(obj) {
@@ -91,7 +91,7 @@
           classNames.push(v);
         } else if (isArray(v)) {
           classNames = classNames.concat(v);
-        } else if (isObject$1(v)) {
+        } else if (isObject$2(v)) {
           Object.keys(v).forEach(function (k) {
             if (v[k]) {
               classNames.push(k);
@@ -2494,6 +2494,64 @@
       };
     }
 
+    var _a;
+
+    function isObject$1(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["default"];
+    var copyRender;
+    var isReact18 = Number((_a = CopyReactDOM.version) === null || _a === void 0 ? void 0 : _a.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$1(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 () {
+            var _a;
+
+            (_a = root === null || root === void 0 ? void 0 : root.unmount) === null || _a === void 0 ? void 0 : _a.call(root);
+          });
+        };
+
+        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;
+
     function getStyleWithVendor(style) {
       var allowReg = /(transform|transition|animation)/i;
       var newStyle = Object.keys(style).reduce(function (acc, key) {
@@ -2515,6 +2573,36 @@
       return value === void 0 ? defaultValue : value;
     };
 
+    var ReactDOMRender =
+    /** @class */
+    function () {
+      function ReactDOMRender(app, container) {
+        var _this = this;
+
+        this.render = function (props) {
+          var CustomApp = _this.app;
+
+          if (_this.root) {
+            _this.root.render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, props)));
+          } else {
+            _this.root = render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, props)), _this.container);
+          }
+        };
+
+        this.unmount = function () {
+          var _a;
+
+          (_a = _this.root) === null || _a === void 0 ? void 0 : _a._unmount();
+          _this.root = undefined;
+        };
+
+        this.app = app;
+        this.container = container;
+      }
+
+      return ReactDOMRender;
+    }();
+
     function getOpenMethod(Component, containerId, normalize) {
       if (normalize === void 0) {
         normalize = function normalize(config) {
@@ -2536,14 +2624,7 @@
         var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
         var div = appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-
-        function render(props) {
-          ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, props, {
-            getContainer: function getContainer() {
-              return div;
-            }
-          })), div);
-        }
+        var render = new ReactDOMRender(Component, div).render;
 
         function update(newConfig) {
           dynamicProps = __assign(__assign({}, dynamicProps), normalize(newConfig));
@@ -5203,16 +5284,16 @@
         var div = document.createElement('div');
         document.body.appendChild(div);
 
-        function render(props) {
-          ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, props)), div);
-        }
+        var _a = new ReactDOMRender(Component, div),
+            render = _a.render,
+            unmount = _a.unmount;
 
-        function destory() {
+        function destroy() {
           var onClose = config.onClose;
           onClose && onClose();
-          var unmountResult = ReactDOM__default["default"].unmountComponentAtNode(div);
+          unmount();
 
-          if (unmountResult && div.parentNode) {
+          if (div.parentNode) {
             div.parentNode.removeChild(div);
           }
         }
@@ -5222,7 +5303,7 @@
           getContainer: function getContainer() {
             return div;
           },
-          onClose: destory,
+          onClose: destroy,
           visible: false
         });
 
@@ -6529,6 +6610,220 @@
       Group: Group$1
     });
 
+    var TabCellUnderline = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var prefix = props.prefix,
+          useCaterpillar = props.useCaterpillar,
+          distance = props.distance,
+          tabDirection = props.tabDirection,
+          underlineInnerStyle = props.underlineInnerStyle,
+          duration = props.duration,
+          cellTrans = props.cellTrans,
+          showLine = props.showLine,
+          activeIndex = props.activeIndex,
+          wrapWidth = props.wrapWidth,
+          wrapHeight = props.wrapHeight,
+          jumpingDis = props.jumpingDis,
+          translateZ = props.translateZ,
+          caterpillarMaxScale = props.caterpillarMaxScale,
+          caterpillarProperty = props.caterpillarProperty,
+          underlineSize = props.underlineSize,
+          underlineThick = props.underlineThick,
+          renderUnderline = props.renderUnderline,
+          getTabCenterLeft = props.getTabCenterLeft;
+
+      var _a = React.useState({}),
+          underlineStyle = _a[0],
+          setUnderlineStyle = _a[1];
+
+      var _b = useRefState(false),
+          caterpillar = _b[0],
+          caterpillarRef = _b[1],
+          setCaterpillar = _b[2];
+
+      var _c = React.useState(0),
+          caterpillarDelay = _c[0],
+          setCaterpillarDelay = _c[1];
+
+      var lineRef = React.useRef(null);
+      var timeRef = React.useRef(0);
+      var system = useSystem();
+      var isVertical = tabDirection === 'vertical';
+      var maxScaleWithDefault = caterpillarMaxScale || 2;
+      var translateZStr = translateZ ? ' translateZ(0)' : '';
+      React.useImperativeHandle(ref, function () {
+        return {
+          setCaterpillarAnimate: setCaterpillarAnimate,
+          resetUnderlineStyle: resetUnderlineStyle
+        };
+      }, [setCaterpillarAnimate, resetUnderlineStyle]);
+      var animationKey = React.useMemo(function () {
+        if (!useCaterpillar) {
+          return '';
+        }
+
+        if (caterpillarProperty === 'size') {
+          return "tabsCaterpillar" + (isVertical ? 'W' : 'H') + maxScaleWithDefault;
+        }
+
+        if (caterpillarMaxScale) {
+          return "tabsCaterpillar" + (isVertical ? 'X' : 'Y') + caterpillarMaxScale;
+        }
+
+        return '';
+      }, [useCaterpillar, isVertical, caterpillarMaxScale, caterpillarProperty]);
+      React.useEffect(function () {
+        if (!animationKey) {
+          return;
+        }
+
+        var dir = isVertical ? 'X' : 'Y';
+
+        if (caterpillarProperty === 'size') {
+          var attr = isVertical ? 'width' : 'height';
+          addCssKeyframes(animationKey, "{\n                        0% {\n                            " + attr + ": 100%;\n                        }\n                        50% {\n                            " + attr + ": " + 100 * maxScaleWithDefault + "%;\n                        }\n                        100% {\n                            " + attr + ": 100%;\n                        }\n                    }");
+          return;
+        }
+
+        addCssKeyframes(animationKey, "{\n                    0% {\n                        transform: scale" + dir + "(1)" + translateZStr + ";\n                        -webkit-transform: scale" + dir + "(1)" + translateZStr + ";\n                    }\n                    50% {\n                        transform: scale" + dir + "(" + caterpillarMaxScale + ")" + translateZStr + ";\n                        -webkit-transform: scale" + dir + "(" + caterpillarMaxScale + ")" + translateZStr + ";\n                    }\n                    100% {\n                        transform: scale" + dir + "(1)" + translateZStr + ";\n                        -webkit-transform: scale" + dir + "(1)" + translateZStr + ";\n                    }\n                }");
+        return function () {
+          removeCssStyleDom(animationKey);
+        };
+      }, [animationKey]);
+      React.useEffect(function () {
+        if (jumpingDis && useCaterpillar && system !== 'ios') {
+          var movedRatio = wrapWidth ? jumpingDis / wrapWidth : 0;
+          setCaterpillarAnimate(movedRatio);
+        }
+      }, [jumpingDis]);
+      React.useEffect(function () {
+        resetUnderlineStyle();
+      }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
+
+      function getLineLeft(index) {
+        var _a, _b;
+
+        var offsetSize = isVertical ? (_a = lineRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth : (_b = lineRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
+        var lineWidth = offsetSize || 0;
+        return getTabCenterLeft(index) - lineWidth / 2;
+      }
+
+      function getDescIndex() {
+        if (distance > 0) {
+          return activeIndex - 1;
+        }
+
+        if (distance < 0) {
+          return activeIndex + 1;
+        }
+
+        return activeIndex;
+      }
+
+      function getLineScale(ratio) {
+        var absRatio = Math.abs(ratio);
+        return absRatio > 0.5 ? (1 - absRatio) * 2 * (maxScaleWithDefault - 1) + 1 : absRatio * 2 * (maxScaleWithDefault - 1) + 1;
+      }
+
+      function getLineStyle() {
+        var _a;
+
+        if (!lineRef.current) {
+          return {};
+        }
+
+        var currentLeft = getLineLeft(activeIndex);
+        var descIndex = getDescIndex();
+        var descLeft = getLineLeft(descIndex);
+        var moveRatio = wrapWidth ? distance / wrapWidth : 0;
+        var leftOffset = moveRatio * (currentLeft - descLeft);
+        var direc = isVertical ? 'X' : 'Y';
+        var transStyle = useCaterpillar && !jumpingDis ? caterpillarProperty === 'size' ? (_a = {}, _a[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _a.willChange = 'width', _a) : {
+          transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
+        } : {};
+        var outerSize = isVertical ? {
+          width: underlineSize,
+          height: underlineThick
+        } : {
+          height: underlineSize,
+          width: underlineThick
+        };
+        return {
+          outer: __assign({
+            transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
+          }, outerSize),
+          inner: __assign({}, transStyle)
+        };
+      }
+
+      function getUnderlineStyle() {
+        var transStyle = {};
+
+        if (useCaterpillar) {
+          transStyle.animationDuration = duration + "ms";
+        }
+
+        if (caterpillarRef.current && animationKey) {
+          transStyle.animationName = animationKey;
+        }
+
+        if (caterpillarDelay) {
+          transStyle.animationDelay = "-" + caterpillarDelay + "ms";
+        }
+
+        var lineStyle = getLineStyle();
+        return {
+          outer: getStyleWithVendor(__assign({
+            transitionDuration: cellTrans ? duration + "ms" : '0ms'
+          }, lineStyle.outer || {})),
+          inner: getStyleWithVendor(__assign(__assign({}, transStyle), lineStyle.inner || {}))
+        };
+      }
+
+      function resetUnderlineStyle() {
+        setUnderlineStyle(getUnderlineStyle());
+      }
+
+      function setCaterpillarAnimate(movedRatio) {
+        if (movedRatio === void 0) {
+          movedRatio = 0;
+        }
+
+        if (!duration) {
+          return;
+        }
+
+        var movedTime = (duration || 0) * Math.abs(movedRatio);
+        setCaterpillarDelay(movedTime);
+        nextTick(function () {
+          setCaterpillar(true);
+        });
+
+        if (timeRef.current) {
+          clearTimeout(timeRef.current);
+        }
+
+        timeRef.current = window.setTimeout(function () {
+          setCaterpillar(false);
+          setCaterpillarDelay(0);
+        }, (duration || 0) - movedTime + 20);
+      }
+
+      return renderUnderline ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderUnderline(underlineStyle, showLine, lineRef)) : /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefix + "-underline", {
+          show: showLine
+        }),
+        ref: lineRef,
+        style: underlineStyle.outer
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: cls(prefix + "-underline-inner", {
+          caterpillar: caterpillar,
+          'custom-animate': animationKey,
+          'caterpillar-moving': caterpillar || useCaterpillar && distance
+        }, tabDirection),
+        style: __assign(__assign({}, underlineStyle.inner || {}), underlineInnerStyle || {})
+      }));
+    });
+
     var TabCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var tabs = props.tabs,
           prefixCls = props.prefixCls,
@@ -6574,46 +6869,33 @@
           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 = React.useRef(null);
-      var lineRef = React.useRef(null);
-      var timeRef = React.useRef(0);
+      var underlineRef = React.useRef(null);
       var allCellRectRef = React.useRef([]);
 
-      var _b = React.useState({}),
-          underlineStyle = _b[0],
-          setUnderlineStyle = _b[1];
-
-      var _c = useRefState(false),
-          caterpillar = _c[0],
-          caterpillarRef = _c[1],
-          setCaterpillar = _c[2];
-
-      var _d = React.useState(0),
-          caterpillarDelay = _d[0],
-          setCaterpillarDelay = _d[1];
+      var _b = React.useState(false),
+          showLine = _b[0],
+          setShowLine = _b[1];
 
-      var _e = React.useState(false),
-          hasOverflow = _e[0],
-          setHasOverflow = _e[1];
+      var _c = React.useState(false),
+          hasOverflow = _c[0],
+          setHasOverflow = _c[1];
 
-      var _f = React.useState(function () {
+      var _d = React.useState(function () {
         return tabs.length < overflowThreshold ? tabBarArrange : 'start';
       }),
-          originArrange = _f[0],
-          setOriginArrange = _f[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
+          originArrange = _d[0],
+          setOriginArrange = _d[1]; // 默认tab小于overflowThreshold个时不开启加载前隐藏，大于overflowThreshold个时开启
 
 
-      var _g = React.useState(function () {
+      var _e = React.useState(function () {
         return hideTabBarBeforeMounted === void 0 ? tabs.length < overflowThreshold || activeIndex === 0 : !hideTabBarBeforeMounted;
       }),
-          showTab = _g[0],
-          setShowTab = _g[1];
-
-      var _h = React.useState(false),
-          showLine = _h[0],
-          setShowLine = _h[1];
+          showTab = _e[0],
+          setShowTab = _e[1];
 
       var isVertical = tabDirection === 'vertical';
       var isLine = (type || '').indexOf('line') !== -1;
@@ -6627,42 +6909,7 @@
       var cellGutter = isCard ? void 0 : tabBarGutter;
       var hasDivider = tabBarHasDivider === void 0 ? isLine : tabBarHasDivider;
       var wrapSize = isVertical ? wrapWidth : wrapHeight;
-      var translateZStr = translateZ ? ' translateZ(0)' : '';
       var system = useSystem();
-      var maxScaleWithDefault = caterpillarMaxScale || 2;
-      var animationKey = React.useMemo(function () {
-        if (!showUnderline || !useCaterpillar) {
-          return '';
-        }
-
-        if (caterpillarProperty === 'size') {
-          return "tabsCaterpillar" + (isVertical ? 'W' : 'H') + maxScaleWithDefault;
-        }
-
-        if (caterpillarMaxScale) {
-          return "tabsCaterpillar" + (isVertical ? 'X' : 'Y') + caterpillarMaxScale;
-        }
-
-        return '';
-      }, [showUnderline, useCaterpillar, isVertical, caterpillarMaxScale, caterpillarProperty]);
-      React.useEffect(function () {
-        if (!animationKey) {
-          return;
-        }
-
-        var dir = isVertical ? 'X' : 'Y';
-
-        if (caterpillarProperty === 'size') {
-          var attr = isVertical ? 'width' : 'height';
-          addCssKeyframes(animationKey, "{\n                    0% {\n                        " + attr + ": 100%;\n                    }\n                    50% {\n                        " + attr + ": " + 100 * maxScaleWithDefault + "%;\n                    }\n                    100% {\n                        " + attr + ": 100%;\n                    }\n                }");
-          return;
-        }
-
-        addCssKeyframes(animationKey, "{\n                0% {\n                    transform: scale" + dir + "(1)" + translateZStr + ";\n                    -webkit-transform: scale" + dir + "(1)" + translateZStr + ";\n                }\n                50% {\n                    transform: scale" + dir + "(" + caterpillarMaxScale + ")" + translateZStr + ";\n                    -webkit-transform: scale" + dir + "(" + caterpillarMaxScale + ")" + translateZStr + ";\n                }\n                100% {\n                    transform: scale" + dir + "(1)" + translateZStr + ";\n                    -webkit-transform: scale" + dir + "(1)" + translateZStr + ";\n                }\n            }");
-        return function () {
-          removeCssStyleDom(animationKey);
-        };
-      }, [animationKey]);
       React.useEffect(function () {
         nextTick(function () {
           setCellOverflow(); // dom出来之后originArrange置空，交由tabBarArrange控制
@@ -6675,12 +6922,11 @@
           setShowLine(true);
         });
       }, [domRef.current, wrapSize, tabs]);
-      React.useEffect(function () {
-        resetUnderlineStyle();
-      }, [useCaterpillar, caterpillar, cellTrans, duration, tabDirection, wrapWidth, wrapHeight, distance, animationKey, caterpillarDelay]);
       React.useEffect(function () {
         nextTick(function () {
-          resetUnderlineStyle();
+          var _a;
+
+          (_a = underlineRef.current) === null || _a === void 0 ? void 0 : _a.resetUnderlineStyle();
         });
       }, [activeIndex, tabs, getCellPadding('left'), getCellPadding('right'), tabBarGutter, tabDirection]);
       React.useImperativeHandle(ref, function () {
@@ -6689,10 +6935,18 @@
           scrollTo: scrollTo,
           scrollToCenter: scrollToCenter,
           hasOverflow: hasOverflow,
-          setCaterpillarAnimate: setCaterpillarAnimate,
-          resetUnderlineStyle: resetUnderlineStyle
+          setCaterpillarAnimate: function setCaterpillarAnimate(ratio) {
+            var _a;
+
+            return (_a = underlineRef.current) === null || _a === void 0 ? void 0 : _a.setCaterpillarAnimate(ratio);
+          },
+          resetUnderlineStyle: function resetUnderlineStyle() {
+            var _a;
+
+            return (_a = underlineRef.current) === null || _a === void 0 ? void 0 : _a.resetUnderlineStyle();
+          }
         };
-      }, [scrollToCenter, scrollTo, hasOverflow, setCaterpillarAnimate, resetUnderlineStyle]);
+      }, [scrollToCenter, scrollTo, hasOverflow]);
       React.useEffect(function () {
         if (wrapSize && tabBarScrollChance !== 'none') {
           setTimeout(function () {
@@ -6708,28 +6962,18 @@
           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);
           }
         };
       }, [hasOverflow]);
-      React.useEffect(function () {
-        if (jumpingDis && useCaterpillar && system !== 'ios') {
-          var movedRatio = wrapWidth ? jumpingDis / wrapWidth : 0;
-          setCaterpillarAnimate(movedRatio);
-        }
-      }, [jumpingDis]);
-
-      function resetUnderlineStyle() {
-        setUnderlineStyle(getUnderlineStyle());
-      }
 
       function setCellOverflow() {
         var overflow = false;
@@ -6797,69 +7041,6 @@
         }
       }
 
-      function getUnderlineStyle() {
-        var transStyle = {};
-
-        if (useCaterpillar) {
-          transStyle.animationDuration = duration + "ms";
-        }
-
-        if (caterpillarRef.current && animationKey) {
-          transStyle.animationName = animationKey;
-        }
-
-        if (caterpillarDelay) {
-          transStyle.animationDelay = "-" + caterpillarDelay + "ms";
-        }
-
-        var lineStyle = getLineStyle();
-        return {
-          outer: getStyleWithVendor(__assign({
-            transitionDuration: cellTrans ? duration + "ms" : '0ms'
-          }, lineStyle.outer || {})),
-          inner: getStyleWithVendor(__assign(__assign({}, transStyle), lineStyle.inner || {}))
-        };
-      }
-
-      function getLineStyle() {
-        var _a;
-
-        if (!lineRef.current || !domRef.current) {
-          return {};
-        }
-
-        var currentLeft = getLineLeft(activeIndex);
-        var descIndex = getDescIndex();
-        var descLeft = getLineLeft(descIndex);
-        var moveRatio = wrapWidth ? distance / wrapWidth : 0;
-        var leftOffset = moveRatio * (currentLeft - descLeft);
-        var direc = isVertical ? 'X' : 'Y';
-        var transStyle = useCaterpillar && !jumpingDis ? caterpillarProperty === 'size' ? (_a = {}, _a[isVertical ? 'width' : 'height'] = 100 * getLineScale(moveRatio) + "%", _a.willChange = 'width', _a) : {
-          transform: "scale" + direc + "(" + getLineScale(moveRatio) + ")"
-        } : {};
-        var outerSize = isVertical ? {
-          width: underlineSize,
-          height: underlineThick
-        } : {
-          height: underlineSize,
-          width: underlineThick
-        };
-        return {
-          outer: __assign({
-            transform: "translate" + direc + "(" + (distance > 0 ? currentLeft - leftOffset : currentLeft + leftOffset) + "px)" + translateZStr
-          }, outerSize),
-          inner: __assign({}, transStyle)
-        };
-      }
-
-      function getLineLeft(index) {
-        var _a, _b;
-
-        var offsetSize = isVertical ? (_a = lineRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth : (_b = lineRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
-        var lineWidth = offsetSize || 0;
-        return getTabCenterLeft(index) - lineWidth / 2;
-      }
-
       function getTabCenterLeft(index) {
         var currentTab = allCellRectRef.current[index] || {};
         var currentTabWidth = (isVertical ? currentTab.width : currentTab.height) || 0;
@@ -6867,48 +7048,6 @@
         return currentTabLeft + currentTabWidth / 2;
       }
 
-      function getLineScale(ratio) {
-        var absRatio = Math.abs(ratio);
-        return absRatio > 0.5 ? (1 - absRatio) * 2 * (maxScaleWithDefault - 1) + 1 : absRatio * 2 * (maxScaleWithDefault - 1) + 1;
-      }
-
-      function getDescIndex() {
-        if (distance > 0) {
-          return activeIndex - 1;
-        }
-
-        if (distance < 0) {
-          return activeIndex + 1;
-        }
-
-        return activeIndex;
-      }
-
-      function setCaterpillarAnimate(movedRatio) {
-        if (movedRatio === void 0) {
-          movedRatio = 0;
-        }
-
-        if (!duration) {
-          return;
-        }
-
-        var movedTime = (duration || 0) * Math.abs(movedRatio);
-        setCaterpillarDelay(movedTime);
-        nextTick(function () {
-          setCaterpillar(true);
-        });
-
-        if (timeRef.current) {
-          clearTimeout(timeRef.current);
-        }
-
-        timeRef.current = window.setTimeout(function () {
-          setCaterpillar(false);
-          setCaterpillarDelay(0);
-        }, (duration || 0) - movedTime + 20);
-      }
-
       function getCellPadding(pType) {
         if (typeof cellPadding === 'object') {
           return cellPadding[pType];
@@ -6949,20 +7088,30 @@
           return null;
         }
 
-        return renderUnderline ? renderUnderline(underlineStyle, showLine, lineRef) : /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefix + "-underline", {
-            show: showLine
-          }),
-          ref: lineRef,
-          style: underlineStyle.outer
-        }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefix + "-underline-inner", {
-            caterpillar: caterpillar,
-            'custom-animate': animationKey,
-            'caterpillar-moving': caterpillar || useCaterpillar && distance
-          }, tabDirection),
-          style: __assign(__assign({}, underlineStyle.inner || {}), underlineInnerStyle || {})
-        }));
+        var lineProps = {
+          prefix: prefix,
+          showLine: showLine,
+          useCaterpillar: useCaterpillar,
+          distance: distance,
+          tabDirection: tabDirection,
+          underlineInnerStyle: underlineInnerStyle,
+          cellTrans: cellTrans,
+          duration: duration,
+          activeIndex: activeIndex,
+          wrapWidth: wrapWidth,
+          wrapHeight: wrapHeight,
+          jumpingDis: jumpingDis,
+          caterpillarMaxScale: caterpillarMaxScale,
+          caterpillarProperty: caterpillarProperty,
+          translateZ: translateZ,
+          underlineSize: underlineSize,
+          underlineThick: underlineThick,
+          renderUnderline: renderUnderline
+        };
+        return /*#__PURE__*/React__default["default"].createElement(TabCellUnderline, __assign({
+          ref: underlineRef,
+          getTabCenterLeft: getTabCenterLeft
+        }, lineProps));
       }
 
       var cellInner = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, tabs.map(function (tab, index) {
@@ -7862,44 +8011,46 @@
           _4 = props.translateZ,
           translateZ = _4 === void 0 ? true : _4,
           fullScreen = props.fullScreen,
-          autoHeight = props.autoHeight;
+          autoHeight = props.autoHeight,
+          _5 = props.tabBarStopPropagation,
+          tabBarStopPropagation = _5 === void 0 ? true : _5;
       var domRef = React.useRef(null);
       var cellRef = React.useRef(null);
       var paneRef = React.useRef(null);
 
-      var _5 = React.useState(defaultActiveTab),
-          innerIndex = _5[0],
-          setInnerIndex = _5[1];
-
-      var _6 = React.useState(0),
-          jumpingDis = _6[0],
-          setJumpingDis = _6[1];
+      var _6 = React.useState(defaultActiveTab),
+          innerIndex = _6[0],
+          setInnerIndex = _6[1];
 
       var _7 = React.useState(0),
-          wrapWidth = _7[0],
-          setWrapWidth = _7[1];
+          jumpingDis = _7[0],
+          setJumpingDis = _7[1];
 
       var _8 = React.useState(0),
-          wrapHeight = _8[0],
-          setWrapHeight = _8[1];
+          wrapWidth = _8[0],
+          setWrapWidth = _8[1];
 
-      var _9 = React.useState(false),
-          cellTrans = _9[0],
-          setCellTrans = _9[1];
+      var _9 = React.useState(0),
+          wrapHeight = _9[0],
+          setWrapHeight = _9[1];
 
       var _10 = React.useState(false),
-          paneTrans = _10[0],
-          setPaneTrans = _10[1];
+          cellTrans = _10[0],
+          setCellTrans = _10[1];
+
+      var _11 = React.useState(false),
+          paneTrans = _11[0],
+          setPaneTrans = _11[1];
 
-      var _11 = useRefState(activeTab === void 0 ? innerIndex : activeTab),
-          activeIndex = _11[0],
-          activeIndexRef = _11[1],
-          setActiveIndex = _11[2];
+      var _12 = useRefState(activeTab === void 0 ? innerIndex : activeTab),
+          activeIndex = _12[0],
+          activeIndexRef = _12[1],
+          setActiveIndex = _12[2];
 
-      var _12 = useRefState(0),
-          distance = _12[0],
-          distanceRef = _12[1],
-          setDistance = _12[2];
+      var _13 = useRefState(0),
+          distance = _13[0],
+          distanceRef = _13[1],
+          setDistance = _13[2];
 
       var posAdjustingRef = React.useRef(false);
       var touchStartedRef = React.useRef(false);
@@ -8215,7 +8366,8 @@
           renderTabBarItem: renderTabBarItem,
           renderTabBarInner: renderTabBarInner,
           tabBarStyle: tabBarStyle,
-          tabBarClass: tabBarClass
+          tabBarClass: tabBarClass,
+          tabBarStopPropagation: tabBarStopPropagation
         }, commonProps);
 
         var CellComp = /*#__PURE__*/React__default["default"].createElement(TabCell, __assign({}, cellProps));
@@ -12086,7 +12238,13 @@
             var height = container.getBoundingClientRect().height;
 
             if (height > max) {
-              break;
+              if (nodes[i].childNodes && nodes[i].childNodes.length) {
+                break;
+              } else {
+                textContainer.removeChild(nodes[i]);
+                handleOnReflow(true, textContainer.innerHTML);
+                return;
+              }
             }
 
             i++;
@@ -14389,7 +14547,6 @@
       var timeOutEvent;
 
       var handleTouchStart = function handleTouchStart(e, image, index) {
-        e.preventDefault();
         timeOutEvent = setTimeout(function () {
           timeOutEvent = 0;
           onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(e, image, index);
@@ -16695,14 +16852,7 @@
         var id = "_ARCO_IMAGE_PREVIEW_DIV_" + (baseProps.key || '') + "_";
         var div = appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-
-        function render(props) {
-          ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, props, {
-            getContainer: function getContainer() {
-              return div;
-            }
-          })), div);
-        }
+        var render = new ReactDOMRender(Component, div).render;
 
         function update(newConfig) {
           dynamicProps = __assign(__assign({}, dynamicProps), newConfig || {});
@@ -18567,16 +18717,16 @@
           document.body.appendChild(div);
         }
 
-        function render(props) {
-          ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, props)), div);
-        }
+        var _a = new ReactDOMRender(Component, div),
+            render = _a.render,
+            unmount = _a.unmount;
 
         function destroy() {
           var onClose = config.onClose;
           onClose && onClose();
-          var unmountResult = ReactDOM__default["default"].unmountComponentAtNode(div);
+          unmount();
 
-          if (unmountResult && div.parentNode) {
+          if (div.parentNode) {
             div.parentNode.removeChild(div);
           }
         }
@@ -19318,10 +19468,10 @@
           setDirectionState = _k[2];
 
       var getOffset = React.useCallback(function (dir) {
-        return getDefaultValue(isObject$1(edgeOffset) ? edgeOffset[dir] : edgeOffset, defaultEdgeOffset[dir]);
+        return getDefaultValue(isObject$2(edgeOffset) ? edgeOffset[dir] : edgeOffset, defaultEdgeOffset[dir]);
       }, [edgeOffset]);
       var getAutoDirection = React.useCallback(function (dir) {
-        return getDefaultValue(isObject$1(useAutoDirection) ? useAutoDirection[dir] : useAutoDirection, defaultAutoDirection);
+        return getDefaultValue(isObject$2(useAutoDirection) ? useAutoDirection[dir] : useAutoDirection, defaultAutoDirection);
       }, [useAutoDirection]);
       React.useEffect(function () {
         setDirectionState(direction);
@@ -19763,12 +19913,13 @@
       var closeTimer = React.useRef(0);
       /** 垂直方向自适应 */
 
-      var autoVerticalDirection = getDefaultValue(isObject$1(useAutoDirection) ? useAutoDirection.vertical : useAutoDirection, defaultAutoDirection);
+      var autoVerticalDirection = getDefaultValue(isObject$2(useAutoDirection) ? useAutoDirection.vertical : useAutoDirection, defaultAutoDirection);
 
       var popoverDisappear = function popoverDisappear() {
         onVisibleChange(false);
         window.clearTimeout(closeTimer.current);
         closeTimer.current = 0;
+        mayRemoveEventListenerOnBody();
       };
 
       var throttleHandleVerticalScroll = React.useMemo(function () {
@@ -19788,7 +19939,7 @@
         };
       }, [throttleHandleVerticalScroll, getVerticalScrollContainer, autoVerticalDirection, visibleRef]);
       var mayRemoveEventListenerOnBody = React.useCallback(function () {
-        document.body.removeEventListener('click', handleClickBody);
+        document.body.removeEventListener('click', handleClickBody, true);
         document.body.removeEventListener('touchstart', handleTouchBody);
         var el = getVerticalScrollContainer();
 
@@ -19803,7 +19954,6 @@
 
 
         if (!isContains(wrapperRef.current, e.target) && !isContains(((_a = popoverInnerRef.current) === null || _a === void 0 ? void 0 : _a.dom) || null, e.target)) {
-          // TODO: 这里仅阻止了react事件，react 18 将不再在document上挂事件，这里的stop会失效
           if (preventBodyClick) {
             e.stopPropagation();
             e.preventDefault();
@@ -19829,13 +19979,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);
       };
 
@@ -19878,7 +20028,7 @@
           var el = getVerticalScrollContainer();
           el && el.addEventListener('scroll', handleScrollBody);
         } else if (clickOtherToClose) {
-          document.body.addEventListener('click', handleClickBody);
+          document.body.addEventListener('click', handleClickBody, true);
         }
       };
       /**
@@ -23019,6 +23169,7 @@
 
       var dampRateRef = useLatestRef(dampRate);
       var forbidClick = React.useRef(false);
+      var scrollingRef = React.useRef(null);
 
       var _j = useRefState(false),
           moving = _j[0],
@@ -23033,6 +23184,7 @@
       var prefixCls = React.useContext(GlobalContext).prefixCls;
       var startRef = React.useRef(0);
       var startX = React.useRef(0);
+      var startY = React.useRef(0);
       var slideX = React.useRef(0);
       var isLayer = openStyleType === 'layer';
       var transitionStyle = React.useMemo(function () {
@@ -23043,6 +23195,7 @@
 
       function resetMoveData() {
         startX.current = 0;
+        startY.current = 0;
         slideX.current = 0;
       }
 
@@ -23054,19 +23207,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);