@douyinfe/semi-foundation 2.38.2 → 2.39.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/checkbox/checkbox.scss

@@ -12,7 +12,6 @@ $module: #{$prefix}-checkbox;
     position: relative;
     display: flex;
     align-items: flex-start;
-    flex-wrap: wrap;
     @include font-size-regular;
     cursor: pointer;
     transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,

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/checkbox/checkbox.css

@@ -6,7 +6,6 @@
   position: relative;
   display: flex;
   align-items: flex-start;
-  flex-wrap: wrap;
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

package/lib/cjs/checkbox/checkbox.scss

@@ -12,7 +12,6 @@ $module: #{$prefix}-checkbox;
     position: relative;
     display: flex;
     align-items: flex-start;
-    flex-wrap: wrap;
     @include font-size-regular;
     cursor: pointer;
     transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,

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/checkbox/checkbox.css

@@ -6,7 +6,6 @@
   position: relative;
   display: flex;
   align-items: flex-start;
-  flex-wrap: wrap;
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

package/lib/es/checkbox/checkbox.scss

@@ -12,7 +12,6 @@ $module: #{$prefix}-checkbox;
     position: relative;
     display: flex;
     align-items: flex-start;
-    flex-wrap: wrap;
     @include font-size-regular;
     cursor: pointer;
     transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,

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.39.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.39.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "e761d8bc2ba54e3b69ac77f5e6425c62ed6b02f1",
+    "gitHead": "7c7257d1e4bca9c1485c077470366e9776661e71",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

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;