@douyinfe/semi-foundation 2.27.1 → 2.28.0-beta.0

package/lib/es/toast/toast.css

@@ -41,18 +41,30 @@
   background-color: var(--semi-color-warning-light-default);
   border: 1px solid var(--semi-color-warning);
 }
+.semi-toast-light.semi-toast-warning .semi-toast-icon-warning {
+  color: var(--semi-color-warning);
+}
 .semi-toast-light.semi-toast-success .semi-toast-content {
   background-color: var(--semi-color-success-light-default);
   border: 1px solid var(--semi-color-success);
 }
+.semi-toast-light.semi-toast-success .semi-toast-icon-success {
+  color: var(--semi-color-success);
+}
 .semi-toast-light.semi-toast-info .semi-toast-content {
   background-color: var(--semi-color-info-light-default);
   border: 1px solid var(--semi-color-info);
 }
+.semi-toast-light.semi-toast-info .semi-toast-icon-info {
+  color: var(--semi-color-info);
+}
 .semi-toast-light.semi-toast-error .semi-toast-content {
   background-color: var(--semi-color-danger-light-default);
   border: 1px solid var(--semi-color-danger);
 }
+.semi-toast-light.semi-toast-error .semi-toast-icon-error {
+  color: var(--semi-color-danger);
+}
 .semi-toast .semi-toast-icon-warning {
   color: var(--semi-color-warning);
 }

package/lib/es/toast/toast.scss

@@ -48,6 +48,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_warning_light-bg;
                 border: $width-toast_light-border solid $color-toast_warning_light-border;
             }
+            .#{$icon}-warning {
+                color: $color-toast_warning_light-icon;
+            }
         }
 
         &.#{$module}-success {
@@ -55,6 +58,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_success_light-bg;
                 border: $width-toast_light-border solid $color-toast_success_light-border;
             }
+            .#{$icon}-success {
+                color: $color-toast_success_light-icon;
+            }
         }
 
         &.#{$module}-info {
@@ -62,6 +68,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_info_light-bg;
                 border: $width-toast_light-border solid $color-toast_info_light-border;
             }
+            .#{$icon}-info {
+                color: $color-toast_info_light-icon;
+            }
         }
 
         &.#{$module}-error {
@@ -69,6 +78,9 @@ $icon: #{$prefix}-toast-icon;
                 background-color: $color-toast_danger_light-bg;
                 border: $width-toast_light-border solid $color-toast_danger_light-border;
             }
+            .#{$icon}-error {
+                color: $color-toast_danger_light-icon;
+            }
         }
     }
 

package/lib/es/toast/variables.scss

@@ -5,13 +5,21 @@ $color-toast_warning-icon: var(--semi-color-warning); // 警告提示图标颜
 $color-toast_success-icon: var(--semi-color-success); // 成功提示图标颜色
 $color-toast_info-icon: var(--semi-color-info); // 通知提示图标颜色
 $color-toast_danger-icon: var(--semi-color-danger); // 错误提示图标颜色
+
 $color-toast_warning_light-bg: var(--semi-color-warning-light-default); // 多色样式 警告提示背景颜色
+$color-toast_warning_light-icon: $color-toast_warning-icon; // 多色样式 警告提示图标颜色
 $color-toast_warning_light-border: var(--semi-color-warning); // 多色样式 警告提示描边颜色
+
 $color-toast_success_light-bg: var(--semi-color-success-light-default); // 多色样式 成功提示背景颜色
+$color-toast_success_light-icon: $color-toast_success-icon; // 多色样式 成功提示图标颜色
 $color-toast_success_light-border: var(--semi-color-success); // 多色样式 成功提示描边颜色
+
 $color-toast_info_light-bg: var(--semi-color-info-light-default); // 多色样式 通知提示背景颜色
+$color-toast_info_light-icon: $color-toast_info-icon; // 多色样式 通知提示图标颜色
 $color-toast_info_light-border: var(--semi-color-info); // 多色样式 通知提示描边颜色
+
 $color-toast_danger_light-bg: var(--semi-color-danger-light-default); // 多色样式 错误提示背景颜色
+$color-toast_danger_light-icon: $color-toast_danger-icon; // 多色样式 错误提示图标颜色
 $color-toast_danger_light-border: var(--semi-color-danger); // 多色样式 错误提示描边颜色
 
 // Spacing

package/modal/modalFoundation.ts

@@ -1,4 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import isPromise from "../utils/isPromise";
 
 export type OKType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
 export type Size = 'small' | 'medium' | 'large' | 'full-width';
@@ -6,8 +7,8 @@ export type Size = 'small' | 'medium' | 'large' | 'full-width';
 export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     disabledBodyScroll: () => void;
     enabledBodyScroll: () => void;
-    notifyCancel: (e: any) => void;
-    notifyOk: (e: any) => void;
+    notifyCancel: (e: any) => void | Promise<any>;
+    notifyOk: (e: any) => void | Promise<any>;
     notifyClose: () => void;
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
@@ -58,7 +59,9 @@ export interface ModalProps {
 
 export interface ModalState {
     displayNone: boolean;
-    isFullScreen: boolean
+    isFullScreen: boolean;
+    onOKReturnPromiseStatus?:"pending"|"fulfilled"|"rejected";
+    onCancelReturnPromiseStatus?:"pending"|"fulfilled"|"rejected"
 }
 
 export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
@@ -74,11 +77,29 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     }
 
     handleCancel(e: any) {
-        this._adapter.notifyCancel(e);
+        const result = this._adapter.notifyCancel(e);
+        if (isPromise(result)) {
+            this._adapter.setState({ onCancelReturnPromiseStatus: "pending" });
+            (result as Promise<any>)?.then(()=>{
+                this._adapter.setState({ onCancelReturnPromiseStatus: "fulfilled" });
+            })?.catch(e=>{
+                this._adapter.setState({ onCancelReturnPromiseStatus: "rejected" });
+                throw e;
+            });
+        }
     }
 
     handleOk(e: any) {
-        this._adapter.notifyOk(e);
+        const result = this._adapter.notifyOk(e);
+        if (isPromise(result)){
+            this._adapter.setState({ onOKReturnPromiseStatus: "pending" });
+            (result as Promise<any>)?.then(()=>{
+                this._adapter.setState({ onOKReturnPromiseStatus: "fulfilled" });
+            })?.catch(e=>{
+                this._adapter.setState({ onOKReturnPromiseStatus: "rejected" });
+                throw e;
+            });
+        }
     }
 
     beforeShow() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.27.1",
+    "version": "2.28.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "a40dba5743af05efae302451a2174a8f22115a47",
+    "gitHead": "6ee4e133cbfd129b79ac50922bbb001f3e75599c",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/foundation.ts

@@ -11,7 +11,6 @@ import { handlePrevent } from '../utils/a11y';
 
 export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getTriggerWidth(): number;
-    setOptionsWidth?(): any;
     updateFocusState(focus: boolean): void;
     focusTrigger(): void;
     unregisterClickOutsideHandler(): void;
@@ -46,6 +45,7 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyMouseEnter(event: any): void;
     updateHovering(isHover: boolean): void;
     updateScrollTop(index?: number): void;
+    updateOverflowItemCount(count: number): void;
     getContainer(): any;
     getFocusableElements(node: any): any[];
     getActiveElement(): any;
@@ -196,7 +196,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     // call when props.value change
     handleValueChange(value: PropValue) {
-        const { allowCreate } = this.getProps();
+        const { allowCreate, autoClearSearchValue } = this.getProps();
+        const { inputValue } = this.getStates();
         let originalOptions;
         // AllowCreate and controlled mode, no need to re-collect optionList
         if (allowCreate && this._isControlledComponent()) {
@@ -204,11 +205,17 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             originalOptions.forEach(item => (item._show = true));
         } else {
             // originalOptions = this.getState('options');
-            // The options in state cannot be used directly here, because it is possible to update the optionList and props.value at the same time, and the options in state are still old at this time
+            // The options in state cannot be used directly here,
+            // because it is possible to update the optionList and props.value at the same time, and the options in state are still old at this time
             originalOptions = this._adapter.getOptionsFromChildren();
         }
         // Multi-selection, controlled mode, you need to reposition the drop-down menu after updating
         this._adapter.rePositionDropdown();
+
+        if (this._isFilterable() && !autoClearSearchValue && inputValue) {
+            originalOptions = this._filterOption(originalOptions, inputValue);
+        }
+
         this._update(value, originalOptions);
     }
 
@@ -220,10 +227,13 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             selections = this._updateSingle(propValue, originalOptions);
         } else {
             selections = this._updateMultiple(propValue as (PropValue)[], originalOptions);
+            this.updateOverflowItemCount(selections.size);
         }
         // Update the text in the selection box
         this._adapter.updateSelection(selections);
         // Update the selected item in the drop-down box
+
+
         this.updateOptionsActiveStatus(selections, originalOptions);
     }
 
@@ -464,6 +474,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         } else {
             // Uncontrolled components, update ui
             this._adapter.updateSelection(selections);
+            this.updateOverflowItemCount(selections.size);
             // In multi-select mode, the drop-down pop-up layer is repositioned every time the value is changed, because the height selection of the selection box may have changed
             this._adapter.rePositionDropdown();
             let { options } = this.getStates();
@@ -531,6 +542,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         } else {
             this._notifyDeselect(item.value, item);
             this._adapter.updateSelection(selections);
+            this.updateOverflowItemCount(selections.size);
             this.updateOptionsActiveStatus(selections);
             // Repostion drop-down layer, because the selection may have changed the number of rows, resulting in a height change
             this._adapter.rePositionDropdown();
@@ -1102,6 +1114,22 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         this._adapter.updateScrollTop();
     }
 
+    updateOverflowItemCount(selectionLength: number, overFlowCount?: number) {
+        const { maxTagCount, ellipsisTrigger } = this.getProps();
+        if (!ellipsisTrigger) {
+            return ;
+        }
+        if (overFlowCount) {
+            this._adapter.updateOverflowItemCount(overFlowCount);
+        } else if (typeof maxTagCount === 'number') {
+            if (selectionLength - maxTagCount > 0) {
+                this._adapter.updateOverflowItemCount(selectionLength - maxTagCount);
+            } else {
+                this._adapter.updateOverflowItemCount(0);
+            }
+        }
+    }
+
     updateIsFullTags() {
         const { isFullTags } = this.getStates();
         if (!isFullTags) {

package/select/select.scss

@@ -8,6 +8,7 @@ $module: #{$prefix}-select;
 $single: #{$module}-single;
 $filterable: #{$module}-filterable;
 $multiple: #{$module}-multiple;
+$overflowList: #{$prefix}-overflow-list;
 
 .#{$module} {
     box-sizing: border-box;
@@ -24,6 +25,10 @@ $multiple: #{$module}-multiple;
     cursor: pointer;
     transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg, border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
     transform: scale($transform_scale-select);
+
+    max-height: 300px;
+    overflow-y: auto;
+
     &:hover {
         background-color: $color-select-bg-hover;
         border: $width-select-border-hover solid $color-select-border-hover;
@@ -198,6 +203,28 @@ $multiple: #{$module}-multiple;
         display: flex;
         align-items: center;
         height: 100%;
+
+        &-collapse {
+            display: inline-flex;
+            flex-shrink: 0;
+            width: 100%;
+
+            .#{$overflowList}-overflow {
+                max-width: 100%; // when one tag exceed the max width
+                min-width: 50px;
+            }
+
+            &>&-tag {
+                background-color: transparent;
+            }
+
+            &>&-N {
+                background-color: transparent;
+                padding: 4px;
+                color: var(--semi-color-text-0);
+                font-size: 12px;
+            }
+        }
     }
 
     &-multiple {