@hi-ui/tabs 4.0.0-alpha.2 → 4.0.0-alpha.20

package/lib/esm/styles/index.scss.js

@@ -7,7 +7,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tabs .hi-v4-tabs__list {\n  position: relative;\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  color: #000;\n  color: var(--hi-v4-color-static-black, #000);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: hidden; }\n.hi-v4-tabs .hi-v4-tabs__list::before {\n    content: '';\n    clear: both;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background-color: #e5e7eb;\n    background-color: var(--hi-v4-color-gray-200, #e5e7eb);\n    display: block; }\n.hi-v4-tabs .hi-v4-tabs__list--inner {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex; }\n.hi-v4-tabs__ink {\n  position: absolute;\n  bottom: 0;\n  right: auto;\n  top: auto;\n  height: 2px;\n  background-color: #4387f4;\n  background-color: var(--hi-v4-color-brandblue-500, #4387f4);\n  -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n  transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n  line-height: 22px;\n  padding: 8px 0;\n  margin: 0 16px;\n  cursor: pointer; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n    color: #4387f4;\n    color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tabs__item--active {\n    color: #4387f4;\n    color: var(--hi-v4-color-brandblue-500, #4387f4); }\n.hi-v4-tabs__item--disabled {\n    color: #6b7280 !important;\n    color: var(--hi-v4-color-gray-500, #6b7280) !important;\n    cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n  width: 100%;\n  overflow: hidden;\n  padding-top: 16px;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n";
+var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tabs__add-btn {\n  cursor: pointer; }\n.hi-v4-tabs__close-btn {\n  cursor: pointer;\n  color: #929aa6;\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  margin-left: 4px;\n  margin-left: var(--hi-v4-spacing-2, 4px);\n  -webkit-transition: color 0.3s;\n  transition: color 0.3s; }\n.hi-v4-tabs__close-btn:hover {\n    color: #237ffa;\n    color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--card .hi-v4-tabs__content {\n  background-color: #fff;\n  background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list {\n  position: relative;\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  color: #929aa6;\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: hidden;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n    background-color: #ebedf0;\n    background-color: var(--hi-v4-color-gray-200, #ebedf0);\n    margin: 0;\n    padding: 8px 20px;\n    padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n    border-radius: 4px 4px 0 0;\n    border-radius: var(--hi-v4-border-radius-normal, 4px) var(--hi-v4-border-radius-normal, 4px) 0 0;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa);\n      background-color: #fff;\n      background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item {\n    margin: 4px 4px 4px 0;\n    margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;\n    padding: 4px 20px;\n    padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n    border-radius: 4px;\n    border-radius: var(--hi-v4-border-radius-normal, 4px);\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n      background-color: #ebedf0;\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      color: #929aa6;\n      color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa);\n      background-color: #e2f3fe;\n      background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs__list--desc {\n    padding: 0 20px;\n    padding: 0 var(--hi-v4-spacing-10, 20px); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n      color: #1f2733;\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n      color: #929aa6;\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: 0.75rem;\n      font-size: var(--hi-v4-text-size-sm, 0.75rem);\n      line-height: 1.25rem;\n      line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item {\n      background: #f5f7fa;\n      background: var(--hi-v4-color-gray-50, #f5f7fa);\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin: 20px 12px 20px 0;\n      margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;\n      padding: 16px 20px;\n      padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: #ebedf0;\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: #929aa6;\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list--inner {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1;\n            flex: 1 1;\n    position: relative;\n    overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs--vertical {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--card .hi-v4-tabs__item {\n      margin: 0;\n      padding: 8px 20px;\n      padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n      background-color: #ebedf0;\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      border-radius: 4px 0 0 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px) 0 0 var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #fff;\n        background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item {\n      margin: 0 0 4px 0;\n      margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n      padding: 4px 20px;\n      padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: #ebedf0;\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: #929aa6;\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n      color: #1f2733;\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n      color: #929aa6;\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: 0.75rem;\n      font-size: var(--hi-v4-text-size-sm, 0.75rem);\n      line-height: 1.25rem;\n      line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin: 0 0 12px 0;\n      margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n      padding: 16px 20px;\n      padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      background: #f5f7fa;\n      background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: #ebedf0;\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: #929aa6;\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--inner {\n      width: auto;\n      display: block;\n      position: relative; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--scroll {\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      position: relative; }\n.hi-v4-tabs--vertical .hi-v4-tabs__item {\n    line-height: 1.5rem;\n    line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n    padding: 8px 20px;\n    padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n    margin: 0;\n    -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n    transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--vertical .hi-v4-tabs__item--prev {\n      border-top: 1px dashed #237ffa;\n      border-top: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa);\n      border-left: none; }\n.hi-v4-tabs--vertical .hi-v4-tabs__item--next {\n      border-bottom: 1px dashed #237ffa;\n      border-bottom: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa);\n      border-right: none; }\n.hi-v4-tabs--vertical .hi-v4-tabs__content {\n    padding-left: 16px;\n    padding-top: 0; }\n.hi-v4-tabs--vertical .hi-v4-tabs__ink {\n    position: absolute;\n    left: 0;\n    bottom: auto;\n    width: 2px;\n    background-color: #237ffa;\n    background-color: var(--hi-v4-color-brandblue-500, #237ffa);\n    -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n    transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__ink {\n  position: absolute;\n  bottom: 0;\n  right: auto;\n  top: auto;\n  height: 2px;\n  background-color: #237ffa;\n  background-color: var(--hi-v4-color-brandblue-500, #237ffa);\n  -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n  transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n  line-height: 1.5rem;\n  line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n  padding: 8px 20px;\n  padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n  margin: 0;\n  cursor: pointer;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n    color: #237ffa;\n    color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--active {\n    color: #237ffa;\n    color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--prev {\n    border-left: 1px dashed #237ffa;\n    border-left: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--next {\n    border-right: 1px dashed #237ffa;\n    border-right: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--disabled {\n    color: #929aa6 !important;\n    color: var(--hi-v4-color-gray-500, #929aa6) !important;\n    cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n  width: 100%;\n  overflow: hidden;\n  padding-top: 16px;\n  padding-top: var(--hi-v4-spacing-8, 16px);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n";
 
 var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
 

package/lib/types/TabInk.d.ts

@@ -5,6 +5,7 @@ interface TabInkProps {
     itemRef: HTMLElement;
     tabListRef: HTMLElement;
     direction: 'vertical' | 'horizontal';
+    translate: number;
 }
 export declare const TabInk: React.FC<TabInkProps>;
 export default TabInk;

package/lib/types/TabItem.d.ts

@@ -2,8 +2,29 @@ import React from 'react';
 import { TabPaneProps } from './TabPane';
 interface TabItemProps extends TabPaneProps {
     active: boolean;
-    onTabClick: (key: string) => void;
+    draggable?: boolean;
+    onTabClick: (key: React.ReactText, event: React.MouseEvent) => void;
     prefixCls?: string;
+    editable?: boolean;
+    onDelete?: (deletedNode: TabPaneProps, index: number) => void;
+    index: number;
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
+        dragNode: TabPaneProps;
+    }) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>, { targetNode }: {
+        targetNode: TabPaneProps;
+    }) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, targetNode, direction, }: {
+        dragNode: TabPaneProps;
+        targetNode: TabPaneProps;
+        direction: 'prev' | 'next' | null;
+    }) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
+        dragNode: TabPaneProps;
+    }) => void;
+    itemRef: HTMLDivElement | null;
+    direction: 'horizontal' | 'vertical';
+    type: 'desc' | 'line' | 'button' | 'card';
 }
 export declare const TabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement | null>>;
 export {};

package/lib/types/TabList.d.ts

@@ -6,14 +6,44 @@ export interface TabListProps {
     className?: string;
     prefixCls?: string;
     data: TabPaneProps[];
-    onChange?: (tabId: string) => void;
-    onTabClick?: (tabId: string) => void;
+    direction?: 'horizontal' | 'vertical';
+    onChange?: (tabId: React.ReactText) => void;
+    onTabClick?: (tabId: React.ReactText, event: React.MouseEvent) => void;
     /**
      * 默认高亮id
      */
-    defaultActiveId?: string;
+    defaultActiveId?: React.ReactText;
     /**
      * 高亮id
      */
-    activeId?: string;
+    activeId?: React.ReactText;
+    editable?: boolean;
+    draggable?: boolean;
+    type?: 'desc' | 'card' | 'button' | 'line';
+    /**
+     * 右侧的拓展区域
+     */
+    extra?: React.ReactNode;
+    /**
+     * 节点增加时触发
+     */
+    onAdd?: () => void;
+    /**
+     * 节点删除时时触发
+     */
+    onDelete?: (deletedNode: TabPaneProps, index: number) => void;
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
+        dragNode: TabPaneProps;
+    }) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>, { targetNode }: {
+        targetNode: TabPaneProps;
+    }) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, targetNode, direction, }: {
+        dragNode: TabPaneProps;
+        targetNode: TabPaneProps;
+        direction: 'prev' | 'next' | null;
+    }) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
+        dragNode: TabPaneProps;
+    }) => void;
 }

package/lib/types/TabPane.d.ts

@@ -4,8 +4,9 @@ export interface TabPaneProps {
     style?: React.CSSProperties;
     className?: string;
     disabled?: boolean;
-    tabId: string;
+    tabId: React.ReactText;
     tabTitle: React.ReactNode;
+    tabDesc?: React.ReactNode;
     closeable?: boolean;
     active?: boolean;
 }

package/lib/types/Tabs.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TabPaneProps } from './TabPane';
 /**
  * TODO: What is Tabs
  */
@@ -35,17 +36,51 @@ export interface TabsProps {
     /**
      * 默认高亮id
      */
-    defaultActiveId?: string;
+    defaultActiveId?: React.ReactText;
     /**
      * 高亮id
      */
-    activeId?: string;
+    activeId?: React.ReactText;
+    /**
+     * 布局方向
+     */
+    placement?: 'horizontal' | 'vertical';
+    /**
+     * 布局类型
+     */
+    type?: 'desc' | 'card' | 'button' | 'line';
     /**
      * `activeId` 改变的回调
      */
-    onChange?: (tabId: string) => void;
+    onChange?: (tabId: React.ReactText) => void;
     /**
      * 标签点击触发回调
      */
-    onTabClick?: (tabId: string) => void;
+    onTabClick?: (tabId: React.ReactText) => void;
+    /**
+     * 右侧的拓展区域
+     */
+    extra?: React.ReactNode;
+    /**
+     * 节点增加时触发
+     */
+    onAdd?: () => void;
+    /**
+     * 节点删除时时触发
+     */
+    onDelete?: (deletedNode: TabPaneProps, index: number) => void;
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
+        dragNode: TabPaneProps;
+    }) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>, { targetNode }: {
+        targetNode: TabPaneProps;
+    }) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, targetNode, direction, }: {
+        dragNode: TabPaneProps;
+        targetNode: TabPaneProps;
+        direction: 'prev' | 'next' | null;
+    }) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
+        dragNode: TabPaneProps;
+    }) => void;
 }

package/lib/types/index.d.ts

@@ -1,4 +1,5 @@
 import './styles/index.scss';
 export * from './Tabs';
 export * from './TabPane';
+export * from './TabList';
 export { Tabs as default } from './Tabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tabs",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.20",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,19 +43,20 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/classname": "^4.0.0-alpha.0",
-    "@hi-ui/core-css": "^4.0.0-alpha.4",
-    "@hi-ui/env": "^4.0.0-alpha.0",
-    "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.7"
+    "@hi-ui/classname": "^4.0.0-alpha.3",
+    "@hi-ui/core-css": "^4.0.0-alpha.14",
+    "@hi-ui/env": "^4.0.0-alpha.6",
+    "@hi-ui/icons": "^4.0.0-alpha.29",
+    "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.14"
   },
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/hi-build": "^4.0.0-alpha.0",
+    "@hi-ui/hi-build": "^4.0.0-alpha.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "f067ec47048ec498d30cdc0333c598f963a172d1"
+  "gitHead": "fa21b165e493ba58f5b1834d050e4af188b6d946"
 }