@hi-ui/tabs 5.0.0-canary.9 → 5.0.0-experimental.1

package/CHANGELOG.md

@@ -1,116 +1,106 @@
 # @hi-ui/tabs
 
-## 5.0.0-canary.9
-
-### Patch Changes
-
-- Updated dependencies [9106dca82]
-  - @hi-ui/core@5.0.0-canary.3
-  - @hi-ui/input@5.0.0-canary.10
-  - @hi-ui/icons@5.0.0-canary.3
-  - @hi-ui/icon-button@5.0.0-canary.3
-  - @hi-ui/tooltip@5.0.0-canary.4
-
-## 5.0.0-canary.8
-
-### Patch Changes
-
-- bf65028e6: style: 修改 UI (5.0)
-
-## 5.0.0-canary.7
-
-### Patch Changes
-
-- chore: rebase master (5.0)
-- Updated dependencies
-  - @hi-ui/core@5.0.0-canary.2
-  - @hi-ui/use-latest@5.0.0-canary.2
-  - @hi-ui/use-uncontrolled-state@5.0.0-canary.2
-  - @hi-ui/use-unmount-effect@5.0.0-canary.2
-  - @hi-ui/icons@5.0.0-canary.2
-  - @hi-ui/icon-button@5.0.0-canary.2
-  - @hi-ui/input@5.0.0-canary.7
-  - @hi-ui/tooltip@5.0.0-canary.3
-  - @hi-ui/classname@5.0.0-canary.2
-  - @hi-ui/env@5.0.0-canary.2
-  - @hi-ui/react-utils@5.0.0-canary.2
-  - @hi-ui/type-assertion@5.0.0-canary.2
-
-## 5.0.0-canary.6
-
-### Patch Changes
-
-- 4b09e728b: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
-- Updated dependencies [4b09e728b]
-  - @hi-ui/core@5.0.0-canary.1
-  - @hi-ui/use-latest@5.0.0-canary.1
-  - @hi-ui/use-uncontrolled-state@5.0.0-canary.1
-  - @hi-ui/use-unmount-effect@5.0.0-canary.1
-  - @hi-ui/icons@5.0.0-canary.1
-  - @hi-ui/icon-button@5.0.0-canary.1
-  - @hi-ui/input@5.0.0-canary.6
-  - @hi-ui/tooltip@5.0.0-canary.2
-  - @hi-ui/classname@5.0.0-canary.1
-  - @hi-ui/env@5.0.0-canary.1
-  - @hi-ui/react-utils@5.0.0-canary.1
-  - @hi-ui/type-assertion@5.0.0-canary.1
-
-## 5.0.0-canary.5
+## 5.0.0-experimental.1
 
 ### Minor Changes
 
-- 49d1c53c4: feat(tabs): 支持拖拽 (5.0)
-
-## 5.0.0-canary.4
-
-### Minor Changes
-
-- 2cb0427df: feat(tabs): add editRender api (5.0)
-
-## 5.0.0-canary.3
-
-### Minor Changes
-
-- affc96a20: feat(tabs): 支持编辑功能和设置最大标题宽度 (5.0)
-
-## 5.0.0-canary.2
+- 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
 
 ### Patch Changes
 
-- c3a7005b0: style: 修改 UI 问题 (5.0)
+- eb17c4697: style: 修复 UI/样式问题 (5.0)
+- Updated dependencies [7f204c892]
+- Updated dependencies [eb17c4697]
+- Updated dependencies [eb17c4697]
+- Updated dependencies [c407744fe]
+- Updated dependencies [59cef699f]
+  - @hi-ui/icons@5.0.0-experimental.1
+  - @hi-ui/core@5.0.0-experimental.1
+  - @hi-ui/button@5.0.0-experimental.1
+  - @hi-ui/icon-button@5.0.0-experimental.1
+  - @hi-ui/input@5.0.0-experimental.2
+  - @hi-ui/tooltip@5.0.0-experimental.1
+  - @hi-ui/use-merge-semantic@5.0.0-experimental.0
 
-## 5.0.0-canary.1
-
-### Minor Changes
-
-- 3903bd4ff: feat(tabs): 增加 showDivider 参数 (5.0)
-
-## 5.0.0-canary.0
+## 5.0.0-experimental.0
 
 ### Major Changes
 
-- 225ebaa51: feat: 组件的 package.json 中的 exports 统一加上 types 配置 (5.0)
+- 8f3aa85e4: feat: 组件的 package.json 中的 exports 统一加上 types 配置 (5.0)
 
 ### Minor Changes
 
-- e182621e8: <br>
+- 0b34e1c15: feat(tabs): 支持拖拽 (5.0)
+- a0fdb0ad1: <br>
   - feat(tabs): 增加 size 参数 (5.0)
   - feat(tabs): 修改标签选中下标样式 (5.0)
-
-### Patch Changes
-
-- Updated dependencies [225ebaa51]
-- Updated dependencies [428716024]
-  - @hi-ui/core@5.0.0-canary.0
-  - @hi-ui/use-latest@5.0.0-canary.0
-  - @hi-ui/use-uncontrolled-state@5.0.0-canary.0
-  - @hi-ui/use-unmount-effect@5.0.0-canary.0
-  - @hi-ui/icons@5.0.0-canary.0
-  - @hi-ui/icon-button@5.0.0-canary.0
-  - @hi-ui/classname@5.0.0-canary.0
-  - @hi-ui/env@5.0.0-canary.0
-  - @hi-ui/react-utils@5.0.0-canary.0
-  - @hi-ui/type-assertion@5.0.0-canary.0
+- 6bb4d999c: feat(tabs): 支持编辑功能和设置最大标题宽度 (5.0)
+- 120f6b15a: feat(tabs): add editRender api (5.0)
+- 9b34d99bc: feat(tabs): 增加 showDivider 参数 (5.0)
+
+### Patch Changes
+
+- 1662753e0: style: fix ui bug (5.0)
+- 8c0ee78f0: perf: 优化全局 size 配置,对于组件中没有的 size 值,取最接近的尺寸展示 (5.0)
+- be5a59325: style: 修改样式问题 (5.0)
+- 2e56529f7: styles: 主题定制功能完善&&样式变量化写法改造&&兼容 RTL (5.0)
+- e2d184e74: style: 修改 UI 问题 (5.0)
+- 33da3144e: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
+- 7f3abee55: style: fix ui bug (5.0)
+- a0f0c9d6b: style: 修改 UI 问题 (5.0)
+- 86910f5e2: style: 修改 UI (5.0)
+- Updated dependencies [6fb223e3a]
+- Updated dependencies [da2e63a14]
+- Updated dependencies [1e226cd66]
+- Updated dependencies [eea29eade]
+- Updated dependencies [1662753e0]
+- Updated dependencies [122d1d859]
+- Updated dependencies [f1ab51725]
+- Updated dependencies [41552be0b]
+- Updated dependencies [8c0ee78f0]
+- Updated dependencies [9b34d99bc]
+- Updated dependencies [8f3aa85e4]
+- Updated dependencies [f4fc0ef30]
+- Updated dependencies [c021539a3]
+- Updated dependencies [ec4c7faa2]
+- Updated dependencies [29cae09ea]
+- Updated dependencies [fd4c20bbd]
+- Updated dependencies [be5a59325]
+- Updated dependencies [71fc15e5c]
+- Updated dependencies [79ea480f3]
+- Updated dependencies [2e56529f7]
+- Updated dependencies [8a92ec660]
+- Updated dependencies [1429eced2]
+- Updated dependencies [9b34d99bc]
+- Updated dependencies [976ec929d]
+- Updated dependencies [d021b4fa6]
+- Updated dependencies [f1ab51725]
+- Updated dependencies [6dca7795c]
+- Updated dependencies [77d969c2e]
+- Updated dependencies [4006b2c8c]
+- Updated dependencies [e42e2badf]
+- Updated dependencies [33da3144e]
+- Updated dependencies [0a8cc07a7]
+- Updated dependencies [7f3abee55]
+- Updated dependencies [6fcda9bf2]
+- Updated dependencies [58ad82e94]
+- Updated dependencies [a0f0c9d6b]
+- Updated dependencies [99801c2d1]
+- Updated dependencies [86910f5e2]
+  - @hi-ui/tooltip@5.0.0-experimental.0
+  - @hi-ui/input@5.0.0-experimental.0
+  - @hi-ui/button@5.0.0-experimental.0
+  - @hi-ui/icons@5.0.0-experimental.0
+  - @hi-ui/icon-button@5.0.0-experimental.0
+  - @hi-ui/core@5.0.0-experimental.0
+  - @hi-ui/use-id@5.0.0-experimental.0
+  - @hi-ui/use-latest@5.0.0-experimental.0
+  - @hi-ui/use-uncontrolled-state@5.0.0-experimental.0
+  - @hi-ui/use-unmount-effect@5.0.0-experimental.0
+  - @hi-ui/classname@5.0.0-experimental.0
+  - @hi-ui/env@5.0.0-experimental.0
+  - @hi-ui/react-utils@5.0.0-experimental.0
+  - @hi-ui/type-assertion@5.0.0-experimental.0
 
 ## 4.2.0
 

package/lib/cjs/TabItem.js

@@ -19,6 +19,7 @@ var React = require('react');
 var classname = require('@hi-ui/classname');
 var env = require('@hi-ui/env');
 var icons = require('@hi-ui/icons');
+var button = require('@hi-ui/button');
 var input = require('@hi-ui/input');
 var tooltip = require('@hi-ui/tooltip');
 function _interopDefaultCompat(e) {
@@ -141,8 +142,12 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         });
       }
       if (closeable && !editRender) {
-        return /*#__PURE__*/React__default["default"].createElement("span", {
+        return /*#__PURE__*/React__default["default"].createElement(button.Button, {
           className: prefixCls + "__close-btn",
+          type: active ? 'primary' : 'default',
+          size: "xs",
+          appearance: "link",
+          icon: /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null),
           onClick: function onClick(evt) {
             evt.stopPropagation();
             if (onDelete) {
@@ -152,7 +157,7 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               }, evt);
             }
           }
-        }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null));
+        });
       }
     }
     return null;

package/lib/cjs/TabList.js

@@ -24,11 +24,13 @@ var TabInk = require('./TabInk.js');
 var icons = require('@hi-ui/icons');
 var typeAssertion = require('@hi-ui/type-assertion');
 var iconButton = require('@hi-ui/icon-button');
+var core = require('@hi-ui/core');
+var useMergeSemantic = require('@hi-ui/use-merge-semantic');
 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');
+var useId = require('@hi-ui/use-id');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -40,10 +42,12 @@ var _role = 'tabs';
 var _prefix = classname.getPrefixCls(_role);
 var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _cx, _cx2, _cx3, _cx4;
-  var _b;
+  var _b, _c;
   var data = _a.data,
     className = _a.className,
     style = _a.style,
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
     activeId = _a.activeId,
     defaultActiveId = _a.defaultActiveId,
     onChange = _a.onChange,
@@ -67,13 +71,36 @@ 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,
+    sizeProp = _a.size,
     showDivider = _a.showDivider,
     extra = _a.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';
+    rest = tslib.__rest(_a, ["data", "className", "style", "classNames", "styles", "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 globalContext = core.useGlobalContext();
+  var globalSize = globalContext.size;
+  var tabListConfig = globalContext.tabList;
+  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
+  if (size === 'xs') {
+    size = 'sm';
+  }
+  var direction = (_c = placement !== null && placement !== void 0 ? placement : directionProp) !== null && _c !== void 0 ? _c : 'horizontal';
+  var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
+      classNamesList: [tabListConfig === null || tabListConfig === void 0 ? void 0 : tabListConfig.classNames, classNamesProp],
+      stylesList: [tabListConfig === null || tabListConfig === void 0 ? void 0 : tabListConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          data: data,
+          placement: direction,
+          type: type,
+          size: size,
+          showDivider: showDivider,
+          editable: editable,
+          draggable: draggable
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
       if (typeAssertion.isUndef(defaultActiveId)) {
         return data[0] ? data[0].tabId : '';
@@ -215,7 +242,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
               setAdding(false);
               return _context.abrupt("return");
             case 4:
-              newTabId = index$2.uuid();
+              newTabId = useId.uuid();
               newTab = {
                 tabId: newTabId,
                 tabTitle: newTabTitle
@@ -301,7 +328,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     });
     if (!currentTab) return;
     var copiedTab = {
-      tabId: currentTab.tabId + "-" + index$2.uuid(),
+      tabId: currentTab.tabId + "-" + useId.uuid(),
       tabTitle: currentTab.tabTitle
     };
     var insertIndex = targetIndex !== null && targetIndex !== void 0 ? targetIndex : showData.length;
@@ -313,11 +340,12 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     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] = 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
+    ref: ref,
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+    className: classname.cx(prefixCls + "__list", classNames === null || classNames === void 0 ? void 0 : classNames.root, 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)
   }, rest), showScrollBtn ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
-    className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
+    className: classname.cx(showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn", classNames === null || classNames === void 0 ? void 0 : classNames.prevBtn),
+    style: styles === null || styles === void 0 ? void 0 : styles.prevBtn,
     effect: true,
     disabled: translatePos === 0,
     icon: showHorizontal ? /*#__PURE__*/React__default["default"].createElement(icons.LeftOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null),
@@ -333,14 +361,15 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       });
     }
   })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classname.cx(prefixCls + "__list--inner"),
+    className: classname.cx(prefixCls + "__list--inner", classNames === null || classNames === void 0 ? void 0 : classNames.inner),
+    style: styles === null || styles === void 0 ? void 0 : styles.inner,
     ref: setInnerElement
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classname.cx(prefixCls + "__list--scroll"),
+    className: classname.cx(prefixCls + "__list--scroll", classNames === null || classNames === void 0 ? void 0 : classNames.scroll),
     ref: setScrollElement,
-    style: showScrollBtn ? {
+    style: Object.assign(Object.assign({}, showScrollBtn ? {
       transform: direction === 'horizontal' ? "translateX(" + translatePos + "px)" : "translateY(" + translatePos + "px)"
-    } : undefined
+    } : undefined), styles === null || styles === void 0 ? void 0 : styles.scroll)
   }, showData.map(function (item, index) {
     return /*#__PURE__*/React__default["default"].createElement(TabItem.TabItem, Object.assign({
       key: item.tabId
@@ -407,7 +436,8 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     getTabOffset: getTabOffset
   })) : null)), showScrollBtn ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
     effect: true,
-    className: showHorizontal ? prefixCls + "__right-btn" : prefixCls + "__down-btn",
+    className: classname.cx(showHorizontal ? prefixCls + "__right-btn" : prefixCls + "__down-btn", classNames === null || classNames === void 0 ? void 0 : classNames.nextBtn),
+    style: styles === null || styles === void 0 ? void 0 : styles.nextBtn,
     disabled: translateBoundPos === -translatePos,
     icon: showHorizontal ? /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
     onClick: function onClick() {
@@ -423,9 +453,11 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       });
     }
   })) : null, editable ? ( /*#__PURE__*/React__default["default"].createElement("div", {
-    className: prefixCls + "__add-btn-wrap"
+    className: classname.cx(prefixCls + "__add-btn-wrap", classNames === null || classNames === void 0 ? void 0 : classNames.addBtnWrap),
+    style: styles === null || styles === void 0 ? void 0 : styles.addBtnWrap
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: prefixCls + "__add-btn"
+    className: classname.cx(prefixCls + "__add-btn", classNames === null || classNames === void 0 ? void 0 : classNames.addBtn),
+    style: styles === null || styles === void 0 ? void 0 : styles.addBtn
   }, /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
     effect: true,
     icon: /*#__PURE__*/React__default["default"].createElement(icons.PlusOutlined, null),

package/lib/cjs/Tabs.js

@@ -20,6 +20,8 @@ var env = require('@hi-ui/env');
 var TabList = require('./TabList.js');
 var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
 var typeAssertion = require('@hi-ui/type-assertion');
+var core = require('@hi-ui/core');
+var useMergeSemantic = require('@hi-ui/use-merge-semantic');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -37,6 +39,9 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _a$role = _a.role,
     role = _a$role === void 0 ? _role : _a$role,
     className = _a.className,
+    style = _a.style,
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
     children = _a.children,
     defaultActiveId = _a.defaultActiveId,
     activeId = _a.activeId,
@@ -57,7 +62,6 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onDragOver = _a.onDragOver,
     onDragEnd = _a.onDragEnd,
     onDrop = _a.onDrop,
-    style = _a.style,
     _a$type = _a.type,
     type = _a$type === void 0 ? 'line' : _a$type,
     _a$size = _a.size,
@@ -65,7 +69,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     showDivider = _a.showDivider,
     maxTabTitleWidth = _a.maxTabTitleWidth,
     extra = _a.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"]);
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "editRender", "onEdit", "onCopy", "onAdd", "onAdded", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "type", "size", "showDivider", "maxTabTitleWidth", "extra"]);
   var tabList = React.useMemo(function () {
     var list = [];
     React__default["default"].Children.map(children, function (child) {
@@ -96,12 +100,27 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }, activeId, onChange),
     activeTabId = _useUncontrolledState[0],
     setActiveTabId = _useUncontrolledState[1];
-  var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
+  var globalContext = core.useGlobalContext();
+  var tabsConfig = globalContext.tabs;
+  var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
+      classNamesList: [tabsConfig === null || tabsConfig === void 0 ? void 0 : tabsConfig.classNames, classNamesProp],
+      stylesList: [tabsConfig === null || tabsConfig === void 0 ? void 0 : tabsConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          placement: placement,
+          type: type,
+          size: size
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
+  var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     role: role,
     className: cls,
-    style: style
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, rest), /*#__PURE__*/React__default["default"].createElement(TabList.TabList, {
     prefixCls: prefixCls,
     data: tabList,
@@ -125,9 +144,12 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     showDivider: showDivider,
     onDragStart: onDragStart,
     extra: extra,
-    maxTabTitleWidth: maxTabTitleWidth
+    maxTabTitleWidth: maxTabTitleWidth,
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.list,
+    style: styles === null || styles === void 0 ? void 0 : styles.list
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: _prefix + "__content"
+    className: classname.cx(_prefix + "__content", classNames === null || classNames === void 0 ? void 0 : classNames.content),
+    style: styles === null || styles === void 0 ? void 0 : styles.content
   }, React__default["default"].Children.map(children, function (child) {
     return child ? /*#__PURE__*/React__default["default"].cloneElement(child, {
       key: child.props.tabId,

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

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = ".hi-v5-tabs__add-btn.hi-v5-icon-button {font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-tabs__add-input {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-left: var(--hi-v5-spacing-14, 28px);}.hi-v5-tabs__add-btn-wrap {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-left: var(--hi-v5-spacing-4, 8px);}.hi-v5-tabs__add-btn-wrap .hi-v5-tabs__add-btn {display: -webkit-box;display: -ms-flexbox;display: flex;height: 16px;padding-left: var(--hi-v5-spacing-4, 8px);border-left: 1px solid var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-tabs__add-input, .hi-v5-tabs__edit-input {width: 120px;margin-right: 1px;}.hi-v5-tabs__up-btn.hi-v5-icon-button, .hi-v5-tabs__down-btn.hi-v5-icon-button, .hi-v5-tabs__left-btn.hi-v5-icon-button, .hi-v5-tabs__right-btn.hi-v5-icon-button {margin: var(--hi-v5-spacing-1, 2px);}.hi-v5-tabs__close-btn {cursor: pointer;color: var(--hi-v5-color-gray-500, #91959e);margin-left: var(--hi-v5-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s;}.hi-v5-tabs__close-btn:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--type-card .hi-v5-tabs__content {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-tabs__list {position: relative;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-500, #91959e);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-tabs__list.hi-v5-tabs__list--editable {border-bottom: 1px solid var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-tabs__list--type-card .hi-v5-tabs__item {background-color: var(--hi-v5-color-gray-200, #e6e8eb);margin: 0;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-card .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-lg, 6px) 0 0 var(--hi-v5-border-radius-lg, 6px);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item {position: relative;margin: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6e8eb);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover + .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled))::after {content: \"\";position: absolute;width: 1px;height: var(--hi-v5-height-4, 16px);background-color: var(--hi-v5-color-gray-300, #dbdde0);left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):first-child::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active + .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__title {color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__desc {color: var(--hi-v5-color-gray-500, #91959e);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item {background: var(--hi-v5-color-gray-50, #f2f4f7);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 var(--hi-v5-spacing-6, 12px) 0 0;padding: var(--hi-v5-spacing-8, 16px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6e8eb);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__desc {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__list--type-line .hi-v5-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-tabs__list--type-line .hi-v5-tabs__item .hi-v5-tabs-item__title {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-sm .hi-v5-tabs__item {height: var(--hi-v5-height-10, 40px);padding: 0 0 0 var(--hi-v5-spacing-14, 28px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-md:not(.hi-v5-tabs__list--placement-vertical) .hi-v5-tabs__item {height: var(--hi-v5-height-12, 48px);padding: 0 0 0 var(--hi-v5-spacing-14, 28px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-lg .hi-v5-tabs__item {height: var(--hi-v5-height-15, 60px);padding: 0 0 0 var(--hi-v5-spacing-14, 28px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--placement-horizontal .hi-v5-tabs__item:first-child {padding-left: 0;}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--placement-horizontal .hi-v5-tabs__item:last-child {padding-right: 0;}.hi-v5-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;overflow: hidden;}.hi-v5-tabs__list:not(.hi-v5-tabs__list--editable) > .hi-v5-tabs__list--inner {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-tabs__list--editable > .hi-v5-tabs__list--inner {max-width: calc(100% - 33px);}.hi-v5-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v5-motion-duration-slow, 300ms);transition-duration: var(--hi-v5-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform;}.hi-v5-tabs__list--placement-vertical > .hi-v5-tabs__list--inner > .hi-v5-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v5-tabs__list--placement-horizontal.hi-v5-tabs__list--show-divider {border-bottom: 1px solid var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__content {padding-left: 16px;padding-top: 0;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__title {color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__desc {color: var(--hi-v5-color-gray-500, #91959e);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v5-spacing-8, 16px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6e8eb);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__desc {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__list--scroll {row-gap: var(--hi-v5-spacing-6, 12px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-card .hi-v5-tabs__item {margin: 0;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-gray-200, #e6e8eb);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-card .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-lg, 6px) 0 0 var(--hi-v5-border-radius-lg, 6px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item {margin: 0 0 var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6e8eb);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__list--scroll {row-gap: var(--hi-v5-spacing-2, 4px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__list--inner {width: auto;display: block;position: relative;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item {line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item--prev {border-top: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-left: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item--next {border-bottom: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-right: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));-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);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);}.hi-v5-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 3px;border-top-left-radius: 3px;border-top-right-radius: 3px;background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));-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);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);}.hi-v5-tabs__item {line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs__item:focus {outline: 0;}.hi-v5-tabs__item:not(.hi-v5-tabs__item--disabled):hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--prev {border-left: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--next {border-right: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--disabled, .hi-v5-tabs__item--disabled .hi-v5-tabs__close-btn {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-tabs__item:not(.hi-v5-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.hi-v5-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v5-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-tabs-tab-pane--hide {display: none;}";
+var css_248z = ".hi-v5-tabs__add-btn.hi-v5-icon-button {font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-tabs__add-input {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-margin-start: var(--hi-v5-spacing-14, 28px);margin-inline-start: var(--hi-v5-spacing-14, 28px);}.hi-v5-tabs__add-btn-wrap {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-tabs__add-btn-wrap .hi-v5-tabs__add-btn {display: -webkit-box;display: -ms-flexbox;display: flex;height: 16px;-webkit-padding-start: var(--hi-v5-spacing-4, 8px);padding-inline-start: var(--hi-v5-spacing-4, 8px);-webkit-border-start: 1px solid var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: 1px solid var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-tabs__add-input, .hi-v5-tabs__edit-input {width: 120px;-webkit-margin-end: 1px;margin-inline-end: 1px;}.hi-v5-tabs__up-btn.hi-v5-icon-button, .hi-v5-tabs__down-btn.hi-v5-icon-button, .hi-v5-tabs__left-btn.hi-v5-icon-button, .hi-v5-tabs__right-btn.hi-v5-icon-button {margin: var(--hi-v5-spacing-1, 2px);}.hi-v5-tabs__close-btn {cursor: pointer;color: var(--hi-v5-color-gray-600, #91959e);-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s;}.hi-v5-tabs__close-btn:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--type-card .hi-v5-tabs__content {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-tabs__list {position: relative;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-600, #91959e);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-tabs__list.hi-v5-tabs__list--editable {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-tabs__list--type-card .hi-v5-tabs__item {background-color: var(--hi-v5-color-gray-100, #f2f4f7);margin: 0;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-card .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item {position: relative;margin: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover + .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled))::after {content: \"\";position: absolute;width: 1px;height: var(--hi-v5-height-4, 16px);background-color: var(--hi-v5-color-gray-400, #dbdde0);inset-inline-start: 0;inset-block-start: 50%;-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):first-child::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active + .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__title {color: var(--hi-v5-color-gray-800, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__desc {color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item {background: var(--hi-v5-color-gray-100, #f2f4f7);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 var(--hi-v5-spacing-6, 12px) 0 0;padding: var(--hi-v5-spacing-8, 16px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__desc {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__list--type-line .hi-v5-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-tabs__list--type-line .hi-v5-tabs__item .hi-v5-tabs-item__title {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-sm .hi-v5-tabs__item {height: var(--hi-v5-height-10, 40px);padding: 0 0 0 var(--hi-v5-spacing-14, 28px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-md:not(.hi-v5-tabs__list--placement-vertical) .hi-v5-tabs__item {height: var(--hi-v5-height-12, 48px);padding: 0 0 0 var(--hi-v5-spacing-14, 28px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-lg .hi-v5-tabs__item {height: var(--hi-v5-height-15, 60px);padding: 0 0 0 var(--hi-v5-spacing-14, 28px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--placement-horizontal .hi-v5-tabs__item:first-child {-webkit-padding-start: 0;padding-inline-start: 0;}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--placement-horizontal .hi-v5-tabs__item:last-child {-webkit-padding-end: 0;padding-inline-end: 0;}.hi-v5-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;overflow: hidden;}.hi-v5-tabs__list:not(.hi-v5-tabs__list--editable) > .hi-v5-tabs__list--inner {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-tabs__list--editable > .hi-v5-tabs__list--inner {max-width: calc(100% - 33px);}.hi-v5-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v5-motion-duration-slow, 300ms);transition-duration: var(--hi-v5-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform;}.hi-v5-tabs__list--placement-vertical > .hi-v5-tabs__list--inner > .hi-v5-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v5-tabs__list--placement-horizontal.hi-v5-tabs__list--show-divider {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-tabs__list--placement-horizontal.hi-v5-tabs__list--type-card .hi-v5-tabs__list--scroll {border-radius: var(--hi-v5-border-radius-lg, 6px) var(--hi-v5-border-radius-lg, 6px) 0 0;overflow: hidden;}.hi-v5-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__content {-webkit-padding-start: 16px;padding-inline-start: 16px;-webkit-padding-before: 0;padding-block-start: 0;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__title {color: var(--hi-v5-color-gray-800, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__desc {color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v5-spacing-8, 16px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__desc {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__list--scroll {row-gap: var(--hi-v5-spacing-6, 12px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-card .hi-v5-tabs__list--scroll {border-radius: var(--hi-v5-border-radius-lg, 6px) 0 0 var(--hi-v5-border-radius-lg, 6px);overflow: hidden;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-card .hi-v5-tabs__item {margin: 0;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-gray-100, #f2f4f7);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-card .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item {margin: 0 0 var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__list--scroll {row-gap: var(--hi-v5-spacing-2, 4px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__list--inner {width: auto;display: block;position: relative;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item {line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item--prev {-webkit-border-before: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-start: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));-webkit-border-start: none;border-inline-start: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item--next {-webkit-border-after: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));-webkit-border-end: none;border-inline-end: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__ink {position: absolute;inset-inline-start: 0;inset-block-end: auto;width: 2px;background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));-webkit-transition: inset-block-start 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: inset-block-start 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs__ink {position: absolute;inset-block-end: 0;inset-inline-end: auto;inset-block-start: auto;height: 3px;border-start-start-radius: 3px;border-start-end-radius: 3px;background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));-webkit-transition: inset-inline-start 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: inset-inline-start 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs__item {line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs__item:focus {outline: 0;}.hi-v5-tabs__item:not(.hi-v5-tabs__item--disabled):hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--prev {-webkit-border-start: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-inline-start: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--next {-webkit-border-end: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-inline-end: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--disabled, .hi-v5-tabs__item--disabled .hi-v5-tabs__close-btn {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-tabs__item:not(.hi-v5-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.hi-v5-tabs__content {width: 100%;overflow: hidden;-webkit-padding-before: var(--hi-v5-spacing-8, 16px);padding-block-start: var(--hi-v5-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-tabs-tab-pane--hide {display: none;}";
 var __styleInject__ = require('@hi-ui/style-inject')["default"];
 __styleInject__(css_248z);
 exports["default"] = css_248z;

package/lib/esm/TabItem.js

@@ -13,6 +13,7 @@ import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo }
 import { cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { CloseOutlined } from '@hi-ui/icons';
+import { Button } from '@hi-ui/button';
 import { Input } from '@hi-ui/input';
 import { Tooltip } from '@hi-ui/tooltip';
 var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -128,8 +129,12 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
         });
       }
       if (closeable && !editRender) {
-        return /*#__PURE__*/React.createElement("span", {
+        return /*#__PURE__*/React.createElement(Button, {
           className: prefixCls + "__close-btn",
+          type: active ? 'primary' : 'default',
+          size: "xs",
+          appearance: "link",
+          icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
           onClick: function onClick(evt) {
             evt.stopPropagation();
             if (onDelete) {
@@ -139,7 +144,7 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
               }, evt);
             }
           }
-        }, /*#__PURE__*/React.createElement(CloseOutlined, null));
+        });
       }
     }
     return null;