@douyinfe/semi-foundation 2.38.2 → 2.40.0-alpha.0

package/anchor/foundation.ts

@@ -171,7 +171,7 @@ export default class AnchorFoundation<P = Record<string, any>, S = Record<string
                  *      2. There is a scroll axis (clientHeight < scrollHeight | | clientWidth < scrollWidth)
                  *      3.overflowX or overflowY has a value and is not visible or clip
                  *       For details, please see https://github.com/stipsan/compute-scroll-into-view
-                 * 
+                 *
                  * behavior定义滚动行为
                  *  - 可选 'auto' | 'smooth' | Function
                  *  - Function 自定义滚动行为
@@ -184,9 +184,12 @@ export default class AnchorFoundation<P = Record<string, any>, S = Record<string
                  */
                 behavior: actions => {
                     // We just need to scroll the innermost target container
-                    const innermostAction = get(actions, '0');
-                    const el = get(innermostAction, 'el');
-                    const top = get(innermostAction, 'top');
+                    const verticalScrollAction = actions.find(action => {
+                        const { el } = action;
+                        return el.scrollHeight > el.clientHeight;
+                    });
+                    const el = get(verticalScrollAction, 'el');
+                    const top = get(verticalScrollAction, 'top');
                     if (el) {
                         const offsetTop = top - targetOffset;
                         if (el.scroll && canSmoothScroll) {

package/lib/cjs/anchor/foundation.js

@@ -165,9 +165,14 @@ class AnchorFoundation extends _foundation.default {
            */
           behavior: actions => {
             // We just need to scroll the innermost target container
-            const innermostAction = (0, _get2.default)(actions, '0');
-            const el = (0, _get2.default)(innermostAction, 'el');
-            const top = (0, _get2.default)(innermostAction, 'top');
+            const verticalScrollAction = actions.find(action => {
+              const {
+                el
+              } = action;
+              return el.scrollHeight > el.clientHeight;
+            });
+            const el = (0, _get2.default)(verticalScrollAction, 'el');
+            const top = (0, _get2.default)(verticalScrollAction, 'top');
             if (el) {
               const offsetTop = top - targetOffset;
               if (el.scroll && canSmoothScroll) {

package/lib/cjs/select/select.css

@@ -445,9 +445,44 @@
 .semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow {
   opacity: 0;
 }
+.semi-select-borderless:not(:focus-within):not(:hover).semi-select-borderless-arrow .semi-select-arrow {
+  opacity: 1;
+}
+.semi-select-borderless:hover {
+  background-color: var(--semi-color-fill-1);
+  border: 1px solid transparent;
+}
+.semi-select-borderless:focus {
+  border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
+.semi-select-borderless:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-select-borderless:focus-within:not(:active) {
   background-color: transparent;
 }
+.semi-select-borderless.semi-select-disabled {
+  background-color: var(--semi-color-disabled-fill);
+}
+.semi-select-borderless.semi-select-disabled:hover {
+  background-color: var(--semi-color-disabled-fill);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-selection,
+.semi-select-borderless.semi-select-disabled .semi-select-selection-placeholder {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-prefix,
+.semi-select-borderless.semi-select-disabled .semi-select-suffix {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-arrow {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-tag {
+  color: var(--semi-color-disabled-text);
+}
 .semi-select-borderless.semi-select-error:not(:focus-within) {
   border-color: var(--semi-color-danger);
 }

package/lib/cjs/select/select.scss

@@ -40,7 +40,7 @@ $overflowList: #{$prefix}-overflow-list;
         outline: 0;
     }
 
-    &:active{
+    &:active {
         background-color: $color-select-bg-active;
     }
 
@@ -52,6 +52,7 @@ $overflowList: #{$prefix}-overflow-list;
     &-large {
         min-height: $height-select_large;
         line-height: $height-select_large;
+
         .#{$module}-selection {
             @include font-size-header-6;
         }
@@ -196,6 +197,7 @@ $overflowList: #{$prefix}-overflow-list;
 
         .#{$prefix}-tag-group {
             height: inherit;
+
             .#{$prefix}-tag {
                 @include select-tag-margin;
             }
@@ -326,6 +328,7 @@ $overflowList: #{$prefix}-overflow-list;
         width: $width-select_clear-icon;
         color: $color-select_clearBtn-text-default;
         flex-shrink: 0;
+
         &:hover {
             color: $color-select_clearBtn-text-hover;
         }
@@ -435,6 +438,7 @@ $overflowList: #{$prefix}-overflow-list;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
+
     &-chosen {
         .#{$module}-option-icon {
             display: flex;
@@ -475,36 +479,84 @@ $overflowList: #{$prefix}-overflow-list;
 
 .#{$module}-borderless {
 
-    &:not(:focus-within):not(:hover){
-        background-color:transparent;
-        border-color: transparent;
+    &:not(:focus-within):not(:hover) {
+        background-color: $color-select_borderless-bg-default;
+        border-color: $color-select_borderless-border-default;
+
         .#{$module}-arrow {
             opacity: 0;
         }
+
+        &.#{$module}-borderless-arrow {
+            .#{$module}-arrow {
+                opacity: 1;
+            }
+        }
     }
 
-    &:focus-within:not(:active){
-        background-color:transparent;
+    &:hover {
+        background-color: $color-select_borderless-bg-hover;
+        border: $width-select-border-hover solid $color-select_borderless-border-hover;
+    }
+
+    &:focus {
+        border: $width-select-border-focus solid $color-select_borderless-border-focus;
+        background-color: $color-select_borderless-bg-focus;
+        outline: 0;
+    }
+
+    &:active {
+        background-color: $color-select_borderless-bg-active;
+    }
+
+    &:focus-within:not(:active) {
+        background-color: transparent;
+    }
+
+    &.#{$module}-disabled {
+        background-color: $color-select_borderless_input_disabled-bg;
+
+        &:hover {
+            background-color: $color-select_borderless_input_disabled-bg;
+        }
+
+        .#{$module}-selection,
+        .#{$module}-selection-placeholder {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-prefix,
+        .#{$module}-suffix {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-arrow {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$prefix}-tag {
+            color: $color-select_borderless_input_disabled-text;
+        }
     }
 
     // split style into not and normal to avoid style override
-    &.#{$module}-error:not(:focus-within){
+    &.#{$module}-error:not(:focus-within) {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:not(:focus-within){
+    &.#{$module}-warning:not(:focus-within) {
         border-color: $color-select_warning-border-focus;
     }
 
-    &.#{$module}-error:focus-within{
+    &.#{$module}-error:focus-within {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:focus-within{
+    &.#{$module}-warning:focus-within {
         border-color: $color-select_warning-border-focus;
     }
 
 }
 
 
-    @import './rtl.scss';
+@import './rtl.scss';

package/lib/cjs/select/variables.scss

@@ -47,6 +47,16 @@ $color-select_option-border-default: var(--semi-color-border); // 分组选择
 $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜单项辅助文本颜色
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
+$color-select_borderless-bg-default: transparent; // borderless 选择器输入框背景色 - 默认态
+$color-select_borderless-bg-hover: var(--semi-color-fill-1); // borderless 选择器输入框背景色 - 悬停态
+$color-select_borderless-bg-active: var(--semi-color-fill-2); // borderless 选择器输入框背景色 - 按下态
+$color-select_borderless-bg-focus: var(--semi-color-fill-0); // borderless 选择器输入框背景色 - 聚焦态
+$color-select_borderless-border-default: transparent; // borderless 选择器输入框边框颜色 - 默认态
+$color-select_borderless-border-hover: $color-select-border-default; // borderless 选择器输入框边框颜色  - 悬停态
+$color-select_borderless-border-active: var(--semi-color-focus-border); // borderless 选择器输入框边框颜色  - 按下态
+$color-select_borderless-border-focus: $color-select-border-active; // borderless 选择器输入框边框颜色  - 聚焦态
+$color-select_borderless_input_disabled-text: var(--semi-color-disabled-text); // borderless 选择器输入框文本颜色  - 禁用态
+$color-select_borderless_input_disabled-bg: var(--semi-color-disabled-fill); // borderless 禁用选择器输入框背景色 - 禁用态
 
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小

package/lib/cjs/switch/switch.css

@@ -51,6 +51,9 @@
 .semi-switch-disabled:active {
   background-color: transparent;
 }
+.semi-switch-disabled:active .semi-switch-knob {
+  width: 18px;
+}
 .semi-switch-disabled .semi-switch-knob {
   cursor: not-allowed;
   box-shadow: none;
@@ -64,6 +67,9 @@
   border-color: transparent;
   background-color: var(--semi-color-success-disabled);
 }
+.semi-switch-disabled.semi-switch-checked:active .semi-switch-knob {
+  transform: translateX(18px);
+}
 .semi-switch-disabled.semi-switch-checked .semi-switch-knob {
   box-shadow: none;
   border: none;

package/lib/cjs/switch/switch.scss

@@ -25,9 +25,7 @@ $module: #{$prefix}-switch;
 
     &:active {
         border: $border-thickness-control $color-switch_default-bg-active solid;
-
         .#{$module}-knob {
-            // width: $knob-size + $knob-active-expand;
             width: $width-switch_knob_active;
         }
     }
@@ -69,6 +67,9 @@ $module: #{$prefix}-switch;
 
         &:active {
             background-color: $color-switch_disabled-bg-active;
+            .#{$module}-knob {
+                width: $width-switch_knob_default;
+            }
         }
 
         .#{$module}-knob {
@@ -85,6 +86,11 @@ $module: #{$prefix}-switch;
         &.#{$module}-checked {
             border-color: $color-switch_checked_disabled-border-default;
             background-color: $color-switch_checked_disabled-bg-default;
+            &:active {
+                .#{$module}-knob {
+                    transform: translateX($spacing-switch_checked-translateX);
+                }
+            }
             .#{$module}-knob {
                 @include shadow-0;
                 border: none;

package/lib/cjs/treeSelect/treeSelect.css

@@ -108,11 +108,14 @@
   padding-right: 0;
   cursor: pointer;
   color: var(--semi-color-text-0);
+  position: relative;
 }
-.semi-tree-select-selection-placeholder {
+.semi-tree-select-selection-content {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+}
+.semi-tree-select-selection-placeholder {
   color: var(--semi-color-text-2);
 }
 .semi-tree-select-selection .semi-tag-group {
@@ -126,6 +129,10 @@
 }
 .semi-tree-select-selection-TriggerSearchItem {
   position: absolute;
+  max-width: calc(100% - 12px);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .semi-tree-select-selection-TriggerSearchItem-placeholder {
   opacity: 0.6;

package/lib/cjs/treeSelect/treeSelect.scss

@@ -133,11 +133,15 @@ $module: #{$prefix}-tree-select;
         padding-right: 0;
         cursor: pointer;
         color: $color-treeSelect_selection-text-default;
+        position: relative;
 
-        &-placeholder {
+        &-content {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+        }
+        
+        &-placeholder {
             color: $color-treeSelect_input_placeholder-text-default;
         }
 
@@ -154,6 +158,10 @@ $module: #{$prefix}-tree-select;
 
         &-TriggerSearchItem {
             position: absolute;
+            max-width: calc(100% - $spacing-treeSelect_selection-paddingLeft);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
             
             &-placeholder {
                 opacity: .6;

package/lib/es/anchor/foundation.js

@@ -158,9 +158,14 @@ export default class AnchorFoundation extends BaseFoundation {
            */
           behavior: actions => {
             // We just need to scroll the innermost target container
-            const innermostAction = _get(actions, '0');
-            const el = _get(innermostAction, 'el');
-            const top = _get(innermostAction, 'top');
+            const verticalScrollAction = actions.find(action => {
+              const {
+                el
+              } = action;
+              return el.scrollHeight > el.clientHeight;
+            });
+            const el = _get(verticalScrollAction, 'el');
+            const top = _get(verticalScrollAction, 'top');
             if (el) {
               const offsetTop = top - targetOffset;
               if (el.scroll && canSmoothScroll) {

package/lib/es/select/select.css

@@ -445,9 +445,44 @@
 .semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow {
   opacity: 0;
 }
+.semi-select-borderless:not(:focus-within):not(:hover).semi-select-borderless-arrow .semi-select-arrow {
+  opacity: 1;
+}
+.semi-select-borderless:hover {
+  background-color: var(--semi-color-fill-1);
+  border: 1px solid transparent;
+}
+.semi-select-borderless:focus {
+  border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
+.semi-select-borderless:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-select-borderless:focus-within:not(:active) {
   background-color: transparent;
 }
+.semi-select-borderless.semi-select-disabled {
+  background-color: var(--semi-color-disabled-fill);
+}
+.semi-select-borderless.semi-select-disabled:hover {
+  background-color: var(--semi-color-disabled-fill);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-selection,
+.semi-select-borderless.semi-select-disabled .semi-select-selection-placeholder {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-prefix,
+.semi-select-borderless.semi-select-disabled .semi-select-suffix {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-arrow {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-tag {
+  color: var(--semi-color-disabled-text);
+}
 .semi-select-borderless.semi-select-error:not(:focus-within) {
   border-color: var(--semi-color-danger);
 }

package/lib/es/select/select.scss

@@ -40,7 +40,7 @@ $overflowList: #{$prefix}-overflow-list;
         outline: 0;
     }
 
-    &:active{
+    &:active {
         background-color: $color-select-bg-active;
     }
 
@@ -52,6 +52,7 @@ $overflowList: #{$prefix}-overflow-list;
     &-large {
         min-height: $height-select_large;
         line-height: $height-select_large;
+
         .#{$module}-selection {
             @include font-size-header-6;
         }
@@ -196,6 +197,7 @@ $overflowList: #{$prefix}-overflow-list;
 
         .#{$prefix}-tag-group {
             height: inherit;
+
             .#{$prefix}-tag {
                 @include select-tag-margin;
             }
@@ -326,6 +328,7 @@ $overflowList: #{$prefix}-overflow-list;
         width: $width-select_clear-icon;
         color: $color-select_clearBtn-text-default;
         flex-shrink: 0;
+
         &:hover {
             color: $color-select_clearBtn-text-hover;
         }
@@ -435,6 +438,7 @@ $overflowList: #{$prefix}-overflow-list;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
+
     &-chosen {
         .#{$module}-option-icon {
             display: flex;
@@ -475,36 +479,84 @@ $overflowList: #{$prefix}-overflow-list;
 
 .#{$module}-borderless {
 
-    &:not(:focus-within):not(:hover){
-        background-color:transparent;
-        border-color: transparent;
+    &:not(:focus-within):not(:hover) {
+        background-color: $color-select_borderless-bg-default;
+        border-color: $color-select_borderless-border-default;
+
         .#{$module}-arrow {
             opacity: 0;
         }
+
+        &.#{$module}-borderless-arrow {
+            .#{$module}-arrow {
+                opacity: 1;
+            }
+        }
     }
 
-    &:focus-within:not(:active){
-        background-color:transparent;
+    &:hover {
+        background-color: $color-select_borderless-bg-hover;
+        border: $width-select-border-hover solid $color-select_borderless-border-hover;
+    }
+
+    &:focus {
+        border: $width-select-border-focus solid $color-select_borderless-border-focus;
+        background-color: $color-select_borderless-bg-focus;
+        outline: 0;
+    }
+
+    &:active {
+        background-color: $color-select_borderless-bg-active;
+    }
+
+    &:focus-within:not(:active) {
+        background-color: transparent;
+    }
+
+    &.#{$module}-disabled {
+        background-color: $color-select_borderless_input_disabled-bg;
+
+        &:hover {
+            background-color: $color-select_borderless_input_disabled-bg;
+        }
+
+        .#{$module}-selection,
+        .#{$module}-selection-placeholder {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-prefix,
+        .#{$module}-suffix {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-arrow {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$prefix}-tag {
+            color: $color-select_borderless_input_disabled-text;
+        }
     }
 
     // split style into not and normal to avoid style override
-    &.#{$module}-error:not(:focus-within){
+    &.#{$module}-error:not(:focus-within) {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:not(:focus-within){
+    &.#{$module}-warning:not(:focus-within) {
         border-color: $color-select_warning-border-focus;
     }
 
-    &.#{$module}-error:focus-within{
+    &.#{$module}-error:focus-within {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:focus-within{
+    &.#{$module}-warning:focus-within {
         border-color: $color-select_warning-border-focus;
     }
 
 }
 
 
-    @import './rtl.scss';
+@import './rtl.scss';

package/lib/es/select/variables.scss

@@ -47,6 +47,16 @@ $color-select_option-border-default: var(--semi-color-border); // 分组选择
 $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜单项辅助文本颜色
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
+$color-select_borderless-bg-default: transparent; // borderless 选择器输入框背景色 - 默认态
+$color-select_borderless-bg-hover: var(--semi-color-fill-1); // borderless 选择器输入框背景色 - 悬停态
+$color-select_borderless-bg-active: var(--semi-color-fill-2); // borderless 选择器输入框背景色 - 按下态
+$color-select_borderless-bg-focus: var(--semi-color-fill-0); // borderless 选择器输入框背景色 - 聚焦态
+$color-select_borderless-border-default: transparent; // borderless 选择器输入框边框颜色 - 默认态
+$color-select_borderless-border-hover: $color-select-border-default; // borderless 选择器输入框边框颜色  - 悬停态
+$color-select_borderless-border-active: var(--semi-color-focus-border); // borderless 选择器输入框边框颜色  - 按下态
+$color-select_borderless-border-focus: $color-select-border-active; // borderless 选择器输入框边框颜色  - 聚焦态
+$color-select_borderless_input_disabled-text: var(--semi-color-disabled-text); // borderless 选择器输入框文本颜色  - 禁用态
+$color-select_borderless_input_disabled-bg: var(--semi-color-disabled-fill); // borderless 禁用选择器输入框背景色 - 禁用态
 
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小

package/lib/es/switch/switch.css

@@ -51,6 +51,9 @@
 .semi-switch-disabled:active {
   background-color: transparent;
 }
+.semi-switch-disabled:active .semi-switch-knob {
+  width: 18px;
+}
 .semi-switch-disabled .semi-switch-knob {
   cursor: not-allowed;
   box-shadow: none;
@@ -64,6 +67,9 @@
   border-color: transparent;
   background-color: var(--semi-color-success-disabled);
 }
+.semi-switch-disabled.semi-switch-checked:active .semi-switch-knob {
+  transform: translateX(18px);
+}
 .semi-switch-disabled.semi-switch-checked .semi-switch-knob {
   box-shadow: none;
   border: none;

package/lib/es/switch/switch.scss

@@ -25,9 +25,7 @@ $module: #{$prefix}-switch;
 
     &:active {
         border: $border-thickness-control $color-switch_default-bg-active solid;
-
         .#{$module}-knob {
-            // width: $knob-size + $knob-active-expand;
             width: $width-switch_knob_active;
         }
     }
@@ -69,6 +67,9 @@ $module: #{$prefix}-switch;
 
         &:active {
             background-color: $color-switch_disabled-bg-active;
+            .#{$module}-knob {
+                width: $width-switch_knob_default;
+            }
         }
 
         .#{$module}-knob {
@@ -85,6 +86,11 @@ $module: #{$prefix}-switch;
         &.#{$module}-checked {
             border-color: $color-switch_checked_disabled-border-default;
             background-color: $color-switch_checked_disabled-bg-default;
+            &:active {
+                .#{$module}-knob {
+                    transform: translateX($spacing-switch_checked-translateX);
+                }
+            }
             .#{$module}-knob {
                 @include shadow-0;
                 border: none;

package/lib/es/treeSelect/treeSelect.css

@@ -108,11 +108,14 @@
   padding-right: 0;
   cursor: pointer;
   color: var(--semi-color-text-0);
+  position: relative;
 }
-.semi-tree-select-selection-placeholder {
+.semi-tree-select-selection-content {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+}
+.semi-tree-select-selection-placeholder {
   color: var(--semi-color-text-2);
 }
 .semi-tree-select-selection .semi-tag-group {
@@ -126,6 +129,10 @@
 }
 .semi-tree-select-selection-TriggerSearchItem {
   position: absolute;
+  max-width: calc(100% - 12px);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .semi-tree-select-selection-TriggerSearchItem-placeholder {
   opacity: 0.6;

package/lib/es/treeSelect/treeSelect.scss

@@ -133,11 +133,15 @@ $module: #{$prefix}-tree-select;
         padding-right: 0;
         cursor: pointer;
         color: $color-treeSelect_selection-text-default;
+        position: relative;
 
-        &-placeholder {
+        &-content {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+        }
+        
+        &-placeholder {
             color: $color-treeSelect_input_placeholder-text-default;
         }
 
@@ -154,6 +158,10 @@ $module: #{$prefix}-tree-select;
 
         &-TriggerSearchItem {
             position: absolute;
+            max-width: calc(100% - $spacing-treeSelect_selection-paddingLeft);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
             
             &-placeholder {
                 opacity: .6;

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.38.2",
+    "version": "2.40.0-alpha.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.38.2",
+        "@douyinfe/semi-animation": "2.40.0-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "e761d8bc2ba54e3b69ac77f5e6425c62ed6b02f1",
+    "gitHead": "3c30c680ff8335f275dce40e16c8994af178ca78",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/select.scss

@@ -40,7 +40,7 @@ $overflowList: #{$prefix}-overflow-list;
         outline: 0;
     }
 
-    &:active{
+    &:active {
         background-color: $color-select-bg-active;
     }
 
@@ -52,6 +52,7 @@ $overflowList: #{$prefix}-overflow-list;
     &-large {
         min-height: $height-select_large;
         line-height: $height-select_large;
+
         .#{$module}-selection {
             @include font-size-header-6;
         }
@@ -196,6 +197,7 @@ $overflowList: #{$prefix}-overflow-list;
 
         .#{$prefix}-tag-group {
             height: inherit;
+
             .#{$prefix}-tag {
                 @include select-tag-margin;
             }
@@ -326,6 +328,7 @@ $overflowList: #{$prefix}-overflow-list;
         width: $width-select_clear-icon;
         color: $color-select_clearBtn-text-default;
         flex-shrink: 0;
+
         &:hover {
             color: $color-select_clearBtn-text-hover;
         }
@@ -435,6 +438,7 @@ $overflowList: #{$prefix}-overflow-list;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
+
     &-chosen {
         .#{$module}-option-icon {
             display: flex;
@@ -475,36 +479,84 @@ $overflowList: #{$prefix}-overflow-list;
 
 .#{$module}-borderless {
 
-    &:not(:focus-within):not(:hover){
-        background-color:transparent;
-        border-color: transparent;
+    &:not(:focus-within):not(:hover) {
+        background-color: $color-select_borderless-bg-default;
+        border-color: $color-select_borderless-border-default;
+
         .#{$module}-arrow {
             opacity: 0;
         }
+
+        &.#{$module}-borderless-arrow {
+            .#{$module}-arrow {
+                opacity: 1;
+            }
+        }
     }
 
-    &:focus-within:not(:active){
-        background-color:transparent;
+    &:hover {
+        background-color: $color-select_borderless-bg-hover;
+        border: $width-select-border-hover solid $color-select_borderless-border-hover;
+    }
+
+    &:focus {
+        border: $width-select-border-focus solid $color-select_borderless-border-focus;
+        background-color: $color-select_borderless-bg-focus;
+        outline: 0;
+    }
+
+    &:active {
+        background-color: $color-select_borderless-bg-active;
+    }
+
+    &:focus-within:not(:active) {
+        background-color: transparent;
+    }
+
+    &.#{$module}-disabled {
+        background-color: $color-select_borderless_input_disabled-bg;
+
+        &:hover {
+            background-color: $color-select_borderless_input_disabled-bg;
+        }
+
+        .#{$module}-selection,
+        .#{$module}-selection-placeholder {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-prefix,
+        .#{$module}-suffix {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-arrow {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$prefix}-tag {
+            color: $color-select_borderless_input_disabled-text;
+        }
     }
 
     // split style into not and normal to avoid style override
-    &.#{$module}-error:not(:focus-within){
+    &.#{$module}-error:not(:focus-within) {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:not(:focus-within){
+    &.#{$module}-warning:not(:focus-within) {
         border-color: $color-select_warning-border-focus;
     }
 
-    &.#{$module}-error:focus-within{
+    &.#{$module}-error:focus-within {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:focus-within{
+    &.#{$module}-warning:focus-within {
         border-color: $color-select_warning-border-focus;
     }
 
 }
 
 
-    @import './rtl.scss';
+@import './rtl.scss';

package/select/variables.scss

@@ -47,6 +47,16 @@ $color-select_option-border-default: var(--semi-color-border); // 分组选择
 $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜单项辅助文本颜色
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
+$color-select_borderless-bg-default: transparent; // borderless 选择器输入框背景色 - 默认态
+$color-select_borderless-bg-hover: var(--semi-color-fill-1); // borderless 选择器输入框背景色 - 悬停态
+$color-select_borderless-bg-active: var(--semi-color-fill-2); // borderless 选择器输入框背景色 - 按下态
+$color-select_borderless-bg-focus: var(--semi-color-fill-0); // borderless 选择器输入框背景色 - 聚焦态
+$color-select_borderless-border-default: transparent; // borderless 选择器输入框边框颜色 - 默认态
+$color-select_borderless-border-hover: $color-select-border-default; // borderless 选择器输入框边框颜色  - 悬停态
+$color-select_borderless-border-active: var(--semi-color-focus-border); // borderless 选择器输入框边框颜色  - 按下态
+$color-select_borderless-border-focus: $color-select-border-active; // borderless 选择器输入框边框颜色  - 聚焦态
+$color-select_borderless_input_disabled-text: var(--semi-color-disabled-text); // borderless 选择器输入框文本颜色  - 禁用态
+$color-select_borderless_input_disabled-bg: var(--semi-color-disabled-fill); // borderless 禁用选择器输入框背景色 - 禁用态
 
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小

package/switch/switch.scss

@@ -25,9 +25,7 @@ $module: #{$prefix}-switch;
 
     &:active {
         border: $border-thickness-control $color-switch_default-bg-active solid;
-
         .#{$module}-knob {
-            // width: $knob-size + $knob-active-expand;
             width: $width-switch_knob_active;
         }
     }
@@ -69,6 +67,9 @@ $module: #{$prefix}-switch;
 
         &:active {
             background-color: $color-switch_disabled-bg-active;
+            .#{$module}-knob {
+                width: $width-switch_knob_default;
+            }
         }
 
         .#{$module}-knob {
@@ -85,6 +86,11 @@ $module: #{$prefix}-switch;
         &.#{$module}-checked {
             border-color: $color-switch_checked_disabled-border-default;
             background-color: $color-switch_checked_disabled-bg-default;
+            &:active {
+                .#{$module}-knob {
+                    transform: translateX($spacing-switch_checked-translateX);
+                }
+            }
             .#{$module}-knob {
                 @include shadow-0;
                 border: none;

package/treeSelect/treeSelect.scss

@@ -133,11 +133,15 @@ $module: #{$prefix}-tree-select;
         padding-right: 0;
         cursor: pointer;
         color: $color-treeSelect_selection-text-default;
+        position: relative;
 
-        &-placeholder {
+        &-content {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+        }
+        
+        &-placeholder {
             color: $color-treeSelect_input_placeholder-text-default;
         }
 
@@ -154,6 +158,10 @@ $module: #{$prefix}-tree-select;
 
         &-TriggerSearchItem {
             position: absolute;
+            max-width: calc(100% - $spacing-treeSelect_selection-paddingLeft);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
             
             &-placeholder {
                 opacity: .6;