@hi-ui/tabs 4.1.6 → 5.0.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @hi-ui/tabs
 
+## 5.0.0-alpha.0
+
+### Major Changes
+
+- 1b05b44a4: feat: 组件的 package.json 中的 exports 统一加上 types 配置 (5.0)
+
+### Minor Changes
+
+- abebb5eed: feat(tabs): 支持拖拽 (5.0)
+- 58bef969c: <br>
+  - feat(tabs): 增加 size 参数 (5.0)
+  - feat(tabs): 修改标签选中下标样式 (5.0)
+- 1517a3349: feat(tabs): 支持编辑功能和设置最大标题宽度 (5.0)
+- 9f2b6bab4: feat(tabs): add editRender api (5.0)
+- 5de7a848b: feat(tabs): 增加 showDivider 参数 (5.0)
+
+### Patch Changes
+
+- 36bb992d3: style: 修改 UI 问题 (5.0)
+- 61d132802: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
+- b7ad460d8: style: 修改 UI (5.0)
+- Updated dependencies [7bda04e64]
+- Updated dependencies [77ed66eac]
+- Updated dependencies [ddd2acc79]
+- Updated dependencies [5de7a848b]
+- Updated dependencies [1b05b44a4]
+- Updated dependencies [0cd15438e]
+- Updated dependencies [eb69f0baa]
+- Updated dependencies [a01771e8d]
+- Updated dependencies [5de7a848b]
+- Updated dependencies [77ed66eac]
+- Updated dependencies [632dbda3a]
+- Updated dependencies [1b51c1bbe]
+- Updated dependencies [61d132802]
+- Updated dependencies [6ebf40f96]
+- Updated dependencies [6eac4b78b]
+- Updated dependencies [c125e4c48]
+  - @hi-ui/input@5.0.0-alpha.0
+  - @hi-ui/tooltip@5.0.0-alpha.0
+  - @hi-ui/core@5.0.0-alpha.0
+  - @hi-ui/use-latest@5.0.0-alpha.0
+  - @hi-ui/use-uncontrolled-state@5.0.0-alpha.0
+  - @hi-ui/use-unmount-effect@5.0.0-alpha.0
+  - @hi-ui/icons@5.0.0-alpha.0
+  - @hi-ui/icon-button@5.0.0-alpha.0
+  - @hi-ui/classname@5.0.0-alpha.0
+  - @hi-ui/env@5.0.0-alpha.0
+  - @hi-ui/react-utils@5.0.0-alpha.0
+  - @hi-ui/type-assertion@5.0.0-alpha.0
+
+## 4.2.0
+
+### Minor Changes
+
+- [#3211](https://github.com/XiaoMi/hiui/pull/3211) [`7e21457`](https://github.com/XiaoMi/hiui/commit/7e2145754dcc7a94d0f8219ee720657a0693acc3) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(tabs): 增加 TabPane 组件的 preload 属性以支持内容预加载 (#3210)
+
 ## 4.1.6
 
 ### Patch Changes

package/lib/cjs/TabInk.js

@@ -29,7 +29,8 @@ var TabInk = function TabInk(_ref) {
     activeItemElement = _ref.activeItemElement,
     activeTabId = _ref.activeTabId,
     getTabOffset = _ref.getTabOffset,
-    showHorizontal = _ref.showHorizontal;
+    showHorizontal = _ref.showHorizontal,
+    containerElement = _ref.containerElement;
   var inkRef = React.useRef(null);
   var setTabLnkPositionStyle = React.useCallback(function () {
     if (!inkRef.current) return;
@@ -75,6 +76,14 @@ var TabInk = function TabInk(_ref) {
     },
     onResize: setTabLnkPositionStyle
   });
+  index.useResizeObserver({
+    element: containerElement,
+    getSize: function getSize(element) {
+      var itemRect = element.getBoundingClientRect();
+      return showHorizontal ? itemRect.width : itemRect.height;
+    },
+    onResize: setTabLnkPositionStyle
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classname.cx(prefixCls + "__ink", (_cx = {}, _cx[prefixCls + "__ink--disabled"] = disabled, _cx)),
     ref: inkRef

package/lib/cjs/TabItem.js

@@ -13,28 +13,37 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var tslib = require('tslib');
 var React = require('react');
 var classname = require('@hi-ui/classname');
 var env = require('@hi-ui/env');
 var icons = require('@hi-ui/icons');
+var input = require('@hi-ui/input');
+var tooltip = require('@hi-ui/tooltip');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
   };
 }
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultCompat(_regeneratorRuntime);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _cx;
   var className = _ref.className,
     style = _ref.style,
     disabled = _ref.disabled,
-    tabTitle = _ref.tabTitle,
+    tabTitleProp = _ref.tabTitle,
     tabDesc = _ref.tabDesc,
     prefixCls = _ref.prefixCls,
     tabId = _ref.tabId,
     onTabClick = _ref.onTabClick,
     active = _ref.active,
     editable = _ref.editable,
+    editingProp = _ref.editing,
+    editRender = _ref.editRender,
+    onEdit = _ref.onEdit,
+    onCopy = _ref.onCopy,
     onDelete = _ref.onDelete,
     index = _ref.index,
     _onDragStart = _ref.onDragStart,
@@ -48,25 +57,119 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$closeable = _ref.closeable,
     closeable = _ref$closeable === void 0 ? true : _ref$closeable,
     _ref$direction = _ref.direction,
-    layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+    layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+    maxTitleWidth = _ref.maxTitleWidth;
+  var _a, _b;
   var _useState = React.useState(null),
     dragId = _useState[0],
     setDragId = _useState[1];
   var _useState2 = React.useState(null),
     direction = _useState2[0],
     setDirection = _useState2[1];
+  var _useState3 = React.useState(editingProp),
+    editing = _useState3[0],
+    setEditing = _useState3[1];
+  var _useState4 = React.useState(tabTitleProp),
+    tabTitle = _useState4[0],
+    setTabTitle = _useState4[1];
+  var titleRef = React.useRef(null);
+  React.useEffect(function () {
+    setEditing(editingProp);
+  }, [editingProp]);
+  React.useEffect(function () {
+    setTabTitle(tabTitleProp);
+  }, [tabTitleProp]);
   var _onClick = React.useCallback(function (e) {
     if (onTabClick) {
       onTabClick(tabId, e);
     }
   }, [onTabClick, tabId]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  var handleEditDone = React.useCallback(function (evt) {
+    return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() {
+      var value, newTitle, result;
+      return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              value = evt.target.value;
+              newTitle = value;
+              if (!value) {
+                newTitle = tabTitleProp;
+              } else {
+                newTitle = value;
+              }
+              setTabTitle(newTitle);
+              _context.next = 6;
+              return onEdit === null || onEdit === void 0 ? void 0 : onEdit(newTitle);
+            case 6:
+              result = _context.sent;
+              if (!(result === false)) {
+                _context.next = 9;
+                break;
+              }
+              return _context.abrupt("return");
+            case 9:
+              setEditing(false);
+              onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tabId, evt);
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  }, [onEdit, onTabClick, tabId, tabTitleProp]);
+  var renderEditor = React.useMemo(function () {
+    if (editable) {
+      if (editRender && active) {
+        return editRender({
+          tabId: tabId,
+          tabTitle: tabTitle
+        }, index, {
+          copy: function copy(targetIndex) {
+            return onCopy === null || onCopy === void 0 ? void 0 : onCopy(targetIndex);
+          },
+          edit: function edit() {
+            return setEditing(true);
+          },
+          "delete": function _delete() {
+            return onDelete === null || onDelete === void 0 ? void 0 : onDelete({
+              tabId: tabId,
+              tabTitle: tabTitle
+            }, {});
+          }
+        });
+      }
+      if (closeable && !editRender) {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
+          className: prefixCls + "__close-btn",
+          onClick: function onClick(evt) {
+            evt.stopPropagation();
+            if (onDelete) {
+              onDelete({
+                tabId: tabId,
+                tabTitle: tabTitle
+              }, evt);
+            }
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null));
+      }
+    }
+    return null;
+  }, [active, closeable, editRender, editable, index, onCopy, onDelete, prefixCls, tabId, tabTitle]);
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     style: style,
     className: classname.cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx[prefixCls + "__item--disabled"] = disabled, _cx[prefixCls + "__item--" + direction] = direction, _cx)),
     ref: ref,
     draggable: draggable,
     tabIndex: disabled ? 0 : -1,
-    onClick: disabled ? undefined : _onClick,
+    onClick: disabled ? undefined : _onClick
+  }, editable ? {
+    onDoubleClick: function onDoubleClick(e) {
+      e.stopPropagation();
+      setEditing(true);
+    }
+  } : {}, {
     onDragStart: function onDragStart(e) {
       e.stopPropagation();
       e.dataTransfer.setData('tab', JSON.stringify({
@@ -154,22 +257,32 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         });
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: prefixCls + "-item__title"
-  }, tabTitle), type === 'desc' && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: prefixCls + "-item__desc"
-  }, tabDesc), editable && closeable && ( /*#__PURE__*/React__default["default"].createElement("span", {
-    className: prefixCls + "__close-btn",
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      if (onDelete) {
-        onDelete({
-          tabId: tabId,
-          tabTitle: tabTitle
-        }, index);
+  }), editing ? ( /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__edit-input"
+  }, /*#__PURE__*/React__default["default"].createElement(input.Input, {
+    value: tabTitle,
+    autoFocus: true,
+    onBlur: handleEditDone,
+    onKeyDown: function onKeyDown(evt) {
+      if (evt.key === 'Enter') {
+        handleEditDone(evt);
       }
+    },
+    onChange: function onChange(e) {
+      setTabTitle(e.target.value);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null))));
+  }))) : ( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(tooltip.Tooltip, {
+    title: tabTitle,
+    disabled: !maxTitleWidth || ((_b = (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0) < maxTitleWidth
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    ref: titleRef,
+    className: prefixCls + "-item__title",
+    style: {
+      maxWidth: maxTitleWidth
+    }
+  }, tabTitle)), type === 'desc' && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: prefixCls + "-item__desc"
+  }, tabDesc), renderEditor)));
 });
 if (env.__DEV__) {
   TabItem.displayName = 'TabItem';

package/lib/cjs/TabList.js

@@ -13,6 +13,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var tslib = require('tslib');
 var React = require('react');
 var env = require('@hi-ui/env');
@@ -26,16 +27,19 @@ var iconButton = require('@hi-ui/icon-button');
 var index = require('./hooks/index.js');
 var useLatest = require('@hi-ui/use-latest');
 var index$1 = require('./utils/index.js');
+var input = require('@hi-ui/input');
+var index$2 = require('./hooks/use-id/lib/esm/index.js');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
   };
 }
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultCompat(_regeneratorRuntime);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var _role = 'tabs';
 var _prefix = classname.getPrefixCls(_role);
 var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _cx;
+  var _cx, _cx2, _cx3, _cx4;
   var _b;
   var data = _a.data,
     className = _a.className,
@@ -50,8 +54,12 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _a$placement = _a.placement,
     placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
     editable = _a.editable,
+    editRender = _a.editRender,
     onAdd = _a.onAdd,
+    onAdded = _a.onAdded,
     onDelete = _a.onDelete,
+    onEdit = _a.onEdit,
+    onCopy = _a.onCopy,
     draggable = _a.draggable,
     onDragStart = _a.onDragStart,
     onDragOver = _a.onDragOver,
@@ -59,8 +67,12 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onDragEnd = _a.onDragEnd,
     _a$type = _a.type,
     type = _a$type === void 0 ? 'line' : _a$type,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? 'md' : _a$size,
+    showDivider = _a.showDivider,
     extra = _a.extra,
-    rest = tslib.__rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "placement", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
+    maxTabTitleWidth = _a.maxTabTitleWidth,
+    rest = tslib.__rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "placement", "editable", "editRender", "onAdd", "onAdded", "onDelete", "onEdit", "onCopy", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "size", "showDivider", "extra", "maxTabTitleWidth"]);
   var direction = (_b = placement !== null && placement !== void 0 ? placement : directionProp) !== null && _b !== void 0 ? _b : 'horizontal';
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
       if (typeAssertion.isUndef(defaultActiveId)) {
@@ -174,13 +186,135 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     setActiveTabId(tabId);
     syncScrollPosition(tabId);
   });
+  var _useState6 = React.useState(false),
+    adding = _useState6[0],
+    setAdding = _useState6[1];
+  var _useState7 = React.useState(data),
+    showData = _useState7[0],
+    setShowData = _useState7[1];
+  var addInputRef = React.useRef(null);
+  React.useEffect(function () {
+    setShowData(data);
+  }, [data]);
+  var handleAdd = useLatest.useLatestCallback(function () {
+    onAdd === null || onAdd === void 0 ? void 0 : onAdd();
+    setAdding(true);
+  });
+  var handleAddDone = useLatest.useLatestCallback(function (evt) {
+    return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() {
+      var newTabTitle, newTabId, newTab, result;
+      return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              newTabTitle = evt.target.value;
+              if (newTabTitle) {
+                _context.next = 4;
+                break;
+              }
+              setAdding(false);
+              return _context.abrupt("return");
+            case 4:
+              newTabId = index$2.uuid();
+              newTab = {
+                tabId: newTabId,
+                tabTitle: newTabTitle
+              };
+              _context.next = 8;
+              return onAdded === null || onAdded === void 0 ? void 0 : onAdded(newTab);
+            case 8:
+              result = _context.sent;
+              if (!(result === false)) {
+                _context.next = 11;
+                break;
+              }
+              return _context.abrupt("return");
+            case 11:
+              setActiveTabId(newTabId);
+              setAdding(false);
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  });
+  var handleEdit = useLatest.useLatestCallback(function (value, item) {
+    return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2() {
+      var result;
+      return _regeneratorRuntime__default["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return onEdit === null || onEdit === void 0 ? void 0 : onEdit(value, item);
+            case 2:
+              result = _context2.sent;
+              if (!(result === false)) {
+                _context2.next = 5;
+                break;
+              }
+              return _context2.abrupt("return", false);
+            case 5:
+              syncScrollPosition(activeTabId);
+              return _context2.abrupt("return", true);
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+  });
+  var handleDelete = useLatest.useLatestCallback(function (deletedNode, evt) {
+    return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee3() {
+      var result, nextTabId;
+      return _regeneratorRuntime__default["default"].wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return onDelete === null || onDelete === void 0 ? void 0 : onDelete(deletedNode, evt);
+            case 2:
+              result = _context3.sent;
+              if (!(result === false)) {
+                _context3.next = 5;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 5:
+              nextTabId = index$1.getNextTabId(data, deletedNode.tabId === activeTabId ? activeTabId : deletedNode.tabId);
+              nextTabId && setActiveTabId(nextTabId);
+              nextTabId && syncScrollPosition(nextTabId);
+            case 8:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+  });
+  var handleCopy = useLatest.useLatestCallback(function (targetIndex) {
+    var currentTab = showData.find(function (item) {
+      return item.tabId === activeTabId;
+    });
+    if (!currentTab) return;
+    var copiedTab = {
+      tabId: currentTab.tabId + "-" + index$2.uuid(),
+      tabTitle: currentTab.tabTitle
+    };
+    var insertIndex = targetIndex !== null && targetIndex !== void 0 ? targetIndex : showData.length;
+    var newItems = [].concat(showData.slice(0, insertIndex), [copiedTab], showData.slice(insertIndex));
+    onCopy === null || onCopy === void 0 ? void 0 : onCopy(currentTab, copiedTab, newItems);
+  });
   React.useEffect(function () {
     // activeId 受控模式下改变后，同步更新滚动位置
     initScrollPosition(activeId);
   }, [activeId, initScrollPosition]);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     style: style,
-    className: classname.cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
+    className: classname.cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--type-" + type] = type, _cx), (_cx2 = {}, _cx2[prefixCls + "__list--size-" + size] = size, _cx2), (_cx3 = {}, _cx3[prefixCls + "__list--show-divider"] = showDivider, _cx3), (_cx4 = {}, _cx4[prefixCls + "__list--editable"] = editable, _cx4), className),
     ref: ref
   }, rest), showScrollBtn ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
     className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
@@ -207,9 +341,9 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     style: showScrollBtn ? {
       transform: direction === 'horizontal' ? "translateX(" + translatePos + "px)" : "translateY(" + translatePos + "px)"
     } : undefined
-  }, data.map(function (item, index) {
+  }, showData.map(function (item, index) {
     return /*#__PURE__*/React__default["default"].createElement(TabItem.TabItem, Object.assign({
-      key: index
+      key: item.tabId
     }, item, {
       ref: function ref(node) {
         itemsRef.current["" + item.tabId] = node;
@@ -219,22 +353,56 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       index: index,
       active: activeTabId === item.tabId,
       prefixCls: prefixCls,
+      closeable: item.closeable !== undefined ? item.closeable && showData.length > 1 : showData.length > 1,
       draggable: draggable,
       onTabClick: onClickTab,
       editable: editable,
-      onDelete: onDelete,
+      editRender: editRender,
+      onCopy: handleCopy,
+      onEdit: function onEdit(value) {
+        return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee4() {
+          return _regeneratorRuntime__default["default"].wrap(function _callee4$(_context4) {
+            while (1) {
+              switch (_context4.prev = _context4.next) {
+                case 0:
+                  _context4.next = 2;
+                  return handleEdit(value, item);
+                case 2:
+                  return _context4.abrupt("return", _context4.sent);
+                case 3:
+                case "end":
+                  return _context4.stop();
+              }
+            }
+          }, _callee4);
+        }));
+      },
+      onDelete: handleDelete,
       onDragStart: onDragStart,
       onDragOver: onDragOver,
       onDrop: onDrop,
       onDragEnd: onDragEnd,
-      direction: direction
+      direction: direction,
+      maxTitleWidth: maxTabTitleWidth
     }));
-  }), type === 'line' && data.some(function (item) {
+  }), adding ? ( /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__add-input",
+    ref: addInputRef
+  }, /*#__PURE__*/React__default["default"].createElement(input.Input, {
+    onBlur: handleAddDone,
+    autoFocus: true,
+    onKeyDown: function onKeyDown(evt) {
+      if (evt.key === 'Enter') {
+        handleAddDone(evt);
+      }
+    }
+  }))) : null, type === 'line' && showData.some(function (item) {
     return item.tabId === activeTabId;
   }) ? ( /*#__PURE__*/React__default["default"].createElement(TabInk.TabInk, {
     prefixCls: prefixCls,
     showHorizontal: showHorizontal,
     activeItemElement: itemsRef.current[activeTabId],
+    containerElement: scrollElement,
     activeTabId: activeTabId,
     getTabOffset: getTabOffset
   })) : null)), showScrollBtn ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
@@ -254,11 +422,15 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         return prev - moveWidth;
       });
     }
-  })) : null, editable ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
+  })) : null, editable ? ( /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__add-btn-wrap"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__add-btn"
+  }, /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
+    effect: true,
     icon: /*#__PURE__*/React__default["default"].createElement(icons.PlusOutlined, null),
-    className: prefixCls + "__add-btn",
-    onClick: onAdd
-  })) : null, extra);
+    onClick: handleAdd
+  })))) : null, extra);
 });
 if (env.__DEV__) {
   TabList.displayName = 'TabList';

package/lib/cjs/TabPane.js

@@ -33,12 +33,16 @@ var TabPane = function TabPane(_a) {
     active = _a.active,
     _a$unmountOnInactive = _a.unmountOnInactive,
     unmountOnInactive = _a$unmountOnInactive === void 0 ? true : _a$unmountOnInactive,
-    rest = tslib.__rest(_a, ["children", "className", "style", "active", "unmountOnInactive"]);
+    preload = _a.preload,
+    rest = tslib.__rest(_a, ["children", "className", "style", "active", "unmountOnInactive", "preload"]);
   var htmlProps = reactUtils.filterProps(rest, omitProps);
   var _React$useState = React__default["default"].useState(false),
     isLoaded = _React$useState[0],
     setIsLoaded = _React$useState[1];
   var childrenContentMemo = React__default["default"].useMemo(function () {
+    if (preload && !active && !isLoaded) {
+      return children;
+    }
     if (!unmountOnInactive) {
       if (active && !isLoaded) {
         setIsLoaded(true);
@@ -50,10 +54,10 @@ var TabPane = function TabPane(_a) {
       return children;
     }
     return null;
-  }, [active, children, isLoaded, unmountOnInactive]);
+  }, [active, children, isLoaded, unmountOnInactive, preload]);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     style: style,
-    className: classname.cx(className, !unmountOnInactive && !active && _prefix + "--hide")
+    className: classname.cx(className, !active && (preload || !unmountOnInactive) && _prefix + "--hide")
   }, htmlProps), childrenContentMemo);
 };
 exports.TabPane = TabPane;

package/lib/cjs/Tabs.js

@@ -45,7 +45,11 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     editable = _a.editable,
     _a$placement = _a.placement,
     placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
+    editRender = _a.editRender,
+    onEdit = _a.onEdit,
+    onCopy = _a.onCopy,
     onAdd = _a.onAdd,
+    onAdded = _a.onAdded,
     onDelete = _a.onDelete,
     _a$draggable = _a.draggable,
     draggable = _a$draggable === void 0 ? false : _a$draggable,
@@ -56,8 +60,12 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     style = _a.style,
     _a$type = _a.type,
     type = _a$type === void 0 ? 'line' : _a$type,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? 'md' : _a$size,
+    showDivider = _a.showDivider,
+    maxTabTitleWidth = _a.maxTabTitleWidth,
     extra = _a.extra,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "editRender", "onEdit", "onCopy", "onAdd", "onAdded", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "size", "showDivider", "maxTabTitleWidth", "extra"]);
   var tabList = React.useMemo(function () {
     var list = [];
     React__default["default"].Children.map(children, function (child) {
@@ -102,15 +110,22 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onTabClick: onTabClick,
     placement: placement,
     editable: editable,
+    editRender: editRender,
+    onEdit: onEdit,
+    onCopy: onCopy,
     onAdd: onAdd,
+    onAdded: onAdded,
     onDelete: onDelete,
     draggable: draggable,
     onDragEnd: onDragEnd,
     onDragOver: onDragOver,
     onDrop: onDrop,
     type: type,
+    size: size,
+    showDivider: showDivider,
     onDragStart: onDragStart,
-    extra: extra
+    extra: extra,
+    maxTabTitleWidth: maxTabTitleWidth
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: _prefix + "__content"
   }, React__default["default"].Children.map(children, function (child) {