@hi-ui/tabs 5.0.0-experimental.0 → 5.0.0-rc.0

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 (12) hide show
  1. package/CHANGELOG.md +28 -31
  2. package/lib/cjs/TabInk.js +12 -6
  3. package/lib/cjs/TabList.js +43 -15
  4. package/lib/cjs/Tabs.js +28 -6
  5. package/lib/esm/TabInk.js +12 -6
  6. package/lib/esm/TabList.js +43 -15
  7. package/lib/esm/Tabs.js +28 -6
  8. package/lib/types/TabItem.d.ts +1 -1
  9. package/lib/types/TabList.d.ts +6 -1
  10. package/lib/types/Tabs.d.ts +6 -1
  11. package/lib/types/index.d.ts +1 -0
  12. package/package.json +18 -17
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @hi-ui/tabs
2
2
 
3
- ## 5.0.0-experimental.0
3
+ ## 5.0.0-rc.0
4
4
 
5
5
  ### Major Changes
6
6
 
@@ -15,70 +15,67 @@
15
15
  - 6bb4d999c: feat(tabs): 支持编辑功能和设置最大标题宽度 (5.0)
16
16
  - 120f6b15a: feat(tabs): add editRender api (5.0)
17
17
  - 9b34d99bc: feat(tabs): 增加 showDivider 参数 (5.0)
18
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
18
19
 
19
20
  ### Patch Changes
20
21
 
21
- - 1662753e0: style: fix ui bug (5.0)
22
22
  - 8c0ee78f0: perf: 优化全局 size 配置,对于组件中没有的 size 值,取最接近的尺寸展示 (5.0)
23
- - be5a59325: style: 修改样式问题 (5.0)
24
23
  - 2e56529f7: styles: 主题定制功能完善&&样式变量化写法改造&&兼容 RTL (5.0)
25
- - e2d184e74: style: 修改 UI 问题 (5.0)
24
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
26
25
  - 33da3144e: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
27
- - 7f3abee55: style: fix ui bug (5.0)
28
- - a0f0c9d6b: style: 修改 UI 问题 (5.0)
29
- - 86910f5e2: style: 修改 UI (5.0)
30
- - Updated dependencies [6fb223e3a]
31
26
  - Updated dependencies [da2e63a14]
32
27
  - Updated dependencies [1e226cd66]
33
28
  - Updated dependencies [eea29eade]
34
- - Updated dependencies [1662753e0]
29
+ - Updated dependencies [7f204c892]
35
30
  - Updated dependencies [122d1d859]
36
31
  - Updated dependencies [f1ab51725]
37
32
  - Updated dependencies [41552be0b]
33
+ - Updated dependencies [eb17c4697]
38
34
  - Updated dependencies [8c0ee78f0]
39
35
  - Updated dependencies [9b34d99bc]
40
36
  - Updated dependencies [8f3aa85e4]
41
- - Updated dependencies [f4fc0ef30]
42
- - Updated dependencies [c021539a3]
43
37
  - Updated dependencies [ec4c7faa2]
44
38
  - Updated dependencies [29cae09ea]
45
39
  - Updated dependencies [fd4c20bbd]
46
- - Updated dependencies [be5a59325]
47
- - Updated dependencies [71fc15e5c]
48
40
  - Updated dependencies [79ea480f3]
49
41
  - Updated dependencies [2e56529f7]
42
+ - Updated dependencies [3a7186e4b]
43
+ - Updated dependencies [8f23e9322]
50
44
  - Updated dependencies [8a92ec660]
51
45
  - Updated dependencies [1429eced2]
46
+ - Updated dependencies [eb17c4697]
52
47
  - Updated dependencies [9b34d99bc]
53
48
  - Updated dependencies [976ec929d]
54
49
  - Updated dependencies [d021b4fa6]
55
50
  - Updated dependencies [f1ab51725]
56
51
  - Updated dependencies [6dca7795c]
52
+ - Updated dependencies [900c6c2f0]
53
+ - Updated dependencies [c407744fe]
54
+ - Updated dependencies [d91a8bb0f]
57
55
  - Updated dependencies [77d969c2e]
58
56
  - Updated dependencies [4006b2c8c]
59
57
  - Updated dependencies [e42e2badf]
60
58
  - Updated dependencies [33da3144e]
61
- - Updated dependencies [0a8cc07a7]
62
- - Updated dependencies [7f3abee55]
63
59
  - Updated dependencies [6fcda9bf2]
64
60
  - Updated dependencies [58ad82e94]
65
- - Updated dependencies [a0f0c9d6b]
61
+ - Updated dependencies [95d930354]
62
+ - Updated dependencies [59cef699f]
66
63
  - Updated dependencies [99801c2d1]
67
- - Updated dependencies [86910f5e2]
68
- - @hi-ui/tooltip@5.0.0-experimental.0
69
- - @hi-ui/input@5.0.0-experimental.0
70
- - @hi-ui/button@5.0.0-experimental.0
71
- - @hi-ui/icons@5.0.0-experimental.0
72
- - @hi-ui/icon-button@5.0.0-experimental.0
73
- - @hi-ui/core@5.0.0-experimental.0
74
- - @hi-ui/use-id@5.0.0-experimental.0
75
- - @hi-ui/use-latest@5.0.0-experimental.0
76
- - @hi-ui/use-uncontrolled-state@5.0.0-experimental.0
77
- - @hi-ui/use-unmount-effect@5.0.0-experimental.0
78
- - @hi-ui/classname@5.0.0-experimental.0
79
- - @hi-ui/env@5.0.0-experimental.0
80
- - @hi-ui/react-utils@5.0.0-experimental.0
81
- - @hi-ui/type-assertion@5.0.0-experimental.0
64
+ - @hi-ui/input@5.0.0-rc.0
65
+ - @hi-ui/tooltip@5.0.0-rc.0
66
+ - @hi-ui/button@5.0.0-rc.0
67
+ - @hi-ui/icons@5.0.0-rc.0
68
+ - @hi-ui/core@5.0.0-rc.0
69
+ - @hi-ui/use-id@5.0.0-rc.0
70
+ - @hi-ui/use-latest@5.0.0-rc.0
71
+ - @hi-ui/use-uncontrolled-state@5.0.0-rc.0
72
+ - @hi-ui/use-unmount-effect@5.0.0-rc.0
73
+ - @hi-ui/icon-button@5.0.0-rc.0
74
+ - @hi-ui/classname@5.0.0-rc.0
75
+ - @hi-ui/env@5.0.0-rc.0
76
+ - @hi-ui/react-utils@5.0.0-rc.0
77
+ - @hi-ui/type-assertion@5.0.0-rc.0
78
+ - @hi-ui/use-merge-semantic@5.0.0-rc.0
82
79
 
83
80
  ## 4.2.0
84
81
 
package/lib/cjs/TabInk.js CHANGED
@@ -36,6 +36,7 @@ var TabInk = function TabInk(_ref) {
36
36
  if (!inkRef.current) return;
37
37
  if (!activeItemElement) return;
38
38
  var computedStyle = getComputedStyle(activeItemElement);
39
+ var rtl = containerElement ? getComputedStyle(containerElement).direction === 'rtl' : false;
39
40
  // issue: https://github.com/XiaoMi/hiui/issues/2937
40
41
  // 当设置transform缩放后，getBoundingClientRect 获取的值不准确，所以这里使用offset
41
42
  // const itemRect = activeItemElement.getBoundingClientRect()
@@ -49,22 +50,27 @@ var TabInk = function TabInk(_ref) {
49
50
  // 2px 保证尽量和文字顶部对齐，减少文本行高的影响
50
51
  top: offset + paddingTop + 2 + 'px',
51
52
  height: height - paddingTop - paddingBottom - 4 + "px",
53
+ insetInlineStart: '',
52
54
  left: '',
55
+ right: '',
53
56
  width: ''
54
57
  };
55
58
  } else {
56
- var paddingLeft = parseFloat(computedStyle.getPropertyValue('padding-left'));
57
- var paddingRight = parseFloat(computedStyle.getPropertyValue('padding-right'));
59
+ var paddingInlineStart = parseFloat(computedStyle.getPropertyValue('padding-inline-start'));
60
+ var paddingInlineEnd = parseFloat(computedStyle.getPropertyValue('padding-inline-end'));
58
61
  var width = activeItemElement.offsetWidth;
62
+ var inlineStart = (rtl ? -offset : offset) + paddingInlineStart;
59
63
  _style = {
60
- left: offset + paddingLeft + 'px',
61
- width: width - paddingRight - paddingLeft + "px",
64
+ insetInlineStart: inlineStart + 'px',
65
+ width: width - paddingInlineEnd - paddingInlineStart + "px",
62
66
  top: '',
63
- height: ''
67
+ height: '',
68
+ left: '',
69
+ right: ''
64
70
  };
65
71
  }
66
72
  Object.assign(inkRef.current.style, _style);
67
- }, [activeItemElement, getTabOffset, activeTabId, showHorizontal]);
73
+ }, [activeItemElement, containerElement, getTabOffset, activeTabId, showHorizontal]);
68
74
  React.useEffect(function () {
69
75
  setTabLnkPositionStyle();
70
76
  }, [setTabLnkPositionStyle]);
package/lib/cjs/TabList.js CHANGED
@@ -25,6 +25,7 @@ var icons = require('@hi-ui/icons');
25
25
  var typeAssertion = require('@hi-ui/type-assertion');
26
26
  var iconButton = require('@hi-ui/icon-button');
27
27
  var core = require('@hi-ui/core');
28
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
28
29
  var index = require('./hooks/index.js');
29
30
  var useLatest = require('@hi-ui/use-latest');
30
31
  var index$1 = require('./utils/index.js');
@@ -45,6 +46,8 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
45
46
  var data = _a.data,
46
47
  className = _a.className,
47
48
  style = _a.style,
49
+ classNamesProp = _a.classNames,
50
+ stylesProp = _a.styles,
48
51
  activeId = _a.activeId,
49
52
  defaultActiveId = _a.defaultActiveId,
50
53
  onChange = _a.onChange,
@@ -72,14 +75,32 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
72
75
  showDivider = _a.showDivider,
73
76
  extra = _a.extra,
74
77
  maxTabTitleWidth = _a.maxTabTitleWidth,
75
- 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"]);
76
- var _useGlobalContext = core.useGlobalContext(),
77
- globalSize = _useGlobalContext.size;
78
+ 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"]);
79
+ var globalContext = core.useGlobalContext();
80
+ var globalSize = globalContext.size;
81
+ var tabListConfig = globalContext.tabList;
78
82
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
79
83
  if (size === 'xs') {
80
84
  size = 'sm';
81
85
  }
82
86
  var direction = (_c = placement !== null && placement !== void 0 ? placement : directionProp) !== null && _c !== void 0 ? _c : 'horizontal';
87
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
88
+ classNamesList: [tabListConfig === null || tabListConfig === void 0 ? void 0 : tabListConfig.classNames, classNamesProp],
89
+ stylesList: [tabListConfig === null || tabListConfig === void 0 ? void 0 : tabListConfig.styles, stylesProp],
90
+ info: {
91
+ props: Object.assign(Object.assign({}, rest), {
92
+ data: data,
93
+ placement: direction,
94
+ type: type,
95
+ size: size,
96
+ showDivider: showDivider,
97
+ editable: editable,
98
+ draggable: draggable
99
+ })
100
+ }
101
+ }),
102
+ classNames = _useMergeSemantic.classNames,
103
+ styles = _useMergeSemantic.styles;
83
104
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
84
105
  if (typeAssertion.isUndef(defaultActiveId)) {
85
106
  return data[0] ? data[0].tabId : '';
@@ -153,6 +174,8 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
153
174
  return target;
154
175
  }, [showHorizontal]);
155
176
  var getTabOffset = React.useCallback(function (tabId) {
177
+ var targetElement = itemsRef.current[tabId];
178
+ if (!targetElement) return 0;
156
179
  // 获取目标元素的位置
157
180
  var targetPos = getTabPos(tabId);
158
181
  // 获取基准元素的位置（第一个）
@@ -162,7 +185,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
162
185
  basePos = getTabPos(baseItem.tabId);
163
186
  }
164
187
  // 返回目标元素相对基准元素的偏移量
165
- return targetPos ? targetPos - basePos : 0;
188
+ return targetPos - basePos;
166
189
  }, [data, getTabPos]);
167
190
  var syncScrollPosition = React.useCallback(function (tabId) {
168
191
  if (!innerElement) return;
@@ -319,11 +342,12 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
319
342
  initScrollPosition(activeId);
320
343
  }, [activeId, initScrollPosition]);
321
344
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
322
- style: style,
323
- 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),
324
- ref: ref
345
+ ref: ref,
346
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
347
+ 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)
325
348
  }, rest), showScrollBtn ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
326
- className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
349
+ className: classname.cx(showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn", classNames === null || classNames === void 0 ? void 0 : classNames.prevBtn),
350
+ style: styles === null || styles === void 0 ? void 0 : styles.prevBtn,
327
351
  effect: true,
328
352
  disabled: translatePos === 0,
329
353
  icon: showHorizontal ? /*#__PURE__*/React__default["default"].createElement(icons.LeftOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null),
@@ -339,14 +363,15 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
339
363
  });
340
364
  }
341
365
  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
342
- className: classname.cx(prefixCls + "__list--inner"),
366
+ className: classname.cx(prefixCls + "__list--inner", classNames === null || classNames === void 0 ? void 0 : classNames.inner),
367
+ style: styles === null || styles === void 0 ? void 0 : styles.inner,
343
368
  ref: setInnerElement
344
369
  }, /*#__PURE__*/React__default["default"].createElement("div", {
345
- className: classname.cx(prefixCls + "__list--scroll"),
370
+ className: classname.cx(prefixCls + "__list--scroll", classNames === null || classNames === void 0 ? void 0 : classNames.scroll),
346
371
  ref: setScrollElement,
347
- style: showScrollBtn ? {
372
+ style: Object.assign(Object.assign({}, showScrollBtn ? {
348
373
  transform: direction === 'horizontal' ? "translateX(" + translatePos + "px)" : "translateY(" + translatePos + "px)"
349
- } : undefined
374
+ } : undefined), styles === null || styles === void 0 ? void 0 : styles.scroll)
350
375
  }, showData.map(function (item, index) {
351
376
  return /*#__PURE__*/React__default["default"].createElement(TabItem.TabItem, Object.assign({
352
377
  key: item.tabId
@@ -413,7 +438,8 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
413
438
  getTabOffset: getTabOffset
414
439
  })) : null)), showScrollBtn ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
415
440
  effect: true,
416
- className: showHorizontal ? prefixCls + "__right-btn" : prefixCls + "__down-btn",
441
+ className: classname.cx(showHorizontal ? prefixCls + "__right-btn" : prefixCls + "__down-btn", classNames === null || classNames === void 0 ? void 0 : classNames.nextBtn),
442
+ style: styles === null || styles === void 0 ? void 0 : styles.nextBtn,
417
443
  disabled: translateBoundPos === -translatePos,
418
444
  icon: showHorizontal ? /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
419
445
  onClick: function onClick() {
@@ -429,9 +455,11 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
429
455
  });
430
456
  }
431
457
  })) : null, editable ? ( /*#__PURE__*/React__default["default"].createElement("div", {
432
- className: prefixCls + "__add-btn-wrap"
458
+ className: classname.cx(prefixCls + "__add-btn-wrap", classNames === null || classNames === void 0 ? void 0 : classNames.addBtnWrap),
459
+ style: styles === null || styles === void 0 ? void 0 : styles.addBtnWrap
433
460
  }, /*#__PURE__*/React__default["default"].createElement("div", {
434
- className: prefixCls + "__add-btn"
461
+ className: classname.cx(prefixCls + "__add-btn", classNames === null || classNames === void 0 ? void 0 : classNames.addBtn),
462
+ style: styles === null || styles === void 0 ? void 0 : styles.addBtn
435
463
  }, /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
436
464
  effect: true,
437
465
  icon: /*#__PURE__*/React__default["default"].createElement(icons.PlusOutlined, null),
package/lib/cjs/Tabs.js CHANGED
@@ -20,6 +20,8 @@ var env = require('@hi-ui/env');
20
20
  var TabList = require('./TabList.js');
21
21
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
22
22
  var typeAssertion = require('@hi-ui/type-assertion');
23
+ var core = require('@hi-ui/core');
24
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
23
25
  function _interopDefaultCompat(e) {
24
26
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
25
27
  'default': e
@@ -37,6 +39,9 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
37
39
  _a$role = _a.role,
38
40
  role = _a$role === void 0 ? _role : _a$role,
39
41
  className = _a.className,
42
+ style = _a.style,
43
+ classNamesProp = _a.classNames,
44
+ stylesProp = _a.styles,
40
45
  children = _a.children,
41
46
  defaultActiveId = _a.defaultActiveId,
42
47
  activeId = _a.activeId,
@@ -57,7 +62,6 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
57
62
  onDragOver = _a.onDragOver,
58
63
  onDragEnd = _a.onDragEnd,
59
64
  onDrop = _a.onDrop,
60
- style = _a.style,
61
65
  _a$type = _a.type,
62
66
  type = _a$type === void 0 ? 'line' : _a$type,
63
67
  _a$size = _a.size,
@@ -65,7 +69,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
65
69
  showDivider = _a.showDivider,
66
70
  maxTabTitleWidth = _a.maxTabTitleWidth,
67
71
  extra = _a.extra,
68
- 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"]);
72
+ 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"]);
69
73
  var tabList = React.useMemo(function () {
70
74
  var list = [];
71
75
  React__default["default"].Children.map(children, function (child) {
@@ -96,12 +100,27 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
96
100
  }, activeId, onChange),
97
101
  activeTabId = _useUncontrolledState[0],
98
102
  setActiveTabId = _useUncontrolledState[1];
99
- var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
103
+ var globalContext = core.useGlobalContext();
104
+ var tabsConfig = globalContext.tabs;
105
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
106
+ classNamesList: [tabsConfig === null || tabsConfig === void 0 ? void 0 : tabsConfig.classNames, classNamesProp],
107
+ stylesList: [tabsConfig === null || tabsConfig === void 0 ? void 0 : tabsConfig.styles, stylesProp],
108
+ info: {
109
+ props: Object.assign(Object.assign({}, rest), {
110
+ placement: placement,
111
+ type: type,
112
+ size: size
113
+ })
114
+ }
115
+ }),
116
+ classNames = _useMergeSemantic.classNames,
117
+ styles = _useMergeSemantic.styles;
118
+ var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
100
119
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
101
120
  ref: ref,
102
121
  role: role,
103
122
  className: cls,
104
- style: style
123
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
105
124
  }, rest), /*#__PURE__*/React__default["default"].createElement(TabList.TabList, {
106
125
  prefixCls: prefixCls,
107
126
  data: tabList,
@@ -125,9 +144,12 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
125
144
  showDivider: showDivider,
126
145
  onDragStart: onDragStart,
127
146
  extra: extra,
128
- maxTabTitleWidth: maxTabTitleWidth
147
+ maxTabTitleWidth: maxTabTitleWidth,
148
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.list,
149
+ style: styles === null || styles === void 0 ? void 0 : styles.list
129
150
  }), /*#__PURE__*/React__default["default"].createElement("div", {
130
- className: _prefix + "__content"
151
+ className: classname.cx(_prefix + "__content", classNames === null || classNames === void 0 ? void 0 : classNames.content),
152
+ style: styles === null || styles === void 0 ? void 0 : styles.content
131
153
  }, React__default["default"].Children.map(children, function (child) {
132
154
  return child ? /*#__PURE__*/React__default["default"].cloneElement(child, {
133
155
  key: child.props.tabId,
package/lib/esm/TabInk.js CHANGED
@@ -24,6 +24,7 @@ var TabInk = function TabInk(_ref) {
24
24
  if (!inkRef.current) return;
25
25
  if (!activeItemElement) return;
26
26
  var computedStyle = getComputedStyle(activeItemElement);
27
+ var rtl = containerElement ? getComputedStyle(containerElement).direction === 'rtl' : false;
27
28
  // issue: https://github.com/XiaoMi/hiui/issues/2937
28
29
  // 当设置transform缩放后，getBoundingClientRect 获取的值不准确，所以这里使用offset
29
30
  // const itemRect = activeItemElement.getBoundingClientRect()
@@ -37,22 +38,27 @@ var TabInk = function TabInk(_ref) {
37
38
  // 2px 保证尽量和文字顶部对齐，减少文本行高的影响
38
39
  top: offset + paddingTop + 2 + 'px',
39
40
  height: height - paddingTop - paddingBottom - 4 + "px",
41
+ insetInlineStart: '',
40
42
  left: '',
43
+ right: '',
41
44
  width: ''
42
45
  };
43
46
  } else {
44
- var paddingLeft = parseFloat(computedStyle.getPropertyValue('padding-left'));
45
- var paddingRight = parseFloat(computedStyle.getPropertyValue('padding-right'));
47
+ var paddingInlineStart = parseFloat(computedStyle.getPropertyValue('padding-inline-start'));
48
+ var paddingInlineEnd = parseFloat(computedStyle.getPropertyValue('padding-inline-end'));
46
49
  var width = activeItemElement.offsetWidth;
50
+ var inlineStart = (rtl ? -offset : offset) + paddingInlineStart;
47
51
  _style = {
48
- left: offset + paddingLeft + 'px',
49
- width: width - paddingRight - paddingLeft + "px",
52
+ insetInlineStart: inlineStart + 'px',
53
+ width: width - paddingInlineEnd - paddingInlineStart + "px",
50
54
  top: '',
51
- height: ''
55
+ height: '',
56
+ left: '',
57
+ right: ''
52
58
  };
53
59
  }
54
60
  Object.assign(inkRef.current.style, _style);
55
- }, [activeItemElement, getTabOffset, activeTabId, showHorizontal]);
61
+ }, [activeItemElement, containerElement, getTabOffset, activeTabId, showHorizontal]);
56
62
  useEffect(function () {
57
63
  setTabLnkPositionStyle();
58
64
  }, [setTabLnkPositionStyle]);
package/lib/esm/TabList.js CHANGED
@@ -19,6 +19,7 @@ import { LeftOutlined, UpOutlined, RightOutlined, DownOutlined, PlusOutlined } f
19
19
  import { isUndef, isArrayNonEmpty } from '@hi-ui/type-assertion';
20
20
  import { IconButton } from '@hi-ui/icon-button';
21
21
  import { useGlobalContext } from '@hi-ui/core';
22
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
22
23
  import { useResizeObserver } from './hooks/index.js';
23
24
  import { useLatestCallback } from '@hi-ui/use-latest';
24
25
  import { getNextTabId } from './utils/index.js';
@@ -32,6 +33,8 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
32
33
  var data = _a.data,
33
34
  className = _a.className,
34
35
  style = _a.style,
36
+ classNamesProp = _a.classNames,
37
+ stylesProp = _a.styles,
35
38
  activeId = _a.activeId,
36
39
  defaultActiveId = _a.defaultActiveId,
37
40
  onChange = _a.onChange,
@@ -59,14 +62,32 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
59
62
  showDivider = _a.showDivider,
60
63
  extra = _a.extra,
61
64
  maxTabTitleWidth = _a.maxTabTitleWidth,
62
- rest = __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"]);
63
- var _useGlobalContext = useGlobalContext(),
64
- globalSize = _useGlobalContext.size;
65
+ rest = __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"]);
66
+ var globalContext = useGlobalContext();
67
+ var globalSize = globalContext.size;
68
+ var tabListConfig = globalContext.tabList;
65
69
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
66
70
  if (size === 'xs') {
67
71
  size = 'sm';
68
72
  }
69
73
  var direction = (_c = placement !== null && placement !== void 0 ? placement : directionProp) !== null && _c !== void 0 ? _c : 'horizontal';
74
+ var _useMergeSemantic = useMergeSemantic({
75
+ classNamesList: [tabListConfig === null || tabListConfig === void 0 ? void 0 : tabListConfig.classNames, classNamesProp],
76
+ stylesList: [tabListConfig === null || tabListConfig === void 0 ? void 0 : tabListConfig.styles, stylesProp],
77
+ info: {
78
+ props: Object.assign(Object.assign({}, rest), {
79
+ data: data,
80
+ placement: direction,
81
+ type: type,
82
+ size: size,
83
+ showDivider: showDivider,
84
+ editable: editable,
85
+ draggable: draggable
86
+ })
87
+ }
88
+ }),
89
+ classNames = _useMergeSemantic.classNames,
90
+ styles = _useMergeSemantic.styles;
70
91
  var _useUncontrolledState = useUncontrolledState(function () {
71
92
  if (isUndef(defaultActiveId)) {
72
93
  return data[0] ? data[0].tabId : '';
@@ -140,6 +161,8 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
140
161
  return target;
141
162
  }, [showHorizontal]);
142
163
  var getTabOffset = useCallback(function (tabId) {
164
+ var targetElement = itemsRef.current[tabId];
165
+ if (!targetElement) return 0;
143
166
  // 获取目标元素的位置
144
167
  var targetPos = getTabPos(tabId);
145
168
  // 获取基准元素的位置（第一个）
@@ -149,7 +172,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
149
172
  basePos = getTabPos(baseItem.tabId);
150
173
  }
151
174
  // 返回目标元素相对基准元素的偏移量
152
- return targetPos ? targetPos - basePos : 0;
175
+ return targetPos - basePos;
153
176
  }, [data, getTabPos]);
154
177
  var syncScrollPosition = useCallback(function (tabId) {
155
178
  if (!innerElement) return;
@@ -306,11 +329,12 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
306
329
  initScrollPosition(activeId);
307
330
  }, [activeId, initScrollPosition]);
308
331
  return /*#__PURE__*/React.createElement("div", Object.assign({
309
- style: style,
310
- 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),
311
- ref: ref
332
+ ref: ref,
333
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
334
+ 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)
312
335
  }, rest), showScrollBtn ? ( /*#__PURE__*/React.createElement(IconButton, {
313
- className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
336
+ className: cx(showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn", classNames === null || classNames === void 0 ? void 0 : classNames.prevBtn),
337
+ style: styles === null || styles === void 0 ? void 0 : styles.prevBtn,
314
338
  effect: true,
315
339
  disabled: translatePos === 0,
316
340
  icon: showHorizontal ? /*#__PURE__*/React.createElement(LeftOutlined, null) : /*#__PURE__*/React.createElement(UpOutlined, null),
@@ -326,14 +350,15 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
326
350
  });
327
351
  }
328
352
  })) : null, /*#__PURE__*/React.createElement("div", {
329
- className: cx(prefixCls + "__list--inner"),
353
+ className: cx(prefixCls + "__list--inner", classNames === null || classNames === void 0 ? void 0 : classNames.inner),
354
+ style: styles === null || styles === void 0 ? void 0 : styles.inner,
330
355
  ref: setInnerElement
331
356
  }, /*#__PURE__*/React.createElement("div", {
332
- className: cx(prefixCls + "__list--scroll"),
357
+ className: cx(prefixCls + "__list--scroll", classNames === null || classNames === void 0 ? void 0 : classNames.scroll),
333
358
  ref: setScrollElement,
334
- style: showScrollBtn ? {
359
+ style: Object.assign(Object.assign({}, showScrollBtn ? {
335
360
  transform: direction === 'horizontal' ? "translateX(" + translatePos + "px)" : "translateY(" + translatePos + "px)"
336
- } : undefined
361
+ } : undefined), styles === null || styles === void 0 ? void 0 : styles.scroll)
337
362
  }, showData.map(function (item, index) {
338
363
  return /*#__PURE__*/React.createElement(TabItem, Object.assign({
339
364
  key: item.tabId
@@ -400,7 +425,8 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
400
425
  getTabOffset: getTabOffset
401
426
  })) : null)), showScrollBtn ? ( /*#__PURE__*/React.createElement(IconButton, {
402
427
  effect: true,
403
- className: showHorizontal ? prefixCls + "__right-btn" : prefixCls + "__down-btn",
428
+ className: cx(showHorizontal ? prefixCls + "__right-btn" : prefixCls + "__down-btn", classNames === null || classNames === void 0 ? void 0 : classNames.nextBtn),
429
+ style: styles === null || styles === void 0 ? void 0 : styles.nextBtn,
404
430
  disabled: translateBoundPos === -translatePos,
405
431
  icon: showHorizontal ? /*#__PURE__*/React.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null),
406
432
  onClick: function onClick() {
@@ -416,9 +442,11 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
416
442
  });
417
443
  }
418
444
  })) : null, editable ? ( /*#__PURE__*/React.createElement("div", {
419
- className: prefixCls + "__add-btn-wrap"
445
+ className: cx(prefixCls + "__add-btn-wrap", classNames === null || classNames === void 0 ? void 0 : classNames.addBtnWrap),
446
+ style: styles === null || styles === void 0 ? void 0 : styles.addBtnWrap
420
447
  }, /*#__PURE__*/React.createElement("div", {
421
- className: prefixCls + "__add-btn"
448
+ className: cx(prefixCls + "__add-btn", classNames === null || classNames === void 0 ? void 0 : classNames.addBtn),
449
+ style: styles === null || styles === void 0 ? void 0 : styles.addBtn
422
450
  }, /*#__PURE__*/React.createElement(IconButton, {
423
451
  effect: true,
424
452
  icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
package/lib/esm/Tabs.js CHANGED
@@ -14,6 +14,8 @@ import { __DEV__ } from '@hi-ui/env';
14
14
  import { TabList } from './TabList.js';
15
15
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
16
16
  import { isUndef } from '@hi-ui/type-assertion';
17
+ import { useGlobalContext } from '@hi-ui/core';
18
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
17
19
  var _role = 'tabs';
18
20
  var _prefix = getPrefixCls(_role);
19
21
  /**
@@ -25,6 +27,9 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
25
27
  _a$role = _a.role,
26
28
  role = _a$role === void 0 ? _role : _a$role,
27
29
  className = _a.className,
30
+ style = _a.style,
31
+ classNamesProp = _a.classNames,
32
+ stylesProp = _a.styles,
28
33
  children = _a.children,
29
34
  defaultActiveId = _a.defaultActiveId,
30
35
  activeId = _a.activeId,
@@ -45,7 +50,6 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
45
50
  onDragOver = _a.onDragOver,
46
51
  onDragEnd = _a.onDragEnd,
47
52
  onDrop = _a.onDrop,
48
- style = _a.style,
49
53
  _a$type = _a.type,
50
54
  type = _a$type === void 0 ? 'line' : _a$type,
51
55
  _a$size = _a.size,
@@ -53,7 +57,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
53
57
  showDivider = _a.showDivider,
54
58
  maxTabTitleWidth = _a.maxTabTitleWidth,
55
59
  extra = _a.extra,
56
- rest = __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"]);
60
+ rest = __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"]);
57
61
  var tabList = useMemo(function () {
58
62
  var list = [];
59
63
  React.Children.map(children, function (child) {
@@ -84,12 +88,27 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
84
88
  }, activeId, onChange),
85
89
  activeTabId = _useUncontrolledState[0],
86
90
  setActiveTabId = _useUncontrolledState[1];
87
- var cls = cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
91
+ var globalContext = useGlobalContext();
92
+ var tabsConfig = globalContext.tabs;
93
+ var _useMergeSemantic = useMergeSemantic({
94
+ classNamesList: [tabsConfig === null || tabsConfig === void 0 ? void 0 : tabsConfig.classNames, classNamesProp],
95
+ stylesList: [tabsConfig === null || tabsConfig === void 0 ? void 0 : tabsConfig.styles, stylesProp],
96
+ info: {
97
+ props: Object.assign(Object.assign({}, rest), {
98
+ placement: placement,
99
+ type: type,
100
+ size: size
101
+ })
102
+ }
103
+ }),
104
+ classNames = _useMergeSemantic.classNames,
105
+ styles = _useMergeSemantic.styles;
106
+ var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
88
107
  return /*#__PURE__*/React.createElement("div", Object.assign({
89
108
  ref: ref,
90
109
  role: role,
91
110
  className: cls,
92
- style: style
111
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
93
112
  }, rest), /*#__PURE__*/React.createElement(TabList, {
94
113
  prefixCls: prefixCls,
95
114
  data: tabList,
@@ -113,9 +132,12 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
113
132
  showDivider: showDivider,
114
133
  onDragStart: onDragStart,
115
134
  extra: extra,
116
- maxTabTitleWidth: maxTabTitleWidth
135
+ maxTabTitleWidth: maxTabTitleWidth,
136
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.list,
137
+ style: styles === null || styles === void 0 ? void 0 : styles.list
117
138
  }), /*#__PURE__*/React.createElement("div", {
118
- className: _prefix + "__content"
139
+ className: cx(_prefix + "__content", classNames === null || classNames === void 0 ? void 0 : classNames.content),
140
+ style: styles === null || styles === void 0 ? void 0 : styles.content
119
141
  }, React.Children.map(children, function (child) {
120
142
  return child ? /*#__PURE__*/React.cloneElement(child, {
121
143
  key: child.props.tabId,
package/lib/types/TabItem.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { TabPaneProps } from './TabPane';
3
3
  export declare const TabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement | null>>;
4
- export type EditActions = {
4
+ export declare type EditActions = {
5
5
  copy: (targetIndex?: number) => void;
6
6
  edit: () => void;
7
7
  delete: () => void;
package/lib/types/TabList.d.ts CHANGED
@@ -2,8 +2,13 @@ import React from 'react';
2
2
  import { TabPaneProps } from './TabPane';
3
3
  import { EditActions } from './TabItem';
4
4
  import { HiBaseHTMLProps } from '@hi-ui/core';
5
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
5
6
  export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement | null>>;
6
- export interface TabListProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop' | 'onCopy'> {
7
+ export declare type TabListSemanticName = 'root' | 'prevBtn' | 'inner' | 'scroll' | 'addInput' | 'nextBtn' | 'addBtnWrap' | 'addBtn';
8
+ export declare type TabListSemanticClassNames = SemanticClassNamesType<TabListProps, TabListSemanticName>;
9
+ export declare type TabListSemanticStyles = SemanticStylesType<TabListProps, TabListSemanticName>;
10
+ export declare type TabListSemantic = ComponentSemantic<TabListSemanticClassNames, TabListSemanticStyles>;
11
+ export interface TabListProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop' | 'onCopy'>, TabListSemantic {
7
12
  /**
8
13
  * tabs 面板数据
9
14
  */
package/lib/types/Tabs.d.ts CHANGED
@@ -1,12 +1,17 @@
1
1
  import React from 'react';
2
2
  import { TabPaneProps } from './TabPane';
3
3
  import { HiBaseHTMLProps } from '@hi-ui/core';
4
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
4
5
  import { EditActions } from './TabItem';
5
6
  /**
6
7
  * Tabs 标签页
7
8
  */
8
9
  export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement | null>>;
9
- export interface TabsProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop' | 'onCopy'> {
10
+ export declare type TabsSemanticName = 'root' | 'list' | 'content';
11
+ export declare type TabsSemanticClassNames = SemanticClassNamesType<TabsProps, TabsSemanticName>;
12
+ export declare type TabsSemanticStyles = SemanticStylesType<TabsProps, TabsSemanticName>;
13
+ export declare type TabsSemantic = ComponentSemantic<TabsSemanticClassNames, TabsSemanticStyles>;
14
+ export interface TabsProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop' | 'onCopy'>, TabsSemantic {
10
15
  /**
11
16
  * 是否可拖拽
12
17
  */
package/lib/types/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import './styles/index.scss';
2
3
  declare const Tabs: import("react").ForwardRefExoticComponent<import("./Tabs").TabsProps & import("react").RefAttributes<HTMLDivElement | null>> & {
3
4
  Pane: import("react").FC<import("./TabPane").TabPaneProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tabs",
3
- "version": "5.0.0-experimental.0",
3
+ "version": "5.0.0-rc.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -44,28 +44,29 @@
44
44
  "url": "https://github.com/XiaoMi/hiui/issues"
45
45
  },
46
46
  "dependencies": {
47
- "@hi-ui/button": "^5.0.0-experimental.0",
48
- "@hi-ui/classname": "^5.0.0-experimental.0",
49
- "@hi-ui/env": "^5.0.0-experimental.0",
50
- "@hi-ui/icon-button": "^5.0.0-experimental.0",
51
- "@hi-ui/icons": "^5.0.0-experimental.0",
52
- "@hi-ui/input": "^5.0.0-experimental.0",
53
- "@hi-ui/react-utils": "^5.0.0-experimental.0",
54
- "@hi-ui/tooltip": "^5.0.0-experimental.0",
55
- "@hi-ui/type-assertion": "^5.0.0-experimental.0",
56
- "@hi-ui/use-latest": "^5.0.0-experimental.0",
57
- "@hi-ui/use-id": "^5.0.0-experimental.0",
58
- "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
59
- "@hi-ui/use-unmount-effect": "^5.0.0-experimental.0"
47
+ "@hi-ui/button": "^5.0.0-rc.0",
48
+ "@hi-ui/classname": "^5.0.0-rc.0",
49
+ "@hi-ui/env": "^5.0.0-rc.0",
50
+ "@hi-ui/icon-button": "^5.0.0-rc.0",
51
+ "@hi-ui/icons": "^5.0.0-rc.0",
52
+ "@hi-ui/input": "^5.0.0-rc.0",
53
+ "@hi-ui/react-utils": "^5.0.0-rc.0",
54
+ "@hi-ui/tooltip": "^5.0.0-rc.0",
55
+ "@hi-ui/type-assertion": "^5.0.0-rc.0",
56
+ "@hi-ui/use-latest": "^5.0.0-rc.0",
57
+ "@hi-ui/use-merge-semantic": "^5.0.0-rc.0",
58
+ "@hi-ui/use-id": "^5.0.0-rc.0",
59
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-rc.0",
60
+ "@hi-ui/use-unmount-effect": "^5.0.0-rc.0"
60
61
  },
61
62
  "peerDependencies": {
62
- "@hi-ui/core": ">=5.0.0-experimental.0",
63
+ "@hi-ui/core": ">=5.0.0-rc.0",
63
64
  "react": ">=16.8.6",
64
65
  "react-dom": ">=16.8.6"
65
66
  },
66
67
  "devDependencies": {
67
- "@hi-ui/core": "^5.0.0-experimental.0",
68
- "@hi-ui/core-css": "^5.0.0-experimental.0",
68
+ "@hi-ui/core": "^5.0.0-rc.0",
69
+ "@hi-ui/core-css": "^5.0.0-rc.0",
69
70
  "react": "^17.0.1",
70
71
  "react-dom": "^17.0.1"
71
72
  }