@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/tooltip/foundation.ts

@@ -1,6 +1,3 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable prefer-destructuring, max-lines-per-function, one-var, max-len, @typescript-eslint/restrict-plus-operands */
-/* argus-disable unPkgSensitiveInfo */
 import { get, isEmpty } from 'lodash';
 import { DOMRectLikeType } from '../utils/dom';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
@@ -38,6 +35,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     unregisterScrollHandler(): void;
     insertPortal(...args: any[]): void;
     removePortal(...args: any[]): void;
+    setDisplayNone: (displayNone: boolean, cb?: () => void) => void;
     getEventName(): {
         mouseEnter: string;
         mouseLeave: string;
@@ -46,7 +44,8 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
         click: string;
         focus: string;
         blur: string;
-        keydown: string
+        keydown: string;
+        contextMenu: string
     };
     registerTriggerEvent(...args: any[]): void;
     getTriggerBounding(...args: any[]): DOMRect;
@@ -114,6 +113,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         this._adapter.unregisterClickOutsideHandler();
         this.unBindResizeEvent();
         this.unBindScrollEvent();
+        clearTimeout(this._timer);
     }
 
     _bindTriggerEvent(triggerEventSet: Record<string, any>) {
@@ -138,6 +138,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         this._adapter.removePortal();
     }
 
+    setDisplayNone: (displayNone: boolean, cb?: () => void) => void = (displayNone, cb) => {
+        this._adapter.setDisplayNone(displayNone, cb);
+    }
+
     _adjustPos(position = '', isVertical = false, adjustType = 'reverse', concatPos?: any) {
         switch (adjustType) {
             case 'reverse':
@@ -254,6 +258,13 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 // when trigger type is 'custom', no need to bind eventHandler
                 // show/hide completely depend on props.visible which change by user
                 break;
+            case 'contextMenu':
+                triggerEventSet[eventNames.contextMenu] = (e) => {
+                    e.preventDefault();
+                    this.show();
+                };
+                // Click outside needs special treatment, can not be directly tied to the trigger Element, need to be bound to the document
+                break;
             default:
                 break;
         }
@@ -266,7 +277,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         this.calcPosition();
     };
 
-    _shouldShow() {
+    _shouldShow() { 
         const visible = this.getProp('visible');
         if (visible) {
             this.show();
@@ -294,7 +305,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         const content = this.getProp('content');
         const trigger = this.getProp('trigger');
         const clickTriggerToHide = this.getProp('clickTriggerToHide');
-        const { visible } = this.getStates();
+        const { visible, displayNone } = this.getStates();
+        if (displayNone) {
+            this.setDisplayNone(false);
+        } 
         if (visible) {
             return ;
         }
@@ -317,7 +331,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         this._adapter.insertPortal(content, { left: -9999, top: -9999 }); // offscreen rendering
 
         if (trigger === 'custom') {
-            // eslint-disable-next-line
             this._adapter.registerClickOutsideHandler(() => {});
         }
 
@@ -330,7 +343,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
          * Because the handler needs to be bound to the document. If you bind during the constructor phase
          * When there are multiple container instances in a page, one click triggers the handler of multiple containers
          */
-        if (trigger === 'click' || clickTriggerToHide) {
+        if (trigger === 'click' || clickTriggerToHide || trigger === 'contextMenu') {
             this._adapter.registerClickOutsideHandler(this.hide);
         }
 
@@ -359,7 +372,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     }
 
     calcTransformOrigin(position: Position, triggerRect: DOMRect, translateX: number, translateY: number) {
-        // eslint-disable-next-line
         if (position && triggerRect && translateX != null && translateY != null) {
             if (this.getProp('transformFromCenter')) {
                 if (['topLeft', 'bottomLeft'].includes(position)) {
@@ -387,18 +399,27 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
     calcPosStyle(props: {triggerRect: DOMRect; wrapperRect: DOMRect; containerRect: PopupContainerDOMRect; position?: Position; spacing?: number; isOverFlow?: [boolean, boolean]}) {
         const { spacing, isOverFlow } = props;
+        const { innerWidth } = window;
+        
         const triggerRect = (isEmpty(props.triggerRect) ? props.triggerRect : this._adapter.getTriggerBounding()) || { ...defaultRect as any };
         const containerRect = (isEmpty(props.containerRect) ? props.containerRect : this._adapter.getPopupContainerRect()) || {
             ...defaultRect,
         };
         const wrapperRect = (isEmpty(props.wrapperRect) ? props.wrapperRect : this._adapter.getWrapperBounding()) || { ...defaultRect as any };
-        // 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 RAW_SPACING = spacing != null ? spacing : this.getProp('spacing');
         const { arrowPointAtCenter, showArrow, arrowBounding } = this.getProps();
         const pointAtCenter = showArrow && arrowPointAtCenter;
 
+        let SPACING = RAW_SPACING;
+        let ANO_SPACING = 0;
+        if (typeof RAW_SPACING !== 'number') {
+            // extended spacing api with {x: number, y: number}, the axes of the spacing is determined based on the position
+            const isTopOrBottom = position.includes('top') || position.includes('bottom');
+            SPACING = isTopOrBottom ? RAW_SPACING.y : RAW_SPACING.x;
+            ANO_SPACING = isTopOrBottom ? RAW_SPACING.x : RAW_SPACING.y;
+        }
+
         const horizontalArrowWidth = get(arrowBounding, 'width', 24);
         const verticalArrowHeight = get(arrowBounding, 'width', 24);
         const arrowOffsetY = get(arrowBounding, 'offsetY', 0);
@@ -427,13 +448,17 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
         const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
         const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
-
-
+        
+        const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
+        const scaled = Math.abs(wrapperRect?.width - this._adapter.getContainer()?.clientWidth) > 1;
+        if (scaled) {
+            SPACING = SPACING * wrapperRect.width/this._adapter.getContainer().clientWidth;
+        }
         switch (position) {
             case 'top':
                 // left = middleX;
                 // top = triggerRect.top - SPACING;
-                left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth): middleX;
+                left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth): middleX + ANO_SPACING;
                 top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
                 translateX = -0.5;
                 translateY = -1;
@@ -441,14 +466,14 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             case 'topLeft':
                 // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
                 // top = triggerRect.top - SPACING;
-                left = isWidthOverFlow ? containerRect.left : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
+                left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow + ANO_SPACING : triggerRect.left + ANO_SPACING);
                 top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
                 translateY = -1;
                 break;
             case 'topRight':
                 // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
                 // top = triggerRect.top - SPACING;
-                left = isWidthOverFlow ? containerRect.right + offsetWidth : (pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right);
+                left = isWidthOverFlow ? containerRect.right + offsetWidth : (pointAtCenter ? middleX + offsetXWithArrow + ANO_SPACING : triggerRect.right + ANO_SPACING);
                 top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
                 translateY = -1;
                 translateX = -1;
@@ -458,7 +483,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 // 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;
+                top = isHeightOverFlow ? (isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight): middleY + ANO_SPACING;
                 translateX = -1;
                 translateY = -0.5;
                 break;
@@ -466,34 +491,34 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 // 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);
+                top = isHeightOverFlow ? containerRect.top : (pointAtCenter ? middleY - offsetYWithArrow + ANO_SPACING : triggerRect.top + ANO_SPACING);
                 translateX = -1;
                 break;
             case 'leftBottom':
                 // 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);
+                top = isHeightOverFlow ? containerRect.bottom + offsetHeight: (pointAtCenter ? middleY + offsetYWithArrow + ANO_SPACING : triggerRect.bottom + ANO_SPACING);
                 translateX = -1;
                 translateY = -1;
                 break;
             case 'bottom':
                 // left = middleX;
                 // top = triggerRect.top + triggerRect.height + SPACING;
-                left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth): middleX;
+                left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth): middleX + ANO_SPACING;
                 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 = isWidthOverFlow ? containerRect.left : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
+                left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow + ANO_SPACING: triggerRect.left + ANO_SPACING);
                 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 = isWidthOverFlow ? containerRect.right + offsetWidth : (pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right);
+                left = isWidthOverFlow ? containerRect.right + offsetWidth : (pointAtCenter ? middleX + offsetXWithArrow + ANO_SPACING : triggerRect.right + ANO_SPACING);
                 top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
                 translateX = -1;
                 break;
@@ -501,20 +526,20 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 // 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;
+                top = isHeightOverFlow ? (isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight) : middleY + ANO_SPACING;
                 translateY = -0.5;
                 break;
             case 'rightTop':
                 // 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);
+                top = isHeightOverFlow ? containerRect.top : (pointAtCenter ? middleY - offsetYWithArrow + ANO_SPACING : triggerRect.top + ANO_SPACING);
                 break;
             case 'rightBottom':
                 // 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);
+                top = isHeightOverFlow ? containerRect.bottom + offsetHeight : (pointAtCenter ? middleY + offsetYWithArrow + ANO_SPACING : triggerRect.bottom + ANO_SPACING);
                 translateY = -1;
                 break;
             case 'leftTopOver':
@@ -548,6 +573,14 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         left = left - containerRect.left;
         top = top - containerRect.top;
 
+        if (scaled) {
+            left /= wrapperRect.width/this._adapter.getContainer().clientWidth;
+        }
+
+        if (scaled) {
+            top /= wrapperRect.height/this._adapter.getContainer().clientHeight;
+        }
+
         /**
          * container为body时，如果position不为relative或absolute，这时trigger计算出的top/left会根据html定位（initial containing block）
          * 此时如果body有margin，则计算出的位置相对于body会有问题 fix issue #1368
@@ -589,7 +622,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
         let transform = '';
 
-        // eslint-disable-next-line
         if (translateX != null) {
             transform += `translateX(${translateX * 100}%) `;
             Object.defineProperty(style, 'translateX', {
@@ -597,7 +629,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 value: translateX,
             });
         }
-        // eslint-disable-next-line
         if (translateY != null) {
             transform += `translateY(${translateY * 100}%) `;
             Object.defineProperty(style, 'translateY', {
@@ -605,7 +636,6 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 value: translateY,
             });
         }
-        // eslint-disable-next-line
         if (transformOrigin != null) {
             style.transformOrigin = transformOrigin;
         }
@@ -676,19 +706,19 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         return rowSpace < size && reverseSpace > size;
     }
 
-    isOverFlow(rowSpace: number, reverseSpace: number, size: number){
+    isOverFlow(rowSpace: number, reverseSpace: number, size: number) {
         // 原空间且反向空间都不足
         // The original space and the reverse space are not enough
         return rowSpace < size && reverseSpace < size;
     }
 
-    isHalfOverFlow(posSpace: number, negSpace: number, size: number){
+    isHalfOverFlow(posSpace: number, negSpace: number, size: number) {
         // 正半空间或者负半空间不足，即表示有遮挡，需要偏移
         // 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: number, negSpace: number, size: number){
+    isHalfAllEnough(posSpace: number, negSpace: number, size: number) {
         // 正半空间和负半空间都足够，即表示可以从 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;
@@ -699,8 +729,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
          * 基于视口和容器一起判断，以下几种情况允许从原方向转到反方向，以判断是否应该由top->bottom为例子
          *
          * 1. 视口上下空间不足 且 容器上空间❌下空间✅
-         * 2. 视口上空间❌下空间✅ 且 容器上下空间不足
-         * 3. 视口上空间❌下空间✅ 且 容器上空间❌下空间✅
+         * 2. 视口上空间❌下空间✅
          * 
          * 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
@@ -708,13 +737,13 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
          * 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);
+        return (viewOverFlow && shouldReverseContainer) || shouldReverseView ;
     }
 
     // place the dom correctly
     adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect) {
         const { innerWidth, innerHeight } = window;
-        const { spacing, margin } = this.getProps();
+        const { margin } = this.getProps();
 
         const marginLeft = typeof margin === 'number' ? margin : margin.marginLeft;
         const marginTop = typeof margin === 'number' ? margin : margin.marginTop;
@@ -724,6 +753,16 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         let isHeightOverFlow = false;
         let isWidthOverFlow = false;
 
+        const raw_spacing = this.getProp('spacing');
+        let spacing = raw_spacing;
+        let ano_spacing = 0;
+        if (typeof raw_spacing !== 'number') {
+            // extended spacing api with {x: number, y: number}, the axes of the spacing is determined based on the position
+            const isTopOrBottom = position.includes('top') || position.includes('bottom');
+            spacing = isTopOrBottom ? raw_spacing.y : raw_spacing.x;
+            ano_spacing = isTopOrBottom ? raw_spacing.x : raw_spacing.y;
+        }
+
         if (wrapperRect.width > 0 && wrapperRect.height > 0) {
             // let clientLeft = left + translateX * wrapperRect.width - containerRect.scrollLeft;
             // let clientTop = top + translateY * wrapperRect.height - containerRect.scrollTop;
@@ -761,10 +800,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             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 shouldViewReverseTopSide = restClientTop < wrapperRect.height + ano_spacing && clientBottom > wrapperRect.height + ano_spacing;
+            const shouldViewReverseBottomSide = clientBottom < wrapperRect.height + ano_spacing && restClientTop > wrapperRect.height + ano_spacing;
+            const shouldViewReverseLeftSide = restClientLeft < wrapperRect.width + ano_spacing && clientRight > wrapperRect.width + ano_spacing;
+            const shouldViewReverseRightSide = clientRight < wrapperRect.width + ano_spacing && restClientLeft > wrapperRect.width + ano_spacing;
 
             const shouldReverseTopOver = restClientTop < wrapperRect.height + spacing && clientBottom > wrapperRect.height + spacing;
             const shouldReverseBottomOver = clientBottom < wrapperRect.height + spacing && restClientTop > wrapperRect.height + spacing;
@@ -793,24 +832,23 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             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 shouldContainerReverseTopSide = this.isReverse(restClientTopInContainer, clientBottomInContainer, wrapperRect.height + ano_spacing);
+            const shouldContainerReverseBottomSide = this.isReverse(clientBottomInContainer, restClientTopInContainer, wrapperRect.height + ano_spacing);
+            const shouldContainerReverseLeftSide = this.isReverse(restClientLeftInContainer, clientRightInContainer, wrapperRect.width + ano_spacing);
+            const shouldContainerReverseRightSide = this.isReverse(clientRightInContainer, restClientLeftInContainer, wrapperRect.width + ano_spacing);
 
             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);
+            const isViewYOverFlowSideHalf = this.isHalfOverFlow(clientBottom - halfHeight, restClientTop - halfHeight, (wrapperRect.height + ano_spacing) / 2);
+            const isViewXOverFlowSideHalf = this.isHalfOverFlow(clientRight - halfWidth, restClientLeft - halfWidth, (wrapperRect.width + ano_spacing) / 2);
+            const isViewYEnoughSideHalf = this.isHalfAllEnough(clientBottom - halfHeight, restClientTop - halfHeight, (wrapperRect.height + ano_spacing) / 2);
+            const isViewXEnoughSideHalf = this.isHalfAllEnough(clientRight - halfWidth, restClientLeft - halfWidth, (wrapperRect.width + ano_spacing) / 2);
 
             // 容器, 原空间与反向空间是否都不足判断
             // container, whether the original space and the reverse space are insufficient to judge
@@ -818,10 +856,10 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             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);
+            const isContainerYOverFlowSideHalf = this.isHalfOverFlow(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, (wrapperRect.height + ano_spacing) / 2);
+            const isContainerXOverFlowSideHalf = this.isHalfOverFlow(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, (wrapperRect.width + ano_spacing) / 2);
+            const isContainerYEnoughSideHalf = this.isHalfAllEnough(clientBottomInContainer - halfHeight, restClientTopInContainer - halfHeight, (wrapperRect.height + ano_spacing) / 2);
+            const isContainerXEnoughSideHalf = this.isHalfAllEnough(clientRightInContainer - halfWidth, restClientLeftInContainer - halfWidth, (wrapperRect.width + ano_spacing) / 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.
@@ -855,7 +893,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                         position = this._adjustPos(position, true);
                     }
                     if (shouldReverseLeftSide && widthIsBigger) {
-                        position = this._adjustPos(position, true);
+                        position = this._adjustPos(position);
                     }
                     if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {
                         position = this._adjustPos(position, true, 'reduce');
@@ -1000,7 +1038,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
             // 判断溢出 Judgment overflow
             // 上下方向 top and bottom
-            if (this.isTB(position)){
+            if (this.isTB(position)) {
                 isHeightOverFlow = isViewYOverFlow && isContainerYOverFlow;
                 // Related PR: https://github.com/DouyinFE/semi-design/pull/1297
                 // If clientRight or restClientRight less than 0, means that the left and right parts of the trigger are blocked
@@ -1012,7 +1050,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 }
             }
             // 左右方向 left and right
-            if (this.isLR(position)){
+            if (this.isLR(position)) {
                 isWidthOverFlow = isViewXOverFlow && isContainerXOverFlow;
                 // If clientTop or restClientTop less than 0, means that the top and bottom parts of the trigger are blocked
                 // Then the display of the wrapper will also be affected, make height overflow to offset the wrapper
@@ -1126,7 +1164,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
      * 如果 trigger 是 focus 或者 hover，则它绑定了 onFocus，这里我们如果重新 focus 的话，popup 会再次打开
      * 因此 returnFocusOnClose 只支持 click trigger
      */
-    _focusTrigger() {
+    focusTrigger() {
         const { trigger, returnFocusOnClose, preventScroll } = this.getProps();
         if (returnFocusOnClose && trigger !== 'custom') {
             const triggerNode = this._adapter.getTriggerNode();
@@ -1141,7 +1179,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         if (trigger !== 'custom') {
             // Move the focus into the trigger first and then close the pop-up layer 
             // to avoid the problem of opening the pop-up layer again when the focus returns to the trigger in the case of hover and focus
-            this._focusTrigger();
+            this.focusTrigger();
             this.hide();
         }
         this._adapter.notifyEscKeydown(event);

package/tooltip/tooltip.scss

@@ -65,6 +65,9 @@ $module-icon: #{$module}-icon-arrow;
         font-size: $font-tooltip-fontSize;
         left: 0;
         top: 0;
+        // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+        word-wrap: break-word;
+        overflow-wrap: break-word;
 
         @include font-size-regular;
         opacity: 0;
@@ -75,6 +78,10 @@ $module-icon: #{$module}-icon-arrow;
         }
     }
 
+    &-content {
+        min-width: 0;
+    }
+
     &-trigger {
         display: inline-block;
         width: auto;
@@ -91,10 +98,12 @@ $module-icon: #{$module}-icon-arrow;
 
     &-animation-show{
         animation: #{$module}-zoomIn $animation_duration-tooltip_in $animation_function-tooltip_in;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: #{$module}-zoomOut $animation_duration-tooltip_out $animation_function-tooltip_out;
+        animation-fill-mode: forwards;
     }
 
 }

package/transfer/foundation.ts

@@ -42,7 +42,6 @@ export interface TransferAdapter<P = Record<string, any>, S = Record<string, any
     searchTree: (keyword: string) => void
 }
 
-// eslint-disable-next-line max-len
 export default class TransferFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TransferAdapter<P, S>> {
     constructor(adapter: TransferAdapter<P, S>) {
         super({ ...adapter });

package/transfer/transfer.scss

@@ -169,12 +169,19 @@ $module: #{$prefix}-transfer;
                 &-handler {
                     margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
                     flex-shrink: 0;
+                    cursor: move;
                 }
 
                 &-item-move {
                     z-index: $z-transfer_right_item_drag_item_move;
                 }            
             }
+
+            &-sortable-item {
+                &-active {
+                    opacity: 0;
+                }
+            }
         }
 
         &-empty {