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

package/cascader/foundation.ts

@@ -77,7 +77,7 @@ export interface BasicTriggerRenderProps {
     /** The hierarchical position of the selected node in treeData,
      * as in the following example, when Zhejiang-Hangzhou-Xiaoshan
      * District is selected, the value here is 0-0-1 */
-    value?: string | Set<string>;
+    value?: string;
     /* The input value of the current input box */
     inputValue: string;
     /* Cascader's placeholder */

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

@@ -40,7 +40,7 @@ export interface BasicTriggerRenderProps {
     /** The hierarchical position of the selected node in treeData,
      * as in the following example, when Zhejiang-Hangzhou-Xiaoshan
      * District is selected, the value here is 0-0-1 */
-    value?: string | Set<string>;
+    value?: string;
     inputValue: string;
     placeholder?: string;
     /** The function used to update the value of the input box. You

package/lib/es/popconfirm/popconfirmFoundation.d.ts

@@ -4,13 +4,11 @@ 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> {
     init(): void;
     destroy(): void;
     handleCancel(e: any): void;
     handleConfirm(e: any): void;
-    handleClickOutSide(e: any): void;
     handleVisibleChange(visible: boolean): void;
 }

package/lib/es/popconfirm/popconfirmFoundation.js

@@ -17,10 +17,6 @@ export default class PopConfirmFoundation extends BaseFoundation {
     this.handleVisibleChange(false);
   }
 
-  handleClickOutSide(e) {
-    this._adapter.notifyClickOutSide(e);
-  }
-
   handleVisibleChange(visible) {
     if (!this._isControlledComponent('visible')) {
       this._adapter.setVisible(visible);

package/lib/es/select/foundation.js

@@ -29,7 +29,7 @@ var __rest = this && this.__rest || function (s, e) {
 
 import BaseFoundation from '../base/foundation';
 import KeyCode from '../utils/keyCode';
-import { isNumber, isString, isEqual, omit } from 'lodash-es';
+import { isNumber, isString, isEqual } from 'lodash-es';
 import warning from '../utils/warning';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
 export default class SelectFoundation extends BaseFoundation {
@@ -266,14 +266,12 @@ export default class SelectFoundation extends BaseFoundation {
       let optionNotExist = {
         value: propValue,
         label: propValue,
-        _notExist: true,
-        _scrollIndex: -1
+        _notExist: true
       };
 
       if (onChangeWithObject) {
         optionNotExist = _Object$assign(_Object$assign({}, propValue), {
-          _notExist: true,
-          _scrollIndex: -1
+          _notExist: true
         });
       }
 
@@ -332,9 +330,7 @@ export default class SelectFoundation extends BaseFoundation {
             onChangeWithObject ? optionNotExist = _Object$assign(_Object$assign({}, propValue[i]), {
               _notExist: true
             }) : null;
-            selections.set(optionNotExist.label, _Object$assign(_Object$assign({}, optionNotExist), {
-              _scrollIndex: -1
-            }));
+            selections.set(optionNotExist.label, optionNotExist);
           }
         }
       });
@@ -519,7 +515,7 @@ export default class SelectFoundation extends BaseFoundation {
       this._adapter.notifyMaxLimit(_Object$assign({
         value,
         label
-      }, omit(rest, '_scrollIndex')));
+      }, rest));
 
       return;
     } else {
@@ -1020,7 +1016,6 @@ export default class SelectFoundation extends BaseFoundation {
     delete option._parentGroup;
     delete option._show;
     delete option._selected;
-    delete option._scrollIndex;
 
     if ('_keyInOptionList' in option) {
       option.key = option._keyInOptionList;

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

@@ -1,12 +1,10 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 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;
 }
 declare class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TabsAdapter<P, S>, P, S> {
     constructor(adapter: TabsAdapter<P, S>);
@@ -18,6 +16,5 @@ declare class TabsFoundation<P = Record<string, any>, S = Record<string, any>> e
     getDefaultActiveKey(): string;
     handleTabListChange(): void;
     handleTabPanesChange(): void;
-    handleTabDelete(tabKey: string): void;
 }
 export default TabsFoundation;

package/lib/es/tabs/foundation.js

@@ -68,11 +68,15 @@ class TabsFoundation extends BaseFoundation {
   handleTabPanesChange() {
     this._adapter.collectPane();
 
-    this._adapter.collectActiveKey();
-  }
+    let activeKey = this.getState('activeKey');
+
+    if (typeof activeKey === 'undefined') {
+      activeKey = this._adapter.getDefaultActiveKeyFromChildren();
+    }
 
-  handleTabDelete(tabKey) {
-    this._adapter.notifyTabDelete(tabKey);
+    if (typeof activeKey !== 'undefined') {
+      this.handleNewActiveKey(activeKey);
+    }
   }
 
 }

package/lib/es/tabs/tabs.css

@@ -40,13 +40,6 @@
   top: 3px;
   color: var(--semi-color-text-2);
 }
-.semi-tabs-bar .semi-tabs-tab .semi-icon-close {
-  margin-right: 0;
-  font-size: 14px;
-  color: var(--semi-color-text-2);
-  margin-left: 10px;
-  cursor: pointer;
-}
 .semi-tabs-bar .semi-tabs-tab:hover {
   color: var(--semi-color-text-0);
 }
@@ -60,6 +53,7 @@
   color: var(--semi-color-text-0);
 }
 .semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover {
+  color: var(--semi-color-text-0);
   cursor: default;
   font-weight: 600;
   color: var(--semi-color-text-0);
@@ -67,12 +61,6 @@
 .semi-tabs-bar .semi-tabs-tab-active .semi-icon, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon {
   color: var(--semi-color-primary);
 }
-.semi-tabs-bar .semi-tabs-tab-active .semi-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon-close {
-  color: var(--semi-color-text-2);
-}
-.semi-tabs-bar .semi-tabs-tab-active .semi-icon-close:hover {
-  color: var(--semi-color-text-1);
-}
 .semi-tabs-bar .semi-tabs-tab-disabled {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);

package/lib/es/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,92 +33,76 @@ $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;
@@ -126,100 +110,98 @@ $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;
@@ -227,49 +209,47 @@ $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;
@@ -280,26 +260,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;
@@ -309,7 +289,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;
@@ -320,59 +300,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;
@@ -381,19 +361,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;
@@ -401,7 +381,7 @@ $module: #{$prefix}-tabs;
         // flex-shrink: 0;
         // position: absolute;
     }
-    
+
     &-pane-inactive,
     &-content-no-animated &-pane-inactive {
         display: none;

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

@@ -14,7 +14,6 @@ export interface TagInputAdapter extends DefaultAdapter {
     notifyTagChange: (v: string[]) => void;
     notifyTagAdd: (v: string[]) => void;
     notifyTagRemove: (v: string, idx: number) => void;
-    notifyKeyDown: (e: TagInputMouseEvent) => void;
 }
 declare class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
     constructor(adapter: TagInputAdapter);

package/lib/es/tagInput/foundation.js

@@ -93,8 +93,6 @@ class TagInputFoundation extends BaseFoundation {
 
         this._onRemove(newTagList, removedTag, length - 1);
       }
-
-      this._adapter.notifyKeyDown(e);
     };
   }
 

package/lib/es/tooltip/foundation.js

@@ -77,9 +77,6 @@ export default class Tooltip extends BaseFoundation {
       this._adapter.insertPortal(content, position);
 
       if (trigger === 'custom') {
-        // eslint-disable-next-line
-        this._adapter.registerClickOutsideHandler(() => {});
-
         this._togglePortalVisible(true);
       }
       /**
@@ -202,12 +199,12 @@ export default class Tooltip extends BaseFoundation {
   }
 
   _bindEvent() {
-    const trigger = this.getProp('trigger'); // get trigger type
+    const types = this.getProp('trigger'); // get trigger type
 
     const {
       triggerEventSet,
       portalEventSet
-    } = this._generateEvent(trigger);
+    } = this._generateEvent(types);
 
     this._bindTriggerEvent(triggerEventSet);