@hi-ui/tabs 4.0.0-alpha.9 → 4.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/README.md +57 -0
  2. package/lib/cjs/TabInk.js +1 -3
  3. package/lib/cjs/TabItem.js +22 -15
  4. package/lib/cjs/TabList.js +47 -28
  5. package/lib/cjs/TabPane.js +1 -2
  6. package/lib/cjs/Tabs.js +31 -30
  7. package/lib/cjs/index.js +6 -4
  8. package/lib/cjs/styles/index.scss.js +1 -2
  9. package/lib/esm/TabInk.js +0 -2
  10. package/lib/esm/TabItem.js +18 -11
  11. package/lib/esm/TabList.js +42 -25
  12. package/lib/esm/TabPane.js +0 -1
  13. package/lib/esm/Tabs.js +25 -26
  14. package/lib/esm/index.js +7 -2
  15. package/lib/esm/styles/index.scss.js +2 -3
  16. package/lib/types/TabInk.d.ts +2 -2
  17. package/lib/types/TabItem.d.ts +14 -8
  18. package/lib/types/TabList.d.ts +21 -11
  19. package/lib/types/TabPane.d.ts +1 -1
  20. package/lib/types/Tabs.d.ts +22 -12
  21. package/lib/types/index.d.ts +5 -1
  22. package/package.json +12 -10
  23. package/lib/cjs/TabInk.js.map +0 -1
  24. package/lib/cjs/TabItem.js.map +0 -1
  25. package/lib/cjs/TabList.js.map +0 -1
  26. package/lib/cjs/TabPane.js.map +0 -1
  27. package/lib/cjs/Tabs.js.map +0 -1
  28. package/lib/cjs/index.js.map +0 -1
  29. package/lib/cjs/styles/index.scss.js.map +0 -1
  30. package/lib/esm/TabInk.js.map +0 -1
  31. package/lib/esm/TabItem.js.map +0 -1
  32. package/lib/esm/TabList.js.map +0 -1
  33. package/lib/esm/TabPane.js.map +0 -1
  34. package/lib/esm/Tabs.js.map +0 -1
  35. package/lib/esm/index.js.map +0 -1
  36. package/lib/esm/styles/index.scss.js.map +0 -1
package/README.md CHANGED
@@ -9,3 +9,60 @@ const Tabs = require('@hi-ui/tabs');
9
9
 
10
10
  // TODO: DEMONSTRATE API
11
11
  ```
12
+
13
+ ## Props
14
+
15
+ ### Tabs
16
+
17
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
18
+ | --------------- | ------------------------------------------------------------------------------------------- | ---------------- | ---------------------------------------------------- | ------------ |
19
+ | type | 标签类型 | string | 'desc' \| 'card' \| 'button' \| 'default' | 'default' |
20
+ | placement | 水平或竖直展示标签 | string | 'vertical' \| 'horizontal' | 'horizontal' |
21
+ | defaultActiveId | 设置默认激活的标签 | React.ReactText | - | 第一个选项卡 |
22
+ | activeId | 设置激活的标签，设置此值后变为受控模式 | React.ReactText | - | - |
23
+ | draggable | 是否支持拖拽 | boolean | true \| false | false |
24
+ | editable | 是否可编辑 | boolean | true \| false | false |
25
+ | extra | 右侧扩展区域 | React.ReactNode | - | - |
26
+
27
+ ### Tabs.Pane
28
+
29
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
30
+ | --------- | -------------------------------------------- | ------------------- | ------------- | ------ |
31
+ | tabTitle | 选项卡头显示文字 | ReactNode | - | - |
32
+ | tabDesc | 选项卡头描述文字，仅对 type='desc'时生效 | ReactNode | - | - |
33
+ | tabId | 每个标签的唯一标识 | string \| number | - | - |
34
+ | disabled | 标签是否禁用 | boolean | true \| false | false |
35
+ | closeable | 标签是否可以关闭，仅对 editable 为true时生效 | boolean | true \| false | true |
36
+
37
+ ## Events
38
+
39
+ | 名称 | 说明 | 类型 | 参数 | 返回值 |
40
+ | -------------- | ----------------------------------------------------------- | ------------------------------------ | --------------------------------------------------- | ------------------------------ |
41
+ | onTabClick | 点击标签页时触发，回调值为点击点击标签的 id | (tabId, event) => void | tabKey: 点击的标签 id, event: MouseEvent |
42
+ | onChange | 点击标签页变更时触发，回调值为点击点击标签的 id | (tabId, event) => void | tabKey: 点击的标签 id, event: MouseEvent | - |
43
+ | onDragStart | 节点开始拖拽时触发 | (e: React.DragEvent,{dragNode: TabNode}) => void | dragNode: 拖拽节点 |
44
+ | onDragOver | 节点开始拖拽时触发 | (e: React.DragEvent,{targetNode: TabNode}) => void | dragNode: 拖拽节点 |
45
+ | onDragEnd | 节点开始拖拽时触发 | (e: React.DragEvent,{targetNode: TabNode}) => void | dragNode: 拖拽节点 | - |- |
46
+ | onDrop | 节点拖拽时触发 | (e: React.DragEvent,{dragNode, targetNode, direction, }) => void | dragNode: 拖拽节点 | - |
47
+ | onAdd | 节点增加时触发 | () => void | - | - |
48
+ | onDelete | 点击删除节点按钮时触发 | (deletedNode: TabNode,index) => void | deletedNode: 删除的节点, index: 删除的节点索引 | - |
49
+
50
+ ## CHANGELOG
51
+ *** 拖拽事件全面向原生看齐 ***
52
+ | 参数 | 变更类型 | 变更内容 | 解决的问题 |
53
+ | ------------ | ------------------------------- | ------------------------------------------------------------------------------ | ---------------------------- |
54
+
55
+
56
+ | onBeforeDelete | deprecated | 废弃onDelete前置逻辑，直接在 onDelete 处理 | 优化易用性 |
57
+ | onDropEnd | deprecated | 废弃onDelete前置逻辑，直接在 onDelete 处理 | 优化易用性 |
58
+ | canScroll | deprecated | 现在不需要canScroll，会自动计算是否可滚动 | 优化易用性 |
59
+ | max | deprecated | 现在不再内置收起效果，该字段没有存在意义 | 优化易用性 |
60
+ | animation | deprecated | 动画效果为内置 | 优化易用性，删减无意义的配置项 |
61
+ | onDragStart | update | 入参调整 | |
62
+ | onDragOver | feature | 新增钩子 | |
63
+ | onDragEnd | feature | 新增钩子 | |
64
+ |extra | feature | 右侧额外操作区 | 功能增强 |
65
+ | onDrop | update | 入参调整 | |
66
+ | type | update | 选项移除 'editable'类型，, 默认type由'card'类型改为'line' | editable 拆为配置项更合理，根据通用场景，'line‘模式用的更多，故更改默认类型 |
67
+ | editable | feature | 选项移除type 的 'editable'类型，迁移为一个配置项 | editable 拆为配置项更合理，解决editable 和 type的组合问题 |
68
+
package/lib/cjs/TabInk.js CHANGED
@@ -62,12 +62,10 @@ var TabInk = function TabInk(_ref) {
62
62
  Object.assign(inkRef.current.style, _style);
63
63
  }
64
64
  }, [itemRef, tabListRef, direction]);
65
- return /*#__PURE__*/React__default['default'].createElement("div", {
65
+ return /*#__PURE__*/React__default["default"].createElement("div", {
66
66
  className: classname.cx(prefixCls + "__ink", (_cx = {}, _cx[prefixCls + "__ink--disabled"] = disabled, _cx)),
67
67
  ref: inkRef
68
68
  });
69
69
  };
70
70
 
71
71
  exports.TabInk = TabInk;
72
- exports["default"] = TabInk;
73
- //# sourceMappingURL=TabInk.js.map
package/lib/cjs/TabItem.js CHANGED
@@ -53,7 +53,9 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
53
53
  itemRef = _ref.itemRef,
54
54
  draggable = _ref.draggable,
55
55
  _ref$type = _ref.type,
56
- type = _ref$type === void 0 ? 'default' : _ref$type,
56
+ type = _ref$type === void 0 ? 'line' : _ref$type,
57
+ _ref$closeable = _ref.closeable,
58
+ closeable = _ref$closeable === void 0 ? true : _ref$closeable,
57
59
  _ref$direction = _ref.direction,
58
60
  layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
59
61
 
@@ -67,11 +69,11 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
67
69
 
68
70
  var _onClick = React.useCallback(function (e) {
69
71
  if (onTabClick) {
70
- onTabClick(tabId);
72
+ onTabClick(tabId, e);
71
73
  }
72
74
  }, [onTabClick, tabId]);
73
75
 
74
- return /*#__PURE__*/React__default['default'].createElement("div", {
76
+ return /*#__PURE__*/React__default["default"].createElement("div", {
75
77
  style: style,
76
78
  className: classname.cx(prefixCls + "__item", className, (_cx = {}, _cx[prefixCls + "__item--active"] = active, _cx[prefixCls + "__item--" + direction] = direction, _cx)),
77
79
  ref: ref,
@@ -88,8 +90,10 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
88
90
 
89
91
  if (_onDragStart) {
90
92
  _onDragStart(e, {
91
- tabId: tabId,
92
- tabTitle: tabTitle
93
+ dragNode: {
94
+ tabId: tabId,
95
+ tabTitle: tabTitle
96
+ }
93
97
  });
94
98
  }
95
99
  },
@@ -101,8 +105,10 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
101
105
 
102
106
  if (_onDragEnd) {
103
107
  _onDragEnd(e, {
104
- tabId: tabId,
105
- tabTitle: tabTitle
108
+ dragNode: {
109
+ tabId: tabId,
110
+ tabTitle: tabTitle
111
+ }
106
112
  });
107
113
  }
108
114
  },
@@ -140,8 +146,10 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
140
146
 
141
147
  if (_onDragOver) {
142
148
  _onDragOver(e, {
143
- tabId: tabId,
144
- tabTitle: tabTitle
149
+ targetNode: {
150
+ tabId: tabId,
151
+ tabTitle: tabTitle
152
+ }
145
153
  });
146
154
  }
147
155
  },
@@ -158,7 +166,7 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
158
166
  tabId: tabId,
159
167
  tabTitle: tabTitle
160
168
  },
161
- dropNode: {
169
+ targetNode: {
162
170
  tabId: passedData.tabId,
163
171
  tabTitle: passedData.tabTitle
164
172
  },
@@ -166,11 +174,11 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
166
174
  });
167
175
  }
168
176
  }
169
- }, /*#__PURE__*/React__default['default'].createElement("span", {
177
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
170
178
  className: prefixCls + "-item__title"
171
- }, tabTitle), type === 'desc' && /*#__PURE__*/React__default['default'].createElement("span", {
179
+ }, tabTitle), type === 'desc' && /*#__PURE__*/React__default["default"].createElement("span", {
172
180
  className: prefixCls + "-item__desc"
173
- }, tabDesc), editable && /*#__PURE__*/React__default['default'].createElement("span", {
181
+ }, tabDesc), editable && closeable && /*#__PURE__*/React__default["default"].createElement("span", {
174
182
  className: prefixCls + "__close-btn",
175
183
  onClick: function onClick(e) {
176
184
  e.stopPropagation();
@@ -182,7 +190,7 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
182
190
  }, index);
183
191
  }
184
192
  }
185
- }, /*#__PURE__*/React__default['default'].createElement(icons.CloseOutlined, null)));
193
+ }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null)));
186
194
  });
187
195
 
188
196
  if (env.__DEV__) {
@@ -190,4 +198,3 @@ if (env.__DEV__) {
190
198
  }
191
199
 
192
200
  exports.TabItem = TabItem;
193
- //# sourceMappingURL=TabItem.js.map
package/lib/cjs/TabList.js CHANGED
@@ -29,6 +29,10 @@ var TabInk = require('./TabInk.js');
29
29
 
30
30
  var icons = require('@hi-ui/icons');
31
31
 
32
+ var typeAssertion = require('@hi-ui/type-assertion');
33
+
34
+ var iconButton = require('@hi-ui/icon-button');
35
+
32
36
  function _interopDefaultLegacy(e) {
33
37
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
34
38
  'default': e
@@ -64,13 +68,20 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
64
68
  onDrop = _ref.onDrop,
65
69
  onDragEnd = _ref.onDragEnd,
66
70
  _ref$type = _ref.type,
67
- type = _ref$type === void 0 ? 'default' : _ref$type;
71
+ type = _ref$type === void 0 ? 'line' : _ref$type,
72
+ extra = _ref.extra;
68
73
 
69
- var _a, _b;
74
+ var _a;
75
+
76
+ var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
77
+ if (typeAssertion.isUndef(defaultActiveId)) {
78
+ return data[0] ? data[0].tabId : '';
79
+ }
70
80
 
71
- var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId || ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.tabId), activeId, onChange),
72
- activeTab = _useUncontrolledState[0],
73
- setActiveTab = _useUncontrolledState[1];
81
+ return defaultActiveId;
82
+ }, activeId, onChange),
83
+ activeTabId = _useUncontrolledState[0],
84
+ setActiveTabId = _useUncontrolledState[1];
74
85
 
75
86
  var _useState = React.useState(null),
76
87
  innerRef = _useState[0],
@@ -94,21 +105,23 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
94
105
  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);
95
106
  }
96
107
  }, [scrollRef, innerRef, direction]);
97
- var onClickTab = React.useCallback(function (key) {
108
+ var onClickTab = React.useCallback(function (key, event) {
98
109
  if (onTabClick) {
99
- onTabClick(key);
110
+ onTabClick(key, event);
100
111
  }
101
112
 
102
- if (key !== activeTab && setActiveTab) {
103
- setActiveTab(key);
113
+ if (key !== activeTabId && setActiveTabId) {
114
+ setActiveTabId(key);
104
115
  }
105
- }, [activeTab, onTabClick, setActiveTab]);
106
- return /*#__PURE__*/React__default['default'].createElement("div", {
116
+ }, [activeTabId, onTabClick, setActiveTabId]);
117
+ return /*#__PURE__*/React__default["default"].createElement("div", {
107
118
  style: style,
108
119
  className: classname.cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
109
120
  ref: ref
110
- }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default['default'].createElement("div", {
111
- className: prefixCls + "__add-btn",
121
+ }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
122
+ className: prefixCls + "__left-btn",
123
+ effect: true,
124
+ icon: /*#__PURE__*/React__default["default"].createElement(icons.LeftOutlined, null),
112
125
  onClick: function onClick() {
113
126
  if (scrollRef && innerRef) {
114
127
  var canScroll = -translateX - innerRef.clientWidth;
@@ -123,8 +136,10 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
123
136
  setTranslateX(translateX + moveWidth);
124
137
  }
125
138
  }
126
- }, /*#__PURE__*/React__default['default'].createElement(icons.LeftOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default['default'].createElement("div", {
127
- className: prefixCls + "__add-btn",
139
+ }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
140
+ className: prefixCls + "__up-btn",
141
+ effect: true,
142
+ icon: /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null),
128
143
  onClick: function onClick() {
129
144
  if (scrollRef && innerRef) {
130
145
  var canScroll = -translateY - innerRef.clientHeight;
@@ -139,17 +154,17 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
139
154
  setTranslateY(translateY + moveWidth);
140
155
  }
141
156
  }
142
- }, /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null)), /*#__PURE__*/React__default['default'].createElement("div", {
157
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
143
158
  className: classname.cx(prefixCls + "__list--inner"),
144
159
  ref: setInnerRef
145
- }, /*#__PURE__*/React__default['default'].createElement("div", {
160
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
146
161
  className: classname.cx(prefixCls + "__list--scroll"),
147
162
  ref: setScrollRef,
148
163
  style: showScrollBtn ? {
149
164
  transform: direction === 'horizontal' ? "translateX(" + translateX + "px)" : "translateY(" + translateY + "px)"
150
165
  } : {}
151
166
  }, data.map(function (d, index) {
152
- return /*#__PURE__*/React__default['default'].createElement(TabItem.TabItem, Object.assign({
167
+ return /*#__PURE__*/React__default["default"].createElement(TabItem.TabItem, Object.assign({
153
168
  key: index
154
169
  }, d, {
155
170
  ref: function ref(node) {
@@ -158,7 +173,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
158
173
  type: type,
159
174
  itemRef: itemsRef.current["" + d.tabId],
160
175
  index: index,
161
- active: activeTab === d.tabId,
176
+ active: activeTabId === d.tabId,
162
177
  prefixCls: prefixCls,
163
178
  draggable: draggable,
164
179
  onTabClick: onClickTab,
@@ -170,14 +185,16 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
170
185
  onDragEnd: onDragEnd,
171
186
  direction: direction
172
187
  }));
173
- }), type === 'default' && /*#__PURE__*/React__default['default'].createElement(TabInk.TabInk, {
188
+ }), type === 'line' && /*#__PURE__*/React__default["default"].createElement(TabInk.TabInk, {
174
189
  translate: direction === 'horizontal' ? translateX : translateY,
175
190
  prefixCls: prefixCls,
176
191
  direction: direction,
177
192
  tabListRef: innerRef,
178
- itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTab]
179
- }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default['default'].createElement("div", {
180
- className: prefixCls + "__add-btn",
193
+ itemRef: (_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[activeTabId]
194
+ }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
195
+ effect: true,
196
+ className: prefixCls + "__right-btn",
197
+ icon: /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null),
181
198
  onClick: function onClick() {
182
199
  if (scrollRef && innerRef) {
183
200
  var canScroll = scrollRef.clientWidth - innerRef.clientWidth + translateX;
@@ -192,8 +209,10 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
192
209
  setTranslateX(translateX - moveWidth);
193
210
  }
194
211
  }
195
- }, /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default['default'].createElement("div", {
196
- className: prefixCls + "__add-btn",
212
+ }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
213
+ effect: true,
214
+ className: prefixCls + "__down-btn",
215
+ icon: /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
197
216
  onClick: function onClick() {
198
217
  if (scrollRef && innerRef) {
199
218
  var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
@@ -208,10 +227,11 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
208
227
  setTranslateY(translateY - moveWidth);
209
228
  }
210
229
  }
211
- }, /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null)), editable && /*#__PURE__*/React__default['default'].createElement("div", {
230
+ }), editable ? /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
231
+ icon: /*#__PURE__*/React__default["default"].createElement(icons.PlusOutlined, null),
212
232
  className: prefixCls + "__add-btn",
213
233
  onClick: onAdd
214
- }, /*#__PURE__*/React__default['default'].createElement(icons.PlusOutlined, null)));
234
+ }) : null, extra);
215
235
  });
216
236
 
217
237
  if (env.__DEV__) {
@@ -219,4 +239,3 @@ if (env.__DEV__) {
219
239
  }
220
240
 
221
241
  exports.TabList = TabList;
222
- //# sourceMappingURL=TabList.js.map
package/lib/cjs/TabPane.js CHANGED
@@ -30,11 +30,10 @@ var TabPane = function TabPane(_ref) {
30
30
  className = _ref.className,
31
31
  style = _ref.style,
32
32
  active = _ref.active;
33
- return /*#__PURE__*/React__default['default'].createElement("div", {
33
+ return /*#__PURE__*/React__default["default"].createElement("div", {
34
34
  style: style,
35
35
  className: className
36
36
  }, active ? children : null);
37
37
  };
38
38
 
39
39
  exports.TabPane = TabPane;
40
- //# sourceMappingURL=TabPane.js.map
package/lib/cjs/Tabs.js CHANGED
@@ -25,6 +25,10 @@ var env = require('@hi-ui/env');
25
25
 
26
26
  var TabList = require('./TabList.js');
27
27
 
28
+ var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
29
+
30
+ var typeAssertion = require('@hi-ui/type-assertion');
31
+
28
32
  function _interopDefaultLegacy(e) {
29
33
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
30
34
  'default': e
@@ -42,10 +46,6 @@ var _prefix = classname.getPrefixCls(_role);
42
46
 
43
47
 
44
48
  var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
45
- var _cx;
46
-
47
- var _b;
48
-
49
49
  var _a$prefixCls = _a.prefixCls,
50
50
  prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
51
51
  _a$role = _a.role,
@@ -57,8 +57,8 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
57
57
  onChange = _a.onChange,
58
58
  onTabClick = _a.onTabClick,
59
59
  editable = _a.editable,
60
- _a$direction = _a.direction,
61
- direction = _a$direction === void 0 ? 'horizontal' : _a$direction,
60
+ _a$placement = _a.placement,
61
+ placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
62
62
  onAdd = _a.onAdd,
63
63
  onDelete = _a.onDelete,
64
64
  _a$draggable = _a.draggable,
@@ -69,13 +69,13 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
69
69
  onDrop = _a.onDrop,
70
70
  style = _a.style,
71
71
  _a$type = _a.type,
72
- type = _a$type === void 0 ? 'default' : _a$type,
73
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "direction", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type"]);
72
+ type = _a$type === void 0 ? 'line' : _a$type,
73
+ extra = _a.extra,
74
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
74
75
 
75
- var cls = classname.cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--vertical"] = direction === 'vertical', _cx[prefixCls + "--" + type] = type, _cx));
76
76
  var tabList = React.useMemo(function () {
77
77
  var list = [];
78
- React__default['default'].Children.map(children, function (child) {
78
+ React__default["default"].Children.map(children, function (child) {
79
79
  if (child) {
80
80
  var _child$props = child.props,
81
81
  tabTitle = _child$props.tabTitle,
@@ -96,30 +96,29 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
96
96
  return list;
97
97
  }, [children]);
98
98
 
99
- var _useState = React.useState(activeId || defaultActiveId || ((_b = tabList[0]) === null || _b === void 0 ? void 0 : _b.tabId)),
100
- activePane = _useState[0],
101
- setActivePane = _useState[1];
102
-
103
- var _onChange = React.useCallback(function (tabId) {
104
- if (onChange) {
105
- onChange(tabId);
99
+ var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
100
+ if (typeAssertion.isUndef(defaultActiveId)) {
101
+ return tabList[0] ? tabList[0].tabId : '';
106
102
  }
107
103
 
108
- setActivePane(tabId);
109
- }, [onChange]);
104
+ return defaultActiveId;
105
+ }, activeId, onChange),
106
+ activeTabId = _useUncontrolledState[0],
107
+ setActiveTabId = _useUncontrolledState[1];
110
108
 
111
- return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
109
+ var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
110
+ return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
112
111
  ref: ref,
113
112
  role: role,
114
113
  className: cls,
115
114
  style: style
116
- }, rest), /*#__PURE__*/React__default['default'].createElement(TabList.TabList, {
115
+ }, rest), /*#__PURE__*/React__default["default"].createElement(TabList.TabList, {
117
116
  prefixCls: prefixCls,
118
117
  data: tabList,
119
118
  activeId: activeId,
120
- onChange: _onChange,
119
+ onChange: setActiveTabId,
121
120
  onTabClick: onTabClick,
122
- direction: direction,
121
+ direction: placement,
123
122
  editable: editable,
124
123
  onAdd: onAdd,
125
124
  onDelete: onDelete,
@@ -128,13 +127,16 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
128
127
  onDragOver: onDragOver,
129
128
  onDrop: onDrop,
130
129
  type: type,
131
- onDragStart: onDragStart
132
- }), /*#__PURE__*/React__default['default'].createElement("div", {
130
+ onDragStart: onDragStart,
131
+ extra: extra
132
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
133
133
  className: _prefix + "__content"
134
- }, React__default['default'].Children.map(children, function (child) {
135
- return child && /*#__PURE__*/React__default['default'].cloneElement(child, {
136
- active: activePane === child.props.tabId
137
- });
134
+ }, React__default["default"].Children.map(children, function (child) {
135
+ return child ? /*#__PURE__*/React__default["default"].cloneElement(child, {
136
+ key: child.props.tabId,
137
+ className: classname.cx(_prefix + "-tab-pane", child.props.className),
138
+ active: activeTabId === child.props.tabId
139
+ }) : null;
138
140
  })));
139
141
  });
140
142
 
@@ -143,4 +145,3 @@ if (env.__DEV__) {
143
145
  }
144
146
 
145
147
  exports.Tabs = Tabs;
146
- //# sourceMappingURL=Tabs.js.map
package/lib/cjs/index.js CHANGED
@@ -15,14 +15,16 @@ Object.defineProperty(exports, '__esModule', {
15
15
 
16
16
  require('./styles/index.scss.js');
17
17
 
18
- var Tabs = require('./Tabs.js');
18
+ var Tabs$1 = require('./Tabs.js');
19
19
 
20
20
  var TabPane = require('./TabPane.js');
21
21
 
22
22
  var TabList = require('./TabList.js');
23
23
 
24
- exports.Tabs = Tabs.Tabs;
25
- exports["default"] = Tabs.Tabs;
24
+ var Tabs = Object.assign(Tabs$1.Tabs, {
25
+ Pane: TabPane.TabPane
26
+ });
27
+ exports.Tabs = Tabs$1.Tabs;
26
28
  exports.TabPane = TabPane.TabPane;
27
29
  exports.TabList = TabList.TabList;
28
- //# sourceMappingURL=index.js.map
30
+ exports["default"] = Tabs;
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,11 +12,10 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tabs__add-btn {\n cursor: pointer; }\n.hi-v4-tabs__close-btn {\n cursor: pointer;\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n margin-left: 4px;\n margin-left: var(--hi-v4-spacing-2, 4px);\n -webkit-transition: color 0.3s;\n transition: color 0.3s; }\n.hi-v4-tabs__close-btn:hover {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list {\n position: relative;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: hidden;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n margin: 0;\n padding: 8px 20px;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n border-radius: 4px 4px 0 0;\n border-radius: var(--hi-v4-border-radius-normal, 4px) var(--hi-v4-border-radius-normal, 4px) 0 0;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: 4px 4px 4px 0;\n margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;\n padding: 4px 20px;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs__list--desc {\n padding: 0 20px;\n padding: 0 var(--hi-v4-spacing-10, 20px); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item {\n background: #f5f7fa;\n background: var(--hi-v4-color-gray-50, #f5f7fa);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: 20px 12px 20px 0;\n margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;\n padding: 16px 20px;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list--inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--vertical {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--card .hi-v4-tabs__item {\n margin: 0;\n padding: 8px 20px;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n border-radius: 4px 0 0 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px) 0 0 var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: 0 0 4px 0;\n margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n padding: 4px 20px;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: 0.75rem;\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: 1.25rem;\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: 0 0 12px 0;\n margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n padding: 16px 20px;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n background: #f5f7fa;\n background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: #ebedf0;\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--inner {\n width: auto;\n display: block;\n position: relative; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--scroll {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative; }\n.hi-v4-tabs--vertical .hi-v4-tabs__item {\n line-height: 1.5rem;\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: 8px 20px;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--vertical .hi-v4-tabs__item--prev {\n border-top: 1px dashed #237ffa;\n border-top: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa);\n border-left: none; }\n.hi-v4-tabs--vertical .hi-v4-tabs__item--next {\n border-bottom: 1px dashed #237ffa;\n border-bottom: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa);\n border-right: none; }\n.hi-v4-tabs--vertical .hi-v4-tabs__content {\n padding-left: 16px;\n padding-top: 0; }\n.hi-v4-tabs--vertical .hi-v4-tabs__ink {\n position: absolute;\n left: 0;\n bottom: auto;\n width: 2px;\n background-color: #237ffa;\n background-color: var(--hi-v4-color-brandblue-500, #237ffa);\n -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__ink {\n position: absolute;\n bottom: 0;\n right: auto;\n top: auto;\n height: 2px;\n background-color: #237ffa;\n background-color: var(--hi-v4-color-brandblue-500, #237ffa);\n -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n line-height: 1.5rem;\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: 8px 20px;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n cursor: pointer;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--prev {\n border-left: 1px dashed #237ffa;\n border-left: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--next {\n border-right: 1px dashed #237ffa;\n border-right: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--disabled {\n color: #929aa6 !important;\n color: var(--hi-v4-color-gray-500, #929aa6) !important;\n cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n width: 100%;\n overflow: hidden;\n padding-top: 16px;\n padding-top: var(--hi-v4-spacing-8, 16px);\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n";
15
+ 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.hi-v4-icon-button {\n font-size: var(--hi-v4-text-size-normal, 0.875rem); }\n.hi-v4-tabs__up-btn.hi-v4-icon-button, .hi-v4-tabs__down-btn.hi-v4-icon-button, .hi-v4-tabs__left-btn.hi-v4-icon-button, .hi-v4-tabs__right-btn.hi-v4-icon-button {\n margin: var(--hi-v4-spacing-1, 2px); }\n.hi-v4-tabs__close-btn {\n cursor: pointer;\n color: var(--hi-v4-color-gray-500, #929aa6);\n margin-left: var(--hi-v4-spacing-2, 4px);\n -webkit-transition: color 0.3s;\n transition: color 0.3s; }\n.hi-v4-tabs__close-btn:hover {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--card .hi-v4-tabs__content {\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list {\n position: relative;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: var(--hi-v4-color-gray-500, #929aa6);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: hidden;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n margin: 0;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px) var(--hi-v4-border-radius-normal, 4px) 0 0;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc {\n padding: 0 var(--hi-v4-spacing-10, 20px); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item {\n background: var(--hi-v4-color-gray-50, #f5f7fa);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {\n padding-left: 16px;\n padding-top: 0; }\n.hi-v4-tabs--placement-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--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {\n width: auto;\n display: block;\n position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .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--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {\n border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-left: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {\n border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-right: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {\n position: absolute;\n left: 0;\n bottom: auto;\n width: 2px;\n background-color: var(--hi-v4-color-primary-500, 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--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {\n margin: 0;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n border-radius: var(--hi-v4-border-radius-normal, 4px) 0 0 var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__ink {\n position: absolute;\n bottom: 0;\n right: auto;\n top: auto;\n height: 2px;\n background-color: var(--hi-v4-color-primary-500, 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: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n cursor: pointer;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--prev {\n border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--next {\n border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--disabled {\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: var(--hi-v4-spacing-8, 16px);\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n";
16
16
 
17
17
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
18
18
 
19
19
  __styleInject__(css_248z);
20
20
 
21
21
  exports["default"] = css_248z;
22
- //# sourceMappingURL=index.scss.js.map
package/lib/esm/TabInk.js CHANGED
@@ -51,6 +51,4 @@ var TabInk = function TabInk(_ref) {
51
51
  });
52
52
  };
53
53
 
54
- export default TabInk;
55
54
  export { TabInk };
56
- //# sourceMappingURL=TabInk.js.map