@douyinfe/semi-foundation 2.36.0-alpha.0 → 2.36.0

package/lib/es/tabs/foundation.js

@@ -1,17 +1,14 @@
 import _noop from "lodash/noop";
 import _get from "lodash/get";
 import BaseFoundation from '../base/foundation';
-
 class TabsFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this.destroy = _noop;
-
     this.handlePrevent = event => {
       event.stopPropagation();
       event.preventDefault();
     };
-
     this.handleKeyDown = (event, itemKey, closable) => {
       const {
         preventScroll
@@ -19,7 +16,6 @@ class TabsFoundation extends BaseFoundation {
       const tabs = [...event.target.parentNode.childNodes].filter(item => {
         return _get(item, 'attributes.data-tabkey.value', '').includes('semiTab') && _get(item, 'attributes.aria-disabled.value', '') !== "true";
       });
-
       switch (event.key) {
         case "ArrowLeft":
         case "ArrowRight":
@@ -27,79 +23,62 @@ class TabsFoundation extends BaseFoundation {
         case "ArrowDown":
           this.determineOrientation(event, tabs);
           break;
-
         case "Backspace":
         case "Delete":
           this.handleDeleteKeyDown(event, tabs, itemKey, closable);
           break;
-
         case "Enter":
         case " ":
           this.handleTabClick(itemKey, event);
           this.handlePrevent(event);
           break;
-
         case "Home":
           tabs[0].focus({
             preventScroll
           }); // focus first tab
-
           this.handlePrevent(event);
           break;
-
         case "End":
           tabs[tabs.length - 1].focus({
             preventScroll
           }); // focus last tab
-
           this.handlePrevent(event);
           break;
       }
     };
   }
-
   init() {
     this._adapter.collectPane();
   }
-
   _notifyChange(activeKey) {
     const {
       activeKey: stateActiveKey
     } = this.getStates();
-
     if (stateActiveKey !== activeKey) {
       this._adapter.notifyChange(activeKey);
     }
   }
-
   handleTabClick(activeKey, event) {
     const isControlledComponent = this._isInProps('activeKey');
-
     if (isControlledComponent) {
       this._notifyChange(activeKey);
     } else {
       this._notifyChange(activeKey);
-
       this.handleNewActiveKey(activeKey);
     }
-
     this._adapter.notifyTabClick(activeKey, event);
   }
-
   handleNewActiveKey(activeKey) {
     const {
       activeKey: stateActiveKey
     } = this.getStates();
-
     if (stateActiveKey !== activeKey) {
       this._adapter.setNewActiveKey(activeKey);
     }
   }
-
   getDefaultActiveKey() {
     let activeKey;
     const props = this.getProps();
-
     if ('activeKey' in props) {
       activeKey = props.activeKey;
     } else if ('defaultActiveKey' in props) {
@@ -107,30 +86,23 @@ class TabsFoundation extends BaseFoundation {
     } else {
       activeKey = this._adapter.getDefaultActiveKeyFromChildren();
     }
-
     return activeKey;
   }
-
   handleTabListChange() {
     this._adapter.collectPane();
   }
-
   handleTabPanesChange() {
     this._adapter.collectPane();
-
     this._adapter.collectActiveKey();
   }
-
   handleTabDelete(tabKey) {
     this._adapter.notifyTabDelete(tabKey);
   }
-
   determineOrientation(event, tabs) {
     const {
       tabPosition
     } = this.getProps();
     const isVertical = tabPosition === 'left';
-
     if (isVertical) {
       if (event.key === "ArrowUp" || event.key === "ArrowDown") {
         this.switchTabOnArrowPress(event, tabs);
@@ -143,17 +115,15 @@ class TabsFoundation extends BaseFoundation {
       }
     }
   }
-
   handleDeleteKeyDown(event, tabs, itemKey, closable) {
     const {
       preventScroll
     } = this.getProps();
-
     if (closable) {
       this.handleTabDelete(itemKey);
-      const index = tabs.indexOf(event.target); // Move focus to next element after deletion
+      const index = tabs.indexOf(event.target);
+      // Move focus to next element after deletion
       // If the element is the last removable tab, focus to its previous tab
-
       if (tabs.length !== 1) {
         tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus({
           preventScroll
@@ -161,7 +131,6 @@ class TabsFoundation extends BaseFoundation {
       }
     }
   }
-
   switchTabOnArrowPress(event, tabs) {
     const {
       preventScroll
@@ -173,7 +142,6 @@ class TabsFoundation extends BaseFoundation {
       "ArrowRight": 1,
       "ArrowDown": 1
     };
-
     if (direction[event.key]) {
       if (index !== undefined) {
         if (tabs[index + direction[event.key]]) {
@@ -192,7 +160,6 @@ class TabsFoundation extends BaseFoundation {
       }
     }
   }
-
 }
 
 export default TabsFoundation;

package/lib/es/tabs/tabs.css

@@ -34,14 +34,14 @@
   color: var(--semi-color-text-2);
   user-select: none;
 }
-.semi-tabs-bar .semi-tabs-tab .semi-icon {
+.semi-tabs-bar .semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   position: relative;
   margin-right: 8px;
   top: 3px;
   color: var(--semi-color-text-2);
   transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
-.semi-tabs-bar .semi-tabs-tab .semi-icon-close {
+.semi-tabs-bar .semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
   margin-right: 0;
   font-size: 14px;
   color: var(--semi-color-text-2);
@@ -51,13 +51,13 @@
 .semi-tabs-bar .semi-tabs-tab:hover {
   color: var(--semi-color-text-0);
 }
-.semi-tabs-bar .semi-tabs-tab:hover .semi-icon {
+.semi-tabs-bar .semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-bar .semi-tabs-tab:active {
   color: var(--semi-color-text-0);
 }
-.semi-tabs-bar .semi-tabs-tab:active .semi-icon {
+.semi-tabs-bar .semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover {
@@ -65,13 +65,13 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
 }
-.semi-tabs-bar .semi-tabs-tab-active .semi-icon, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon {
+.semi-tabs-bar .semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   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 {
+.semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
   color: var(--semi-color-text-2);
 }
-.semi-tabs-bar .semi-tabs-tab-active .semi-icon-close:hover {
+.semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
   color: var(--semi-color-text-1);
 }
 .semi-tabs-bar .semi-tabs-tab-disabled {
@@ -94,14 +94,14 @@
   color: var(--semi-color-text-2);
   user-select: none;
 }
-.semi-tabs-tab-single.semi-tabs-tab .semi-icon {
+.semi-tabs-tab-single.semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   position: relative;
   margin-right: 8px;
   top: 3px;
   color: var(--semi-color-text-2);
   transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
-.semi-tabs-tab-single.semi-tabs-tab .semi-icon-close {
+.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
   margin-right: 0;
   font-size: 14px;
   color: var(--semi-color-text-2);
@@ -111,13 +111,13 @@
 .semi-tabs-tab-single.semi-tabs-tab:hover {
   color: var(--semi-color-text-0);
 }
-.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon {
+.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-tab-single.semi-tabs-tab:active {
   color: var(--semi-color-text-0);
 }
-.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon {
+.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
@@ -125,13 +125,13 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
 }
-.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon {
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-primary);
 }
-.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon-close {
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
   color: var(--semi-color-text-2);
 }
-.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon-close:hover {
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
   color: var(--semi-color-text-1);
 }
 .semi-tabs-tab-single.semi-tabs-tab-disabled {

package/lib/es/tabs/tabs.scss

@@ -4,6 +4,8 @@
 
 
 $module: #{$prefix}-tabs;
+// Prevent the Radio and Checkbox in ReactNode passed in through the tab attribute in Tabs from being affected by the icon style override
+$ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix}-icon-checkbox_indeterminate';
 
 .#{$module} {
     box-sizing: border-box;
@@ -41,7 +43,7 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
@@ -50,7 +52,7 @@ $module: #{$prefix}-tabs;
 
             }
 
-            .#{$prefix}-icon-close {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
@@ -61,7 +63,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -69,7 +71,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -84,16 +86,16 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 
-                .#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                 }
             }
 
-            .#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
             }
         }
@@ -123,7 +125,7 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
@@ -132,7 +134,7 @@ $module: #{$prefix}-tabs;
 
             }
 
-            .#{$prefix}-icon-close {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
@@ -143,7 +145,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -151,7 +153,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -166,16 +168,16 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 
-                .#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                 }
             }
 
-            .#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
             }
         }

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

@@ -1,8 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export declare type TagInputChangeEvent = any;
-export declare type TagInputCursorEvent = any;
-export declare type TagInputKeyboardEvent = any;
-export declare type TagInputMouseEvent = any;
+export type TagInputChangeEvent = any;
+export type TagInputCursorEvent = any;
+export type TagInputKeyboardEvent = any;
+export type TagInputMouseEvent = any;
 export interface OnSortEndProps {
     oldIndex: number;
     newIndex: number;