@douyinfe/semi-foundation 2.25.0 → 2.25.2

package/cascader/cascader.scss

@@ -161,22 +161,17 @@ $module: #{$prefix}-cascader;
         }
         
         .#{$prefix}-tagInput {
-            &-wrapper {
-                &-default {
-                    min-height: $height-cascader_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-cascader_selection_tagInput_wrapper_small;
-                }
-    
-                &-large {
-                    min-height: $height-cascader_selection_tagInput_wrapper_large;
-                }
+            min-height: $height-cascader_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-cascader_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-cascader_selection_tagInput_wrapper_large;
             }
 
             .#{$prefix}-input-wrapper {
-                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
@@ -193,13 +188,6 @@ $module: #{$prefix}-cascader;
                     margin-bottom: $spacing-cascader_selection_tag-marginY;
                 }
             }
-
-            // .#{$prefix}-input-wrapper-small {
-            //     height: $height-cascader_selection_tagInput_input_small;
-            // }
-            // .#{$prefix}-input-wrapper-large {
-            //     height: $height-cascader_selection_tagInput_input_large;
-            // }
         }
 
         &-text {

package/lib/cjs/cascader/cascader.css

@@ -136,13 +136,13 @@
   background: transparent;
   margin-left: -4px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-default {
+.semi-cascader-selection .semi-tagInput {
   min-height: 30px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-small {
+.semi-cascader-selection .semi-tagInput-small {
   min-height: 22px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-large {
+.semi-cascader-selection .semi-tagInput-large {
   min-height: 38px;
 }
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper {

package/lib/cjs/cascader/cascader.scss

@@ -161,22 +161,17 @@ $module: #{$prefix}-cascader;
         }
         
         .#{$prefix}-tagInput {
-            &-wrapper {
-                &-default {
-                    min-height: $height-cascader_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-cascader_selection_tagInput_wrapper_small;
-                }
-    
-                &-large {
-                    min-height: $height-cascader_selection_tagInput_wrapper_large;
-                }
+            min-height: $height-cascader_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-cascader_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-cascader_selection_tagInput_wrapper_large;
             }
 
             .#{$prefix}-input-wrapper {
-                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
@@ -193,13 +188,6 @@ $module: #{$prefix}-cascader;
                     margin-bottom: $spacing-cascader_selection_tag-marginY;
                 }
             }
-
-            // .#{$prefix}-input-wrapper-small {
-            //     height: $height-cascader_selection_tagInput_input_small;
-            // }
-            // .#{$prefix}-input-wrapper-large {
-            //     height: $height-cascader_selection_tagInput_input_large;
-            // }
         }
 
         &-text {

package/lib/cjs/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: string[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {
@@ -10,8 +10,8 @@ declare const strings: {
         SCROLL: string;
     };
     BOUNDARY_MAP: {
-        START: string;
-        END: string;
+        readonly START: "start";
+        readonly END: "end";
     };
     OVERFLOW_DIR: {
         NONE: number;
@@ -19,5 +19,7 @@ declare const strings: {
         SHRINK: number;
     };
 };
-declare const numbers: {};
+declare const numbers: {
+    MINIMUM_HTML_ELEMENT_WIDTH: number;
+};
 export { cssClasses, strings, numbers };

package/lib/cjs/overflowList/constants.js

@@ -33,5 +33,7 @@ const strings = {
   OVERFLOW_DIR
 };
 exports.strings = strings;
-const numbers = {};
+const numbers = {
+  MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
 exports.numbers = numbers;

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

@@ -3,6 +3,7 @@ export interface OverflowListAdapter extends DefaultAdapter {
     updateStates: (state: any) => void;
     updateVisibleState: (visible: Map<string, boolean>) => void;
     notifyIntersect: (res: any) => void;
+    getItemSizeMap: () => Map<string, number>;
 }
 declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
     constructor(adapter: OverflowListAdapter);
@@ -10,6 +11,7 @@ declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter>
     isScrollMode: () => boolean;
     getOverflowItem(): Array<Array<Record<string, any>>>;
     handleIntersect(entries: Array<IntersectionObserverEntry>): void;
-    handlePartition(growing: number): void;
+    getReversedItems: () => any;
+    handleCollapseOverflow(): void;
 }
 export default OverflowListFoundation;

package/lib/cjs/overflowList/foundation.js

@@ -29,6 +29,13 @@ class OverflowListFoundation extends _foundation.default {
       } = this.getProps();
       return renderMode === 'scroll';
     };
+
+    this.getReversedItems = () => {
+      const {
+        items
+      } = this.getProps();
+      return (0, _cloneDeep2.default)(items).reverse();
+    };
   }
 
   getOverflowItem() {
@@ -95,54 +102,68 @@ class OverflowListFoundation extends _foundation.default {
     this._adapter.notifyIntersect(res);
   }
 
-  handlePartition(growing) {
+  handleCollapseOverflow() {
+    const {
+      minVisibleItems,
+      collapseFrom
+    } = this.getProps();
     const {
-      direction,
-      overflow,
-      lastOverflowCount,
-      visible
+      overflowWidth,
+      containerWidth,
+      pivot: statePivot,
+      overflowStatus
     } = this.getStates();
     const {
-      minVisibleItems,
-      collapseFrom,
-      items
+      items,
+      onOverflow
     } = this.getProps();
-    let updateState = {};
+    let itemWidths = overflowWidth,
+        _pivot = 0;
+    let overflowed = false;
 
-    if (growing === OverflowDirection.NONE) {
-      updateState = {
-        direction: OverflowDirection.NONE
-      };
-    }
+    for (const size of this._adapter.getItemSizeMap().values()) {
+      itemWidths += size; // 触发overflow
 
-    if (growing === OverflowDirection.GROW) {
-      const updatedOverflowCount = direction === OverflowDirection.NONE ? overflow.length : lastOverflowCount;
-      updateState = {
-        direction: OverflowDirection.GROW,
-        lastOverflowCount: updatedOverflowCount,
-        overflow: [],
-        visible: items
-      };
-    }
+      if (itemWidths > containerWidth) {
+        overflowed = true;
+        break;
+      } // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
 
-    if (growing === OverflowDirection.SHRINK && visible.length > minVisibleItems) {
-      const collapseFromStart = collapseFrom === Boundary.START;
-      const newVisible = visible.slice();
-      const next = collapseFromStart ? newVisible.shift() : newVisible.pop();
-
-      if (next !== undefined) {
-        updateState = {
-          // set SHRINK mode unless a GROW is already in progress.
-          // GROW shows all items then shrinks until it settles, so we
-          // preserve the fact that the original trigger was a GROW.
-          direction: direction !== OverflowDirection.GROW ? OverflowDirection.SHRINK : direction,
-          overflow: collapseFromStart ? [...overflow, next] : [next, ...overflow],
-          visible: newVisible
-        };
+
+      if (_pivot === items.length - 1) {
+        this._adapter.updateStates({
+          overflowStatus: "normal",
+          pivot: items.length - 1,
+          visible: items,
+          overflow: []
+        });
+
+        break;
       }
+
+      _pivot++;
     }
 
-    this._adapter.updateStates(updateState);
+    if (overflowed) {
+      const pivot = Math.max(minVisibleItems, _pivot);
+      const isCollapseFromStart = collapseFrom === Boundary.START;
+      const visible = isCollapseFromStart ? this.getReversedItems().slice(0, pivot).reverse() : items.slice(0, pivot);
+      const overflow = isCollapseFromStart ? this.getReversedItems().slice(pivot).reverse() : items.slice(pivot);
+
+      this._adapter.updateStates({
+        overflowStatus: "overflowed",
+        pivot: pivot,
+        visible,
+        overflow
+      }); // trigger onOverflow
+
+
+      if (statePivot !== pivot) {
+        onOverflow(overflow);
+      }
+
+      return;
+    }
   }
 
 }

package/lib/cjs/tagInput/tagInput.css

@@ -208,6 +208,15 @@
 .semi-tagInput-suffix-text {
   color: var(--semi-color-text-2);
 }
+.semi-tagInput-tag-content-wrapper {
+  display: flex;
+  align-items: center;
+}
+.semi-tagInput-sortable-list {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+}
 
 .semi-rtl .semi-tagInput,
 .semi-portal-rtl .semi-tagInput {

package/lib/cjs/tagInput/tagInput.scss

@@ -259,6 +259,17 @@ $module: #{$prefix}-tagInput;
             color: $color-tagInput_suffix-default;
         }
     }
+
+    &-tag-content-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &-sortable-list {
+        display: flex;
+        flex-flow: row wrap;
+        width: 100%;
+    }
 }
 
 @import "./rtl.scss";

package/lib/cjs/tooltip/foundation.js

@@ -944,7 +944,7 @@ class Tooltip extends _foundation.default {
           }
 
           if (shouldReverseLeftSide && widthIsBigger) {
-            position = this._adjustPos(position, true);
+            position = this._adjustPos(position);
           }
 
           if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {

package/lib/cjs/treeSelect/treeSelect.css

@@ -139,20 +139,18 @@
 .semi-tree-select-selection .semi-tagInput {
   border: hidden;
   background: transparent;
-}
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-default {
   min-height: 30px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-small {
+.semi-tree-select-selection .semi-tagInput-small {
   min-height: 22px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-large {
+.semi-tree-select-selection .semi-tagInput-large {
   min-height: 38px;
 }
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
+  padding-left: 4px;
+  padding-right: 4px;
+}
 .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input {
   padding-left: 0;
 }

package/lib/cjs/treeSelect/treeSelect.scss

@@ -171,23 +171,20 @@ $module: #{$prefix}-tree-select;
         .#{$prefix}-tagInput {
             border: hidden;
             background: transparent;
+            min-height: $height-treeSelect_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-treeSelect_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-treeSelect_selection_tagInput_wrapper_large;
+            }
 
             .#{$prefix}-tagInput-wrapper {
                 padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
                 padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
 
-                &-default {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_small;
-                }
-
-                &-large {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_large;
-                }
-
                 .#{$prefix}-input-wrapper {
                     // height: $height-treeSelect_selection_tagInput_input_default;
 
@@ -205,13 +202,6 @@ $module: #{$prefix}-tree-select;
                         margin-bottom: $spacing-treeSelect_tag-marginY;
                     }
                 }
-    
-                // .#{$prefix}-input-wrapper-small {
-                //     height: $height-treeSelect_selection_tagInput_input_small;
-                // }
-                // .#{$prefix}-input-wrapper-large {
-                //     height: $height-treeSelect_selection_tagInput_input_large;
-                // }
             }
         }
     }

package/lib/es/cascader/cascader.css

@@ -136,13 +136,13 @@
   background: transparent;
   margin-left: -4px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-default {
+.semi-cascader-selection .semi-tagInput {
   min-height: 30px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-small {
+.semi-cascader-selection .semi-tagInput-small {
   min-height: 22px;
 }
-.semi-cascader-selection .semi-tagInput-wrapper-large {
+.semi-cascader-selection .semi-tagInput-large {
   min-height: 38px;
 }
 .semi-cascader-selection .semi-tagInput .semi-input-wrapper {

package/lib/es/cascader/cascader.scss

@@ -161,22 +161,17 @@ $module: #{$prefix}-cascader;
         }
         
         .#{$prefix}-tagInput {
-            &-wrapper {
-                &-default {
-                    min-height: $height-cascader_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-cascader_selection_tagInput_wrapper_small;
-                }
-    
-                &-large {
-                    min-height: $height-cascader_selection_tagInput_wrapper_large;
-                }
+            min-height: $height-cascader_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-cascader_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-cascader_selection_tagInput_wrapper_large;
             }
 
             .#{$prefix}-input-wrapper {
-                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
@@ -193,13 +188,6 @@ $module: #{$prefix}-cascader;
                     margin-bottom: $spacing-cascader_selection_tag-marginY;
                 }
             }
-
-            // .#{$prefix}-input-wrapper-small {
-            //     height: $height-cascader_selection_tagInput_input_small;
-            // }
-            // .#{$prefix}-input-wrapper-large {
-            //     height: $height-cascader_selection_tagInput_input_large;
-            // }
         }
 
         &-text {

package/lib/es/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: string[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {
@@ -10,8 +10,8 @@ declare const strings: {
         SCROLL: string;
     };
     BOUNDARY_MAP: {
-        START: string;
-        END: string;
+        readonly START: "start";
+        readonly END: "end";
     };
     OVERFLOW_DIR: {
         NONE: number;
@@ -19,5 +19,7 @@ declare const strings: {
         SHRINK: number;
     };
 };
-declare const numbers: {};
+declare const numbers: {
+    MINIMUM_HTML_ELEMENT_WIDTH: number;
+};
 export { cssClasses, strings, numbers };

package/lib/es/overflowList/constants.js

@@ -23,5 +23,7 @@ const strings = {
   BOUNDARY_MAP,
   OVERFLOW_DIR
 };
-const numbers = {};
+const numbers = {
+  MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
 export { cssClasses, strings, numbers };

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

@@ -3,6 +3,7 @@ export interface OverflowListAdapter extends DefaultAdapter {
     updateStates: (state: any) => void;
     updateVisibleState: (visible: Map<string, boolean>) => void;
     notifyIntersect: (res: any) => void;
+    getItemSizeMap: () => Map<string, number>;
 }
 declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
     constructor(adapter: OverflowListAdapter);
@@ -10,6 +11,7 @@ declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter>
     isScrollMode: () => boolean;
     getOverflowItem(): Array<Array<Record<string, any>>>;
     handleIntersect(entries: Array<IntersectionObserverEntry>): void;
-    handlePartition(growing: number): void;
+    getReversedItems: () => any;
+    handleCollapseOverflow(): void;
 }
 export default OverflowListFoundation;

package/lib/es/overflowList/foundation.js

@@ -16,6 +16,13 @@ class OverflowListFoundation extends BaseFoundation {
       } = this.getProps();
       return renderMode === 'scroll';
     };
+
+    this.getReversedItems = () => {
+      const {
+        items
+      } = this.getProps();
+      return _cloneDeep(items).reverse();
+    };
   }
 
   getOverflowItem() {
@@ -84,54 +91,68 @@ class OverflowListFoundation extends BaseFoundation {
     this._adapter.notifyIntersect(res);
   }
 
-  handlePartition(growing) {
+  handleCollapseOverflow() {
+    const {
+      minVisibleItems,
+      collapseFrom
+    } = this.getProps();
     const {
-      direction,
-      overflow,
-      lastOverflowCount,
-      visible
+      overflowWidth,
+      containerWidth,
+      pivot: statePivot,
+      overflowStatus
     } = this.getStates();
     const {
-      minVisibleItems,
-      collapseFrom,
-      items
+      items,
+      onOverflow
     } = this.getProps();
-    let updateState = {};
+    let itemWidths = overflowWidth,
+        _pivot = 0;
+    let overflowed = false;
 
-    if (growing === OverflowDirection.NONE) {
-      updateState = {
-        direction: OverflowDirection.NONE
-      };
-    }
+    for (const size of this._adapter.getItemSizeMap().values()) {
+      itemWidths += size; // 触发overflow
 
-    if (growing === OverflowDirection.GROW) {
-      const updatedOverflowCount = direction === OverflowDirection.NONE ? overflow.length : lastOverflowCount;
-      updateState = {
-        direction: OverflowDirection.GROW,
-        lastOverflowCount: updatedOverflowCount,
-        overflow: [],
-        visible: items
-      };
-    }
+      if (itemWidths > containerWidth) {
+        overflowed = true;
+        break;
+      } // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
 
-    if (growing === OverflowDirection.SHRINK && visible.length > minVisibleItems) {
-      const collapseFromStart = collapseFrom === Boundary.START;
-      const newVisible = visible.slice();
-      const next = collapseFromStart ? newVisible.shift() : newVisible.pop();
-
-      if (next !== undefined) {
-        updateState = {
-          // set SHRINK mode unless a GROW is already in progress.
-          // GROW shows all items then shrinks until it settles, so we
-          // preserve the fact that the original trigger was a GROW.
-          direction: direction !== OverflowDirection.GROW ? OverflowDirection.SHRINK : direction,
-          overflow: collapseFromStart ? [...overflow, next] : [next, ...overflow],
-          visible: newVisible
-        };
+
+      if (_pivot === items.length - 1) {
+        this._adapter.updateStates({
+          overflowStatus: "normal",
+          pivot: items.length - 1,
+          visible: items,
+          overflow: []
+        });
+
+        break;
       }
+
+      _pivot++;
     }
 
-    this._adapter.updateStates(updateState);
+    if (overflowed) {
+      const pivot = Math.max(minVisibleItems, _pivot);
+      const isCollapseFromStart = collapseFrom === Boundary.START;
+      const visible = isCollapseFromStart ? this.getReversedItems().slice(0, pivot).reverse() : items.slice(0, pivot);
+      const overflow = isCollapseFromStart ? this.getReversedItems().slice(pivot).reverse() : items.slice(pivot);
+
+      this._adapter.updateStates({
+        overflowStatus: "overflowed",
+        pivot: pivot,
+        visible,
+        overflow
+      }); // trigger onOverflow
+
+
+      if (statePivot !== pivot) {
+        onOverflow(overflow);
+      }
+
+      return;
+    }
   }
 
 }

package/lib/es/tagInput/tagInput.css

@@ -208,6 +208,15 @@
 .semi-tagInput-suffix-text {
   color: var(--semi-color-text-2);
 }
+.semi-tagInput-tag-content-wrapper {
+  display: flex;
+  align-items: center;
+}
+.semi-tagInput-sortable-list {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+}
 
 .semi-rtl .semi-tagInput,
 .semi-portal-rtl .semi-tagInput {

package/lib/es/tagInput/tagInput.scss

@@ -259,6 +259,17 @@ $module: #{$prefix}-tagInput;
             color: $color-tagInput_suffix-default;
         }
     }
+
+    &-tag-content-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &-sortable-list {
+        display: flex;
+        flex-flow: row wrap;
+        width: 100%;
+    }
 }
 
 @import "./rtl.scss";

package/lib/es/tooltip/foundation.js

@@ -934,7 +934,7 @@ export default class Tooltip extends BaseFoundation {
           }
 
           if (shouldReverseLeftSide && widthIsBigger) {
-            position = this._adjustPos(position, true);
+            position = this._adjustPos(position);
           }
 
           if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {

package/lib/es/treeSelect/treeSelect.css

@@ -139,20 +139,18 @@
 .semi-tree-select-selection .semi-tagInput {
   border: hidden;
   background: transparent;
-}
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-default {
   min-height: 30px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-small {
+.semi-tree-select-selection .semi-tagInput-small {
   min-height: 22px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-large {
+.semi-tree-select-selection .semi-tagInput-large {
   min-height: 38px;
 }
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
+  padding-left: 4px;
+  padding-right: 4px;
+}
 .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input {
   padding-left: 0;
 }

package/lib/es/treeSelect/treeSelect.scss

@@ -171,23 +171,20 @@ $module: #{$prefix}-tree-select;
         .#{$prefix}-tagInput {
             border: hidden;
             background: transparent;
+            min-height: $height-treeSelect_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-treeSelect_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-treeSelect_selection_tagInput_wrapper_large;
+            }
 
             .#{$prefix}-tagInput-wrapper {
                 padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
                 padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
 
-                &-default {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_small;
-                }
-
-                &-large {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_large;
-                }
-
                 .#{$prefix}-input-wrapper {
                     // height: $height-treeSelect_selection_tagInput_input_default;
 
@@ -205,13 +202,6 @@ $module: #{$prefix}-tree-select;
                         margin-bottom: $spacing-treeSelect_tag-marginY;
                     }
                 }
-    
-                // .#{$prefix}-input-wrapper-small {
-                //     height: $height-treeSelect_selection_tagInput_input_small;
-                // }
-                // .#{$prefix}-input-wrapper-large {
-                //     height: $height-treeSelect_selection_tagInput_input_large;
-                // }
             }
         }
     }

package/overflowList/constants.ts

@@ -14,7 +14,7 @@ const MODE_MAP = {
 const BOUNDARY_MAP = {
     START: 'start',
     END: 'end',
-};
+} as const;
 
 const OVERFLOW_DIR = {
     NONE: 0,
@@ -31,7 +31,9 @@ const strings = {
     OVERFLOW_DIR
 };
 
-const numbers = {};
+const numbers = {
+    MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
 
 export {
     cssClasses,

package/overflowList/foundation.ts

@@ -7,7 +7,8 @@ const OverflowDirection = strings.OVERFLOW_DIR;
 export interface OverflowListAdapter extends DefaultAdapter {
     updateStates: (state: any) => void;
     updateVisibleState: (visible: Map<string, boolean>) => void;
-    notifyIntersect: (res: any) => void
+    notifyIntersect: (res: any) => void;
+    getItemSizeMap: ()=>Map<string, number>
 }
 
 class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
@@ -29,6 +30,7 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
         if (!this.isScrollMode()) {
             return overflow;
         }
+
         const visibleStateArr = items.map(({ key }: { key: string }) => Boolean(visibleState.get(key)));
         const visibleStart = visibleStateArr.indexOf(true);
         const visibleEnd = visibleStateArr.lastIndexOf(true);
@@ -71,38 +73,52 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
         this._adapter.notifyIntersect(res);
     }
 
-    handlePartition(growing: number): void {
-        const { direction, overflow, lastOverflowCount, visible } = this.getStates();
-        const { minVisibleItems, collapseFrom, items } = this.getProps();
-        let updateState = {};
-        if (growing === OverflowDirection.NONE) {
-            updateState = { direction: OverflowDirection.NONE };
-        }
-        if (growing === OverflowDirection.GROW) {
-            const updatedOverflowCount = direction === OverflowDirection.NONE ? overflow.length : lastOverflowCount;
-            updateState = {
-                direction: OverflowDirection.GROW,
-                lastOverflowCount: updatedOverflowCount,
-                overflow: [],
-                visible: items,
-            };
+    getReversedItems = ()=>{
+        const { items } = this.getProps();
+        return cloneDeep(items).reverse();
+    }
+    handleCollapseOverflow(){
+        const { minVisibleItems, collapseFrom } = this.getProps();
+        const { overflowWidth, containerWidth, pivot: statePivot, overflowStatus } = this.getStates();
+        const { items, onOverflow } = this.getProps();
+        let itemWidths = overflowWidth, _pivot = 0;
+        let overflowed = false;
+        for (const size of this._adapter.getItemSizeMap().values()) {
+            itemWidths += size;
+            // 触发overflow
+            if (itemWidths > containerWidth) {
+                overflowed = true;
+                break;
+            }
+            // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
+            if (_pivot === items.length - 1) {
+                this._adapter.updateStates({
+                    overflowStatus: "normal",
+                    pivot: items.length - 1,
+                    visible: items,
+                    overflow: []
+                });
+                break;
+            }
+            _pivot++;
         }
-        if (growing === OverflowDirection.SHRINK && visible.length > minVisibleItems) {
-            const collapseFromStart = collapseFrom === Boundary.START;
-            const newVisible = visible.slice();
-            const next = collapseFromStart ? newVisible.shift() : newVisible.pop();
-            if (next !== undefined) {
-                updateState = {
-                    // set SHRINK mode unless a GROW is already in progress.
-                    // GROW shows all items then shrinks until it settles, so we
-                    // preserve the fact that the original trigger was a GROW.
-                    direction: direction !== OverflowDirection.GROW ? OverflowDirection.SHRINK : direction,
-                    overflow: collapseFromStart ? [...overflow, next] : [next, ...overflow],
-                    visible: newVisible
-                };
+        if (overflowed) {
+            const pivot = Math.max(minVisibleItems, _pivot);
+            const isCollapseFromStart = collapseFrom === Boundary.START;
+            const visible = isCollapseFromStart ? this.getReversedItems().slice(0, pivot).reverse() : items.slice(0, pivot);
+            const overflow = isCollapseFromStart ? this.getReversedItems().slice(pivot).reverse() : items.slice(pivot);
+            this._adapter.updateStates({
+                overflowStatus: "overflowed",
+                pivot: pivot,
+                visible,
+                overflow,
+            });
+            // trigger onOverflow
+            if (statePivot !== pivot){
+                onOverflow(overflow);
             }
+            return;
         }
-        this._adapter.updateStates(updateState);
     }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.25.0",
+    "version": "2.25.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "3c2ec566acd956095fc502690245c9a502251357",
+    "gitHead": "d1cdea565d328c70a4de8636aed30c88f60732dd",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tagInput/tagInput.scss

@@ -259,6 +259,17 @@ $module: #{$prefix}-tagInput;
             color: $color-tagInput_suffix-default;
         }
     }
+
+    &-tag-content-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &-sortable-list {
+        display: flex;
+        flex-flow: row wrap;
+        width: 100%;
+    }
 }
 
 @import "./rtl.scss";

package/tooltip/foundation.ts

@@ -855,7 +855,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                         position = this._adjustPos(position, true);
                     }
                     if (shouldReverseLeftSide && widthIsBigger) {
-                        position = this._adjustPos(position, true);
+                        position = this._adjustPos(position);
                     }
                     if (isWidthOverFlow && (isViewXEnoughSideHalf || isContainerXEnoughSideHalf)) {
                         position = this._adjustPos(position, true, 'reduce');

package/treeSelect/treeSelect.scss

@@ -171,23 +171,20 @@ $module: #{$prefix}-tree-select;
         .#{$prefix}-tagInput {
             border: hidden;
             background: transparent;
+            min-height: $height-treeSelect_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-treeSelect_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-treeSelect_selection_tagInput_wrapper_large;
+            }
 
             .#{$prefix}-tagInput-wrapper {
                 padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
                 padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
 
-                &-default {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_small;
-                }
-
-                &-large {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_large;
-                }
-
                 .#{$prefix}-input-wrapper {
                     // height: $height-treeSelect_selection_tagInput_input_default;
 
@@ -205,13 +202,6 @@ $module: #{$prefix}-tree-select;
                         margin-bottom: $spacing-treeSelect_tag-marginY;
                     }
                 }
-    
-                // .#{$prefix}-input-wrapper-small {
-                //     height: $height-treeSelect_selection_tagInput_input_small;
-                // }
-                // .#{$prefix}-input-wrapper-large {
-                //     height: $height-treeSelect_selection_tagInput_input_large;
-                // }
             }
         }
     }