@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/cjs/tabs/foundation.js

@@ -4,25 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class TabsFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this.destroy = _noop2.default;
-
     this.handlePrevent = event => {
       event.stopPropagation();
       event.preventDefault();
     };
-
     this.handleKeyDown = (event, itemKey, closable) => {
       const {
         preventScroll
@@ -30,7 +23,6 @@ class TabsFoundation extends _foundation.default {
       const tabs = [...event.target.parentNode.childNodes].filter(item => {
         return (0, _get2.default)(item, 'attributes.data-tabkey.value', '').includes('semiTab') && (0, _get2.default)(item, 'attributes.aria-disabled.value', '') !== "true";
       });
-
       switch (event.key) {
         case "ArrowLeft":
         case "ArrowRight":
@@ -38,79 +30,62 @@ class TabsFoundation extends _foundation.default {
         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) {
@@ -118,30 +93,23 @@ class TabsFoundation extends _foundation.default {
     } 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);
@@ -154,17 +122,15 @@ class TabsFoundation extends _foundation.default {
       }
     }
   }
-
   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
@@ -172,7 +138,6 @@ class TabsFoundation extends _foundation.default {
       }
     }
   }
-
   switchTabOnArrowPress(event, tabs) {
     const {
       preventScroll
@@ -184,7 +149,6 @@ class TabsFoundation extends _foundation.default {
       "ArrowRight": 1,
       "ArrowDown": 1
     };
-
     if (direction[event.key]) {
       if (index !== undefined) {
         if (tabs[index + direction[event.key]]) {
@@ -203,8 +167,6 @@ class TabsFoundation extends _foundation.default {
       }
     }
   }
-
 }
-
 var _default = TabsFoundation;
 exports.default = _default;

package/lib/cjs/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 {
@@ -82,6 +82,66 @@
   color: var(--semi-color-disabled-text);
   border-bottom: none;
 }
+.semi-tabs-tab-single.semi-tabs-tab {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  font-weight: 400;
+  color: var(--semi-color-text-2);
+  user-select: none;
+}
+.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.semi-tabs-tab-icon-close {
+  margin-right: 0;
+  font-size: 14px;
+  color: var(--semi-color-text-2);
+  margin-left: 10px;
+  cursor: pointer;
+}
+.semi-tabs-tab-single.semi-tabs-tab:hover {
+  color: var(--semi-color-text-0);
+}
+.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: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 {
+  cursor: default;
+  font-weight: 600;
+  color: var(--semi-color-text-0);
+}
+.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.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.semi-tabs-tab-icon-close:hover {
+  color: var(--semi-color-text-1);
+}
+.semi-tabs-tab-single.semi-tabs-tab-disabled {
+  cursor: not-allowed;
+  color: var(--semi-color-disabled-text);
+}
+.semi-tabs-tab-single.semi-tabs-tab-disabled:hover {
+  color: var(--semi-color-disabled-text);
+  border-bottom: none;
+}
 .semi-tabs-bar-collapse,
 .semi-tabs-bar-collapse .semi-tabs-bar-overflow-list {
   display: flex;
@@ -398,15 +458,155 @@
 }
 .semi-tabs-pane-animate-leftShow {
   animation: 200ms semi-tabs-panel-keyframe-leftShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-rightShow {
   animation: 200ms semi-tabs-panel-keyframe-rightShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-topShow {
   animation: 200ms semi-tabs-panel-keyframe-topShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-bottomShow {
   animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
+  animation-fill-mode: forwards;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
+  padding: 16px 4px 14px 4px;
+  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+  border-bottom: 2px solid transparent;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) {
+  padding-left: 0;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover {
+  border-bottom: 2px solid var(--semi-color-fill-0);
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -1px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active {
+  border-bottom: 2px solid var(--semi-color-fill-1);
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
+  padding: 8px 4px 6px 4px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
+  padding: 12px 4px 10px 4px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active:hover {
+  border-bottom: 2px solid var(--semi-color-primary);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab {
+  padding: 12px;
+  border-left: 2px solid transparent;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover {
+  border-left: 2px solid var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-0);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active {
+  border-left: 2px solid var(--semi-color-fill-1);
+  background-color: var(--semi-color-fill-1);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small {
+  padding: 6px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium {
+  padding: 10px;
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active {
+  background-color: var(--semi-color-primary-light-default);
+}
+.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active:hover {
+  border-left: 2px solid var(--semi-color-primary);
+  background-color: var(--semi-color-primary-light-default);
+}
+.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab {
+  border: 1px solid transparent;
+  border-bottom: none;
+  border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
+}
+.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover {
+  border-bottom: none;
+}
+.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active:hover {
+  padding: 8px 12px 7px 12px;
+  border: 1px solid var(--semi-color-border);
+  border-bottom: 1px solid var(--semi-color-bg-1);
+  background: transparent;
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab {
+  border: 1px solid transparent;
+  border-right: none;
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover {
+  border-right: none;
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after {
+  content: " ";
+  width: 1px;
+  position: absolute;
+  right: -1px;
+  top: 0;
+  bottom: 0;
+  background: var(--semi-color-bg-1);
+}
+.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:hover {
+  padding: 8px 12px;
+  border: 1px solid var(--semi-color-border);
+  border-right: none;
+  background: transparent;
+}
+.semi-tabs-tab-card.semi-tabs-tab {
+  padding: 8px 12px;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+  transform: scale(var(--semi-transform_scale-none));
+}
+.semi-tabs-tab-card.semi-tabs-tab:hover {
+  background: var(--semi-color-fill-0);
+}
+.semi-tabs-tab-card.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
+.semi-tabs-tab-card.semi-tabs-tab:active {
+  background: var(--semi-color-fill-1);
+}
+.semi-tabs-tab-button {
+  border: none;
+}
+.semi-tabs-tab-button.semi-tabs-tab {
+  padding: 8px 12px;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-2);
+  border: none;
+  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
+  transform: scale(var(--semi-transform_scale-none));
+}
+.semi-tabs-tab-button.semi-tabs-tab:hover {
+  border: none;
+  background-color: var(--semi-color-fill-0);
+}
+.semi-tabs-tab-button.semi-tabs-tab:focus-visible {
+  outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
+}
+.semi-tabs-tab-button.semi-tabs-tab:active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover {
+  color: var(--semi-color-primary);
+  border: none;
+  background-color: var(--semi-color-primary-light-default);
 }
 
 .semi-rtl .semi-tabs,