@douyinfe/semi-foundation 2.30.0-beta.0 → 2.30.0

package/lib/cjs/select/select.css

@@ -92,6 +92,7 @@
 }
 .semi-select:focus {
   border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
   outline: 0;
 }
 .semi-select-small {

package/lib/cjs/select/select.scss

@@ -36,6 +36,7 @@ $overflowList: #{$prefix}-overflow-list;
 
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
+        background-color: $color-select-bg-focus;
         outline: 0;
     }
 

package/lib/cjs/select/variables.scss

@@ -2,6 +2,7 @@
 $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景色 - 默认态
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
+$color-select-bg-focus: var(--semi-color-fill-0); // 选择器输入框背景色 - 聚焦态
 $color-select-border-default: transparent; // 选择器输入框描边颜色
 $color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
 $color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态

package/lib/cjs/tooltip/foundation.js

@@ -521,6 +521,9 @@ class Tooltip extends _foundation.default {
       spacing,
       isOverFlow
     } = props;
+    const {
+      innerWidth
+    } = window;
     const triggerRect = ((0, _isEmpty2.default)(props.triggerRect) ? props.triggerRect : this._adapter.getTriggerBounding()) || Object.assign({}, defaultRect);
     const containerRect = ((0, _isEmpty2.default)(props.containerRect) ? props.containerRect : this._adapter.getPopupContainerRect()) || Object.assign({}, defaultRect);
     const wrapperRect = ((0, _isEmpty2.default)(props.wrapperRect) ? props.wrapperRect : this._adapter.getWrapperBounding()) || Object.assign({}, defaultRect); // eslint-disable-next-line
@@ -559,6 +562,7 @@ class Tooltip extends _foundation.default {
     const isWidthOverFlow = isOverFlow && isOverFlow[1];
     const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
     const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
+    const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
 
     switch (position) {
       case 'top':
@@ -573,7 +577,7 @@ class Tooltip extends _foundation.default {
       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 : triggerRect.left;
         top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
         translateY = -1;
         break;
@@ -625,7 +629,7 @@ class Tooltip extends _foundation.default {
       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 : triggerRect.left;
         top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
         break;
 

package/lib/cjs/treeSelect/foundation.d.ts

@@ -27,7 +27,7 @@ export interface BasicOnChange {
     (node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
     (value: BasicTreeNodeData['value'] | Array<BasicTreeNodeData['value']>, node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
 }
-export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'expandAll' | 'disableStrictly' | 'aria-label' | 'checkRelation'> {
+export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'expandAll' | 'disableStrictly' | 'aria-label' | 'checkRelation' | 'preventScroll'> {
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -74,7 +74,6 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize'
 export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData, 'keyEntities' | 'treeData' | 'flattenNodes' | 'selectedKeys' | 'checkedKeys' | 'halfCheckedKeys' | 'motionKeys' | 'motionType' | 'expandedKeys' | 'filteredKeys' | 'filteredExpandedKeys' | 'filteredShownKeys' | 'cachedKeyValuePairs' | 'inputValue' | 'disabledKeys' | 'loadedKeys' | 'loadingKeys' | 'realCheckedKeys'> {
     inputTriggerFocus: boolean;
     isOpen: boolean;
-    isInput: boolean;
     rePosKey: number;
     dropdownMinWidth: null | number;
     isHovering: boolean;
@@ -102,6 +101,7 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     notifyLoad: (newLoadedKeys: Set<string>, data: BasicTreeNodeData) => void;
     updateInputFocus: (bool: boolean) => void;
     updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
+    updateIsFocus: (bool: boolean) => void;
 }
 export default class TreeSelectFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TreeSelectAdapter<P, S>, P, S> {
     constructor(adapter: TreeSelectAdapter<P, S>);
@@ -131,8 +131,11 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     focusInput(bool: boolean): void;
     _notifyMultipleChange(key: string[], e: any): void;
     _notifyChange(key: any, e: any): void;
+    _registerClickOutsideHandler: (e: any) => void;
     _notifyFocus(e: any): void;
+    handleTriggerFocus(e: any): void;
     _notifyBlur(e: any): void;
+    handlerTriggerBlur(e: any): void;
     toggleHoverState(bool: boolean): void;
     open(): void;
     close(e: any): void;

package/lib/cjs/treeSelect/foundation.js

@@ -35,6 +35,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 class TreeSelectFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+
+    this._registerClickOutsideHandler = e => {
+      this._adapter.registerClickOutsideHandler(e => {
+        this.handlerTriggerBlur(e);
+        this.close(e);
+      });
+    };
   }
 
   init() {
@@ -53,6 +60,10 @@ class TreeSelectFoundation extends _foundation.default {
     if (isOpen) {
       this.open();
     }
+
+    if (triggerSearchAutoFocus) {
+      this.handleTriggerFocus(null);
+    }
   }
 
   destroy() {
@@ -320,6 +331,14 @@ class TreeSelectFoundation extends _foundation.default {
 
   _notifyFocus(e) {
     this._adapter.notifyFocus(e);
+  }
+
+  handleTriggerFocus(e) {
+    this._adapter.updateIsFocus(true);
+
+    this._notifyFocus(e);
+
+    this._registerClickOutsideHandler(e);
   } // Scenes that may trigger blur
   //  1、clickOutSide
   //  2、click option / press enter, and then select complete（when multiple is false
@@ -330,6 +349,14 @@ class TreeSelectFoundation extends _foundation.default {
     this._adapter.notifyBlur(e);
   }
 
+  handlerTriggerBlur(e) {
+    this._adapter.updateIsFocus(false);
+
+    this._notifyBlur(e);
+
+    this._adapter.unregisterClickOutsideHandler();
+  }
+
   toggleHoverState(bool) {
     this._adapter.toggleHovering(bool);
   }
@@ -338,19 +365,11 @@ class TreeSelectFoundation extends _foundation.default {
     this._adapter.openMenu();
 
     this._setDropdownWidth();
-
-    this._adapter.registerClickOutsideHandler(e => {
-      this.close(e);
-    });
   }
 
   close(e) {
     this._adapter.closeMenu();
 
-    this._adapter.unregisterClickOutsideHandler();
-
-    this._notifyBlur(e);
-
     if (this.getProp('motionExpand')) {
       this._adapter.updateState({
         motionKeys: new Set([])
@@ -363,7 +382,8 @@ class TreeSelectFoundation extends _foundation.default {
 
     const {
       isOpen,
-      inputValue
+      inputValue,
+      isFocus
     } = this.getStates();
     const {
       searchPosition
@@ -371,16 +391,20 @@ class TreeSelectFoundation extends _foundation.default {
 
     if (isDisabled) {
       return;
-    } else if (!isOpen) {
-      this.open();
-
-      this._notifyFocus(e);
-    } else if (isOpen) {
-      if (searchPosition === 'trigger' && inputValue) {
-        return;
+    } else {
+      if (!isFocus) {
+        this.handleTriggerFocus(e);
       }
 
-      this.close(e);
+      if (isOpen) {
+        if (searchPosition === 'trigger' && inputValue) {
+          return;
+        }
+
+        this.close(e);
+      } else {
+        this.open();
+      }
     }
   }
   /**
@@ -626,6 +650,7 @@ class TreeSelectFoundation extends _foundation.default {
 
     if (clickToHide && (this._isSelectToClose() || !data.children)) {
       this.close(e);
+      this.handlerTriggerBlur(e);
     }
   }
 

package/lib/cjs/treeSelect/treeSelect.css

@@ -17,12 +17,16 @@
 }
 .semi-tree-select:hover {
   background-color: var(--semi-color-fill-1);
-  border: 1px solid inherit;
+  border: 1px solid transparent;
 }
 .semi-tree-select-focus {
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
+.semi-tree-select-focus:hover {
+  border: 1px solid var(--semi-color-focus-border);
+  outline: 0;
+}
 .semi-tree-select-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);

package/lib/cjs/treeSelect/treeSelect.scss

@@ -26,6 +26,12 @@ $module: #{$prefix}-tree-select;
         outline: 0;
     }
 
+    &-focus:hover {
+        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+        outline: 0;
+    }
+
+
     &-warning {
         background-color: $color-treeSelect_warning-bg-default;
         border-color: $color-treeSelect_warning-border-default;

package/lib/cjs/treeSelect/variables.scss

@@ -6,7 +6,7 @@ $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
 $color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
-$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
+$color-treeSelect_default-border-hover: transparent; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认

package/lib/es/select/select.css

@@ -92,6 +92,7 @@
 }
 .semi-select:focus {
   border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
   outline: 0;
 }
 .semi-select-small {

package/lib/es/select/select.scss

@@ -36,6 +36,7 @@ $overflowList: #{$prefix}-overflow-list;
 
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
+        background-color: $color-select-bg-focus;
         outline: 0;
     }
 

package/lib/es/select/variables.scss

@@ -2,6 +2,7 @@
 $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景色 - 默认态
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
+$color-select-bg-focus: var(--semi-color-fill-0); // 选择器输入框背景色 - 聚焦态
 $color-select-border-default: transparent; // 选择器输入框描边颜色
 $color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
 $color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态

package/lib/es/tooltip/foundation.js

@@ -507,6 +507,9 @@ export default class Tooltip extends BaseFoundation {
       spacing,
       isOverFlow
     } = props;
+    const {
+      innerWidth
+    } = window;
     const triggerRect = (_isEmpty(props.triggerRect) ? props.triggerRect : this._adapter.getTriggerBounding()) || Object.assign({}, defaultRect);
     const containerRect = (_isEmpty(props.containerRect) ? props.containerRect : this._adapter.getPopupContainerRect()) || Object.assign({}, defaultRect);
     const wrapperRect = (_isEmpty(props.wrapperRect) ? props.wrapperRect : this._adapter.getWrapperBounding()) || Object.assign({}, defaultRect); // eslint-disable-next-line
@@ -549,6 +552,7 @@ export default class Tooltip extends BaseFoundation {
     const isWidthOverFlow = isOverFlow && isOverFlow[1];
     const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
     const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
+    const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
 
     switch (position) {
       case 'top':
@@ -563,7 +567,7 @@ export default class Tooltip extends BaseFoundation {
       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 : triggerRect.left;
         top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
         translateY = -1;
         break;
@@ -615,7 +619,7 @@ export default class Tooltip extends BaseFoundation {
       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 : triggerRect.left;
         top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
         break;
 

package/lib/es/treeSelect/foundation.d.ts

@@ -27,7 +27,7 @@ export interface BasicOnChange {
     (node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
     (value: BasicTreeNodeData['value'] | Array<BasicTreeNodeData['value']>, node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
 }
-export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'expandAll' | 'disableStrictly' | 'aria-label' | 'checkRelation'> {
+export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'expandAll' | 'disableStrictly' | 'aria-label' | 'checkRelation' | 'preventScroll'> {
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -74,7 +74,6 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize'
 export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData, 'keyEntities' | 'treeData' | 'flattenNodes' | 'selectedKeys' | 'checkedKeys' | 'halfCheckedKeys' | 'motionKeys' | 'motionType' | 'expandedKeys' | 'filteredKeys' | 'filteredExpandedKeys' | 'filteredShownKeys' | 'cachedKeyValuePairs' | 'inputValue' | 'disabledKeys' | 'loadedKeys' | 'loadingKeys' | 'realCheckedKeys'> {
     inputTriggerFocus: boolean;
     isOpen: boolean;
-    isInput: boolean;
     rePosKey: number;
     dropdownMinWidth: null | number;
     isHovering: boolean;
@@ -102,6 +101,7 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     notifyLoad: (newLoadedKeys: Set<string>, data: BasicTreeNodeData) => void;
     updateInputFocus: (bool: boolean) => void;
     updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
+    updateIsFocus: (bool: boolean) => void;
 }
 export default class TreeSelectFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TreeSelectAdapter<P, S>, P, S> {
     constructor(adapter: TreeSelectAdapter<P, S>);
@@ -131,8 +131,11 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     focusInput(bool: boolean): void;
     _notifyMultipleChange(key: string[], e: any): void;
     _notifyChange(key: any, e: any): void;
+    _registerClickOutsideHandler: (e: any) => void;
     _notifyFocus(e: any): void;
+    handleTriggerFocus(e: any): void;
     _notifyBlur(e: any): void;
+    handlerTriggerBlur(e: any): void;
     toggleHoverState(bool: boolean): void;
     open(): void;
     close(e: any): void;

package/lib/es/treeSelect/foundation.js

@@ -14,6 +14,13 @@ import isEnterPress from '../utils/isEnterPress'; // eslint-disable-next-line ma
 export default class TreeSelectFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+
+    this._registerClickOutsideHandler = e => {
+      this._adapter.registerClickOutsideHandler(e => {
+        this.handlerTriggerBlur(e);
+        this.close(e);
+      });
+    };
   }
 
   init() {
@@ -32,6 +39,10 @@ export default class TreeSelectFoundation extends BaseFoundation {
     if (isOpen) {
       this.open();
     }
+
+    if (triggerSearchAutoFocus) {
+      this.handleTriggerFocus(null);
+    }
   }
 
   destroy() {
@@ -299,6 +310,14 @@ export default class TreeSelectFoundation extends BaseFoundation {
 
   _notifyFocus(e) {
     this._adapter.notifyFocus(e);
+  }
+
+  handleTriggerFocus(e) {
+    this._adapter.updateIsFocus(true);
+
+    this._notifyFocus(e);
+
+    this._registerClickOutsideHandler(e);
   } // Scenes that may trigger blur
   //  1、clickOutSide
   //  2、click option / press enter, and then select complete（when multiple is false
@@ -309,6 +328,14 @@ export default class TreeSelectFoundation extends BaseFoundation {
     this._adapter.notifyBlur(e);
   }
 
+  handlerTriggerBlur(e) {
+    this._adapter.updateIsFocus(false);
+
+    this._notifyBlur(e);
+
+    this._adapter.unregisterClickOutsideHandler();
+  }
+
   toggleHoverState(bool) {
     this._adapter.toggleHovering(bool);
   }
@@ -317,19 +344,11 @@ export default class TreeSelectFoundation extends BaseFoundation {
     this._adapter.openMenu();
 
     this._setDropdownWidth();
-
-    this._adapter.registerClickOutsideHandler(e => {
-      this.close(e);
-    });
   }
 
   close(e) {
     this._adapter.closeMenu();
 
-    this._adapter.unregisterClickOutsideHandler();
-
-    this._notifyBlur(e);
-
     if (this.getProp('motionExpand')) {
       this._adapter.updateState({
         motionKeys: new Set([])
@@ -342,7 +361,8 @@ export default class TreeSelectFoundation extends BaseFoundation {
 
     const {
       isOpen,
-      inputValue
+      inputValue,
+      isFocus
     } = this.getStates();
     const {
       searchPosition
@@ -350,16 +370,20 @@ export default class TreeSelectFoundation extends BaseFoundation {
 
     if (isDisabled) {
       return;
-    } else if (!isOpen) {
-      this.open();
-
-      this._notifyFocus(e);
-    } else if (isOpen) {
-      if (searchPosition === 'trigger' && inputValue) {
-        return;
+    } else {
+      if (!isFocus) {
+        this.handleTriggerFocus(e);
       }
 
-      this.close(e);
+      if (isOpen) {
+        if (searchPosition === 'trigger' && inputValue) {
+          return;
+        }
+
+        this.close(e);
+      } else {
+        this.open();
+      }
     }
   }
   /**
@@ -605,6 +629,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
 
     if (clickToHide && (this._isSelectToClose() || !data.children)) {
       this.close(e);
+      this.handlerTriggerBlur(e);
     }
   }
 

package/lib/es/treeSelect/treeSelect.css

@@ -17,12 +17,16 @@
 }
 .semi-tree-select:hover {
   background-color: var(--semi-color-fill-1);
-  border: 1px solid inherit;
+  border: 1px solid transparent;
 }
 .semi-tree-select-focus {
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
+.semi-tree-select-focus:hover {
+  border: 1px solid var(--semi-color-focus-border);
+  outline: 0;
+}
 .semi-tree-select-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);

package/lib/es/treeSelect/treeSelect.scss

@@ -26,6 +26,12 @@ $module: #{$prefix}-tree-select;
         outline: 0;
     }
 
+    &-focus:hover {
+        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+        outline: 0;
+    }
+
+
     &-warning {
         background-color: $color-treeSelect_warning-bg-default;
         border-color: $color-treeSelect_warning-border-default;

package/lib/es/treeSelect/variables.scss

@@ -6,7 +6,7 @@ $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
 $color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
-$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
+$color-treeSelect_default-border-hover: transparent; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.30.0-beta.0",
+    "version": "2.30.0",
     "description": "",
     "scripts": {
         "build:lib": "export NODE_OPTIONS=--no-experimental-fetch && node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "330e8cf3c8bced4dee7d5c77c7e3931a0f40376b",
+    "gitHead": "c433ecebd974f8bb013a030b22d9a22cb8e70e9e",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/select.scss

@@ -36,6 +36,7 @@ $overflowList: #{$prefix}-overflow-list;
 
     &:focus {
         border: $width-select-border-focus solid $color-select-border-focus;
+        background-color: $color-select-bg-focus;
         outline: 0;
     }
 

package/select/variables.scss

@@ -2,6 +2,7 @@
 $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景色 - 默认态
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
+$color-select-bg-focus: var(--semi-color-fill-0); // 选择器输入框背景色 - 聚焦态
 $color-select-border-default: transparent; // 选择器输入框描边颜色
 $color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
 $color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态

package/tooltip/foundation.ts

@@ -387,6 +387,8 @@ 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,
@@ -427,7 +429,8 @@ 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;
 
         switch (position) {
             case 'top':
@@ -441,7 +444,7 @@ 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 : triggerRect.left);
                 top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
                 translateY = -1;
                 break;
@@ -487,7 +490,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             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 : triggerRect.left);
                 top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
                 break;
             case 'bottomRight':

package/treeSelect/foundation.ts

@@ -95,6 +95,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
 | 'disableStrictly'
 | 'aria-label'
 | 'checkRelation'
+| 'preventScroll'
 > {
     motion?: Motion;
     mouseEnterDelay?: number;
@@ -163,7 +164,7 @@ export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData,
 > {
     inputTriggerFocus: boolean;
     isOpen: boolean;
-    isInput: boolean;
+    // isInput: boolean;
     rePosKey: number;
     dropdownMinWidth: null | number;
     isHovering: boolean;
@@ -191,7 +192,8 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     toggleHovering: (bool: boolean) => void;
     notifyLoad: (newLoadedKeys: Set<string>, data: BasicTreeNodeData) => void;
     updateInputFocus: (bool: boolean) => void;
-    updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void
+    updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
+    updateIsFocus: (bool: boolean) => void
 }
 
 // eslint-disable-next-line max-len
@@ -210,6 +212,9 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         if (isOpen) {
             this.open();
         }
+        if (triggerSearchAutoFocus) {
+            this.handleTriggerFocus(null);
+        }
     }
 
     destroy() {
@@ -424,12 +429,25 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
     }
 
+    _registerClickOutsideHandler = (e) => {
+        this._adapter.registerClickOutsideHandler(e => {
+            this.handlerTriggerBlur(e);
+            this.close(e);
+        });
+    }
+
     // Scenes that may trigger focus:
     //  1、click selection
     _notifyFocus(e: any) {
         this._adapter.notifyFocus(e);
     }
 
+    handleTriggerFocus(e: any) {
+        this._adapter.updateIsFocus(true);
+        this._notifyFocus(e);
+        this._registerClickOutsideHandler(e);
+    }
+
     // Scenes that may trigger blur
     //  1、clickOutSide
     //  2、click option / press enter, and then select complete（when multiple is false
@@ -438,6 +456,12 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         this._adapter.notifyBlur(e);
     }
 
+    handlerTriggerBlur(e) {
+        this._adapter.updateIsFocus(false);
+        this._notifyBlur(e);
+        this._adapter.unregisterClickOutsideHandler();
+    }
+
     toggleHoverState(bool: boolean) {
         this._adapter.toggleHovering(bool);
     }
@@ -445,15 +469,10 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     open() {
         this._adapter.openMenu();
         this._setDropdownWidth();
-        this._adapter.registerClickOutsideHandler(e => {
-            this.close(e);
-        });
     }
 
     close(e: any) {
         this._adapter.closeMenu();
-        this._adapter.unregisterClickOutsideHandler();
-        this._notifyBlur(e);
         if (this.getProp('motionExpand')) {
             this._adapter.updateState({ motionKeys: new Set([]) });
         }
@@ -461,18 +480,22 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     handleClick(e: any) {
         const isDisabled = this._isDisabled();
-        const { isOpen, inputValue } = this.getStates();
+        const { isOpen, inputValue, isFocus } = this.getStates();
         const { searchPosition } = this.getProps();
         if (isDisabled) {
             return;
-        } else if (!isOpen) {
-            this.open();
-            this._notifyFocus(e);
-        } else if (isOpen) {
-            if (searchPosition === 'trigger' && inputValue) {
-                return;
+        } else {
+            if (!isFocus) {
+                this.handleTriggerFocus(e);
+            }
+            if (isOpen) {
+                if (searchPosition === 'trigger' && inputValue) {
+                    return;
+                }
+                this.close(e);
+            } else {
+                this.open();
             }
-            this.close(e);
         }
     }
 
@@ -639,6 +662,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
         if (clickToHide && (this._isSelectToClose() || !data.children)) {
             this.close(e);
+            this.handlerTriggerBlur(e);
         }
     }
 

package/treeSelect/treeSelect.scss

@@ -26,6 +26,12 @@ $module: #{$prefix}-tree-select;
         outline: 0;
     }
 
+    &-focus:hover {
+        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+        outline: 0;
+    }
+
+
     &-warning {
         background-color: $color-treeSelect_warning-bg-default;
         border-color: $color-treeSelect_warning-border-default;

package/treeSelect/variables.scss

@@ -6,7 +6,7 @@ $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
 $color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
-$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
+$color-treeSelect_default-border-hover: transparent; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认