@douyinfe/semi-ui 2.22.3 → 2.23.0-beta.1

package/dist/umd/semi-ui.js

@@ -18234,9 +18234,11 @@ class foundation_Tooltip extends foundation {
         this._togglePortalVisible(true);
       });
 
-      const position = this.calcPosition(null, null, null, false);
+      this._adapter.insertPortal(content, {
+        left: -9990,
+        top: -9999
+      }); // offscreen rendering
 
-      this._adapter.insertPortal(content, position);
 
       if (trigger === 'custom') {
         // eslint-disable-next-line
@@ -18282,17 +18284,32 @@ class foundation_Tooltip extends foundation {
       containerRect = (isEmpty_default()(containerRect) ? _this._adapter.getPopupContainerRect() : containerRect) || Object.assign({}, defaultRect);
       wrapperRect = (isEmpty_default()(wrapperRect) ? _this._adapter.getWrapperBounding() : wrapperRect) || Object.assign({}, defaultRect); // console.log('containerRect: ', containerRect, 'triggerRect: ', triggerRect, 'wrapperRect: ', wrapperRect);
 
-      let style = _this.calcPosStyle(triggerRect, wrapperRect, containerRect);
+      let style = _this.calcPosStyle({
+        triggerRect,
+        wrapperRect,
+        containerRect
+      });
 
       let position = _this.getProp('position');
 
       if (_this.getProp('autoAdjustOverflow')) {
         // console.log('style: ', style, '\ntriggerRect: ', triggerRect, '\nwrapperRect: ', wrapperRect);
-        const adjustedPos = _this.adjustPosIfNeed(position, style, triggerRect, wrapperRect, containerRect);
+        const {
+          position: adjustedPos,
+          isHeightOverFlow,
+          isWidthOverFlow
+        } = _this.adjustPosIfNeed(position, style, triggerRect, wrapperRect, containerRect);
 
-        if (position !== adjustedPos) {
+        if (position !== adjustedPos || isHeightOverFlow || isWidthOverFlow) {
           position = adjustedPos;
-          style = _this.calcPosStyle(triggerRect, wrapperRect, containerRect, position);
+          style = _this.calcPosStyle({
+            triggerRect,
+            wrapperRect,
+            containerRect,
+            position,
+            spacing: null,
+            isOverFlow: [isHeightOverFlow, isWidthOverFlow]
+          });
         }
       }
 
@@ -18430,6 +18447,29 @@ class foundation_Tooltip extends foundation {
     this._adapter.unregisterResizeHandler(this.onResize);
   }
 
+  _adjustPos() {
+    let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let isVertical = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    let adjustType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'reverse';
+    let concatPos = arguments.length > 3 ? arguments[3] : undefined;
+
+    switch (adjustType) {
+      case 'reverse':
+        return this._reversePos(position, isVertical);
+
+      case 'expand':
+        // only happens when position is top/bottom/left/right
+        return this._expandPos(position, concatPos);
+
+      case 'reduce':
+        // only happens when position other than top/bottom/left/right
+        return this._reducePos(position);
+
+      default:
+        return this._reversePos(position, isVertical);
+    }
+  }
+
   _reversePos() {
     let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     let isVertical = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -18449,6 +18489,19 @@ class foundation_Tooltip extends foundation {
     return position;
   }
 
+  _expandPos() {
+    let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let concatPos = arguments.length > 1 ? arguments[1] : undefined;
+    return position.concat(concatPos);
+  }
+
+  _reducePos() {
+    let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    // if cur position consists of two directions, remove the last position
+    const found = ['Top', 'Bottom', 'Left', 'Right'].find(pos => position.endsWith(pos));
+    return found ? position.replace(found, '') : position;
+  }
+
   clearDelayTimer() {
     if (this._timer) {
       clearTimeout(this._timer);
@@ -18609,12 +18662,16 @@ class foundation_Tooltip extends foundation {
     return null;
   }
 
-  calcPosStyle(triggerRect, wrapperRect, containerRect, position, spacing) {
-    triggerRect = (isEmpty_default()(triggerRect) ? triggerRect : this._adapter.getTriggerBounding()) || Object.assign({}, defaultRect);
-    containerRect = (isEmpty_default()(containerRect) ? containerRect : this._adapter.getPopupContainerRect()) || Object.assign({}, defaultRect);
-    wrapperRect = (isEmpty_default()(wrapperRect) ? wrapperRect : this._adapter.getWrapperBounding()) || Object.assign({}, defaultRect); // eslint-disable-next-line
+  calcPosStyle(props) {
+    const {
+      spacing,
+      isOverFlow
+    } = props;
+    const triggerRect = (isEmpty_default()(props.triggerRect) ? props.triggerRect : this._adapter.getTriggerBounding()) || Object.assign({}, defaultRect);
+    const containerRect = (isEmpty_default()(props.containerRect) ? props.containerRect : this._adapter.getPopupContainerRect()) || Object.assign({}, defaultRect);
+    const wrapperRect = (isEmpty_default()(props.wrapperRect) ? props.wrapperRect : this._adapter.getWrapperBounding()) || Object.assign({}, defaultRect); // eslint-disable-next-line
 
-    position = position != null ? position : this.getProp('position'); // eslint-disable-next-line
+    const position = props.position != null ? props.position : this.getProp('position'); // eslint-disable-next-line
 
     const SPACING = spacing != null ? spacing : this.getProp('spacing');
     const {
@@ -18644,79 +18701,112 @@ class foundation_Tooltip extends foundation {
     const middleY = triggerRect.top + triggerRect.height / 2;
     const offsetXWithArrow = positionOffsetX + horizontalArrowWidth / 2;
     const offsetYWithArrow = positionOffsetY + verticalArrowHeight / 2;
+    const heightDifference = wrapperRect.height - containerRect.height;
+    const widthDifference = wrapperRect.width - containerRect.width;
+    const offsetHeight = heightDifference > 0 ? heightDifference : 0;
+    const offsetWidth = widthDifference > 0 ? widthDifference : 0;
+    const isHeightOverFlow = isOverFlow && isOverFlow[0];
+    const isWidthOverFlow = isOverFlow && isOverFlow[1];
+    const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
+    const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
 
     switch (position) {
       case 'top':
-        left = middleX;
-        top = triggerRect.top - SPACING;
+        // left = middleX;
+        // top = triggerRect.top - SPACING;
+        left = isWidthOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX;
+        top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
         translateX = -0.5;
         translateY = -1;
         break;
 
       case 'topLeft':
-        left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
-        top = triggerRect.top - SPACING;
+        // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
+        // top = triggerRect.top - SPACING;
+        left = isWidthOverFlow ? containerRect.left : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
+        top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
         translateY = -1;
         break;
 
       case 'topRight':
-        left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
-        top = triggerRect.top - SPACING;
+        // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
+        // top = triggerRect.top - SPACING;
+        left = isWidthOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
+        top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
         translateY = -1;
         translateX = -1;
         break;
 
       case 'left':
-        left = triggerRect.left - SPACING;
-        top = middleY;
+        // left = triggerRect.left - SPACING;
+        // top = middleY;
+        // left = isWidthOverFlow? containerRect.right - SPACING : triggerRect.left - SPACING;
+        left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
+        top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY;
         translateX = -1;
         translateY = -0.5;
         break;
 
       case 'leftTop':
-        left = triggerRect.left - SPACING;
-        top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
+        // left = triggerRect.left - SPACING;
+        // top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
+        left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
+        top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
         translateX = -1;
         break;
 
       case 'leftBottom':
-        left = triggerRect.left - SPACING;
-        top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
+        // left = triggerRect.left - SPACING;
+        // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
+        left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
+        top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
         translateX = -1;
         translateY = -1;
         break;
 
       case 'bottom':
-        left = middleX;
-        top = triggerRect.top + triggerRect.height + SPACING;
+        // left = middleX;
+        // top = triggerRect.top + triggerRect.height + SPACING;
+        left = isWidthOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX;
+        top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
         translateX = -0.5;
         break;
 
       case 'bottomLeft':
-        left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
-        top = triggerRect.bottom + SPACING;
+        // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
+        // top = triggerRect.bottom + SPACING;
+        left = isWidthOverFlow ? containerRect.left : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
+        top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
         break;
 
       case 'bottomRight':
-        left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
-        top = triggerRect.bottom + SPACING;
+        // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
+        // top = triggerRect.bottom + SPACING;
+        left = isWidthOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
+        top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
         translateX = -1;
         break;
 
       case 'right':
-        left = triggerRect.right + SPACING;
-        top = middleY;
+        // left = triggerRect.right + SPACING;
+        // top = middleY;
+        left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
+        top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY;
         translateY = -0.5;
         break;
 
       case 'rightTop':
-        left = triggerRect.right + SPACING;
-        top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
+        // left = triggerRect.right + SPACING;
+        // top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
+        left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
+        top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
         break;
 
       case 'rightBottom':
-        left = triggerRect.right + SPACING;
-        top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
+        // left = triggerRect.right + SPACING;
+        // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
+        left = isWidthOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
+        top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
         translateY = -1;
         break;
 
@@ -18823,12 +18913,53 @@ class foundation_Tooltip extends foundation {
 
   isLR() {
     let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    return position.indexOf('left') === 0 || position.indexOf('right') === 0;
+    return position.includes('left') || position.includes('right');
   }
 
   isTB() {
     let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    return position.indexOf('top') === 0 || position.indexOf('bottom') === 0;
+    return position.includes('top') || position.includes('bottom');
+  }
+
+  isReverse(rowSpace, reverseSpace, size) {
+    // 原空间不足，反向空间足够
+    // Insufficient original space, enough reverse space
+    return rowSpace < size && reverseSpace > size;
+  }
+
+  isOverFlow(rowSpace, reverseSpace, size) {
+    // 原空间且反向空间都不足
+    // The original space and the reverse space are not enough
+    return rowSpace < size && reverseSpace < size;
+  }
+
+  isHalfOverFlow(posSpace, negSpace, size) {
+    // 正半空间或者负半空间不足，即表示有遮挡，需要偏移
+    // Insufficient positive half space or negative half space means that there is occlusion and needs to be offset
+    return posSpace < size || negSpace < size;
+  }
+
+  isHalfAllEnough(posSpace, negSpace, size) {
+    // 正半空间和负半空间都足够，即表示可以从 topLeft/topRight 变成 top
+    // Both positive and negative half-spaces are sufficient, which means you can change from topLeft/topRight to top
+    return posSpace >= size || negSpace >= size;
+  }
+
+  getReverse(viewOverFlow, containerOverFlow, shouldReverseView, shouldReverseContainer) {
+    /**
+     * 基于视口和容器一起判断，以下几种情况允许从原方向转到反方向，以判断是否应该由top->bottom为例子
+     *
+     * 1. 视口上下空间不足 且 容器上空间❌下空间✅
+     * 2. 视口上空间❌下空间✅ 且 容器上下空间不足
+     * 3. 视口上空间❌下空间✅ 且 容器上空间❌下空间✅
+     *
+     * Based on the judgment of the viewport and the container, the following situations are allowed to turn from the original direction to the opposite direction
+     * to judge whether it should be top->bottom as an example
+     * 1. There is insufficient space above and below the viewport and the space above the container ❌ the space below ✅
+     * 2. The space above the viewport ❌ the space below ✅ and the space above and below the container is insufficient
+     * 3. Viewport upper space ❌ lower space✅ and container upper space ❌ lower space✅
+     */
+    return viewOverFlow && shouldReverseContainer || shouldReverseView && containerOverFlow || shouldReverseView && shouldReverseContainer;
   } // place the dom correctly
 
 
@@ -18838,8 +18969,15 @@ class foundation_Tooltip extends foundation {
       innerHeight
     } = window;
     const {
-      spacing
+      spacing,
+      margin
     } = this.getProps();
+    const marginLeft = typeof margin === 'number' ? margin : margin.marginLeft;
+    const marginTop = typeof margin === 'number' ? margin : margin.marginTop;
+    const marginRight = typeof margin === 'number' ? margin : margin.marginRight;
+    const marginBottom = typeof margin === 'number' ? margin : margin.marginBottom;
+    let isHeightOverFlow = false;
+    let isWidthOverFlow = false;
 
     if (wrapperRect.width > 0 && wrapperRect.height > 0) {
       // let clientLeft = left + translateX * wrapperRect.width - containerRect.scrollLeft;
@@ -18862,187 +19000,324 @@ class foundation_Tooltip extends foundation {
       const restClientBottom = innerHeight - clientBottom;
       const widthIsBigger = wrapperRect.width > triggerRect.width;
       const heightIsBigger = wrapperRect.height > triggerRect.height; // The wrapperR ect.top|bottom equivalent cannot be directly used here for comparison, which is easy to cause jitter
-
-      const shouldReverseTop = clientTop < wrapperRect.height + spacing && restClientBottom > wrapperRect.height + spacing;
-      const shouldReverseLeft = clientLeft < wrapperRect.width + spacing && restClientRight > wrapperRect.width + spacing;
-      const shouldReverseBottom = restClientBottom < wrapperRect.height + spacing && clientTop > wrapperRect.height + spacing;
-      const shouldReverseRight = restClientRight < wrapperRect.width + spacing && clientLeft > wrapperRect.width + spacing;
+      // 基于视口的微调判断
+      // Fine-tuning judgment based on viewport
+
+      const shouldViewReverseTop = clientTop - marginTop < wrapperRect.height + spacing && restClientBottom - marginBottom > wrapperRect.height + spacing;
+      const shouldViewReverseLeft = clientLeft - marginLeft < wrapperRect.width + spacing && restClientRight - marginRight > wrapperRect.width + spacing;
+      const shouldViewReverseBottom = restClientBottom - marginBottom < wrapperRect.height + spacing && clientTop - marginTop > wrapperRect.height + spacing;
+      const shouldViewReverseRight = restClientRight - marginRight < wrapperRect.width + spacing && clientLeft - marginLeft > wrapperRect.width + spacing;
+      const shouldViewReverseTopOver = restClientTop - marginBottom < wrapperRect.height + spacing && clientBottom - marginTop > wrapperRect.height + spacing;
+      const shouldViewReverseBottomOver = clientBottom - marginTop < wrapperRect.height + spacing && restClientTop - marginBottom > wrapperRect.height + spacing;
+      const shouldViewReverseTopSide = restClientTop < wrapperRect.height && clientBottom > wrapperRect.height;
+      const shouldViewReverseBottomSide = clientBottom < wrapperRect.height && restClientTop > wrapperRect.height;
+      const shouldViewReverseLeftSide = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
+      const shouldViewReverseRightSide = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
       const shouldReverseTopOver = restClientTop < wrapperRect.height + spacing && clientBottom > wrapperRect.height + spacing;
       const shouldReverseBottomOver = clientBottom < wrapperRect.height + spacing && restClientTop > wrapperRect.height + spacing;
-      const shouldReverseTopSide = restClientTop < wrapperRect.height && clientBottom > wrapperRect.height;
-      const shouldReverseBottomSide = clientBottom < wrapperRect.height && restClientTop > wrapperRect.height;
-      const shouldReverseLeftSide = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
-      const shouldReverseRightSide = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
       const shouldReverseLeftOver = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
-      const shouldReverseRightOver = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
+      const shouldReverseRightOver = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width; // 基于容器的微调判断
+      // Fine-tuning judgment based on container
+
+      const clientTopInContainer = clientTop - containerRect.top;
+      const clientLeftInContainer = clientLeft - containerRect.left;
+      const clientBottomInContainer = clientTopInContainer + triggerRect.height;
+      const clientRightInContainer = clientLeftInContainer + triggerRect.width;
+      const restClientBottomInContainer = containerRect.bottom - clientBottom;
+      const restClientRightInContainer = containerRect.right - clientRight;
+      const restClientTopInContainer = restClientBottomInContainer + triggerRect.height;
+      const restClientLeftInContainer = restClientRightInContainer + triggerRect.width; // 当原空间不足，反向空间足够时，可以反向。
+      // When the original space is insufficient and the reverse space is sufficient, the reverse can be performed.
+
+      const shouldContainerReverseTop = this.isReverse(clientTopInContainer - marginTop, restClientBottomInContainer - marginBottom, wrapperRect.height + spacing);
+      const shouldContainerReverseLeft = this.isReverse(clientLeftInContainer - marginLeft, restClientRightInContainer - marginRight, wrapperRect.width + spacing);
+      const shouldContainerReverseBottom = this.isReverse(restClientBottomInContainer - marginBottom, clientTopInContainer - marginTop, wrapperRect.height + spacing);
+      const shouldContainerReverseRight = this.isReverse(restClientRightInContainer - marginRight, clientLeftInContainer - marginLeft, wrapperRect.width + spacing);
+      const shouldContainerReverseTopOver = this.isReverse(restClientTopInContainer - marginBottom, clientBottomInContainer - marginTop, wrapperRect.height + spacing);
+      const shouldContainerReverseBottomOver = this.isReverse(clientBottomInContainer - marginTop, restClientTopInContainer - marginBottom, wrapperRect.height + spacing);
+      const shouldContainerReverseTopSide = this.isReverse(restClientTopInContainer, clientBottomInContainer, wrapperRect.height);
+      const shouldContainerReverseBottomSide = this.isReverse(clientBottomInContainer, restClientTopInContainer, wrapperRect.height);
+      const shouldContainerReverseLeftSide = this.isReverse(restClientLeftInContainer, clientRightInContainer, wrapperRect.width);
+      const shouldContainerReverseRightSide = this.isReverse(clientRightInContainer, restClientLeftInContainer, wrapperRect.width);
+      const halfHeight = triggerRect.height / 2;
+      const halfWidth = triggerRect.width / 2; // 视口, 原空间与反向空间是否都不足判断
+      // Viewport, whether the original space and the reverse space are insufficient to judge
+
+      const isViewYOverFlow = this.isOverFlow(clientTop - marginTop, restClientBottom - marginBottom, wrapperRect.height + spacing);
+      const isViewXOverFlow = this.isOverFlow(clientLeft - marginLeft, restClientRight - marginRight, wrapperRect.width + spacing);
+      const isViewYOverFlowSide = this.isOverFlow(clientBottom - marginTop, restClientTop - marginBottom, wrapperRect.height + spacing);
+      const isViewXOverFlowSide = this.isOverFlow(clientRight - marginLeft, restClientLeft - marginRight, wrapperRect.width + spacing);
+      const isViewYOverFlowSideHalf = this.isHalfOverFlow(clientBottom - halfHeight, restClientTop - halfHeight, wrapperRect.height / 2);
+      const isViewXOverFlowSideHalf = this.isHalfOverFlow(clientRight - halfWidth, restClientLeft - halfWidth, wrapperRect.width / 2);
+      const isViewYEnoughSideHalf = this.isHalfAllEnough(clientBottom - halfHeight, restClientTop - halfHeight, wrapperRect.height / 2);
+      const isViewXEnoughSideHalf = this.isHalfAllEnough(clientRight - halfWidth, restClientLeft - halfWidth, wrapperRect.width / 2); // 容器, 原空间与反向空间是否都不足判断
+      // container, whether the original space and the reverse space are insufficient to judge
+
+      const isContainerYOverFlow = this.isOverFlow(clientTopInContainer - marginTop, restClientBottomInContainer - marginBottom, wrapperRect.height + spacing);
+      const isContainerXOverFlow = this.isOverFlow(clientLeftInContainer - marginLeft, restClientRightInContainer - marginRight, wrapperRect.width + spacing);
+      const isContainerYOverFlowSide = this.isOverFlow(clientBottomInContainer - marginTop, restClientTopInContainer - marginBottom, wrapperRect.height + spacing);
+      const isContainerXOverFlowSide = this.isOverFlow(clientRightInContainer - marginLeft, restClientLeftInContainer - marginRight, wrapperRect.width + spacing);
+      const isContainerYOverFlowSideHalf = this.isHalfOverFlow(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, wrapperRect.height / 2);
+      const isContainerXOverFlowSideHalf = this.isHalfOverFlow(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, wrapperRect.width / 2);
+      const isContainerYEnoughSideHalf = this.isHalfAllEnough(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, wrapperRect.height / 2);
+      const isContainerXEnoughSideHalf = this.isHalfAllEnough(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, wrapperRect.width / 2); // 综合 viewport + container 判断微调，即视口 + 容器都放置不行时才能考虑位置调整
+      // Comprehensive viewport + container judgment fine-tuning, that is, the position adjustment can only be considered when the viewport + container cannot be placed.
+
+      const shouldReverseTop = this.getReverse(isViewYOverFlow, isContainerYOverFlow, shouldViewReverseTop, shouldContainerReverseTop);
+      const shouldReverseLeft = this.getReverse(isViewXOverFlow, isContainerXOverFlow, shouldViewReverseLeft, shouldContainerReverseLeft);
+      const shouldReverseBottom = this.getReverse(isViewYOverFlow, isContainerYOverFlow, shouldViewReverseBottom, shouldContainerReverseBottom);
+      const shouldReverseRight = this.getReverse(isViewXOverFlow, isContainerXOverFlow, shouldViewReverseRight, shouldContainerReverseRight); // const shouldReverseTopOver = this.getReverse(isViewYOverFlowSide, isContainerYOverFlowSide, shouldViewReverseTopOver, shouldContainerReverseTopOver);
+      // const shouldReverseBottomOver = this.getReverse(isViewYOverFlowSide, isContainerYOverFlowSide, shouldViewReverseBottomOver, shouldContainerReverseBottomOver);
+
+      const shouldReverseTopSide = this.getReverse(isViewYOverFlowSide, isContainerYOverFlowSide, shouldViewReverseTopSide, shouldContainerReverseTopSide);
+      const shouldReverseBottomSide = this.getReverse(isViewYOverFlowSide, isContainerYOverFlowSide, shouldViewReverseBottomSide, shouldContainerReverseBottomSide);
+      const shouldReverseLeftSide = this.getReverse(isViewXOverFlowSide, isContainerXOverFlowSide, shouldViewReverseLeftSide, shouldContainerReverseLeftSide);
+      const shouldReverseRightSide = this.getReverse(isViewXOverFlowSide, isContainerXOverFlowSide, shouldViewReverseRightSide, shouldContainerReverseRightSide);
+      const isYOverFlowSideHalf = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf;
+      const isXOverFlowSideHalf = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf;
 
       switch (position) {
         case 'top':
           if (shouldReverseTop) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
+          }
+
+          if (isXOverFlowSideHalf && (shouldReverseLeftSide || shouldReverseRightSide)) {
+            position = this._adjustPos(position, true, 'expand', shouldReverseLeftSide ? 'Right' : 'Left');
           }
 
           break;
 
         case 'topLeft':
           if (shouldReverseTop) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
           }
 
           if (shouldReverseLeftSide && widthIsBigger) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position, true);
+          }
+
+          if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {
+            position = this._adjustPos(position, true, 'reduce');
           }
 
           break;
 
         case 'topRight':
           if (shouldReverseTop) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
           }
 
           if (shouldReverseRightSide && widthIsBigger) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
+          }
+
+          if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {
+            position = this._adjustPos(position, true, 'reduce');
           }
 
           break;
 
         case 'left':
           if (shouldReverseLeft) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
+          }
+
+          if (isYOverFlowSideHalf && (shouldReverseTopSide || shouldReverseBottomSide)) {
+            position = this._adjustPos(position, false, 'expand', shouldReverseTopSide ? 'Bottom' : 'Top');
           }
 
           break;
 
         case 'leftTop':
           if (shouldReverseLeft) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
           }
 
           if (shouldReverseTopSide && heightIsBigger) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
+          }
+
+          if (isHeightOverFlow && (isViewYEnoughSideHalf || isContainerYEnoughSideHalf)) {
+            position = this._adjustPos(position, false, 'reduce');
           }
 
           break;
 
         case 'leftBottom':
           if (shouldReverseLeft) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
           }
 
           if (shouldReverseBottomSide && heightIsBigger) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
+          }
+
+          if (isHeightOverFlow && (isViewYEnoughSideHalf || isContainerYEnoughSideHalf)) {
+            position = this._adjustPos(position, false, 'reduce');
           }
 
           break;
 
         case 'bottom':
           if (shouldReverseBottom) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
+          }
+
+          if (isXOverFlowSideHalf && (shouldReverseLeftSide || shouldReverseRightSide)) {
+            position = this._adjustPos(position, true, 'expand', shouldReverseLeftSide ? 'Right' : 'Left');
           }
 
           break;
 
         case 'bottomLeft':
           if (shouldReverseBottom) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
           }
 
           if (shouldReverseLeftSide && widthIsBigger) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
+          }
+
+          if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {
+            position = this._adjustPos(position, true, 'reduce');
           }
 
           break;
 
         case 'bottomRight':
           if (shouldReverseBottom) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
           }
 
           if (shouldReverseRightSide && widthIsBigger) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
+          }
+
+          if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {
+            position = this._adjustPos(position, true, 'reduce');
           }
 
           break;
 
         case 'right':
           if (shouldReverseRight) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
+          }
+
+          if (isYOverFlowSideHalf && (shouldReverseTopSide || shouldReverseBottomSide)) {
+            position = this._adjustPos(position, false, 'expand', shouldReverseTopSide ? 'Bottom' : 'Top');
           }
 
           break;
 
         case 'rightTop':
           if (shouldReverseRight) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
           }
 
           if (shouldReverseTopSide && heightIsBigger) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
+          }
+
+          if (isHeightOverFlow && (isViewYEnoughSideHalf || isContainerYEnoughSideHalf)) {
+            position = this._adjustPos(position, false, 'reduce');
           }
 
           break;
 
         case 'rightBottom':
           if (shouldReverseRight) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
           }
 
           if (shouldReverseBottomSide && heightIsBigger) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
+          }
+
+          if (isHeightOverFlow && (isViewYEnoughSideHalf || isContainerYEnoughSideHalf)) {
+            position = this._adjustPos(position, false, 'reduce');
           }
 
           break;
 
         case 'leftTopOver':
           if (shouldReverseTopOver) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
           }
 
           if (shouldReverseLeftOver) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
           }
 
           break;
 
         case 'leftBottomOver':
           if (shouldReverseBottomOver) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
           }
 
           if (shouldReverseLeftOver) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
           }
 
           break;
 
         case 'rightTopOver':
           if (shouldReverseTopOver) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
           }
 
           if (shouldReverseRightOver) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
           }
 
           break;
 
         case 'rightBottomOver':
           if (shouldReverseBottomOver) {
-            position = this._reversePos(position, true);
+            position = this._adjustPos(position, true);
           }
 
           if (shouldReverseRightOver) {
-            position = this._reversePos(position);
+            position = this._adjustPos(position);
           }
 
           break;
 
         default:
           break;
+      } // 判断溢出 Judgment overflow
+      // 上下方向 top and bottom
+
+
+      if (this.isTB(position)) {
+        isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow;
+
+        if (position === 'top' || position === 'bottom') {
+          isWidthOverFlow = isViewXOverFlowSideHalf && isContainerXOverFlowSideHalf;
+        } else {
+          isWidthOverFlow = isViewXOverFlowSide && isContainerXOverFlowSide;
+        }
+      } // 左右方向 left and right
+
+
+      if (this.isLR(position)) {
+        isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow;
+
+        if (position === 'left' || position === 'right') {
+          isHeightOverFlow = isViewYOverFlowSideHalf && isContainerYOverFlowSideHalf;
+        } else {
+          isHeightOverFlow = isViewYOverFlowSide && isContainerYOverFlowSide;
+        }
       }
     }
 
-    return position;
+    return {
+      position,
+      isHeightOverFlow,
+      isWidthOverFlow
+    };
   }
 
   _bindScrollEvent() {
@@ -19211,8 +19486,8 @@ const numbers = {
   DEFAULT_Z_INDEX: 1060,
   MOUSE_ENTER_DELAY: 50,
   MOUSE_LEAVE_DELAY: 50,
-  SPACING: 8 // Values are consistent with spacing-tight in scss
-
+  SPACING: 8,
+  MARGIN: 0
 };
 
 // CONCATENATED MODULE: ../semi-foundation/utils/uuid.ts
@@ -20320,6 +20595,7 @@ tooltip_Tooltip.propTypes = {
   onVisibleChange: prop_types_default.a.func,
   onClickOutSide: prop_types_default.a.func,
   spacing: prop_types_default.a.number,
+  margin: prop_types_default.a.oneOfType([prop_types_default.a.number, prop_types_default.a.object]),
   showArrow: prop_types_default.a.oneOfType([prop_types_default.a.bool, prop_types_default.a.node]),
   zIndex: prop_types_default.a.number,
   rePosKey: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.number]),
@@ -20349,6 +20625,7 @@ tooltip_Tooltip.defaultProps = {
   onVisibleChange: noop_default.a,
   onClickOutSide: noop_default.a,
   spacing: numbers.SPACING,
+  margin: numbers.MARGIN,
   showArrow: true,
   wrapWhenSpecial: true,
   zIndex: numbers.DEFAULT_Z_INDEX,
@@ -22859,6 +23136,13 @@ const IconWindowAdaptionStroked_IconComponent = convertIcon(IconWindowAdaptionSt
 
 
 
+
+
+
+
+
+
+
 
 
 
@@ -40525,27 +40809,33 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
       return state;
     };
 
-    this.renderIcon = type => {
+    this.renderIcon = function (type) {
+      let haveMarginLeft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      const finalCls = style => {
+        return style + (haveMarginLeft ? " ".concat(item_prefixcls, "-icon-left") : '');
+      };
+
       switch (type) {
         case 'child':
           return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconChevronRight, {
-            className: "".concat(item_prefixcls, "-icon ").concat(item_prefixcls, "-icon-expand")
+            className: finalCls("".concat(item_prefixcls, "-icon ").concat(item_prefixcls, "-icon-expand"))
           });
 
         case 'tick':
           return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconTick, {
-            className: "".concat(item_prefixcls, "-icon ").concat(item_prefixcls, "-icon-active")
+            className: finalCls("".concat(item_prefixcls, "-icon ").concat(item_prefixcls, "-icon-active"))
           });
 
         case 'loading':
           return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(spin_0, {
-            wrapperClassName: "".concat(item_prefixcls, "-spin-icon")
+            wrapperClassName: finalCls("".concat(item_prefixcls, "-spin-icon"))
           });
 
         case 'empty':
           return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
             "aria-hidden": true,
-            className: "".concat(item_prefixcls, "-icon ").concat(item_prefixcls, "-icon-empty")
+            className: finalCls("".concat(item_prefixcls, "-icon ").concat(item_prefixcls, "-icon-empty"))
           });
 
         default:
@@ -40693,7 +40983,7 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
         indeterminate: halfCheckedKeys.has(item.key),
         checked: checkedKeys.has(item.key),
         className: "".concat(item_prefixcls, "-label-checkbox")
-      }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child') : null);
+      }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child', true) : null);
     })));
 
     if (showChildItem) {
@@ -43320,20 +43610,22 @@ class tagInput_TagInput extends baseComponent_BaseComponent {
       return tagsArray.map((value, index) => {
         const elementKey = showIconHandler ? value : "".concat(index).concat(value);
 
+        const onClose = () => {
+          !disabled && this.handleTagClose(index);
+        };
+
         if (isFunction_default()(renderTagItem)) {
           return showIconHandler ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
             className: itemWrapperCls,
             key: elementKey
-          }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(DragHandle, null), renderTagItem(value, index)) : renderTagItem(value, index);
+          }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(DragHandle, null), renderTagItem(value, index, onClose)) : renderTagItem(value, index, onClose);
         } else {
           return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(tag_Tag, {
             className: tagCls,
             color: "white",
             size: size === 'small' ? 'small' : 'large',
             type: "light",
-            onClose: () => {
-              !disabled && this.handleTagClose(index);
-            },
+            onClose: onClose,
             closable: !disabled,
             key: elementKey,
             visible: true,
@@ -64606,7 +64898,8 @@ class Item_NavItem extends baseComponent_BaseComponent {
       link,
       linkOptions,
       disabled,
-      level = 0
+      level = 0,
+      tabIndex
     } = this.props;
     const {
       mode,
@@ -64669,7 +64962,8 @@ class Item_NavItem extends baseComponent_BaseComponent {
         ["".concat(Item_clsPrefix, "-sub")]: isSubNav,
         ["".concat(Item_clsPrefix, "-selected")]: selected && !isSubNav,
         ["".concat(Item_clsPrefix, "-collapsed")]: isCollapsed,
-        ["".concat(Item_clsPrefix, "-disabled")]: disabled
+        ["".concat(Item_clsPrefix, "-disabled")]: disabled,
+        ["".concat(Item_clsPrefix, "-has-link")]: typeof link === 'string'
       });
       const ariaProps = {
         'aria-disabled': disabled
@@ -64686,7 +64980,7 @@ class Item_NavItem extends baseComponent_BaseComponent {
       external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", Object.assign({
         // if role = menuitem, the narration will read all expanded li
         role: isSubNav ? null : "menuitem",
-        tabIndex: isSubNav ? -1 : 0
+        tabIndex: isSubNav ? -1 : tabIndex
       }, ariaProps, {
         style: style,
         ref: this.setItemRef,
@@ -64725,7 +65019,8 @@ Item_NavItem.propTypes = {
   isSubNav: prop_types_default.a.bool,
   link: prop_types_default.a.string,
   linkOptions: prop_types_default.a.object,
-  disabled: prop_types_default.a.bool
+  disabled: prop_types_default.a.bool,
+  tabIndex: prop_types_default.a.number
 };
 Item_NavItem.defaultProps = {
   isSubNav: false,
@@ -64735,7 +65030,8 @@ Item_NavItem.defaultProps = {
   onClick: noop_default.a,
   onMouseEnter: noop_default.a,
   onMouseLeave: noop_default.a,
-  disabled: false
+  disabled: false,
+  tabIndex: 0
 };
 // CONCATENATED MODULE: ./navigation/SubNav.tsx
 
@@ -79057,7 +79353,8 @@ const DEFAULT_CELL_MIDDLE_PADDING_TOP = 12;
 const DEFAULT_CELL_MIDDLE_PADDING_BOTTOM = 12;
 const DEFAULT_CELL_SMALL_PADDING_TOP = 8;
 const DEFAULT_CELL_SMALL_PADDING_BOTTOM = 8;
-const DEFAULT_CELL_LINE_HEIGHT = 20; // normal size
+const DEFAULT_CELL_LINE_HEIGHT = 20;
+const DEFAULT_EMPTYSLOT_HEIGHT = 52; // normal size
 
 const DEFAULT_VIRTUALIZED_ROW_HEIGHT = DEFAULT_CELL_LINE_HEIGHT + DEFAULT_CELL_BORDER_WITH_BOTTOM + DEFAULT_CELL_BORDER_WITH_TOP + DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM;
 const DEFAULT_VIRTUALIZED_ROW_MIN_HEIGHT = DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM + DEFAULT_CELL_BORDER_WITH_BOTTOM; // middle  size
@@ -79093,7 +79390,8 @@ const table_constants_numbers = {
   DEFAULT_VIRTUALIZED_ROW_MIDDLE_MIN_HEIGHT,
   DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
   DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
-  DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT
+  DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT,
+  DEFAULT_EMPTYSLOT_HEIGHT
 };
 
 // CONCATENATED MODULE: ../semi-foundation/utils/Logger.ts
@@ -83792,7 +84090,7 @@ class Body_Body extends baseComponent_BaseComponent {
           width: tableWidth
         },
         className: tableCls
-      }, size_default()(dataSource) === 0 ? emptySlot : children));
+      }, children), size_default()(dataSource) === 0 && emptySlot);
     });
 
     this.onItemsRendered = props => {
@@ -83832,7 +84130,7 @@ class Body_Body extends baseComponent_BaseComponent {
 
       const listStyle = {
         width: '100%',
-        height: (virtualizedData === null || virtualizedData === void 0 ? void 0 : virtualizedData.length) ? y : 0,
+        height: (virtualizedData === null || virtualizedData === void 0 ? void 0 : virtualizedData.length) ? y : table_constants_numbers.DEFAULT_EMPTYSLOT_HEIGHT,
         overflowX: 'auto',
         overflowY: 'auto'
       };
@@ -85030,8 +85328,9 @@ class Table_Table extends baseComponent_BaseComponent {
         useFixedHeader,
         headerRef: this._cacheHeaderRef,
         bodyRef: this.bodyWrapRef,
-        includeHeader: !useFixedHeader
-      })), emptySlot, this.renderFooter(props)];
+        includeHeader: !useFixedHeader,
+        emptySlot
+      })), this.renderFooter(props)];
       return table;
     };
 
@@ -96668,7 +96967,7 @@ class foundation_TransferFoundation extends foundation {
     return path.map(p => p.label).join(' > ');
   }
 
-  handleInputChange(inputVal) {
+  handleInputChange(inputVal, notify) {
     const {
       data
     } = this.getStates();
@@ -96682,7 +96981,7 @@ class foundation_TransferFoundation extends foundation {
 
       this._adapter.searchTree(inputVal);
 
-      this._adapter.notifySearch(inputVal);
+      notify && this._adapter.notifySearch(inputVal);
 
       this._adapter.updateInput(inputVal);
 
@@ -96694,8 +96993,7 @@ class foundation_TransferFoundation extends foundation {
     const filterFunc = typeof filter === 'function' ? item => filter(inputVal, item) : item => typeof item.label === 'string' && item.label.includes(inputVal);
     const searchData = data.filter(filterFunc);
     const searchResult = new Set(searchData.map(item => item.key));
-
-    this._adapter.notifySearch(inputVal);
+    notify && this._adapter.notifySearch(inputVal);
 
     this._adapter.updateInput(inputVal);
 
@@ -97040,7 +97338,13 @@ class transfer_Transfer extends baseComponent_BaseComponent {
   }
 
   onInputChange(value) {
-    this.foundation.handleInputChange(value);
+    this.foundation.handleInputChange(value, true);
+  }
+
+  search(value) {
+    // The search method is used to provide the user with a manually triggered search
+    // Since the method is manually called by the user, setting the second parameter to false does not trigger the onSearch callback to notify the user
+    this.foundation.handleInputChange(value, false);
   }
 
   onSelectOrRemove(item) {
@@ -100352,9 +100656,9 @@ class previewFooterFoundation_PreviewFooterFoundation extends foundation {
       } = this.getProps();
 
       if (value > zoom) {
-        onZoomIn(value / 100);
+        onZoomIn(Number((value / 100).toFixed(2)));
       } else {
-        onZoomOut(value / 100);
+        onZoomOut(Number((value / 100).toFixed(2)));
       }
 
       this._adapter.setStartMouseOffset(value);
@@ -101281,7 +101585,7 @@ previewImage_PreviewImage.propTypes = {
   zoomStep: prop_types_default.a.number,
   zoom: prop_types_default.a.number,
   ratio: prop_types_default.a.string,
-  disableDownload: prop_types_default.a.number,
+  disableDownload: prop_types_default.a.bool,
   clickZoom: prop_types_default.a.number,
   setRatio: prop_types_default.a.func,
   onZoom: prop_types_default.a.func,
@@ -101511,7 +101815,7 @@ class previewInnerFoundation_PreviewInnerFoundation extends foundation {
         });
       }
 
-      this._adapter.notifyChange(newIndex);
+      this._adapter.notifyChange(newIndex, direction);
 
       this.setState({
         direction,
@@ -101823,11 +102127,19 @@ class previewInner_PreviewInner extends baseComponent_BaseComponent {
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       getIsInGroup: () => this.isInGroup(),
-      notifyChange: index => {
+      notifyChange: (index, direction) => {
         const {
-          onChange
+          onChange,
+          onPrev,
+          onNext
         } = this.props;
         isFunction_default()(onChange) && onChange(index);
+
+        if (direction === "prev") {
+          onPrev && onPrev(index);
+        } else {
+          onNext && onNext(index);
+        }
       },
       notifyZoom: (zoom, increase) => {
         const {
@@ -101861,9 +102173,9 @@ class previewInner_PreviewInner extends baseComponent_BaseComponent {
       },
       notifyRotateChange: angle => {
         const {
-          onRotateChange
+          onRotateLeft
         } = this.props;
-        isFunction_default()(onRotateChange) && onRotateChange(angle);
+        isFunction_default()(onRotateLeft) && onRotateLeft(angle);
       },
       notifyDownload: (src, index) => {
         const {
@@ -102121,7 +102433,7 @@ previewInner_PreviewInner.propTypes = {
   onNext: prop_types_default.a.func,
   onDownload: prop_types_default.a.func,
   onRatioChange: prop_types_default.a.func,
-  onRotateChange: prop_types_default.a.func
+  onRotateLeft: prop_types_default.a.func
 };
 previewInner_PreviewInner.defaultProps = {
   showTooltip: false,
@@ -102198,7 +102510,7 @@ class imageFoundation_ImageFoundation extends foundation {
         } = preview;
         onVisibleChange && onVisibleChange(newVisible);
 
-        if (!("visible" in this.getProps())) {
+        if (!("visible" in preview)) {
           this.setState({
             previewVisible: newVisible
           });
@@ -102218,6 +102530,7 @@ var image_image = __webpack_require__("txvO");
 // CONCATENATED MODULE: ./image/image.tsx
 
 
+
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -102349,6 +102662,16 @@ class image_Image extends baseComponent_BaseComponent {
       willUpdateStates.loadStatus = "loading";
     }
 
+    if (isObject_default()(props.preview)) {
+      const {
+        visible
+      } = props.preview;
+
+      if (isBoolean_default()(visible)) {
+        willUpdateStates.previewVisible = visible;
+      }
+    }
+
     return willUpdateStates;
   }
 
@@ -102709,8 +103032,8 @@ preview_Preview.propTypes = {
   onPrev: prop_types_default.a.func,
   onNext: prop_types_default.a.func,
   onDownload: prop_types_default.a.func,
-  onRatioChange: prop_types_default.a.func,
-  onRotateChange: prop_types_default.a.func
+  onRotateLeft: prop_types_default.a.func,
+  onRatioChange: prop_types_default.a.func
 };
 preview_Preview.defaultProps = {
   src: [],