feat: add treeselect borderless api && fix: fix select active status

packages/semi-foundation/select/select.scss

@@ -482,11 +482,17 @@ $overflowList: #{$prefix}-overflow-list;
         border: $width-select-border-hover solid $color-select-border-hover;
     }
 
+
     &.#{$module}:focus {
         background-color: transparent;
         outline: 0;
     }
 
+    &.#{$module}:active {
+        background-color: $color-select-bg-active;
+        border: $width-select-border-active solid $color-select-border-active;
+    }
+
     &.#{$module}-focus{
 
         &:hover {

packages/semi-foundation/treeSelect/foundation.ts

@@ -99,6 +99,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
 | 'checkRelation'
 | 'preventScroll'
 > {
+    borderless?: boolean;
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;

packages/semi-foundation/treeSelect/treeSelect.scss

@@ -22,10 +22,17 @@ $module: #{$prefix}-tree-select;
         border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
+    &:focus {
+        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+        background-color: $color-treeSelect_default-bg-focus;
+        outline: 0;
+    }
+
     &:active{
         background-color: $color-treeSelect_default-bg-active;
     }
 
+
     &-focus {
         background-color: $color-treeSelect_default-bg-focus;
         border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
@@ -365,4 +372,72 @@ $module: #{$prefix}-tree-select;
     }
 }
 
+.#{$module}-noBorder{
+    background-color: transparent;
+    border-color: transparent;
+
+    .#{$module}:hover {
+        background-color: $color-treeSelect_default-bg-hover;
+        border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
+    }
+
+    &.#{$module}:focus{
+        background-color: transparent;
+        outline: 0;
+    }
+
+    &.#{$module}:active{
+        background-color: $color-treeSelect_default-bg-active;
+        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+    }
+
+    &.#{$module}-focus{
+        &:hover{
+            background-color: transparent;
+            border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+            outline: 0;
+        }
+        &:active{
+            background-color: $color-treeSelect_default-bg-active;
+        }
+    }
+
+    &.#{$module}-warning {
+        background-color: transparent;
+        border-color: $color-treeSelect_warning-border-focus;
+        &:hover {
+            background-color: $color-treeSelect_warning-bg-hover;
+            border-color: $color-treeSelect_warning-border-focus;
+        }
+        &.#{$module}-focus {
+            background-color: transparent;
+            border-color: $color-treeSelect_warning-border-focus;
+        }
+
+        &:active {
+            background-color: $color-treeSelect_warning-border-focus;
+            border-color: $color-treeSelect_warning-border-active;
+        }
+    }
+
+    &.#{$module}-error {
+        background-color: transparent;
+        border-color: $color-treeSelect_danger-border-focus;
+        &:hover {
+            background-color: $color-treeSelect_danger-bg-hover;
+            border-color: $color-treeSelect_danger-border-focus;
+        }
+        &.#{$module}-focus {
+            background-color: transparent;
+            border-color: $color-treeSelect_danger-border-focus;
+        }
+
+        &:active {
+            background-color: $color-treeSelect_danger-border-focus;
+            border-color: $color-treeSelect_danger-border-active;
+        }
+    }
+
+}
+
 @import './rtl.scss';

packages/semi-ui/treeSelect/index.tsx

@@ -182,6 +182,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         'aria-invalid': PropTypes.bool,
         'aria-labelledby': PropTypes.string,
         'aria-required': PropTypes.bool,
+        borderless: PropTypes.bool,
         loadedKeys: PropTypes.arrayOf(PropTypes.string),
         loadData: PropTypes.func,
         onLoad: PropTypes.func,
@@ -268,6 +269,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     static defaultProps: Partial<TreeSelectProps> = {
+        borderless: false,
         searchPosition: strings.SEARCH_POSITION_DROPDOWN,
         arrowIcon: <IconChevronDown />,
         autoExpandParent: false,
@@ -969,6 +971,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             leafOnly,
             searchPosition,
             triggerRender,
+            borderless
         } = this.props;
         const { inputValue, selectedKeys, checkedKeys, keyEntities, isFocus } = this.state;
         const filterable = Boolean(filterTreeNode);
@@ -987,6 +990,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             cls(
                 prefixcls,
                 {
+                    [`${prefixcls}-noBorder`]: borderless,
                     [`${prefixcls}-focus`]: isFocus,
                     [`${prefixcls}-disabled`]: disabled,
                     [`${prefixcls}-single`]: !multiple,