@douyinfe/semi-foundation 2.1.0-beta.2 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.1.0-beta.2",
+    "version": "2.1.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.1.0-beta.2",
+        "@douyinfe/semi-animation": "2.1.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "513b92cb3746033d0b7326485e85c73d80340a0d",
+    "gitHead": "be28426a48482f95f11422cda5b5f2c0d86f4be5",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/pagination/foundation.ts

@@ -12,9 +12,9 @@ export interface PaginationAdapter<P = Record<string, any>, S = Record<string, a
     setCurrentPage: (pageIndex: number) => void;
     registerKeyDownHandler: (handler: KeyDownHandler) => void;
     unregisterKeyDownHandler: (handler: KeyDownHandler) => void;
-    notifyPageChange: (pageIndex: number | string) => void;
+    notifyPageChange: (pageIndex: number) => void;
     notifyPageSizeChange: (pageSize: number) => void;
-    notifyChange: (pageIndex: number | string, pageSize: number) => void;
+    notifyChange: (pageIndex: number, pageSize: number) => void;
 }
 
 export type PageRenderText = number | '...';

package/popconfirm/popconfirmFoundation.ts

@@ -7,6 +7,7 @@ export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, a
     notifyConfirm: (e: any) => void;
     notifyCancel: (e: any) => void;
     notifyVisibleChange: (visible: boolean) => void;
+    notifyClickOutSide: (e: any) => void;
 }
 
 export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
@@ -25,6 +26,10 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
         this.handleVisibleChange(false);
     }
 
+    handleClickOutSide(e: any): void {
+        this._adapter.notifyClickOutSide(e);
+    }
+
     handleVisibleChange(visible: boolean): void {
         if (!this._isControlledComponent('visible')) {
             this._adapter.setVisible(visible);

package/scrollList/itemFoundation.ts

@@ -11,16 +11,16 @@ export interface Item {
     disabled?: boolean;
 }
 
-export interface ScrollItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+export interface ScrollItemAdapter<P = Record<string, any>, S = Record<string, any>, I = Item> extends DefaultAdapter<P, S> {
     setPrependCount: (prependCount: number) => void;
     setAppendCount: (appendCount: number) => void;
     setSelectedNode: (el: HTMLElement) => void;
     isDisabledIndex: (i: number) => boolean;
-    notifySelectItem: (data: Item) => void;
+    notifySelectItem: (data: I) => void;
     scrollToCenter: (selectedNode: Element, scrollWrapper?: Element, duration?: number) => void;
 }
 
-export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ScrollItemAdapter<P, S>, P, S> {
+export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>, I = Item> extends BaseFoundation<ScrollItemAdapter<P, S, I>, P, S> {
     _cachedSelectedNode: HTMLElement = null;
 
     selectIndex(index: number, listWrapper: HTMLElement) {

package/select/foundation.ts

@@ -2,7 +2,7 @@
 /* eslint-disable max-len */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import KeyCode from '../utils/keyCode';
-import { isNumber, isString, isEqual } from 'lodash-es';
+import { isNumber, isString, isEqual, omit } from 'lodash-es';
 import warning from '../utils/warning';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 import { BasicOptionProps } from './optionFoundation';
@@ -45,8 +45,9 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     updateHovering(isHover: boolean): void;
     updateScrollTop(): void;
 }
-type PropValue = string | number | Record<string, any>;
 
+type LabelValue = string | number;
+type PropValue = LabelValue | Record<string, any>;
 export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     constructor(adapter: SelectAdapter) {
@@ -230,9 +231,9 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             selections.set(optionExist.label, optionExist);
         } else if (noMatchOptionInList) {
             // If the current value does not have a corresponding item in the optionList, construct an option and update it to the selection. However, it does not need to be inserted into the list
-            let optionNotExist = { value: propValue, label: propValue, _notExist: true };
+            let optionNotExist = { value: propValue, label: propValue, _notExist: true, _scrollIndex: -1 } as BasicOptionProps;
             if (onChangeWithObject) {
-                optionNotExist = { ...propValue as BasicOptionProps, _notExist: true } as any;
+                optionNotExist = { ...propValue as BasicOptionProps, _notExist: true, _scrollIndex: -1 };
             }
             selections.set(optionNotExist.label, optionNotExist);
         }
@@ -258,11 +259,11 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
         // When onChangeWithObject is true
         if (onChangeWithObject && propValueIsArray) {
-            selectedValues = propValue.map((item: BasicOptionProps) => item.value) as any;
+            selectedValues = (propValue as BasicOptionProps[]).map(item => item.value);
         }
 
         if (propValueIsArray && selectedValues.length) {
-            selectedValues.forEach((selectedValue: string, i: number) => {
+            (selectedValues as LabelValue[]).forEach((selectedValue, i: number) => {
                 // The current value exists in the current optionList
                 const index = originalOptions.findIndex(option => option.value === selectedValue);
                 if (index !== -1) {
@@ -277,7 +278,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
                         // The current value does not exist in the current optionList or the list before the change. Construct an option and update it to the selection
                         let optionNotExist = { value: selectedValue, label: selectedValue, _notExist: true };
                         onChangeWithObject ? (optionNotExist = { ...propValue[i] as any, _notExist: true }) : null;
-                        selections.set(optionNotExist.label, optionNotExist);
+                        selections.set(optionNotExist.label, { ...optionNotExist, _scrollIndex: -1 });
                     }
                 }
             });
@@ -409,7 +410,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             this._notifyDeselect(value, { value, label, ...rest });
             selections.delete(label);
         } else if (maxLimit && selections.size === maxLimit) {
-            this._adapter.notifyMaxLimit({ value, label, ...rest });
+            this._adapter.notifyMaxLimit({ value, label, ...omit(rest, '_scrollIndex') });
             return;
         } else {
             this._notifySelect(value, { value, label, ...rest });
@@ -787,6 +788,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         delete option._parentGroup;
         delete option._show;
         delete option._selected;
+        delete option._scrollIndex;
         if ('_keyInOptionList' in option) {
             option.key = option._keyInOptionList;
             delete option._keyInOptionList;

package/table/utils.ts

@@ -166,7 +166,7 @@ export function isSelectionColumn(column: Record<string, any>) {
     return get(column, 'key') === strings.DEFAULT_KEY_COLUMN_SELECTION;
 }
 
-export function filterColumns(columns: Record<string, any>[], ignoreKeys = [strings.DEFAULT_KEY_COLUMN_SCROLLBAR]) {
+export function filterColumns(columns: Record<string, any>[], ignoreKeys = [strings.DEFAULT_KEY_COLUMN_SCROLLBAR as string]) {
     return filter(columns, col => !ignoreKeys.includes(col.key));
 }
 

package/tabs/foundation.ts

@@ -3,10 +3,12 @@ import { noop } from 'lodash-es';
 
 export interface TabsAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     collectPane: () => void;
+    collectActiveKey: () => void;
     notifyTabClick: (activeKey: string, event: any) => void;
     notifyChange: (activeKey: string) => void;
     setNewActiveKey: (activeKey: string) => void;
     getDefaultActiveKeyFromChildren: () => string;
+    notifyTabDelete: (tabKey: string) => void;
 }
 
 class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TabsAdapter<P, S>, P, S> {
@@ -64,15 +66,12 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
 
     handleTabPanesChange(): void {
         this._adapter.collectPane();
+        this._adapter.collectActiveKey();
+    }
 
-        let activeKey = this.getState('activeKey');
-        if (typeof activeKey === 'undefined') {
-            activeKey = this._adapter.getDefaultActiveKeyFromChildren();
-        }
-        if (typeof activeKey !== 'undefined') {
-            this.handleNewActiveKey(activeKey);
-        }
+    handleTabDelete(tabKey: string): void {
+        this._adapter.notifyTabDelete(tabKey);
     }
 }
 
-export default TabsFoundation;
+export default TabsFoundation;

package/tabs/tabs.scss

@@ -6,26 +6,26 @@ $module: #{$prefix}-tabs;
 .#{$module} {
     box-sizing: border-box;
     position: relative;
-
+    
     &-left {
         display: flex;
         flex-direction: row;
     }
-
+    
     &-bar {
         position: relative;
         white-space: nowrap;
         outline: none;
-
+        
         &-left {
             display: flex;
             flex-direction: column;
         }
-
+        
         &-extra {
             padding: $spacing-tabs_bar_extra-paddingY $spacing-tabs_bar_extra-paddingX;
         }
-
+        
         .#{$module}-tab {
             @include font-size-regular;
             cursor: pointer;
@@ -33,76 +33,92 @@ $module: #{$prefix}-tabs;
             position: relative;
             display: block;
             float: left;
-
+            
             font-weight: $font-tabs_tab-fontWeight;
             color: $color-tabs_tab_line_default-text-default;
-
+            
             user-select: none;
-
+            
             .#{$prefix}-icon {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
                 color: $color-tabs_tab-icon-default;
             }
-
+            
+            .#{$prefix}-icon-close {
+                margin-right: 0;
+                font-size: 14px;
+                color: var(--semi-color-text-2);
+                margin-left: 10px;
+                cursor: pointer;
+            }
+            
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
-
+                
                 .#{$prefix}-icon {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
-
+            
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
-
+                
                 .#{$prefix}-icon {
                     color: $color-tabs_tab-icon-active;
                 }
             }
         }
-
+        
         .#{$module}-tab-active {
-
+            
             &,
             &:hover {
-                color: $color-tabs_tab_line_selected-text-default;
                 cursor: default;
                 // border-bottom: 2px solid $color-tabs_tab_line_indicator_selected-icon-default;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
-
+                
                 .#{$prefix}-icon {
                     color: $color-tabs_tab_selected-icon-default;
                 }
+                
+                .#{$prefix}-icon-close {
+                    color: var(--semi-color-text-2);
+                }
+            }
+            
+            .#{$prefix}-icon-close:hover {
+                color: var(--semi-color-text-1);
             }
         }
-
+        
         .#{$module}-tab-disabled {
             cursor: not-allowed;
             color: $color-tabs_tab_line_disabled-text-default;
-
+            
             &:hover {
                 color: $color-tabs_tab_line_disabled-text-hover;
                 border-bottom: none;
             }
         }
     }
-
+    
     &-bar-collapse {
         &,
         .#{$module}-bar-overflow-list {
             display: flex;
             align-items: center;
         }
-
+        
         .#{$prefix}-overflow-list {
             flex: 1;
+            
             .#{$prefix}-overflow-list-scroll-wrapper {
                 -ms-overflow-style: none; /* Internet Explorer 10+ */
                 scrollbar-width: none; /* Firefox */
-
+                
                 &::-webkit-scrollbar {
                     display: none; /* Safari and Chrome */
                     width: 0;
@@ -110,98 +126,100 @@ $module: #{$prefix}-tabs;
                 }
             }
         }
-
+        
         .#{$module}-bar-arrow-start {
             margin-right: $spacing-tabs_overflow_icon-marginRight;
         }
-
+        
         .#{$module}-bar-arrow-end {
             margin-left: $spacing-tabs_overflow_icon-marginLeft;
         }
     }
-
+    
     &-bar-dropdown {
         max-height: $height-tabs_overflow_list;
         overflow-y: auto;
     }
-
+    
     &-bar:after {
         content: "";
         height: 0;
         display: block;
         clear: both;
     }
-
+    
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
-
+            
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
-                &:nth-of-type(1){
+                
+                &:nth-of-type(1) {
                     padding-left: 0;
                 }
+                
                 border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
+                
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
-
+                
                 &:active {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
                 }
-
+                
                 &:not(:last-of-type) {
                     margin-right: $spacing-tabs_bar_line_tab-marginRight;
                 }
-
+                
                 &-small {
                     padding: $spacing-tabs_bar_line_tab_small-paddingTop $spacing-tabs_bar_line_tab_small-paddingRight $spacing-tabs_bar_line_tab_small-paddingBottom $spacing-tabs_bar_line_tab_small-paddingLeft;
                 }
-
+                
                 &-medium {
                     padding: $spacing-tabs_bar_line_tab_medium-paddingTop $spacing-tabs_bar_line_tab_medium-paddingRight $spacing-tabs_bar_line_tab_medium-paddingBottom $spacing-tabs_bar_line_tab_medium-paddingLeft;
                 }
             }
-
+            
             .#{$module}-tab-active {
-
+                
                 &,
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
                 }
             }
         }
-
+        
         &.#{$module}-bar-left {
             border-right: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
-
+            
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab_left-padding;
                 border-left: $width-tabs_bar_line_tab-border solid transparent;
-
+                
                 &:hover {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
                 }
-
+                
                 &:active {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-active;
                     background-color: $color-tabs_tab_line_vertical-bg-active;
                 }
-
+                
                 &-small {
                     padding: $spacing-tabs_bar_line_tab_left_small-padding;
                 }
-
+                
                 &-medium {
                     padding: $spacing-tabs_bar_line_tab_left_medium-padding;
                 }
             }
-
+            
             .#{$module}-tab-active {
                 background-color: $color-tabs_tab_line_vertical_selected-bg-default;
-
+                
                 &,
                 &:hover {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_indicator_selected-icon-default;
@@ -209,47 +227,49 @@ $module: #{$prefix}-tabs;
                 }
             }
         }
-
+        
         // type='bar' extar need specific
         .#{$module}-bar-extra {
             height: $height-tabs_bar_extra_large;
             line-height: $font-tabs_bar_extra_large-lineHeight;
         }
+        
         .#{$module}-bar-line-extra-small {
             height: $height-tabs_bar_extra_small;
             line-height: $font-tabs_bar_extra_small-lineHeight;
         }
     }
-
+    
     &-bar-card {
         &.#{$module}-bar-top {
-
+            
             &::before {
                 position: absolute;
                 right: 0;
                 left: 0;
                 bottom: 0;
                 border-bottom: $width-tabs_bar_card-border solid $color-tabs_tab_card_default-border-default;
-                content: '';
+                content: "";
             }
+            
             // border-bottom: $border-thickness-control solid $color-tabs_tab_line_default-border-default;
-
+            
             .#{$module}-tab {
                 border: $width-tabs_bar_card-border solid transparent;
                 border-bottom: none;
                 border-radius: $radius-tabs_tab_card;
-
+                
                 &:hover {
                     border-bottom: none;
                 }
-
+                
                 &:not(:last-of-type) {
                     margin-right: $spacing-tabs_bar_card_tab-marginRight;
                 }
             }
-
+            
             .#{$module}-tab-active {
-
+                
                 &,
                 &:hover {
                     padding: $spacing-tabs_bar_card_tab_active-paddingTop $spacing-tabs_bar_card_tab_active-paddingRight $spacing-tabs_bar_card_tab_active-paddingBottom $spacing-tabs_bar_card_tab_active-paddingLeft;
@@ -260,26 +280,26 @@ $module: #{$prefix}-tabs;
                 }
             }
         }
-
+        
         &.#{$module}-bar-left {
             border-right: $width-tabs_bar_card-border solid $color-tabs_tab_line_default-border-default;
-
+            
             .#{$module}-tab {
                 border: $width-tabs_bar_card-border solid transparent;
                 border-right: none;
                 border-radius: $radius-tabs_tab_card_left;
-
+                
                 &:hover {
                     border-right: none;
                 }
-
+                
                 &:not(:last-of-type) {
                     margin-bottom: $spacing-tabs_bar_card_tab_left-marginBottom;
                 }
             }
-
+            
             .#{$module}-tab-active {
-
+                
                 &:after {
                     content: " ";
                     width: 1px;
@@ -289,7 +309,7 @@ $module: #{$prefix}-tabs;
                     bottom: 0;
                     background: $color-tabs_tab_card_selected-bg-default;
                 }
-
+                
                 &,
                 &:hover {
                     padding: $spacing-tabs_bar_card_tab_left_active-paddingY $spacing-tabs_bar_card_tab_left_active-paddingX;
@@ -300,59 +320,59 @@ $module: #{$prefix}-tabs;
                 }
             }
         }
-
+        
         .#{$module}-tab {
             padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
-
+            
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
             }
-
+            
             &:active {
                 background: $color-tabs_tab_card-bg-active;
             }
         }
     }
-
+    
     &-bar-button {
         border: none;
-
+        
         &.#{$module}-bar-left {
             .#{$module}-tab {
-
+                
                 &:not(:last-of-type) {
                     margin-bottom: $spacing-tabs_bar_button_tab_left-marginBottom;
                 }
             }
         }
-
+        
         &.#{$module}-bar-top {
             .#{$module}-tab {
-
+                
                 &:not(:last-of-type) {
                     margin-right: $spacing-tabs_bar_button_tab-marginRight;
                 }
             }
         }
-
+        
         .#{$module}-tab {
             padding: $spacing-tabs_bar_button_tab-paddingY $spacing-tabs_bar_button_tab-paddingX;
             border-radius: $radius-tabs_tab_button;
             color: $color-tabs_tab_button-text-default;
             border: none;
-
+            
             &:hover {
                 border: none;
                 background-color: $color-tabs_tab_button-bg-hover;
             }
-
+            
             &:active {
                 background-color: $color-tabs_tab_button-bg-active;
             }
         }
-
+        
         .#{$module}-tab-active {
-
+            
             &,
             &:hover {
                 color: $color-tabs_tab_button_selected-text-default;
@@ -361,19 +381,19 @@ $module: #{$prefix}-tabs;
             }
         }
     }
-
+    
     &-content {
         width: 100%;
         padding: $spacing-tabs_content-paddingY $spacing-tabs_content-paddingX;
         // overflow: hidden;
         // display: flex;
     }
-
+    
     &-content-left {
         height: 100%;
         padding: $spacing-tabs_content_left-paddingY $spacing-tabs_content_left-paddingX;
     }
-
+    
     &-pane {
         width: 100%;
         overflow: hidden;
@@ -381,7 +401,7 @@ $module: #{$prefix}-tabs;
         // flex-shrink: 0;
         // position: absolute;
     }
-
+    
     &-pane-inactive,
     &-content-no-animated &-pane-inactive {
         display: none;

package/tagInput/foundation.ts

@@ -24,6 +24,7 @@ export interface TagInputAdapter extends DefaultAdapter {
     notifyTagChange: (v: string[]) => void;
     notifyTagAdd: (v: string[]) => void;
     notifyTagRemove: (v: string, idx: number) => void;
+    notifyKeyDown: (e: TagInputMouseEvent) => void;
 }
 
 class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
@@ -90,6 +91,7 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
             const removedTag = tagsArray[length - 1];
             this._onRemove(newTagList, removedTag, length - 1);
         }
+        this._adapter.notifyKeyDown(e);
     };
 
     _handleAddTags(e: TagInputChangeEvent) {