@douyinfe/semi-ui 2.23.0-beta.0 → 2.23.0

package/dist/umd/semi-ui.js

@@ -17967,6 +17967,10 @@ var isUndefined_default = /*#__PURE__*/__webpack_require__.n(isUndefined);
 var external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_ = __webpack_require__("faye");
 var external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default = /*#__PURE__*/__webpack_require__.n(external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_);
 
+// EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/lodash/isEqual.js
+var isEqual = __webpack_require__("nnRT");
+var isEqual_default = /*#__PURE__*/__webpack_require__.n(isEqual);
+
 // EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/lodash/isFunction.js
 var isFunction = __webpack_require__("2q8g");
 var isFunction_default = /*#__PURE__*/__webpack_require__.n(isFunction);
@@ -18219,6 +18223,14 @@ class foundation_Tooltip extends foundation {
       const content = this.getProp('content');
       const trigger = this.getProp('trigger');
       const clickTriggerToHide = this.getProp('clickTriggerToHide');
+      const {
+        visible
+      } = this.getStates();
+
+      if (visible) {
+        return;
+      }
+
       this.clearDelayTimer();
       /**
        * If you emit an event in setState callback, you need to place the event listener function before setState to execute.
@@ -18234,9 +18246,11 @@ class foundation_Tooltip extends foundation {
         this._togglePortalVisible(true);
       });
 
-      const position = this.calcPosition(null, null, null, false);
+      this._adapter.insertPortal(content, {
+        left: -9999,
+        top: -9999
+      }); // offscreen rendering
 
-      this._adapter.insertPortal(content, position);
 
       if (trigger === 'custom') {
         // eslint-disable-next-line
@@ -18282,17 +18296,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 +18459,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 +18501,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 +18674,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 +18713,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 +18925,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 +18981,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 +19012,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 +19498,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
@@ -19489,10 +19776,6 @@ const TriangleArrowVertical = props => {
   width: prop_types_default.a.number,
   height: prop_types_default.a.number
 }));
-// EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/lodash/isEqual.js
-var isEqual = __webpack_require__("nnRT");
-var isEqual_default = /*#__PURE__*/__webpack_require__.n(isEqual);
-
 // CONCATENATED MODULE: ./_cssAnimation/index.tsx
 
 
@@ -19631,6 +19914,7 @@ _cssAnimation_CSSAnimation.defaultProps = {
 
 
 
+
 var tooltip_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
 
@@ -19898,6 +20182,10 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
       return mergedEvents;
     };
 
+    this.getPopupId = () => {
+      return this.state.id;
+    };
+
     this.state = {
       visible: false,
 
@@ -20210,7 +20498,7 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
       this.props.visible ? this.foundation.delayShow() : this.foundation.delayHide();
     }
 
-    if (prevProps.rePosKey !== this.props.rePosKey) {
+    if (!isEqual_default()(prevProps.rePosKey, this.props.rePosKey)) {
       this.rePosition();
     }
   }
@@ -20320,6 +20608,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 +20638,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 +23149,13 @@ const IconWindowAdaptionStroked_IconComponent = convertIcon(IconWindowAdaptionSt
 
 
 
+
+
+
+
+
+
+
 
 
 
@@ -40525,27 +40822,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 +40996,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) {
@@ -56546,7 +56849,6 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
       disabledDate,
       yearAndMonthOpts
     } = this.props;
-    console.log('yearAndMonthOpts', yearAndMonthOpts);
 
     let transform = val => val;
 
@@ -60122,26 +60424,39 @@ class foundation_DropdownFoundation extends foundation {
     this._adapter.setPopVisible(visible);
 
     this._adapter.notifyVisibleChange(visible);
+
+    const {
+      trigger
+    } = this.getProps();
+
+    if (visible && trigger === "click") {
+      const popupId = this._adapter.getPopupId();
+
+      this.setFocusToFirstMenuItem(popupId);
+    }
   }
 
-  getMenuItemNodes(target) {
-    const id = target.attributes['data-popupid'].value;
+  getMenuItemNodes(id) {
     const menuWrapper = document.getElementById(id); // if has dropdown item, the item must wrapped by li
 
     return menuWrapper ? Array.from(menuWrapper.getElementsByTagName('li')).filter(item => item.ariaDisabled === "false") : null;
   }
 
-  setFocusToFirstMenuItem(target) {
-    const menuItemNodes = this.getMenuItemNodes(target);
+  setFocusToFirstMenuItem(id) {
+    const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && setFocusToFirstItem(menuItemNodes);
   }
 
-  setFocusToLastMenuItem(target) {
-    const menuItemNodes = this.getMenuItemNodes(target);
+  setFocusToLastMenuItem(id) {
+    const menuItemNodes = this.getMenuItemNodes(id);
     menuItemNodes && setFocusToLastItem(menuItemNodes);
   }
 
   handleKeyDown(event) {
+    var _a, _b;
+
+    const id = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.attributes['data-popupid']) === null || _b === void 0 ? void 0 : _b.value;
+
     switch (event.key) {
       case ' ':
       case 'Enter':
@@ -60151,12 +60466,12 @@ class foundation_DropdownFoundation extends foundation {
         break;
 
       case 'ArrowDown':
-        this.setFocusToFirstMenuItem(event.target);
+        this.setFocusToFirstMenuItem(id);
         handlePrevent(event);
         break;
 
       case 'ArrowUp':
-        this.setFocusToLastMenuItem(event.target);
+        this.setFocusToLastMenuItem(id);
         handlePrevent(event);
         break;
 
@@ -60174,17 +60489,6 @@ class menuFoundation_DropdownMenuFoundation extends foundation {
     super(...arguments);
     this.menuItemNodes = null;
     this.firstChars = [];
-  } // if trigger is click, auto focus to the first menu item
-
-
-  autoFocus(ulElement) {
-    const trigger = this._adapter.getContext('trigger');
-
-    if (trigger === 'click') {
-      // find all non-disabled li under this menu and set focus to the first menu
-      this.menuItemNodes = [...ulElement.getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
-      setFocusToFirstItem(this.menuItemNodes);
-    }
   }
 
   handleEscape(menu) {
@@ -60286,7 +60590,6 @@ const dropdownMenu_prefixCls = dropdown_constants_cssClasses.PREFIX;
 class dropdownMenu_DropdownMenu extends baseComponent_BaseComponent {
   constructor(props) {
     super(props);
-    this.menuRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     this.foundation = new menuFoundation_DropdownMenuFoundation(this.adapter);
   }
 
@@ -60294,10 +60597,6 @@ class dropdownMenu_DropdownMenu extends baseComponent_BaseComponent {
     return Object.assign({}, super.adapter);
   }
 
-  componentDidMount() {
-    this.foundation.autoFocus(this.menuRef.current);
-  }
-
   render() {
     const _a = this.props,
           {
@@ -60309,8 +60608,7 @@ class dropdownMenu_DropdownMenu extends baseComponent_BaseComponent {
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", Object.assign({
       role: "menu",
-      "aria-orientation": "vertical",
-      ref: this.menuRef
+      "aria-orientation": "vertical"
     }, rest, {
       className: classnames_default()("".concat(dropdownMenu_prefixCls, "-menu"), className),
       style: style,
@@ -60543,6 +60841,7 @@ class dropdown_Dropdown extends baseComponent_BaseComponent {
       popVisible: props.visible
     };
     this.foundation = new foundation_DropdownFoundation(this.adapter);
+    this.tooltipRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
   }
 
   get adapter() {
@@ -60550,7 +60849,8 @@ class dropdown_Dropdown extends baseComponent_BaseComponent {
       setPopVisible: popVisible => this.setState({
         popVisible
       }),
-      notifyVisibleChange: visible => this.props.onVisibleChange(visible)
+      notifyVisibleChange: visible => this.props.onVisibleChange(visible),
+      getPopupId: () => this.tooltipRef.current.getPopupId()
     });
   }
 
@@ -60707,7 +61007,8 @@ class dropdown_Dropdown extends baseComponent_BaseComponent {
       trigger: trigger,
       onVisibleChange: this.handleVisibleChange,
       showArrow: false,
-      returnFocusOnClose: true
+      returnFocusOnClose: true,
+      ref: this.tooltipRef
     }, attr), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.isValidElement(children) ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.cloneElement(children, {
       //@ts-ignore
       className: classnames_default()(get_default()(children, 'props.className'), {
@@ -71830,7 +72131,7 @@ class select_Select extends baseComponent_BaseComponent {
     } // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
 
 
-    if (prevProps.value !== this.props.value || isOptionsChanged) {
+    if (!isEqual_default()(this.props.value, prevProps.value) || isOptionsChanged) {
       if ('value' in this.props) {
         this.foundation.handleValueChange(this.props.value);
       } else {