@hi-ui/tabs 4.0.0-alpha.3 → 4.0.0-alpha.4

package/lib/cjs/TabInk.js

@@ -34,7 +34,8 @@ var TabInk = function TabInk(_ref) {
       prefixCls = _ref.prefixCls,
       itemRef = _ref.itemRef,
       tabListRef = _ref.tabListRef,
-      direction = _ref.direction;
+      direction = _ref.direction,
+      translate = _ref.translate;
   var inkRef = React.useRef(null);
   React.useEffect(function () {
     if (inkRef.current && itemRef && tabListRef) {
@@ -44,14 +45,14 @@ var TabInk = function TabInk(_ref) {
 
       if (direction === 'vertical') {
         _style = {
-          top: itemRect.top - listRect.top + "px",
+          top: itemRect.top - listRect.top - translate + "px",
           height: itemRect.height + "px",
           left: '',
           width: ''
         };
       } else {
         _style = {
-          left: itemRect.left - listRect.left + "px",
+          left: itemRect.left - listRect.left - translate + "px",
           width: itemRect.width + "px",
           top: '',
           height: ''

package/lib/cjs/TabInk.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabInk.js","sources":["../../src/TabInk.tsx"],"sourcesContent":[null],"names":["TabInk","disabled","prefixCls","itemRef","tabListRef","direction","inkRef","useRef","useEffect","current","itemRect","getBoundingClientRect","listRect","_style","top","height","left","width","Object","assign","style","React","className","cx","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWaA,MAAM,GAA0B,SAAhCA,MAAgC,KAAA;;;MAC3CC,gBAAAA;MACAC,iBAAAA;MACAC,eAAAA;MACAC,kBAAAA;MACAC,iBAAAA;MAEMC,MAAM,GAAGC,YAAAA,CAAuB,IAAvBA;AAEfC,EAAAA,eAAAA,CAAU;QACJF,MAAM,CAACG,OAAPH,IAAkBH,OAAlBG,IAA6BF,YAAY;UACrCM,QAAQ,GAAGP,OAAO,CAACQ,qBAARR;UACXS,QAAQ,GAAGR,UAAU,CAACO,qBAAXP;UACbS,MAAM,GAAwB;;UAC9BR,SAAS,KAAK,YAAY;AAC5BQ,QAAAA,MAAM,GAAG;AACPC,UAAAA,GAAG,EAAKJ,QAAQ,CAACI,GAATJ,GAAeE,QAAQ,CAACE,GAAxBJ,OADD;AAEPK,UAAAA,MAAM,EAAKL,QAAQ,CAACK,MAATL,OAFJ;AAGPM,UAAAA,IAAI,EAAE,EAHC;AAIPC,UAAAA,KAAK,EAAE;AAJA,SAATJ;AADF,aAOO;AACLA,QAAAA,MAAM,GAAG;AACPG,UAAAA,IAAI,EAAKN,QAAQ,CAACM,IAATN,GAAgBE,QAAQ,CAACI,IAAzBN,OADF;AAEPO,UAAAA,KAAK,EAAKP,QAAQ,CAACO,KAATP,OAFH;AAGPI,UAAAA,GAAG,EAAE,EAHE;AAIPC,UAAAA,MAAM,EAAE;AAJD,SAATF;;;AAOFK,MAAAA,MAAM,CAACC,MAAPD,CAAcZ,MAAM,CAACG,OAAPH,CAAec,KAA7BF,EAAoCL,MAApCK;;AApBK,GAATV,EAsBG,CAACL,OAAD,EAAUC,UAAV,EAAsBC,SAAtB,CAtBHG;sBAyBEa,yBAAAA,cAAAA,MAAAA;AACEC,IAAAA,SAAS,EAAEC,YAAAA,CAAMrB,SAAJ,UAAFqB,iBACLrB,SADO,wBACsBD,aADxBsB;AAGXC,IAAAA,GAAG,EAAElB;GAJPe;;;;"}
+{"version":3,"file":"TabInk.js","sources":["../../src/TabInk.tsx"],"sourcesContent":[null],"names":["TabInk","disabled","prefixCls","itemRef","tabListRef","direction","translate","inkRef","useRef","useEffect","current","itemRect","getBoundingClientRect","listRect","_style","top","height","left","width","Object","assign","style","React","className","cx","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAYaA,MAAM,GAA0B,SAAhCA,MAAgC,KAAA;;;MAC3CC,gBAAAA;MACAC,iBAAAA;MACAC,eAAAA;MACAC,kBAAAA;MACAC,iBAAAA;MACAC,iBAAAA;MAEMC,MAAM,GAAGC,YAAAA,CAAuB,IAAvBA;AAEfC,EAAAA,eAAAA,CAAU;QACJF,MAAM,CAACG,OAAPH,IAAkBJ,OAAlBI,IAA6BH,YAAY;UACrCO,QAAQ,GAAGR,OAAO,CAACS,qBAART;UACXU,QAAQ,GAAGT,UAAU,CAACQ,qBAAXR;UACbU,MAAM,GAAwB;;UAC9BT,SAAS,KAAK,YAAY;AAC5BS,QAAAA,MAAM,GAAG;AACPC,UAAAA,GAAG,EAAKJ,QAAQ,CAACI,GAATJ,GAAeE,QAAQ,CAACE,GAAxBJ,GAA8BL,SAA9BK,OADD;AAEPK,UAAAA,MAAM,EAAKL,QAAQ,CAACK,MAATL,OAFJ;AAGPM,UAAAA,IAAI,EAAE,EAHC;AAIPC,UAAAA,KAAK,EAAE;AAJA,SAATJ;AADF,aAOO;AACLA,QAAAA,MAAM,GAAG;AACPG,UAAAA,IAAI,EAAKN,QAAQ,CAACM,IAATN,GAAgBE,QAAQ,CAACI,IAAzBN,GAAgCL,SAAhCK,OADF;AAEPO,UAAAA,KAAK,EAAKP,QAAQ,CAACO,KAATP,OAFH;AAGPI,UAAAA,GAAG,EAAE,EAHE;AAIPC,UAAAA,MAAM,EAAE;AAJD,SAATF;;;AAOFK,MAAAA,MAAM,CAACC,MAAPD,CAAcZ,MAAM,CAACG,OAAPH,CAAec,KAA7BF,EAAoCL,MAApCK;;AApBK,GAATV,EAsBG,CAACN,OAAD,EAAUC,UAAV,EAAsBC,SAAtB,CAtBHI;sBAyBEa,yBAAAA,cAAAA,MAAAA;AACEC,IAAAA,SAAS,EAAEC,YAAAA,CAAMtB,SAAJ,UAAFsB,iBACLtB,SADO,wBACsBD,aADxBuB;AAGXC,IAAAA,GAAG,EAAElB;GAJPe;;;;"}

package/lib/cjs/TabItem.js

@@ -21,6 +21,8 @@ var classname = require('@hi-ui/classname');
 
 var env = require('@hi-ui/env');
 
+var icons = require('@hi-ui/icons');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -39,7 +41,26 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       prefixCls = _ref.prefixCls,
       tabId = _ref.tabId,
       onTabClick = _ref.onTabClick,
-      active = _ref.active;
+      active = _ref.active,
+      editable = _ref.editable,
+      onDelete = _ref.onDelete,
+      index = _ref.index,
+      _onDragStart = _ref.onDragStart,
+      _onDragOver = _ref.onDragOver,
+      _onDrop = _ref.onDrop,
+      _onDragEnd = _ref.onDragEnd,
+      itemRef = _ref.itemRef,
+      draggable = _ref.draggable,
+      _ref$direction = _ref.direction,
+      layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+
+  var _useState = React.useState(null),
+      dragId = _useState[0],
+      setDragId = _useState[1];
+
+  var _useState2 = React.useState(null),
+      direction = _useState2[0],
+      setDirection = _useState2[1];
 
   var _onClick = React.useCallback(function (e) {
     if (onTabClick) {
@@ -49,11 +70,110 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: style,
-    className: classname.cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx)),
+    className: classname.cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx[prefixCls + "__item--" + direction] = direction, _cx)),
     ref: ref,
+    draggable: draggable,
     tabIndex: disabled ? 0 : -1,
-    onClick: _onClick
-  }, /*#__PURE__*/React__default['default'].createElement("span", null, tabTitle));
+    onClick: _onClick,
+    onDragStart: function onDragStart(e) {
+      e.stopPropagation();
+      e.dataTransfer.setData('tab', JSON.stringify({
+        tabId: tabId,
+        tabTitle: tabTitle
+      }));
+      setDragId(tabId);
+
+      if (_onDragStart) {
+        _onDragStart(e, {
+          tabId: tabId,
+          tabTitle: tabTitle
+        });
+      }
+    },
+    onDragEnd: function onDragEnd(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.clearData();
+      setDragId(null);
+
+      if (_onDragEnd) {
+        _onDragEnd(e, {
+          tabId: tabId,
+          tabTitle: tabTitle
+        });
+      }
+    },
+    onDragLeave: function onDragLeave(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setDirection(null);
+    },
+    onDragOver: function onDragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (dragId !== tabId && itemRef) {
+        var targetBoundingRect = itemRef.getBoundingClientRect();
+        var hoverTargetSortY = (targetBoundingRect.bottom - targetBoundingRect.top) / 2;
+        var hoverTargetSortX = (targetBoundingRect.right - targetBoundingRect.left) / 2; // 鼠标垂直移动距离
+
+        var hoverClientY = e.clientY - targetBoundingRect.top;
+        var hoverClientX = e.clientX - targetBoundingRect.left;
+
+        if (layout === 'vertical') {
+          if (hoverClientY < hoverTargetSortY) {
+            setDirection('prev');
+          } else {
+            setDirection('next');
+          }
+        } else {
+          if (hoverClientX < hoverTargetSortX) {
+            setDirection('prev');
+          } else {
+            setDirection('next');
+          }
+        }
+      }
+
+      if (_onDragOver) {
+        _onDragOver(e, {
+          tabId: tabId,
+          tabTitle: tabTitle
+        });
+      }
+    },
+    onDrop: function onDrop(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setDirection(null);
+
+      if (_onDrop && dragId !== tabId) {
+        var passedData = JSON.parse(e.dataTransfer.getData('tab'));
+
+        _onDrop(e, {
+          dragNode: {
+            tabId: tabId,
+            tabTitle: tabTitle
+          },
+          dropNode: {
+            tabId: passedData.tabId,
+            tabTitle: passedData.tabTitle
+          },
+          direction: direction
+        });
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("span", null, tabTitle), editable && /*#__PURE__*/React__default['default'].createElement("span", {
+    className: prefixCls + "__close-btn",
+    onClick: function onClick() {
+      if (onDelete) {
+        onDelete({
+          tabId: tabId,
+          tabTitle: tabTitle
+        }, index);
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(icons.CloseOutlined, null)));
 });
 
 if (env.__DEV__) {

package/lib/cjs/TabItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.js","sources":["../../src/TabItem.tsx"],"sourcesContent":[null],"names":["TabItem","forwardRef","ref","className","style","disabled","tabTitle","prefixCls","tabId","onTabClick","active","_onClick","useCallback","e","React","cx","tabIndex","onClick","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWaA,OAAO,gBAAGC,gBAAAA,CACrB,cAAA,EAAiFC,GAAjF;;;MAAGC,iBAAAA;MAAWC,aAAAA;MAAOC,gBAAAA;MAAUC,gBAAAA;MAAUC,iBAAAA;MAAWC,aAAAA;MAAOC,kBAAAA;MAAYC,cAAAA;;MAC/DC,QAAQ,GAAGC,iBAAAA,CACf,UAACC,CAAD;QACMJ,YAAY;AACdA,MAAAA,UAAU,CAACD,KAAD,CAAVC;;AAHsB,GAAXG,EAMf,CAACH,UAAD,EAAaD,KAAb,CANeI;;sBASfE,yBAAAA,cAAAA,MAAAA;AACEV,IAAAA,KAAK,EAAEA;AACPD,IAAAA,SAAS,EAAEY,YAAAA,CAAMR,SAAJ,WAAFQ,EAAyBZ,SAAzBY,iBAA0CR,SAAxC,uBAAoEG,WAAtEK;AACXb,IAAAA,GAAG,EAAEA;AACLc,IAAAA,QAAQ,EAAEX,QAAQ,GAAG,CAAH,GAAO,CAAC;AAC1BY,IAAAA,OAAO,EAAEN;GALXG,eAOEA,yBAAAA,cAAAA,OAAAA,MAAAA,EAAOR,QAAPQ,CAPFA;AAX2B,CAAVb;;AAuBvB,IAAIiB,WAAJ,EAAa;AACXlB,EAAAA,OAAO,CAACmB,WAARnB,GAAsB,SAAtBA;;;"}
+{"version":3,"file":"TabItem.js","sources":["../../src/TabItem.tsx"],"sourcesContent":[null],"names":["TabItem","forwardRef","ref","className","style","disabled","tabTitle","prefixCls","tabId","onTabClick","active","editable","onDelete","index","onDragStart","onDragOver","onDrop","onDragEnd","itemRef","draggable","direction","layout","useState","dragId","setDragId","setDirection","_onClick","useCallback","e","React","cx","tabIndex","onClick","stopPropagation","dataTransfer","setData","JSON","stringify","preventDefault","clearData","onDragLeave","targetBoundingRect","getBoundingClientRect","hoverTargetSortY","bottom","top","hoverTargetSortX","right","left","hoverClientY","clientY","hoverClientX","clientX","passedData","parse","getData","dragNode","dropNode","CloseOutlined","__DEV__","displayName"],"mappings":"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"}

package/lib/cjs/TabList.js

@@ -27,6 +27,8 @@ var classname = require('@hi-ui/classname');
 
 var TabInk = require('./TabInk.js');
 
+var icons = require('@hi-ui/icons');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -36,6 +38,8 @@ function _interopDefaultLegacy(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _cx;
+
   var data = _ref.data,
       className = _ref.className,
       style = _ref.style,
@@ -43,7 +47,19 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       defaultActiveId = _ref.defaultActiveId,
       onChange = _ref.onChange,
       onTabClick = _ref.onTabClick,
-      prefixCls = _ref.prefixCls;
+      prefixCls = _ref.prefixCls,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+      editable = _ref.editable,
+      onAdd = _ref.onAdd,
+      onDelete = _ref.onDelete,
+      draggable = _ref.draggable,
+      onDragStart = _ref.onDragStart,
+      onDragOver = _ref.onDragOver,
+      onDrop = _ref.onDrop,
+      onDragEnd = _ref.onDragEnd,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type;
 
   var _a, _b;
 
@@ -55,7 +71,24 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       innerRef = _useState[0],
       setInnerRef = _useState[1];
 
+  var _useState2 = React.useState(null),
+      scrollRef = _useState2[0],
+      setScrollRef = _useState2[1];
+
+  var _useState3 = React.useState(0),
+      translateX = _useState3[0],
+      setTranslateX = _useState3[1];
+
+  var _useState4 = React.useState(0),
+      translateY = _useState4[0],
+      setTranslateY = _useState4[1];
+
   var itemsRef = React.useRef({});
+  var showScrollBtn = React.useMemo(function () {
+    if (scrollRef && innerRef) {
+      return direction === 'horizontal' ? (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.clientWidth) > (innerRef === null || innerRef === void 0 ? void 0 : innerRef.clientWidth) : (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.clientHeight) > (innerRef === null || innerRef === void 0 ? void 0 : innerRef.clientHeight);
+    }
+  }, [scrollRef, innerRef, direction]);
   var onClickTab = React.useCallback(function (key) {
     if (onTabClick) {
       onTabClick(key);
@@ -67,11 +100,49 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [activeTab, onTabClick, setActiveTab]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: style,
-    className: classname.cx(prefixCls + "__list", className),
+    className: classname.cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
     ref: ref
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: prefixCls + "__add-btn",
+    onClick: function onClick() {
+      if (scrollRef && innerRef) {
+        var canScroll = -translateX - innerRef.clientWidth;
+        var moveWidth = 0;
+
+        if (canScroll >= 0) {
+          moveWidth = innerRef.clientWidth;
+        } else {
+          moveWidth = -translateX;
+        }
+
+        setTranslateX(translateX + moveWidth);
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(icons.LeftOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: prefixCls + "__add-btn",
+    onClick: function onClick() {
+      if (scrollRef && innerRef) {
+        var canScroll = -translateY - innerRef.clientHeight;
+        var moveWidth = 0;
+
+        if (canScroll >= 0) {
+          moveWidth = innerRef.clientHeight;
+        } else {
+          moveWidth = -translateY;
+        }
+
+        setTranslateY(translateY + moveWidth);
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null)), /*#__PURE__*/React__default['default'].createElement("div", {
     className: classname.cx(prefixCls + "__list--inner"),
     ref: setInnerRef
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: classname.cx(prefixCls + "__list--scroll"),
+    ref: setScrollRef,
+    style: showScrollBtn ? {
+      transform: direction === 'horizontal' ? "translateX(" + translateX + "px)" : "translateY(" + translateY + "px)"
+    } : {}
   }, data.map(function (d, index) {
     return /*#__PURE__*/React__default['default'].createElement(TabItem.TabItem, Object.assign({
       key: index
@@ -79,16 +150,62 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref: function ref(node) {
         itemsRef.current["" + d.tabId] = node;
       },
+      itemRef: itemsRef.current["" + d.tabId],
+      index: index,
       active: activeTab === d.tabId,
       prefixCls: prefixCls,
-      onTabClick: onClickTab
+      draggable: draggable,
+      onTabClick: onClickTab,
+      editable: editable,
+      onDelete: onDelete,
+      onDragStart: onDragStart,
+      onDragOver: onDragOver,
+      onDrop: onDrop,
+      onDragEnd: onDragEnd,
+      direction: direction
     }));
-  }), /*#__PURE__*/React__default['default'].createElement(TabInk.TabInk, {
+  }), type === 'default' && /*#__PURE__*/React__default['default'].createElement(TabInk.TabInk, {
+    translate: direction === 'horizontal' ? translateX : translateY,
     prefixCls: prefixCls,
-    direction: "horizontal",
+    direction: direction,
     tabListRef: innerRef,
     itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTab]
-  })));
+  }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: prefixCls + "__add-btn",
+    onClick: function onClick() {
+      if (scrollRef && innerRef) {
+        var canScroll = scrollRef.clientWidth - innerRef.clientWidth + translateX;
+        var moveWidth = 0;
+
+        if (canScroll >= innerRef.clientWidth) {
+          moveWidth = innerRef.clientWidth;
+        } else {
+          moveWidth = canScroll;
+        }
+
+        setTranslateX(translateX - moveWidth);
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: prefixCls + "__add-btn",
+    onClick: function onClick() {
+      if (scrollRef && innerRef) {
+        var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
+        var moveWidth = 0;
+
+        if (canScroll >= innerRef.clientHeight) {
+          moveWidth = innerRef.clientHeight;
+        } else {
+          moveWidth = canScroll;
+        }
+
+        setTranslateY(translateY - moveWidth);
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null)), editable && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: prefixCls + "__add-btn",
+    onClick: onAdd
+  }, /*#__PURE__*/React__default['default'].createElement(icons.PlusOutlined, null)));
 });
 
 if (env.__DEV__) {

package/lib/cjs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../src/TabList.tsx"],"sourcesContent":[null],"names":["TabList","forwardRef","ref","data","className","style","activeId","defaultActiveId","onChange","onTabClick","prefixCls","useUncontrolledState","tabId","activeTab","setActiveTab","useState","innerRef","setInnerRef","itemsRef","useRef","onClickTab","useCallback","key","React","cx","map","d","index","TabItem","node","current","active","TabInk","direction","tabListRef","itemRef","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAQaA,OAAO,gBAAGC,gBAAAA,CACrB,cAAA,EAAyFC,GAAzF;MAAGC,YAAAA;MAAMC,iBAAAA;MAAWC,aAAAA;MAAOC,gBAAAA;MAAUC,uBAAAA;MAAiBC,gBAAAA;MAAUC,kBAAAA;MAAYC,iBAAAA;;;;8BACxCC,yCAAAA,CAChCJ,eAAe,KAAI,MAAAJ,IAAI,CAAC,CAAD,CAAJ,UAAA,iBAAA,SAAA,MAASS,KAAb,CADiBD,EAEhCL,QAFgCK,EAGhCH,QAHgCG;MAA3BE,SAAP;MAAkBC,YAAlB;;kBAMgCC,cAAAA,CAAgC,IAAhCA;MAAzBC,QAAP;MAAiBC,WAAjB;;MACMC,QAAQ,GAAGC,YAAAA,CAA2C,EAA3CA;MAEXC,UAAU,GAAGC,iBAAAA,CACjB,UAACC,GAAD;QACMb,YAAY;AACdA,MAAAA,UAAU,CAACa,GAAD,CAAVb;;;QAEEa,GAAG,KAAKT,SAARS,IAAqBR,cAAc;AACrCA,MAAAA,YAAY,CAACQ,GAAD,CAAZR;;AANwB,GAAXO,EASjB,CAACR,SAAD,EAAYJ,UAAZ,EAAwBK,YAAxB,CATiBO;sBAYjBE,yBAAAA,cAAAA,MAAAA;AAAKlB,IAAAA,KAAK,EAAEA;AAAOD,IAAAA,SAAS,EAAEoB,YAAAA,CAAMd,SAAJ,WAAFc,EAAyBpB,SAAzBoB;AAAqCtB,IAAAA,GAAG,EAAEA;GAAxEqB,eACEA,yBAAAA,cAAAA,MAAAA;AAAKnB,IAAAA,SAAS,EAAEoB,YAAAA,CAAMd,SAAJ,kBAAFc;AAAiCtB,IAAAA,GAAG,EAAEe;GAAtDM,EACGpB,IAAI,CAACsB,GAALtB,CAAS,UAACuB,CAAD,EAAIC,KAAJ;wBACRJ,yBAAAA,cAAAA,CAACK,eAADL;AACED,MAAAA,GAAG,EAAEK;OACDD;AACJxB,MAAAA,GAAG,EAAE,YAAA,CAAC2B,IAAD;AACHX,QAAAA,QAAQ,CAACY,OAATZ,MAAoBQ,CAAC,CAACd,KAAtBM,IAAiCW,IAAjCX;;AAEFa,MAAAA,MAAM,EAAElB,SAAS,KAAKa,CAAC,CAACd;AACxBF,MAAAA,SAAS,EAAEA;AACXD,MAAAA,UAAU,EAAEW;MARdG;AADD,GAAApB,CADHoB,eAaEA,yBAAAA,cAAAA,CAACS,aAADT;AACEb,IAAAA,SAAS,EAAEA;AACXuB,IAAAA,SAAS,EAAC;AACVC,IAAAA,UAAU,EAAElB;AACZmB,IAAAA,OAAO,EAAE,MAAAjB,QAAQ,CAACY,OAAT,UAAA,iBAAA,SAAA,MAAmBjB;GAJ9BU,CAbFA,CADFA;AAvB2B,CAAVtB;;AAkEvB,IAAImC,WAAJ,EAAa;AACXpC,EAAAA,OAAO,CAACqC,WAARrC,GAAsB,SAAtBA;;;"}
+{"version":3,"file":"TabList.js","sources":["../../src/TabList.tsx"],"sourcesContent":[null],"names":["TabList","forwardRef","ref","data","className","style","activeId","defaultActiveId","onChange","onTabClick","prefixCls","direction","editable","onAdd","onDelete","draggable","onDragStart","onDragOver","onDrop","onDragEnd","type","useUncontrolledState","tabId","activeTab","setActiveTab","useState","innerRef","setInnerRef","scrollRef","setScrollRef","translateX","setTranslateX","translateY","setTranslateY","itemsRef","useRef","showScrollBtn","useMemo","clientWidth","clientHeight","onClickTab","useCallback","key","React","cx","onClick","canScroll","moveWidth","LeftOutlined","UpOutlined","transform","map","d","index","TabItem","node","current","itemRef","active","TabInk","translate","tabListRef","RightOutlined","DownOutlined","PlusOutlined","__DEV__","displayName"],"mappings":"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"}

package/lib/cjs/Tabs.js

@@ -42,6 +42,8 @@ var _prefix = classname.getPrefixCls(_role);
 
 
 var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _cx;
+
   var _b;
 
   var _a$prefixCls = _a.prefixCls,
@@ -54,9 +56,23 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       activeId = _a.activeId,
       onChange = _a.onChange,
       onTabClick = _a.onTabClick,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick"]);
-
-  var cls = classname.cx(prefixCls, className);
+      editable = _a.editable,
+      _a$direction = _a.direction,
+      direction = _a$direction === void 0 ? 'horizontal' : _a$direction,
+      onAdd = _a.onAdd,
+      onDelete = _a.onDelete,
+      _a$draggable = _a.draggable,
+      draggable = _a$draggable === void 0 ? false : _a$draggable,
+      onDragStart = _a.onDragStart,
+      onDragOver = _a.onDragOver,
+      onDragEnd = _a.onDragEnd,
+      onDrop = _a.onDrop,
+      style = _a.style,
+      _a$type = _a.type,
+      type = _a$type === void 0 ? 'default' : _a$type,
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "direction", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type"]);
+
+  var cls = classname.cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--vertical"] = direction === 'vertical', _cx[prefixCls + "--" + type] = type, _cx));
   var tabList = React.useMemo(function () {
     var list = [];
     React__default['default'].Children.map(children, function (child) {
@@ -95,17 +111,27 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
     ref: ref,
     role: role,
-    className: cls
+    className: cls,
+    style: style
   }, rest), /*#__PURE__*/React__default['default'].createElement(TabList.TabList, {
     prefixCls: prefixCls,
     data: tabList,
     activeId: activeId,
     onChange: _onChange,
-    onTabClick: onTabClick
+    onTabClick: onTabClick,
+    direction: direction,
+    editable: editable,
+    onAdd: onAdd,
+    onDelete: onDelete,
+    draggable: draggable,
+    onDragEnd: onDragEnd,
+    onDragOver: onDragOver,
+    onDrop: onDrop,
+    type: type,
+    onDragStart: onDragStart
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: _prefix + "__content"
   }, React__default['default'].Children.map(children, function (child) {
-    console.log(child, child === null || child === void 0 ? void 0 : child.props.tabId, activeId);
     return child && /*#__PURE__*/React__default['default'].cloneElement(child, {
       active: activePane === child.props.tabId
     });

package/lib/cjs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","Tabs","forwardRef","_a","ref","prefixCls","role","className","children","defaultActiveId","activeId","onChange","onTabClick","rest","cls","cx","tabList","useMemo","list","React","Children","map","child","props","tabTitle","tabId","tabDesc","closeable","disabled","item","push","useState","activePane","setActivePane","_onChange","useCallback","TabList","data","console","log","cloneElement","active","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAMA,KAAK,GAAG,MAAd;;AACA,IAAMC,OAAO,GAAGC,sBAAAA,CAAaF,KAAbE,CAAhB;AAEA;;;;;IAGaC,IAAI,gBAAGC,gBAAAA,CAClB,UACEC,EADF,EAYEC,GAZF;;;wBAEIC;MAAAA,sCAAYN;mBACZO;MAAAA,4BAAOR;MACPS,eAAAA;MACAC,cAAAA;MACAC,qBAAAA;MACAC,cAAAA;MACAC,cAAAA;MACAC,gBAAAA;MACGC,wBATL,YAAA,QAAA,aAAA,YAAA,mBAAA,YAAA,YAAA,cAAA;;MAaMC,GAAG,GAAGC,YAAAA,CAAGV,SAAHU,EAAcR,SAAdQ;MAENC,OAAO,GAAGC,aAAAA,CAAQ;QAChBC,IAAI,GAAmB;AAC7BC,IAAAA,yBAAAA,CAAMC,QAAND,CAAeE,GAAfF,CAAmBX,QAAnBW,EAA6B,UAACG,KAAD;UACvBA,OAAO;2BACiDA,KAAK,CAACC;YAAxDC,QAAR,gBAAQA;YAAUC,KAAlB,gBAAkBA;YAAOC,OAAzB,gBAAyBA;YAASC,SAAlC,gBAAkCA;YAAWC,QAA7C,gBAA6CA;YACvCC,IAAI,GAAG;AAAEL,UAAAA,QAAQ,EAARA,QAAF;AAAYC,UAAAA,KAAK,EAALA,KAAZ;AAAmBC,UAAAA,OAAO,EAAPA,OAAnB;AAA4BC,UAAAA,SAAS,EAATA,SAA5B;AAAuCC,UAAAA,QAAQ,EAARA;AAAvC;AAEbV,QAAAA,IAAI,CAACY,IAALZ,CAAUW,IAAVX;;AALJ,KAAAC;WAQOD;AAVc,GAAPD,EAWb,CAACT,QAAD,CAXaS;;kBAaoBc,cAAAA,CAASrB,QAAQ,IAAID,eAAZC,KAA+B,MAAAM,OAAO,CAAC,CAAD,CAAP,UAAA,iBAAA,SAAA,MAAYS,KAA3Cf,CAATqB;MAA7BC,UAAP;MAAmBC,aAAnB;;MAEMC,SAAS,GAAGC,iBAAAA,CAChB,UAACV,KAAD;QACMd,UAAU;AACZA,MAAAA,QAAQ,CAACc,KAAD,CAARd;;;AAEFsB,IAAAA,aAAa,CAACR,KAAD,CAAbQ;AALyB,GAAXE,EAOhB,CAACxB,QAAD,CAPgBwB;;sBAWhBhB,yBAAAA,cAAAA,MAAAA;AAAKf,IAAAA,GAAG,EAAEA;AAAKE,IAAAA,IAAI,EAAEA;AAAMC,IAAAA,SAAS,EAAEO;KAASD,KAA/CM,eACEA,yBAAAA,cAAAA,CAACiB,eAADjB;AACEd,IAAAA,SAAS,EAAEA;AACXgC,IAAAA,IAAI,EAAErB;AACNN,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,QAAQ,EAAEuB;AACVtB,IAAAA,UAAU,EAAEA;GALdO,CADFA,eAQEA,yBAAAA,cAAAA,MAAAA;AAAKZ,IAAAA,SAAS,EAAKR,OAAL;GAAdoB,EACGA,yBAAAA,CAAMC,QAAND,CAAeE,GAAfF,CAAmBX,QAAnBW,EAA6B,UAACG,KAAD;AAC5BgB,IAAAA,OAAO,CAACC,GAARD,CAAYhB,KAAZgB,EAAmBhB,KAAK,SAALA,IAAAA,KAAK,WAALA,SAAAA,GAAAA,KAAK,CAAEC,KAAPD,CAAaG,KAAhCa,EAAuC5B,QAAvC4B;WAEEhB,KAAK,iBACLH,yBAAAA,CAAMqB,YAANrB,CAAmBG,KAAnBH,EAA0B;AACxBsB,MAAAA,MAAM,EAAET,UAAU,KAAKV,KAAK,CAACC,KAAND,CAAYG;AADX,KAA1BN;AAJH,GAAAA,CADHA,CARFA;AA3CwB,CAAVjB;;AAkHpB,IAAIwC,WAAJ,EAAa;AACXzC,EAAAA,IAAI,CAAC0C,WAAL1C,GAAmB,MAAnBA;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","Tabs","forwardRef","_a","ref","prefixCls","role","className","children","defaultActiveId","activeId","onChange","onTabClick","editable","direction","onAdd","onDelete","draggable","onDragStart","onDragOver","onDragEnd","onDrop","style","type","rest","cls","cx","tabList","useMemo","list","React","Children","map","child","props","tabTitle","tabId","tabDesc","closeable","disabled","item","push","useState","activePane","setActivePane","_onChange","useCallback","TabList","data","cloneElement","active","__DEV__","displayName"],"mappings":"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"}

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

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-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: #000;\n  color: var(--hi-v4-color-static-black, #000);\n  margin-left: 4px; }\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: #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  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n    margin: 0 4px 0 0;\n    padding: 4px 8px;\n    background-color: #ebedf0;\n    background-color: var(--hi-v4-color-gray-200, #ebedf0);\n    border-radius: 4px 4px 0 0;\n    border: 1px solid #dfe2e8;\n    border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8); }\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      border-bottom: 2px solid #fff;\n      border-bottom: 2px solid var(--hi-v4-color-static-white, #fff); }\n.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: #ebedf0;\n    background-color: var(--hi-v4-color-gray-200, #ebedf0);\n    display: block; }\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 0 4px 0;\n      padding: 4px 8px;\n      background-color: #ebedf0;\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      border-radius: 4px 0 0  4px;\n      border: 1px solid #dfe2e8;\n      border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8); }\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        border-right: 1px solid #fff;\n        border-right: 1px solid var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list::before {\n      content: '';\n      clear: both;\n      position: absolute;\n      top: 0;\n      right: 0;\n      left: auto;\n      height: 100%;\n      width: 1px;\n      background-color: #ebedf0;\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      display: block; }\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: 22px;\n    padding: 0 8px;\n    margin: 8px 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 solid #237ffa;\n      border-top: 1px solid 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 solid #237ffa;\n      border-bottom: 1px solid 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    right: 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: 22px;\n  padding: 8px 0;\n  margin: 0 16px;\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 solid #237ffa;\n    border-left: 1px solid var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--next {\n    border-right: 1px solid #237ffa;\n    border-right: 1px solid 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  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n";
 
 var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
 

package/lib/esm/TabInk.js

@@ -17,7 +17,8 @@ var TabInk = function TabInk(_ref) {
       prefixCls = _ref.prefixCls,
       itemRef = _ref.itemRef,
       tabListRef = _ref.tabListRef,
-      direction = _ref.direction;
+      direction = _ref.direction,
+      translate = _ref.translate;
   var inkRef = useRef(null);
   useEffect(function () {
     if (inkRef.current && itemRef && tabListRef) {
@@ -27,14 +28,14 @@ var TabInk = function TabInk(_ref) {
 
       if (direction === 'vertical') {
         _style = {
-          top: itemRect.top - listRect.top + "px",
+          top: itemRect.top - listRect.top - translate + "px",
           height: itemRect.height + "px",
           left: '',
           width: ''
         };
       } else {
         _style = {
-          left: itemRect.left - listRect.left + "px",
+          left: itemRect.left - listRect.left - translate + "px",
           width: itemRect.width + "px",
           top: '',
           height: ''

package/lib/esm/TabInk.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabInk.js","sources":["../../src/TabInk.tsx"],"sourcesContent":[null],"names":["TabInk","disabled","prefixCls","itemRef","tabListRef","direction","inkRef","useRef","useEffect","current","itemRect","getBoundingClientRect","listRect","_style","top","height","left","width","Object","assign","style","React","className","cx","ref"],"mappings":";;;;;;;;;;;;IAWaA,MAAM,GAA0B,SAAhCA,MAAgC,KAAA;;;MAC3CC,gBAAAA;MACAC,iBAAAA;MACAC,eAAAA;MACAC,kBAAAA;MACAC,iBAAAA;MAEMC,MAAM,GAAGC,MAAM,CAAiB,IAAjB;AAErBC,EAAAA,SAAS,CAAC;QACJF,MAAM,CAACG,OAAPH,IAAkBH,OAAlBG,IAA6BF,YAAY;UACrCM,QAAQ,GAAGP,OAAO,CAACQ,qBAARR;UACXS,QAAQ,GAAGR,UAAU,CAACO,qBAAXP;UACbS,MAAM,GAAwB;;UAC9BR,SAAS,KAAK,YAAY;AAC5BQ,QAAAA,MAAM,GAAG;AACPC,UAAAA,GAAG,EAAKJ,QAAQ,CAACI,GAATJ,GAAeE,QAAQ,CAACE,GAAxBJ,OADD;AAEPK,UAAAA,MAAM,EAAKL,QAAQ,CAACK,MAATL,OAFJ;AAGPM,UAAAA,IAAI,EAAE,EAHC;AAIPC,UAAAA,KAAK,EAAE;AAJA,SAATJ;AADF,aAOO;AACLA,QAAAA,MAAM,GAAG;AACPG,UAAAA,IAAI,EAAKN,QAAQ,CAACM,IAATN,GAAgBE,QAAQ,CAACI,IAAzBN,OADF;AAEPO,UAAAA,KAAK,EAAKP,QAAQ,CAACO,KAATP,OAFH;AAGPI,UAAAA,GAAG,EAAE,EAHE;AAIPC,UAAAA,MAAM,EAAE;AAJD,SAATF;;;AAOFK,MAAAA,MAAM,CAACC,MAAPD,CAAcZ,MAAM,CAACG,OAAPH,CAAec,KAA7BF,EAAoCL,MAApCK;;AApBK,GAAA,EAsBN,CAACf,OAAD,EAAUC,UAAV,EAAsBC,SAAtB,CAtBM,CAATG;sBAyBEa,mBAAAA,MAAAA;AACEC,IAAAA,SAAS,EAAEC,EAAE,CAAIrB,SAAJ,UAAA,iBACPA,SADO,wBACsBD,aADtB;AAGbuB,IAAAA,GAAG,EAAElB;GAJPe;;;;"}
+{"version":3,"file":"TabInk.js","sources":["../../src/TabInk.tsx"],"sourcesContent":[null],"names":["TabInk","disabled","prefixCls","itemRef","tabListRef","direction","translate","inkRef","useRef","useEffect","current","itemRect","getBoundingClientRect","listRect","_style","top","height","left","width","Object","assign","style","React","className","cx","ref"],"mappings":";;;;;;;;;;;;IAYaA,MAAM,GAA0B,SAAhCA,MAAgC,KAAA;;;MAC3CC,gBAAAA;MACAC,iBAAAA;MACAC,eAAAA;MACAC,kBAAAA;MACAC,iBAAAA;MACAC,iBAAAA;MAEMC,MAAM,GAAGC,MAAM,CAAiB,IAAjB;AAErBC,EAAAA,SAAS,CAAC;QACJF,MAAM,CAACG,OAAPH,IAAkBJ,OAAlBI,IAA6BH,YAAY;UACrCO,QAAQ,GAAGR,OAAO,CAACS,qBAART;UACXU,QAAQ,GAAGT,UAAU,CAACQ,qBAAXR;UACbU,MAAM,GAAwB;;UAC9BT,SAAS,KAAK,YAAY;AAC5BS,QAAAA,MAAM,GAAG;AACPC,UAAAA,GAAG,EAAKJ,QAAQ,CAACI,GAATJ,GAAeE,QAAQ,CAACE,GAAxBJ,GAA8BL,SAA9BK,OADD;AAEPK,UAAAA,MAAM,EAAKL,QAAQ,CAACK,MAATL,OAFJ;AAGPM,UAAAA,IAAI,EAAE,EAHC;AAIPC,UAAAA,KAAK,EAAE;AAJA,SAATJ;AADF,aAOO;AACLA,QAAAA,MAAM,GAAG;AACPG,UAAAA,IAAI,EAAKN,QAAQ,CAACM,IAATN,GAAgBE,QAAQ,CAACI,IAAzBN,GAAgCL,SAAhCK,OADF;AAEPO,UAAAA,KAAK,EAAKP,QAAQ,CAACO,KAATP,OAFH;AAGPI,UAAAA,GAAG,EAAE,EAHE;AAIPC,UAAAA,MAAM,EAAE;AAJD,SAATF;;;AAOFK,MAAAA,MAAM,CAACC,MAAPD,CAAcZ,MAAM,CAACG,OAAPH,CAAec,KAA7BF,EAAoCL,MAApCK;;AApBK,GAAA,EAsBN,CAAChB,OAAD,EAAUC,UAAV,EAAsBC,SAAtB,CAtBM,CAATI;sBAyBEa,mBAAAA,MAAAA;AACEC,IAAAA,SAAS,EAAEC,EAAE,CAAItB,SAAJ,UAAA,iBACPA,SADO,wBACsBD,aADtB;AAGbwB,IAAAA,GAAG,EAAElB;GAJPe;;;;"}

package/lib/esm/TabItem.js

@@ -7,9 +7,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useState, useCallback } from 'react';
 import { cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
+import { CloseOutlined } from '@hi-ui/icons';
 var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _cx;
 
@@ -20,7 +21,26 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       prefixCls = _ref.prefixCls,
       tabId = _ref.tabId,
       onTabClick = _ref.onTabClick,
-      active = _ref.active;
+      active = _ref.active,
+      editable = _ref.editable,
+      onDelete = _ref.onDelete,
+      index = _ref.index,
+      _onDragStart = _ref.onDragStart,
+      _onDragOver = _ref.onDragOver,
+      _onDrop = _ref.onDrop,
+      _onDragEnd = _ref.onDragEnd,
+      itemRef = _ref.itemRef,
+      draggable = _ref.draggable,
+      _ref$direction = _ref.direction,
+      layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+
+  var _useState = useState(null),
+      dragId = _useState[0],
+      setDragId = _useState[1];
+
+  var _useState2 = useState(null),
+      direction = _useState2[0],
+      setDirection = _useState2[1];
 
   var _onClick = useCallback(function (e) {
     if (onTabClick) {
@@ -30,11 +50,110 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   return /*#__PURE__*/React.createElement("div", {
     style: style,
-    className: cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx)),
+    className: cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx[prefixCls + "__item--" + direction] = direction, _cx)),
     ref: ref,
+    draggable: draggable,
     tabIndex: disabled ? 0 : -1,
-    onClick: _onClick
-  }, /*#__PURE__*/React.createElement("span", null, tabTitle));
+    onClick: _onClick,
+    onDragStart: function onDragStart(e) {
+      e.stopPropagation();
+      e.dataTransfer.setData('tab', JSON.stringify({
+        tabId: tabId,
+        tabTitle: tabTitle
+      }));
+      setDragId(tabId);
+
+      if (_onDragStart) {
+        _onDragStart(e, {
+          tabId: tabId,
+          tabTitle: tabTitle
+        });
+      }
+    },
+    onDragEnd: function onDragEnd(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.clearData();
+      setDragId(null);
+
+      if (_onDragEnd) {
+        _onDragEnd(e, {
+          tabId: tabId,
+          tabTitle: tabTitle
+        });
+      }
+    },
+    onDragLeave: function onDragLeave(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setDirection(null);
+    },
+    onDragOver: function onDragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (dragId !== tabId && itemRef) {
+        var targetBoundingRect = itemRef.getBoundingClientRect();
+        var hoverTargetSortY = (targetBoundingRect.bottom - targetBoundingRect.top) / 2;
+        var hoverTargetSortX = (targetBoundingRect.right - targetBoundingRect.left) / 2; // 鼠标垂直移动距离
+
+        var hoverClientY = e.clientY - targetBoundingRect.top;
+        var hoverClientX = e.clientX - targetBoundingRect.left;
+
+        if (layout === 'vertical') {
+          if (hoverClientY < hoverTargetSortY) {
+            setDirection('prev');
+          } else {
+            setDirection('next');
+          }
+        } else {
+          if (hoverClientX < hoverTargetSortX) {
+            setDirection('prev');
+          } else {
+            setDirection('next');
+          }
+        }
+      }
+
+      if (_onDragOver) {
+        _onDragOver(e, {
+          tabId: tabId,
+          tabTitle: tabTitle
+        });
+      }
+    },
+    onDrop: function onDrop(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setDirection(null);
+
+      if (_onDrop && dragId !== tabId) {
+        var passedData = JSON.parse(e.dataTransfer.getData('tab'));
+
+        _onDrop(e, {
+          dragNode: {
+            tabId: tabId,
+            tabTitle: tabTitle
+          },
+          dropNode: {
+            tabId: passedData.tabId,
+            tabTitle: passedData.tabTitle
+          },
+          direction: direction
+        });
+      }
+    }
+  }, /*#__PURE__*/React.createElement("span", null, tabTitle), editable && /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__close-btn",
+    onClick: function onClick() {
+      if (onDelete) {
+        onDelete({
+          tabId: tabId,
+          tabTitle: tabTitle
+        }, index);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(CloseOutlined, null)));
 });
 
 if (__DEV__) {

package/lib/esm/TabItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.js","sources":["../../src/TabItem.tsx"],"sourcesContent":[null],"names":["TabItem","forwardRef","ref","className","style","disabled","tabTitle","prefixCls","tabId","onTabClick","active","_onClick","useCallback","e","React","cx","tabIndex","onClick","__DEV__","displayName"],"mappings":";;;;;;;;;;;;IAWaA,OAAO,gBAAGC,UAAU,CAC/B,cAAA,EAAiFC,GAAjF;;;MAAGC,iBAAAA;MAAWC,aAAAA;MAAOC,gBAAAA;MAAUC,gBAAAA;MAAUC,iBAAAA;MAAWC,aAAAA;MAAOC,kBAAAA;MAAYC,cAAAA;;MAC/DC,QAAQ,GAAGC,WAAW,CAC1B,UAACC,CAAD;QACMJ,YAAY;AACdA,MAAAA,UAAU,CAACD,KAAD,CAAVC;;AAHsB,GAAA,EAM1B,CAACA,UAAD,EAAaD,KAAb,CAN0B;;sBAS1BM,mBAAAA,MAAAA;AACEV,IAAAA,KAAK,EAAEA;AACPD,IAAAA,SAAS,EAAEY,EAAE,CAAIR,SAAJ,WAAA,EAAuBJ,SAAvB,iBAAwCI,SAAxC,uBAAoEG,WAApE;AACbR,IAAAA,GAAG,EAAEA;AACLc,IAAAA,QAAQ,EAAEX,QAAQ,GAAG,CAAH,GAAO,CAAC;AAC1BY,IAAAA,OAAO,EAAEN;GALXG,eAOEA,mBAAAA,OAAAA,MAAAA,EAAOR,QAAPQ,CAPFA;AAX2B,CAAA;;AAuBjC,IAAII,OAAJ,EAAa;AACXlB,EAAAA,OAAO,CAACmB,WAARnB,GAAsB,SAAtBA;;;"}
+{"version":3,"file":"TabItem.js","sources":["../../src/TabItem.tsx"],"sourcesContent":[null],"names":["TabItem","forwardRef","ref","className","style","disabled","tabTitle","prefixCls","tabId","onTabClick","active","editable","onDelete","index","onDragStart","onDragOver","onDrop","onDragEnd","itemRef","draggable","direction","layout","useState","dragId","setDragId","setDirection","_onClick","useCallback","e","React","cx","tabIndex","onClick","stopPropagation","dataTransfer","setData","JSON","stringify","preventDefault","clearData","onDragLeave","targetBoundingRect","getBoundingClientRect","hoverTargetSortY","bottom","top","hoverTargetSortX","right","left","hoverClientY","clientY","hoverClientX","clientX","passedData","parse","getData","dragNode","dropNode","CloseOutlined","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;IA8BaA,OAAO,gBAAGC,UAAU,CAC/B,cAAA,EAqBEC,GArBF;;;MAEIC,iBAAAA;MACAC,aAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACAC,iBAAAA;MACAC,aAAAA;MACAC,kBAAAA;MACAC,cAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACAC,aAAAA;MACAC,oBAAAA;MACAC,mBAAAA;MACAC,eAAAA;MACAC,kBAAAA;MACAC,eAAAA;MACAC,iBAAAA;4BACAC;MAAWC,qCAAS;;kBAIMC,QAAQ,CAAgB,IAAhB;MAA7BC,MAAP;MAAeC,SAAf;;mBACkCF,QAAQ,CAAyB,IAAzB;MAAnCF,SAAP;MAAkBK,YAAlB;;MACMC,QAAQ,GAAGC,WAAW,CAC1B,UAACC,CAAD;QACMnB,YAAY;AACdA,MAAAA,UAAU,CAACD,KAAD,CAAVC;;AAHsB,GAAA,EAM1B,CAACA,UAAD,EAAaD,KAAb,CAN0B;;sBAS1BqB,mBAAAA,MAAAA;AACEzB,IAAAA,KAAK,EAAEA;AACPD,IAAAA,SAAS,EAAE2B,EAAE,CAAIvB,SAAJ,WAAA,EAAuBJ,SAAvB,iBACPI,SADO,uBACqBG,YAC5BH,SAFO,aAEPA,GAAoBa,aAAcA,cAF3B;AAIblB,IAAAA,GAAG,EAAEA;AACLiB,IAAAA,SAAS,EAAEA;AACXY,IAAAA,QAAQ,EAAE1B,QAAQ,GAAG,CAAH,GAAO,CAAC;AAC1B2B,IAAAA,OAAO,EAAEN;AACTZ,IAAAA,WAAW,EAAE,oBAAA,CAACc,CAAD;AACXA,MAAAA,CAAC,CAACK,eAAFL;AACAA,MAAAA,CAAC,CAACM,YAAFN,CAAeO,OAAfP,CAAuB,KAAvBA,EAA8BQ,IAAI,CAACC,SAALD,CAAe;AAAE5B,QAAAA,KAAK,EAALA,KAAF;AAASF,QAAAA,QAAQ,EAARA;AAAT,OAAf8B,CAA9BR;AACAJ,MAAAA,SAAS,CAAChB,KAAD,CAATgB;;UACIV,cAAa;AACfA,QAAAA,YAAW,CAACc,CAAD,EAAI;AAAEpB,UAAAA,KAAK,EAALA,KAAF;AAASF,UAAAA,QAAQ,EAARA;AAAT,SAAJ,CAAXQ;;;AAGJG,IAAAA,SAAS,EAAE,kBAAA,CAACW,CAAD;AACTA,MAAAA,CAAC,CAACU,cAAFV;AACAA,MAAAA,CAAC,CAACK,eAAFL;AACAA,MAAAA,CAAC,CAACM,YAAFN,CAAeW,SAAfX;AACAJ,MAAAA,SAAS,CAAC,IAAD,CAATA;;UACIP,YAAW;AACbA,QAAAA,UAAS,CAACW,CAAD,EAAI;AAAEpB,UAAAA,KAAK,EAALA,KAAF;AAASF,UAAAA,QAAQ,EAARA;AAAT,SAAJ,CAATW;;;AAGJuB,IAAAA,WAAW,EAAE,oBAAA,CAACZ,CAAD;AACXA,MAAAA,CAAC,CAACU,cAAFV;AACAA,MAAAA,CAAC,CAACK,eAAFL;AACAH,MAAAA,YAAY,CAAC,IAAD,CAAZA;;AAEFV,IAAAA,UAAU,EAAE,mBAAA,CAACa,CAAD;AACVA,MAAAA,CAAC,CAACU,cAAFV;AACAA,MAAAA,CAAC,CAACK,eAAFL;;UACIL,MAAM,KAAKf,KAAXe,IAAoBL,SAAS;YACzBuB,kBAAkB,GAAGvB,OAAO,CAACwB,qBAARxB;YACrByB,gBAAgB,GAAG,CAACF,kBAAkB,CAACG,MAAnBH,GAA4BA,kBAAkB,CAACI,GAAhD,IAAuD;YAC1EC,gBAAgB,GAAG,CAACL,kBAAkB,CAACM,KAAnBN,GAA2BA,kBAAkB,CAACO,IAA/C,IAAuD,EAHjD;;YAKzBC,YAAY,GAAGrB,CAAC,CAACsB,OAAFtB,GAAYa,kBAAkB,CAACI;YAC9CM,YAAY,GAAGvB,CAAC,CAACwB,OAAFxB,GAAYa,kBAAkB,CAACO;;YAChD3B,MAAM,KAAK,YAAY;cACrB4B,YAAY,GAAGN,kBAAkB;AACnClB,YAAAA,YAAY,CAAC,MAAD,CAAZA;AADF,iBAEO;AACLA,YAAAA,YAAY,CAAC,MAAD,CAAZA;;AAJJ,eAMO;cACD0B,YAAY,GAAGL,kBAAkB;AACnCrB,YAAAA,YAAY,CAAC,MAAD,CAAZA;AADF,iBAEO;AACLA,YAAAA,YAAY,CAAC,MAAD,CAAZA;;;;;UAIFV,aAAY;AACdA,QAAAA,WAAU,CAACa,CAAD,EAAI;AAAEpB,UAAAA,KAAK,EAALA,KAAF;AAASF,UAAAA,QAAQ,EAARA;AAAT,SAAJ,CAAVS;;;AAGJC,IAAAA,MAAM,EAAE,eAAA,CAACY,CAAD;AACNA,MAAAA,CAAC,CAACU,cAAFV;AACAA,MAAAA,CAAC,CAACK,eAAFL;AACAH,MAAAA,YAAY,CAAC,IAAD,CAAZA;;UACIT,OAAM,IAAIO,MAAM,KAAKf,OAAO;YACxB6C,UAAU,GAAGjB,IAAI,CAACkB,KAALlB,CAAWR,CAAC,CAACM,YAAFN,CAAe2B,OAAf3B,CAAuB,KAAvBA,CAAXQ;;AACnBpB,QAAAA,OAAM,CAACY,CAAD,EAAI;AACR4B,UAAAA,QAAQ,EAAE;AAAEhD,YAAAA,KAAK,EAALA,KAAF;AAASF,YAAAA,QAAQ,EAARA;AAAT,WADF;AAERmD,UAAAA,QAAQ,EAAE;AACRjD,YAAAA,KAAK,EAAE6C,UAAU,CAAC7C,KADV;AAERF,YAAAA,QAAQ,EAAE+C,UAAU,CAAC/C;AAFb,WAFF;AAMRc,UAAAA,SAAS,EAATA;AANQ,SAAJ,CAANJ;;;GAlENa,eA6EEA,mBAAAA,OAAAA,MAAAA,EAAOvB,QAAPuB,CA7EFA,EA8EGlB,QAAQ,iBACPkB,mBAAAA,OAAAA;AACE1B,IAAAA,SAAS,EAAKI,SAAL;AACTyB,IAAAA,OAAO,EAAE,gBAAA;UACHpB,UAAU;AACZA,QAAAA,QAAQ,CAAC;AAAEJ,UAAAA,KAAK,EAALA,KAAF;AAASF,UAAAA,QAAQ,EAARA;AAAT,SAAD,EAAsBO,KAAtB,CAARD;;;GAJNiB,eAQEA,mBAAAA,CAAC6B,aAAD7B,MAAAA,CARFA,CA/EJA;AAnC2B,CAAA;;AAiIjC,IAAI8B,OAAJ,EAAa;AACX3D,EAAAA,OAAO,CAAC4D,WAAR5D,GAAsB,SAAtBA;;;"}

package/lib/esm/TabList.js

@@ -7,13 +7,16 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { forwardRef, useState, useRef, useCallback } from 'react';
+import React, { forwardRef, useState, useRef, useMemo, useCallback } from 'react';
 import { __DEV__ } from '@hi-ui/env';
 import { TabItem } from './TabItem.js';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { cx } from '@hi-ui/classname';
 import { TabInk } from './TabInk.js';
+import { LeftOutlined, UpOutlined, RightOutlined, DownOutlined, PlusOutlined } from '@hi-ui/icons';
 var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _cx;
+
   var data = _ref.data,
       className = _ref.className,
       style = _ref.style,
@@ -21,7 +24,19 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       defaultActiveId = _ref.defaultActiveId,
       onChange = _ref.onChange,
       onTabClick = _ref.onTabClick,
-      prefixCls = _ref.prefixCls;
+      prefixCls = _ref.prefixCls,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+      editable = _ref.editable,
+      onAdd = _ref.onAdd,
+      onDelete = _ref.onDelete,
+      draggable = _ref.draggable,
+      onDragStart = _ref.onDragStart,
+      onDragOver = _ref.onDragOver,
+      onDrop = _ref.onDrop,
+      onDragEnd = _ref.onDragEnd,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type;
 
   var _a, _b;
 
@@ -33,7 +48,24 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       innerRef = _useState[0],
       setInnerRef = _useState[1];
 
+  var _useState2 = useState(null),
+      scrollRef = _useState2[0],
+      setScrollRef = _useState2[1];
+
+  var _useState3 = useState(0),
+      translateX = _useState3[0],
+      setTranslateX = _useState3[1];
+
+  var _useState4 = useState(0),
+      translateY = _useState4[0],
+      setTranslateY = _useState4[1];
+
   var itemsRef = useRef({});
+  var showScrollBtn = useMemo(function () {
+    if (scrollRef && innerRef) {
+      return direction === 'horizontal' ? (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.clientWidth) > (innerRef === null || innerRef === void 0 ? void 0 : innerRef.clientWidth) : (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.clientHeight) > (innerRef === null || innerRef === void 0 ? void 0 : innerRef.clientHeight);
+    }
+  }, [scrollRef, innerRef, direction]);
   var onClickTab = useCallback(function (key) {
     if (onTabClick) {
       onTabClick(key);
@@ -45,11 +77,49 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [activeTab, onTabClick, setActiveTab]);
   return /*#__PURE__*/React.createElement("div", {
     style: style,
-    className: cx(prefixCls + "__list", className),
+    className: cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
     ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
+  }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__add-btn",
+    onClick: function onClick() {
+      if (scrollRef && innerRef) {
+        var canScroll = -translateX - innerRef.clientWidth;
+        var moveWidth = 0;
+
+        if (canScroll >= 0) {
+          moveWidth = innerRef.clientWidth;
+        } else {
+          moveWidth = -translateX;
+        }
+
+        setTranslateX(translateX + moveWidth);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(LeftOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__add-btn",
+    onClick: function onClick() {
+      if (scrollRef && innerRef) {
+        var canScroll = -translateY - innerRef.clientHeight;
+        var moveWidth = 0;
+
+        if (canScroll >= 0) {
+          moveWidth = innerRef.clientHeight;
+        } else {
+          moveWidth = -translateY;
+        }
+
+        setTranslateY(translateY + moveWidth);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(UpOutlined, null)), /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__list--inner"),
     ref: setInnerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(prefixCls + "__list--scroll"),
+    ref: setScrollRef,
+    style: showScrollBtn ? {
+      transform: direction === 'horizontal' ? "translateX(" + translateX + "px)" : "translateY(" + translateY + "px)"
+    } : {}
   }, data.map(function (d, index) {
     return /*#__PURE__*/React.createElement(TabItem, Object.assign({
       key: index
@@ -57,16 +127,62 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       ref: function ref(node) {
         itemsRef.current["" + d.tabId] = node;
       },
+      itemRef: itemsRef.current["" + d.tabId],
+      index: index,
       active: activeTab === d.tabId,
       prefixCls: prefixCls,
-      onTabClick: onClickTab
+      draggable: draggable,
+      onTabClick: onClickTab,
+      editable: editable,
+      onDelete: onDelete,
+      onDragStart: onDragStart,
+      onDragOver: onDragOver,
+      onDrop: onDrop,
+      onDragEnd: onDragEnd,
+      direction: direction
     }));
-  }), /*#__PURE__*/React.createElement(TabInk, {
+  }), type === 'default' && /*#__PURE__*/React.createElement(TabInk, {
+    translate: direction === 'horizontal' ? translateX : translateY,
     prefixCls: prefixCls,
-    direction: "horizontal",
+    direction: direction,
     tabListRef: innerRef,
     itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTab]
-  })));
+  }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__add-btn",
+    onClick: function onClick() {
+      if (scrollRef && innerRef) {
+        var canScroll = scrollRef.clientWidth - innerRef.clientWidth + translateX;
+        var moveWidth = 0;
+
+        if (canScroll >= innerRef.clientWidth) {
+          moveWidth = innerRef.clientWidth;
+        } else {
+          moveWidth = canScroll;
+        }
+
+        setTranslateX(translateX - moveWidth);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(RightOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__add-btn",
+    onClick: function onClick() {
+      if (scrollRef && innerRef) {
+        var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
+        var moveWidth = 0;
+
+        if (canScroll >= innerRef.clientHeight) {
+          moveWidth = innerRef.clientHeight;
+        } else {
+          moveWidth = canScroll;
+        }
+
+        setTranslateY(translateY - moveWidth);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(DownOutlined, null)), editable && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__add-btn",
+    onClick: onAdd
+  }, /*#__PURE__*/React.createElement(PlusOutlined, null)));
 });
 
 if (__DEV__) {

package/lib/esm/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../src/TabList.tsx"],"sourcesContent":[null],"names":["TabList","forwardRef","ref","data","className","style","activeId","defaultActiveId","onChange","onTabClick","prefixCls","useUncontrolledState","tabId","activeTab","setActiveTab","useState","innerRef","setInnerRef","itemsRef","useRef","onClickTab","useCallback","key","React","cx","map","d","index","TabItem","node","current","active","TabInk","direction","tabListRef","itemRef","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;IAQaA,OAAO,gBAAGC,UAAU,CAC/B,cAAA,EAAyFC,GAAzF;MAAGC,YAAAA;MAAMC,iBAAAA;MAAWC,aAAAA;MAAOC,gBAAAA;MAAUC,uBAAAA;MAAiBC,gBAAAA;MAAUC,kBAAAA;MAAYC,iBAAAA;;;;8BACxCC,oBAAoB,CACpDJ,eAAe,KAAI,MAAAJ,IAAI,CAAC,CAAD,CAAJ,UAAA,iBAAA,SAAA,MAASS,KAAb,CADqC,EAEpDN,QAFoD,EAGpDE,QAHoD;MAA/CK,SAAP;MAAkBC,YAAlB;;kBAMgCC,QAAQ,CAAwB,IAAxB;MAAjCC,QAAP;MAAiBC,WAAjB;;MACMC,QAAQ,GAAGC,MAAM,CAAqC,EAArC;MAEjBC,UAAU,GAAGC,WAAW,CAC5B,UAACC,GAAD;QACMb,YAAY;AACdA,MAAAA,UAAU,CAACa,GAAD,CAAVb;;;QAEEa,GAAG,KAAKT,SAARS,IAAqBR,cAAc;AACrCA,MAAAA,YAAY,CAACQ,GAAD,CAAZR;;AANwB,GAAA,EAS5B,CAACD,SAAD,EAAYJ,UAAZ,EAAwBK,YAAxB,CAT4B;sBAY5BS,mBAAAA,MAAAA;AAAKlB,IAAAA,KAAK,EAAEA;AAAOD,IAAAA,SAAS,EAAEoB,EAAE,CAAId,SAAJ,WAAA,EAAuBN,SAAvB;AAAmCF,IAAAA,GAAG,EAAEA;GAAxEqB,eACEA,mBAAAA,MAAAA;AAAKnB,IAAAA,SAAS,EAAEoB,EAAE,CAAId,SAAJ,kBAAA;AAA+BR,IAAAA,GAAG,EAAEe;GAAtDM,EACGpB,IAAI,CAACsB,GAALtB,CAAS,UAACuB,CAAD,EAAIC,KAAJ;wBACRJ,mBAAAA,CAACK,OAADL;AACED,MAAAA,GAAG,EAAEK;OACDD;AACJxB,MAAAA,GAAG,EAAE,YAAA,CAAC2B,IAAD;AACHX,QAAAA,QAAQ,CAACY,OAATZ,MAAoBQ,CAAC,CAACd,KAAtBM,IAAiCW,IAAjCX;;AAEFa,MAAAA,MAAM,EAAElB,SAAS,KAAKa,CAAC,CAACd;AACxBF,MAAAA,SAAS,EAAEA;AACXD,MAAAA,UAAU,EAAEW;MARdG;AADD,GAAApB,CADHoB,eAaEA,mBAAAA,CAACS,MAADT;AACEb,IAAAA,SAAS,EAAEA;AACXuB,IAAAA,SAAS,EAAC;AACVC,IAAAA,UAAU,EAAElB;AACZmB,IAAAA,OAAO,EAAE,MAAAjB,QAAQ,CAACY,OAAT,UAAA,iBAAA,SAAA,MAAmBjB;GAJ9BU,CAbFA,CADFA;AAvB2B,CAAA;;AAkEjC,IAAIa,OAAJ,EAAa;AACXpC,EAAAA,OAAO,CAACqC,WAARrC,GAAsB,SAAtBA;;;"}
+{"version":3,"file":"TabList.js","sources":["../../src/TabList.tsx"],"sourcesContent":[null],"names":["TabList","forwardRef","ref","data","className","style","activeId","defaultActiveId","onChange","onTabClick","prefixCls","direction","editable","onAdd","onDelete","draggable","onDragStart","onDragOver","onDrop","onDragEnd","type","useUncontrolledState","tabId","activeTab","setActiveTab","useState","innerRef","setInnerRef","scrollRef","setScrollRef","translateX","setTranslateX","translateY","setTranslateY","itemsRef","useRef","showScrollBtn","useMemo","clientWidth","clientHeight","onClickTab","useCallback","key","React","cx","onClick","canScroll","moveWidth","LeftOutlined","UpOutlined","transform","map","d","index","TabItem","node","current","itemRef","active","TabInk","translate","tabListRef","RightOutlined","DownOutlined","PlusOutlined","__DEV__","displayName"],"mappings":"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"}

package/lib/esm/Tabs.js

@@ -21,6 +21,8 @@ var _prefix = getPrefixCls(_role);
 
 
 var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _cx;
+
   var _b;
 
   var _a$prefixCls = _a.prefixCls,
@@ -33,9 +35,23 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
       activeId = _a.activeId,
       onChange = _a.onChange,
       onTabClick = _a.onTabClick,
-      rest = __rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick"]);
+      editable = _a.editable,
+      _a$direction = _a.direction,
+      direction = _a$direction === void 0 ? 'horizontal' : _a$direction,
+      onAdd = _a.onAdd,
+      onDelete = _a.onDelete,
+      _a$draggable = _a.draggable,
+      draggable = _a$draggable === void 0 ? false : _a$draggable,
+      onDragStart = _a.onDragStart,
+      onDragOver = _a.onDragOver,
+      onDragEnd = _a.onDragEnd,
+      onDrop = _a.onDrop,
+      style = _a.style,
+      _a$type = _a.type,
+      type = _a$type === void 0 ? 'default' : _a$type,
+      rest = __rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "direction", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type"]);
 
-  var cls = cx(prefixCls, className);
+  var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--vertical"] = direction === 'vertical', _cx[prefixCls + "--" + type] = type, _cx));
   var tabList = useMemo(function () {
     var list = [];
     React.Children.map(children, function (child) {
@@ -74,17 +90,27 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
     role: role,
-    className: cls
+    className: cls,
+    style: style
   }, rest), /*#__PURE__*/React.createElement(TabList, {
     prefixCls: prefixCls,
     data: tabList,
     activeId: activeId,
     onChange: _onChange,
-    onTabClick: onTabClick
+    onTabClick: onTabClick,
+    direction: direction,
+    editable: editable,
+    onAdd: onAdd,
+    onDelete: onDelete,
+    draggable: draggable,
+    onDragEnd: onDragEnd,
+    onDragOver: onDragOver,
+    onDrop: onDrop,
+    type: type,
+    onDragStart: onDragStart
   }), /*#__PURE__*/React.createElement("div", {
     className: _prefix + "__content"
   }, React.Children.map(children, function (child) {
-    console.log(child, child === null || child === void 0 ? void 0 : child.props.tabId, activeId);
     return child && /*#__PURE__*/React.cloneElement(child, {
       active: activePane === child.props.tabId
     });

package/lib/esm/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","Tabs","forwardRef","_a","ref","prefixCls","role","className","children","defaultActiveId","activeId","onChange","onTabClick","rest","cls","cx","tabList","useMemo","list","React","Children","map","child","props","tabTitle","tabId","tabDesc","closeable","disabled","item","push","useState","activePane","setActivePane","_onChange","useCallback","TabList","data","console","log","cloneElement","active","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;AAMA,IAAMA,KAAK,GAAG,MAAd;;AACA,IAAMC,OAAO,GAAGC,YAAY,CAACF,KAAD,CAA5B;AAEA;;;;;IAGaG,IAAI,gBAAGC,UAAU,CAC5B,UACEC,EADF,EAYEC,GAZF;;;wBAEIC;MAAAA,sCAAYN;mBACZO;MAAAA,4BAAOR;MACPS,eAAAA;MACAC,cAAAA;MACAC,qBAAAA;MACAC,cAAAA;MACAC,cAAAA;MACAC,gBAAAA;MACGC,kBATL,YAAA,QAAA,aAAA,YAAA,mBAAA,YAAA,YAAA,cAAA;;MAaMC,GAAG,GAAGC,EAAE,CAACV,SAAD,EAAYE,SAAZ;MAERS,OAAO,GAAGC,OAAO,CAAC;QAChBC,IAAI,GAAmB;AAC7BC,IAAAA,KAAK,CAACC,QAAND,CAAeE,GAAfF,CAAmBX,QAAnBW,EAA6B,UAACG,KAAD;UACvBA,OAAO;2BACiDA,KAAK,CAACC;YAAxDC,QAAR,gBAAQA;YAAUC,KAAlB,gBAAkBA;YAAOC,OAAzB,gBAAyBA;YAASC,SAAlC,gBAAkCA;YAAWC,QAA7C,gBAA6CA;YACvCC,IAAI,GAAG;AAAEL,UAAAA,QAAQ,EAARA,QAAF;AAAYC,UAAAA,KAAK,EAALA,KAAZ;AAAmBC,UAAAA,OAAO,EAAPA,OAAnB;AAA4BC,UAAAA,SAAS,EAATA,SAA5B;AAAuCC,UAAAA,QAAQ,EAARA;AAAvC;AAEbV,QAAAA,IAAI,CAACY,IAALZ,CAAUW,IAAVX;;AALJ,KAAAC;WAQOD;AAVc,GAAA,EAWpB,CAACV,QAAD,CAXoB;;kBAaauB,QAAQ,CAACrB,QAAQ,IAAID,eAAZC,KAA+B,MAAAM,OAAO,CAAC,CAAD,CAAP,UAAA,iBAAA,SAAA,MAAYS,KAA3Cf,CAAD;MAArCsB,UAAP;MAAmBC,aAAnB;;MAEMC,SAAS,GAAGC,WAAW,CAC3B,UAACV,KAAD;QACMd,UAAU;AACZA,MAAAA,QAAQ,CAACc,KAAD,CAARd;;;AAEFsB,IAAAA,aAAa,CAACR,KAAD,CAAbQ;AALyB,GAAA,EAO3B,CAACtB,QAAD,CAP2B;;sBAW3BQ,mBAAAA,MAAAA;AAAKf,IAAAA,GAAG,EAAEA;AAAKE,IAAAA,IAAI,EAAEA;AAAMC,IAAAA,SAAS,EAAEO;KAASD,KAA/CM,eACEA,mBAAAA,CAACiB,OAADjB;AACEd,IAAAA,SAAS,EAAEA;AACXgC,IAAAA,IAAI,EAAErB;AACNN,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,QAAQ,EAAEuB;AACVtB,IAAAA,UAAU,EAAEA;GALdO,CADFA,eAQEA,mBAAAA,MAAAA;AAAKZ,IAAAA,SAAS,EAAKR,OAAL;GAAdoB,EACGA,KAAK,CAACC,QAAND,CAAeE,GAAfF,CAAmBX,QAAnBW,EAA6B,UAACG,KAAD;AAC5BgB,IAAAA,OAAO,CAACC,GAARD,CAAYhB,KAAZgB,EAAmBhB,KAAK,SAALA,IAAAA,KAAK,WAALA,SAAAA,GAAAA,KAAK,CAAEC,KAAPD,CAAaG,KAAhCa,EAAuC5B,QAAvC4B;WAEEhB,KAAK,iBACLH,KAAK,CAACqB,YAANrB,CAAmBG,KAAnBH,EAA0B;AACxBsB,MAAAA,MAAM,EAAET,UAAU,KAAKV,KAAK,CAACC,KAAND,CAAYG;AADX,KAA1BN;AAJH,GAAAA,CADHA,CARFA;AA3CwB,CAAA;;AAkH9B,IAAIuB,OAAJ,EAAa;AACXzC,EAAAA,IAAI,CAAC0C,WAAL1C,GAAmB,MAAnBA;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","Tabs","forwardRef","_a","ref","prefixCls","role","className","children","defaultActiveId","activeId","onChange","onTabClick","editable","direction","onAdd","onDelete","draggable","onDragStart","onDragOver","onDragEnd","onDrop","style","type","rest","cls","cx","tabList","useMemo","list","React","Children","map","child","props","tabTitle","tabId","tabDesc","closeable","disabled","item","push","useState","activePane","setActivePane","_onChange","useCallback","TabList","data","cloneElement","active","__DEV__","displayName"],"mappings":"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"}

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: #000;\n  color: var(--hi-v4-color-static-black, #000);\n  margin-left: 4px; }\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: #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  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n    margin: 0 4px 0 0;\n    padding: 4px 8px;\n    background-color: #ebedf0;\n    background-color: var(--hi-v4-color-gray-200, #ebedf0);\n    border-radius: 4px 4px 0 0;\n    border: 1px solid #dfe2e8;\n    border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8); }\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      border-bottom: 2px solid #fff;\n      border-bottom: 2px solid var(--hi-v4-color-static-white, #fff); }\n.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: #ebedf0;\n    background-color: var(--hi-v4-color-gray-200, #ebedf0);\n    display: block; }\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 0 4px 0;\n      padding: 4px 8px;\n      background-color: #ebedf0;\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      border-radius: 4px 0 0  4px;\n      border: 1px solid #dfe2e8;\n      border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8); }\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        border-right: 1px solid #fff;\n        border-right: 1px solid var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list::before {\n      content: '';\n      clear: both;\n      position: absolute;\n      top: 0;\n      right: 0;\n      left: auto;\n      height: 100%;\n      width: 1px;\n      background-color: #ebedf0;\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      display: block; }\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: 22px;\n    padding: 0 8px;\n    margin: 8px 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 solid #237ffa;\n      border-top: 1px solid 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 solid #237ffa;\n      border-bottom: 1px solid 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    right: 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: 22px;\n  padding: 8px 0;\n  margin: 0 16px;\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 solid #237ffa;\n    border-left: 1px solid var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--next {\n    border-right: 1px solid #237ffa;\n    border-right: 1px solid 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  -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,22 @@ import React from 'react';
 import { TabPaneProps } from './TabPane';
 interface TabItemProps extends TabPaneProps {
     active: boolean;
+    draggable?: boolean;
     onTabClick: (key: string) => void;
     prefixCls?: string;
+    editable?: boolean;
+    onDelete?: (deletedNode: TabPaneProps, index: number) => void;
+    index: number;
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>, dragNode: TabPaneProps) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>, dragNode: TabPaneProps) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, dropNode, direction, }: {
+        dragNode: TabPaneProps;
+        dropNode: TabPaneProps;
+        direction: 'prev' | 'next' | null;
+    }) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>, dragNode: TabPaneProps) => void;
+    itemRef: HTMLDivElement | null;
+    direction: 'horizontal' | 'vertical';
 }
 export declare const TabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement | null>>;
 export {};

package/lib/types/TabList.d.ts

@@ -6,6 +6,7 @@ export interface TabListProps {
     className?: string;
     prefixCls?: string;
     data: TabPaneProps[];
+    direction: 'horizontal' | 'vertical';
     onChange?: (tabId: string) => void;
     onTabClick?: (tabId: string) => void;
     /**
@@ -16,4 +17,23 @@ export interface TabListProps {
      * 高亮id
      */
     activeId?: string;
+    editable?: boolean;
+    draggable?: boolean;
+    type?: 'desc' | 'card' | 'button' | 'default';
+    /**
+     * 节点增加时触发
+     */
+    onAdd?: () => void;
+    /**
+     * 节点删除时时触发
+     */
+    onDelete?: (deletedNode: TabPaneProps, index: number) => void;
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, dropNode, direction, }: {
+        dragNode: TabPaneProps;
+        dropNode: TabPaneProps;
+        direction: string | null;
+    }) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
 }

package/lib/types/Tabs.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TabPaneProps } from './TabPane';
 /**
  * TODO: What is Tabs
  */
@@ -40,6 +41,14 @@ export interface TabsProps {
      * 高亮id
      */
     activeId?: string;
+    /**
+     * 布局方向
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * 布局类型
+     */
+    type?: 'desc' | 'card' | 'button' | 'default';
     /**
      * `activeId` 改变的回调
      */
@@ -48,4 +57,20 @@ export interface TabsProps {
      * 标签点击触发回调
      */
     onTabClick?: (tabId: string) => void;
+    /**
+     * 节点增加时触发
+     */
+    onAdd?: () => void;
+    /**
+     * 节点删除时时触发
+     */
+    onDelete?: (deletedNode: TabPaneProps, index: number) => void;
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, dropNode, direction, }: {
+        dragNode: TabPaneProps;
+        dropNode: TabPaneProps;
+        direction: string | null;
+    }) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tabs",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.4",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -44,18 +44,19 @@
   },
   "dependencies": {
     "@hi-ui/classname": "^4.0.0-alpha.0",
-    "@hi-ui/core-css": "^4.0.0-alpha.5",
+    "@hi-ui/core-css": "^4.0.0-alpha.6",
     "@hi-ui/env": "^4.0.0-alpha.0",
-    "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.7"
+    "@hi-ui/icons": "^4.0.0-alpha.13",
+    "@hi-ui/use-uncontrolled-state": "^4.0.0-alpha.8"
   },
   "peerDependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@hi-ui/hi-build": "^4.0.0-alpha.0",
+    "@hi-ui/hi-build": "^4.0.0-alpha.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "a3b15b79bb08d15f45212c851a1c93ba5bf0d7c0"
+  "gitHead": "689ef7c6b19089bf0aa818978c70da1e27714e6b"
 }